Ce diaporama a bien été signalé.
Nous utilisons votre profil LinkedIn et vos données d’activité pour vous proposer des publicités personnalisées et pertinentes. Vous pouvez changer vos préférences de publicités à tout moment.
      用テーマ
について
ウェビングスタジオ 口田 聖子
2017-05-19(Fri) 名古屋城 本丸御殿 孔雀之間
a-blog cms Training Camp 2017 Spring
http://webbingstudio.com
口田 聖子
くちだ
(うぇびん)
せいこ
‣ 札幌
‣ フリーランス10年目
‣ CMSいろいろ扱ってます
フロントエンドエンジニア / CMSアドバイザー
a-blog cmsエバンジェリスト
昨年のお仕事(ざっくり)
その他
Movable Type
a-blog cms
技術サポート
改修・保守
構築と
コーディング
構築のみ
CMS別 内容別
a-blog cmsが半分超えた!
サポート業務が増えた!
ぜひぜひ 今後もご相談くださいー
a-blog cms用テーマ
echo_zero
オープンソース
商用有料
非商用・学習目的は無料
https://github.com/webbingstudio/
acms_theme_echo_zero
今回の内容
echo_zeroができるまで
特に考慮したところ
モジュール編集機能
ディクレクトリ・命名規則 etc…
悩んだところ
まとめ
1
2
3
4
echo_zeroができるまで
1
echoプロジェクト
http://cms-skill.com/echo/
フレームワークテーマ
プロジェクトの目的
制作現場に合ったテーマを作る!
‣ プロトタイプ→本番構築の流れに特化
‣ 使い回しやすい構造
ディレクター デザイナー
コーダー
変更依頼
素材送付
変更依頼
実装
Movable Type用テーマ
echo Bootstrap
2015年12月リリース
https://github.com/webbingstudio/
mt_theme_echo_bootstrap
正直 あかんかった
‣ デザインの不満 っていうかださい
‣ bootstrapに依存
‣ 不要な機能を削除しにくい
‣ スマートフォン対応が不十分
追加より削除が重要な理由
‣ 納品時に、不要な機能の削除を

求められることは多い
‣ 数ヶ月後、数年後の、改修時の混乱を防ぐ
‣ プロジェクトの軽量化
a-blog cms版の開発開始
2016年5月の段階で、レイアウトブロックまで実装できていた
頓挫した
‣ やっぱりデザインが不満!
‣ 困難な機能から実装したため

ディレクトリ構造が破綻
‣ a-blog cms 高機能すぎ!(褒めてる)

全部実装するのは無理
根本から見直し
‣ デザイン再考、トレンドの洗い出し

(WordPressテーマ「Habakiri」をインスパイア)
‣ レイアウトブロック対応をやめ

わかりやすい構造に
‣ 実際の仕事から学習+リサーチ
https://wordpress...
リリースまで

半年かかりました
途中、182回くらい
心が折れかけました
特に考慮したところ
2
モジュール編集機能
2 1
各モジュールの外観は

管理画面から編集できる
a-blog cms公式の機能も対応
日付・カテゴリー・タグ・概要も

モジュール編集画面から非表示にできます
実演動画
https://youtu.be/eobSdX7_QMw
モジュールカスタムフィールド
‣ モジュール設定画面も

フィールドを作れる
‣ 決まったパス・ファイル名で

簡単に実装
‣ エントリーフィールドと同じ書き方!
echo_zero
admin
module
field.html
Drupalの機能「Views」
同様のカスタマイズができる

(リリース後に知った)
見出し・表示件数程度なら

CMSが管理するのが

コンテンツマネージメント
このタイプのCMSが

かなり普及した
ディレクトリ・命名規則
2 2
ディレクトリをどうする
‣ システムで指定されている

ファイル以外は自由
‣ a-blog cmsテーマは

ファイルの整理が重要
‣ でも階層を深くしたくない
echo_zero
include
hoge
fuga
piyo
モジュール関係
module
モジュールID.html
module_loop
モジュールの種類_

クラス.html
ループを別ファイルにする利点
簡単

差し替え
レイアウトブロックの実装もしやすくなる…はず!
card summary
META・変数
‣ 変数は 公式の

bootstrap2016より

階層が深い
‣ テーマ直下に

削除できないディレクトリを

