a-blog cms Training Camp 2017 Springのエバンジェリストセッションのスライドです。内容を一部変更しています。 echo_zeroデモサイト http://cms-skill.com/echo_zero_demo/ 管理画面カスタマイズの解説動画 https://youtu.be/eobSdX7_QMw

1. 用テーマ
について
ウェビングスタジオ 口田 聖子
2017-05-19（Fri） 名古屋城 本丸御殿 孔雀之間
a-blog cms Training Camp 2017 Spring

2. http://webbingstudio.com
口田 聖子
くちだ
（うぇびん）
せいこ
‣ 札幌
‣ フリーランス10年目
‣ CMSいろいろ扱ってます
フロントエンドエンジニア ／ CMSアドバイザー
a-blog cmsエバンジェリスト

3. 昨年のお仕事（ざっくり）
その他
Movable Type
a-blog cms
技術サポート
改修・保守
構築と
コーディング
構築のみ
CMS別 内容別

4. a-blog cmsが半分超えた！
サポート業務が増えた！
ぜひぜひ 今後もご相談くださいー

5. a-blog cms用テーマ
echo_zero
オープンソース
商用有料
非商用・学習目的は無料
https://github.com/webbingstudio/
acms_theme_echo_zero

6. 今回の内容
echo_zeroができるまで
特に考慮したところ
モジュール編集機能
ディクレクトリ・命名規則 etc…
悩んだところ
まとめ
1
2
3
4

7. echo_zeroができるまで
1

8. echoプロジェクト
http://cms-skill.com/echo/
フレームワークテーマ

9. プロジェクトの目的
制作現場に合ったテーマを作る！
‣ プロトタイプ→本番構築の流れに特化
‣ 使い回しやすい構造
ディレクター デザイナー
コーダー
変更依頼
素材送付
変更依頼
実装

10. Movable Type用テーマ
echo Bootstrap
2015年12月リリース
https://github.com/webbingstudio/
mt_theme_echo_bootstrap

11. 正直 あかんかった
‣ デザインの不満 っていうかださい
‣ bootstrapに依存
‣ 不要な機能を削除しにくい
‣ スマートフォン対応が不十分

12. 追加より削除が重要な理由
‣ 納品時に、不要な機能の削除を
求められることは多い
‣ 数ヶ月後、数年後の、改修時の混乱を防ぐ
‣ プロジェクトの軽量化

13. a-blog cms版の開発開始
2016年5月の段階で、レイアウトブロックまで実装できていた

14. 頓挫した
‣ やっぱりデザインが不満！
‣ 困難な機能から実装したため
ディレクトリ構造が破綻
‣ a-blog cms 高機能すぎ！（褒めてる）
全部実装するのは無理

15. 根本から見直し
‣ デザイン再考、トレンドの洗い出し
（WordPressテーマ「Habakiri」をインスパイア）
‣ レイアウトブロック対応をやめ
わかりやすい構造に
‣ 実際の仕事から学習＋リサーチ
https://wordpress.org/themes/habakiri/

16. リリースまで
半年かかりました
途中、182回くらい
心が折れかけました

17. 特に考慮したところ
2

18. モジュール編集機能
2 1

19. 各モジュールの外観は
管理画面から編集できる

20. a-blog cms公式の機能も対応
日付・カテゴリー・タグ・概要も
モジュール編集画面から非表示にできます

21. 実演動画
https://youtu.be/eobSdX7_QMw

22. モジュールカスタムフィールド
‣ モジュール設定画面も
フィールドを作れる
‣ 決まったパス・ファイル名で
簡単に実装
‣ エントリーフィールドと同じ書き方！
echo_zero
admin
module
field.html

23. Drupalの機能「Views」
同様のカスタマイズができる
（リリース後に知った）

24. 見出し・表示件数程度なら
CMSが管理するのが
コンテンツマネージメント
このタイプのCMSが
かなり普及した

25. ディレクトリ・命名規則
2 2

