先日弊社で新しい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をご利用頂くか、他の環境をご利用ください。

a-blog cms利用約款

このa-blog cms利用約款（以下「本約款」といいます）は、使用者(個人または法人)と有限会社アップルップル (以下「アップルップル」といいます)の間における、a-blog cms、関連するソフトウェア部品群、並びにドキュメント（以下「本ソフトウェア」といいます）に関する約款です。

第1条【ライセンス】

使用者は、本約款の定めに従い、本ソフトウェアを利用できるライセンスを有するものとします。使用者は、本ソフトウェアを1台のサーバー上に存在する1つのウェブサイトにインストールすることができます。

第2条【禁止事項】

使用者は、次の各号に定める行為を行ってはなりません。

1. 本ソフトウェアから派生するソフトウェアを制作すること
2. 本ソフトウェア又はその複製を如何なる形態においても、第三者に販売、譲渡、ライセンス供与、開示、その他の方法による移転等第三者が使用できるようにすること
3. 本ソフトウェアの改造、翻訳、逆コンパイル又は逆解析（リバース・エンジニアリング）を、法律上認めている範囲を超えて行うこと及びそれを試みること
4. 本ソフトウェア上の権限の表示又は商標を変更すること
5. 本ソフトウェアを公序良俗に反したコンテンツとして使用すること

アップルップルは、本ソフトウェアに関する全ての権利（全ての知的財産権を含む）を保有し、本約款において明示的には許諾していない本ソフトウェアに関する全ての権利をも保有します。

第3条【著作権表示】

アップルップルは、本ソフトウェアを使用するに使用者に対してバナー及びテキストでの著作権表示を強制することはしません。ただし、著作権がアップルップル以外にあると誤認させる行為一切を禁じます。 a-blog cmsが生成するHTMLドキュメントには、下記のコードがHEAD要素内に追加されます。

<meta name="generator" content="a-blog cms" />

第4条【技術サポート】

本ソフトウェアの利用に関して、電話でのサポートは提供されません。
質問、要望を含めた無償サポートは、ウェブサイト上のフォーラムでのみ行われますが、開発元によるサポートを保証するものではありません。 有償でのメールサポートとして、スタンダードライセンスに対して「年間メールサポート」が、プロフェッショナル、エンタープライズライセンスに対して「年間メンテナンス」が別途契約として提供されます。これらはサービスの契約期間中有に専用メールフォームから契約ドメインの「インストール及びアップデートについて」「テーマ、モジュールなどのカスタマイズについて」「エントリー投稿などの使用方法について」「その他、a-blog cmsの操作に関連するもの」についての質問を受け付けるものとなります。 なお、有償無償を問わず、サポート対象は現行バージョンから2メジャーバージョン前までのものとします。バージョンの定義は、製品バージョンナンバーの小数点第一位をメジャーバージョンとします。

第5条【無担保・無保証】

本ソフトウェアは、現状有姿の状態で提供され、明示的にも黙示的にも、何らの担保及び保証するものではありません。アップルップル及びその供給者は、その商品性、特定目的への適合性及び第三者の権利を侵害していないことを黙示的に担保・保証することを含み、明示的であると黙示的であるとを問わず、如何なる種類の担保・保証をも行うものではありません。 本ソフトウェアの品質、性能、インストール、使用に伴うプログラム・エラー、装置の損傷、データやソフトウェア・プログラムの消失、不稼動及び中断等一切のリスクは、使用者の負担とします。本ソフトウェアの使用に関する適切性の判断は、使用者自身の責任で行うものとし、その使用による一切のリスクは、使用者の負担とします。

第6条【責任制限と免責】

使用者は、アップルップルが損害発生の可能性を事前に通知した場合は勿論それ以外の場合であっても、利益の逸失、信用の失墜、不稼動、データ使用不能等に起因する損害並びにその他顕在化していない損害を含み直接的、間接的、偶発的、例外的、結果的若しくは懲罰的損害に関して、アップルップルは一切の責任を負わないことを明示的に理解し同意します。また、使用者はアップルップル及びその他のパートナーを　使用者による本ソフトウェアの使用から及びその他本ソフトウェアに関わり発生する如何なる直接的、間接的、偶発的、例外的、結果的、懲罰的損害についての責任から一切免責することに同意します。

第7条【プログラム・サービス・約款の改訂および提供の終了】

アップルップルは、アップルップルのウェブサイトにて公示することにより、本ソフトウェア並びに本約款を変更することができるものとします。また、アップルップルは本約款並びにアップルップルの提供するサービスを、書面による通知のあるなしにかかわらず、終了することができるものとします。 プログラムは基本的にバージョンナンバーの小数点第一位をメジャーバージョンとし、発表日から2年間または次メジャーバージョンの発表のいずれか先に訪れる日まで、小数点第三位をバージョンナンバーとしたバグフィックスおよびセキュリティフィックスリリースを行います。 発表日から2年間が経過または次メジャーバージョンが発表されたプログラムに対してはバグフィックスおよびセキュリティフィックスリリースを提供しません。

第8条【一般規定】

本規約は、日本国法に準拠するものとします。 本ソフトウェア利用に際して、訴訟の必要が生じた場合には、名古屋地方裁判所を第一審の専属管轄裁判所とします。

テンプレートは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を活用してみてください。