先日弊社で新しいOSS（ScrollHint）を公開しました。このJavaScriptを使うと下のデモようにコンテンツが表示エリアをはみ出した時に、そのコンテンツに対してスクロール可能領域にボックスシャドウをかけ、さらにコンテンツが表示エリアに入った瞬間にスクロールを促すためのアイコンが表示されます。

課題

以下の画像のようにエントリー編集画面のテーブルユニットより「スクロールを促すテーブル」を選択すると、表側の画面でScrollHintが適応されたテーブルを表示できるようにする。

1. JavaScriptを使ってテーブルユニットの選択項目を増やす

Ver.2.8よりテーブルユニットのテーブル自体に対してクラスを追加することができるように下の図のようにセレクトボックスが追加されました。

デフォルトでは、「スクロールするテーブル」しか選択できませんが、この項目はJavaScriptより増やすことが可能です。以下のように、その項目のラベル名とその項目が選択された際にテーブルに付与するクラス名を記述します。

ACMS.Ready(function(){  
 ACMS.Config.aTableOption.push({
    label: 'スクロールを促すテーブル', 
    value: 'js-scrollable'
  });
});

2. 表側ベージでjs-scrollable というクラス名が振られた要素に対して、ScrollHintを実行する

はじめにhead内に以下のコードを書いて ScrollHint を読み込みます。

<link rel="stylesheet" href="https://unpkg.com/scroll-hint@latest/css/scroll-hint.css">
<script src="https://unpkg.com/scroll-hint@latest/js/scroll-hint.min.js"></script>

次に、以下のようなJavaScriptを記述してScrollHintを実行します。

document.addEventListener('DOMContentLoaded', function(){
    new ScrollHint('.js-scrollable', {
      applyToParents: true,
      i18n: {
        scrollable: 'スクロールできます'
      }
  });
});

ハンズオンは以上になります。ぜひ、ScrollHintを使ってみてください！

AMPPS2.4での注意点

AMPPSはローカルにapache, mysql, php の環境を用意できるソフトになります。 標準でa-blog cmsを動かすのに必要なioncubeが入っていてa-blog cmsのローカル開発環境として便利です。

しかし、2014/05/16日現在最新のAMPPS2.4をphp5.4で動かすとioncubeが標準で入っていないようで、 a-blog cmsを動作させることが出来ません。

※php5.3では動作を確認しています

手動でioncubeのインストールを試みたのですが、うまくいかず様子みている状態です。 AMPPS2.4の場合は、php5.3をご利用頂くか、他の環境をご利用ください。

テンプレートはsystemテーマに置いてあります。変更するときはご利用しているテーマ内にコピーしてきてください。 /themes/利用中のテーマ/include/form/adminsubject.txt

メールのテンプレート

管理者宛メールの件名

/themes/system/include/form/adminsubject.txt

管理者宛メールの本文

/themes/system/include/form/adminbody.txt

一般宛メールの件名

/themes/system/include/form/subject.txt

一般宛メールの本文

/themes/system/include/form/body.txt

入力フォームと入力確認画面のテンプレート

formタグや入力フォームと入力確認画面のテンプレートを読み込んでいます

/themes/system/include/form/unit.html

完了画面のテンプレートは、デフォルトだと「thanks.html」が指定されています

/bid/%{BID}/eid/%{EID}/tpl/thanks.html

入力フォームのテンプレート

/themes/system/include/form/input.html

入力確認画面のテンプレート

/themes/system/include/form/confirm.html

%{BLOG_NAME}

〒000-0000
○○県○○○市○○区 ××の××の××
電話番号： 123-456-7890
E-mail： ■■■@■■■■.■■

a-blog cmsにはACMS.addListener という特定のイベントに対して処理を挟み込めるAPIが用意されています。 このAPIを使うことにより、エントリーのユニットの追加時やカスタムフィールドグループの項目を増やした時など特定のタイミングで任意の処理を挟み込むことができます。 例えば、ポストインクルードで読み込んで来たコンテンツに対してウェブフォントを適応したいというケースなどにも有効です。 下は、ウェブフォントのサービスであるFONTPLUSをポストインクルード時に再実行する処理のサンプルになります。

