a-blog cms Ver. 2.11.0 ベータ版 を公開しました！

Advent Calendar 2019 の4日目の記事になります。

先日、11月22, 23日に、 a-blog cms Training Camp 2019 Autumn が開催されました。 合宿に参加された方には先行して 次期バージョンである Ver. 2.11 を触っていただいたのですが、この度一般に向けて a-blog cms Ver. 2.11 ベータ版 を公開することとなりました。

便利な機能もりだくさんですので、是非お試しください！

Ver. 2.11 ベータ版を試す方法

以下 Ver. 2.11 へのアップデート方法になります。まだベータ版となりますので、本番環境でのアップデートはお控えください。

アップデートの場合

private/config.system.yaml に、以下コードを追記ください。

system_update_repository: http://www.a-blogcms.jp/api/update-edge.json

次に管理画面 > コンフィグ > 機能設定のオンラインアップデートで「マイナーバージョンも含める」にすれば、メニューから Ver. 2.11 にアップデートできるようになります。

オンラインアップデートの対象にマイナーバージョンを含める

オンラインアップデートの対象にマイナーバージョンを含める

新規インストールの場合

新規でインストールする場合は、以下より新規パッケージをダウンロードしてお使いください。phpのバージョンによってパッケージが異なりますのでお気をつけください。

php5.3 - 5.5

https://developer.a-blogcms.jp/_package/2.11.0-beta.5/acms2.11.0-beta.5_php5.3.zip

php5.6 - 7.0

https://developer.a-blogcms.jp/_package/2.11.0-beta.5/acms2.11.0-beta.5_php5.6.zip

php7.1 - 7.2

https://developer.a-blogcms.jp/_package/2.11.0-beta.5/acms2.11.0-beta.5_php7.1.zip

変更箇所

新機能

  • CMS-4856 LINEログインの追加
  • CMS-4861 ログイン試行制限セキュリティの追加
  • CMS-4862 2段階認証機能を追加
  • CMS-4875 管理画面からメンテナンス表示に変更できる機能を追加
  • CMS-4316 Yahoo!地図の組み込みJS（Yahoo!地図, Yahoo! Map Cluster）を用意
  • CMS-4885 組み込みJSおよび、マップユニットのストリートビュー対応
  • CMS-4901 権限毎にIPアドレス制限をかけれる機能を追加
  • CMS-4924 エントリー作成時、更新時のフック処理を用意
  • CMS-4938 プレビュー機能に全体のキャプチャ画像をダウンロードできる機能を追加
  • CMS-4956 モジュール毎のキャッシュ機能を追加
  • CMS-4958 cronなどで利用できるスタンドアローン起動の雛形を用意
  • CMS-4973 in-view の組み込みJSを追加（js-in-view）
  • CMS-4953 lazy load の組み込みJSを追加（js-lazy-load）
  • CMS-4479 エントリーの一括変更機能を追加
  • CMS-4905 PaperEditorの組み込みJS及びユニットを追加
  • CMS-4932 PDFのプレビュー組み込みJSを追加（js-pdf-viewer）& メディア機能をPDFプレビューに対応
  • CMS-4997 コンフィグセットの複製機能を追加
  • CMS-4963 ルールの拡張機能を追加（Hook.php: customRuleValue）
  • CMS-4952 ビルド環境が入った開発テーマ（develop）を追加

変更点

  • CMS-4863 読者登録・パスワードリセット時に、パスワードを自分で指定できるように変更
  • CMS-4878 php5.3-5.5パッケージにpolyfill追加
  • CMS-4923 関連記事選択でフィールド情報が出力できるように変更
  • CMS-4890 会員登録の初期ステータスを設定できるオプションを追加
  • CMS-4775 .htaccessにwebpファイルへのリライトを追加
  • CMS-4974 ルールのコンフィグボタンの移動先をコンフィグセット一覧に変更
  • CMS-4935 編集者にフォームとスケジュールの権限を付与（config.system.yaml: form_admin_authority, schedule_admin_authority）
  • CMS-4840 関連記事を記事一覧（Entry_Body, Entry_Summary）でも出力できるように改善
  • CMS-4934 OGP画像のユニットを含めるかどうかのオプションを用意
  • CMS-4988 SmartPhotoのlazyload対応
  • CMS-4991 カスタムフィールドメーカーに LiteEditor, PaperEditor a-table用のソースコードを追加
  • CMS-4976 メディアでの画像のファイル名をそのままでアップロードできるように変更
  • CMS-4982 メディアユニットでメディアのリンクを上書きできるようにUIを調整
  • CMS-5003 メディアバナーのリンクを上書きできるように変更

バグフィックス

  • CMS-4922 ユーザーのフルテストが生成できない問題を修正
  • CMS-4925 システム更新でデータベースの更新が重い問題を修正
  • CMS-4957 エントリー一覧管理ページのパフォーマンスを向上
  • CMS-4109 DBのインデックスを調整
  • CMS-4879 resizeImgで指定サイズより小さい画像の場合、画像に余白が生成される問題を修正
  • CMS-4936 データベースのバックアップ、リストアで大量のメモリを使わないように修正

