a-blog cms Ver. 2.8.0 の 新機能 & 変更点

Ver. 2.8.0 管理画面

Ver. 2.8.0 管理画面


いつもお世話になっております。開発の伊藤です。

今回は Ver. 2.8.0 リリースまでもう少し!という事で、Ver. 2.8.0 の新機能 & 変更点についてまとめてみたいと思います。 最後に変更点一覧を乗せてあります。

対応PHPを変更

Ver. 2.8 より下記のパッケージになり、php7.2まで対応できるようになります。

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

CMS-1877 管理画面からのシステムアップデート機能を追加

Ver. 2.7 で導入したセマンティックバージョニングや様々な自動化により、不具合修正などのパッチバージョンをスムーズにリリース出来るようになりました。ただそれに伴いバージョンアップが大変になりました。そこで管理画面からのアップデートを使うことにより、楽にシステム更新が出来るようになります。

オプション

管理画面 > コンフィグ > 機能設定 の 「オンラインアップデート」にオプションがあります。

  • パッチバージョンのみ(デフォルト)
  • マイナーバージョンも含める
  • 更新メニューを非表示

「デフォルトのパッチバージョンのみ」は不具合修正のバージョンのみアップデートを行います。仕様変更などは含まれませんので、安心してアップデートできます。「マイナーバージョンも含める」は、2.8 から 2.9 へのアップデートのようにマイナーバージョンアップの更新も出来るようになります。「更新メニューを非表示」は管理メニューに更新メニューを出さないようにします。お客様に引き渡す時に、あまり触ってほしくない場合などに便利です。

CMS-3916 クイックサーチ機能を追加(Ctrl+k, ⌘K)

ログインしていると以下のようなポップアップが現れ、キーワード検索で色々な情報にアクセス出来るようになりました。


クリックサーチ

クリックサーチ


アクセス出来る情報

  • ブログ
  • エントリー
  • カテゴリー
  • モジュールID
  • 管理画面メニュー
  • ショットーカット(登録されているもの)
  • モジュール変数表
  • モジュールスニペット

ショートカットキー

  • Windows: Ctrl + k
  • MacOS: ⌘K

モード

フリーキーワードで検索はそのまま、キーワードを入力すればいいですが、そのほかに2つのモードが用意されています。

  • 変数表検索モード: キーワードの最初に :(コロン) を入力することにより、変数表を検索できるようになります。
  • スニペット検索モード キーワードの最初に ;(セミコロン) を入力することにより、スニペットを検索できるようになります。

CMS-3795 Lite Editorを導入

テキストユニットの標準に導入されるエディターが「Lite Editor」になりました。下のように以前は「リンク挿入」などをクリックすると直接HTMLが挿入されていましたが、新しいエディターでは実際にどのように表示されるか視覚的にわかりやすくなりました。


以前のテキストユニット


新しいテキストユニット


CMS-3875 引数対応の@include 構文を追加

インクルード文を新しい書き方で書くことができるようになりました。

以前の書き方

<!-- include file="/path/to/file" -->

新しい書き方

@include("/path/to/file")

もちろん Ver. 2.8 でも以前の書き方のインクルードは動くようになっていますので、バージョンアップしても大丈夫です。

新しいインクルード文の機能

以前のインクルードはただファイルを読み込んでくるだけでしたが、新しいインクルード文には、変数を読み込み先テンプレートに渡せる機能が追加されています。

読み込み元

@include("/path/to/file", {"key": "value", "key2": "value2"})

読み込み先

<p>{{key}}</p>
<p>{{key2}}</p>

変数の渡し方は、@include()の第2引数に、JSON形式で渡します。変数の使い方は、通常の変数と違い2重の中括弧で囲むことで表示できるようになります。

CMS-3806 テンプレートの継承機能を追加

テンプレートを継承できる機能が追加されました。今までは、テンプレートをインクルードする事でテンプレートファイルを分割していましたが、この継承機能と組み合わせる事で、テーマをわかりやすく、シンプルに管理しやすくできます。

使用例

@section(header)  
  <header>...省略</header>
@endsection  

@section(main)  
   <h2>継承元のコンテンツ</h2>  
@endsection

@section 要素

ポイントは @section(セクション名)@endsection で 囲んだブロックが継承できる範囲になります。 継承しそうなところを @section で囲みます。

@extend要素

@extend要素を使うことで、テンプレートを継承することが出来ます。
上記のテンプレートを継承してみます。

@extend(/layout/base.html)

@section(main)
<h2>継承したメインのコンテンツ</h2>
@endsection

表示されるHTML

<header>...省略</header>

<h2>継承したメインのコンテンツ</h2>

どうでしょうか? 継承したテンプレートでは、メインのコンテンツしか記述していないのに、最終的に表示されるHTMLには継承元の情報も出力され、書き換えたいところだけ書き換えることが出来ました。

継承は、何回でも検証できますので、継承したテンプレートをさらに別テンプレートで継承するといった使い方もできます。

親テンプレートの利用

@section を使う事で、親テンプレートの要素を書き換える事ができるようになりましたが、全て置き換えてしまうので不便な場合があります。例えばJavaScriptの読み込みなどです。

