FuelPHP活用事例	
2015/01/17
FuelPHP&CodeIgniter ユーザの集い #7
自己紹介	
!   仲 裕介( なかゆうすけ / @Tukimikage )
!   NTTコミュニケーションズ所属
!   R&Dな部署にいます
!   http://html5lab.ntt.com/
!   オフィシャルワーク
!   HTML5 Experts.jp 副編集長
! WebRTC BaaS SkyWay 中の人
!   コミュニティーワーク
! FuelPHP&CodeIgniter ユーザの集い 共催
! WebRTC Meetup Tokyo 共催
!   html5j自動車部 部長
今日話すこと	
! WebRTC開発者向けプラットフォーム「SkyWay」でのFuelPHP活用事例
! SkyWayの概要
! FuelPHPをどこで利用しているのか
!   開発体制
!   開発環境
! FuelPHP活用事例
!   プロジェクト作成
!   プロジェクト構造
!   実装ポイント(8個)
※ 実際のソースコードなんかもお見せしながら進めます
対象聴者	
! FuelPHPを参考書を片手に色々触っている方
! FuelPHPをこれから業務で使いたい方
 (FuelPHPを全く知らない人は厳しいかも)
SkyWayの概要
WebRTC利用アプリを簡単に開発できるクラウド基盤
WebRTCとは?	
!   ひとことで言うと「ブラウザでテレビ電話を実現する技術」	
!   ブラウザだけで、プラグインのインストール無しに、Web会議、ボイスチャット、
テキストチャット、ファイル転送、電話との連携等が実現可能。	
Web WebRTC
SkyWayとは?	
! WebRTC利用アプリを簡単に開発できるクラウド基盤
!   2013/12/5提供開始
!   無料!
!   提供内容
!   Signaling API
!   STUN API
!   クライアントライブラリ
!   開発者ドキュメント
!   サンプルアプリ
!   開発者向けダッシュボード	
https://skyway.io	
NAT
NAT
STUN
API
Signaling
API
STUN
API
Peer to
Peer
SkyWay
ちょっと宣伝・・・	
! WebRTC Conference Japan
!   日本初のカンファレンス!
!   エンジニアは無料!
http://webrtcconference.jp/
FuelPHPをどこで利用しているのか?
!   開発者向けダッシュボードの開発に利用
!   バックエンド開発
! FuelPHP Ver 1.8-Dev
!   開発当初は 1.7.1
! ORM:FuelPHP Orm Package
! Auth Package:Ormauth
!   Test:phpunit+Gutte
!   フロントエンド開発(SPA)
!   Lang:TypeScript
! UI-FW:JsRender,Bootstrap
!   CSS:SCSS
!   Other;Jquery
!   Test:Mocha+chai
! TaskRunner:Grunt
SkyWayシステム構成	
!   クラウド環境上にホスティング(概略)	
Rev Proxy	
Signaling&STUN	
 DB	
 Monitoring etc	
AP	
Front Seg	
 Back Seg	
Hosted by Cloudn VPC Type
http://www.ntt.com/cloudn/data/server3.html	
 Usergrid
FuelPHPに関係するサーバ	
!   クラウド環境上にホスティング	
Rev Proxy	
Signaling&STUN	
 DB	
 Monitoring etc	
AP	
Front Seg	
 Back Seg	
Hosted by Cloudn VPC Type
http://www.ntt.com/cloudn/data/server3.html	
FuelPHP製ダッシュボードアプリを設置
 WebSever : nginx+php-fpm 
DB : MySQLフロントにnginxを
設置
Usergrid	
APがRestAPI叩
かれます
APからRestAPI
叩かれます
今回は、FuelPHPを活用したダッ
シュボード開発について紹介します
まずは開発体制
開発メンバは2人しかいない!	
フロントエンド開発(メイン)
バックエンド開発(サポート)
UIデザイン
インフラ構築
バックエンド開発
@iwashi86@Tukimikage
次は開発環境
開発環境	
Provision
サーバ	
Stage(本番擬似環境)	
Test (インテグレーション)	
Production (本番環境)	
Dev(ローカル開発環境)	
開発マシン	
 Pull / Push	
