NEW
Ver.3.2 すべての体験をアップデート

  1. トップ

ブランドサイト

第6回 WordPressにはないa-blog cmsのメリット

WordPressユーザーの皆さんこんにちは。このシリーズもいよいよ最終回となりました。今回は、今までの内容の振り返りを兼ねて、a-blog cmsのメリットについてまとめます。

運用、更新が簡単

まず第一のメリットとして、運用、更新が簡単であるという点が挙げられます。更新者のリテラシーの程度を問わず、ほとんど説明が不要なUIです。

第1回 積み木感覚で簡単にコンテンツを作成・更新できる「ユニット」で解説したユニットを使ってHTMLを意識せずにコンテンツを編集できます。さらに「ダイレクト編集」をオンにすれば表示画面から直接ユニットを編集することが可能です。


ダイレクト編集:表示画面のユニットにマウスオーバーした状態

ダイレクト編集:表示画面にユニットの編集画面が表示された状態


また、「第3回 柔軟なカスタムフィールド」でも解説した通り、管理画面のテンプレートもHTMLで構成されています。そのため、管理画面はHTMLとCSSの知識さえあれば自由にカスタマイズでき、更新者を迷わせないUIを作り込めます。

このようにa-blog cmsはそのままでも十分使いやすく、かつ案件に合わせた管理画面のカスタマイズが簡単です。

構造的な設計をしやすい

「第2回 階層性を持つ子ブログ、シンプルなカテゴリー」「第4回 URLの階層と一致しているテーマ&テンプレート」で解説したとおり、a-blog cmsでは子ブログ、カテゴリー、エントリーの関係はシンプルで、URL(パーマリンク)とも一致します。大規模なサイト、複雑なサイトでもサイトツリーにしたがって構造的な設計をしやすく、変更や拡張に強いと言えます。

PHPの知識は不要だが、あっても無駄にならない

テンプレートファイルはHTMLなので、PHPの知識がないデザイナーやコーダーでもとっつきやすいという点も魅力です。細かいカスタマイズを行うにはIFブロックタッチモジュールグローバル変数校正オプションなどを覚えていく必要がありますが、モジュールのスニペット、カスタムフィールドのソースをコピー&ペーストしてカスタマイズしていくうちに自然と慣れてきます。

WordPressユーザーとしては「PHPを書く必要がない」と聞くと「細かいカスタマイズは難しいのでは?」と感じてしまうかもしれませんが、a-blog cmsを少し触ってみるだけでそうではないことがすぐに理解できます。また、PHPをベースにしたCMSなので、PHPの知識があればa-blog cms独自のテンプレートの書き方にもすぐに慣れることができるでしょう。更にPHPの上級者であればオリジナルモジュールや拡張アプリを自作することが可能です。

安全性が高いのでバージョンアップはしてもしなくても良い

制作者がPHPを書かないことにはセキュリティホールができにくいという利点があります。WordPressにおいてバージョンアップが必須なのはセキュリティを確保するためですが、a-blog cmsの場合バージョンアップは最新の機能が欲しい場合に行えば良く、必須ではありません。メンテナンスコストが低く、バージョンアップに振り回されることなくサイト本来の機能の充実にリソースを割くことができます。


管理画面 > コンフィグ > 機能設定 の 「オンラインアップデート」には更新メニューを非表示にするオプションが用意されています。

管理画面 > 更新


プラグインを選ぶ必要がない

WordPressのバージョンアップ時に不具合を起こしているのはプラグインであることがほとんどです。WordPressにおいては似た機能のプラグインが数多く存在します。その中から使いやすく、将来性があり、セキュリティ面にも十分な配慮がありそうなものを時間をかけて選んだとしても、そのプラグインの開発が止まってしまえば再び選び直さなければならないことも少なくありません。

  • フォーム機能
  • 多言語機能
  • 使いやすいカスタムフィールド
  • エントリーやバナーの公開期間の設定
  • OGPの設定
  • 管理画面一覧の表示項目変更
  • 詳細な検索
  • 使用中のテンプレートファイル名の表示

など、WordPressではプラグインで実現されている機能は、a-blog cmsでは本体でもともと用意されていたり、簡単なカスタマイズでWordPress以上の機能を実現できることがあります。

ウェブ制作会社が開発している実用本位の国産CMS