26. ディレクトリをどうする
‣ システムで指定されている
ファイル以外は自由
‣ a-blog cmsテーマは
ファイルの整理が重要
‣ でも階層を深くしたくない
echo_zero
include
hoge
fuga
piyo

27. モジュール関係
module
モジュールID.html
module_loop
モジュールの種類_
クラス.html

28. ループを別ファイルにする利点
簡単
差し替え
レイアウトブロックの実装もしやすくなる…はず！
card summary

29. META・変数
‣ 変数は 公式の
bootstrap2016より
階層が深い
‣ テーマ直下に
削除できないディレクトリを
作らないよう 敢えて階層を下げた
include
head
vars

30. 課題が解決
不要な機能を削除しにくい
⬇
最低限の手順で
削除できるようになった
納品後の「ここの表示が変更になった。どう直したら？」
という問い合わせでも、手順を説明しやすくなった

31. 管理ボックスの改良
2 3

32. 新規作成のUIをプルダウンに
多くのCMSが採用しているインターフェース

33. 意外と簡単に作れる
‣ すべてのカテゴリーを並列表示する
モジュールIDを作る
‣ プルダウンとしてリストアップ
‣ 選択すると、各投稿画面のURLに
簡単なJavaScriptで移動

34. 投稿画面の改良
2 4
魔改造
ではない

35. カテゴリーやタグを隠したい
Movable Typeのように ブログごとに設定したい

36. 実演動画
https://youtu.be/R_ubcrToTwM

37. field_foot.html の活用
‣ 投稿画面で
最後に読み込まれる
テンプレート
‣ JavaScriptを書くと
投稿画面のDOMを操作できる
echo_zero
admin
entry
field_foot.html

38. jQueryによる操作の利点
‣ 多くの人が理解・編集できる
‣ テンプレート一箇所で管理できる
‣ バージョンアップでHTMLが変わっても
致命的な不具合が起きにくい
（処理できなくてデフォルトの投稿画面に戻るだけ）
魔改造
ではない

39. カスタムユニット
2 5

40. わあいカスタムユニット
うぇびんカスタムユニットだいすき
‣ a-blog cms案件で 最も要望が多い機能
‣ 作り方がわかりやすい
‣ HTMLだけで自由なUIが作れる
インポートデータがエンコードされてしまうのが 唯一の難点…

41. 望みのパーツをどこにでも。制作者も更新担当者も
幸せにする、a-blog cmsの「カスタムユニット」の使い方
http://webbingstudio.com/weblog/cms/entry-808.html

42. あふれる愛を抑え 3つに絞る
‣ ボタン
‣ 余白
‣ 画像＋テキスト
テーマを見た人が 教材にできるようなユニットにした

43. 悩んだところ
3

44. どの機能を諦めるか

45. 高度な機能を断念
‣ ポストインクルード
‣ スケジュール
zero ＝ あくまで最低限の下位版 という意味
‣ レイアウトブロック
‣ モジュールユニット
‣ カート
テーマが複雑になる 発注時の需要が少ない

46. まとめ
4

47. 何故 我はテーマを作るのか
‣ テーマからの収益は ほとんどない
‣ 崇高なボランティア精神でもない
フリーランスとしての制作技術の宣伝
業務で使えない技術の実験
ワタシ ヤな人だなーと思っちゃう…

48. 見えない得るものが多いんです
‣ ワークフローを整理できる
a-blog cmsのサイト制作が
恐ろしいレベルで高速化しました…
‣ そのCMSへの理解が深まる
‣ フィードバック・意見交換

49. 札幌のa-blog cmsユーザー
長谷川さん (́ ºムº `) に
見てもらいました

50. (́ ºムº `)「ブログ設定画面は
アコーディオンで閉じない方が 良い気がしました」

51. みんなに使いやすい
テーマって難しい

52. a-blog cms用テーマ
echo_zero
ぜひぜひ 使ってみてください
ご意見・感想お待ちしてます
https://github.com/webbingstudio/
acms_theme_echo_zero

53. ありがとうございました
コンテンツに情熱を、マネージメントに探求を
http://feathericon.com/
feathericon