このコンテンツは、a-blog cms（エーブログ シーエムエス）を使ってみたいけどまずは何をしたらいいかわからない人に向けて、効率の良い学び方や基礎的な機能についてまとめた記事です。くわしい実装方法や使い方などは紹介しているリンク先の記事をご覧ください。

目次

• a-blog cms を利用できる環境を用意する
• CMSにログインして記事を書く
• テーマとテンプレート
• モジュール
• カスタムフィールド
• フォーム
• そのほかの機能
• 初心者向けのハンズオンコンテンツ
• わからない時は

a-blog cms を利用できる環境を用意する

まずは a-blog cms を利用できる環境を用意しましょう。a-blog cms を使うためには、基本的にはご自身のローカル環境や本番環境のサーバーに、a-blog cms をインストールする必要があります。でも、もっと手軽に a-blog cms を利用できる方法も現在２つあります。

• デモサイト（サンプルサイト）にログインして操作してみる
• ablogcms.io でお試し利用する（30日間無料でテスト環境を利用できます）

順番に説明していきます。デモサイト（サンプルサイト）では、ブラウザから行える作業（のみ）が体験できます。登録データは、他の方もログインできるため共用となり、定期的にリセットされますのでご注意ください。

デモサイト（サンプルサイト）のログイン情報

ablogcms.io でお試し利用する

ablogcms.io は、ご自身専用のテスト環境を30日間無料で使えるというサービスです。ブラウザから行える作業以外にもSFTP情報が支給されるため、自由にカスタマイズ可能です。必要なのはメールアドレスだけ。ご自身の専用環境となるため、登録データは共用ではありません。
但しお試し用の環境となりますので、サーバー内のファイルや登録データは登録から30日で削除されてしまいますのでご注意ください。（ ablogcms.io で構築したものを、本番環境用にエクスポートすることもできます）

本番環境で運用する場合は、サーバーに a-blog cms をインストールする必要があります。詳しくは以下をご覧ください。「簡単セットアップ」を利用したインストール方法が簡単でおすすめです。

CMSにログインして記事を書く

a-blog cms を自由に触れる環境ができたら、ログインしてみましょう。a-blog cms をインストールしたサイトのURLの末尾に「/login/」とつけてブラウザからアクセスするとログインページが表示されます。

ログインできたら、コンテンツ（記事）を新規で作成するか、既存の記事を編集してみましょう。a-blog cms では記事のことを「エントリー」と呼んでいます。固定ページや投稿ページといった区別はありません。詳しいエントリーの書き方は以下の記事をご覧ください。

テーマとテンプレート

こちらは a-blog cms の公式テーマの詳細や、テーマの設定方法などが学べる記事です。どんなテーマがあるのか目を通しておくといいでしょう。

テーマとテンプレートでは、どこに書いたら意図したものが表示されるのか、実際に確認しながら進めることをおすすめします。

まずは「テーマとテンプレートの構成」の記事で構成をなんとなく把握してください。実践したい場合は「表示テンプレートの確認」の見出しを参考に、テンプレートに実際に何か書いてみることがおすすめです。

公式テーマのHTMLを開いてみると、英語でHTMLのコメントタグのようなものや「@」からはじまるコードがたくさん書かれていますが、この記述が a-blog cms ではプログラムが動作する箇所になります。各記述方法を知りたい場合は以下の記事をご覧ください。

モジュール

a-blog cms に登録したデータを表示する機能がモジュールです。

以下の記事を見ると、モジュールにはたくさんの種類があることがわかります。モジュールの機能でできることが大体把握できると思います。

ビルトインモジュールを使っているうちに、ビルトインモジュールで登録データの条件設定のしかたについて疑問を持つ方が多いですが、その場合にはモジュールIDを作成してください。モジュールIDを作成することで、複数の条件設定が可能になります。

実際にサイトを制作するときには、基本的には毎度モジュールIDを作成して使うことになります。

カスタムフィールド

カスタムフィールドとは、エントリーや、カテゴリー、ブログ、ユーザーに対して独自のデータを追加することができる機能です。まずはこちらの記事をご覧いただくと概要が把握できると思います。

学習の流れとしては、まずは「カスタムフィールドの基本」の記事でだいたいどんなソースコードで構成されているかを把握して、「カスタムフィールドメーカー」でソースコードを作り、次は記述場所を把握するために「ブログのカスタムフィールド」の記事を参考にするのがいいと思います。

前述した通り、a-blog cms にはカスタムフィールドの種類が5つありますが、ブログのカスタムフィールドを作成する方法をここでは紹介しておきます。以下の記事をご覧ください。他の4つのカスタムフィールドを作る際はテンプレートを設置するディレクトリが変わりますので、それぞれの記事をご覧ください。

フォーム

サイトにフォームを作る際は以下の記事を参考にしてください。

たくさんソースコードがあるので、全て覚えるのは大変だと思います。公式テーマでは Blogテーマ以外はお問い合わせフォームの仕組みを持っていますので、ソースコードをコピー&ペーストして要素を追加したり削除して、少しずつデザインに近づけていくことをおすすめします。

なお、フォームはカスタムフィールドと同じソースコードです。カスタムフィールド メーカーを活用して制作してください。

他にも、フォーム機能と連動してGoogleスプレッドシートや Slack や ReCaptcha などの外部機能と連携することができる「拡張アプリ」という機能があります。こちらは基礎的な内容ではありませんが、こういった機能も知っていると提案の幅が広げることができるため、紹介しておきます。

基礎的な機能については以上となります。これまでに紹介した機能で小さなコーポレートサイトなら作ることができますので、まずはこれらの機能を使ってみることがおすすめです。

そのほかの機能

マルチサイトは管理画面から「ブログ管理」のページで子ブログを作成することで作れますし、パスワード制限をかけたサイト（例：会員制サイト）もブログのステータスを「シークレット」にするだけで作れます。

