サーバー環境によって、ダイレクト編集ONなどに利用しているCookie情報がうまく取得できない問題が発見されました

サーバー環境によって、ダイレクト編集ONなどに利用しているCookie情報がうまく取得できず、ダイレクト編集をONにできないという不具合が確認されました。

お手数ですが、以下ページよりパッチをダウンロードしてご対応ください。
パッチダウンロード

  • Ver. 2.8.0 以上を対象にしたパッチです。
  • Ver. 2.11.25 以上では対応されていますので、対応は不要です。

この度は、ご迷惑をおかけしてしまい大変申し訳ございませんでした。
今後ともa-blog cmsをよろしくお願いいたします。

Ver. 2.11.25からのテンプレートの仕様変更について

Ver. 2.11.25 で、テンプレート周りの仕様変更がありましたので、お知らせいたします。

概要

いくつかの設定(private/config.system.yaml)をデフォルトで有効にしてあります。なのでCMSのアップデートによる影響はございません。 Ver. 2.11.25 以上を新規インストールした場合、そのままだといままでと違う動作になります。

変更内容

private/cofig.system.yaml で以下項目が追加・変更されています。

forbid_tpl_inheritance_when_path_unresolved: on # on | off パス解決に失敗した時、テンプレートを継承しないようにする
forbid_tpl_url_context: on # on | off 読者以下のURLコンテキストのtplを許可しない。(例: https://example.com/news/tpl/custom.html)
allow_tpl_path: [] # forbid_tpl_inheritance_when_path_unresolved や forbid_tpl_url_context が on の場合、除外するパスを設定します。例: [news.html,hoge/custom.html] カンマ区切りで指定

forbid_tpl_url_context

デフォルトで、tplコンテキスト を無効に設定しました。理由として tplを指定すればクライアント側で、好きなテンプレートを指定することができてしまうため、 同一コンテンツの複数のページができてしまうためになります。

forbid_tpl_inheritance_when_path_unresolved

デフォルトで、パス解決失敗時のテンプレート継承を無効にしました。理由として forbid_tpl_url_context と同様、同一コンテンツの複数のページが表示できてしまうためになります。

allow_tpl_path

上記2つの設定の例外パスを設定できます。例えばpost includeしたい箇所などは、tplコンテキストを使いたい場合があるので、 そのような時は、ここで例がテンプレートのパスを記入します。

以上3つのオプションの設定を追加・変更いたしました。バージョンアップでは影響が出ないようになっていますので、Ver. 2.11.25 以上で新規インストールする場合はお気をつけください。

forbid_tpl_inheritance_when_path_unresolvedforbid_tpl_url_contextoff に設定すれば、いままでと同じ動作になりますが、できればここの設定はONのまま、allow_tpl_path で例外設定をするようにお願いいたします。

Ver. 2.11 が誕生!有償 CMS としての価値を高め、安心して使っていただくために。

CTO 伊藤(写真は前回のインタビューと同じなので差し替え予定)


2019年12月17日、a-blog cms の Ver. 2.11 がリリースされました。今回のアップデートのコンセプトとこだわった部分、また料金体系のリニューアルについての想いを、開発者の伊藤淳に聞きました。

今回のアップデートの目的と背景を教えてください。

前回の Ver 2.10 に引き続き、目立った新機能が登場したというよりは、ベースになっている機能をよりブラッシュアップさせることに重点を置きました。具体的には、パフォーマンス周り、セキュリティ周りの細かな仕様を今まで以上に向上させた形です。

パフォーマンス、セキュリティともに目には見えづらい進化ではありますが、使い心地と安心感のアップを目指しました。特にユーザーの方からご意見をいただいたわけではなく、私自身がエンジニアの視点から気になっていた課題を解決していきました。なんとか年内に発表できて良かったです。

パフォーマンス周りではどのような点が向上しましたか?

モジュールごとのキャッシュ機能が追加されたことで、これまでよりもページの読み込みが速くなりました。基本的に a-blog cms はページ単位でキャッシュを行う仕組みのため、閲覧者が新たな URL に飛ぶたびにすべてのモジュールが動作し、読み込みが必要となります。これまでモジュールごとのキャッシュ機能の設定にはエンジニア的な知識が必要だったものを、Ver. 2.11 からノンプログラムで簡単に設定できるようになりました。