全体で利用するJavaScriptは親テンプレートで読み込んでおきますが、継承したテンプレートのみでしか使わないJavaScriptを読み込みたい場合などがあります。

親テンプレート

@section(head-js)
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/core.js" charset="UTF-8"></script>
@endsection

子テンプレート

@section(head-js)
@parent <!-- ここに親の@section(head-js)内が挿入される -->
<script src="/js/example.js" charset="UTF-8"></script>
@endsection

@parent 要素

上記のように @parent要素を @section内で使うことにより、親テンプレートを参照できるようになります。更に親のテンプレートを参照する場合は、@@parent のように @の数を増やすことで可能です。

テンプレートの継承機能を使ってテーマを作ると、テンプレートを複数のレイヤーに分けることができ、変更箇所のみテンプレートに書けばいいので、シンプルで分かりやすく、共通箇所も共有できるので、保守しやすテンプレートになると思います。

CMS-3775 モジュールのエスケープ機能 & モジュールに外部コンテキスト挿入機能を追加

モジュールの外部コンテキスト挿入機能

モジュールの呼び出しに新しい機能が追加されました。今までは、モジュールで表示する情報を制御するには、モジュールIDを作り管理画面で絞り込む情報を入力していたのですが、テンプレート側でも指定可能になりました。

<!-- BEGIN_MODULE Entry_List ctx="bid/1/cid/2" -->
...省略
<!-- END_MODULE Entry_List -->

上記のように とすることで、モジュールのURLコンテキストを指定できます。 指定の仕方はURLコンテキストと同じで、 bid/1/cid/2/eid/3 のように指定できます。

有効なコンテキスト

  • bid
  • cid
  • eid
  • uid
  • page
  • keyword
  • tag
  • field
  • order
  • start
  • end

モジュールID設定との優先度

もちろん id="" をつけてモジュールID化したものに設定することも可能です。ただモジュールIDでもURLコンテキストの設定が可能なのでバッティングしてしまいます。なので設定の優先度が存在しますのでご注意ください。

基本的にはモジュールIDの設定が優先されると考えていただければ大丈夫です。

コンテキストの優先度

  1. URLコンテキストのチェックが入っており、該当のコンテキストが存在するページである場合のURLコンテキスト
  2. モジュールIDの引数に設定した固定値
  3. テンプレートで設定したctx

以上より、モジュールIDが設定されている場合は、チェックが入っていない & 固定値がないコンテキストと、チェックが入っていても、そのページのURLコンテキストがない場合に、テンプレートのコンテキストが使用されます。

モジュールのエスケープ機能

以前までは、モジュール内のブロック(など)や 変数({url}など)はバックスラッシュをつけることにより、エスケープが可能でした。

<!-- BEGIN\ entry:loop -->
\{url\}
<!-- END\ entry:loop -->

これに加え、Ver. 2.8 より モジュール自体のエスケープも可能になりました。モジュールが入れ子の場合は通常内側から実行されますのが、モジュールのエスケープを使うことにより、外側のモジュールから実行させることができるようになります。

このモジュールのエスケープと先ほどのテンプレートからのコンテキスト指定を組み合わせることで、今まで出来なかったことができるようになります。例えば、Blog_ChildList と Entry_List を組み合わせて、 ブログ毎にエントリー一覧を出力するようなことが出来ます。サイトマップなども作れると思います。

<!-- BEGIN_MODULE Blog_ChildList -->
<ul class="acms-list-group">
	<!-- BEGIN blog:loop -->
	<li>
		<a href="{url}" class="acms-list-group-item">ブログ: {name}</a>
		<!-- BEGIN_MODULE\ Entry_List ctx="bid/{id}" -->
		<div class="acms-margin-bottom-medium">
			<ul class="acms-list-group">
				<!-- BEGIN\ entry:loop -->
				<li><a href="\{url\}" class="acms-list-group-item">\{title\}</a></li>
				<!-- END\ entry:loop -->
			</ul>
		</div>
		<!-- END_MODULE\ Entry_List -->
	</li>
	<!-- END blog:loop -->
</ul>
<!-- END_MODULE Blog_ChildList -->

CMS-3801 画像のロスレス圧縮対応

画像のロスレス圧縮に対応できるようになりました。画像サイズが小さくなり、Google の PageSpeed Insights などの点数も上がりパフォーマンスがよくなります。

必要なソフト

ただ、サーバーに下記の画像圧縮ライブラリが必要になります。入っているソフトによって対応できるフォーマットが増減します。

  • pngquant
  • optipng
  • pngcrush
  • pngout
  • advpng,
  • pegtran
  • jpegoptim
  • gifsicle

確認方法

CMSでロスレス圧縮が可能かどうかは、管理画面 > チェックリスト の 「ロスレス圧縮対応フォーマット 」で確認することができます。

CMS-3858 デフォルトのコンフィグのみのエクスポート機能を追加

Ver. 2.7 ではコンフィグのエクスポートはルール、モジュール、コンフィグの全てをブログ単位で一括エクスポート・インポートでしたが、ブログ作成時のデフォルト値を作るのに、これでは作成できませんでした。