その他にも、レスポンシブWebデザインではなく、PCとスマホのデザインを変更するときにはルールという機能が必要です。

運営者がウェブサイトのレイアウトを自由に変更したいという特殊な要望があれば、レイアウト機能という機能も用意しています。

他にもたくさん機能がある a-blog cms ですが、まずはこの記事に書いてある機能を把握することが第一歩です。たくさん記事を紹介しましたが、ご自身の理解度に合わせて必要な項目をチェックしてみてください。

初心者向けのハンズオンコンテンツ

他にも、静的サイトから動的サイトを作っていくハンズオンコンテンツもあります。初心者の方はこちらを学習すると理解が深まると思います。

わからない時は

記事を読んでもよくわからない。インストールでつまづいてしまい先に進めない…。そんなときは、お気軽にフォーラムで質問してください。

また、定期的に開催している勉強会に参加していただくと、何でもご質問いただけますし、a-blog cms についての理解も深まります。オンラインでも各地でも定期的に開催していますので、是非参加してみてください。（◯◯編 となっていても、初心者の方もいつでもご参加いただけます。）

お急ぎの場合や、より詳細なサポートをご希望の場合は、公式サポートをご検討ください。ベースキャンプ名古屋での対面サポートやオンラインビデオ通話サポートなどを行っております。

a-blog cms のカスタムフィールドは、ブログ・カテゴリー・エントリー・ユーザー・モジュール とありますが、今回は カテゴリー・ユーザー のタブの数が少ない時に使えるカスタマイズをご紹介します。

エントリー内のユニットを表示するUnit_Listの使用ケース紹介その2では、Google MapのAPI 「MarkerClusterer」を使ったUnit_Listの活用方法をご紹介します。

たとえば、1つの地図に各エントリーに1つずつ挿入されている地図ユニットをピンでまとめたいときに有効です。

MarkerClustererを使うことにより、同じ位置にエントリーが集中していたとしてもピンが多くなりすぎず、すっきりとした見た目になります。

3件のエントリーに1つずつ地図が入力されている場合の MarkerClusterer の例

実装方法

/js/makerclusterer.jsと/images/フォルダをGitHubよりダウンロードしてください。

ソースコード：headタグ

headタグ内に以下を記述してください。

<script type="text/javascript" src="https://maps.google.com/maps/api/js?key=%{GOOGLE_API_KEY}&sensor=false"></script> 
<script type="text/javascript" src="/js/markerclusterer.js"></script>

テーマフォルダに/images/フォルダを設置するときは、/js/makerclusterer.jsの以下の記述のパスを変更する必要があります（例： '/theme/site/images/m'; など）。

MarkerClusterer.prototype.MARKER_CLUSTER_IMAGE_PATH_ = '../images/m';

ソースコード：MarkerClustererを設置したい場所への記述

HTMLファイル内のMarkerClustererを設置したい場所に以下を記述します。

<div id="map" style="height: 400px;"></div>

ソースコード：地図の基準にしたい緯度経度の情報を登録するカスタムフィールド

ブログのトップに表示させたい場合はブログのカスタムフィールドに、カテゴリーの一覧に表示させたい場合はカテゴリーのカスタムフィールドに記述してください。

※Site2016内の/admin/category/field_realestate.htmlと同じ内容です

<h3 class="acms-admin-admin-title2">一覧ページで表示させる地図の中心の緯度経度設定</h3>
<table class="adminTable acms-admin-table-admin-edit">
<tr>
  <th>地図</th>
  <td class="js-map-editable">
    <div class="acms-admin-form-group">
      <label for="input-text-map-search_text" class="acms-admin-hide-visually">住所で検索する</label>
      <input type="text" name="" value="" id="input-text-map-search_text" class="js-editable_map-search_text" disabled="disabled" size="40" />
      <input type="button" name="" value="検索" class="js-editable_map-search_button acms-admin-btn-admin" disabled="disabled" />
    </div>
    <div class="acms-admin-form-group">
      <img class="js-map_editable-container" src="http://maps.google.com/maps/api/staticmap?center={index_map_lat},{index_map_lng}&zoom={index_map_zoom}&size=640x400&maptype=roadmap&markers={index_map_lat},{index_map_lng}&key=%{GOOGLE_API_KEY}" width="640" height="400" style="display:block;" />
    </div>
  <!-- BEGIN index_map_lat:veil -->
  <label for="input-text-index_map_lat">緯度</label> <input type="text" name="index_map_lat" value="{index_map_lat}" size="9" id="input-text-index_map_lat" class="js-map_editable-lat" />
  <label for="input-text-index_map_lng">経度</label> <input type="text" name="index_map_lng" value="{index_map_lng}" size="10" id="input-text-index_map_lng" class="js-map_editable-lng" />
  <label for="input-text-index_map_zoom">ズーム</label> <input type="text" name="index_map_zoom" value="{index_map_zoom}" size="10" id="input-text-index_map_zoom" class="js-map_editable-zoom" />
  <!-- END index_map_lat:veil -->
  <!-- BEGIN index_map_lat:empty -->
  <label for="input-text-index_map_lat">緯度</label> <input type="text" name="index_map_lat" value="35.172775" size="9" id="input-text-index_map_lat" class="js-map_editable-lat" />
  <label for="input-text-index_map_lng">経度</label> <input type="text" name="index_map_lng" value="136.887466" size="10" id="input-text-index_map_lng" class="js-map_editable-lng" />
  <label for="input-text-index_map_zoom">ズーム</label> <input type="text" name="index_map_zoom" value="7" size="10" id="input-text-index_map_zoom" class="js-map_editable-zoom" />
  <!-- END index_map_lat:empty -->
  <input type="hidden" name="field[]" value="index_map_lat" />
  <input type="hidden" name="field[]" value="index_map_lng" />
  <input type="hidden" name="field[]" value="index_map_zoom" />
  </td>
