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/