a-blog cms 勉強会 in 札幌 x SaCSS 2016 投稿画面を改良してみよう
-
Upload
seiko-kuchida -
Category
Technology
-
view
858 -
download
5
Transcript of a-blog cms 勉強会 in 札幌 x SaCSS 2016 投稿画面を改良してみよう
![Page 1: a-blog cms 勉強会 in 札幌 x SaCSS 2016 投稿画面を改良してみよう](https://reader031.fdocument.pub/reader031/viewer/2022020718/586e878a1a28aba0038b6eb3/html5/thumbnails/1.jpg)
口田 聖子 :: WebbingStudio 2016.09.10(Sat)@ 株式会社インフィニットループ会議室
in 札幌 x
a-blog cmsの投稿画面を 改良してみよう
![Page 2: a-blog cms 勉強会 in 札幌 x SaCSS 2016 投稿画面を改良してみよう](https://reader031.fdocument.pub/reader031/viewer/2022020718/586e878a1a28aba0038b6eb3/html5/thumbnails/2.jpg)
口田 聖子(うぇびん)
Webエンジニア CMSアドバイザー a-blog cmsエバンジェリスト
![Page 3: a-blog cms 勉強会 in 札幌 x SaCSS 2016 投稿画面を改良してみよう](https://reader031.fdocument.pub/reader031/viewer/2022020718/586e878a1a28aba0038b6eb3/html5/thumbnails/3.jpg)
エバンジェリストやってます
![Page 4: a-blog cms 勉強会 in 札幌 x SaCSS 2016 投稿画面を改良してみよう](https://reader031.fdocument.pub/reader031/viewer/2022020718/586e878a1a28aba0038b6eb3/html5/thumbnails/4.jpg)
a-blog cms本の2章を書きましたhttps://www.amazon.co.jp/dp/486246341X
![Page 5: a-blog cms 勉強会 in 札幌 x SaCSS 2016 投稿画面を改良してみよう](https://reader031.fdocument.pub/reader031/viewer/2022020718/586e878a1a28aba0038b6eb3/html5/thumbnails/5.jpg)
CSS Nite in SAPPORO Vol.18http://cssnite-sapporo.jp
![Page 6: a-blog cms 勉強会 in 札幌 x SaCSS 2016 投稿画面を改良してみよう](https://reader031.fdocument.pub/reader031/viewer/2022020718/586e878a1a28aba0038b6eb3/html5/thumbnails/6.jpg)
今回のお題
![Page 7: a-blog cms 勉強会 in 札幌 x SaCSS 2016 投稿画面を改良してみよう](https://reader031.fdocument.pub/reader031/viewer/2022020718/586e878a1a28aba0038b6eb3/html5/thumbnails/7.jpg)
a-blog cmsの投稿画面っていいよね!
![Page 8: a-blog cms 勉強会 in 札幌 x SaCSS 2016 投稿画面を改良してみよう](https://reader031.fdocument.pub/reader031/viewer/2022020718/586e878a1a28aba0038b6eb3/html5/thumbnails/8.jpg)
しかし、ユーザーの要望はさまざま
ボタンが多くて 覚えられないな…
ウチが欲しい機能と ちょっと違う…
![Page 9: a-blog cms 勉強会 in 札幌 x SaCSS 2016 投稿画面を改良してみよう](https://reader031.fdocument.pub/reader031/viewer/2022020718/586e878a1a28aba0038b6eb3/html5/thumbnails/9.jpg)
コンフィグの 編集設定
ユニット設定 使ってますか?
![Page 10: a-blog cms 勉強会 in 札幌 x SaCSS 2016 投稿画面を改良してみよう](https://reader031.fdocument.pub/reader031/viewer/2022020718/586e878a1a28aba0038b6eb3/html5/thumbnails/10.jpg)
今からできる 投稿画面カスタマイズ
• 初級編
• 「見出し」ユニットを作る
• 変則的な段組を追加する
• 中級編
• 「ファイル」ユニットを好きな見た目にする
• 管理ボックスを移動する
• 上級編
• クイック投稿ボタンを作る
• カスタムユニット
![Page 11: a-blog cms 勉強会 in 札幌 x SaCSS 2016 投稿画面を改良してみよう](https://reader031.fdocument.pub/reader031/viewer/2022020718/586e878a1a28aba0038b6eb3/html5/thumbnails/11.jpg)
初 級 編
![Page 12: a-blog cms 勉強会 in 札幌 x SaCSS 2016 投稿画面を改良してみよう](https://reader031.fdocument.pub/reader031/viewer/2022020718/586e878a1a28aba0038b6eb3/html5/thumbnails/12.jpg)
「見出し」ユニットを作る
![Page 13: a-blog cms 勉強会 in 札幌 x SaCSS 2016 投稿画面を改良してみよう](https://reader031.fdocument.pub/reader031/viewer/2022020718/586e878a1a28aba0038b6eb3/html5/thumbnails/13.jpg)
「見出し」って作るとき、ちょっと迷うよね
テキストユニットから フォーマットを選ぶの、面倒…
![Page 14: a-blog cms 勉強会 in 札幌 x SaCSS 2016 投稿画面を改良してみよう](https://reader031.fdocument.pub/reader031/viewer/2022020718/586e878a1a28aba0038b6eb3/html5/thumbnails/14.jpg)
編集設定画面で 拡張ユニットを追加
テキストユニットから フォーマットを選ぶの、面倒…
モードで「拡張」を選択 英語名はなんでも構いません
![Page 15: a-blog cms 勉強会 in 札幌 x SaCSS 2016 投稿画面を改良してみよう](https://reader031.fdocument.pub/reader031/viewer/2022020718/586e878a1a28aba0038b6eb3/html5/thumbnails/15.jpg)
ユニット設定画面へ移動すると…
「見出し大」という枠が 増えている!
![Page 16: a-blog cms 勉強会 in 札幌 x SaCSS 2016 投稿画面を改良してみよう](https://reader031.fdocument.pub/reader031/viewer/2022020718/586e878a1a28aba0038b6eb3/html5/thumbnails/16.jpg)
テキストユニットを追加して フォーマットを設定
![Page 17: a-blog cms 勉強会 in 札幌 x SaCSS 2016 投稿画面を改良してみよう](https://reader031.fdocument.pub/reader031/viewer/2022020718/586e878a1a28aba0038b6eb3/html5/thumbnails/17.jpg)
ボタンポチッ☆で 見出しを作れるようになった!
![Page 18: a-blog cms 勉強会 in 札幌 x SaCSS 2016 投稿画面を改良してみよう](https://reader031.fdocument.pub/reader031/viewer/2022020718/586e878a1a28aba0038b6eb3/html5/thumbnails/18.jpg)
変則的な段組を追加する
![Page 19: a-blog cms 勉強会 in 札幌 x SaCSS 2016 投稿画面を改良してみよう](https://reader031.fdocument.pub/reader031/viewer/2022020718/586e878a1a28aba0038b6eb3/html5/thumbnails/19.jpg)
均等な段組は、意外と使わない
※わかりやすいように色をつけています
![Page 20: a-blog cms 勉強会 in 札幌 x SaCSS 2016 投稿画面を改良してみよう](https://reader031.fdocument.pub/reader031/viewer/2022020718/586e878a1a28aba0038b6eb3/html5/thumbnails/20.jpg)
編集設定画面で ユニットグループを追加
acms-col-sm-8 = 8/12 = 3分の2カラム
![Page 21: a-blog cms 勉強会 in 札幌 x SaCSS 2016 投稿画面を改良してみよう](https://reader031.fdocument.pub/reader031/viewer/2022020718/586e878a1a28aba0038b6eb3/html5/thumbnails/21.jpg)
3分の2は使い勝手がいいね
![Page 22: a-blog cms 勉強会 in 札幌 x SaCSS 2016 投稿画面を改良してみよう](https://reader031.fdocument.pub/reader031/viewer/2022020718/586e878a1a28aba0038b6eb3/html5/thumbnails/22.jpg)
お気付きでしょうか?
![Page 23: a-blog cms 勉強会 in 札幌 x SaCSS 2016 投稿画面を改良してみよう](https://reader031.fdocument.pub/reader031/viewer/2022020718/586e878a1a28aba0038b6eb3/html5/thumbnails/23.jpg)
と、いうことは…
![Page 24: a-blog cms 勉強会 in 札幌 x SaCSS 2016 投稿画面を改良してみよう](https://reader031.fdocument.pub/reader031/viewer/2022020718/586e878a1a28aba0038b6eb3/html5/thumbnails/24.jpg)
他のフレームワークも使える!?
※フレームワーク変更は /include/unit.html の修正が必要です
![Page 25: a-blog cms 勉強会 in 札幌 x SaCSS 2016 投稿画面を改良してみよう](https://reader031.fdocument.pub/reader031/viewer/2022020718/586e878a1a28aba0038b6eb3/html5/thumbnails/25.jpg)
a-blog cms の見出しとユニットグループでエントリーの装飾をする | Tips | 4kaku design
http://4kakudez.com/tips/heading-and-unit-group.html
テキストタグセレクタと段組以外のユニットグループのすてきな使い方
![Page 26: a-blog cms 勉強会 in 札幌 x SaCSS 2016 投稿画面を改良してみよう](https://reader031.fdocument.pub/reader031/viewer/2022020718/586e878a1a28aba0038b6eb3/html5/thumbnails/26.jpg)
中 級 編
![Page 27: a-blog cms 勉強会 in 札幌 x SaCSS 2016 投稿画面を改良してみよう](https://reader031.fdocument.pub/reader031/viewer/2022020718/586e878a1a28aba0038b6eb3/html5/thumbnails/27.jpg)
「ファイル」ユニットを好きな見た目にする
![Page 28: a-blog cms 勉強会 in 札幌 x SaCSS 2016 投稿画面を改良してみよう](https://reader031.fdocument.pub/reader031/viewer/2022020718/586e878a1a28aba0038b6eb3/html5/thumbnails/28.jpg)
ファイルユニットのアイコンは ちょっと昔な感じ
![Page 29: a-blog cms 勉強会 in 札幌 x SaCSS 2016 投稿画面を改良してみよう](https://reader031.fdocument.pub/reader031/viewer/2022020718/586e878a1a28aba0038b6eb3/html5/thumbnails/29.jpg)
編集設定で、拡張ユニットを追加
英語名の先頭に「file_」を付ける
![Page 30: a-blog cms 勉強会 in 札幌 x SaCSS 2016 投稿画面を改良してみよう](https://reader031.fdocument.pub/reader031/viewer/2022020718/586e878a1a28aba0038b6eb3/html5/thumbnails/30.jpg)
自作ユニット用テンプレートで 表示されるHTMLを定義
/themes/system/include/unit.html の内容を参考にして /include/unit/extend.html ファイルを作成します
![Page 31: a-blog cms 勉強会 in 札幌 x SaCSS 2016 投稿画面を改良してみよう](https://reader031.fdocument.pub/reader031/viewer/2022020718/586e878a1a28aba0038b6eb3/html5/thumbnails/31.jpg)
アイコンフォント+ボタンにしました
![Page 32: a-blog cms 勉強会 in 札幌 x SaCSS 2016 投稿画面を改良してみよう](https://reader031.fdocument.pub/reader031/viewer/2022020718/586e878a1a28aba0038b6eb3/html5/thumbnails/32.jpg)
既存ユニットを改変したユニットの作り方
• 拡張ユニットを作る
• 英語名の先頭に既存ユニット名を付ける
•テキスト = text_example 画像 = image_example動画 = youtube_example etc…
• 自作ユニット用テンプレートを追加
投稿画面のUIは同じで、表示のみ異なるユニットができる
![Page 33: a-blog cms 勉強会 in 札幌 x SaCSS 2016 投稿画面を改良してみよう](https://reader031.fdocument.pub/reader031/viewer/2022020718/586e878a1a28aba0038b6eb3/html5/thumbnails/33.jpg)
a-blog cmsのファイルアイコンにFont Awesomeを使ってみる | AOGIRI.net
http://aogiri.net/fileicon.html
拡張子によるアイコンの表示切り替えの説明もあります extend.html 追加前のバージョンの記事なので スライドと手順が異なりますが、こちらでも実装できます
![Page 34: a-blog cms 勉強会 in 札幌 x SaCSS 2016 投稿画面を改良してみよう](https://reader031.fdocument.pub/reader031/viewer/2022020718/586e878a1a28aba0038b6eb3/html5/thumbnails/34.jpg)
管理ボックスを移動する
![Page 35: a-blog cms 勉強会 in 札幌 x SaCSS 2016 投稿画面を改良してみよう](https://reader031.fdocument.pub/reader031/viewer/2022020718/586e878a1a28aba0038b6eb3/html5/thumbnails/35.jpg)
管理ボックスをページ最上部にしたい
![Page 36: a-blog cms 勉強会 in 札幌 x SaCSS 2016 投稿画面を改良してみよう](https://reader031.fdocument.pub/reader031/viewer/2022020718/586e878a1a28aba0038b6eb3/html5/thumbnails/36.jpg)
管理ボックスはどこにある?
テーマ内のメインテンプレート
・top.html・index.html・entry.html・404.html
![Page 37: a-blog cms 勉強会 in 札幌 x SaCSS 2016 投稿画面を改良してみよう](https://reader031.fdocument.pub/reader031/viewer/2022020718/586e878a1a28aba0038b6eb3/html5/thumbnails/37.jpg)
メインテンプレートを編集
![Page 38: a-blog cms 勉強会 in 札幌 x SaCSS 2016 投稿画面を改良してみよう](https://reader031.fdocument.pub/reader031/viewer/2022020718/586e878a1a28aba0038b6eb3/html5/thumbnails/38.jpg)
bodyの直下へ移動
![Page 39: a-blog cms 勉強会 in 札幌 x SaCSS 2016 投稿画面を改良してみよう](https://reader031.fdocument.pub/reader031/viewer/2022020718/586e878a1a28aba0038b6eb3/html5/thumbnails/39.jpg)
WxxxPxxxxっぽくなった
管理ボックスは、body要素内であれば
好きな場所に表示できます
![Page 40: a-blog cms 勉強会 in 札幌 x SaCSS 2016 投稿画面を改良してみよう](https://reader031.fdocument.pub/reader031/viewer/2022020718/586e878a1a28aba0038b6eb3/html5/thumbnails/40.jpg)
上 級 編
![Page 41: a-blog cms 勉強会 in 札幌 x SaCSS 2016 投稿画面を改良してみよう](https://reader031.fdocument.pub/reader031/viewer/2022020718/586e878a1a28aba0038b6eb3/html5/thumbnails/41.jpg)
クイック投稿ボタンを作る
![Page 42: a-blog cms 勉強会 in 札幌 x SaCSS 2016 投稿画面を改良してみよう](https://reader031.fdocument.pub/reader031/viewer/2022020718/586e878a1a28aba0038b6eb3/html5/thumbnails/42.jpg)
高機能・親切な a-blog cmsにも
操作面の難点がある
![Page 43: a-blog cms 勉強会 in 札幌 x SaCSS 2016 投稿画面を改良してみよう](https://reader031.fdocument.pub/reader031/viewer/2022020718/586e878a1a28aba0038b6eb3/html5/thumbnails/43.jpg)
カスタムフィールドがない!?
公式テーマ「物件情報」のようにカテゴリー専用のフィールドを作っていると…
物件情報以外のページで「エントリー作成」ボタンを押しても、フィールドが出ない
![Page 44: a-blog cms 勉強会 in 札幌 x SaCSS 2016 投稿画面を改良してみよう](https://reader031.fdocument.pub/reader031/viewer/2022020718/586e878a1a28aba0038b6eb3/html5/thumbnails/44.jpg)
なぜ出ないのか?
投稿画面のURLに「カテゴリーの情報」がないためです
このURLだとフィールドが出ない http://example.com/bid/1/admin/entry-edit/
このURLだとフィールドが出る http://example.com/bid/1/cid/5/admin/entry-edit/
![Page 45: a-blog cms 勉強会 in 札幌 x SaCSS 2016 投稿画面を改良してみよう](https://reader031.fdocument.pub/reader031/viewer/2022020718/586e878a1a28aba0038b6eb3/html5/thumbnails/45.jpg)
特定のカテゴリー専用の エントリー作成ボタンを作ろう!
![Page 46: a-blog cms 勉強会 in 札幌 x SaCSS 2016 投稿画面を改良してみよう](https://reader031.fdocument.pub/reader031/viewer/2022020718/586e878a1a28aba0038b6eb3/html5/thumbnails/46.jpg)
管理ボックスのテンプレートを カスタマイズ
<!̶ BEGIN insert ̶>~<!̶ END insert ̶>が
エントリー作成ボタン
![Page 47: a-blog cms 勉強会 in 札幌 x SaCSS 2016 投稿画面を改良してみよう](https://reader031.fdocument.pub/reader031/viewer/2022020718/586e878a1a28aba0038b6eb3/html5/thumbnails/47.jpg)
ラベルと「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>
![Page 48: a-blog cms 勉強会 in 札幌 x SaCSS 2016 投稿画面を改良してみよう](https://reader031.fdocument.pub/reader031/viewer/2022020718/586e878a1a28aba0038b6eb3/html5/thumbnails/48.jpg)
わかりやすい・迷わない管理ボックスになった!
デフォルトはform要素ですが、a要素でもOKですテーマを修正するので「上級編」としていますが
個人的には、必須のカスタマイズと思います
![Page 49: a-blog cms 勉強会 in 札幌 x SaCSS 2016 投稿画面を改良してみよう](https://reader031.fdocument.pub/reader031/viewer/2022020718/586e878a1a28aba0038b6eb3/html5/thumbnails/49.jpg)
納品後クライアントの担当者さんが、より使いやすく運用できるように... #ablogcms | ふわっとブログ
http://fuwhat.com/blog/ablogcms_advent2014.html/tag/a-blogcms/
後半「ボタンの設置ひとつで、更新担当者を悩ませない」 にショートカットボタンの作り方が解説されています
![Page 50: a-blog cms 勉強会 in 札幌 x SaCSS 2016 投稿画面を改良してみよう](https://reader031.fdocument.pub/reader031/viewer/2022020718/586e878a1a28aba0038b6eb3/html5/thumbnails/50.jpg)
カスタムユニット
![Page 51: a-blog cms 勉強会 in 札幌 x SaCSS 2016 投稿画面を改良してみよう](https://reader031.fdocument.pub/reader031/viewer/2022020718/586e878a1a28aba0038b6eb3/html5/thumbnails/51.jpg)
ユニットは、完全自作もできるhttp://mychara.sakaimetomoko.com
![Page 52: a-blog cms 勉強会 in 札幌 x SaCSS 2016 投稿画面を改良してみよう](https://reader031.fdocument.pub/reader031/viewer/2022020718/586e878a1a28aba0038b6eb3/html5/thumbnails/52.jpg)
画像+テキストのカスタムユニットはとっても頼れるヤツ!
![Page 53: a-blog cms 勉強会 in 札幌 x SaCSS 2016 投稿画面を改良してみよう](https://reader031.fdocument.pub/reader031/viewer/2022020718/586e878a1a28aba0038b6eb3/html5/thumbnails/53.jpg)
カスタムユニット ハンズオンhttps://developer.a-blogcms.jp/blog/acmscamp/customunit.html
a-blog cms Training Camp 2015のハンズオン もっとも丁寧な「カスタムユニット」の解説です
![Page 54: a-blog cms 勉強会 in 札幌 x SaCSS 2016 投稿画面を改良してみよう](https://reader031.fdocument.pub/reader031/viewer/2022020718/586e878a1a28aba0038b6eb3/html5/thumbnails/54.jpg)
ま と め
![Page 55: a-blog cms 勉強会 in 札幌 x SaCSS 2016 投稿画面を改良してみよう](https://reader031.fdocument.pub/reader031/viewer/2022020718/586e878a1a28aba0038b6eb3/html5/thumbnails/55.jpg)
そして伝説へ…
a-blog cmsは
• 管理画面を公開ページと同じタグでカスタマイズできる
• 通常のHTMLファイルと同様に、JavaScriptを記述できる
• 管理画面用JSのイベントハンドラが公開されている
ということは… a-blog cmsとJavaScriptの一定の知識があれば
管理画面を自由にカスタマイズできる!
![Page 56: a-blog cms 勉強会 in 札幌 x SaCSS 2016 投稿画面を改良してみよう](https://reader031.fdocument.pub/reader031/viewer/2022020718/586e878a1a28aba0038b6eb3/html5/thumbnails/56.jpg)
a-blog cmsの管理画面で、最小のカスタマイズで最大に機能させる事を考えてみた | maki-o memo
http://www.maki-o.net/memo/ac2015.html
Site2015・Site2016のレイアウトモジュールは 管理画面にも使えてしまいます WxxxPxxxxのようなダッシュボードも夢じゃないです
![Page 57: a-blog cms 勉強会 in 札幌 x SaCSS 2016 投稿画面を改良してみよう](https://reader031.fdocument.pub/reader031/viewer/2022020718/586e878a1a28aba0038b6eb3/html5/thumbnails/57.jpg)
a-blog cmsのエントリー基本項目を「edit.html」を編集せずカスタマイズする | CMS3
http://cms-skill.com/tech/ablogcms/entry-361.html
コードが長く編集が難しい、エントリーの基本項目をMxxxxxxTxxxの某プラグインのように jQueryでカスタマイズする方法です
![Page 58: a-blog cms 勉強会 in 札幌 x SaCSS 2016 投稿画面を改良してみよう](https://reader031.fdocument.pub/reader031/viewer/2022020718/586e878a1a28aba0038b6eb3/html5/thumbnails/58.jpg)
まずは編集設定から
ちょっとした気くばりで パートナーを幸せにできるCMS それが なのです
![Page 59: a-blog cms 勉強会 in 札幌 x SaCSS 2016 投稿画面を改良してみよう](https://reader031.fdocument.pub/reader031/viewer/2022020718/586e878a1a28aba0038b6eb3/html5/thumbnails/59.jpg)
ありがとうございました
http://webbingstudio.com/