</tr>
</table>

ソースコード：MarkerClustererを動かすためのJavaScript（ここではHTMLファイルとして使用します。例：map.html）

<script type="text/javascript">
  var map = null;
  var markerclusterer = null;
  var infowindow = new google.maps.InfoWindow();
  var gmarkers = []; 
  // マーカーの作成と、吹き出しの作成
  function createMarker(latlng, info) {
    var marker = new google.maps.Marker({
      position: latlng,
      map: map
    });
    google.maps.event.addListener(marker, 'click', function() {
      infowindow.setContent(info); 
      infowindow.open(map,marker);
    });
    // 情報を保存
    gmarkers.push(marker);
  }
  // クリックイベントを作成する
  function myclick(i) {
    google.maps.event.trigger(gmarkers[i], "click");
  }
  function initialize() {
    // 全体の地図を作成
    <!-- BEGIN_MODULE Category_Field -->
    var myOptions = \{
      zoom: {index_map_zoom},
      center: new google.maps.LatLng({index_map_lat},{index_map_lng}),
      mapTypeControl: true,
      navigationControl: true,
      mapTypeId: google.maps.MapTypeId.ROADMAP
    \}<!-- END_MODULE Category_Field -->
    map = new google.maps.Map(document.getElementById("map"), myOptions);
    google.maps.event.addListener(map, 'click', function() {
      infowindow.close();
    });
    // 場所・吹き出しの情報を定義
    var markers = [
    <!-- BEGIN_MODULE Unit_List id="map" --><!-- BEGIN unit:loop -->
      ["{entry_title}", {unit_field_2},{unit_field_3},"{entry_url}"],<!-- END unit:loop -->[]<!-- END_MODULE Unit_List -->
    ];
    // 吹き出しに入れる要素
    for (var i = 0; i < markers.length; i++) {
      var point = new google.maps.LatLng( markers[i][1],  markers[i][2]);
      var marker = createMarker( point, "<div class='scrollFix'><p class='mapEntryTitle'>" + markers[i][0] + "</p> " + "<p class='mapDetailInfo'>緯度: " + markers[i][1] + "<br> 経度: "  +  markers[i][2] + "</p><p class='mapLinkText'><a href='"+ markers[i][3] +"'>詳しく見る</a></p>" + " </div>") ;
    }
    markers.pop();
    // 地図を表示
    markerCluster = new MarkerClusterer(map, gmarkers);
  }
  window.addEventListener('load', initialize);
</script>

注意点

• 「MarkerClustererを動かすためのJavaScript」のソースコードは、全てJavaScriptで書かれていますが a-blog cms のモジュールを使っているためHTMLファイル内に記述します
• 25行目ではCategory_Fieldを使用していますが、もし「地図の基準にしたい緯度経度の情報を登録するためのカスタムフィールド」をカテゴリー以外のカスタムフィールドとして設置した場合、対応するフィールドモジュールに置き換えます

モジュールIDの設定

モジュールID名「map」というUnit_Listのモジュールを作ります。

ユニットタイプの「地図」がチェックされていることを確認してください。

そのほかの設定については、必要に応じて有効にしてください。

Ver.2.10.8よりランディングページテーマが「lp@site2019」にアップデートいたしました。

「lp@site2018」から「lp@site2019」へ変更した際に、全ての画像ユニットや画像のカスタムフィールド がメディアユニットまたはメディアのカスタムフィールド に変更されています。

実際のご使用方法は以前書いたエントリーを参考にしてください。

インポートデータのみ、新しくなっております。以下のリンクより、インポートデータをダウンロードしてください。

• lp@site2019インポートデータ

2019/04/19 に Ver. 2.10.8 がリリースされました！

フィックスバージョンなのですが、テーマ類が2019版になったりと大きな変更が加えられています。 Ver. 2.10.8 で新しく追加された機能や変更点などを紹介していきたいと思います。

＊最後に変更点一覧を載せてあります。

php7.3 対応

以前までは、php7.2.xまでの対応でしたが、 Ver. 2.10.8 より下記のパッケージ内容になり、php7.3.xまで対応できるようになりました。

• php5.3.3 - php5.5.x
• php5.6.x - php7.0.x
• php7.1.x - php7.3.x

＊ 各PHPのバージョンにあった、ioncube loader が必要となります。

各テーマを2019年版に刷新

各テーマを 2019年版に刷新しました。ぜひチェックしてみてください。

主な変更点

• メディアでの投稿UIを改善
• Bootstrapのバージョンを v4.0.0 から v4.3.1 にアップデート
• ブログテーマのデザインを刷新

site2019

bootstrap2019

blog2019

beginner2019

Scroll Hint を導入

新しい組み込みJSが追加されました。

スマホなどの小さいディスプレイの時に、横に長いコンテンツ（テーブルなど）を横スクロールさせることはよくあると思います。 ただ横スクロールは、あまり行わない操作のため、横スクロールできることに気づきにくく、UIとして悩むところです。

そこで、今回導入した「Scroll Hint」を導入することで、ユーザーに横スクロールできることを、認知させることに役立ちます。 以下のテーブルをご覧ください。アニメーションで、横にスクロールできることを知らせてくれます。

テーブルユニット

テーブルユニットの標準スタイルとして、この「Scroll Hint」も選択できるようになっています。 「スクロールを促すテーブル」 を選択してください。

テーブルユニットのスタイル

オープンソース

またこの「Scroll Hint」は applepleが開発したオープンソースプロジェクトでもあります。 a-blog cms 以外でも利用できますので、ぜひお試しください。

• Site: https://appleple.github.io/scroll-hint/
• GitHub: https://github.com/appleple/scroll-hint

メディア機能でsvgを画像として扱えるように改善

今までメディアユニットではSVGがファイルとして認識されてしまい、画像として扱うことができませんでしたが、 今回の改修で、SVGを画像としてSVGのまま表示させることが出来るようになりました。