運用監視	
PM系	
Pull Request
Builder
(PRトリガ)	
障害通知	
内製
Cloud
Formation
ぽいやつ	
メール
送信擬似	
通知	
CI環境
ローカル開発環境	
!   開発マシン:Mac
!   ディスプレイは縦置きでw
!   IDE:Intellij IDEA
!   エンジニアの能力をみるみる奪っていくw
!   DB操作も楽ちん
!   環境:Vagrant+Chefで開発環境を構築
!   なんだかんだ言って最初の構築は大変
!   ChefはAnsibleに移行中
CI環境	
!   Jenkins
!   はずせませんが、プラグインとの相性とかオンプレで立てると色々あるね
! GitHub Enterprise
!   高いけど便利ですね、やっぱり便利
!   Chef
!   重量級でヘビー
! Ansible
!   Chefから移行中
!   http://techracho.bpsinc.jp/yamasita-taisuke/2014_05_29/17567
!   expect
!   やらなければよかった・・・ということで、AnsibleかFabricに移行予定
クラウド環境	
!   自社サービス Cloudn
!   安くて便利
!   トラフィック課金なし
!   AWS互換のAPI提供
!   ただいまキャンペーン中
	
http://www.ntt.com/cloudn/index.html
ここからはFuelPHP活用事例
FuelPHPとは(おさらい)	
!  PHP製Webフレームワーク
!  1系はPHP5.3.3以上(2系はPHP5.4以上)
!  MITライセンス
!  日本語ドキュメントや書籍多数	
!  機能
!  HMVC
! RestAPI用コントローラー
!  ORM
!  DB Migration
!  Authパッケージ等のパッケージ管理
!  各種脆弱性対策
!  テンプレートエンジン
!  Composer対応(2系ではフルサポート)
!  oilコマンドによるスキャフォールディング
!  コマンドラインでのタスク実行機能
! PHPUnitを統合
プロジェクトを作る
プロジェクト作成	
!   開発当初FuelPHP 1.7.1だったので・・・
! chatiiさんのfuelphp_setupを利用してcomposerでインストール
!   https://github.com/chatii/fuelphp_setup
!   その後、開発中にv1.8-devまでバージョンアップ
!   バージョンアップは php composer.phar update で。
プロジェクト構造	
Rest Controller : SPAのバックエンド向け
Controller:SPA以外のページ向け	
ORM Modelベースにカスタマイズ
4つの環境用にコンフィグを管理
アプリケーションのコンフィグはひとつにまとめる
管理者向けのツールはoil taskで用意
単体テストはPHPUnit
機能テストはGoutte+PHPUnit
SPAベースとなるViewファイル、SPA以
外のViewファイルを用意
SPA開発用関連ファイル
JSとかCSS
DBはmigrationで世代管理
実装のポイント
ユーザ認証	
! ormauthを利用
!   ORMでデータベースアクセスするので親和性がいい
!   かなりのテーブルが作成されるけど殆ど使わない
!   ID or メールアドレス/パスワードではなくメールアドレス/パスワー
ドでログイン出来るように運用対処
!   SNS連携
! Opauthを利用する予定(まだ実装できてない)
コンフィグファイル管理	
!   アプリケーションに関するコンフィグは1つにまとめる
! config.phpのAutoloadでカスタムコンフィグを指定
!   4つの環境でコンフィグ管理
!   development : ローカル開発環境
!   test : インテグレーション環境
!   stage : ステージング環境
!   production : 本番環境
ルーティング	
!   ルーティングは見栄え良くw
!   コントローラー名は隠す
! RestAPIはプロトコルで振り分け
テスト	
!   単体テストはPHPUnitで
!   テストグループをなるべく細かく分けてデバッグしやすいように
!   ただ、例外が発生した時のデバッグ作業はマジ大変・・・
!   だれか良い方法教えて下さい。
!   コントローラーのテストはGoutteで
!   SPA部分以外はGoutteでスクレイピングしてテストする
! RestAPIもGoutteでテスト
!   戻ってくるjsonはseek(0)してgetContents()しないと取得できないので注意
タスク	
!   管理者向け機能は最小限にtaskで実
現
!   日常の些細なこともタスクにしておくと楽
ちん・・・
! Cliクラスでコマンドラインの対話型プロ
グラムも簡単に
例えば、Authパッケージのディフォルトユーザを削除するとか
セキュリティ	
!   SPA時代のセキュリティ
! RestAPIのサニタイジング
! Fuelphpは出力エンコーディング(サニタイジング)を前提にしている
!   View出力する値はSecurity::htmlentities()でフィルタされる
! RestAPIの戻り値はフィルタされない
!   SPAが主流になるこれからの時代必須→今回は手動で。
! RestAPIのリクエスト・レスポンスでCSRFトークンの更新を行う
!   SPAで画面遷移が無いため、RestAPIアクセスを契機にトークンの更
新を行う
セキュリティ	
1,初回ログイン時Cookieでトークンを送信	
SPA	
 FuelPHP	
