a-sap（a-blog cms札幌勉強会）第9回の資料です。WordPressを利用している人がa-blog cmsを利用する際に注意すべき点や、投稿タイプの代替としてのカテゴリーの解説、表示条件を管理画面から変更するハンズオンを紹介しています。

1. 口田 聖子 :: WebbingStudio
2016.08.20（Sat）@ ものづくりオフィス SHARE
09
a-blog cmsと
WordPress

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

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

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

5. 今回のお題

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

7. 主な仕様の違い

8. いろいろありますが
主なものを7つ

9. 1. エントリーの扱い
• a-blog cmsには「投稿タイプ」の概念がない
• 「投稿／カテゴリ」
「固定ページ／親子ページ」の区分もない
• すべて「ブログ／記事／カテゴリー」で賄う
ブログ間のエントリー移動が簡単なので
あとで構成変更がしやすい

10. 2. PHP
•テンプレート内でPHPを実行できない
• その分、固有変数と条件分岐タグが豊富
• 配列処理、関数処理はできない
• 細かな表示調整はjQueryを使うことが多い
高機能なので、PHPが必要な状況はほぼない

11. グローバル変数
http://developer.a-blogcms.jp/blog/import_csv201608.html

12. IFブロック
http://developer.a-blogcms.jp/document/template/if.html

13. 3.カスタムフィールド
• 編集画面用テンプレートに直接フォームを書く
• フォームの書き方は簡単
案件に合わせたUI調整も自在にできる
• 複数のカスタムフィールドで構成された
グループも作成できる
テーマを変えると
フィールドもなくなってしまうので注意

14. 4.拡張機能
• サードパーティ製のプラグインはない
• 公式ドキュメントに書いてある機能が
実装できることのすべて、と解釈してよい
• すべての機能を開発元が提供しているため
タグ名や仕様が統一されている
セキュリティ面はかなり信頼性が高い

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

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

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

18. 7. テーマ
• ウェブサイトと同じ階層構造
• WordPressのような「子テーマ」も作れる
• テーマを無限に継承できる
• サードパーティー製のテーマは少ない
テーマのファイル名が重要なのは
WordPressと同じ

19. あれ？ユニットは？

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

21. ハンズオン

22. ablogcms.ioの登録

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

27. テーマは Simple2016

29. 投稿と固定ページを分けてみる

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

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

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

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

34. カテゴリー分岐の違い
WordPress
スラッグ名が入ったファイルを作る
• category.php = デフォルトの一覧
• category-news.php = newsの一覧
a-blog cms
コード名のディレクトリを作る
• /index.html = デフォルトの一覧
• /news/index.html = newsの一覧

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

51. 親テーマとの分割
• /themes/simple2016/ へ移動
• 「news」ディレクトリの中にある
「index.html」「entry.html」を複製
• 複製したファイルを
/themes/asap09news@simple2016/ へ移動
• 「copy …」などのファイル名を元に戻す
（親テーマの基本テンプレートを上書きしたことになる）

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

53. ブログ情報の共有

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

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

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

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

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

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

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