Recommended
More Related Content
What's hot
What's hot (20)
Similar to FuelPHP活用事例
Similar to FuelPHP活用事例 (20)
More from Yusuke Naka
More from Yusuke Naka (20)
Recently uploaded
Recently uploaded (9)
FuelPHP活用事例
- 2. 自己紹介 ! 仲 裕介（ なかゆうすけ / @Tukimikage ） ! NTTコミュニケーションズ所属 ! R&Dな部署にいます ! http://html5lab.ntt.com/ ! オフィシャルワーク ! HTML5 Experts.jp 副編集長 ! WebRTC BaaS SkyWay 中の人 ! コミュニティーワーク ! FuelPHP&CodeIgniter ユーザの集い 共催 ! WebRTC Meetup Tokyo 共催 ! html5j自動車部 部長
- 3. 今日話すこと ! WebRTC開発者向けプラットフォーム「SkyWay」でのFuelPHP活用事例 ! SkyWayの概要 ! FuelPHPをどこで利用しているのか ! 開発体制 ! 開発環境 ! FuelPHP活用事例 ! プロジェクト作成 ! プロジェクト構造 ! 実装ポイント（８個） ※ 実際のソースコードなんかもお見せしながら進めます
- 5. SkyWayの概要
- 7. WebRTCとは？ ! ひとことで言うと「ブラウザでテレビ電話を実現する技術」 ! ブラウザだけで、プラグインのインストール無しに、Web会議、ボイスチャット、 テキストチャット、ファイル転送、電話との連携等が実現可能。 Web WebRTC
- 8. SkyWayとは？ ! WebRTC利用アプリを簡単に開発できるクラウド基盤 ! 2013/12/5提供開始 ! 無料！ ! 提供内容 ! Signaling API ! STUN API ! クライアントライブラリ ! 開発者ドキュメント ! サンプルアプリ ! 開発者向けダッシュボード https://skyway.io NAT NAT STUN API Signaling API STUN API Peer to Peer SkyWay
- 9. ちょっと宣伝・・・ ! WebRTC Conference Japan ! 日本初のカンファレンス！ ! エンジニアは無料！ http://webrtcconference.jp/
- 11. ! 開発者向けダッシュボードの開発に利用 ! バックエンド開発 ! 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
- 12. 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
- 13. 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 叩かれます
- 15. まずは開発体制
- 17. 次は開発環境
- 18. 開発環境 Provision サーバ Stage(本番擬似環境) Test (インテグレーション) Production (本番環境) Dev（ローカル開発環境） 開発マシン Pull / Push 運用監視 PM系 Pull Request Builder (PRトリガ) 障害通知 内製 Cloud Formation ぽいやつ メール 送信擬似 通知 CI環境
- 19. ローカル開発環境 ! 開発マシン：Mac ! ディスプレイは縦置きでｗ ! IDE：Intellij IDEA ! エンジニアの能力をみるみる奪っていくｗ ! DB操作も楽ちん ! 環境：Vagrant+Chefで開発環境を構築 ! なんだかんだ言って最初の構築は大変 ! ChefはAnsibleに移行中
- 20. CI環境 ! Jenkins ! はずせませんが、プラグインとの相性とかオンプレで立てると色々あるね ! GitHub Enterprise ! 高いけど便利ですね、やっぱり便利 ! Chef ! 重量級でヘビー ! Ansible ! Chefから移行中 ! http://techracho.bpsinc.jp/yamasita-taisuke/2014_05_29/17567 ! expect ! やらなければよかった・・・ということで、AnsibleかFabricに移行予定
- 21. クラウド環境 ! 自社サービス Cloudn ! 安くて便利 ! トラフィック課金なし ! AWS互換のAPI提供 ! ただいまキャンペーン中 http://www.ntt.com/cloudn/index.html
- 22. ここからはFuelPHP活用事例
- 23. FuelPHPとは（おさらい） ! PHP製Webフレームワーク ! 1系はPHP5.3.3以上（2系はPHP5.4以上） ! MITライセンス ! 日本語ドキュメントや書籍多数 ! 機能 ! HMVC ! RestAPI用コントローラー ! ORM ! DB Migration ! Auｔｈパッケージ等のパッケージ管理 ! 各種脆弱性対策 ! テンプレートエンジン ! Composer対応（2系ではフルサポート） ! oilコマンドによるスキャフォールディング ! コマンドラインでのタスク実行機能 ! PHPUnitを統合
- 24. プロジェクトを作る
- 25. プロジェクト作成 ! 開発当初FuelPHP 1.7.1だったので・・・ ! chatiiさんのfuelphp_setupを利用してcomposerでインストール ! https://github.com/chatii/fuelphp_setup ! その後、開発中にv1.8-devまでバージョンアップ ! バージョンアップは php composer.phar update で。
- 26. プロジェクト構造 Rest Controller : SPAのバックエンド向け Controller：SPA以外のページ向け ORM Modelベースにカスタマイズ ４つの環境用にコンフィグを管理 アプリケーションのコンフィグはひとつにまとめる 管理者向けのツールはoil taskで用意 単体テストはPHPUnit 機能テストはGoutte+PHPUnit SPAベースとなるViewファイル、SPA以 外のViewファイルを用意 SPA開発用関連ファイル JSとかCSS DBはmigrationで世代管理
- 27. 実装のポイント
- 28. ユーザ認証 ! ormauthを利用 ! ORMでデータベースアクセスするので親和性がいい ! かなりのテーブルが作成されるけど殆ど使わない ! ID or メールアドレス/パスワードではなくメールアドレス/パスワー ドでログイン出来るように運用対処 ! SNS連携 ! Opauthを利用する予定（まだ実装できてない）
- 29. コンフィグファイル管理 ! アプリケーションに関するコンフィグは１つにまとめる ! config.phpのAutoloadでカスタムコンフィグを指定 ! ４つの環境でコンフィグ管理 ! development : ローカル開発環境 ! test ： インテグレーション環境 ! stage ： ステージング環境 ! production ： 本番環境
- 30. ルーティング ! ルーティングは見栄え良くｗ ! コントローラー名は隠す ! RestAPIはプロトコルで振り分け
- 31. テスト ! 単体テストはPHPUnitで ! テストグループをなるべく細かく分けてデバッグしやすいように ! ただ、例外が発生した時のデバッグ作業はマジ大変・・・ ! だれか良い方法教えて下さい。 ! コントローラーのテストはGoutteで ! SPA部分以外はGoutteでスクレイピングしてテストする ! RestAPIもGoutteでテスト ! 戻ってくるjsonはseek(0)してgetContents()しないと取得できないので注意
- 32. タスク ! 管理者向け機能は最小限にtaskで実 現 ! 日常の些細なこともタスクにしておくと楽 ちん・・・ ! Cliクラスでコマンドラインの対話型プロ グラムも簡単に 例えば、Authパッケージのディフォルトユーザを削除するとか
- 33. セキュリティ ! SPA時代のセキュリティ ! RestAPIのサニタイジング ! Fuelphpは出力エンコーディング（サニタイジング）を前提にしている ! View出力する値はSecurity::htmlentities()でフィルタされる ! RestAPIの戻り値はフィルタされない ! SPAが主流になるこれからの時代必須→今回は手動で。 ! RestAPIのリクエスト・レスポンスでCSRFトークンの更新を行う ! SPAで画面遷移が無いため、RestAPIアクセスを契機にトークンの更 新を行う
- 35. フロントエンド開発との連携 ! SPAの登場 ! サーバサイドレンダリングからクライアントサイドレンダリングへ ! 様々なフロントエンドフレームワークの登場でクライアントがリッチに ! タスクランナーやビルドツールなどの台頭 ! 設計など課題も多い ! SPAを構築するときに知っておいた方がいい7つの課題 http://blog.mitsuruog.info/2014/01/spa7.html
- 36. フロントエンド開発との連携 ! 今回、開発する上であがった課題 ! プロジェクト上のFuelPHPとSPAの同居方法 ! ページごとの実装方針（SPAかサーバサイドレンダリング） ! テストの棲み分けはどうするか ※ 今回の開発ではフロントエンド開発にはTypeScript、SCSS、jsRenderを利用
- 37. 課題１：プロジェクト上のFuelPHPとSPAの同居方法 開発フローとフォルダ構造 1) 開発用ファイルはscriptsディレクトリへ設置し開発 2) IDEでビルドし、public/assets/(css or js)/src内に出力 3) gruntでそれらをminify・結合し、public/assets/(css or js)/ distに出力 １ ２ ２ ３ ３ １ TSファイル等をfuelディレクトリの外に置くことで、そ のままデプロイしてもインターネットからアクセスされ ることを防ぐ。（ルートはpublic/なので）
- 39. 課題２：ページごとの実装方針（SPAかサーバサイドレンダリング） ! どのページをSPAにするかサーバサイドレンダリングにするか ! 今回はログインで分けた ! ログイン認証前はサーバサイドレンダリング ! ログイン後はSPA
- 40. 課題３：テストの棲み分けは？ ! サーバサイドテストとクライアントサイドテストの役割 ! 役割として重複してしまうこともあるので役割分担が必要 ! サーバサイド ! ユニットテスト：Modelの実装を確かめる ! 機能テスト：Controllerの実装を確かめる ! サーバサイドレンダリング部分はスクレイピングを行いUIテストも兼ねる ! クライアントサイド ! ユニットテスト：functionの実装を確かめる ! セッション管理されているRestAPIなどのテストは工夫が必要 ! サーバサイドの機能テストとかぶるので諦めてもいいかも ! UIテスト：SPAに関係するUIの動きを確かめる ! seleniumとか使うと幸せに
- 41. フロントエンド開発との連携 ! 環境変数をサーバサイドとクライアントサイドで一元化し活用 ! development環境だとjavascriptやCSSはminify前のモノを読み込む ! Viewのテンプレートを出し分ける ! javascriptのconsole.logの表示非表示を切り替える
- 42. まとめ ! WebRTC開発者向けプラットフォーム「SkyWay」でのFuelPHP活用事例 ! SkyWayの概要 ! FuelPHPをどこで利用しているのか ! 開発体制 ! 開発環境 ! FuelPHP活用事例 ! プロジェクト作成 ! プロジェクト構造 ! 実装ポイント（８個）