フロントエンド実装者から見た PowerCMS X
•
0 gefällt mir•1,185 views
2018年12月12日に開催された「PowerCMS X 製品発表会」での発表スライドです。
Empfohlen
Weitere ähnliche Inhalte
Was ist angesagt?
Was ist angesagt? (20)
Ähnlich wie フロントエンド実装者から見た PowerCMS X
Ähnlich wie フロントエンド実装者から見た PowerCMS X (20)
フロントエンド実装者から見た PowerCMS X
- 1. フロントエンド実装者から見た PowerCMS X 2018.12.12 PowerCMS X 発表会 安倍 英樹
- 2. 安倍 英樹 • 株式会社LAB （アルファサード株式会社子会社・広島県福山市） UI開発者 • HTML/CSS/JavaScript設計 • PowerCMSテンプレート設計 • PowerCMS歴 約3年半 / Movable Type歴 約10年 • ExtendTinyMCEプラグイン作者 • PowerCMS Xの試用・レビューなどを担当
- 4. フロントエンド実装者の役割 • HTML / CSS / JavaScript実装 • PowerCMSテンプレート実装 • PowerCMS設定 上記に関連する視点からPowerCMS Xについて解説してみたいと思います。
- 5. 本日の内容 1. 新しく加わった “モデル” の概要 2. テンプレート記法 3. 出力パスの設定 4. 投稿画面カスタマイズ例 5. プラグイン開発の簡単な紹介 6. 実際に使用してみての印象
- 7. PowerCMS X最大の変更点 • カスタムフィールドの設計はモデルの設計に • フロントエンド実装者がカスタムフィールドを作っていたので、 フロントエンド実装者がモデルについて理解する必要がある
- 8. 弁護士さんのデータを管理する例 • 名前・所属・事務所所在地などがテキスト入力 • 所属エリアをラジオボタンで指定 • 得意分野をチェックボックスで指定
- 12. 不必要でも本文欄が存在
- 14. モデルとは何なのか • 簡単に表現するならば「データを管理するところ」 • ≒カスタムオブジェクト • =データベースのテーブル • PowerCMS X上の全てのデータは何らかの「モデル」である • 「記事（entry）」は「entry」という名前のモデルで、 特別な何かを持っているわけではない • 別のモデルのオブジェクト（内容）を関連付けすることもできる • 弁護士の得意分野を「弁護士得意分野」というモデルで管理
- 15. これから必要になるのはモデル設計力 • データベースのテーブル設計に近いけれど、以下のことが分かれば大丈夫 • 「どのような内容を」 • 「編集画面にどう表示するか」 • 「どういうタグ名にするか」 • どのように設定したらどのような編集画面になるか、 トライを繰り返すのがおすすめ
- 19. これから必要になるのはモデル設計力 • 難しく考える必要はないけれど事前の検討はしっかりとしておいた方が 良い • カラム名 • アップロードファイルの格納方法（アセット or 添付ファイル） • どうしてもカラム名を後から直したくなったら 「CSVエクスポート・インポート」で頑張る？
- 20. モデル作成のデモ PowerCMSパートナーの管理 ちなみに動作環境は さくらのVPS (CentOS 7) nginx + php-fpm + MySQL 5.7
- 21. テンプレート記法
- 22. テンプレート記法 • 大まかには今まで慣れ親しんできたPowerCMS 5.x（MT）と同じ 「MTML形式」 • `__first__` `__last__`のような予約変数もしっかりセットされます
- 23. 記事を出力するテンプレート例 <mt:Entries> <mt:If name="__first__"><ul></mt:If> <li> <mt:EntryTitle escape /> <mt:EntryDate format="Y年m月d日" escape /> </li> <mt:If name=“__last__"></ul></mt:If> </mt:Entries>
- 26. テンプレート記法 • 廃止されたタグ・新たなタグ・属性（モディファイア）もある • カテゴリの出力（MTSubcatsRecurseがない） • コンテキストを明示的に指定した記事の出力 （カテゴリ○○の記事一覧 … MTSetContextタグ） • MTIfGetVar, MTElseIfGetVar （変数の値が true か false かを確認するだけの場合に高速）
- 28. <mt:SetVarTemplate name="sub_categories"> <mt:NestableObjects model="category" parent_id="$_parent_id"> <mt:If name="__first__"><ul></mt:If> <li> <mt:Categorylabel escape /> <mt:If name="has_children"> <mt:CategoryID setvar="_parent_id"/> <mt:Var name="sub_categories" /> </mt:If> </li> <mt:If name="__last__"></ul></mt:If> </mt:NestableObjects> </mt:SetVarTemplate> （次のページへ） PowerCMS Xのカテゴリ出力テンプレート
- 29. （前のページの続き） <mt:categories parent_id="0" sort_by="order"> <mt:If name="__first__"><ul></mt:If> <li> <mt:CategoryLabel escape /> <mt:CategoryID setvar="_parent_id" /> <mt:Var name="sub_categories" /> </li> <mt:If name="__last__"></ul></mt:If> </mt:categories> PowerCMS Xのカテゴリ出力テンプレート 先程変数に格納したサブカテゴリのテンプレートを呼び出す 一見複雑になったようにも見えますが、子カテゴリのHTMLを柔軟に指定できそうです
- 30. 自作したモデルの出力タグ
- 32. 弁護士さんのデータを管理する例 • モデル名は「lawyer」 • IDは自動付与（id） • テキスト入力 • 名前（name） • 所属（office_name） • 得意分野（field）は「lawyer field」モデルで別に管理している情報を 参照する
- 33. 弁護士リストのテンプレート例 <mt:Lawyers> <mt:If name="__first__"><ul></mt:If> <li>ID: <mt:LawyerID escape />, 弁護士名: <mt:LawyerName escape />, 事務所名: <mt:LawyerOfficeName escape /></li> <mt:If name=“__last__”></ul></mt:If> </mt:Lawyers>
- 34. 得意分野のテンプレート例 <mt:Lawyers> <mt:LawyerField> <mt:LawyerFieldName escape /> </mt:LawyerField> </mt:Lawyers> • MTLawyerField タグの中は LawyerField モデルのコンテキストになる 「lawyer」モデルの「field」カラムを呼び出す（ブロックタグ） 「lawyer field」モデルの「name」カラムを出力する
- 35. 出力パスの設定
- 36. 出力パスの設定 • ビュー（テンプレート）の編集画面ではなく、 URLマップの編集画面で設定するようになった • 基本的には「出力パス」と「どのビュー（テンプレート）」を 使用するかの選択 • スタティック・ダイナミック等が選択できるのも今までと同じ
- 39. テンプレート出力のデモ
- 40. 投稿画面カスタマイズ例
- 41. 投稿画面カスタマイズ例 • カラム毎 or 画面全体を代替テンプレートでカスタマイズ可能 • 経度のフィールドの後ろにGoogleマップを追加したい • 複数の入力フィールドをわかりやすくレイアウトをして表示したい
- 43. カスタマイズ方法 • 代替テンプレートディレクトリに下記ルールでテンプレートファイルを 配置 • alt-tmpl/edit_[モデル名].tmpl • alt-tmpl/include/[モデル名]/column_[カラム名].tmpl • tmpl/edit.tmpl（標準の編集画面）を参考にMTMLやJavaScriptで 記述すればOK
- 44. Googleマップのコード例 <!— テキストフィールドのコードをコピー —> <div class="row form-group"> <div class="col-lg-2"> 地図 </div> <div class="col-lg-10"> <div id="googlemap_container"> <div id="googlemap"></div> </div> </div> </div> <!— 地図を表示するためのCSS・JavaScript —>
- 45. 管理画⾯で利⽤されているライブラリ • Bootstrap v4 • jQuery v3 • Font Awesome 4 管理画面のMTMLは少々複雑とは思いますが、落ち着いてIf文や変数を 見ていただければきっとご理解頂けるのではないかと思います。
- 46. 事前に頂いたご質問 • “管理画面を少しカスタマイズしたい時に、できれば代替テンプレートで はなくCSSやJSを追加するだけの簡易な実装をしたいのですが、そういっ た仕組みはあるでしょうか。” • MTAppjQuery（bit part 合同会社さま提供）のようなイメージ でしょうか • 代替テンプレートの場合、アップグレード時にデフォルトの テンプレートに変更が入っていないかと気になることがある
- 47. 自作してみました • UserJsCssプラグイン（仮称） • user.css や user.js を編集することで、管理画面に独自のスタイルが 適用できます。
- 49. プラグイン開発
- 51. 和暦モディファイアの例 <mt:Date ts="19780707180500" wareki="ggge年n月j日 H時i分" /> => 昭和53年7月7日 18時05分 <mt:Date ts="19890107" wareki="ggge年n月j日" /> => 昭和64年1月7日 <mt:Date ts="19890108" wareki="ggge年n月j日" /> => 平成元年1月8日 <mt:Date ts="19890108" wareki="ggee.m.d" /> => 平01.01.08 <mt:Date ts="19890108" wareki="gee.m.d" /> => H01.01.08 <mt:Date ts="19040401" wareki="ge.n.j" /> => M37.4.1 GitHubにて配布しています https://github.com/hideki-a/pcmsx-plugin-wareki
- 52. config.json { "label" : "Wareki", "id" : "wareki", "component" : "Wareki", "version" : "1.0", "author" : "Hideki Abe", "tags": { "modifier": { "wareki" : { "component" : "Wareki", "method" : "modifier_convert_wareki" } } } } どのような属性を追加するのかを定義
- 53. Wareki.php <?php require_once( LIB_DIR . 'Prototype' . DS . 'class.PTPlugin.php' ); class Wareki extends PTPlugin { function __construct () { parent::__construct(); } function modifier_convert_wareki ( $str, $args, $ctx ) { // 日付を加工する処理を記述 return $formated_datetime; } } 属性が呼び出されたときの処理を記述
- 54. UserJsCssプラグインの場合 { "label" : “UserJsCss", （途中略） "callbacks": { "userjscss_template_source_edit": { "edit" : { "template_source" : { "component" : "UserJsCss", "priority" : 10, "method" : "template_source" } } } } }
- 55. 実際に使用してみての印象
- 56. 実際に使用してみての印象 • プレゼン用プロトタイプページ作成が素早くできた • 画面遷移が速い • 慣れ親しんできたMTMLが利用できる • CSVインポートが利用できる • 標準機能のみで作成できた（プラグインを探さなくて良い） • 今までのPowerCMSの経験があれば、考え込まなくても操作できる
- 57. • 記事・ウェブページ・カスタムオブジェクトに縛られない設計が出来る • 無理なくデータが格納できる感触 • カテゴリに商品、記事に商品バリエーションを格納するのと、 商品・商品バリエーションをそれぞれモデルで格納するのは結構違う