Advent Calendar 2019 1日目の記事（かずみちさん） でも機能紹介がされてますので、是非こちらも参照ください。

Backpax.jsを使ってパララックスユニットを作ってみよう

みなさんは背景画像にパララックス効果をつけたい場合にどのライブラリを選定して実装していますか？意外と背景画像にパララックスエフェクトをつけるのは難しいと思います。なぜなら、背景画像の大きさに応じてパララックスのスピードを調整しないといけないし、スマートフォンサイズの時は別画像にしてパララックスさせたい場合もあります。 一つのJavaScriptを利用するだけではうまくいかず、さらに高度なカスタマイズを求められることがほとんどです。

Backpax.jsとは

Backpax.js とは弊社 アップルップル が開発したパラッラックス用のJavaScriptライブラリーでGithubに公開しています。

Backpax.jsの特徴として以下の点があります。

  • HTMLベースで簡単に背景パララックスが実装できる
  • 一つの背景に対していくつでもブレイクポイントに応じた画像が登録できる
  • パララックススピードの自動調整

HTMLベースで簡単に背景画像が実装できる

実際にBackpax.jsでは以下のようにHTMLを記述します。background-image:url(/path)を記述する代わりに以下のようにdata-imgを背景画像を設定したい要素に記述します。さらにブレイクポイントごとに画像を変えたい場合はdata-img-768などのように768px以下の時の画像を設置したりできます。data-img-以降の数字は任意のもので大丈夫です。data-img-400やdata-img-1800など、好きに数字を指定することができます。

<div class="js-parallax" 
  data-img="./path/to/default-image"
  data-img-768="./path/to/image-which-size-is-smaller-than-768"
  data-img-1024="./path/to/image-which-size-is-smaller-than-1024"
>
  <p>ここには普通にコンテンツが入ります。</p>
</div>

JavaScriptは以下のように記述します。非常に簡単です。

document.addEventListener('DOMContentLoaded', function() {
  new Backpax('.js-parallax');
});

パララックススピードの自動調整

また、画像の高さによってパララックススピードが自動調整されます。表示されるエリアに対して画像が高い場合はパララックススピードが早くなりますし、逆に表示エリアに対して画像の高さが変わらない場合はパララックススピードが遅くなります。というのも背景画像を上から下まですべて表示させたいという意図があります。

デモ

以下がBackpax.jsの実際のデモになります。スクロールすると背景がスクロールスピードより遅く移動しているのがわかるかと思います。

Demo

パララックスユニットを作ってみよう

さて、Backpax.jsがどのようなJavaScriptかお分かりになったと思いますので、実際にパララックスユニットを作成していきます。

カスタムユニットを利用する

テキストユニットではテキストの入力欄が1つ、画像ユニットであれば画像を1枚アップできるような単機能なユニットになりますが、カスタムユニットを利用するとユニットに自由にカスタムフィールドやカスタムフィールドグループを設定することができます。 今回はブレイクポイントごとに背景画像を設定したいのでカスタムフィールドグループをユニットで登録できるようにします。

管理ページの実装

カスタムユニットは、少しだけカスタムフィールドと記述が違いますので、カスタムフィールドメーカー を利用する際には、カスタムユニット（フィールドグループ）を選択してください。以下は実際に利用するカスタムユニットのサンプルになります。 ソースコードは /themes/＊利用テーマ＊/admin/entry/unit/extend.html に貼り付けてください。 パララックス内の記事に対するカスタムフィールドは Ver.2.11から導入されるPaperEditorを利用したものになりますのでここは利用に応じて適宜カスタムフィールドを書き換えてください。

<!-- BEGIN custom_parallax -->
<table class="acms-admin-table-admin-edit">
  <tr>
    <th>パララックス内の記事</th>
    <td>
      <div class="js-expand js-acms-expand">
        <div class="js-acms-expand-inner">
          <button class="js-expand-btn js-acms-expand-btn" type="button">
            <i class="acms-admin-icon acms-admin-icon-expand-arrow js-expand-icon"></i>
          </button>
          <div class="js-paper-editor" data-heading-start="2" data-heading-end="3">
            <div class="js-paper-editor-edit"></div>
            <input type="hidden" class="js-paper-editor-body" name="parallax_contents{id}" value="{parallax_contents@html}" />
            <input type="hidden" name="unit{id}[]" value="parallax_contents{id}" />
            <input type="hidden" name="parallax_contents{id}:extension" value="paper-editor" />
          </div>
        </div>
      </div>
    </td>
  </tr>
