作成するアプリ

ACMS_Appの基本的な仕組みを使って、エントリーのリストを表示するGETモジュールを作成してみます。 今回は拡張アプリで作ることにより、モジュール専用の管理画面も作ってみたいと思います。

abstract クラスの継承

ACMS_APP を継承したクラス /php/AAPP/Custom.php を作成します。 クラス名は AAPP_ファイル名 に合わせてください。

ACMS_APP は abstract(抽象)クラス で メソッドも全て abstract で定義されています。 これを継承して拡張アプリのインストール時などの動作を実装していきます。（DBを専用で使う時などはここでテーブルを用意したり、破棄してください）

今回は特にDBなどは使わないので空っぽの実装にしておきます。

引用ユニットとは、下の図のようにURLを入力するとリンク先のページの概要と画像をセットにして表示するユニットです。メタタグのOGP情報やディスクリプションからページの概要を取得し、メタタグのOGP画像から画像を取得します。

入力例

出力例

編集設定

引用ユニットを利用するには管理画面のコンフィグ > 編集設定画面から設定をする必要があります。下の図のように追加ボタンを押し、モードから引用を選択し、それに対するラベルの名前を決めてください。ラベルの名前は任意です。保存をすれば設定したラベル名のついたボタンがエントリーの編集画面で使えるようになります。

エントリーの編集画面

エントリーの編集画面より下の図のように登録したラベルのボタンより、引用URLを入力してお使いください。

Twitter でつぶやいたツイートを引用する

引用ユニットではTwitter でつぶやいたツイートを引用することもできます。

設定方法

管理画面から コンフィグ > プロパティ設定 に移動し、「Twitter アプリケーション」の項目を設定します。設定後、コンフィグ > 外部認証設定 で認証を行います。詳しくは、カスタマイズTipsの Twitter と連携する際の事前設定 の記事を参考ください。

設定完了後、引用ユニットをエントリーに追加し、引用したいツイートのURLを記入します。

保存をしたら、記入したURLのツイートがエントリーに反映されています。

ビデオユニットではYouTubeやVimeoといった動画を埋め込むのためのユニットです。テンプレートをカスタマイズすることで、下の図のようにVideo IDを入力するとそれに対応する動画を表示することができます。

入力例

出力例

Video IDとは

動画サービスには基本的に個別の動画に対してIDが付けられています。IDは下の例のようにURL欄で確認できます。

編集設定

引用ユニットを利用するには管理画面 > 編集画面 > 編集設定から設定をする必要があります。下の図のように追加ボタンを押し、モードからビデオを選択し、それに対するラベルの名前を決めてください。ラベルの名前は任意です。保存をすれば設定したラベル名のついたボタンがエントリーの編集画面で使えるようになっています。

また、エントリーの編集画面でビデオユニットのサイズの指定が出来ます。

表示サイズ

ビデオユニットを表示するサイズをパーセント指定、またはclass属性（例：acms-col-sm-6）を指定します。

サイズ

表示されるビデオの実際の大きさを幅×高さでピクセル指定します。YouTubeの場合は16:9の割合でプレーヤーが表示されるため、横幅から計算した縦幅を入力します（例：横幅を480pxで表示したい場合は、480×(9÷16)=270のため、縦幅を270と指定します）。

ラベル

下の図のように、セレクトメニューに対してそれぞれのサイズにラベル付けを行うことができます。

出力用のビデオユニットの編集

標準で、ビデオユニットはYouTubeの動画を出力するように出来ています。
今回はソースコードを編集しVimeoという動画共有サイトの動画をエントリーに表示させてみましょう。/themes/system/include/unit.htmlを使用しているテーマディレクトリの、includeディレクトリのなかにコピーして編集すると良いでしょう

ビデオユニットでは、Video IDを出力する{videoId}、横幅を出力する{x}、縦幅を出力する{y}などの変数が使えます。

編集前

<!-- Video -->
<div class="column-video-{align}{display_size_class}"{display_size}[raw]>
	<div class="column-iframe">
		<iframe width="{x}" height="{y}" src="http://www.youtube.com/embed/{videoId}?wmode=transparent" frameborder="0" allowfullscreen></iframe>
	</div>
</div>
<!-- END unit#video -->

編集後

<!-- Video -->
<div class="column-video-{align}{display_size_class}"{display_size}[raw]>
	<div class="column-iframe">
		<iframe width="{x}" height="{y}" src="http://player.vimeo.com/video/{videoId}" frameborder="0" allowfullscreen></iframe>
	</div>
</div>
<!-- END unit#video -->

編集画面用のビデオユニットの設定

編集画面では下の図のようにYouTube動画を表示してしまうので、こちらもVimeo動画を表示するようにしましょう。

編集画面のためのunit.htmlは/themes/system/admin/entry/unit.htmlにあります。こちらも、編集する場合には使用しているテーマディレクトリの/admin/entry/にunit.htmlをコピーして編集するとよいでしょう。

編集前

<!-- BEGIN_IF [{videoId}/nem/] -->
<td class="entryFormFileentryFormImages">
	<iframe width="240" height="150" src="http://www.youtube.com/embed/{videoId}?wmode=transparent" frameborder="0" allowfullscreen></iframe>
</td>
<!-- END_IF -->

編集後

<!-- BEGIN_IF [{videoId}/nem/] -->
<td class="entryFormFileentryFormImages">
        <iframe width="240" height="150" src="http://player.vimeo.com/video/{videoId}" frameborder="0" allowfullscreen></iframe>
</td>
<!-- END_IF -->

これで、下の図のように管理画面にもVimeo動画が表示されるようになりました。