Ce diaporama a bien été signalé.
Nous utilisons votre profil LinkedIn et vos données d’activité pour vous proposer des publicités personnalisées et pertinentes. Vous pouvez changer vos préférences de publicités à tout moment.
口田 聖子 :: WebbingStudio
2016.07.16(Sat)@ 有限会社リーグラフィ
08
a-blog cmsと
Movable Type
口田 聖子(うぇびん)
Webエンジニア
CMSアドバイザー
a-blog cmsエバンジェリスト
エバンジェリストになりました
ablogcms.org
http://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より
細やかな設定ができる
<!-- BE...
5. テーマ
• ウェブサイトと同じ階層構造
• WordPressのような「子テーマ」も作れる
• 修正内容は即時に反映される

(公開後の修正に注意)
• インクルード方法はすべてPHP

Movable 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/ へ移動
• ページカテゴリーのコードと同じ
...
記事一覧の

表示条件を変えてみる
一覧を出している場所を探す
• 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...
CSVインポート
• 管理ページ「インポート」
• メニューから「CSV」を選択
• インポート先のカテゴリーを選択
• サンプルファイルをアップロード
インポート操作は、他のCMSとまったく同じ
子ブログによるサイト拡張
子ブログを作る
• 管理ページ「カテゴリー」
• 「お知らせ」の名前とコードを変えておく
• 管理ページ「ブログ」
• 「お知らせ」という名前、

「news」というコードネームで

新しいブログを作る
コンフィグの複製
• できたての子ブログは設定が初期状態

(/private/config.yamlを読み込んでいる)
• 親ブログ内の「ブログ」へ移動
• 作ったばかりのブログにチェックを入れ

親ブログの設定を複製
• simple2016...
エントリーの移動
• 親ブログの管理ページ「エントリー」
• 「お知らせ」に属するエントリーを絞り込む
• チェックを入れて子ブログへ移動
• 子ブログに表示されているのを確認
ふたつめの子テーマを作る
• SFTPでサーバーに接続
• /themes/ へ移動
• asap08news@simple2016

という空のディレクトリを作る
• 管理ページ「コンフィグ>テーマ」で

「asap08news@simple...
親テーマとの分割
• /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_...
モジュールIDを作成する
• 親ブログの管理ページ「モジュールID」
• モジュールIDの新規作成
•「ブログフィールド」モジュールを選択
•IDを「global」に、名前は任意
•表示条件の「ブログ」に「1」を指定
• 親と同じ情報に戻ってい...
なぜこうなる?解説
• a-blog cmsの公式テーマは

マルチブログに関連する情報には

はじめから「global」というIDが付与されている
• しかし、インストール直後は

該当するモジュールIDは作成されていないため

初期設定=現...
なぜこうなる?補足
• IDは「global」でなくても構いません
• モジュールIDを作成してから

テンプレートにIDを書く順番でも構いません
• a-blog cmsは、最上層のブログIDは

必ず「1」になります
おつかれさまでした
http://webbingstudio.com/
a-sap08「a-blog cmsとMovable Type」
a-sap08「a-blog cmsとMovable Type」
a-sap08「a-blog cmsとMovable Type」
a-sap08「a-blog cmsとMovable Type」
Prochain SlideShare
Chargement dans…5
×

0

Partager

Télécharger pour lire hors ligne

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

Télécharger pour lire hors ligne

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

  • Soyez le premier à aimer ceci

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/

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

Vues

Nombre de vues

562

Sur Slideshare

0

À partir des intégrations

0

Nombre d'intégrations

20

Actions

Téléchargements

1

Partages

0

Commentaires

0

Mentions J'aime

0

×