SVGのまま扱うので、画像編集はできませんが、jpegやpng画像と同様にユニット、カスタムフィールド 、フィールドグループなど全てで利用可能となっています。

2019テーマでもロゴ画像などは、SVG画像を使用しています。

@verbatimブロック（波括弧を解決しない）を追加

a-blog cms のテンプレートエンジンでは変数に波括弧を使用しているため、JavaScriptなどの波括弧とぶつかってしまい、そのままでは正常にJavaScriptが動作しませんでした。 正常に動作させるためには、波括弧をバックスラッシュでエスケープする必要があったのですが、広い範囲だと手間で効率が悪かったと思います。

<div id="app">
  \{\{ message \}\}
</div>

そこで今回、新しいテンプレート要素の「@verbatim」ブロックを追加し、範囲指定で波括弧を展開しないようにできるようになりました。 Vue.js など JavaScriptでテンプレートを書く機会も増えてきたと思いますので、ぜひ試してみてください。

読み方: バーベイタム

＠verbatim
<div id="app">
  {{ message }}
</div>
＠endverbatim

リリースノート

新機能一覧

• CMS-4651 PHP7.3 対応
• CMS-4653 各テーマを2019年版に刷新
• CMS-4751 Scroll Hint を導入
• CMS-4629 メディア機能でsvgを画像として扱えるように改善
• CMS-4760 @verbatimブロック（波括弧を解決しない）を追加

変更点一覧

• CMS-4746 閲覧側のエントリー編集画面で、保存ボタンをページ下に固定にするように変更
• CMS-4747 インストーラーで、ブログ名の初期値「a-blog cms」を空に変更
• CMS-4749 メディア機能のタグのスタイルを調整
• CMS-4753 テーブルユニットスタイルのデフォルトを「スクロールを促すテーブル」に変更

修正点一覧

• CMS-4748 カラーピッカーがモーダル上で動作しない問題を修正
• CMS-4752 サーバー環境によって BENCHMARK_MODE情報が出力されない問題を修正
• CMS-4750 メディアのカスタムフィールドに小さい画像が登録された際のスタイルを調整
• CMS-4754 SmartPhotoの→アイコンのスタイルがテーマによって崩れてしまう問題を修正
• CMS-4756 ユニットでスマホサイズでもグリッドシステムが反映されるように変更
• CMS-4757 ブログ管理のサイトロゴ付近に不要なEND_IFブロックがあるので削除
• CMS-4761 Ver. 2.10 のCategory_EntrySummaryで各フィールドが出力できない問題を修正
• CMS-4762 ユーザー切り替えアイコンが表示されない問題を修正
• CMS-4755 メディアバナーのスタイル調整
• CMS-4763 関連記事を複数種類登録できるようにしている場合、Entry_Summaryモジュールで選択が正常にできない問題を修正
• CMS-4764 メディアを使ったグループ系フィールドで部分的な登録がうまくできない問題を修正
• CMS-4770 メディア管理のPDFをダウンロードではなく、インラインで開くように修正
• CMS-4769 Entry_Bodyの変数表にメディアユニットの情報がない問題を修正
• CMS-4768 ログイン周りのセキュリティアップデート
• CMS-4766 %{HTTP_CURRENT_THEMES_DIR} グローバル変数を追加

名古屋で毎月開催されているa-blog cms の勉強会「a-blog cms 勉強会 in 名古屋 2019/03」を開催しました。 今回はVer.2.10の機能について開発者スタッフからご紹介いたしました。

メディア機能について

• メディアユニットでメイン画像が指定可能
• カスタムフィールド、カスタムフィールドが可能
• 簡単な画像の加工が可能（トリミング、回転など）
• メディア機能の検索フィルターで検索した情報はページ遷移しても保持する
• メディアユニットも画像ユニットと同じように、ドロップすると挿入できるように
• メディア機能ならサムネイルイメージの中心点を設定できるように
• 中心点は組み込みJSとの連携で実装できる（.js-focused-image）

メディアバナーモジュールの追加について

あたらしく、メディアが扱えるバナーモジュール「メディアバナー」が追加されました。

メディアバナーでは保存するたびに入力欄が1つずつ増える仕様ではなく、追加ボタンが実装されています。

新しいメディア機能のファイル管理について

新しく「ステータス」という項目が追加されており、「エントリーの公開状態に従う」を選ぶことで、まだそのエントリーを閲覧する権限がない人がファイルのURLにアクセスしても、403になりファイルにアクセスできません。

サブカテゴリーについて

コンフィグ＞編集設定の「エントリー項目設定」にあるサブカテゴリーの表示設定にチェックを入れることによって、サブカテゴリーが有効になり、ご利用できます。

サブカテゴリーを設定することで、同じエントリーを複数のカテゴリーの一覧に表示できます。

コンフィグセットの機能について

コンフィグセットというコンフィグを管理する機能が増えました。

コンフィグセットの導入により、編集設定のページに「エントリー項目設定」が増えました。

「エントリー項目設定」では以下のようなことができます。

• 不必要な項目の非表示
• ラベルの変更
• 初期ステータスの設定
• 公開日時の「常にエントリー日時と同じにする」

メニュー管理について

新しく、メニュー管理の機能が増えました。管理画面でサイドバーに表示しているメニューをカスタマイズできます。

• ラベルの変更
• カテゴリー分けの変更
• 不必要な項目の削除
• 新しい項目の追加

なお、このメニュー管理に登録できるURLの入力欄にはグローバル変数も使用可能です。

メニュー管理は以下の2つの方法でご利用いただけます。

コンフィグ＞メニュー管理、またはサイドバーの「？」マークから移動してご利用ください。

