口田 聖子 :: WebbingStudio 2016.07.16（Sat）@ 有限会社リーグラフィ

08

a-blog cmsと Movable Type

口田 聖子（うぇびん）

Webエンジニア CMSアドバイザー a-blog cmsエバンジェリスト

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

ablogcms.orghttp://ablogcms.org/

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

今回のお題

MTな人のa-blog cms講座

• 主な仕様の違い（15分）

• ablogcms.ioでのハンズオン

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

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

•エクスポートとインポートをしてみる　etc…

• 質疑応答（15分）

主な仕様の違い

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

1. エントリーの扱い

• a-blog cmsには「投稿タイプ」の概念がない

• 「記事／カテゴリー」「ウェブページ／フォルダ」の区分もない

• すべて「ブログ／記事／カテゴリー」で賄う

サイトマップをしっかり書くインクルード・条件分岐を使いこなす

2. ファイルの書き出し

• 基本的に、すべて動的生成

• Ajaxによるインクルードを簡単に実装

• 安定したキャッシュ機能（プラグインの心配がないので）

• スタティック・パブリッシングはできない

ただし、手動＋ファイル指定でのパブリッシュはできる

3. パーマリンクの操作

• URLコンテキスト＝「URLから内容を自動的に判断して表示するよ」

• カスタムフィールド検索も簡単にできる

• 反面、パーマリンクの操作はできない

tagなどの予約語を任意名に変えるなどはできる

気持ち悪いと言われた URLがこちらになります

http://example.com/entry.html/tag/タグ2/

http://example.com/hoge.html/tpl↩︎/fuga.html/

4. 表示条件の絞り込み

• Movable Typeはタグに直接条件を書く

• a-blog cmsは「識別ID」のみを書き管理画面で設定する＝モジュールID

これにより、MTやWordPressより 細やかな設定ができる

<!-- BEGIN_MODULE Entry_Summary id=“top_summary” -->

5. テーマ

• ウェブサイトと同じ階層構造

• WordPressのような「子テーマ」も作れる

• 修正内容は即時に反映される（公開後の修正に注意）

• インクルード方法はすべてPHPMovable Typeのような静的変換はできない

6. エントリーのサムネイル

• 一度に複数種類を生成できる

•OGP用／メインビジュアル用／一覧用

• 縦横比を維持or いっぱいに広げて、はみ出しをトリミングor 全体を収めて背景色を単色で埋める

あれ？ユニットは？

ユニットは必須ではない

• 実は、ユニットは任意で止められる

• 使用できるユニットをテキストだけにするとMTと同じ操作感（えええええ）

• 全文検索を利用しない場合は投稿画面をすべてカスタムフィールドで作ることもできる

ハンズオン

ablogcms.ioの登録

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

テーマは Simple2016

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

新しいカテゴリーを作る

• カテゴリーをふたつ作る（投稿用、ページ用）

• 移動しやすいようにメニューに追加する

• それぞれに一件ずつエントリーを書く

• どちらも日付がないウェブページ風になる（Simple2016の初期状態）

子テーマを作る

• SFTPでサーバーに接続

• /themes/ へ移動

• asap08@simple2016という空のディレクトリを作る

• 管理ページ「コンフィグ＞テーマ」で「asap08@simple2016」をテーマにする

　何も起きない。 simple2016を

そのまま継承してるから

投稿用のレイアウトを変える

• SFTPで接続

• /themes/simple2016/ へ移動

• 「news」ディレクトリを複製し/themes/asap08@simple2016/ へ移動

• 投稿カテゴリーのコードと同じディレクトリ名にする

ページ用を1カラムにしてみる

• /themes/simple2016/ へ移動

• 「index.html」「entry.html」を複製し/themes/asap08@simple2016/ へ移動

• ページカテゴリーのコードと同じディレクトリを作って入れる

• 1カラムに書き直す

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

一覧を出している場所を探す

• SFTPで接続

• /themes/asap08@simple2016/↩︎（記事用）/index.html を開く

• 記事一覧を読み込んでいるインクルードのファイル名を調べる

モジュールIDを変える

• さっき調べたファイル名と同じファイルをsimple2016からコピーする

• 先頭にEntry_Summaryの開始タグがあるのでid属性を任意に書き換える

• 前のIDは控えておいてください

モジュールIDを作る

• 管理ページ「モジュールID」

