20151205フルスクラッチcms作成のノウハウ With Laravel
Download as PPTX, PDF9 likes4,322 views
Remixing Vol.3 with オールアバウト and LIG https://remixing.doorkeeper.jp/events/34982 で発表した資料になります。 CMS開発を汎用CMSを使うのかフルスクラッチするのか。 また、LaravelでフルスクラッチCMSを作る時のノウハウなどについて。
More Related Content
What's hot (20)
Viewers also liked (20)
![[Laravel] CRUDアプリから一歩踏み出す3つのアプローチ](https://cdn.slidesharecdn.com/ss_thumbnails/crud3-170727044008-thumbnail.jpg?width=560&fit=bounds)
Similar to 20151205フルスクラッチcms作成のノウハウ With Laravel (20)
![[CTO Night & Day 2019] CTO のための一歩進んだコンテナ入門 #ctonight](https://cdn.slidesharecdn.com/ss_thumbnails/ctond2019morningsessioncontainer-191027185843-thumbnail.jpg?width=560&fit=bounds)
20151205フルスクラッチcms作成のノウハウ With Laravel
- 2. 自己紹介 吉田拓実(Yoshida Takumi) @y_takky2014 https://twitter.com/y_takky2014 http://qiita.com/takky 趣味 Copyright 2015 All About,inc. 2
- 3. 最近のお仕事 All About Japanの新規開発 Copyright 2015 All About,inc. 3
- 4. 今回伝えたいこと フルスクラッチでCMSを開発する際の メリット?デメリット LaravelでCMSを開発する良さ 開発のノウハウ Copyright 2015 All About,inc. 4
- 5. CMS何使ってます? Copyright 2015 All About,inc. 5
- 6. 汎用CMSを案件で使うメリット 権限管理?画像アップロード? プレビュー機能など基本的なものは 揃っている 実装の必要がほぼない Copyright 2015 All About,inc. 6 UPLOAD PREVIEW
- 7. 汎用CMSのデメリット 拡張しづらい データの持ち方がCMS依存 要件が複雑だとコアに手を入れないと 実現不可なことも??? CMS自体のアップデートや プラグインのアップデートができない Copyright 2015 All About,inc. 7
- 9. 管理する要素 記事 執筆者 テーマ(トップページのデザイン設定) タグ 記事タイプが3種類 まとめっぽいもの 1ページもの 旅行の日程みたいに日毎に ページングするもの Copyright 2015 All About,inc. 9 汎用CMSの限界と今回の要件
- 10. フルスクラッチを決断した理由 要件を満たせる汎用CMSがなかった 要件満たすように改修しても 同じくらいの工数がかかりそうだった 幸いにもリソースに余裕があった 今後の拡張やメンテのことを考えて 汎用CMSでメディアの長期運営は難しい 一時期WordPressで実装していたことも?? Copyright 2015 All About,inc. 10
- 11. CMSをフルスクラッチで作る メリット 社内の細かい要望を叶えられる Copyright 2015 All About,inc. 11 この機能では画像アップロードの 時にトリミングを こっちではトリミング機能いらない
- 12. CMSをフルスクラッチで作る メリット 社内の細かい要望を叶えられる Copyright 2015 All About,inc. 12 この機能では画像アップロードの 時にトリミングを こっちではトリミング機能いらない 編集中にミスってブラウザバック して編集内容なくなるから アラート出すようにして
- 13. 記事データの活用が容易 Copyright 2015 All About,inc. 13 CMSをフルスクラッチで作る メリット CMS DB Front RSS API
- 14. リリース後のメンテナンス 機能拡張が容易 Copyright 2015 All About,inc. 14 CMSをフルスクラッチで作る メリット 新しく記事をまとめ直した ページを作りたい
- 15. フルスクラッチのデメリット 各機能の実装が必要 コード量?開発工数は多い Copyright 2015 All About,inc. 15 UPLOAD TRIMMING PREVIEW ROLE
- 16. ここまでのまとめ Copyright 2015 All About,inc. 16 フルスクラッチ 汎用CMS 自分で機能の実装が必要 機能が用意されている 工数がかかる 少ない工数で実装可能 拡張の実装がしやすい 拡張の実装がしにくい データの有効活用可能 CMSのデータ構造に 影響される 要件を最大限に満たすこと ができる CMSの機能内だとスムーズ に実現できる フルスクラッチ?汎用CMSの メリット?デメリットを考えて適切な選択を！
- 17. All About Japanのシステム構成 (サーバサイド) Copyright 2015 All About,inc. 17 Front CMS 5.5 5.6 5 Laravel
- 18. Laravelとは シンプルで可読性の高い コードが書ける モダンフレームワーク 最新バージョンは5.1.11 LTS(12/5現在) Laravelリファレンス 2016/1/8発売! 出版社インプレス Copyright 2015 All About,inc. 18 Laravel
- 19. 多言語対応 Copyright 2015 All About,inc. 19 Laravelを用いるメリット viewでの実装 言語ファイル
- 20. ファイルシステム Copyright 2015 All About,inc. 20 Laravelを用いるメリット ローカル ローカル ストレージ 本番 S3
- 21. リソースフルコントローラ コマンドラインでひな形を自動生成 メソッド + パス で処理を切り分けることができる Copyright 2015 All About,inc. 21 Laravelを用いるメリット メソッド パス アクション GET /article index GET /article/create create POST /article store GET /article/{id} show GET /article/{id}/edit edit PUT/PATCH /article/{id} update DELETE /article/{id} destriy
- 22. Validator Copyright 2015 All About,inc. 22 Laravelを用いるメリット integer 整数であること email メールアドレスであること image 画像ファイル(jpg,png,bmp???)であること required 入力が存在するかバリデート alpha_dash アルファベットと-,_であること
- 23. Eloquent ORM LaravelのORM 便利メソッド?機能が複数用意されている クエリスコープ よく使う検索条件をメソッド化 Copyright 2015 All About,inc. 23 Laravelを用いるメリット
- 24. Composerでライブラリ管理 PHPの依存管理システム ライブラリの導入が用意に Packagist Copyright 2015 All About,inc. 24 Laravelを用いるメリット
- 25. Ace Responsive Admin Template Bootstrapをwrapしたテンプレート デザインを知らなくてもかっこいいUIが 作れる Copyright 2015 All About,inc. 25
- 26. 汎用CMSにあるこんな機能が バインドされている 画像ギャラリー カラーピッカー DateTimepicker ドラック&ドロップでファイルアップロード Copyright 2015 All About,inc. 26 Ace Responsive Admin Template
- 27. Ace Admin + Laravelでの 開発ノウハウ Select2 Select boxを使いやすくする jQueryライブラリ 検索機能がつくselect boxを作成可能 1行で実装可能 Copyright 2015 All About,inc. 27
- 28. 画像処理 intervention/imageというライブラリを使う Laravelに対応している画像処理のライブラリ LaravelのRequestを元に画像ファイルの 生成ができる Copyright 2015 All About,inc. 28 Ace Admin + Laravelでの 開発ノウハウ crop($width,$height,$x,$y) 幅?高さ?座標でトリミング resize($width,$height) 幅?高さにリサイズ encode($format) 指定した形式に変更 filesize() 画像のファイルサイズを取得 text($text, $x, $y) 座標の位置にテキストを付与す る
- 29. エンジニア視点から見たCMS 作成のメリット いろいろな技術に触れられる サーバーサイド、フロントエンド フレームワークの使い方 HTML Javascript/jQuery ライブラリ DBの読み書き?トランザクション 新卒?若手エンジニアの育成とかにも おすすめ Copyright 2015 All About,inc. 29
- 30. まとめ フルスクラッチで作るメリット 長期間のメディア運営のために メンテナンス性?拡張性 細かい仕様に応えることが可能 データの有効活用 案件に応じた使い分けが必要 短期間で実装したい CMSの機能で十分 というときは、汎用CMSを使うことも視野に Copyright 2015 All About,inc. 30
- 31. オールアバウトでの CMS開発ノウハウまとめ Laravel + Ace Responsive Admin Template を使用 Laravelでデフォルトである機能が CMS構築の際に便利に使える リソースフルコントローラ Validation ファイルシステム Ace Responsive Admin Templateを 使うことで エンジニアでもかっこいいUIのCMS Copyright 2015 All About,inc. 31
- 32. 募集しています!!! 企画?編集の人と一緒に各種サービスや 社内システム開発をしたい WEBエンジニア オールアバウトのインフラを支える インフラエンジニア Copyright 2015 All About,inc. 32
- 33. アドベントカレンダーやってます Copyright 2015 All About,inc. 33
- 34. ご清聴ありがとうございました Copyright 2015 All About,inc. 34
Editor's Notes
- #4: 最近何をやっているかというとAll About Japanという新規メディアの開発をしていました。 日本に訪れる外国人向けのメディアで今は英語?繁体?簡体中国語の3言語対応で、一昨日今後タイ語?韓国語対応しました。 そして、このメディアですが、CMS?front共にフルスクラッチで開発しています。
- #5: 今回伝えたいこととして3つあります。 前ページで紹介したAll About JapanのCMSをフルスクラッチで開発したので、フルスクラッチでCMSを開発する際のメリットデメリットというところと 開発のノウハウや、このCMSはLaravelというPHPのフレームワークで作られているのでLaravelでCMSを開発する良さなどを紹介したいと思います。
- #6: CMSということで、PHPが使える汎用CMSをあげたましたが、この中でWordPress使ったことあるかたいらっしゃいますか？ 厳密にCMSというと違うかもしれませんが、やはりWordPressが有名です。 最近Concrete5 なども日本のユーザが増えてきていますし、 ベータ版ですがLaravelをベースにした OCTOBERなども出てきています。
- #7: 案件で皆さん汎用CMSを使っていると思うのですが、 権限管理や画像アップロード?プレビュー機能など基本的な物がそろっていて、実装の必要がほぼなく開発がスムーズに行くからという理由で選択されるかと思います。
- #8: ただ、デメリットとして大規模拡張がしづらいという点や、 データの持ち方がCMSに依存するという点があると思います。 例えばWordPressの公開済みの記事データを執筆者情報と一緒に取得するクエリを書こうとすると慣れている人ではないとわかりづらくなっています。 データの利用がCMSに依存してしまいます。 私の入社前で経緯は不明ですが、コアに手が入っていてWordPressのアップデートができないということもありました。 また、WordPress自体はアップデートできたのですが、プラグインが対応しておらず別のプラグインのコアを改修して機能を実現したということもありました。
- #9: メリットとデメリットをあげましたが、要件が複雑化してくると汎用CMSでは対応が難しくなってしまいます。 今回のCMS開発の要件として CMS自体も多言語化対応をすることや CMSは社内のみではなく社外のライターも執筆するため権限が必要。 また、IDとしてCMS独自に持つのではなく自社のログインサービスの オールアバウトメンバーズ と連携したいなどの要件がありました。
- #10: 加えて記事の執筆、執筆者の管理、トップページのテーマ設定 これは、画像の差し替えや文字色の変更機能ですね。 タグの管理?spotと呼ばれている記事ではないコンテンツで、静的ペラ1枚のページを動的に作っているものの管理が必要となっています。 更に記事のタイプが3種類あってそれによりfront側での見せ方が異なります このような要件を汎用CMSで構築していくのは難しいかなと思います
- #11: 今回フルスクラッチを決断した理由として 要件を満たせる汎用CMSがなく、改修してもフルスクラッチするのと同じくらい工数が掛かりそうだったというところと 幸いにも時間的?人員的にリソースに余裕があったこと あとは今後の拡張やメンテのことを考えてフルスクラッチで構築することにしました。 あまり大きな声では言えませんが、弊社でも一部はWordPressで構築したこともあったのですが、あまりメンテナンス性もよくなく WordPressでは構築したくないという面もありました。
- #12: ここからはＣＭＳをフルスクラッチで作るメリットについて話していきます。 一番大きなメリットとして社内の細かい要望や仕様をできるだけ叶えることができるというところがあります。 画像アップロードの際にこの機能ではトリミング必要だけどこれではトリミングいらないからつけなくていいという要望だったり、 最近あった細かい要望としては、保存せずに移動するときにアラートを出してほしいという物があります。
- #13: ここからはＣＭＳをフルスクラッチで作るメリットについて話していきます。 一番大きなメリットとして社内の細かい要望や仕様をできるだけ叶えることができるというところがあります。 画像アップロードの際にこの機能ではトリミング必要だけどこれではトリミングいらないからつけなくていいという要望だったり、 最近あった細かい要望としては、保存せずに移動するときにアラートを出してほしいという物があります。
- #14: 2つめのメリット として データの活用が容易というメリットがあります。 メディアなので、 RSS化して配信してそれをソーシャルに流してそこから流入を狙ったり、 API化して外部に記事提供を行ったりすることがあります。 テーブルの構成が自由に作れるので、記事データの活用が容易 というのが大きなメリットとなります
- #15: 各機能毎に実装を進めているのでリリース後のメンテナンスも容易です。 汎用CMSを使用している場合汎用CMSの機能制限によってメンテナンスや拡張が簡単に行うことができない可能性があります。 フルスクラッチの場合その実装も自由のためメンテナンスや拡張が容易です。 例えば新しく記事をまとめたページを作りたい みたいな要望があった際にも機能拡張が用意にできます。
- #16: フルスクラッチのデメリットとして各機能の実装が必要となってしまいます。 例えば画像のアップロード機能ですとか画像のトリミング機能 権限回りの機能 プレビュー機能など必要と思われる機能の実装は必要となってしまいます。 そのため、コード量や工数は多くなってしまします。
- #17: 一旦ここまでの発表をまとめます。 フルスクラッチでは自分で機能の実装が必要となり工数がかかります。 一方汎用CMSは機能が用意されているため工数が少なく実装ができます。 しかし、フルスクラッチですと拡張の実装がしやすくデータの有効活用が出来ます。 CMSでは出来ないことはないですが、難しくなってしまいます。 そのため、どちらが良いかということは一概には言えずフルスクラッチ?汎用CMSのメリット?デメリットを考えて適切な選択をしていくことが必要です。 弊社でもWordPressを使って作成したメディアもありましたが、長期間運営していくという面からは難しかったです。
- #18: ここからは、自己紹介のところでも紹介した All About Japanを例に 弊社でのCMS開発のノウハウについてお話したいと思います、 フロント、CMS共にフルスクラッチ Php5.6 MySQL5.6 Laravel というモダンな環境 CMS側はAceAdmin Template使ってる
- #19: このなかでLaravelを使ったことがあるというかたはいらっしゃいますか？ Laravelとはシンプルで可読性の高いコードが書けると評判のモダンフレームワークです。 最新バージョンは5.1.11となっておりLTSなので2年間のバグフィックス3年間のセキュリティフィックスがサポートされます。 また、来年の1/8にインプレス社からLaravel5.1に対応した日本語の書籍がでるので、 これから勉強しよう。という方にもオススメとなっています。 なお、出版社インプレスの回し者でないことをお断りしておきます。
- #20: ここからはLaravelの機能を使ってどのような点がCMSの実装に便利か述べていきたいと思います。 汎用的なCMSではプラグインを導入して多言語対応をする。というのが一般的かなと思います。 Laravelでは機能として言語切り替えを持っているので容易に実装が可能とです。 各言語毎に言語ファイルを作成して、表示するロケールを設定します。 各言語ファイルで翻訳した文言を記載して Viewでこのように実装するだけで、多言語切り替えが可能です。
- #21: 2つめはファイルシステムです。 汎用CMSでは書き込み権を与えたディレクトリへ画像をアップロードする。ということが多いと思います。 S3へのアップロードに関しては、プラグインでの切り替えが必要となりますが、開発環境/本番環境での簡単な切り替えはできません。 Laravelではファイルシステムとしてローカル?S3,Dropboxなどなどが簡単に利用できるようになった 同じメソッドで設定で保存先が切り替えできるので、開発環境はローカル プロダクションは S3という切り替えが簡単に行える 例えばこのコードの例だと envに指定したSTORAGE TYPEで指定したストレージのファイルを取得することができます。 ファイルがローカル/S3どちらにあっても意識せずに取得が可能です。
- #22: RESTフルをもっと使いやすくしたもの コマンドラインで雛形が自動生成できる 動詞+パスで処理アクションを切り替えることが出来ます。 たとえば 記事一覧ページを見たいと思った時には GET で /articleを叩けば ArticleContollerのindexメソッドが呼ばれて一覧の表示がdけいますし、 ある記事idの記事をUPDATEする際には PUTで/article/idにアクセスすればupdateメソッドが呼ばれます。 基本的にCMSは 一覧表示、新規作成、編集、更新、削除 なのでかなり相性がいいです。
- #23: CMSから入力したものにはvalidationが必要となります。 このようにルールを列挙して、validatorを作成します。 Integerは整数であることをバリデートしますし、requiredは入力が存在するかをバリデートします。 Validator->faliseでvalidationに失敗したときの処理が書くことができます。 この間、別案件で別のフレームワークを使ってCMSのvalidationを書く機会があったのですが、大変でしたね。
- #24: Eloquent ORMというLaravelのORMも用意されています。 便利なメソッドや機能が複数用意されています。 このコードがクエリスコープと呼ばれる機能の一つでよく使う検索条件をメソッド化することによって使い回しが用意になります 例えばCMSでは公開済みの記事かどうかの検索条件をつけることが多いと思います。 PublishedArticleというスコープを予め作っておくことで公開済みの記事を取得したいときはこのメソッドを呼べば絞り込みができます
- #25: PHPの依存管理ツール 厳密には違うが簡単にいうとパッケージ管理システム ライブラリに依存しているプロジェクトごとインストールされるのでライブラリの導入が便利にできる Packagist から検索する Laravel + 実装したい機能 とかで検索するとたいていは出てくる CMSを構築する際に使用するライブラリの管理等が便利に行うことができます。
- #26: CMSのデザインにはAce Responsive Admin Templateというテンプレートを使用しています。 これはBootstrapをwrapしたテンプレートで、社内CMSのデザインの統一性を持たせるという点と デザイナー無しでエンジニアのみでかっこいいUIなCMSを構築し、デザインに書ける工数を削減する という目的から導入しています
- #27: このAce Responsive Admin Templateには汎用CMSにある機能がバインドされています。 汎用CMSである画像ギャラリーや日付を時計で選択するDateTimePicker などがバインドされています。 他にも機能はありますが、使ったことがあるものをあげています。 ただし、実装は必要となります。
- #28: ここからはAce AdminとLaravelを使った開発ノウハウをお話していきます Selectboxから表示する要素が増えすぎて、使い勝手が悪くなんとかしてほしいという要望受けたことありませんか？ Ace Adminにバインドされている select2 というjQueryのライブラリを使えば1行でこのようなデザインにすることができます
- #29: 次に画像処理に関してのノウハウをお伝えします。 Intervetion/imageというライブラリがLaravelに対応していて機能が豊富な画像処理のライブラリとなっています。 LaravelのPostされたRequest オブジェクトを元に画像ファイルの生成ができます。 たとえば指定した幅?高さ?座標でトリミングするcropや、リサイズ機能。 指定した形式にファイルを変更するencodeなどもあります。 面白いのは座標の特定の位置にテキストを付与するメソッドも用意されています。
- #30: 最後にまとめに入る前にエンジニア視点から見たCMSをフルスクラッチで作成するメリットについて述べたいと思います。 フルスクラッチでCMSを作成する際には様々な機能の実装が必要となるためいろいろな技術に触れることができます。 サーバサイドのPHPもそうですしフロントエンドのjs回りの実装も必要となっていきます。 また、効率的に実装するためにはフレームワークの使い方を学ぶ必要がありますしフロントエンド側ではHTMLやJavaScript/jQueryの実装も必要です。 ライブラリの使い方も学ぶ必要もあります。 また、DBへの読み書きやトランザクションについても使用して実装する必要があります。 そんなわけで総合的に実装ができるため若手エンジニアの育成とかにもいいのかなと思います。
- #31: 最後にまとめになります。 フルスクラッチでCMSを作るメリットとして長期間のメディア運営のためにはメンテナンス性や拡張性が求められます。これを満たすにはフルスクラッチで作る必要があります。 また、細かい仕様に応えることが可能で、データの有効活用ができます。 しかし、すべてフルスクラッチで行えばいいというわけではありません。 短期間で実装したいという時やCMSの機能で十分要件を満たせるという場合は汎用CMSを使うことも視野にいれる必要があります、
- #32: 最後にオールアバウトでのCMS開発ノウハウのまとめとなります。 弊社ではLaravel+Ace Responsive Admin Templateを使用して構築しています。 Laravelが用意しているリソースフルコントローラやvalidation,ファイルシステム等がCMS実装の際に便利に使えるからです。 また、Ace Responsive Admin Templateを使うことでエンジニアでもかっこいいUIのCMSを構築しています。
- #33: 以上で発表は終わりです。最後に宣伝が2つありますですが、企画編集の人と一緒に各種サービスや社内システム開発をしたいWEBエンジニアや オールアバウトのインフラを支えるインフラエンジニアを募集しています。 興味のある方はこのあとあります懇親会などで弊社の社員に声をかけて下さい