次回のa-blog cms勉強会は4月9日（火）に行います。 機能紹介以外にも、a-blog cms勉強会では会場代だけで開発スタッフによる対面サポートも行なっております。ビギナーの方もパワーユーザーの方もお気軽にご参加ください！

• a-blog cms 勉強会 in 名古屋 2019/04

名古屋以外にお住いの方にオススメの勉強会の紹介

• a-blog cms オンライン勉強会 初級編 2019/03/18 - a-blog cms Online | Doorkeeper
• a-blog cms 勉強会 in 大阪 2019/04 - a-blog cms 大阪 | Doorkeeper

Training Campは全国各地からユーザーが集まる年に2回の大規模なイベントとなっており、次の開催地は名古屋ですがこちらもお住いの地域に関係なくおすすめの勉強会です！

• a-blog cms Training Camp 2019 Spring - a-blog cms Training Camp | Doorkeeper

2.10.0 から a-blog cms で サブカテゴリー の設定が可能になりました。

「複数カテゴリーは設定できないの？」って相談されると「タグを使ってください」とか「カスタムフィールドで対応してください」のような回答をしていましたが、今回のバージョンから サブカテゴリー という複数のカテゴリーを設定できる機能が実装されました。

サブカテゴリーとマルチカテゴリーの違い

Ver. 2.10.0 リリース

2019/02/28 マイナーバージョンアップである Ver. 2.10 がリリースされました！

コンテンツを管理しやすく、扱いやすいUIを提供することを目的として開発が進められ、ようやくリリースとなりました。

ここでは、Ver. 2.10 で新しく追加された機能や変更点などを紹介していきたいと思います。

＊最後に変更点一覧を載せてあります。

アップデート

機能紹介の前にアップデート方法を紹介しておきます。

Ver. 2.7 以下からのバージョンアップはこれまで通り、パッケージをダウンロードして手動でバージョンアップが必要ですが、Ver. 2.8 より管理画面からのアップデート機能が追加されました。

ただデフォルトですと、「パッチバージョン」のみのアップデートになっていますので、Ver. 2.10 にアップデートするためには設定を変更する必要があります。

「管理ページ > コンフィグ > 機能設定」 に移動し、「オンラインアップデート」を「マイナーバージョンも含める」に変更してください。これで管理画面からVer. 2.10 に更新できるようになります。

メディア機能の大幅なアップデート

メディアの検索性の向上

メディアをタグやファイル名、拡張子、タグなどから登録日時、ファイルサイズなどの「降順」「昇順」で検索できます。ページ遷移せずにシームレスに探したいメディアにアクセスできます。

メディア編集機能

画像のトリミング機能

今までCMSの中で直接画像をトリミングすることができなかったので画像編集ソフトなどで一回画像を加工してからCMSに登録するケースが多々ありました。 そこで今回は以下の画像のように画像をアップロードしてその場でトリミングできるような機能を追加しました。画像は、「カスタム、1:1、4:3、16:9」の中から選択してトリミングできます。

焦点座標の指定機能

メディアに登録した画像に対して「トリミング」や焦点を決められる機能が追加されました。画像の焦点を決めることによって例えば以下の画像のように縦長の画像の特定の部分に焦点を合わせて画像を表示するカスタマイズも可能になります。

js-focused-image

先ほど画像に対して設定した焦点座標は新しく追加された組み込みJS「js-focused-image」を利用することによって効力を発揮します。 以下はエントリーサマリーを表示しているのですが、全く同じ二つの画像をテスト的に用意しました。 一つは焦点座標が設定されていない画像、もう一つは焦点座標が設定された画像です。焦点座標が設定された画像は綺麗に人物が中央に表示されているのがわかります。

Entry_Summaryモジュールでの表示場合、以下のようなHTMLをかくことで簡単に実装することができます。 同梱のsite2018テーマではすでに実装されているのでぜひ参考にしてみてください。

メディアユニットの機能追加

アップロードボタンを用意

メディアユニットにある以下の「アップロード」ボタンをクリックすると画像やファイルをアップロードできるモーダルウィンドウが表示されます。

画像やファイルのドラッグ&ドロップ

また画像ユニットと同じようにファイルをユニットにドラッグできます。

すると以下のようなモーダル画面が表示されるので「アップロードして挿入」というボタンをクリックしましょう。

すると以下のようにユニットに先ほどアップロードした画像が登録されました。

メディアユニットの画像をメイン画像として利用

いままでエントリーのメイン画像として利用できる画像は画像ユニットに登録してある画像に限られていました。今回の改良でメディアユニットに登録した画像もメイン画像として利用できます。

メディアのカスタムフィールドを用意

js-media-fieldというクラスを振ると、そのクラスが振られた要素内で画像ユニットと同じように選択した画像のプレビューや削除、画像の編集ができるようになります。

カスタムフィールドメーカーで簡単にそのためのソースコードを生成できるのでぜひ試してみましょう。 カスタムフィールドメーカーから生成されたソースコードを利用することでメディアユニットとほぼ同じ機能がカスタムフィールドでも利用できます。

またカスタムフィールドの場合、アップロードできるメディアのタイプを「全て、画像、ファイル」の中から指定してメディアの選択モーダルを表示することも可能です。

メディアの選択モーダル

メディアバナーモジュールを追加

メディア機能のアップデートに伴い、登録したメディアを有効活用できるように メディアバナーモジュールをあらたに追加しました。このモジュールを使うとメディアに登録した画像の中から画像を選択して、バナーモジュールのように利用することができます。 バナーモジュールよりも画像を登録する際の使い勝手が大きく向上しており、エントリー編集ページのようなユニット形式で画像を登録することができます。 モジュール側で利用できる変数はバナーモジュールと同じです。

バナーモジュールよりも優れている点

バナーモジュールでは同じ画像を別のバナーモジュールでも利用したい場合、そのモジュールのためにわざわざ画像をアップロードする必要がありました。メディアバナーモジュールではすでにアップロードされた画像をメディアから選択できるので、同じ画像をわざわざモジュールごとにアップロードする手間が省けます。 また複数の画像をドラッグ&ドロップで一度に登録することができます。

