口田 聖子 :: WebbingStudio 2016.09.10（Sat）@ 株式会社インフィニットループ会議室

in 札幌 x

a-blog cmsの投稿画面を 改良してみよう

口田 聖子（うぇびん）

Webエンジニア CMSアドバイザー a-blog cmsエバンジェリスト

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

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

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

今回のお題

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

しかし、ユーザーの要望はさまざま

ボタンが多くて 覚えられないな…

ウチが欲しい機能と ちょっと違う…

コンフィグの 編集設定

ユニット設定 使ってますか？

今からできる 投稿画面カスタマイズ

• 初級編

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

• 変則的な段組を追加する

• 中級編

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

• 管理ボックスを移動する

• 上級編

• クイック投稿ボタンを作る

• カスタムユニット

初 級 編

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

「見出し」って作るとき、ちょっと迷うよね

テキストユニットから フォーマットを選ぶの、面倒…

編集設定画面で 拡張ユニットを追加

テキストユニットから フォーマットを選ぶの、面倒…

モードで「拡張」を選択 英語名はなんでも構いません

ユニット設定画面へ移動すると…

「見出し大」という枠が 　増えている！

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

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

変則的な段組を追加する

均等な段組は、意外と使わない

※わかりやすいように色をつけています

編集設定画面で ユニットグループを追加

acms-col-sm-8 ＝ 8/12 ＝ 3分の2カラム

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

お気付きでしょうか？

と、いうことは…

他のフレームワークも使える！？

※フレームワーク変更は /include/unit.html の修正が必要です

a-blog cms の見出しとユニットグループでエントリーの装飾をする | Tips | 4kaku design

http://4kakudez.com/tips/heading-and-unit-group.html

テキストタグセレクタと段組以外のユニットグループのすてきな使い方

中 級 編

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

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

編集設定で、拡張ユニットを追加

英語名の先頭に「file_」を付ける

自作ユニット用テンプレートで 表示されるHTMLを定義

/themes/system/include/unit.html の内容を参考にして /include/unit/extend.html ファイルを作成します

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

既存ユニットを改変したユニットの作り方

• 拡張ユニットを作る

• 英語名の先頭に既存ユニット名を付ける

•テキスト = text_example　画像 = image_example動画 = youtube_example　etc…

• 自作ユニット用テンプレートを追加

投稿画面のUIは同じで、表示のみ異なるユニットができる

a-blog cmsのファイルアイコンにFont Awesomeを使ってみる | AOGIRI.net

http://aogiri.net/fileicon.html

拡張子によるアイコンの表示切り替えの説明もあります extend.html 追加前のバージョンの記事なので スライドと手順が異なりますが、こちらでも実装できます

管理ボックスを移動する

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

管理ボックスはどこにある？

テーマ内のメインテンプレート

・top.html・index.html・entry.html・404.html

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

bodyの直下へ移動

WxxxPxxxxっぽくなった

管理ボックスは、body要素内であれば

好きな場所に表示できます

上 級 編

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

高機能・親切な a-blog cmsにも

操作面の難点がある

カスタムフィールドがない！？

公式テーマ「物件情報」のようにカテゴリー専用のフィールドを作っていると…

物件情報以外のページで「エントリー作成」ボタンを押しても、フィールドが出ない

なぜ出ないのか？

投稿画面のURLに「カテゴリーの情報」がないためです

このURLだとフィールドが出ない http://example.com/bid/1/admin/entry-edit/

このURLだとフィールドが出る http://example.com/bid/1/cid/5/admin/entry-edit/

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

管理ボックスのテンプレートを カスタマイズ

<!̶ BEGIN insert ̶>～<!̶ END insert ̶>が

エントリー作成ボタン

ラベルと「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>

わかりやすい・迷わない管理ボックスになった！

デフォルトはform要素ですが、a要素でもOKですテーマを修正するので「上級編」としていますが

個人的には、必須のカスタマイズと思います

納品後クライアントの担当者さんが、より使いやすく運用できるように... #ablogcms | ふわっとブログ

http://fuwhat.com/blog/ablogcms_advent2014.html/tag/a-blogcms/

後半「ボタンの設置ひとつで、更新担当者を悩ませない」 にショートカットボタンの作り方が解説されています

カスタムユニット

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

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

カスタムユニット ハンズオンhttps://developer.a-blogcms.jp/blog/acmscamp/customunit.html

a-blog cms Training Camp 2015のハンズオン もっとも丁寧な「カスタムユニット」の解説です

ま と め

そして伝説へ…

a-blog cmsは

• 管理画面を公開ページと同じタグでカスタマイズできる

• 通常のHTMLファイルと同様に、JavaScriptを記述できる

• 管理画面用JSのイベントハンドラが公開されている

ということは… a-blog cmsとJavaScriptの一定の知識があれば

管理画面を自由にカスタマイズできる！

a-blog cmsの管理画面で、最小のカスタマイズで最大に機能させる事を考えてみた | maki-o memo

http://www.maki-o.net/memo/ac2015.html

Site2015・Site2016のレイアウトモジュールは 管理画面にも使えてしまいます WxxxPxxxxのようなダッシュボードも夢じゃないです

a-blog cmsのエントリー基本項目を「edit.html」を編集せずカスタマイズする | CMS3

http://cms-skill.com/tech/ablogcms/entry-361.html

コードが長く編集が難しい、エントリーの基本項目をMxxxxxxTxxxの某プラグインのように jQueryでカスタマイズする方法です

まずは編集設定から

ちょっとした気くばりで パートナーを幸せにできるCMS それが　　　　　　　なのです

ありがとうございました

http://webbingstudio.com/