ACMS.addListener("acmsAfterPostInclude", function() {
  FONTPLUS.reload();
});

ACMS..addListenerに用意されているイベント

今回はこのAPIを利用してポストインクルードが実行された後にそのコンテンツに対してMasonryレイアウトを適応してみましょう。 Masonryレイアウトとはアイテムがタイル状に引き詰められたレイアウトで、以下のMasonryというJavaScriptライブラリを使用することで実装可能です。

課題

site2018テーマのお知らせページでMasonryレイアウトを利用した一覧ページを作ってみましょう。ただし「もっと読み込む」ボタンが押されたタイミングで次のページのエントリーサマリーを読み込み、そのコンテンツに再びMasonryレイアウトを適応するものとします。

※デフォルトでお知らせに登録されているエントリー数はあまり多くないので、ハンズオンのために20件ほど増やしておくことをオススメします。

1. リソースの読み込み

まず、Masonryレイアウトに必要な下の2つのJavaScriptを読み込みます。

<script src="https://unpkg.com/imagesloaded@4/imagesloaded.pkgd.min.js"></script>
<script src="https://unpkg.com/masonry-layout@4/dist/masonry.pkgd.min.js"></script>

2. themes/site2018/news/index.html の書き換え

@include("/include/entry/body.html")となっている箇所を下のようなソースコードに書き換えます。この部分にMasonryレイアウトが適応されることになります。

<div class="acms-grid js-masonry">
  @include("/include/entry/masonry.html")
</div>

3. ポストインクルードで読み込むテンプレートの記述

themes/site2018/include/entry/masonry.html を作成し、以下のようなHTMLを記述します。先ほどのMasonryレイアウトの中に実際に入ってくるエントリーサマリーを記述しています。今回、モジュールIDをnews_summaryとしています。

<!-- BEGIN_MODULE Entry_Summary id="news_summary" -->
  <!-- BEGIN unit:loop -->
  <!-- BEGIN entry:loop -->
  <div class="acms-col-4">
    <a href="{url}" class="acms-thumbnail">
      <!-- BEGIN image:veil -->
      <img src="%{ROOT_DIR}{path}" alt="{alt}">
      <!-- END image:veil -->
      <!-- BEGIN noimage -->
      <img src="/images/default/noimage.gif" alt="">
      <!-- END noimage -->
      <h3>{title}</h3>
      <p>{summary}</p>
    </a>
  </div>
  <!-- END entry:loop -->
  <!-- END unit:loop -->
  <!-- BEGIN forwardLink -->
  <form action="%{ROOT_BLOG_URL}" method="post" class="js-post_include acms-col-4">
    <input type="hidden" name="tpl" value="/include/entry/masonry.html" />
    <input type="hidden" name="page" value="{forwardPage}" />
    <input type="submit" name="ACMS_POST_2GET" value="もっと読み込む" class="acms-btn"/>
  </form>
  <!-- END forwardLink -->
<!-- END_MODULE Entry_Summary -->

4. JavaScriptの適応

以下のようなJavaScriptを記述して、ポストインクルード実行後に読み込んだコンテンツに対して、再びMasonryレイアウトが適応されるようにします。

var msnry = new Masonry('.js-masonry');
imagesLoaded('.js-masonry', function () {
  msnry.layout();
});
ACMS.addListener('acmsAfterPostInclude', function (e) {
  imagesLoaded('.js-masonry', function () {
    msnry.destroy();
    msnry = new Masonry('.js-masonry');
    msnry.layout();
  });
});

5. モジュールIDの作成

先ほどthemes/site2018/include/entry/masonry.html に記述したモジュールID news_summary を管理画面から作成しましょう。管理画面 > モジュールID よりモジュールIDを新規作成していただけます。この際に下の図のように、カテゴリーIDとページの引数にチェックをつけておきましょう。これでポストインクルード実行の際に、次のページのエントリーサマリーを読み込んで表示することができます。

ハンズオンは以上です。ポストインクルードで読み込んだコンテンツに対してJavaScriptを適応したいケースは多いと思います。今後ぜひ、ACMS.addListenerを活用してみてください。