concrete5って何?

7,944 views
7,795 views

Published on

オープンソースCMS concrete5を使ったウェブサイト構築について

Published in: Technology
0 Comments
39 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
7,944
On SlideShare
0
From Embeds
0
Number of Embeds
2,546
Actions
Shares
0
Downloads
45
Comments
0
Likes
39
Embeds 0
No embeds

No notes for slide

concrete5って何?

  1. 1. Copyright Concrete5 Japan, Inc. All Rights Reserved.CONCRETE5って何?オープンソースCMS concrete5を使ったウェブサイト構築について
  2. 2. Copyright Concrete5 Japan, Inc. All Rights Reserved.CONCRETE5って何?• 拡張性と操作性に特化したオープンソースCMS• 高度なウェブサイト管理機能を、マウス操作でかんたんに• サイト内の編集したいページで「編集モード」に切り替え、その場で編集• マーケットプレイスから追加機能をカンタンに入手2
  3. 3. Copyright Concrete5 Japan, Inc. All Rights Reserved.CONCRETE5の魅力• Free! 利用者の自由とにかく、好きなようにカスタマイズして、好きなように拡張できることが開発方針の根幹になっている• Speed! 開発が早い歴史がある割に、枯れたCMSという印象ではなく、現在進行形でガツガツ進化している• Community! コミュニティが面白いconcrete5のエコシステムをみんなで盛り上げようという機運3
  4. 4. Copyright Concrete5 Japan, Inc. All Rights Reserved.デザイナーへのおすすめポイント• テーマの作成は超カンタン• デザインカスタマイズで覚えることが少ない(学習コストが低い)• デザインカスタマイズの自由度が高い• 日本語フォーラムでサポート、勉強会も4
  5. 5. Copyright Concrete5 Japan, Inc. All Rights Reserved.開発者へのおすすめポイント• フロントエンド:jQuery, Twitter Bootstrap• バックエンド:PHP(Zend Libraries), MySQL(ADOdbデータベース抽象化レイヤー)• 拡張可能なデータオブジェクトモデル、ビルト・イン・ヘルパークラス• カスタマイズ容易なオーバーライドシステム5
  6. 6. Copyright Concrete5 Japan, Inc. All Rights Reserved.制作会社へのおすすめポイント• 早く形になる• 手離れが良い• あとからの変更に強い設計• ウィザードインストール、1クリックアップデート6
  7. 7. Copyright Concrete5 Japan, Inc. All Rights Reserved.CONCRETE5の歴史• 2003 concrete CMS v.1 広告代理店からの依頼更新者は90人。デザインと機能にこだわるサイト。全米CMからの大量のアクセス→「簡単、柔軟、強固」をキーワードに全く新しいCMSを開発• 2008 concrete5 オープンソース化• 2009 concrete5 日本語版リリース7
  8. 8. Copyright Concrete5 Japan, Inc. All Rights Reserved.動作要件• PHP5.3• PHPモジュール: CURL, zip, mcrypt, openssl, GD (withfreetype), mysql, mbstring• PHP Safe Mode Off• MySQL 5.x8
  9. 9. Copyright Concrete5 Japan, Inc. All Rights Reserved.ライセンス• MITライセンス制限の最も少ないライセンスのひとつ• マーケットプレイスから入手できるテーマやアドオンは異なるライセンス(開発者が選べる)9
  10. 10. Copyright Concrete5 Japan, Inc. All Rights Reserved.デモ:編集モード10• ツールバー• ブロックの編集• ブロックの追加• レイアウトの追加• デザインツール
  11. 11. Copyright Concrete5 Japan, Inc. All Rights Reserved.ページとは• concrete5でのページとは、いわゆる「ページ」• ページはそれぞれに固有のURLを持つ• まずページがあり、その中にコンテンツ(ブロック)を並べていく• 違う考え方のCMS=ブログまず記事があり、記事ページ、アーカイブページなどが自動で生成される11
  12. 12. Copyright Concrete5 Japan, Inc. All Rights Reserved.ページの構成要素12Page (Collection)PageTypeArea GlobalAreaBlock StackBlockBlockBlockBlockBlock
  13. 13. Copyright Concrete5 Japan, Inc. All Rights Reserved.ページタイプ13Page (Collection)PageTypeArea GlobalAreaBlock StackBlockBlockBlockBlockBlock
  14. 14. Copyright Concrete5 Japan, Inc. All Rights Reserved.ページタイプとは14• 他のCMSでいう「テンプレート」に近い考え方• ページ内にどんなエリアがあるのかを指定• エリア内にどんなブロックがデフォルトで存在するのかを指定
  15. 15. Copyright Concrete5 Japan, Inc. All Rights Reserved.エリア15Page (Collection)PageTypeArea GlobalAreaBlock StackBlockBlockBlockBlockBlock
  16. 16. Copyright Concrete5 Japan, Inc. All Rights Reserved.エリアとは16• ページ内にブロックを追加するための領域• レイアウトを追加して分割することも可能
  17. 17. Copyright Concrete5 Japan, Inc. All Rights Reserved.ブロック17Page (Collection)PageTypeArea GlobalAreaBlock StackBlockBlockBlockBlockBlock
  18. 18. Copyright Concrete5 Japan, Inc. All Rights Reserved.ブロックとは18• エリア内に追加できるconcrete5の機能• 様々なブロックタイプ• 記事(WYSIWYGエディタ)• ページリスト(ページの一覧、新着順など)• オートナビ(様々なナビゲーション)
  19. 19. Copyright Concrete5 Japan, Inc. All Rights Reserved.スタック19Page (Collection)PageTypeArea GlobalAreaBlock StackBlockBlockBlockBlockBlock
  20. 20. Copyright Concrete5 Japan, Inc. All Rights Reserved.スタックとは20• ブロックを内包した特殊なブロック• スタックはページからは独立してバージョン管理されており、独立した権限を持つ• 同じスタックを複数ページに配置すると、中身が同期する• 複数ページで共通のパーツ(例えばサイドバー)を作るのに使う
  21. 21. Copyright Concrete5 Japan, Inc. All Rights Reserved.グローバルエリア21Page (Collection)PageTypeArea GlobalAreaBlock StackBlockBlockBlockBlockBlock
  22. 22. Copyright Concrete5 Japan, Inc. All Rights Reserved.グローバルエリアとは22• 全ページで中身が共通のエリア• それ以外は通常のエリアと同じ• ページから独立してバージョン・権限設定を持つ• 管理画面のスタックのページから編集できる
  23. 23. Copyright Concrete5 Japan, Inc. All Rights Reserved.全ての構成要素に権限設定可能23Page (Collection)PageTypeArea GlobalAreaBlock StackBlockBlockBlockBlockBlockPermissionPermissionPermissionPermissionPermissionPermission
  24. 24. Copyright Concrete5 Japan, Inc. All Rights Reserved.その他の要素24PageSingle PageUser FileAttribute
  25. 25. Copyright Concrete5 Japan, Inc. All Rights Reserved.デザインカスタマイズ25
  26. 26. Copyright Concrete5 Japan, Inc. All Rights Reserved.テーマの作り方• テーマで規定するものは「エリア」• HTML中のどの部分が編集可能かを指定<?php$a = new Area(Sidebar);$a->display($c);?>• 非常にカンタン26
  27. 27. Copyright Concrete5 Japan, Inc. All Rights Reserved.テーマを作っても中身がスカスカ…• エリアを指定しただけでは、その中に何のブロックもない。ブログ型CMSに慣れた人は戸惑います• そもそも、テーマがコンテンツを規定すべき「ではない」という思想• 機能とテーマを分離できるので再利用性が高いし、バージョンアップの際にテーマ由来で動かなくなるということもない27
  28. 28. Copyright Concrete5 Japan, Inc. All Rights Reserved.ブロックテンプレート• ブロックごとにカスタマイズ(表示=Viewも、機能=Controllerもカスタマイズ可能)• テンプレートはブロックフォルダ内の view.php• view.phpを複製してカスタマイズ、templatesフォルダに置くことで自由にテンプレートが増やせる28
  29. 29. Copyright Concrete5 Japan, Inc. All Rights Reserved.テンプレートタグはどこに…?• テンプレートタグはありません• ブロックテンプレートをカスタマイズするには多少のPHPの知識が必要• ただし、処理は書いてない(処理はcontroller.php)ので、壊れることはない、安心して• ブロックで見るべきことはブロック内で完結。調べることが少なくてすむし、作業も効率的29
  30. 30. Copyright Concrete5 Japan, Inc. All Rights Reserved.あらゆるブロックはテンプレートを持つ• ブログ型CMSの困る点…テーマのテンプレートは、テンプレートタグで書ける• 追加機能(プラグインetc)のデザインカスタマイズはどうなる?• デザインが再現できないからプラグインの使用を諦める(それってどうなの?)30
  31. 31. Copyright Concrete5 Japan, Inc. All Rights Reserved.テンプレートタグがないからこそ• あらゆるブロックはテンプレートを持っていて、カスタムテンプレートを作成できる。テンプレートはシンプルなPHP• マーケットプレイスからダウンロードした追加機能でも、全て同様• 純粋に機能で選び、デザインカスタマイズは自由になる(これがMVCの恩恵)31
  32. 32. Copyright Concrete5 Japan, Inc. All Rights Reserved.開発32
  33. 33. Copyright Concrete5 Japan, Inc. All Rights Reserved.MVC設計33• ページ内の全ての要素がMVC• ブロックはブロック単位でMVCを持つ• 他の要素に気を使わずに開発ができる• ビューは見やすく適当に作っておけばデザイナーでもカスタマイズ可能
  34. 34. Copyright Concrete5 Japan, Inc. All Rights Reserved.モデル• concrete5で扱うもの• 権限、エリア、属性、ブロック、ファイル、ユーザー、ページ、ページリスト、ジョブ etc.34
  35. 35. Copyright Concrete5 Japan, Inc. All Rights Reserved.ライブラリー• 関連する一連の機能を提供する• Backup, Cache, Events, Database, FileImporter etc.• Zend, ADODB などを外部ライブラリーとして利用35
  36. 36. Copyright Concrete5 Japan, Inc. All Rights Reserved.ヘルパー• 共通の機能のための小規模なライブラリー• HTML, Form, Validation etc.$form = Loader::helper(form);print $form->select(favoriteFruit, array(p => Pears,a => Apples, o => Oranges), a);36
  37. 37. Copyright Concrete5 Japan, Inc. All Rights Reserved.ツール• スペルチェック、オートコンプリート、要素の読み込みなど、主にAjaxで使う• 複雑な編集UIを持つため、Ajaxのサンプルは豊富37
  38. 38. Copyright Concrete5 Japan, Inc. All Rights Reserved.オーバーライド• コア領域(concreteディレクトリー)のファイル/concrete/js/jquery.js• ユーザー領域(ルートディレクトリー)のファイルで上書き可能/js/jquery.js38
  39. 39. Copyright Concrete5 Japan, Inc. All Rights Reserved.ブロックタイプの開発• データベース構造はXMLで指定、インストール時に自動でSQLが発行される• コントローラーがデータベースとのつなぎをうまくやってくれる(フレームワーク的な良さ)• 編集画面はBootstrapでキレイに39
  40. 40. Copyright Concrete5 Japan, Inc. All Rights Reserved.シングルページ• ログインページや会員登録ページなど、ページ単体で機能を持つもの(通常のページは中に入るブロックが分離されているため、特定の機能を持たない)• URLルーティング40
  41. 41. Copyright Concrete5 Japan, Inc. All Rights Reserved.TWITTER BOOTSTRAP• UIに全面的に Bootstrap, from Twitter を採用• Interfaceヘルパーを経由して呼び出し• デザインに悩まなくていい• ユーザーも各デベロッパーの機能の操作に統一感があってうれしい41
  42. 42. Copyright Concrete5 Japan, Inc. All Rights Reserved.よくある質問42
  43. 43. Copyright Concrete5 Japan, Inc. All Rights Reserved.どんなサイトに向いているのか• マーケティングを意識したサイト(トップページのコンテンツをひんぱんに入れ替える)• 公開認証フローが必須なサイト• 権限機能が豊富なので、会員サイトに向いている(B2Bのウェブサイトでよく要望に上がる)• その他、カスタマイズの容易さを活かして勤怠管理システムなど、色々作ってる人がいます43
  44. 44. Copyright Concrete5 Japan, Inc. All Rights Reserved.どんなサイトに向いていないのか• ブログ• メディアサイト(記事を書くということに注力するならブログがいいし、詳細な権限設定も不要)44
  45. 45. Copyright Concrete5 Japan, Inc. All Rights Reserved.WORDPRESSとの違い45• ブログ型CMSは、単一のアプリケーションである→記事詳細、記事アーカイブ、コメント、検索etc• ブログ型CMSは、アプリケーションを拡張すると考えると分かりやすい→商品詳細、商品アーカイブ、レビュー、検索etc
  46. 46. Copyright Concrete5 Japan, Inc. All Rights Reserved.WORDPRESSとの違い• ページ単位でデザインにこだわりたい = 個人的に、このニーズを「(ウェブ)ページ管理システム(PMS)」と呼んでいます• PMSをお求めなら、concrete5の方が断然良い• concrete5が苦手なのは1つの記事が2つのURLで見れるというしくみ→ページがあってはじめてその中にコンテンツを入れるという考え方にあわない46
  47. 47. Copyright Concrete5 Japan, Inc. All Rights Reserved.WORDPRESSとの違い• ページか、投稿か、それが問題• その他に、ページ単位での履歴管理の正確さや、詳細な権限設定、高機能なファイルマネージャーなどもconcrete5が選ばれる要素です47
  48. 48. Copyright Concrete5 Japan, Inc. All Rights Reserved.スケジュール公開機能はある?48• ブログの予約投稿的な機能はないが、スケジュール公開機能はある• ゲストの表示権限を期限指定することで任意の日時から任意の日時の間だけ公開することが可能• ブロック単位で公開のスケジュール指定ができるので、特定の期間のみ表示されるバナーを作れる
  49. 49. Copyright Concrete5 Japan, Inc. All Rights Reserved.会員サイトは作れる?• 会員登録機能が標準搭載• プロフィール項目を任意に増やせる• 確認メールのURLをクリックする認証、管理者の手動認証、認証なしを選べる• フレンド、プライベートメッセージ機能が標準搭載• 次期バージョンからはFacebookログインなど会員機能が強化49
  50. 50. Copyright Concrete5 Japan, Inc. All Rights Reserved.事例• ケンブリッジ大学• バンクーバー水族館• MINI UK(BMV)• AT&T• フィリピン航空• TOPCON• Genco• など50
  51. 51. Copyright Concrete5 Japan, Inc. All Rights Reserved.国内事例• とるナビ(バンプレスト)• 交通新聞社• 筑波学院大学• 東京基督教大学• 篠栗町社会福祉協議会 • 羽島市医師会• CSS Nite in AOMORI• その他企業、自治体など…51
  52. 52. Copyright Concrete5 Japan, Inc. All Rights Reserved.コンテンツの移行• WordPressからのインポートスクリプトが公開されている• それ以外のCMSからのインポートの場合は、これを参考に自作52
  53. 53. Copyright Concrete5 Japan, Inc. All Rights Reserved.マーケットシェアは?• W3Techsの調査 = 0.2% (2013-06-18)WordPress 58%Joomla 10.4%Drupal 6.3%Typo3 1.6%ExpressionEngine 0.9%Tumblr 0.3%Movable Type 0.3%XOOPS 0.2%eZ Publish 0.2%Plone 0.1%TypePad 0.1%Sitecore CMS 0.1%Google Sites 0.1%53
  54. 54. Copyright Concrete5 Japan, Inc. All Rights Reserved.SEOはどうなってるの?• 内部構造の問題• サイトマップを変更しやすく、リダイレクトも自動で行なってくれるのは、SEOを意識した運用にはありがたい• メタタグの一括設定ツールなど54
  55. 55. Copyright Concrete5 Japan, Inc. All Rights Reserved.おすすめのアドオンは?• Designer Content = デザイナーでも独自のブロックをGUIで作れる• Tomoac Form 5 = 日本人開発者が作ったフォームブロック。日本の郵便番号や確認画面対応など、国内事情に対応• Whale Nivo Slider = 高機能な画像スライダー。このようなUIパーツはたくさんあります55
  56. 56. Copyright Concrete5 Japan, Inc. All Rights Reserved.おすすめサイト• 山野井研究室 http://www.yamanoi.org/• tomoのconcrete5 http://concrete5.tomo.ac/• concrete5 Guide http://c5.coral.jp/56
  57. 57. Copyright Concrete5 Japan, Inc. All Rights Reserved.おすすめブログ• デザインワークスオンサイド http://www.onside.com/• XROSS CUBE http://d.hatena.ne.jp/xross-cube/• notnil creation weblog http://notnil-creative.com/blog/• コンクリートファイブログ http://wordpress.go-designing.com/57
  58. 58. Copyright Concrete5 Japan, Inc. All Rights Reserved.おすすめ動画• 週間concrete5 http://www.ustream.tv/channel/concrete5japan• 下北沢concrete5部 http://new.livestream.com/shimokitazawa-osscafe/concrete558
  59. 59. Copyright Concrete5 Japan, Inc. All Rights Reserved.日本語プロジェクトチームとは?• concrete5のインターフェースの日本語訳、日本語で使用する際のバグフィクスなどを行ったconcrete5日本語版をリリース・メンテナンスしている有志のあつまり。• オープンソースSNS MyNETS の開発チーム「UsagiProject」が母体• concrete5日本語公式サイトも有志で運営59
  60. 60. Copyright Concrete5 Japan, Inc. All Rights Reserved.コンクリートファイブジャパン株式会社とは?• アメリカ開発元公認の、主に日本国内の企業向けのサポートを提供する会社• concrete5日本語プロジェクトの中心メンバーがあつまり、2012年に設立• concrete5を有力なオープンソースCMSの候補として育て、ウェブ制作者に役立ててもらい、ウェブコミュニティに貢献するのが使命• 詳細は公式サイトへ!60
  61. 61. Copyright Concrete5 Japan, Inc. All Rights Reserved.収益モデルは?• concrete5を中心としたエコシステム• 公式マーケットプレイス経由で全世界のconcrete5サイトに販売されるテーマやアドオンの売上の一部が開発元の収益に• concrete5のVIPサポート• ホスティング61
  62. 62. Copyright Concrete5 Japan, Inc. All Rights Reserved.CONCRETE5を使ったウェブサイト制作62(あくまでひとつのやりかたです)
  63. 63. Copyright Concrete5 Japan, Inc. All Rights Reserved.設計63• サイトマップを大まかに考えます• 各ページにどんなブロックを配置するか分かる程度のワイヤーフレームを作ります• ワイヤーフレームは、ページタイプをいくつ作るべきかの考え方の基礎になります
  64. 64. Copyright Concrete5 Japan, Inc. All Rights Reserved.CMS組み込み• ワイトマップとワイヤーフレームを参考に、サイトを作り始めます• ブロックも並べていきます• マーケットプレイスから購入する予定のアドオンがあれば、この段階で購入して試してみます• CSSフレームワークベースのシンプルなテーマがやりやすいです64
  65. 65. Copyright Concrete5 Japan, Inc. All Rights Reserved.デザイン• そのままインブラウザデザインを行なっていくのがベストかもしれませんが…• デザインカンプを作ることも多いです。CMSに組み込み終わっているので、それを参考にデザインしていきます65
  66. 66. Copyright Concrete5 Japan, Inc. All Rights Reserved.デザイン反映• デザインカンプをもとにコーディングします• テーマとブロックテンプレートに落としこんでいきます66
  67. 67. Copyright Concrete5 Japan, Inc. All Rights Reserved.機能実装• 要件が決まっていれば、デザイン前に機能実装はスタートできます• デザイン後に作成したブロックのテンプレートを作ります• そううまく行かないことももちろんあります67
  68. 68. Copyright Concrete5 Japan, Inc. All Rights Reserved.ページタイプのセットアップ• できあがったコンテンツをベースに、ページタイプのデフォルトを設定します。この作業をしないと、新しくページを作った時に更地状態• 必要であればコンポーザーの設定も行います68
  69. 69. Copyright Concrete5 Japan, Inc. All Rights Reserved.コンテンツ登録作業• ページタイプのセットアップが終われば、クライアントと協力してコンテンツを登録していきます• 実際には、機能開発やデザインカスタマイズと並行して行うこともよくあります69
  70. 70. Copyright Concrete5 Japan, Inc. All Rights Reserved.権限設定、キャッシュ設定• 最後に運用を想定した権限設定を行います。concrete5ではデフォルトでは管理者権限しかありません。それ以外は自分で設計します• 要件定義に権限に関する項目があれば、かなり最初の段階で権限設定をどうするか考えておくほうがいいでしょう• concrete5はそこそこ重いアプリケーションなので、キャッシュ設定も忘れずに70
  71. 71. Copyright Concrete5 Japan, Inc. All Rights Reserved.ポイントは• デザインと機能が分離されているので並行作業がしやすい• ディレクターのできること、やるべきことが多い(ページタイプの設計、ページタイプのデフォルト設定、権限設定など)• プログラムなしで要素の最適な並びを検討できるのはクライアントとの打ち合わせに便利71
  72. 72. Copyright Concrete5 Japan, Inc. All Rights Reserved.見積もり72
  73. 73. Copyright Concrete5 Japan, Inc. All Rights Reserved.どこに費用がかかるか73• デザイン = 普通• コーディング = 普通• テーマ化 = すぐ• テンプレート作成 = 楽• ページタイプのセットアップ = 結構時間がかかる• 権限設定 = かなり大変• アップデート = カスタマイズ(オーバーライド)箇所があれば要検証
  74. 74. Copyright Concrete5 Japan, Inc. All Rights Reserved.分かりやすい見積もり• ページタイプ数でカウント設計、デザイン、デザイン適用、権限設定…• ブロック数でカウント追加開発するもの74

×