関係する箇所
今回は「第２部 スニペットの作成」で作ったMediaRSSをCoolIrisに渡し、MaxiGalleryの画像をスライド表示させます。CoolIrisはブラウザのプラグイン経由でCoolIrisサーバーで表示する方法と任意のページに埋め込む方法があります。前者は簡単なチャンクとリンク、後者はリソースで実現します。今回作成するMODxの部品は、お馴染みのテンプレート・チャンク・リソース（オレンジの部分）で、コードはHTMLと簡単なJavascriptだけ（PHPは登場しません）。面倒なFLASHの埋め込みタグ（<object>や<embed>）も CoolIris Express というオンラインツールが吐き出すコードをリソースに貼り付けて、ちょいと触るだけのお手軽操作。
１．結果（目的）を再確認
こんな画面を作ります。
ブラウザプラグイン表示
埋め込み表示（黒背景）
埋め込み表示（白背景）
２．画面一杯に表示（プラグイン表示）
２．１ チャンクを作る
たった２行なのでテンプレートに直接打ち込んでもよいのですが、芸が無いのでチャンクにします。チャンクを新規に作成し、以下の設定で保存してください。
| チャンク名 | ： | CoolirisScript |
| チャンクの説明 | ： | MaxiGalleryの画像をCoolIrisプラグインで画面一杯に表示するための宣言 |
| チャンクコード | ： |
<link title="[(site_name)]" rel="alternate" href="[(base_url)]assets/cache/rss/mrss.rss" type="application/rss+xml"/>
<script type="text/javascript" src="[(base_url)]assets/js/piclens-min.js"></script>
※mrss.rss ： デフォルトで作成した場合のMediaRSSファイル名
※piclens-min.js： ここでは自サーバに圧縮したスクリプトファイルを置いてます。下から引用してもOK。
http://lite.piclens.com/current/piclens.js
２．２ チャンクを組み込む
テンプレートの<HEAD> ～ <HEAD>タグ内に下の行を追加します。
２．３ リンクを作る
Ａ．HTMLを直に打ち込む方法
サイドバーあたりに下のコードを打ち込みます（本来はイベントを利用したスマートなコードの方が良いと思いますが、分かり易さを優先して・・・）。
Ｂ．ウェブリンクを作る方法
Wayfinderで生成するメニューにリンクを表示させたい場合はウェブリンクを利用します。管理画面のメインメニューで「ウェブリンクの作成」をクリックし下の設定で保存します。標準リソースに比べるとウェブリンクは使うことが少ないので、使い方や使用シーンがいまひとつピンとこない方もいると思います。下はhref属性でJavascpritを呼び出すちょっと特殊な例ですが、覚えておくと色々便利です。 ＾＾
| リソース名 | ： | 画像を画面一杯に表示 |
| タイトル | ： | 画像を画面一杯に表示 |
| 説明(description) | ： | CoolIrisのプラグイン表示用リンク |
| エイリアス | ： | coolirisplugin |
| リンク属性 | ： | （空）または target=”_blank” とか |
| ウェブリンク | ： | javascript:PicLensLite.start(); |
| 要約（序説） | ： | （お好みで・・・） |
| 使用テンプレート | ： | (blank)またはご自分のテンプレートの状態に応じて・・・ |
| メニュータイトル | ： | ※１ |
| メニューオーダー | ： | (お好みの順で・・・) |
※１ 画像を画面一杯に表示 <img src=”[(base_url)]assets/images/PicLensButton.png” alt=”PicLens” width=”16″ height=”12″ border=”0″/>
※ imgタグはオプション（無くてもＯＫ）。
※ PicLensButton.png： ここでは自サーバに置いてます。下から引用してもOK。
http://lite.piclens.com/images/PicLensButton.png
２．４ テスト
サイトに表示されたリンクをクリックすると、１．の左端のサンプル画面が表示されれば一つ目の実装は終了です。
３．埋め込み表示
３．１ CoolIris Express
FLASHの埋め込みタグ（objectやembed）は手で実装しようとすると結構面倒ですよね。ということで、CoolIris Express というオンラインツールをご紹介。操作は簡単。編集内容をCoolIrisサーバーに保存する場合はFacebookかGoogleのアカウントが必要になります。一時的な使用であれば、3で表示されるログインダイアログを×で閉じればＯＫ。
- コンテンツ選択： MediaRSSを選んでFeed URLを指定
- 画面カスタマイズ： タイトル、行数、テーマ、詳細を設定
- 埋め込みコード生成： Embed codeをコピー
コンテンツ選択
画面カスタマイズ
埋め込みコード生成
３．２ リソースへの埋め込み
リソースを新規に作成し、上でコピーしたコード（<object> ～ </object>）を貼り付けます。サイズに問題がある場合はコードをマニュアルで補正します。ちなみに、MaxiGallery Laboでは、styleやbackgroundcolorパラメータの値をスニペットで動的に設定することで、サイドバーの”表示設定” ＞”背景色”の指定に追従させています。
３．３ FLASHのドメイン認証
CoolIrisのFLASHファイルを埋め込む場合は、crossdomain.xmlというファイルをドメイン内に置く必要があります。
参考サイト）
ENABLE CROSS-DOMAIN ACCESS FOR FLASH（ページの中ほど）
Cross-domain policy file specification
４．後書き
今回は、ウェブリンクやCoolIris Expressの紹介など、Tips的な内容を交えて解説しました。内容は初心者の方でもそれほど難しいことは無かったと思います。次回は最後の仕上げ。「第２部 スニペットの作成」で作ったスニペットを呼び出すプラグインを作りつつ、プラグインの仕組みやキャッシュに軽く触れてこのシリーズを終えたいと思います。
関連ページ
- 実践！MODxプログラミング（第１部 概要）
- 実践！MODxプログラミング（第２部 スニペットの作成）
- 実践！MODxプログラミング（第３部 ページの作成）
- 実践！MODxプログラミング（第４部 プラグインの作成）
0 comments.