そこで、デフォルトのコンフィグのみをエクスポート・インポート出来るようにしました。ここで書き出したyamlを private/config.system.yaml に記述すると、新規ブログ作成時に、エクスポートした設定が新しいブログの初期状態として反映されるようになります。

CMS-3943 コンフィグの部分インポート機能を追加

部分的なコンフィグのエクスポート・インポートが可能になりました。例えば、コンフィグの編集設定は設定項目も多く、インポートで対応したいが、他のテーマなどの設定も変わってしまいます。そこで、この部分インポートを使うと、他のコンフィグに影響なく、部分的にインポート出来るので便利です。

エクスポート方法

エクスポートしたい、各コンフィグのページに移動します。例えば、編集設定ページなど。移動すると右上にエクスポートボタンがあるので、ここをクリックするとyamlデータとしてエクスポートされます。


コンフィグの部分エクスポート

コンフィグの部分エクスポート


また、ルール適応状態のコンフィグもエクスポート・インポートできます。

インポート方法

コンフィグの部分インポートは、エクスポートと同じく、コンフィグの各ページの右上の「インポート」ボタンから移動するか、管理ページ > コンフィグ > 「コンフィグの部分インポート」から移動できます。

ここでインポートすることにより、yamlにはない情報は削除せずに、yamlにある情報だけ上書きして部分的に書き換えます。


コンフィグの部分インポート

コンフィグの部分インポート


CMS-3872 OGPモジュールの新規追加

今までは、既存モジュールを使い、複雑なテンプレート(大量のIF分岐)で OGPのタイトルや画像の出力に対応していましたが、使いづらく、また多くのモジュールを組み合わせて出力していましたので、パフォーマンスが悪かったです。

そこで、Ver. 2.8 でOGPモジュールを追加し、一つのモジュールでシンプルなテンプレートでOGPの情報を出力できるようにしました。モジュール設定で、適応するフィールド名が設定できたり、タイトルの順番やフォーマットが指定できるようになっています。


Ogpモジュール設定

Ogpモジュール設定


CMS-3842 パスワードポリシーを導入 & 記号を使えるように改修

CMSのパスワードに記号が使えなかったのを使えるようにしました。また、機能設定にパスワードポリシー設定を設け、パスワードポリシー条件に満たないパスワードは設定できないようにしました。

設定できる条件

  • 最小文字数
  • 最大文字数
  • 大文字を1つ以上含める
  • 小文字を1つ以上含める
  • 数値を1つ以上含める
  • 記号を1つ以上含める
  • 大文字、小文字、数値、記号のうち、3種類を含む
  • 禁止ワード

パスワードポリシー設定

パスワードポリシー設定


CMS-3907 ユーザーパスワードの強度確認機能を追加

ユーザーのパスワード設定画面で、パスワード強度を視覚的に分かりやすくする機能を追加しました。パスワードが短かったり、使われている文字の種類が少なかったり、推測されやすいパスワード(P@ssW0rdなど)を危険と判断して教えてくれます。


危険なパスワード

危険なパスワード


不安なパスワード

不安なパスワード


注意が必要なパスワード

注意が必要なパスワード


妥当なパスワード

妥当なパスワード


安全なパスワード

安全なパスワード


CMS-3446 [プロ版機能] 静的書き出し機能を追加

以前まではテンプレートを指定した部分的な静的(HTML)書き出しはあったのですが、 サイト全体を書き出すことは出来ませんでした。

しかしセキュリティやパフォーマンスを気にされる方や、静的HTMLでしか運用されないお客様などから 度々要望に上がっており、今回のVer. 2.8からプロフェッショナル版以上になりますが対応ができるようになりました。


静的書き出し

静的書き出し


基本仕様

  • ブログ単位による書き出し
  • バッググラウンドでの書き出し(並列処理)
  • パスの書き換え(テンプレート、CSSにあるパスとドメインを設定に沿って書き換えます)

書き出し範囲

  • ブログトップ
  • カテゴリートップ
  • カテゴリー一覧
  • エントリー詳細
  • カテゴリー一覧の2ページ以降
  • カテゴリーのアーカイブ(年月)一覧

変更されるURL

ページのURLが変更されます。

  • CMSで表示 -> /page/2/
  • 静的表示 -> /page2.html

ブログ単位で書き出せるので、あまり変更の無いブログは静的書き出しを行うのもいいと思います。


機能追加一覧

  • CMS-1877 管理画面からのシステムアップデート機能を追加
  • CMS-3693 管理画面からデータベースのアップデートができる仕組みを導入
  • CMS-3875 引数対応の@include 構文を追加
  • CMS-3806 テンプレートの継承機能を追加
  • CMS-3775 モジュールのエスケープ機能 & モジュールに外部コンテキスト挿入機能を追加
  • CMS-3916 クイックサーチ機能を追加(Ctrl+k, ⌘K)
  • CMS-3801 画像のロスレス圧縮対応(pngquant, optipng, pngcrush, pngout, advpng, jpegtran, jpegoptim, gifsicle)
  • CMS-3807 SmartPhotoを導入
  • CMS-3795 Lite Editorを導入
  • CMS-3858 デフォルトのコンフィグのみのエクスポート機能を追加
  • CMS-3872 OGPモジュールの新規追加
  • CMS-3842 パスワードポリシーを導入 & 記号を使えるように改修
  • CMS-3943 コンフィグの部分インポート機能を追加
  • CMS-3609 Google reCAPTCHA 拡張アプリを追加
  • CMS-3907 ユーザーパスワードの強度確認機能を追加

