口田 聖子 :: 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/