パフォーマンスは本来、Web サイトを制作・運用するうえでとても重要なものにも関わらず、コンテンツの内容と比較するとつい後回しにされがちです。基本的に WIFI 環境のある社内で作業を行う制作者にとって、気が回りづらい部分でもあります。しかし、ほんの数秒でも読み込みに時間がかかるだけで、閲覧者がサイトを離脱するきっかけになってしまう。これは私自身、a-blog cms でつくったさまざまな Web サイトをスマホから閲覧していて気づいた課題でした。特に格安 SIM のスマホでは、料金が安いぶん通信速度が制限され、昼休みなど Web の閲覧が集中する時間帯には読み込みの遅さを実感したんです。

今回のアップデートではこうした閲覧者の目線も意識し、よりサクサクと動作することを目指しました。どんなに優れたコンテンツでも、見てもらえなければ意味がありませんからね。

続いて、セキュリティ周りの進化について教えてください。

まず大きな変更点としてお伝えしないといけないことがあります。Ver. 2.11 より校正オプションの仕様が変更になりました。従来までは校正オプションを1つ以上設定する場合、自身でエスケープする必要がありましたが、Ver. 2.11 からは強制的にエスケープしてから校正オプションが動作するようになりました。どうしてもヒューマンエラーは起きてしまうものです。互換性が犠牲になってしまいましたが、セキュリティを考えこのようになりました。

そのほか、一定時間におけるログイン試行回数の制限を行う機能や、2段階認証機能も新たに追加。より強固なセキュリティを備え、今まで以上に安心して使っていただけるようになったかと思います。パフォーマンス面もセキュリティ面も絶対に必要だった機能ではありませんが、有償 CMS としての価値を高めるために「より速く安全に使えること」を目標にしました。

今回から、ライセンスの購入方式も新しくなりましたね。

初の試みとして、これまで通りの買い切りに加えて、月額支払いのサブスクリプション方式が追加されました。今なら特別価格として月々 1,500円〜でスタートできますし、支払い形式の選択肢が増えて、手軽に始めやすくなりました。しかもサブスクリプション形式なら、プランを月ごとに変更することも可能。たとえば Web サイト公開前にはユーザー数無制限で利用できる「スタートアップ+」プランにしておき、サイト公開後、簡易的な更新・保守のみで OK になった時点で「スタートアップ」に切り替えるといった、柔軟な利用の仕方もできますよ。より複雑な承認機能やフルパブリッシュ機能が必要になる期間のみ「プロフェッショナル」を選択するのもおすすめ。買い切りだと 50万円のプロフェッショナルライセンスが、月額 1万5,000円と試しやすくなったこともポイントです。



有償アップデートについて、開発者としての想いを教えてください。

同じく料金体系の話ですが、今回のバージョンからマイナーアップデートが有償になります。料金は買い切りであれば年間 1万円、サブスクリプション形式であれば月額費用に含まれる形です。その代わりと言っては何ですが、Ver. 2.8 以降のものはバージョンアップしなくても済むように、リリース日から数えてバグフィックス 2年間、セキュリティフィックス 5年間のメンテナンス期間を保証。

これまでは弊社としてもバージョンアップを推奨していて、旧バージョンに対するメンテナンス期間はあいまいだったのですが、今回から明確にお約束させていただきました。正直なところ、これまで無償だったバージョンアップが有償になることに、私自身、抵抗がなかったわけではありません。だからこそ、ただの値上げではなく、ユーザーの方にきちんと納得していただける改定を目指しました。もちろん今後は、有償でもアップデートしたいと思っていただけるように、ますます最新バージョンの使いやすさと機能に磨きをかけていきます。

そのほか、アピールしたい新機能はありますか。

フロントビルド環境が入った開発テーマが追加されたのも、Ver. 2.11 の特徴の一つです。a-blog cms はノンプログラムで無理なく利用できることが売りの一つではありますが、プログラミングができるとさらに便利に使える CMS でもあります。

プログラミングは進化の流れが早く「何から学んで良いか分からない」という声も多いのですが、そうした方々のために最初の環境として用意したものが今回の開発テーマです。やや上級者向けではありますが、プログラミングに挑戦するきっかけづくりになれれば幸いです。a-blog cms を深く使いこなしていらっしゃるユーザーの方々には、さらなるレベルアップの一歩として、a-blog cms と一緒に成長していっていただけたらという想いを込めました。

最後に、ユーザーの方々にメッセージをお願いします。

