a-sap09「a-blog cmsとwordpress」

口田聖子 :: WebbingStudio 2016.08.20（Sat）@ ものづくりオフィス SHARE

09

a-blog cmsと WordPress

口田聖子（うぇびん）

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

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

ablogcms.orghttp://ablogcms.org/

今回のお題

WordPressな人のa-blog cms講座

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

• ablogcms.ioでのハンズオン

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

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

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

• 質疑応答（15分）

主な仕様の違い

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

1. エントリーの扱い

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

• 「投稿／カテゴリ」「固定ページ／親子ページ」の区分もない

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

ブログ間のエントリー移動が簡単なのであとで構成変更がしやすい

2. PHP

• テンプレート内でPHPを実行できない

• その分、固有変数と条件分岐タグが豊富

• 配列処理、関数処理はできない

• 細かな表示調整はjQueryを使うことが多い

高機能なので、PHPが必要な状況はほぼない

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

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

3.カスタムフィールド

• 編集画面用テンプレートに直接フォームを書く

• フォームの書き方は簡単案件に合わせたUI調整も自在にできる

• 複数のカスタムフィールドで構成されたグループも作成できる

テーマを変えるとフィールドもなくなってしまうので注意

4.拡張機能

• サードパーティ製のプラグインはない

• 公式ドキュメントに書いてある機能が実装できることのすべて、と解釈してよい

• すべての機能を開発元が提供しているためタグ名や仕様が統一されている

セキュリティ面はかなり信頼性が高い

5. パーマリンクの操作

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

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

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

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

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

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

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

6. 表示条件の絞り込み

• WordPressは、ループタグの直前に絞り込みのための関数を書く

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

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

7. テーマ

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

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

• テーマを無限に継承できる

• サードパーティー製のテーマは少ない

テーマのファイル名が重要なのは WordPressと同じ

あれ？ユニットは？

ユニットは必須ではない

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

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

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

ハンズオン

ablogcms.ioの登録

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

テーマは Simple2016

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

新しいカテゴリーを作る

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

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

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

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

子テーマを作る

• SFTPでサーバーに接続

• /themes/ へ移動

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

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

　何も起きない。 simple2016を

そのまま継承してるから

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

• SFTPで接続

• /themes/simple2016/ へ移動

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

• 投稿カテゴリーのコード（スラッグ）と同じディレクトリ名にする

カテゴリー分岐の違い

WordPress スラッグ名が入ったファイルを作る • category.php = デフォルトの一覧

• category-news.php = newsの一覧

a-blog cms コード名のディレクトリを作る • /index.html = デフォルトの一覧

• /news/index.html = newsの一覧

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


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

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

• 1カラムに書き直す

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

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

• SFTPで接続

• /themes/asap09@simple2016/↩︎（投稿用）/index.html を開く

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

モジュールIDを変える

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

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

• 前のID・書き換えた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の設定が複製される

エントリーの移動

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

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

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

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

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


• /themes/ へ移動

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

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

親テーマとの分割


• 「news」ディレクトリの中にある「index.html」「entry.html」を複製

• 複製したファイルを/themes/asap09news@simple2016/ へ移動

• 「copy …」などのファイル名を元に戻す（親テーマの基本テンプレートを上書きしたことになる）

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

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

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

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

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

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

ブログ情報の共有

フィールドモジュール

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

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

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

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

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

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

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

モジュールIDを確認



• /include/header.html を開く

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

モジュール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/

a-sap09「a-blog cmsとwordpress」

Technology