サブカテゴリー機能を追加

a-blog cms は ずっと１エントリーにつき１カテゴリーというシングルカテゴリー方式でした。今回の Ver. 2.10 ではこの仕様を拡張し、メインカテゴリーの他に、複数のサブカテゴリーをエントリーに設定できるようになりました。カテゴリーはよく使う機能であり、設計にも大きく関わってくるところになりますので、インパクトのある変更だと思います。

＊ 互換性はありますので、いままで通りの設計・運用もできますのでご安心ください。

機能の有効化

サブカテゴリー機能を有効化するには 管理ページ > コンフィグ > 編集設定 に移動し、「エントリー項目設定」の「サブカテゴリー」にチェックをつけます。

サブカテゴリーの有効化

エントリー編集画面

さっそく、エントリーの編集画面をみてみましょう。カテゴリーの下に「サブカテゴリー」入力欄が増えていると思います。 入力UI は、新しくなった タグ入力 と同じように、入力していくことで候補が絞られていく方式になります。

サブカテゴリー選択画面

サブカテゴリー選択画面
サブカテゴリー選択画面

仕様

サブカテゴリーは一覧での絞り込み時に利用されるフィールドとなります。詳細ページがこれまでと同じように メインに設定したカテゴリーがURLに反映されます。

例えば、以下のようなエントリーがあったとします。

• エントリーコード: enrty-123.html
• メインカテゴリー: 記事（article）
• サブカテゴリー: お知らせ（news）, 新製品（new）

この場合、一覧ページでは以下のURLで、このエントリーを表示させることができるようになります。

• https://example.com/article/
• https://example.com/news/
• https://example.com/new/

詳細ページでは、メインカテゴリーのみを使ったURLで表示されます。

• https://example.com/article/enrty-123.html

コンフィグセット機能の追加

こちらも大きな変更の１つです。a-blog cms にはコンテンツタイプそのものという考え方はなかったので、今までのカスタマイズでは全てではないですが、 ブログ=コンテンツ という考えでカスタマイズされてきた方も多いと思います。

Ver. 2.10 では、コンテンツタイプ的な考えを取り入れ、コンテンツごとの設定を一元管理して、ブログやカテゴリー に、その設定を指定できるようになりました。

コンフィグを一元管理

コンフィグのセットを一元管理するので、同じような設定をブログやカテゴリーにそれぞれ設定する手間も省けメンテナンス負荷も下がります。

コンフィグセット管理

カテゴリー毎のコンフィグ変更

Ver. 2.9 までは、ブログ単位でのコンフィグ設定でしたが、Ver. 2.10 よりカテゴリー毎にもコンフィグが設定できるようになりました。 設計の幅が大きく広がる機能ですのでぜひ利用してみてください。

ブログにコンフィグセットを設定

ブログにコンフィグセットを設定

タグなどエントリー編集画面で使うUIをON OFFできる機能を追加

コンフィグセットができたことにより、コンテンツの編集設定を一元管理できるようになりました。 それに伴い コンテンツ=エントリー の編集画面もコンテンツ毎に簡単に変更できる機能を追加しました。

設定画面

コンフィグ > 編集設定 > エントリー項目設定 で設定をおこなうことができます。

設定できる項目は

• 表示・非表示
• ラベルの変更
• デフォルトの設定

などを変更できるようになっています。

エントリー編集項目設定画面

エントリー編集画面は、運用時によく使う画面です。コンテンツ毎にわかりやすい編集画面を簡単に用意することができるようになると思います。

見出し一覧表示組み込みJSを追加（document-outliner）

見出し生成機能を ブログコンテンツ や マニュアル系コンテンツ などで便利な見出し一覧を出力するための組み込みJSが追加されました。

＊オープンソースとしても公開されていますので、a-blog cms以外でも利用可能です。https://github.com/appleple/document-outliner

仕様

• 文章のアウトラインを ul/ol でマークアップしたものを出力
• アウトラインアルゴリズムは、HTML5（Living Standard）の仕様に従っている
• HTML全体ではなく、部分的にアウトライン化可能
• アンカーリンクを自動生成

使用方法

<!-- ここに見出し一覧が生成されます -->
<div class="target-list"></div>

<div class="js-outline" data-target=".target-list">
<!-- コンテンツ内容 -->
</div>

オプション

オプションは config.js で指定するか、data属性 で指定します。

ログインユーザー、ユーザー権限のルールを追加

新しいルールが追加になりました。

• ログインユーザーのUID指定
• ログインしているユーザーの権限指定

これにより、権限・ユーザー個人により表示させるメニューを変更したり、より細かな制御が可能になると思います。

キャッシュルールを追加できるHookを追加（addCacheRule）

フックに機能が１つ追加されました。キャッシュの振り分けルールをカスタマイズできるもので、ルール毎に違うものを設定することにより、キャッシュを振り分けることができるようになります。いままではa-blog cmsのルール機能でルールを作ることで、キャッシュを振り分けていましたが、ルール機能にない要素でもキャッシュ振り分けができるようになりました。

例: デバイス毎にキャッシュを分ける

/**
     * キャッシュルールに特殊ルールを追加
     *
     * @param string $customRuleString
     */
    public function addCacheRule(&$customRuleString)
    {
        $customRuleString = UA_GROUP; // デバイスによってルールを分ける
    }

管理メニューのカスタマイズ機能を追加（メニュー管理）

いままでのカスタマイズ

いままで管理画面のサイドバーのメニューをカスタマイズするには直接テンプレートを編集する必要がありました。項目数が多いので権限ごとに表示するメニューを分けたい場合は記述量がとても多くなってしまい大変でした。

これからのカスタマイズ