2,RestAPIアクセス時にリクエストヘッダにのせてトークンを送信	
3,Cookieで新しいトークンを送信	
トークンA	
トークンA	
 トークンA	
トークン検証	
トークンB	
	
トークンA	
トークン保持
フロントエンド開発との連携	
!   SPAの登場
!   サーバサイドレンダリングからクライアントサイドレンダリングへ
!   様々なフロントエンドフレームワークの登場でクライアントがリッチに
!   タスクランナーやビルドツールなどの台頭
!   設計など課題も多い
!   SPAを構築するときに知っておいた方がいい7つの課題  
http://blog.mitsuruog.info/2014/01/spa7.html
フロントエンド開発との連携	
!   今回、開発する上であがった課題
!   プロジェクト上のFuelPHPとSPAの同居方法
!   ページごとの実装方針(SPAかサーバサイドレンダリング)
!   テストの棲み分けはどうするか
※ 今回の開発ではフロントエンド開発にはTypeScript、SCSS、jsRenderを利用
課題1:プロジェクト上のFuelPHPとSPAの同居方法	
開発フローとフォルダ構造
1)  開発用ファイルはscriptsディレクトリへ設置し開発
2)  IDEでビルドし、public/assets/(css or js)/src内に出力
3)  gruntでそれらをminify・結合し、public/assets/(css or js)/
distに出力
1	
2	
2	
3	
3	
1	
TSファイル等をfuelディレクトリの外に置くことで、そ
のままデプロイしてもインターネットからアクセスされ
ることを防ぐ。(ルートはpublic/なので)
課題1:プロジェクト上FuelPHPとSPAをどうやって同居させるか	
Viewファイルの構造
 default
	
home	
copyright	
alert	
jstemplate
	
loadfiles	
jstemplate部分をJSでdom生成	
s
i
d
e
m
e
n
u	
activationalert
課題2:ページごとの実装方針(SPAかサーバサイドレンダリング)	
!   どのページをSPAにするかサーバサイドレンダリングにするか
!   今回はログインで分けた
!   ログイン認証前はサーバサイドレンダリング
!   ログイン後はSPA
課題3:テストの棲み分けは?	
!   サーバサイドテストとクライアントサイドテストの役割
!   役割として重複してしまうこともあるので役割分担が必要
!   サーバサイド
!   ユニットテスト:Modelの実装を確かめる
!   機能テスト:Controllerの実装を確かめる
!   サーバサイドレンダリング部分はスクレイピングを行いUIテストも兼ねる
!   クライアントサイド
!   ユニットテスト:functionの実装を確かめる
!   セッション管理されているRestAPIなどのテストは工夫が必要
!   サーバサイドの機能テストとかぶるので諦めてもいいかも
!   UIテスト:SPAに関係するUIの動きを確かめる
!   seleniumとか使うと幸せに
フロントエンド開発との連携	
!   環境変数をサーバサイドとクライアントサイドで一元化し活用
!   development環境だとjavascriptやCSSはminify前のモノを読み込む
!   Viewのテンプレートを出し分ける
! javascriptのconsole.logの表示非表示を切り替える
まとめ	
! WebRTC開発者向けプラットフォーム「SkyWay」でのFuelPHP活用事例
! SkyWayの概要
! FuelPHPをどこで利用しているのか
!   開発体制
!   開発環境
! FuelPHP活用事例
!   プロジェクト作成
!   プロジェクト構造
!   実装ポイント(8個)

FuelPHP活用事例