a-blog cmsはバージョンアップを重ねるたびにますます「痒いところに手が届く」実用本位のCMSになってきました。開発元のアップルップルがウェブ制作会社でもあることが、その強みを支えています。

  • コメント機能がデフォルトではオフになっている
  • お問合せフォームやお知らせ、会社概要などを含む標準的なコンテンツが登録されている
  • エントリーのファイル名(スラッグ)がデフォルトでは「entry-{ID}.html」であり、必要に応じて変更することができる

など、細かいところもすべてコーポレートサイトの制作スタートに最適化されています。国産なので、テンプレートファイルのコメントもドキュメントもすべて日本語で分かりやすく、和暦などの日本独自の文化にも対応しています。

開発者と制作者の距離が近い

私たち社外の制作者と開発元のアップルップルをつなぐコミュニティも充実しています。

毎年5月と11月に開催されるTraining Campにはさまざまなレベル、さまざまな年齢、さまざまな立場のa-blog cmsユーザーが全国から集まります。Training Campは事例の発表をしたり聞いたり、ハンズオンに取り組んだり、質問をしたり、制作者側からの要望を伝える場になっています。WordCampに比べると規模はたいへん小さいのですが、その分開発者と制作者との距離は近く、制作者同士によるヒントの交換も活発です。

Training Camp以外にも、オンライン勉強会や各地で開催される勉強会もあります。FacebookTwitterなどで情報を受け取って、ぜひ参加してみましょう。

まとめ

6回に渡ってWordPressユーザーを対象にa-blog cmsの基本をお伝えしてきたこのシリーズ、お読みいただいてありがとうございました。a-blog cmsを勉強し始めてから1年に満たない私自身、仕事に大きな変化が出てきています。私たち制作者の目的はCMSそれ自体ではなく、その先のウェブサイト制作をより良いものにすることにあります。CMSはそのためのツールに過ぎないからこそ、複数のCMSを比較してより目的に適ったものを選んでいくことには大きな意味があります。a-blog cmsに興味を持ったなら、まずは ablogcms.io でテスト環境を用意し、初心者向けのハンズオンをやってみることから始めてみましょう。


販売実績3,000件突破につき、プレゼント企画を実施します


みなさまのおかげで、この度有償ライセンスの販売実績が3,000件突破いたしました。a-blog cms をご利用いただき、誠にありがとうございます。


※下記のプレゼント企画は2018年6月30日(土)23:59:59を持ちまして終了となりました。

3,000件突破を記念して、「コンテンツファーストなウェブサイト運用 a-blog cmsではじめるCMSプロトタイピング」のPDF版として第7章を用意する予定です。 第7章は現在制作途中となりますので、準備出来次第、こちらをプレゼントいたします。

第7章は書籍出版以降に追加した機能について追記しております。以下の内容を予定しております。

  • 刷新した管理画面について
  • 新しいインクルード文の書き方について
  • テンプレートの継承機能
  • テンプレート上からURLコンテキストを指定する
  • モジュールの実行順序を遅らせて表現の幅を広げる
  • 意図しないページを表示しないようにする
  • そのほかの注目したい機能
  • コラム)クイックサーチ

なお、第7章以外にも以下のものを希望者にプレゼントいたします。こちらについては数量限定となりますので、抽選で当選された方のみとなります。


※プレゼント企画は2018年6月30日(土)23:59:59を持ちまして終了となりました。

皆さまにこれからも選んでいただけるよう励んでいきますので、今後ともa-blog cmsをよろしくお願いいたします。


第5回 更新、再利用が簡単なパーツ「モジュール」

WordPressユーザーの皆さんこんにちは。WordPressユーザーを対象にa-blog cmsの基礎を解説するこのシリーズも残すところあと2回となりました。今回はWordPressにはない機能である「モジュール」を 取り上げます。第1回で解説した「ユニット」はエントリーのコンテンツ内容をパーツとして扱う機能ですが、「モジュール」はそれ以外の部分をパーツとして扱う機能です。

モジュールとは

まずは「beginner2018」のトップページの場合、どこがモジュールとして扱われているかを見てみましょう。



上図の左側がトップページのキャプチャです。右側に各モジュール名を示しました。このように、ほとんどのパーツがモジュールでできています。

管理者権限でログインした状態では、モジュールの部分にマウスオーバーすると右上に「モジュール」というリンクが表示され(※1)、クリックするとそのモジュールを管理するモーダルウィンドウが表示されます。



大まかにいうとモジュールは、動的コンテンツを表示するひとまとまりの部品です。テンプレートにはレイアウトに関する記述を行い、管理画面からプログラムの動作設定を行います。ソースコードと設定が分かれているため、ソースコードをコピー&ペーストして、異なる設定で再利用するということも簡単にできます。分かれているソースコードと設定を結びつけるのがモジュールIDです。