おかげさまで、a-blog cms は 2019年6月に 10周年を迎えました。改めて Ver. 2.11 の開発背景を振り返ると、ユーザーの方に”安心”を届けることがキーワードだったかと思います。有償 CMS として安全に使っていただけることを目指しましたので、ぜひお試しください。また今回、パフォーマンス周り、セキュリティ周りを進化させましたが、まだまだ十分とは言えません。今後も引き続き、目に見えない機能のブラッシュアップに加え、ますます見やすく使いやすい UI にも磨きをかけていけたらと思います。有償 CMS としての価値をさらに高め、他社の CMS との差別化を図っていきたいですね。

マップ比較(Google Map・OpenStreetMap・MapBox)


a-blog cms では OpenStreetMap と Google Map が標準で実装されています。それぞれのサービスの特徴について調べましたのでサイト制作時のお役に立てればと思います。(2020/02時点)

簡単な比較表

最近話題に上がっている MapBox も合わせて比較してみました。



OpenStreetMap Google Map MapBox
a-blog cms 標準実装か 標準実装 標準実装 標準実装でない
料金 無料 月28,571PVまで無料 月50,000リクエストまで無料
各サービスサイトでの設定 なし 必須 必須
クレジットカードの登録 なし 必須 ひとまず載せるだけなら必須でない
認知度 あまり知られていない 高い あまり知られていない

※ Google Map の料金計算は月間10万ロード以下の場合で Maps JavaScript API を使用していると仮定した値段です。使用するAPIや条件で料金は変わってきます。
Maps JavaScript API Usage and Billing | Google Developers

※ MapBox の料金計算は Maps Loads for Web を使用していると仮定した値段です。使用する機能や条件で料金は変わってきます。
Mapbox 料金

地図の表示比較

3つの地図を並べてみました。Google Map と MapBox は特殊なオプションをつけていないものになります。

OpenStreetMap



メリット

  • 無料

デメリット

  • 認知度が低い
  • お店情報が少ない

a-blog cms では標準が OpenStreetMap であるため見たことがある人も多いと思います。
OpenStreetMap は、オープンソースで作られている地図サービスになります。誰でも自由に参加して、誰でも自由に地図を編集して、誰でも自由に地図を利用することが出来ます。そのためメンテナンスが盛んな場所もあれば古いままの場所も出てきてしまいます。名古屋周辺で確認したところ古い情報のままのお店などを確認することができました。

Google Map



メリット

  • 認知度が高い
  • お店情報が豊富
  • ストリートビューを見れる

デメリット

  • クレジットカード登録が必須
  • 値段がやや高い

Google Map は認知度が高く、日本でも広く使われています。また、お店情報も豊富です。
他の地図には無い機能として「ストリートビュー」も強みだと思います。 a-blog cms では Google Map ユニットに標準でストリートビュー切り替え機能を搭載していますので簡単に導入することが可能です。 しかし、クレジットカード登録をしないと使用できないため、サイト制作時に試しに Google Map を載せたいという時も一手間かかります。 MapBox と比べると値段がやや高いため、Webサイトにあまりコストをかけたく無い場合は他の地図を検討する必要があります。

MapBox



メリット

  • 公式ページのMap導入方法解説ページが優しい
  • 地図スタイルのカスタマイズが細かくできる

デメリット

  • a-blog cms標準機能でない
  • 認知度が(まだ)低い
  • お店情報が(まだ)少ない

a-blog cms ではまだ標準機能としての搭載には至っておりません。静的なテンプレートに地図を貼り付けるだけであれば数十行のカスタマイズで可能ですが、カスタムフィールドやユニットに組み込むにはさらにひと手間かかります。 また、MapBox が日本向けにサービス提供したのが2019年のためまだ認知度が低く、 Google Map ほどお店情報も豊富ではありません。しかし、 Mapbox の地図データはユーザの携帯電話から送信されるGPS情報を元に作成されるようなので今後使用ユーザーが増えるほど地図の精度もあがってくのではないでしょうか。

「Mapboxの地図データはユーザの携帯電話から送信されるGPS情報を元に作成されています。ユーザがMapboxの地図を起動すると、緯度、経度、時刻などの情報がプライバシーに配慮したプロセスを経て、自動でMapboxに送信されます。
こうして集まったデータによりMapboxの地図データはリアルタイムでアップデートされているのです。ユーザデータを利用することで、顧客企業に精密な地図データを低コストで導入いただけるようになりました」(デイブ・コール氏)

引用:https://www.softbank.jp/biz/future_stride/entry/technology/20200131/

