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

1. 口田 聖子 :: WebbingStudio
2016.07.16（Sat）@ 有限会社リーグラフィ
08
a-blog cmsと
Movable Type

2. 口田 聖子（うぇびん）
Webエンジニア
CMSアドバイザー
a-blog cmsエバンジェリスト

3. エバンジェリストになりました

4. ablogcms.org
http://ablogcms.org/

5. 改めて知っておきたい、MovableTypeの魅力
http://www.slideshare.net/webbingstudio/20150615movabletype

6. 今回のお題

7. MTな人のa-blog cms講座
• 主な仕様の違い（15分）
• ablogcms.ioでのハンズオン
•記事とページを分けてみる
•記事一覧の表示条件を変えてみる
•エクスポートとインポートをしてみる etc…
• 質疑応答（15分）

8. 主な仕様の違い

9. いろいろありますが
主なものを6つ

10. 1. エントリーの扱い
• a-blog cmsには「投稿タイプ」の概念がない
• 「記事／カテゴリー」
「ウェブページ／フォルダ」の区分もない
• すべて「ブログ／記事／カテゴリー」で賄う
サイトマップをしっかり書く
インクルード・条件分岐を使いこなす

11. 2. ファイルの書き出し
• 基本的に、すべて動的生成
• Ajaxによるインクルードを簡単に実装
• 安定したキャッシュ機能（プラグインの心配がないので）
• スタティック・パブリッシングはできない
ただし、手動＋ファイル指定での
パブリッシュはできる

12. 3. パーマリンクの操作
• URLコンテキスト
＝「URLから内容を自動的に判断して表示するよ」
• カスタムフィールド検索も簡単にできる
• 反面、パーマリンクの操作はできない
tagなどの予約語を
任意名に変えるなどはできる

13. 気持ち悪いと言われた
URLがこちらになります
http://example.com/entry.html/tag/タグ2/
http://example.com/hoge.html/tpl↩︎
/fuga.html/

14. 4. 表示条件の絞り込み
• Movable Typeはタグに直接条件を書く
• a-blog cmsは「識別ID」のみを書き
管理画面で設定する＝モジュールID
これにより、MTやWordPressより
細やかな設定ができる
<!-- BEGIN_MODULE Entry_Summary id=“top_summary” -->

15. 5. テーマ
• ウェブサイトと同じ階層構造
• WordPressのような「子テーマ」も作れる
• 修正内容は即時に反映される
（公開後の修正に注意）
• インクルード方法はすべてPHP
Movable Typeのような静的変換はできない

16. 6. エントリーのサムネイル
• 一度に複数種類を生成できる
•OGP用／メインビジュアル用／一覧用
• 縦横比を維持
or いっぱいに広げて、はみ出しをトリミング
or 全体を収めて背景色を単色で埋める

17. あれ？ユニットは？

18. ユニットは必須ではない
• 実は、ユニットは任意で止められる
• 使用できるユニットをテキストだけにすると
MTと同じ操作感（えええええ）
• 全文検索を利用しない場合は
投稿画面をすべて
カスタムフィールドで作ることもできる

19. ハンズオン

20. ablogcms.ioの登録

24. ポチポチ
ボタンを押すだけ

25. テーマは Simple2016

27. 記事とページを分けてみる

28. 新しいカテゴリーを作る
• カテゴリーをふたつ作る
（投稿用、ページ用）
• 移動しやすいようにメニューに追加する
• それぞれに一件ずつエントリーを書く
• どちらも日付がないウェブページ風になる
（Simple2016の初期状態）

29. 子テーマを作る
• SFTPでサーバーに接続
• /themes/ へ移動
• asap08@simple2016
という空のディレクトリを作る
• 管理ページ「コンフィグ＞テーマ」で
「asap08@simple2016」をテーマにする

30. 何も起きない。
simple2016を
そのまま継承してるから

31. 投稿用のレイアウトを変える
• SFTPで接続
• /themes/simple2016/ へ移動
• 「news」ディレクトリを複製し
/themes/asap08@simple2016/ へ移動
• 投稿カテゴリーのコードと同じ
ディレクトリ名にする

32. ページ用を1カラムにしてみる
• /themes/simple2016/ へ移動
• 「index.html」「entry.html」を複製し
/themes/asap08@simple2016/ へ移動
• ページカテゴリーのコードと同じ
ディレクトリを作って入れる
• 1カラムに書き直す

33. 記事一覧の
表示条件を変えてみる

34. 一覧を出している場所を探す
• SFTPで接続
• /themes/asap08@simple2016/↩︎
（記事用）/index.html を開く
• 記事一覧を読み込んでいる
インクルードのファイル名を調べる

35. モジュールIDを変える
• さっき調べたファイル名と同じファイルを
simple2016からコピーする
• 先頭にEntry_Summaryの開始タグがあるので
id属性を任意に書き換える
• 前のIDは控えておいてください