テンプレートを編集しなくてもTrelloなどで採用されているカンバンボード形式でDrag and Dropでメニューを管理できるようになりました。カードを直接編集すれば、メニューのアイコンやURL、表示内容などを簡単に書き換えられます。 表示させたくないデフォルトのメニュー内容などは「表示させない」と表示されているエリアにDrag and Dropしましょう。コンフィグに設定されているないようなので、コンフィグセットやルールを利用することによって権限やブログごとに表示するメニューの内容を変更することが可能です。

メニュー管理の場所

管理メニューのバーティカルバーに表示されているクエスチョンマークをおすと下のようにメニューが表示されますので、そのメニューから「メニュー管理」に移動します。もしくは「管理画面 > コンフィグセット > 利用するコンフィグ > メニュー管理」 より移動できます。

日時選択用の組み込みJSを追加

a-blog cmsで使われているUIはjQuery UIが多々使われていますが、管理画面のフラットなデザインと整合性があわなくなってきました。 そこで今回、新たに日付選択用と時間選択用のUIとしてフラットでシンプルな日付選択用のJavaScriptライブラリ flatpickr を導入しました。 日付選択のUIはjs-datepicker2というクラスをinput要素にあてると適応されます。時間選択のUIにはjs-timepickerというクラスをinput要素にあてます。

---

js-datepicker2

---

js-timepicker

管理画面全体のスタイルを調整

今回、Ver2.10にて管理画面のデザイン変更を行いました。途中経過を管理画面のUI改善を計画しています | プロダクト改善 | ブログ | a-blog cms developerにてご紹介いたしましたが、今回は決定した変更をお伝えいたします。

検索フィルターのデザイン変更

従来の検索フィルターはすこし頓挫した印象があったため、すっきりして見えるように整理しました。

以前の検索フィルター

Ver.2.10以降の検索フィルター

従来の検索フィルターは全ての項目が表示されていたため、使用頻度が高いと想定している項目とそうではない項目に分けています。「詳細検索」をクリックすれば、検索の詳細条件が表示されます。エントリー以外の検索フィルターでも新デザインが適用されています。

ただ、人それぞれ使い方は変わってくると思いますので、従来のように使いたい方のために「詳細検索」を開いた状態かまた閉じた状態か記憶できるようになっております。詳細検索を使用する使用頻度が高い方は、詳細検索を開いだ状態でページを移動すると次回ページに訪れた時も詳細検索が開いたままの状態を維持します。

管理UIの「作成」ボタンを緑に変更

以前まで作成ボタンは白いボタンとなっておりましたが、作成ボタンを発見しづらい問題が発生していたため、視覚的にボタンを探しやすいように緑色に変更いたしました。

管理画面はクライアントやチームメンバーなどの誰かに操作方法を説明するすることがある（デモや、電話などを想定）ため、より説明しやすいことを考え配色変更を行なっています。

この変更は、エントリーだけではなく、カテゴリーやブログなどその他の作成ボタンにも適用されています。

ボタン、入力欄、セレクトメニューの高さの通常サイズを26pxに統一

ボタン、セレクトメニューの高さを26pxに統一いたしました。これは、一覧の余白が要素によって統一されていなかったことにより、バラバラとした印象になってしまっていた問題が理由です。この変更により、通常サイズ高さは30pxから26pxに変更になり、ウィンドウ幅が767px以前のときは38pxから34pxへ変更になりました。

フォントサイズは、ウィンドウ幅が768px以降のときは12px、大きいサイズが16pxとなっており、ウィンドウ幅が767px以前ではフォントサイズは16px、大きいサイズのみ20pxとなっています。

acms.cssのボタン、入力欄、セレクトメニューをオリジナルテーマ内でお使いの場合

今回の変更により、paddingの値やline-heightの値が変更されています。もしオリジナルテーマ内でスタイルを継承してお使いの場合、従来のacms.cssを入れていない状態だと影響が出る場合がございます。お気をつけください。

タブ内の .acms-admin-admin-title2に背景色を追加

タブ内の見出しが探しやすくなるように、背景色を追加しました。カスタムフィールド などで.acms-admin-admin-title2を見出しのクラス名に使った際に、反映されます。

管理画面内データ一覧の区分分け

以前のデータ一覧では、例えばエントリーの場合はタイトル、コード、日時、ブログ、カテゴリーが同じセル内に入っておりましたが、これを区分分けしました。

以前までの管理画面内データ一覧

Ver.2.10以降の管理画面内データ一覧

合わせて、コンテンツとヘッダーを識別しやすいように、背景色をヘッダーに適用しています。

ラベルの配色のコントラスト比調整

現状のラベルのコントラスト比を調べると、Webアクセシビリティのことを考えるとコントラスト比が満たしていませんでした。今回はレベルAAを満たす配色にしました。

レベルAAを11pxの文字サイズのときに達成するためには、4.5以上のコントラスト比が必要になります。

配色を変更したことにより、黄、緑、灰のラベルは基準を満たしていませんでしたが満たすようになりました。以下、コントラスト比の比較表です。

管理画面のUI改善を計画しています | プロダクト改善 | ブログ | a-blog cms developerの記事からすこし配色を調整しています。これは、管理画面内の背景色がありのUIとを考慮したことによる調整です。数値としては黄色ラベルについては検討段階よりもコントラスト比が下がりましたが、背景色が白でも背景色が灰色でも識別しやすくなるよう色を選んでいます。

ラベルの配色変更に伴い、バッジの配色も変更しております。

新機能一覧

