null アダプティブメディア機能の紹介

今回はLiferay DXP 7.0からの新機能であるアダプティブメディアについて紹介します。

使用バージョンについて

今回はDXP7.1を使用しますが、7.xであれば同じように動作します。またCommunity EditionでもLiferay CE Adaptive MediaというモジュールがMarketPlaceでLiferay社から公開されているようです。

アダプティブメディアとは

アダプティブメディアとはそもそも何でしょうか。実は機能はとてもシンプル。メディア(サイトにアクセスするデバイス)ごとに最適なメディアを配信(表示)する機能のことです。名前の通りですね。

このアダプティブメディアはAdobe Experience Managerにも搭載されていて、DXPやエンタープライズCMSでは標準的な機能と言えそうです。

アダプティブメディアの設定と使い方について簡単にみていきましょう。

アダプティブメディアの使い方

実はアダプティブメディアはデフォルトで有効になっています。ですので最低限の状態では特に設定なしで使うことができます。

実際に適用されているところを確認してみましょう。

1. ドキュメントとメディアへの画像ファイルのアップロード

ある程度の大きさの画像ファイルをドキュメントとメディアにアップロードします。

 

2.アップロードした画像を貼り付けたWebコンテンツの作成

作成した画像を以下のように選択した基本Webコンテンツを作成します。

デフォルトだとアップロードした画像をWebプレビューでサイズを調整して表示するようになっているのですが、今回はアダプティブメディアの動きがよくわかるようにHTMLモードにしてWebプレビューの設定を外しておきます。

3.作成したWebコンテンツをページ上に配置

作成したWebコンテンツを「Webコンテンツの表示」アプリを使って表示します。

 

4.アダプティブメディアの確認

画像部分のHTMLがどのようになっているかを確認してみます。

 

ウィンドウの大きさによって表示される画像が複数設定されているようです。

実際にウィンドウ幅を1000px以下に縮めて画像をダウンロードしてサイズを確認してみましょう。

アップロードした際のサイズより小さくなっていることがわかります。

 

解像度の追加

アダプティブメディアの解像度はどのように設定されているのかを確認してみましょう。

1.設定の確認

コントロールパネル → 設定 → アダプティブメディア に設定が用意されています。

 

デフォルトでは幅1000px以下のプレビュー用と縦横300px以下のサムネイル用の2つの解像度が定義されているようです。

 

2.解像度の追加

ではここでモバイルデバイス向けに550px以下の解像度を追加してみましょう。

+アイコンをクリックし名前、幅の最大値を設定し保存します。

 

3.変換画像の再作成

作成した解像度のアクションメニューの「残りの要素に適用」をクリックします。

 

4.結果の確認

先ほどと同じWebコンテンツを確認してみましょう。

解像度が550以下で新規の解像度の画像が設定されていることがわかります。

 

まとめ

今回はアダプティブメディアの基本的な使い方を紹介しました。

比較的簡単な設定でプロダクションレベルでも使える機能ではないかと思います。

またアダプティブメディアは定型型のWebコンテンツやブログ、ドキュメントとメディアのサムネイルなどさまざまな場所で使用可能ですので、積極的に活用してみてください。

RANKING
2020.12.28
2021.1.08
2020.12.18
2020.10.30
2020.12.01