</table>
<h2 class="acms-admin-admin-title2">パララックスグループ</h2>
<table class="js-fieldgroup-sortable adminTable acms-admin-table-admin-edit">
  <thead class="acms-admin-hide-sp">
    <tr>
      <th class="acms-admin-table-left acms-admin-admin-config-table-item-handle"> </th>
      <th class="acms-admin-table-left">ブレイクポイント</th>
      <th class="acms-admin-table-left">背景画像</th>
      <th class="acms-admin-table-left acms-admin-admin-config-table-action">削除</th>
    </tr>
  </thead>
  <tbody>
    <!-- BEGIN parallax_group:loop -->
    <tr class="sortable-item">
      <td class="item-handle acms-admin-table-nowrap">
        <i class="acms-admin-icon-sort"></i>
      </td>
      <td>
        <input type="text" name="parallax_breakpoint{id}[]" value="{parallax_breakpoint}" class="acms-admin-form-width-full" />
      </td>
      <td class="js-media-field">
        <div class="js-droparea" data-thumbnail="{parallax_image@thumbnail}" data-type="image" style="width:200px"></div>
        <p class="js-text acms-admin-text-danger" style="display:none">許可されていないファイルのため挿入できません。</p>
        <div class="acms-admin-margin-top-mini">
          <button type="button" class="js-insert acms-admin-btn" data-type="image">選択</button>
        </div>
        <input type="hidden" name="parallax_image{id}[]" value="{parallax_image}" class="js-value" />
      </td>
      <td class="acms-admin-table-nowrap">
        <input type="button" class="item-delete acms-admin-btn-admin acms-admin-btn-admin-danger" value="削除" />
      </td>
    </tr>
    <!-- END parallax_group:loop -->
    <tr class="sortable-item item-template">
      <td class="item-handle acms-admin-table-nowrap">
        <i class="acms-admin-icon-sort"></i>
      </td>
      <td>
        <input type="text" name="parallax_breakpoint{id}[]" value="" class="acms-admin-form-width-full" />
      </td>
      <td class="js-media-field">
        <div class="js-droparea" data-type="image" style="width:200px"></div>
        <p class="js-text acms-admin-text-danger" style="display:none">許可されていないファイルのため挿入できません。</p>
        <div class="acms-admin-margin-top-mini">
          <button type="button" class="js-insert acms-admin-btn" data-type="image">選択</button>
        </div>
        <input type="hidden" name="parallax_image{id}[]" value="" class="js-value" />
      </td>
      <td class="acms-admin-table-nowrap">
        <input type="button" class="item-delete acms-admin-btn-admin acms-admin-btn-admin-danger" value="削除" />
      </td>
    </tr>
  </tbody>
  <tfoot>
    <tr>
      <td colSpan="4">
        <input type="button" class="item-insert acms-admin-btn-admin" value="追加" />
      </td>
    </tr>
  </tfoot>
</table>
<input type="hidden" name="@parallax_group{id}[]" value="parallax_breakpoint{id}" />
<input type="hidden" name="unit{id}[]" value="parallax_breakpoint{id}" />
<input type="hidden" name="parallax_image{id}:extension" value="media" />
<input type="hidden" name="@parallax_group{id}[]" value="parallax_image{id}" />
<input type="hidden" name="unit{id}[]" value="parallax_image{id}" />
<input type="hidden" name="unit{id}[]" value="@parallax_group{id}" />
<!-- END custom_parallax -->

次にa-blog cmsの管理画面でパララックスユニットの登録をします。 管理ページ > コンフィグ > 編集設定 > ユニット追加ボタン に移動し、新しいユニットボタンを追加します。ユニット追加ボタンの [追加] をクリック、「モード」は 拡張 を選択し、上記のコード に書かれているものと同様の custom_parallax と入力、「ラベル」は利用者に分かるようなラベルを設定します。今回の場合、パララックスのように記述するといいでしょう。

ユニット追加ボタンの設定ができたら、管理ページ > コンフィグ > ユニット設定 を開いてください。ユニット設定の一番下に「パララックス」が増えていますので、[パララックス] ボタンをクリックしてください。そうする事で以下のようにグラフユニットが1つ追加されます。

表示側の実装

実際に作ったHTMLを表示するには以下の場所にHTMLを記述します。 /themes/＊利用テーマ＊/include/unit/extend.html また、CSSについては言及しませんのでサイトに応じて適宜記述しましょう。

<!-- BEGIN unit#custom_parallax -->
<!-- BEGIN_SetRendered id="js-parallax" -->
<script src="https://cdn.jsdelivr.net/npm/backpax@1.0.2/bundle/backpax.js"></script>
<script>
document.addEventListener('DOMContentLoaded', function() {
  new Backpax('.js-parallax');
});
</script>
<!-- END SetRendered -->

<div class="js-parallax" <!-- BEGIN parallax_group:loop -->data-img-{parallax_breakpoint}="{parallax_image}" <!-- END parallax_group:loop -->>
{parallax_contents@html}
</div>
<!-- END unit#custom_parallax -->

JavaScriptの読み込み

/themes/＊利用テーマ＊/include/head/js.html

標準のテーマであれば js.htmlがありますが、無い場合には タグのどこかに、下記の1行を追加ください。この記述をheadタグ内に記述することで、エントリーで何回パララックスユニットが追加されていたとしても、JavaScriptが実行される回数が一回だけになるのでパフォーマンス的におすすめです。

<!-- GET_Rendered id="js-parallax" -->

以上になります。エントリー記事にアクセントをつけたい場合やクライアントからパララックス効果を求められた場合はぜひ Backpax.js を思い出していただければとおもいます。