• CMS-4568 管理画面全体のスタイルを調整
• CMS-4563 メディア機能の大幅なアップデート
• CMS-4559 カスタムフィールドでもメディアを使用できるように改良
• CMS-4090 サブカテゴリー機能を追加
• CMS-4213 コンフィグセット機能の追加
• CMS-4181 見出し一覧表示組み込みJSを追加（document-outliner）
• CMS-4446 ログインユーザー、ユーザー権限のルールを追加
• CMS-4490 更新時に上書きされないユーザー定義php (config.user.php)を用意
• CMS-4334 タグなどエントリー編集画面で使うUIをON OFFできる機能を追加（コンフィグ > 編集設定 > エントリー項目設定）
• CMS-4458 管理メニューのカスタマイズ機能を追加（メニュー管理）
• CMS-4485 Media_Bannerモジュールを追加
• CMS-4561 日時選択用の組み込みJSを追加（js-datepicker2, js-timepicker）& 各所に適応
• CMS-4572 キャッシュルールを追加できるHookを追加（addCacheRule）

変更点一覧

• CMS-4315 承認ワークフローをカテゴリー別に設定できるように改良
• CMS-4560 インストールテーマの画像系フィールドをメディア機能での登録に変更
• CMS-4364 タグ選択のUIを改良
• CMS-4390 管理画面のメニュー項目に@sectionを追加
• CMS-4437 Ogpモジュールでブログ、カテゴリの階層表示をするオプションを追加
• CMS-4332 Ogpモジュールでエントリーコードが空の場合、タイトルに含めないオプションを用意
• CMS-4467 ファイルアイコンの新しいものに変更
• CMS-4496 エントリー編集画面に、Admin_InjectTemplateを追加
• CMS-4501 Entry_TagRelational モジュールで表示できる変数を増量
• CMS-4505 管理画面系のCSRFトークンは毎POSTリフレッシュをしないように変更
• CMS-4506 Content-Lengthをcmsで付加するように変更
• CMS-4532 ブログのエクスポート・インポートをメディア対応
• CMS-4558 エントリー作成時のデフォルトの公開日付を現在日時に変更
• CMS-4567 Ogpモジュールの画像をメディアに対応

修正点一覧

• CMS-4472 MariaDB利用時のパフォーマンスチューニング
• CMS-4512 エントリー系モジュールのパフォーマンスを向上
• CMS-4510 デフォルトテーマの必要ないraw校正オプションを削除
• CMS-4522 カスタムフィールドグループでの追加後でもselect2が動作するように修正
• CMS-4523 編集設定ページで同じid属性が振られている問題を修正
• CMS-4524 エントリーの編集でスマホのときの固定ボタン対応する（acms-admin-inline-block）
• CMS-4526 Select2の高さを他のインターフェースと同じ高さに合わせる
• CMS-4548 テンプレート書き出しのURLにグローバル変数を使えるように修正
• CMS-4550 iOSの日付入力欄でOSデフォルトのスタイルが当たっている問題を修正
• CMS-4551 スクロールテーブルのスタイル調整
• CMS-4555 RFC2068 の時刻フォーマットがロケールに影響されてしまう問題を修正
• CMS-4559 Safari クイックサーチの入力欄のスタイル調整
• CMS-4564 プレビューの共有がうまく動作しない場合がある問題を修正

一般的にグラフをサイトに貼り付けるのであれば、上記のようにエクセルで描いたグラフをキャプチャした画像を用意して画像ユニットにアップするかと思いますが、エクセルなどを使う事なくユニットに数値などを設定するだけでグラフが描けるようなユニットの作成を目指してみようと思います。

本日2018年08月28日にフィックスバージョンのVer. 2.8.31をリリースしました。下記の修正が行われております。

Ver. 2.8.31 修正箇所一覧

• CMS-4217 LiteEditorで入力モード切り替え時に内容が消えてしまう場合がある問題を修正
• CMS-4215 check-seo のテンプレートにfacebookデバッガーへのリンクを追加
• CMS-4216 カスタムフィールドメーカーでカスタムフィールドグループのソースコード出力の改善
• CMS-4220 クイックサーチを無効にするオプション（config.js: quickSearchFeature）及び、呼び出しコマンドの変更機能（config.js: quickSearchCommand）を用意

修正箇所詳細

以下、説明が必要な修正内容になります。

LiteEditorで入力モード切り替え時に内容が消えてしまう場合がある問題を修正

例えば、下のセレクトボックスより「ソース」から「マークダウン」などに入力モードを切り替えると、今までのLiteEditorだと入力した内容が消えてしまっていました。今回は入力モードを切り替えても入力状態が消えないように改良されています。

CMS-4215 check-seo のテンプレートにfacebookデバッガーへのリンクを追加

SEOの情報をチェックするためのテンプレートに「Facebookで確認」のリンクを追加しています。これにより書いた記事をFacebookにシェアした時にどのように表示されるか、Facebookデバッガーより確認しやすくなりました。

カスタムフィールドメーカーでカスタムフィールドグループのソースコード出力の改善

従来のカスタムフィールドメーカーから生成されたソースコードだと、カスタムフィールドグループの際に、下の画像のように項目が横に積まれてしまい入力欄が狭くなってしまう問題がありました。

そこで今回は縦向きレイアウトに対応しました。縦向きレイアウトだと、下記の画像のように先ほどと同じ項目数ですが、入力欄が狭くなりません。

クイックサーチを無効にするオプション（config.js: quickSearchFeature）及び、呼び出しコマンドの変更機能（config.js: quickSearchCommand）を用意

Ver.2.8より実装されたクイックサーチですが、制作の都合上「⌘K, Ctrl + k」でのクイックサーチ表示をしたくないケースもあります。そのため今回は以下のようにJavaScriptをかけば、クイックサーチを無効にしたり、コマンドの種類を変えたりすることができるように対応しました。

ACMS.Ready(function(){
  ACMS.Config.quickSearchFeature = false; // クイックサーチを無効に
  ACMS.Config.quickSearchCommand =  ['command + b', 'ctrl + b']; 
  //クイックサーチ起動コマンドを「command + b」もしくは「ctrl + b」に変更
});

以上、Ver. 2.8.31での修正内容になります。