変更点一覧

  • php5.3.3 〜 php7.2.x 対応
  • 管理画面の刷新
  • 各テーマを2018仕様に変更
  • CMS-3668 組み込みJSのバンドル整備
  • CMS-3715 DBのException発行でエラーが出ていた問題を修正
  • CMS-3803 ナビゲーションモジュールのUIを刷新
  • CMS-3815 SMTP設定のオプションを増強
  • CMS-3821 管理画面のiPhone X 対応
  • CMS-3853 JSファイル読み込み時のイベントを追加
  • CMS-3850 ファイルアップロード時に同名ファイルがあった場合の対応を追加
  • CMS-3856 バージョンアップ時にconfig.system.yamlのキャッシュクリアを実行
  • CMS-3846 エントリーのソート順に作成日、更新日を追加
  • CMS-3860 バックアップファイルがない場合、リストアボタンを押せないように修正
  • CMS-3836 POSTデータが全て送信されたかチェックするように改良
  • CMS-3840 メディアで許可拡張子に画像拡張子がある時に画像がファイルとして扱われる問題を修正
  • CMS-3847 OpenGraphをcomposerから読むように変更
  • CMS-3841 メールのバックグラウンド送信するオプションを用意(send_email_asynchronous)
  • CMS-3866 画像ユニットでaタグ内にcaptionがある場合リンクがおかしくなる問題を修正
  • CMS-3787 非公開などの記事をログイン中でも見せないオプションを用意(subscriber_view_mode)
  • CMS-3867 Entry_Bodyの続きをよむ場所を強制するオプションを追加(Entry_Body内コンフィグ)
  • CMS-3869 ドロップエリア以外をドロップできないように修正
  • CMS-3870 htaccessのCMS管理以外のディレクトリ設定記述を調整
  • CMS-3776 読者ユーザーの場合は、同時ログインを有効に変更
  • CMS-3370 ゴミ箱で削除した順でソートできるように改良
  • CMS-3873 Entry_BodyのadminEntryTitleが表示されない問題を修正
  • CMS-3879 DEBUG_MODEのスタック表示をフルで表示するように修正
  • CMS-3864 Bootstrap2018テーマのBootstrapのバージョンをアップ
  • CMS-3878 Safariでポップアップが重い問題を解決
  • CMS-3882 バナーモジュールの初期ステータスを公開に変更
  • CMS-3887 カスタムフィールドメーカーを新しいものに刷新
  • CMS-3890 LiteEditorをカスタムフィールドで使えるように改良
  • CMS-3900 基本情報 -> 基本設定にカスタム情報をカスタム設定に変更
  • CMS-3902 themesとprivateのhtaccessで403から404を返すように修正
  • CMS-3817 カスタムフィールドソートの対象をモジュールで指定できるように改良(サマリー系モジュール)
  • CMS-3893 セレクトボックスのUI改善
  • CMS-3892 zIndex function を使った 全体的なz-indexの見直し
  • CMS-3906 カスタムフィールドメーカーでカスタムユニットに対してチェックボックスのソースを生成できるようにする
  • CMS-3901 エントリ一覧でカテゴリーの親子関係で絞り込みを制御できるように変更
  • CMS-3921 テキストユニット追加時のfocus処理及びVoice Over読み上げ
  • CMS-3922 画像ユニットのファイル選択ボタンのfocus時にスタイルを付与
  • CMS-3910 違うBIDへのブログインポートでカスタムユニットの画像がリンク切れになる問題を修正
  • CMS-3931 Unit_Listでフィールドで絞り込めるように修正
  • CMS-3930 モジュールユニットで選択なしの場合にメッセージを追加
  • CMS-3929 ツールチップのリファクタリング
  • CMS-3926 保存時のsplashが余分な場所で表示されてしまう問題を修正
  • CMS-3941 WordPressインポートで不正文字があるとエラーが出る問題を修正
  • CMS-3945 カスタムユニットで複数のフィールドグループが使えるように修正

a-blog cms Ver. 2.9.0 リリース!

Ver. 2.9.0 リリース

Ver. 2.9.0 リリース


いつもお世話になっております。開発の伊藤です。

Ver. 2.9.0 が 2018/10/09 にリリースされました!そこで、新しく追加された機能や変更点などを紹介したいと思います。

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

Ver. 2.8 からのバージョンアップ

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

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

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

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

MySQL 8.0に対応

MySQL 8.0 に対応しました。MySQL 8.0 は 5系からのメジャーバージョンアップで、パフォーマンスもよくなっていますので、是非お使いください。

OpenStreetMapに対応

Ver. 2.8 までは地図を表示する場合、Google Maps か Yahoo!地図に限られていたのですが、両方とも API Key が必要になります。また Google Mapsについては制限が厳しくなり クレジットカード を登録しないと表示できない場合も出てきました。

そこで、Ver. 2.9 ではオープンソースの OpenStreetMapを標準で使えるように改善しました。ユニットはもちろんカスタムフィールドなど、今まで地図を表示していた機能全てでご利用いただけます。