※1:ブログフィールドモジュールを含むフィールドモジュールの場合はリンクテキストは「モジュール」ではなく「編集」です。クリックすると該当のフィールド編集画面が表示されます。

モジュールの種類

今回取り上げるモジュールはモジュールの中でも「ビルトインモジュール」と「フィールドモジュール」です。ドキュメントにはそのモジュールの役割を簡単に記した一覧があります。すぐに使わなくても、モジュールでどのようなことができるかをだいたい把握しておくと良いでしょう。

モジュールをテンプレートに組み込む手順は次の5ステップです。

1. 管理画面のコンフィグからモジュールを選んでスニペットをコピー

各モジュールの右側にある「スニペット」をクリックすると、モジュールのスニペットが表示されます。これをコピーします。


たとえばエントリーヘッドラインモジュールのスニペットは赤で示した部分をクリックすると表示されます。


2. テンプレートの該当箇所にペーストしてモジュールIDを追加

テンプレートファイルのモジュールを使いたい箇所にスニペットをペーストし、モジュールIDを設定します。たとえばエントリーヘッドラインモジュールのスニペットは

<!-- BEGIN_MODULE Entry_Headline -->

で始まっています。この行に

<!-- BEGIN_MODULE Entry_Headline id="sidebar_headline" -->

のようにid属性を追加します。

3. 管理画面でモジュールIDを作成

「モジュールID(⌘K/Ctrl+kで「モジュールID」を検索)」の画面で「モジュールIDを作成」ボタンをクリックして、テンプレートに設定したモジュールIDを作成します。必須項目の「モジュール」「id」「名前」を入力していったん「作成」をクリックします。



4. 表示設定/条件設定/カスタム設定

続いて、作成したモジュールIDに対して「表示設定」「条件設定」「カスタム設定」で管理画面から設定を行います。

5. HTMLとCSSをカスタマイズする

コピー&ペーストしたスニペットの構造を保ちながら、サイトのデザインに合わせてHTMLとCSSをカスタマイズします。

モジュールIDを設定するとできるようになること

モジュールIDを設定しなくてもモジュールは機能しますが、基本的にはモジュールIDは設定して使うものと覚えておきましょう。モジュールIDを設定すると、同種のモジュールであっても個別のモジュールとしてさまざまに設定することができます。また、設定をグローバル化すると下の階層のブログでも同じ設定を利用できるようになります。


モジュール名「ヘッドライン」をクリックするとエントリーヘッドラインモジュールに共通の設定を編集する画面が表示されます。モジュールIDを設定するとこの設定とは別の設定を個々のモジュールに対して行えます。


モジュールの使用例

以下、トップページに使用されているモジュールの中から

  • ブログフィールドモジュール
  • ナビゲーションモジュール
  • エントリーサマリーモジュール
  • バナーモジュール

の4種類について具体的な実装方法、使用方法を見ていきます。

ブログフィールドモジュール

ヘッダーのロゴやタイトルの部分、フッターのお問合せ情報や会社情報の部分はブログフィールドモジュールです。a-blog cmsの公式テーマでは、こういったブログ全体に関する情報は「ブログ管理」にまとめられています。そして、ブログフィールドモジュールはこの「ブログ管理」の情報を取得して表示しています。

WordPressでは「設定 > 一般」「設定 > 表示設定」「カスタマイザー」などに情報があり、site_url(), home_url(), get_bloginfo()などの関数を使って出力する内容です。


a-blog cms: ブログ管理 > カスタム設定

WordPress: カスタマイザー


  • /themes/beginner2018/include/header.html
  • /themes/beginner2018/include/footer/suggest.html
  • /themes/beginner2018/include/footer.html

において

<!-- BEGIN_MODULE Blog_Field -->
<!-- END_MODULE Blog_Field -->

で囲まれている部分がブログフィールドモジュールです。実際にどのように書かれているか、テンプレートファイルを確認してみましょう。初期状態ではブログフィールドモジュールにはモジュールIDは設定されていません。

ナビゲーションモジュール

ナビゲーションモジュールはWordPressの「外観 > メニュー」の機能に似ています。



WordPressではli要素やa要素の属性はwp_nav_menu()が自動的に吐き出す複雑なソースに含まれています。このソースをカスタマイズしたい場合はwp_nav_menu()のパラメータを変更したり、functions.phpにPHPコードを書いたりする必要があります。

