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.

0

Partager

Télécharger pour lire hors ligne

a-sap10「モジュールIDを理解する」

Télécharger pour lire hors ligne

a-sap(a-blog cms札幌勉強会)第10回の資料です。a-blog cmsの重要な機能、モジュールとモジュールIDの詳細な解説と、モジュールの使い方のハンズオンを紹介しています。

  • Soyez le premier à aimer ceci

a-sap10「モジュールIDを理解する」

  1. 1. 口田 聖子 :: WebbingStudio 2016.10.22(Sat)@ サッポロカフェ2Fスペース 10 モジュールIDを理解する
  2. 2. 口田 聖子(うぇびん) Webエンジニア CMSアドバイザー a-blog cmsエバンジェリスト
  3. 3. 今年も合宿行ってきます
  4. 4. 合宿のハンズオン資料は公開されてます https://developer.a-blogcms.jp/blog/acmscamp/
  5. 5. 今回のお題
  6. 6. モジュールについて勉強しよう • モジュール・モジュールIDとは(15分) • ablogcms.ioでのハンズオン •モジュールを使ってブログの情報を出してみる •モジュールごとの違いを比較してみる •モジュールIDによる表示条件の変更 etc… • 質疑応答(15分)
  7. 7. モジュールとは
  8. 8. Entry_Body Category_List Topicpath a-blog cmsに登録した情報を
 呼び出す部品 エントリーの 詳細な情報を 呼び出します カテゴリーの 一覧を 呼び出します 現在のページの パンくずを 呼び出します
  9. 9. 公式ドキュメントはこちら https://developer.a-blogcms.jp/reference/latest/built_in.html
  10. 10. 補足 正確には「ビルトインモジュール」といいます 「モジュール」は他にも何種類かあるのですが ビルトインモジュールのことを指す場合は 単に「モジュール」というのが一般的です なので今回は ビルトインモジュールのみの説明だと思ってください 「タッチモジュール」や「フィールドモジュール」はタグ名で呼ぶことが多いです
 (Touch_Topで…とか)
  11. 11. テーマ内にコードを貼り付けて利用する サマリー リスト バナー ナビゲーション
  12. 12. <!-- BEGIN_MODULE Entry_Body —> ~ <!-- END_MODULE Entry_Body —> モジュールタグの書式 モジュール名 =このモジュールの役割 HTMLのコメントと同じ書き方です
  13. 13. MTやWordPressだと <mt:Entries> ~ </mt:Entries> <?php if(have_posts()):
 while(have_posts()): the_post(); ?>
 
 ~
 <?php endwhile; endif;?> これな
  14. 14. <!-- BEGIN_MODULE Entry_Body —> ・・・ <h2> {title} </h2> ・・・ <!-- END_MODULE Entry_Body —> モジュール内の変数 変数は波カッコで囲まれています
  15. 15. MT・WordPressとの違い
  16. 16. 表示条件はモジュールに書かない テーマ内のモジュール 管理ページ どのモジュールを使うか マークアップをどうするか 何の情報を表示するか どのような条件で絞り込むか 何件表示するか サムネイルの大きさ
  17. 17. Entry_Body Entry_Summary Entry_Headline 「エントリーの呼び出し」に関する モジュールが複数ある ユニットを含めた エントリーの 情報すべて エントリーの 概要と サムネイル エントリーの タイトルと 日付のみ
  18. 18. Entry_Body Entry_Summary Entry_Headline モジュールによって 呼び出せる情報の範囲が異なる ほぼすべて 呼び出せます 本文は 呼び出せません タイトルと日付 以外は 呼び出せません
  19. 19. Entry_Body Bodyだけ使えばいいのでは… ほぼすべて 呼び出せます ガビーン
  20. 20. Entry_Bodyの変数はとても多い https://developer.a-blogcms.jp/reference/latest/acms-code/vars/Entry_Body.html 他のモジュールとは変数名が異なることも…
  21. 21. Entry_Body 使い分けのすすめ 細やかな 情報が必要な 詳細ページで! 重要な情報だけでよい トップページや 一覧ページで! Body以外
  22. 22. モジュールIDとは
  23. 23. 外観を指定 文字を白、背景をオレンジ 影を付ける ページ内の役割を指定 a要素 他のページへ移動する HTMLとCSSを思い出そう HTML ボタン CSS
  24. 24. こう書くのは良くないですよね? <a style=“ display: inline-block; color: white; background-color: orange; text-decoration: none; ・・・ ”>ボタン</a> 指定が多いとわかりにくい コードを使いまわせない 修正が面倒
  25. 25. こう書きますよね? CSSHTML <a class=“btn”> ボタン</a> a.btn { display: inline-block; color: white; background-color: orange; text-decoration: none; ・・・ }
  26. 26. a-blog cmsのモジュールも この考え方で作られています
  27. 27. モジュールIDの使い方
  28. 28. モジュールにIDを付ける <!-- BEGIN_MODULE Entry_Summary ↩︎
 id=“summary_news_recent” —> ・・・ <!--END_MODULE Entry_Summary —> テーマ内での役割がわかる任意の名前
 (この例ではニュースブログの新着)
  29. 29. 管理ページでモジュールIDを作る 同じモジュールを選択 同じ名前を入力
  30. 30. 関連付けられました テーマ内のモジュール 管理ページ summary_news_recent
  31. 31. 以降は管理ページで制御できる 私は「ニュース」カテゴリーの エントリーだけを 表示します
  32. 32. 公開画面からでも制御できる
  33. 33. モジュールIDの利点 • 機能の可視化 •どのような役割を持っているか、ひと目でわかる
 • 再利用性の向上 •コード内に表示条件を書いていないので
 二回目以降の制作でコピー・ペーストで使い回せる
 •メンテナンス性の向上 • Webの知識がない担当者でも変更できる • FTPクライアントがなくても変更できる
  34. 34. モジュールIDの利点 • 機能の可視化 •どのような役割を持っているか、ひと目でわかる
 • 再利用性の向上 •コード内に表示条件を書いていないので
 二回目以降の制作でコピー・ペーストで使い回せる
 •メンテナンス性の向上 • Webの知識がない担当者でも変更できる • FTPクライアントがなくても変更できる 公開後も簡単に
 サイトの表示状態を調整できる =コンテンツマーケティングに強い
  35. 35. ablogcms.ioでの
 ハンズオン
  36. 36. テスト環境の準備
  37. 37. acms_inport_test_500 https://github.com/webbingstudio/acms_inport_test_500 緑のボタンを押してダウンロードしてください
  38. 38. CSVインポートをする • 管理ページ:メニュー「インポート」を選択
 (下の方にあります。スクロールしてください)
 「CSV」の行の右端にあるボタンを押す • ダウンロードした圧縮ファイルに入っていた
 「acms_inport_500_utf8.csv」をインポート
 (カテゴリーの指定はしない) • メニュー「エントリー」を選択
 テストエントリーが増えていることを確認
  39. 39. カテゴリーを作る • メニュー「カテゴリー」を選択
 カテゴリーを新規作成
 表示名:テスト  コードネーム:test • メニュー「エントリー」を選択
 エントリーを10件くらい、作成したカテゴリーに入れる • 以下のURLへ移動
 公開ページのURL/test/ • テストエントリーの一覧が表示されているのを確認
  40. 40. モジュールを試す
  41. 41. モジュールを使って
 ブログの情報を出してみる • 公式ドキュメントのサンプルコードをコピー • テーマに貼り付けてみる • 変数表にあるいろいろな変数を追加してみる
  42. 42. モジュールごとの違いを
 比較してみる • Entry_Summaryのコードを… •Entry_Headlineに変えたらどうなる? •Entry_Listにしたら? • クリックしたときの設定項目の違いを比較 • Entry_ArchiveListは何も表示されない
 (モジュールIDを指定しないと設定できないモジュールもある)
  43. 43. モジュールIDによる
 表示条件の変更 • まったく同じEntry_Summaryのコードを
 テーマ内に二回貼り付ける • 表示結果が同じことを確認 • それぞれ違うモジュールIDをつけて
 設定を変えてみると…?
  44. 44. 多彩な設定項目を試す • カテゴリー絞り込み • フィールド絞り込み
 例1:field_test01/1
 例2:field_test02/かきくけこ • 期間絞り込み • 表示順 • 件数 • オフセット • インデキシング • ループ内クラス • ページャー表示
 
 etc…
  45. 45. おつかれさまでした http://webbingstudio.com/

a-sap(a-blog cms札幌勉強会)第10回の資料です。a-blog cmsの重要な機能、モジュールとモジュールIDの詳細な解説と、モジュールの使い方のハンズオンを紹介しています。

Vues

Nombre de vues

655

Sur Slideshare

0

À partir des intégrations

0

Nombre d'intégrations

26

Actions

Téléchargements

1

Partages

0

Commentaires

0

Mentions J'aime

0

×