OpenStreetMapによる地図ユニット

OpenStreetMapによる地図ユニット


PC, スマホ, タブレットのプレビュー機能を追加

ログインしたまま、表示側の確認ができる「プレビュー機能」が追加されました。 プレビューは、スマホやタブレットなどの画面サイズを簡単に切り替えることができ、また User Agent のシミュレートも行いますので、「ルール」による設定も反映されるので確認に便利です。

Webに慣れている方は開発者ツールなどでも確認できますが、あまりWebに詳しくない方でも簡単に各デバイスの見え方を確認することができるようになります。


プレビュー機能

プレビュー機能


アクションボックスにあるプレビューボタンを押すことで、どのページでもプレビュー出来ることができます。管理ページ側のエントリーの編集ページでもプレビューボタンがあるので、表側ページに移動しなくてもすぐ確認することができます。


アクションボックスのプレビューボタン

アクションボックスのプレビューボタン


管理画面側編集画面のプレビューボタン管理画面側編集画面のプレビューボタン

管理画面側編集画面のプレビューボタン


プレビューの共有機能を追加(プロフェッショナルライセンス以上)

プロフェッショナル以上のライセンスでは、プレビュー機能を適用したページの状態を共有リンクを取得できるようになります。共有リンクを取得すれば、 まだ公開されていないページ(例:非公開のページなど)をログインしていない人でも閲覧できるようになります。

プレビューページで共有ボタンを押して、「共有URL」を取得することで、共有できるようになります。共有URLはランダムな文字列がついており簡単にわからないようになっています。取得した共有リンクには共有期限があり、「管理ページ > コンフィグ > 機能設定 の プレビュー共有の有効期限」より共有期限を設定することが可能です。

この機能より、公開前の記事やページを承認機能を使わずに手軽に好きな連絡手段で関係者に確認することができるようになります。


共有ボタン

共有ボタン

共有URLの生成

共有URLの生成


静的書き出しでエントリーの差分書き出しに対応(プロ版以上)

Ver. 2.8 よりブログ毎の静的書き出し機能はあったのですが、今回のバージョンでは、エントリーの更新日時をみての差分書き出しに対応しました。いくつか制限はありますが日々の運用ではエントリーの更新が多いという方には喜ばれると思います。

また、フル書き出しとは別のディレクトリに書き出すこともできますので、差分書き出しを行い、手動で公開領域にアップロードといった運用もできるようになると思います。


静的書き出し画面

静的書き出し画面


いくつかの注意点

  • 指定した日時からのエントリー差分データを書き出します
  • 変更されたエントリーが所属するトップ、カテゴリーなどの一覧ページも一緒に書き出されます
  • 画像などのファイル書き出しは、差分のエントリーのものだけになります

ブログ、カテゴリー、ユーザーに位置情報を追加

Ver. 2.7 でエントリーの位置情報に対応しました。Ver. 2.9ではエントリーに追加して以下3つのタイプにも対応しました。

  • ブログ
  • ユーザー
  • カテゴリー

これにより、サイトの設計がしやすくなったと思います。例えば、複数店舗をもつサイトで1店舗を1ブログと設計して、近くの店舗を出すといったことが出来るようになりました。

機能の有効化

管理ページ > コンフィグ > 機能設定の「位置情報」から機能を有効にできます。エントリーについても 管理ページ > コンフィグ > 機能設定からこの場所に移動してますのでご注意ください。

モジュール

以下のモジュールで位置情報を扱うことができるようになります。

位置情報の表示

  • Blog_Field
  • User_Field
  • Category_Field
  • Entry_Field
  • Entry_Body
  • Entry_Summary

位置情報でソート

  • Blog_GeoList
  • User_GeoList
  • Category_GeoList
  • Entry_GeoList

srcset属性のパス補完に対応

a-blog cms ではテーマがドキュメンルートのように扱えるようにパスの書き換えを行なっています。

パス書き換えについて詳しくはこちら

例: themes/example/images/以下に画像がある場合 <img src="/images/sample.png">

ただ srcset の書き換えには対応していませんでしたので、グローバル変数などを使ってカスタマイズしないといけませんでした。

例: themes/example/images/以下に画像がある場合 <img src="/images/sample.png" srcset="%{CURRENT_THEMES_DIR}images/sample.png 320w, %{CURRENT_THEMES_DIR}images/sample@2x.png 640w" sizes="50vw" > これを、Ver. 2.9 では srcset の書き換えにも対応し以下のように記述できるようになりました。

<img src="/images/sample.png"
     srcset="/images/sample.png 320w,
             /images/sample@2x.png 640w"
     sizes="50vw"
>

これでより、静的HTMLを書くようにコーディングが出来るようになったと思います!

ユーザー切り替え機能の追加

ユーザーの切り替え機能を追加しました。この機能を使うと、自分以外のユーザーにログインしたまま瞬時に切り替える事が出来るようになります。

ユーザーの切り替えは、管理ページのユーザー一覧からユーザーを選択して切り替えます。


ユーザーの切り替え

ユーザーの切り替え


切り替えが出来る条件(デフォルト設定の場合)

  • ルートブログの管理者権限ユーザーであること
  • 切り替えユーザーは管理者でないこと