a-blog cms の標準機能ではないですが、ただ地図を載せるだけであれば簡単に導入できます。上記 MapBox 地図のソースコードは20行もありません。

<div class="column-map-centter js_notStyle acms-col-sm-12">
  <div id='map' style='width: 775px; height: 516px;'></div>
</div>
<script>
  mapboxgl.accessToken = 'アクセストークンキー';
  var map = new mapboxgl.Map({
    container: 'map',
    style: 'mapbox://styles/mapbox/streets-v11',
    center: [136.88741, 35.17291],
    zoom: 16
  });
  var marker = new mapboxgl.Marker()
  .setLngLat([136.88741, 35.17291])
  .addTo(map);
</script>

導入方法については公式サイトで優しく案内してくれるので気になる方は MapBox のアカウントを作成してみてください。

MapBox Japan
https://www.mapbox.jp/

マップスタイルのカスタマイズはブラウザ上で行えます。画面上で確認をしながらフォントの設定やマップの配色などの細かい調整が可能です。

Json_2Tpl の テンプレートの書き方

a-blog cms ではビルドインモジュール(Entry_BodyやCategory_List...)と呼ばれる最初から入っているモジュールを使って動的にコンテンツを出力していきます。一般的なサイトを作るうえでは、ビルドインモジュールがあればそこまで困らないのですが、a-blog cmsで管理していないデータを出力したり、特殊な絞り込みをしたい場合は、PHPを書いて専用モジュールを開発する必要がありました。

そこで、Ver. 2.7.0 から導入された新しいビルドインモジュール Json_2Tpl を使う事でPHPが得意でない人もJSONさえ用意できれば、PHPを1行も書かずに思い通りのモジュールを作る事ができるようになります。ここでは、JSONがa-blog cmsのテンプレートエンジンとどのような関係があるか見てきます。

JSON

詳しく見ていく前にJSONファイルについて少し学んでおきましょう。

JSONは 名前/値のペア の集まりで構成されています。: の前にあるのが名前です。また、{ } で囲まれている部分をオブジェクトと呼びます。様々なデータを持っているセットと考えていただければ大丈夫です。次に [ ] で囲まれている部分が配列になります。データを複数持つことができます。これらは互いに入れ子にする事ができるようになっています。

説明で利用するJSONサンプル

{
  "items": [{
      "id": "001",
      "name": "商品A",
      "color": "red",
      "size": ["S", "M", "L"],
      "price": {
        "tax_included": 108,
        "without_tax": 100
      }
  },
  ...
}

配列 -> ループ

配列の場合は、ループブロックで表現されます。ループブロックとは <!-- BEGIN 名前:loop ---> という形のブロックになります。

ループブロックの中では、 glueブロック <!-- 名前:glue ---> も利用できるようになります。glueブロックは ループ回数 - 1回 出力されるブロックになります。カンマで区切りたい場合などに利用すると便利です。

特殊な変数として {名前.i} という変数も利用できます。これは現在の配列番号を出力できます。

また配列の中身が、値の場合は(ここでゆうsize)配列の名前(ラベル)がそのまま変数名としても使えます。

<!-- BEGIN items:loop -->
{items.i}
<!-- BEGIN items:glue -->, <!-- END items:glue -->
...
<!-- END items:loop -->

<!-- BEGIN items:loop -->
<!-- BEGIN size:loop -->
<!-- BEGIN size:glue -->, <!-- END size:loop -->
{size.i} : {size}
<!-- END size:loop -->
<!-- END items:loop -->

オブジェクト -> ブロック

名前(ラベル)がついたオブジェクト(例: "price": { ... })の場合は、ブロックで表現できます。ブロックとは <!-- BEGIN 名前 --> の形のブロックです。

<!-- BEGIN price -->
...
<!-- END price -->

値 -> 変数

名前(ラベル)のあとが値の場合、変数として出力できます。変数は {名前} で表現されます。 もちろんこの変数には校正オプションも利用できます。

<!-- BEGIN items:loop -->
  {id}, {name}, {color}
 <!-- BEGIN price -->
  {tax_included}[number_format]
  <!-- END price -->
<!-- END items:loop -->
など

まとめ

  • 配列 -> ループブロック(例 <!-- BEGIN items:loop -->)
  • 名前(ラベル)がついたオブジェクト -> ブロック(例: <!-- BEGIN price -->)
  • 名前(ラベル)のあとが配列でもオブジェクトでもない値 -> 変数(例: {color})