a-blog cmsのナビゲーションモジュールはリンク先を「URL」の欄に直接入力するので、WordPressの「外観 > メニュー」の「カスタムリンク」に似ていると言えます。li要素やa要素の属性も「属性」や「子要素属性」の欄に直接入力します(※2)。もちろん、class属性だけでなく他の属性も必要に応じて追加可能です。管理画面から設定できるURLや属性以外のソースについても、テンプレートはHTMLで構成されているのでカスタマイズは簡単です。

/themes/beginner2018/include/header/globalNavi.html

にグローバルナビゲーションのソースがあります。内容を確認してみましょう。

※2:初期状態で「属性」欄にある「js-link_match_location-full」や「js-link_match_location」というclass属性はWordPressで言えば「current-…..」の判定に使われていて、条件に合致した場合「stay」というclass名がJavaScriptによって付加されます。

エントリーサマリーモジュール

エントリーサマリーモジュールを含むエントリー系モジュールは、WordPressで言えば「投稿」 のループを扱うモジュールです。それぞれスニペットのレイアウトや使用できる変数、初期設定に違いがありますが、その中でもエントリーサマリーモジュールはもっともよく使われるモジュールです。beginner2018のトップページにおいても「製品情報」と「ピックアップリスト」に使われています。

「製品情報」にマウスオーバーして右上の「モジュール」をクリックしてみてください。WordPressではメインループであればpre_get_posts()にフックしたり、サブループであればテンプレートファイル内にget_posts()のパラメータとして設定したりする内容は、すべて管理画面から設定できます。

「表示設定」にも「条件設定」にもたくさんの設定項目がありますが、「?」アイコンにマウスオーバーするとツールチップが表示されるので、参考にしましょう。

「条件設定」の引数には「チェックするとURLコンテキストが優先されます」と書かれています。URLコンテキストとは、URLによって決定する条件のことです。WordPressではURLによって発行されるクエリは「メインクエリ」と呼ばれますが、URLコンテキストはメインクエリと似ています。WordPressではメインクエリによって生成されたメインループと、それ以外のサブループの区別が重要ですが、a-blog cmsではモジュールは独立して扱われるのでループが混乱するようなことはありません。また、ループ全体ではなく、引数それぞれについてURLコンテキストを優先するか、IDを指定するかを設定できます。



エントリーリスト(サイド用)では「カテゴリーID(cid)」に引数のチェックが入っているため、URLコンテキストが優先されます。つまり、現在地のカテゴリーによって表示されるエントリーが決定されています。確認してみましょう。



バナーモジュール

WordPressではバージョン4.8からウィジェットに「画像ウィジェット」が加わり、サイドバーのバナーを管理画面から編集できるようになりました。設定項目はウィジェットのタイトルと画像、リンク先のみです。また、ウィジェットはサイドバー以外の箇所にも表示できますが、a-blog cmsのモジュールほど手軽にテンプレートに貼り付けられるわけではありません。



a-blog cmsの場合はバナーにはバナーモジュールを使用します。バナーは複数設定でき、並べ替えも可能です。それぞれのバナーの設定項目には画像とURLの他に代替テキストや任意に使用できる変数である属性、「新しいウィンドウで開く」チェックボックスなどの項目が一通り揃っています。また、「公開」チェックボックスのチェックを外して一時的にバナーを非公開にすることや、「公開日時」で期間を設定することも可能です。


「サイドエリアのバナー」の設定画面

「トップページのメイン画像」の設定画面


バナーモジュールは画像とURLなどのセットの繰り返しで、汎用性が高いのでいわゆるバナーだけでなくさまざまに利用されています。「サイドエリアのバナー」の他にスライダーである「トップページのメイン画像」もバナーモジュールです。

まとめ

  • モジュールはテンプレートにレイアウトに関する記述をして、管理画面からその設定を行うひとまとまりの部品で、ソースと設定が分かれているため再利用しやすい
  • 管理者権限でログインしている状態では表示画面でモジュールの部分にマウスオーバーすると右上に「モジュール」というリンクが表示され、ワンクリックで設定画面が表示される
  • 多数のモジュールがあり、さまざまな用途に利用できる
  • モジュールIDを作成すると、下の階層のブログでも利用できるようにグローバル化したり、個別のモジュールとして設定することが可能になる

モジュールについてもっと深く知りたい場合は、ドキュメントを参照してください。

それでは、第5回「更新、再利用が簡単なパーツ「モジュール」」は以上となります。第6回は「WordPressにはないa-blog cmsのメリット」です。


お試し環境の用意はおまかせ!
a-blog cms のテスト環境を30日間無料でお試しいただけます