設定

設定は「private/config.system.yaml」で行います。



項目 設定値 デフォルト値 説明
switch_user_enable on / off on ユーザー切り替え機能を有効化
switch_user_permission root / all root ユーザー切り替えができる管理者設定(root=ルートブログの管理者のみ, all=全ての管理者)
switch_user_same_level on / off off 管理者ユーザーへの切り替えができるかの設定

フォームのテンプレート内容を管理画面から編集できる機能を追加

フォームで送られるメールの内容は、運用中よく変更される場所だと思います。

ただし、いままではフォームで送信されるメールテンプレートはテンプレートとして用意しないといけませんでした。これをVer. 2.9.0 では、管理ページより内容を編集できるようになったので運用が楽になると思います。

編集画面は、管理ページ > フォーム の該当のフォームの編集画面になります。「自動返信」だけではなく「管理者宛」メールも編集できるようになっています。

テンプレートと編集画面での入力が両方指定されている場合は、編集画面で入力した内容が優先されて利用されます。


フォーム編集画面

フォーム編集画面


extend@beginnerテーマの追加

新しいテーマとして、「extend@beginner」テーマを追加しました。「beginner」テーマは初心者用に最低限の機能で作られているテーマになります。「beginner」テーマはわかりやすい「@include」の機能でテンプレートが分割されているのに対し、今回追加された「extend@beginner」テーマはVer. 2.8 で追加された、「@extends機能」でテンプレートを分割するようになっています。

2つのテーマを見比べると、「@extends機能」を使ったテーマの管理のしやすさがわかると思います。初心者の方の次のステップアップテーマとしてご利用ください。

関連記事を複数もてる機能を追加

Ver. 2.6.0 より エントリーとエントリーを関連させる「関連記事機能」がありましたが1つのフィールドしか設定できませんでした。

例えば、

  • 関連する記事
  • おすすめ記事
  • 一緒によく見られている記事

など関連といっても、いくつかあり1つのフィールドでは足りない場合があります。そこでVer. 2.9では関連機能をパワーアップさせて、複数の関連記事を1つのエントリーに持たせれるようにしました。

設定方法

管理ページ > コンフィグ > 編集設定 の「関連記事グループ」で設定できます。

タイプ・ラベル・モジュールIDを設定できるようになっており、以下のような意味があります。



タイプ 内部で利用する識別子になります。英数字で設定を行います。
ラベル 編集画面に出力されるラベルです。
モジュールID 関連記事を設定する時に候補を表示する「Admin_Entry_Autocomplete」モジュールのモジュールID名を設定します。
ここで設定した名前でモジュールIDを作る事で、設定できる記事を絞り込むことができます。

関連記事設定

関連記事設定


エントリー編集画面

エントリー編集画面


画像ユニットでexif情報をキャプションに追加できる機能を追加

画像ユニットで選択された画像の「exif情報」を読み、写真の情報を自動でキャプションに設定できる機能が追加されました。

画像を選択すると「撮影データをキャプションに追加」というボタンができてくるで、そのボタンを押すと、キャプションに撮影データが入力されます。

デフォルトだと撮影データは以下のようなデータが入力されるようになっています。

  • カメラのモデル
  • 焦点距離
  • 絞り値(F値)
  • シャッタースピード
  • ISO感度
  • 撮影日

撮影データのキャプション追加

撮影データのキャプション追加


取得情報のカスタマイズ

この撮影データは、「js/config.js」の設定を変更することで変更することが可能です。

exif: {
    captionEnable: "on",
    saveData: "off",
    requireField: ['FocalLength'],
    captionFormat: '<%= Model %> (<%= FocalLength %>mm, f/<%= FNumber %>, <%= ExposureTime %>sec, ISO<%= ISOSpeedRatings %>) <%- ACMS.Library.Dayjs( DateTimeOriginal, "YYYY/MM/DD HH:mm") %>',
    dataFormat: 'Model:<%= Model %>__FocalLength:<%= FocalLength %>__FNumber:<%= FNumber %>__ExposureTime:<%= ExposureTime %>__ISOSpeedRatings:<%= ISOSpeedRatings %>__DateTimeOriginal:<%= DateTimeOriginal %>'
},


項目 説明
captionEnable この機能を有効にするかの設定です
saveData 撮影データをユニットに保存するかの設定です
requireField ここで設定したexif情報がないと機能が有効になりません
captionFormat キャプション文字列の設定です
dataFormat データベースに撮影データを保存する場合の、フォーマットです

issetオペレーターを追加

IFブロックなどで利用するオペレータに新しいものが追加されました。今までは空を判定するときは「em」というオペレーターを使っていたのですが、少し使いづらい仕様であったため今回のオペレーターを追加されました。

「em」は "0"も空と判定されるのに対し、「isset」は空文字の時のみ空と判定します。



オペレーター 内容
em 内容が空の場合にtrue(ただし"0"も true と判定)
nem 内容がある場合にtrue(ただし"0"も場合は falseに判定)
isset 内容がある場合にtrue("0"であっても true と判定)
nisset 内容が空の場合にtrue("0"であっても false と判定)