• 控えておいた前のIDを探す

• 詳細画面へ行って「複製」する

• IDを新しいものに変更して保存する

表示条件を変えてみる

• 件数を変えてみる

• サムネイルのサイズを変えてみる

• ページネーションを消してみる

• etc…

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

様々なインポート

• ablogcms.ioではできない

•システムの復元／ブログ単位のバックアップと復元

• ablogcms.ioでもできる

•システムのバックアップ

•MT・WPの記事フォーマットのインポート

•CSVインポート ←これをやりましょう

←これをやりましょう

システムのバックアップ

• 管理ページ「バックアップ」

• SQLとアップロード画像をそれぞれダウンロードできる

• ablogcmd.ioでギリギリまで環境を作って本番に移行することもできる

CSVインポート

• 500件分のCSVデータを用意しました

•タイトル／カテゴリー／見出し中／平文）

•チェックボックス

•単一行テキスト

•マルチチェックボックス

https://github.com/webbingstudio/acms_inport_test_500

CSVインポート

• 管理ページ「インポート」

• メニューから「CSV」を選択

• インポート先のカテゴリーを選択

• サンプルファイルをアップロード

インポート操作は、他のCMSとまったく同じ

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

子ブログを作る

• 管理ページ「カテゴリー」

• 「お知らせ」の名前とコードを変えておく

• 管理ページ「ブログ」

• 「お知らせ」という名前、「news」というコードネームで新しいブログを作る

コンフィグの複製

• できたての子ブログは設定が初期状態（/private/config.yamlを読み込んでいる）

• 親ブログ内の「ブログ」へ移動

• 作ったばかりのブログにチェックを入れ親ブログの設定を複製

• simple2016の設定が複製される

エントリーの移動

• 親ブログの管理ページ「エントリー」

• 「お知らせ」に属するエントリーを絞り込む

• チェックを入れて子ブログへ移動

• 子ブログに表示されているのを確認

ふたつめの子テーマを作る

• SFTPでサーバーに接続

• /themes/ へ移動

• asap08news@simple2016という空のディレクトリを作る

• 管理ページ「コンフィグ＞テーマ」で「asap08news@simple2016」をテーマにする

親テーマとの分割

• /themes/simple2016/ へ移動

• 「news」ディレクトリを複製

• コピーの方だけ残し、元のディレクトリを/themes/asap08news@simple2016/ へ移動

• 中のhtmlファイルをディレクトリから出す（親テーマの基本テンプレートを上書きしたことになる）

グローバルナビの書き換え

• %{BLOG_URL}と%{HOME_URL}の違い

•%{BLOG_URL}・・・現在のブログURL

•%{HOME_URL}・・・最上層のブログURL

• グローバルナビ右上「モジュール」をクリック

• 子ブログからでもリンクが切れないように書き換え

ブログ情報の共有

フィールドモジュール

• a-blog cmsには「カスタムフィールドを呼び出す」タグがある

• もちろんここにもモジュールIDを指定できる

• モジュールIDの条件によって違うエントリー・ブログのカスタムフィールド情報を取得できる

親・子でブログ設定を変える

• 子ブログの管理ページ「ブログ」

• サイトタイトルを書き換えてみる

• 親・子で表示が変わっているのを確認

モジュールIDを確認

• SFTPでサーバーに接続

• /themes/simple2016/ へ移動

• /include/header.html を開く

• ロゴ・サイトタイトルが以下のタグで囲まれているのを確認

<!-- BEGIN_MODULE Blog_Field id="global" -->

モジュールIDを作成する

• 親ブログの管理ページ「モジュールID」

• モジュールIDの新規作成

•「ブログフィールド」モジュールを選択

•IDを「global」に、名前は任意

•表示条件の「ブログ」に「1」を指定

• 親と同じ情報に戻っているのを確認

なぜこうなる？解説

• a-blog cmsの公式テーマはマルチブログに関連する情報にははじめから「global」というIDが付与されている

• しかし、インストール直後は該当するモジュールIDは作成されていないため初期設定＝現在のブログの情報を表示する

• モジュールIDを作成することで挙動が変化する

なぜこうなる？補足

• IDは「global」でなくても構いません

• モジュールIDを作成してからテンプレートにIDを書く順番でも構いません

• a-blog cmsは、最上層のブログIDは必ず「1」になります

おつかれさまでした

http://webbingstudio.com/