2016年9月10日に開催された「a-blog cms in 札幌 x SaCSS」のエバンジェリストセッションのスライドです。a-blog cmsの投稿画面をカスタマイズする様々な方法を紹介しています。

1. 口田 聖子 :: WebbingStudio
2016.09.10（Sat）@ 株式会社インフィニットループ会議室
in 札幌 x
a-blog cmsの投稿画面を
改良してみよう

2. 口田 聖子（うぇびん）
Webエンジニア
CMSアドバイザー
a-blog cmsエバンジェリスト

3. エバンジェリストやってます

4. a-blog cms本の2章を書きました
https://www.amazon.co.jp/dp/486246341X

5. CSS Nite in SAPPORO Vol.18
http://cssnite-sapporo.jp

6. 今回のお題

7. a-blog cmsの投稿画面っていいよね！

8. しかし、ユーザーの要望はさまざま
ボタンが多くて
覚えられないな…
ウチが欲しい機能と
ちょっと違う…

9. コンフィグの
編集設定
ユニット設定
使ってますか？

10. 今からできる 投稿画面カスタマイズ
• 初級編
•「見出し」ユニットを作る
•変則的な段組を追加する
• 中級編
•「ファイル」ユニットを好きな見た目にする
•管理ボックスを移動する
• 上級編
• クイック投稿ボタンを作る
• カスタムユニット

11. 初 級 編

12. 「見出し」ユニットを作る

13. 「見出し」って
作るとき、ちょっと迷うよね
テキストユニットから
フォーマットを選ぶの、面倒…

14. 編集設定画面で
拡張ユニットを追加
テキストユニットから
フォーマットを選ぶの、面倒…
モードで「拡張」を選択
英語名はなんでも構いません

15. ユニット設定画面へ移動すると…
「見出し大」という枠が
増えている！

16. テキストユニットを追加して
フォーマットを設定

17. ボタンポチッ☆で
見出しを作れるようになった！

18. 変則的な段組を追加する

19. 均等な段組は、意外と使わない
※わかりやすいように色をつけています

20. 編集設定画面で
ユニットグループを追加
acms-col-sm-8
＝ 8/12 ＝ 3分の2カラム

21. 3分の2は使い勝手がいいね

22. お気付きでしょうか？

23. と、いうことは…

24. 他のフレームワークも使える！？
※フレームワーク変更は /include/unit.html の修正が必要です

25. a-blog cms の見出しとユニットグループで
エントリーの装飾をする | Tips | 4kaku design
http://4kakudez.com/tips/heading-and-unit-group.html
テキストタグセレクタと
段組以外のユニットグループのすてきな使い方

26. 中 級 編

27. 「ファイル」ユニットを
好きな見た目にする

28. ファイルユニットのアイコンは
ちょっと昔な感じ

29. 編集設定で、拡張ユニットを追加
英語名の先頭に
「file_」を付ける

30. 自作ユニット用テンプレートで
表示されるHTMLを定義
/themes/system/include/unit.html の内容を参考にして
/include/unit/extend.html ファイルを作成します

31. アイコンフォント＋ボタンにしました

32. 既存ユニットを改変したユニットの作り方
• 拡張ユニットを作る
• 英語名の先頭に既存ユニット名を付ける
•テキスト = text_example 画像 = image_example
動画 = youtube_example etc…
• 自作ユニット用テンプレートを追加
投稿画面のUIは同じで、表示のみ異なるユニットができる

33. a-blog cmsのファイルアイコンに
Font Awesomeを使ってみる | AOGIRI.net
http://aogiri.net/fileicon.html
拡張子によるアイコンの表示切り替えの説明もあります
extend.html 追加前のバージョンの記事なので
スライドと手順が異なりますが、こちらでも実装できます

34. 管理ボックスを移動する

35. 管理ボックスをページ最上部にしたい

36. 管理ボックスはどこにある？
テーマ内の
メインテンプレート
・top.html
・index.html
・entry.html
・404.html

37. メインテンプレートを編集

38. bodyの直下へ移動

39. WxxxPxxxxっぽくなった
管理ボックスは、body要素内であれば
好きな場所に表示できます

40. 上 級 編

41. クイック投稿ボタンを作る

42. 高機能・親切な
a-blog cmsにも
操作面の難点がある

43. カスタムフィールドがない！？
公式テーマ「物件情報」のように
カテゴリー専用の
フィールドを作っていると…
物件情報以外のページで
「エントリー作成」ボタンを
押しても、フィールドが出ない

44. なぜ出ないのか？
投稿画面のURLに「カテゴリーの情報」がないためです
このURLだとフィールドが出ない
http://example.com/bid/1/admin/entry-edit/
このURLだとフィールドが出る
http://example.com/bid/1/cid/5/admin/entry-edit/

45. 特定のカテゴリー専用の
エントリー作成ボタンを作ろう！

46. 管理ボックスのテンプレートを
カスタマイズ
<!̶ BEGIN insert ̶>～<!̶ END insert ̶>が
エントリー作成ボタン

47. ラベルと「cid」の値を
決め打ちにしたボタンを追加
<form action="" method="post" class="acms-admin-inline-btn">
<input type="submit" name="ACMS_POST_2GET" value="物件情報" clas
<input type="hidden" name="admin" value="entry-edit" />
<input type="hidden" name="bid" value="%{BID}" />
<input type="hidden" name="cid" value="5" />
</form>

48. わかりやすい・迷わない
管理ボックスになった！
デフォルトはform要素ですが、a要素でもOKです
テーマを修正するので「上級編」としていますが
個人的には、必須のカスタマイズと思います

49. 納品後クライアントの担当者さんが、より使いやすく
運用できるように... #ablogcms | ふわっとブログ
http://fuwhat.com/blog/ablogcms_advent2014.html/tag/a-blogcms/
後半「ボタンの設置ひとつで、更新担当者を悩ませない」
にショートカットボタンの作り方が解説されています

50. カスタムユニット

51. ユニットは、完全自作もできる
http://mychara.sakaimetomoko.com

52. 画像＋テキストのカスタムユニットは
とっても頼れるヤツ！

53. カスタムユニット ハンズオン
https://developer.a-blogcms.jp/blog/acmscamp/customunit.html
a-blog cms Training Camp 2015のハンズオン
もっとも丁寧な「カスタムユニット」の解説です

54. ま と め

55. そして伝説へ…
a-blog cmsは
• 管理画面を公開ページと同じタグでカスタマイズできる
• 通常のHTMLファイルと同様に、JavaScriptを記述できる
• 管理画面用JSのイベントハンドラが公開されている
ということは…
a-blog cmsとJavaScriptの一定の知識があれば
管理画面を自由にカスタマイズできる！

56. a-blog cmsの管理画面で、最小のカスタマイズで
最大に機能させる事を考えてみた | maki-o memo
http://www.maki-o.net/memo/ac2015.html
Site2015・Site2016のレイアウトモジュールは
管理画面にも使えてしまいます
WxxxPxxxxのようなダッシュボードも夢じゃないです

57. a-blog cmsのエントリー基本項目を
「edit.html」を編集せずカスタマイズする | CMS3
http://cms-skill.com/tech/ablogcms/entry-361.html
コードが長く編集が難しい、エントリーの基本項目を
MxxxxxxTxxxの某プラグインのように
jQueryでカスタマイズする方法です

58. まずは編集設定から
ちょっとした気くばりで
パートナーを幸せにできるCMS
それが なのです

59. ありがとうございました
http://webbingstudio.com/