@extends機能で@sectionの入れ子ができるように改良

Ver. 2.8 で追加された「@extends機能」がパワーアップしました。以前までは「@section」は 入れ子 に出来なかったため、カスタマイズがしづらい場面がありました。

例えば、_layout.html で レイアウトを定義するのに @section を使ってしまうとその中で、さらに @sectionは使えません。

@section("main")
<div class="main">
    @section("main-title")
    <h2>タイトル</h2>
    @endsection
    @section("main-body")
    <div class=body">
         ...
    </div>
    @endsection
</div>
@endsection

という事がVer. 2.8では出来ませんでしたが、Ver. 2.9.0ではできるようになりました。これによりより細かな継承を意識したテンプレートが作れるようになりました。

systemテーマに@sectionを追加

「@extends機能」の拡張に合わせて、システムテーマにも「@section」の仕込みを多く行いました。これにより管理ページをカスタマイズするときに、部分的なテンプレートのカスタマイズだけで済み、バージョンアップに強いカスタマイズが行えるようになります。

アクションボックスのカスタマイズ例

「アクションボックス」(エントリー作成・管理ページ・ログアウトボタンなど)をカスタマイズすることは多いと思います。今までは、カスタマイズしているテーマに「themes/system/admin/action.html」をコピーして利用していたと思いますが、カスタマイズする場所以外も全部もってくるため、カスタマイズした所がわかりにくい & バージョンアップ時に「action.html」に変更があった場合、バージョンアップされたテンプレートが反映されない状態でした。

これを「@extends機能」を使ったカスタマイズをしてみます。ここでは、「お知らせ作成」ボタンを新たに追加して「Ping送信」ボタンを削除してみたいと思います。

空の「themes/ご利用のテーマ/admin/action.html」を作成して以下のようにカスタマイズします。

@extends("/admin/_layouts/action.html")

@section("entry-insert")
@parent
<form action="" method="post" class="acms-admin-inline-btn">
	<input type="submit" name="ACMS_POST_2GET" value="<!--T-->お知らせ作成<!--/T-->"  class="acms-admin-btn-admin"/>
	<input type="hidden" name="admin" value="entry-edit" />
	<input type="hidden" name="bid" value="%{BID}" />
	<input type="hidden" name="cid" value="2" />
</form>
@endsection

@section("ping-update")
@endsection

継承の機能を詳しく見てみる

エントリー編集画面の統一オプションを追加

a-blog cmsではエントリーの編集を行う画面が2つあります。1つはページ見たままのレイアウトで編集できる表側の編集ページ、もう1つは管理ページ側の編集ページです。編集ページへの行き方でそれぞれの編集画面が表示されるのですが、慣れた編集画面で毎回編集したいということもあるため、統一できるオプションを追加しました。

管理ページ > コンフィグ > 編集設定の「編集画面」で設定できます。デフォルトは従来の動きになっています。


エントリー編集ページの統一

エントリー編集ページの統一


エントリーの初期ステータスを変更できるオプションを追加

エントリー新規作成時のデフォルトの「エントリーステータス」を設定できるようになりました。いままでは「下書き」がデフォルトだったのですが、承認機能利用時など「公開」にし忘れることも多いため、運用に合わせてデフォルト値を変更していただくと便利です。


エントリーの初期ステータスを設定

エントリーの初期ステータスを設定


CMS-4269 テキストの置換機能をスタンダードに移動

Ver. 2.8 まではプロフェッショナル版以上で利用可能だった「テキストの置換」機能をスタンダード版でも利用できるように変更しました。

使い方

管理ページ > データ修正 の「テキスト置換」に移動します。

置換を行う対象のフィールドを指定します。指定できるフィールドはエントリー情報の以下の3つです。

  • タイトル
  • ユニット
  • カスタムフィールド

次に置換対象の文字列と置換後の文字を指定します。

この状態で一括置換もできますが、「チェック」ボタンを押すことにより、置換対象を自分でチェックしてから置換することもできます。


一括置換設定画面

一括置換設定画面

置換選択画面

置換選択画面


新機能一覧

  • CMS-4180 MySQL 8.0対応
  • CMS-4198 OpenStreetMap対応(ユニット・カスタムフィールド)
  • CMS-4193 PC, スマホ, タブレットのプレビュー機能を追加
  • CMS-4244 プレビューの共有機能を追加(プロ版以上)
  • CMS-4179 静的書き出しでエントリーの差分書き出しに対応(プロ版以上)
  • CMS-4204 ブログ、カテゴリー、ユーザーに位置情報を追加(コンフィグ > 機能設定 で有効化)
  • CMS-3648 srcset属性のパス補完に対応
  • CMS-4194 ユーザー切り替え機能の追加
  • CMS-4142 フォームのテンプレート内容を管理画面から編集できる機能を追加
  • CMS-4190 extend@begginerテーマの追加
  • CMS-4195 関連記事を複数もてる機能を追加(コンフィグ > 編集設定 で追加)
  • CMS-4189 データベース定義を拡張する機能を追加(extension/schema ディレクトリ以下)
  • CMS-4183 画像ユニットでexif情報をキャプションに追加できる機能を追加
  • CMS-4185 issetオペレーターを追加(em: 0 も空と判定, isset: 空文字の時のみ空と判定 )

