Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.
口田 聖子 :: 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.18
http://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…
• ...
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://exa...
特定のカテゴリー専用の
エントリー作成ボタンを作ろう!
管理ボックスのテンプレートを
カスタマイズ
<!̶ BEGIN insert ̶>~<!̶ END insert ̶>が
エントリー作成ボタン
ラベルと「cid」の値を

決め打ちにしたボタンを追加
<form action="" method="post" class="acms-admin-inline-btn">
<input type="submit" name="ACMS_P...
わかりやすい・迷わない

管理ボックスになった!
デフォルトは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-bl...
a-blog cmsの管理画面で、最小のカスタマイズで

最大に機能させる事を考えてみた | maki-o memo
http://www.maki-o.net/memo/ac2015.html
Site2015・Site2016のレイアウトモ...
a-blog cmsのエントリー基本項目を

「edit.html」を編集せずカスタマイズする | CMS3
http://cms-skill.com/tech/ablogcms/entry-361.html
コードが長く編集が難しい、エントリ...
まずは編集設定から
ちょっとした気くばりで
パートナーを幸せにできるCMS
それが       なのです
ありがとうございました
http://webbingstudio.com/
Upcoming SlideShare
Loading in …5
×

a-blog cms 勉強会 in 札幌 x SaCSS 2016 投稿画面を改良してみよう

1,023 views

Published on

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

Published in: Technology
  • Be the first to comment

a-blog cms 勉強会 in 札幌 x SaCSS 2016 投稿画面を改良してみよう

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

×