作らないよう 敢えて階層を下げた
include
head
vars
課題が解決
不要な機能を削除しにくい
⬇
最低限の手順で

削除できるようになった
納品後の「ここの表示が変更になった。どう直したら?」

という問い合わせでも、手順を説明しやすくなった
管理ボックスの改良
2 3
新規作成のUIをプルダウンに
多くのCMSが採用しているインターフェース
意外と簡単に作れる
‣ すべてのカテゴリーを並列表示する

モジュールIDを作る
‣ プルダウンとしてリストアップ
‣ 選択すると、各投稿画面のURLに

簡単なJavaScriptで移動
投稿画面の改良
2 4
魔改造
ではない
カテゴリーやタグを隠したい
Movable Typeのように ブログごとに設定したい
実演動画
https://youtu.be/R_ubcrToTwM
field_foot.html の活用
‣ 投稿画面で

最後に読み込まれる

テンプレート
‣ JavaScriptを書くと

投稿画面のDOMを操作できる
echo_zero
admin
entry
field_foot.html
jQueryによる操作の利点
‣ 多くの人が理解・編集できる
‣ テンプレート一箇所で管理できる
‣ バージョンアップでHTMLが変わっても

致命的な不具合が起きにくい

(処理できなくてデフォルトの投稿画面に戻るだけ)
魔改造
ではない
カスタムユニット
2 5
わあいカスタムユニット

うぇびんカスタムユニットだいすき
‣ a-blog cms案件で 最も要望が多い機能
‣ 作り方がわかりやすい
‣ HTMLだけで自由なUIが作れる
インポートデータがエンコードされてしまうのが 唯一の難点…
望みのパーツをどこにでも。制作者も更新担当者も

幸せにする、a-blog cmsの「カスタムユニット」の使い方
http://webbingstudio.com/weblog/cms/entry-808.html
あふれる愛を抑え 3つに絞る
‣ ボタン
‣ 余白
‣ 画像+テキスト
テーマを見た人が 教材にできるようなユニットにした
悩んだところ
3
どの機能を諦めるか
高度な機能を断念
‣ ポストインクルード
‣ スケジュール
zero = あくまで最低限の下位版 という意味
‣ レイアウトブロック
‣ モジュールユニット
‣ カート
テーマが複雑になる 発注時の需要が少ない
まとめ
4
何故 我はテーマを作るのか
‣ テーマからの収益は ほとんどない
‣ 崇高なボランティア精神でもない
フリーランスとしての制作技術の宣伝
業務で使えない技術の実験
ワタシ ヤな人だなーと思っちゃう…
見えない得るものが多いんです
‣ ワークフローを整理できる
a-blog cmsのサイト制作が

恐ろしいレベルで高速化しました…
‣ そのCMSへの理解が深まる
‣ フィードバック・意見交換
札幌のa-blog cmsユーザー
長谷川さん (́ ºムº `) に
見てもらいました
(́ ºムº `)「ブログ設定画面は
アコーディオンで閉じない方が 良い気がしました」
みんなに使いやすい
テーマって難しい
a-blog cms用テーマ
echo_zero
ぜひぜひ 使ってみてください

ご意見・感想お待ちしてます
https://github.com/webbingstudio/
acms_theme_echo_zero
ありがとうございました
コンテンツに情熱を、マネージメントに探求を
http://feathericon.com/
feathericon
Prochain SlideShare
Chargement dans…5
×

0

Partager

Télécharger pour lire hors ligne

a-blog cms Training Camp 2017 Spring「a-blog cms用テーマ echo_zeroについて」

Télécharger pour lire hors ligne

a-blog cms Training Camp 2017 Springのエバンジェリストセッションのスライドです。内容を一部変更しています。

echo_zeroデモサイト
http://cms-skill.com/echo_zero_demo/
管理画面カスタマイズの解説動画
https://youtu.be/eobSdX7_QMw

  • Soyez le premier à aimer ceci