変更点一覧

  • CMS-4201 @extends機能で@sectionの入れ子ができるように改良
  • CMS-4212 フォーム管理画面のオプション指定のUIを改善
  • CMS-4197 Entry_ArchiveListに年度表示を追加
  • CMS-4206 カスタムフィールドグループの個々のフィールドでバリデーションできるように改良
  • CMS-4174 エントリー管理画面に更新日時と作成日時を表示
  • CMS-4221 フィールドグループをJavaScriptのバリデーションに対応
  • CMS-4125 管理画面側のエントリー編集から承認機能が使用できるように対応
  • CMS-4226 接続元IPアドレスが変わってもセッションが切れないように変更 (config.system.default.yaml : session_remote_addr_check)
  • CMS-4214 フォームのセキュリティアップデート
  • CMS-4268 site2018テーマのお問い合わせフォームのテンプレートをHTMLに変更
  • CMS-4165 承認メールのFromを承認依頼したユーザーのメールアドレスにするオプションを追加
  • CMS-4223 systemテーマに@sectionを追加
  • CMS-4258 管理画面側でのエントリー編集で保存ボタンを画面に固定するように変更
  • CMS-4191 OGPモジュールにエントリ詳細の時にdiscriptionを出力しないオプションを用意
  • CMS-4145 エントリー編集画面の統一オプションを追加
  • CMS-4234 エントリーの初期ステータスを変更できるオプションを追加
  • CMS-4269 テキストの置換機能をスタンダードに移動

修正点一覧

  • CMS-4196 ロール管理下での権限をわかりやすく表示をするように修正
  • CMS-4224 ダイレクト編集で拡張ユニットを追加できるように修正
  • CMS-4239 システム更新のパフォーマンスを改善
  • CMS-4235 動的フォームのセレクト、ラジオの選択肢を入れ替えれるように改善
  • CMS-4241 Touch_EditInplace をログイン状況を考慮するように修正
  • CMS-4209 カスタムフィールドメーカーでフィールドグループのバリデーション対応
  • CMS-4253 メールテンプレートでも@extendsが使用できるように修正
  • CMS-4271 @sectionを検索キーワード指定すると表示が崩れる問題を修正

a-blog cms Ver. 2.10.0 リリースしました!

Ver. 2.10.0 リリース

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 は ずっと1エントリーにつき1カテゴリーというシングルカテゴリー方式でした。今回の 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

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

こちらも大きな変更の1つです。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属性 で指定します。



データ属性名 詳細 デフォルト値
link 見出しへのリンクを生成するか設定 true
listType リストを ol か ul で作るか指定 'ol'
listClassName ol/ul の class名を指定 ''
itemClassName li の class名を指定 ''
linkClassName a の class名を指定 ''
anchorName アンカーリンクを指定 ($1 には数字が入ります) 'heading-$1'
levelLimit 見出しリストの階層を指定 99

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

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

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

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

キャッシュルールを追加できるHookを追加(addCacheRule)

フックに機能が1つ追加されました。キャッシュの振り分けルールをカスタマイズできるもので、ルール毎に違うものを設定することにより、キャッシュを振り分けることができるようになります。いままでは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以降 ウィンドウ幅が767px以前
小さいサイズ 22px 26px
通常 26px 32px
大きいサイズ 38px 44px

フォントサイズは、ウィンドウ幅が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以上のコントラスト比が必要になります。

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



以前のラベル 3.03 3.36 1.98 2.24 2.85
Ver.2.10以降のラベル 5.40 5.68 4.67 5.36 7.71

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


スクリーンショット:管理者ボックス

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


スクリーンショット:Ver.2.10以降のバッジ

新機能一覧

  • 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 プレビューの共有がうまく動作しない場合がある問題を修正

さくらインターネットのFreeBSDのアップデートに伴うionCubeLoaderのバージョンアップ

FreeBSDのアップデートに伴う変更点 (2019/4/17 更新) – さくらのサポート情報


さくらインターネットのFreeBSDのアップデートが行われるとアナウンスがありました。レンタルサーバのOSである「FreeBSD」のバージョンが9.x系から11.x系へ変更されます。

対象のWebサーバーをお使いのサイトは、合わせてionCubeLoaderのバージョンアップをお願いいたします。

さくらインターネットのFreeBSDのアップデートの詳細については、以下のURLをご覧ください。

作業を行わなかった場合に起こる不具合

作業を行わなかった場合、php.iniに記述されているプログラムとバージョンが 不一致となり、正常にCMSが動かなくなることがあります。対象のWebサーバーをお使いの方はご対応いただきますよう、よろしくお願いいたします。

新しいionCubeLoaderの入手先

ionCubeLoaderのダウンロードは以下のURLからお願いいたします。

以上となります。 この件についてご不明な点があればお問い合わせください。

「CMS の原点回帰」に挑んだ、Ver. 2.10 へ懸ける想い

開発スタッフ 伊藤


2019年2月28日、a-blog cms の Ver. 2.10 がリリースされました。今回のアップデートの背景とそこに懸けた想いについて、アップルップルの CTO(最高技術責任者)も務める、開発者の伊藤淳が語ります。