Liferay IFrameポートレットの紹介 その1

aegifの名倉です。
本日はIFrameポートレットについてご紹介したいと思います。IFrameポートレットというものは、Liferayのページの中に別のWebサイトのページを埋め込むときに利用されるポートレットです。Liferayはポータル製品ですので、いろいろなシステムを集約して情報を表示するビューを提供するというのは良くある要件のうちの一つです。集約するシステム向けのカスタムのポートレットを作成して、ビューを提供することもできますが、そのシステムがWebユーザインタフェースを持っている場合は、IFrameポートレットを使ってお手軽に連携することができます。

外部のWebページの取り込み

では早速IFrameポートレットを使ってみましょう。
IFrameポートレットはポートレットの追加メニューで「サンプル」カテゴリ内にあります。緑色のアイコンが表示されていますのでページに複数配置することも可能です。IFrameポートレットをページ上に配置するとポートレット内に「ユーザが参照できるようにポートレットを設定してください。」というメッセージのリンクが表示されます。

このリンクをクリックするか、または右側のレンチアイコンをクリックし、設定メニューをクリックすると次のような設定画面が表示されます。

取り込み先のURLのテキストボックスに取り込みたいWebサイトのページのURLを入力します。ためしにaegif.jpと入力してみましょう。そうするとIFrameポートレットのフレーム内にaegif.jpのWebページが埋め込まれる形で表示されます。

もともとaegif.jpのWebページはブラウザ全体で表示されるようにできているので、IFrameポートレット内には全部収まりきらないため、上下左右ににスクロールバーが表示されています。
これで、簡単に他のWebサイトのページを取り込むことができました。

Liferayポータル内のページの埋め込み

ページの埋め込み

「コンテキストパスからの相対パス」のチェックボックスをチェックすることでLiferayポータル内部のサイトのページにアクセスすることができるようになります。
取り込みたいページのURLを仮に
http://localhost:8080/web/test/home
だとした場合は、テキストボックスには
/web/test/home
と入力します。Liferay内の別のサイトであっても埋め込むことが可能です。
さらにいえば、埋め込められるものは別にページだけに限りません。特定のページに配置されているポートレットやリポジトリに格納されている画像ファイルなども埋め込むことができます。

ポートレットの埋め込み

ポートレットを埋め込む場合は、ポートレットの配置されているページ（今回は/web/guest/homeとします）にアクセスします。埋め込みたいポートレットの設定メニューをクリックし、共有タブの「任意のWebサイト」タブを開くと

<script src="http://localhost:8080/html/js/liferay/widget.js" type="text/javascript"></script>
<script type="text/javascript">
Liferay.Widget({ url: 'http://localhost:8080/widget/web/guest/test/-/blogs'});

</script>のような記述が表示されます。 ここで記載されているURLの/widget/web/guest/test/-/blogsの部分をIFrameポートレットのテキストボックスに記入します。そうするとIFrameポートレットではこのように表示されます。

画像ファイルの埋め込み

画像ファイルを直接埋め込む場合は、コントロールパネルから埋め込みたい画像ファイルがおかれているサイトを選択し「文書および媒体」メニューを選択します。

画像ファイルをクリックすると次のような画面の詳細情報画面が表示されます。

URLのリンクをクリックするとテキストボックスが表示され、画像ファイルのURLが確認できます。
このリンクのhttp://localhost:8080より後ろをコピーしておいて、IFrameポートレットの取り込み先URLに貼付けます。IFrameポートレットではこのように表示されます。

IFrameポートレットの中に表示されるLiferay内部のページやコンテンツに対するアクセス権限に関しては、それぞれで設定されているアクセス権限が適用されるので、別のサイトのページやコンテンツを無制限に公開するようなことはありません。アクセス権がない場合は次のように表示されます。

以上のような感じで、IFrameポートレットを利用して外部のWebページやLiferayの中のサイトページやポートレット、コンテンツなどを表示することができました。

次回のLiferayの記事では今回取り上げられなかった認証の機能についてお話したいと思います。