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.

a-sap08「a-blog cmsとMovable Type」

325 views

Published on

a-sap(a-blog cms札幌勉強会)第8回の資料です。Movable Typeを利用している人がa-blog cmsを利用する際に注意すべき点や、コンテンツによるレイアウト変更、マルチサイトを実装するハンズオンを紹介しています。

Published in: Technology
  • Be the first to comment

  • Be the first to like this

a-sap08「a-blog cmsとMovable Type」

  1. 1. 口田 聖子 :: WebbingStudio 2016.07.16(Sat)@ 有限会社リーグラフィ 08 a-blog cmsと Movable Type
  2. 2. 口田 聖子(うぇびん) Webエンジニア CMSアドバイザー a-blog cmsエバンジェリスト
  3. 3. エバンジェリストになりました
  4. 4. ablogcms.org http://ablogcms.org/
  5. 5. 改めて知っておきたい、MovableTypeの魅力 http://www.slideshare.net/webbingstudio/20150615movabletype
  6. 6. 今回のお題
  7. 7. MTな人のa-blog cms講座 • 主な仕様の違い(15分) • ablogcms.ioでのハンズオン •記事とページを分けてみる •記事一覧の表示条件を変えてみる •エクスポートとインポートをしてみる etc… • 質疑応答(15分)
  8. 8. 主な仕様の違い
  9. 9. いろいろありますが 主なものを6つ
  10. 10. 1. エントリーの扱い • a-blog cmsには「投稿タイプ」の概念がない • 「記事/カテゴリー」
 「ウェブページ/フォルダ」の区分もない • すべて「ブログ/記事/カテゴリー」で賄う サイトマップをしっかり書く
 インクルード・条件分岐を使いこなす
  11. 11. 2. ファイルの書き出し • 基本的に、すべて動的生成 • Ajaxによるインクルードを簡単に実装 • 安定したキャッシュ機能(プラグインの心配がないので) • スタティック・パブリッシングはできない ただし、手動+ファイル指定での
 パブリッシュはできる
  12. 12. 3. パーマリンクの操作 • URLコンテキスト
 =「URLから内容を自動的に判断して表示するよ」 • カスタムフィールド検索も簡単にできる • 反面、パーマリンクの操作はできない tagなどの予約語を
 任意名に変えるなどはできる
  13. 13. 気持ち悪いと言われた URLがこちらになります http://example.com/entry.html/tag/タグ2/ http://example.com/hoge.html/tpl↩︎
 /fuga.html/
  14. 14. 4. 表示条件の絞り込み • Movable Typeはタグに直接条件を書く • a-blog cmsは「識別ID」のみを書き
 管理画面で設定する=モジュールID これにより、MTやWordPressより 細やかな設定ができる <!-- BEGIN_MODULE Entry_Summary id=“top_summary” -->
  15. 15. 5. テーマ • ウェブサイトと同じ階層構造 • WordPressのような「子テーマ」も作れる • 修正内容は即時に反映される
 (公開後の修正に注意) • インクルード方法はすべてPHP
 Movable Typeのような静的変換はできない
  16. 16. 6. エントリーのサムネイル • 一度に複数種類を生成できる •OGP用/メインビジュアル用/一覧用 • 縦横比を維持
 or いっぱいに広げて、はみ出しをトリミング
 or 全体を収めて背景色を単色で埋める
  17. 17. あれ?ユニットは?
  18. 18. ユニットは必須ではない • 実は、ユニットは任意で止められる • 使用できるユニットをテキストだけにすると
 MTと同じ操作感(えええええ) • 全文検索を利用しない場合は
 投稿画面をすべて
 カスタムフィールドで作ることもできる
  19. 19. ハンズオン
  20. 20. ablogcms.ioの登録
  21. 21. ポチポチ ボタンを押すだけ
  22. 22. テーマは Simple2016
  23. 23. 記事とページを分けてみる
  24. 24. 新しいカテゴリーを作る • カテゴリーをふたつ作る
 (投稿用、ページ用) • 移動しやすいようにメニューに追加する • それぞれに一件ずつエントリーを書く • どちらも日付がないウェブページ風になる
 (Simple2016の初期状態)
  25. 25. 子テーマを作る • SFTPでサーバーに接続 • /themes/ へ移動 • asap08@simple2016
 という空のディレクトリを作る • 管理ページ「コンフィグ>テーマ」で
 「asap08@simple2016」をテーマにする
  26. 26.  何も起きない。 simple2016を
 そのまま継承してるから
  27. 27. 投稿用のレイアウトを変える • SFTPで接続 • /themes/simple2016/ へ移動 • 「news」ディレクトリを複製し
 /themes/asap08@simple2016/ へ移動 • 投稿カテゴリーのコードと同じ
 ディレクトリ名にする
  28. 28. ページ用を1カラムにしてみる • /themes/simple2016/ へ移動 • 「index.html」「entry.html」を複製し
 /themes/asap08@simple2016/ へ移動 • ページカテゴリーのコードと同じ
 ディレクトリを作って入れる • 1カラムに書き直す
  29. 29. 記事一覧の
 表示条件を変えてみる
  30. 30. 一覧を出している場所を探す • SFTPで接続 • /themes/asap08@simple2016/↩︎
 (記事用)/index.html を開く • 記事一覧を読み込んでいる
 インクルードのファイル名を調べる
  31. 31. モジュールIDを変える • さっき調べたファイル名と同じファイルを
 simple2016からコピーする • 先頭にEntry_Summaryの開始タグがあるので
 id属性を任意に書き換える • 前のIDは控えておいてください
  32. 32. モジュールIDを作る • 管理ページ「モジュールID」 • 控えておいた前のIDを探す • 詳細画面へ行って「複製」する • IDを新しいものに変更して保存する
  33. 33. 表示条件を変えてみる • 件数を変えてみる • サムネイルのサイズを変えてみる • ページネーションを消してみる • etc…
  34. 34. エクスポートと
 インポートをしてみる
  35. 35. 様々なインポート • ablogcms.ioではできない •システムの復元/ブログ単位のバックアップと復元 • ablogcms.ioでもできる •システムのバックアップ •MT・WPの記事フォーマットのインポート •CSVインポート ←これをやりましょう ←これをやりましょう
  36. 36. システムのバックアップ • 管理ページ「バックアップ」 • SQLとアップロード画像をそれぞれ
 ダウンロードできる • ablogcmd.ioでギリギリまで環境を作って
 本番に移行することもできる
  37. 37. CSVインポート • 500件分のCSVデータを用意しました •タイトル/カテゴリー/見出し中/平文) •チェックボックス •単一行テキスト •マルチチェックボックス https://github.com/webbingstudio/ acms_inport_test_500
  38. 38. CSVインポート • 管理ページ「インポート」 • メニューから「CSV」を選択 • インポート先のカテゴリーを選択 • サンプルファイルをアップロード インポート操作は、他のCMSとまったく同じ
  39. 39. 子ブログによるサイト拡張
  40. 40. 子ブログを作る • 管理ページ「カテゴリー」 • 「お知らせ」の名前とコードを変えておく • 管理ページ「ブログ」 • 「お知らせ」という名前、
 「news」というコードネームで
 新しいブログを作る
  41. 41. コンフィグの複製 • できたての子ブログは設定が初期状態
 (/private/config.yamlを読み込んでいる) • 親ブログ内の「ブログ」へ移動 • 作ったばかりのブログにチェックを入れ
 親ブログの設定を複製 • simple2016の設定が複製される
  42. 42. エントリーの移動 • 親ブログの管理ページ「エントリー」 • 「お知らせ」に属するエントリーを絞り込む • チェックを入れて子ブログへ移動 • 子ブログに表示されているのを確認
  43. 43. ふたつめの子テーマを作る • SFTPでサーバーに接続 • /themes/ へ移動 • asap08news@simple2016
 という空のディレクトリを作る • 管理ページ「コンフィグ>テーマ」で
 「asap08news@simple2016」をテーマにする
  44. 44. 親テーマとの分割 • /themes/simple2016/ へ移動 • 「news」ディレクトリを複製 • コピーの方だけ残し、元のディレクトリを
 /themes/asap08news@simple2016/ へ移動 • 中のhtmlファイルをディレクトリから出す
 (親テーマの基本テンプレートを上書きしたことになる)
  45. 45. グローバルナビの書き換え • %{BLOG_URL}と%{HOME_URL}の違い •%{BLOG_URL}・・・現在のブログURL •%{HOME_URL}・・・最上層のブログURL • グローバルナビ右上「モジュール」をクリック • 子ブログからでも
 リンクが切れないように書き換え
  46. 46. ブログ情報の共有
  47. 47. フィールドモジュール • a-blog cmsには
 「カスタムフィールドを呼び出す」タグがある • もちろんここにもモジュールIDを指定できる • モジュールIDの条件によって
 違うエントリー・ブログの
 カスタムフィールド情報を取得できる
  48. 48. 親・子でブログ設定を変える • 子ブログの管理ページ「ブログ」 • サイトタイトルを書き換えてみる • 親・子で表示が変わっているのを確認
  49. 49. モジュールIDを確認 • SFTPでサーバーに接続 • /themes/simple2016/ へ移動 • /include/header.html を開く • ロゴ・サイトタイトルが
 以下のタグで囲まれているのを確認 <!-- BEGIN_MODULE Blog_Field id="global" -->
  50. 50. モジュールIDを作成する • 親ブログの管理ページ「モジュールID」 • モジュールIDの新規作成 •「ブログフィールド」モジュールを選択 •IDを「global」に、名前は任意 •表示条件の「ブログ」に「1」を指定 • 親と同じ情報に戻っているのを確認
  51. 51. なぜこうなる?解説 • a-blog cmsの公式テーマは
 マルチブログに関連する情報には
 はじめから「global」というIDが付与されている • しかし、インストール直後は
 該当するモジュールIDは作成されていないため
 初期設定=現在のブログの情報を表示する • モジュールIDを作成することで挙動が変化する
  52. 52. なぜこうなる?補足 • IDは「global」でなくても構いません • モジュールIDを作成してから
 テンプレートにIDを書く順番でも構いません • a-blog cmsは、最上層のブログIDは
 必ず「1」になります
  53. 53. おつかれさまでした http://webbingstudio.com/

×