36. モジュールIDを作る
• 管理ページ「モジュールID」
• 控えておいた前のIDを探す
• 詳細画面へ行って「複製」する
• IDを新しいものに変更して保存する

37. 表示条件を変えてみる
• 件数を変えてみる
• サムネイルのサイズを変えてみる
• ページネーションを消してみる
• etc…

38. エクスポートと
インポートをしてみる

39. 様々なインポート
• ablogcms.ioではできない
•システムの復元／ブログ単位のバックアップと復元
• ablogcms.ioでもできる
•システムのバックアップ
•MT・WPの記事フォーマットのインポート
•CSVインポート ←これをやりましょう
←これをやりましょう

40. システムのバックアップ
• 管理ページ「バックアップ」
• SQLとアップロード画像をそれぞれ
ダウンロードできる
• ablogcmd.ioでギリギリまで環境を作って
本番に移行することもできる

41. CSVインポート
• 500件分のCSVデータを用意しました
•タイトル／カテゴリー／見出し中／平文）
•チェックボックス
•単一行テキスト
•マルチチェックボックス
https://github.com/webbingstudio/
acms_inport_test_500

42. CSVインポート
• 管理ページ「インポート」
• メニューから「CSV」を選択
• インポート先のカテゴリーを選択
• サンプルファイルをアップロード
インポート操作は、他のCMSとまったく同じ

43. 子ブログによるサイト拡張

44. 子ブログを作る
• 管理ページ「カテゴリー」
• 「お知らせ」の名前とコードを変えておく
• 管理ページ「ブログ」
• 「お知らせ」という名前、
「news」というコードネームで
新しいブログを作る

45. コンフィグの複製
• できたての子ブログは設定が初期状態
（/private/config.yamlを読み込んでいる）
• 親ブログ内の「ブログ」へ移動
• 作ったばかりのブログにチェックを入れ
親ブログの設定を複製
• simple2016の設定が複製される

46. エントリーの移動
• 親ブログの管理ページ「エントリー」
• 「お知らせ」に属するエントリーを絞り込む
• チェックを入れて子ブログへ移動
• 子ブログに表示されているのを確認

47. ふたつめの子テーマを作る
• SFTPでサーバーに接続
• /themes/ へ移動
• asap08news@simple2016
という空のディレクトリを作る
• 管理ページ「コンフィグ＞テーマ」で
「asap08news@simple2016」をテーマにする

48. 親テーマとの分割
• /themes/simple2016/ へ移動
• 「news」ディレクトリを複製
• コピーの方だけ残し、元のディレクトリを
/themes/asap08news@simple2016/ へ移動
• 中のhtmlファイルをディレクトリから出す
（親テーマの基本テンプレートを上書きしたことになる）

49. グローバルナビの書き換え
• %{BLOG_URL}と%{HOME_URL}の違い
•%{BLOG_URL}・・・現在のブログURL
•%{HOME_URL}・・・最上層のブログURL
• グローバルナビ右上「モジュール」をクリック
• 子ブログからでも
リンクが切れないように書き換え

50. ブログ情報の共有

51. フィールドモジュール
• a-blog cmsには
「カスタムフィールドを呼び出す」タグがある
• もちろんここにもモジュールIDを指定できる
• モジュールIDの条件によって
違うエントリー・ブログの
カスタムフィールド情報を取得できる

52. 親・子でブログ設定を変える
• 子ブログの管理ページ「ブログ」
• サイトタイトルを書き換えてみる
• 親・子で表示が変わっているのを確認

53. モジュールIDを確認
• SFTPでサーバーに接続
• /themes/simple2016/ へ移動
• /include/header.html を開く
• ロゴ・サイトタイトルが
以下のタグで囲まれているのを確認
<!-- BEGIN_MODULE Blog_Field id="global" -->

54. モジュールIDを作成する
• 親ブログの管理ページ「モジュールID」
• モジュールIDの新規作成
•「ブログフィールド」モジュールを選択
•IDを「global」に、名前は任意
•表示条件の「ブログ」に「1」を指定
• 親と同じ情報に戻っているのを確認

55. なぜこうなる？解説
• a-blog cmsの公式テーマは
マルチブログに関連する情報には
はじめから「global」というIDが付与されている
• しかし、インストール直後は
該当するモジュールIDは作成されていないため
初期設定＝現在のブログの情報を表示する
• モジュールIDを作成することで挙動が変化する

56. なぜこうなる？補足
• IDは「global」でなくても構いません
• モジュールIDを作成してから
テンプレートにIDを書く順番でも構いません
• a-blog cmsは、最上層のブログIDは
必ず「1」になります

57. おつかれさまでした
http://webbingstudio.com/