a-blog cms Training Camp 2017 Spring「a-blog cms用テーマ echo_zeroについて」

  1. 1.       用テーマ について ウェビングスタジオ 口田 聖子 2017-05-19(Fri) 名古屋城 本丸御殿 孔雀之間 a-blog cms Training Camp 2017 Spring
  2. 2. http://webbingstudio.com 口田 聖子 くちだ (うぇびん) せいこ ‣ 札幌 ‣ フリーランス10年目 ‣ CMSいろいろ扱ってます フロントエンドエンジニア / CMSアドバイザー a-blog cmsエバンジェリスト
  3. 3. 昨年のお仕事(ざっくり) その他 Movable Type a-blog cms 技術サポート 改修・保守 構築と コーディング 構築のみ CMS別 内容別
  4. 4. a-blog cmsが半分超えた! サポート業務が増えた! ぜひぜひ 今後もご相談くださいー
  5. 5. a-blog cms用テーマ echo_zero オープンソース 商用有料 非商用・学習目的は無料 https://github.com/webbingstudio/ acms_theme_echo_zero
  6. 6. 今回の内容 echo_zeroができるまで 特に考慮したところ モジュール編集機能 ディクレクトリ・命名規則 etc… 悩んだところ まとめ 1 2 3 4
  7. 7. echo_zeroができるまで 1
  8. 8. echoプロジェクト http://cms-skill.com/echo/ フレームワークテーマ
  9. 9. プロジェクトの目的 制作現場に合ったテーマを作る! ‣ プロトタイプ→本番構築の流れに特化 ‣ 使い回しやすい構造 ディレクター デザイナー コーダー 変更依頼 素材送付 変更依頼 実装
  10. 10. Movable Type用テーマ echo Bootstrap 2015年12月リリース https://github.com/webbingstudio/ mt_theme_echo_bootstrap
  11. 11. 正直 あかんかった ‣ デザインの不満 っていうかださい ‣ bootstrapに依存 ‣ 不要な機能を削除しにくい ‣ スマートフォン対応が不十分
  12. 12. 追加より削除が重要な理由 ‣ 納品時に、不要な機能の削除を
 求められることは多い ‣ 数ヶ月後、数年後の、改修時の混乱を防ぐ ‣ プロジェクトの軽量化
  13. 13. a-blog cms版の開発開始 2016年5月の段階で、レイアウトブロックまで実装できていた
  14. 14. 頓挫した ‣ やっぱりデザインが不満! ‣ 困難な機能から実装したため
 ディレクトリ構造が破綻 ‣ a-blog cms 高機能すぎ!(褒めてる)
 全部実装するのは無理
  15. 15. 根本から見直し ‣ デザイン再考、トレンドの洗い出し
 (WordPressテーマ「Habakiri」をインスパイア) ‣ レイアウトブロック対応をやめ
 わかりやすい構造に ‣ 実際の仕事から学習+リサーチ https://wordpress.org/themes/habakiri/
  16. 16. リリースまで
 半年かかりました 途中、182回くらい 心が折れかけました
  17. 17. 特に考慮したところ 2
  18. 18. モジュール編集機能 2 1
  19. 19. 各モジュールの外観は
 管理画面から編集できる
  20. 20. a-blog cms公式の機能も対応 日付・カテゴリー・タグ・概要も
 モジュール編集画面から非表示にできます
  21. 21. 実演動画 https://youtu.be/eobSdX7_QMw
  22. 22. モジュールカスタムフィールド ‣ モジュール設定画面も
 フィールドを作れる ‣ 決まったパス・ファイル名で
 簡単に実装 ‣ エントリーフィールドと同じ書き方! echo_zero admin module field.html
  23. 23. Drupalの機能「Views」 同様のカスタマイズができる
 (リリース後に知った)
  24. 24. 見出し・表示件数程度なら
 CMSが管理するのが
 コンテンツマネージメント このタイプのCMSが
 かなり普及した
  25. 25. ディレクトリ・命名規則 2 2
  26. 26. ディレクトリをどうする ‣ システムで指定されている
 ファイル以外は自由 ‣ a-blog cmsテーマは
 ファイルの整理が重要 ‣ でも階層を深くしたくない echo_zero include hoge fuga piyo
  27. 27. モジュール関係 module モジュールID.html module_loop モジュールの種類_
 クラス.html
  28. 28. ループを別ファイルにする利点 簡単
 差し替え レイアウトブロックの実装もしやすくなる…はず! card summary
  29. 29. META・変数 ‣ 変数は 公式の
 bootstrap2016より
 階層が深い ‣ テーマ直下に
 削除できないディレクトリを
 作らないよう 敢えて階層を下げた include head vars
  30. 30. 課題が解決 不要な機能を削除しにくい ⬇ 最低限の手順で
 削除できるようになった 納品後の「ここの表示が変更になった。どう直したら?」
 という問い合わせでも、手順を説明しやすくなった
  31. 31. 管理ボックスの改良 2 3
  32. 32. 新規作成のUIをプルダウンに 多くのCMSが採用しているインターフェース
  33. 33. 意外と簡単に作れる ‣ すべてのカテゴリーを並列表示する
 モジュールIDを作る ‣ プルダウンとしてリストアップ ‣ 選択すると、各投稿画面のURLに
 簡単なJavaScriptで移動
  34. 34. 投稿画面の改良 2 4 魔改造 ではない
  35. 35. カテゴリーやタグを隠したい Movable Typeのように ブログごとに設定したい
  36. 36. 実演動画 https://youtu.be/R_ubcrToTwM
  37. 37. field_foot.html の活用 ‣ 投稿画面で
 最後に読み込まれる
 テンプレート ‣ JavaScriptを書くと
 投稿画面のDOMを操作できる echo_zero admin entry field_foot.html
  38. 38. jQueryによる操作の利点 ‣ 多くの人が理解・編集できる ‣ テンプレート一箇所で管理できる ‣ バージョンアップでHTMLが変わっても
 致命的な不具合が起きにくい
 (処理できなくてデフォルトの投稿画面に戻るだけ) 魔改造 ではない
  39. 39. カスタムユニット 2 5
  40. 40. わあいカスタムユニット
 うぇびんカスタムユニットだいすき ‣ a-blog cms案件で 最も要望が多い機能 ‣ 作り方がわかりやすい ‣ HTMLだけで自由なUIが作れる インポートデータがエンコードされてしまうのが 唯一の難点…
  41. 41. 望みのパーツをどこにでも。制作者も更新担当者も
 幸せにする、a-blog cmsの「カスタムユニット」の使い方 http://webbingstudio.com/weblog/cms/entry-808.html
  42. 42. あふれる愛を抑え 3つに絞る ‣ ボタン ‣ 余白 ‣ 画像+テキスト テーマを見た人が 教材にできるようなユニットにした
  43. 43. 悩んだところ 3
  44. 44. どの機能を諦めるか
  45. 45. 高度な機能を断念 ‣ ポストインクルード ‣ スケジュール zero = あくまで最低限の下位版 という意味 ‣ レイアウトブロック ‣ モジュールユニット ‣ カート テーマが複雑になる 発注時の需要が少ない
  46. 46. まとめ 4
  47. 47. 何故 我はテーマを作るのか ‣ テーマからの収益は ほとんどない ‣ 崇高なボランティア精神でもない フリーランスとしての制作技術の宣伝 業務で使えない技術の実験 ワタシ ヤな人だなーと思っちゃう…
  48. 48. 見えない得るものが多いんです ‣ ワークフローを整理できる a-blog cmsのサイト制作が
 恐ろしいレベルで高速化しました… ‣ そのCMSへの理解が深まる ‣ フィードバック・意見交換
  49. 49. 札幌のa-blog cmsユーザー 長谷川さん (́ ºムº `) に 見てもらいました
  50. 50. (́ ºムº `)「ブログ設定画面は アコーディオンで閉じない方が 良い気がしました」
  51. 51. みんなに使いやすい テーマって難しい
  52. 52. a-blog cms用テーマ echo_zero ぜひぜひ 使ってみてください
 ご意見・感想お待ちしてます https://github.com/webbingstudio/ acms_theme_echo_zero
  53. 53. ありがとうございました コンテンツに情熱を、マネージメントに探求を http://feathericon.com/ feathericon

a-blog cms Training Camp 2017 Springのエバンジェリストセッションのスライドです。内容を一部変更しています。 echo_zeroデモサイト http://cms-skill.com/echo_zero_demo/ 管理画面カスタマイズの解説動画 https://youtu.be/eobSdX7_QMw

Vues

Nombre de vues

548

Sur Slideshare

0

À partir des intégrations

0

Nombre d'intégrations

20

Actions

Téléchargements

0

Partages

0

Commentaires

0

Mentions J'aime

0

×