Documentation

フラグメントにデフォルトのリソースを含める

フラグメントセットに画像(例: .gif.jpg.jpeg.png)を含めて、フラグメントで使用できるようにすることができます。 ドキュメントとメディアなどの他のアプリケーションではなく、フラグメントと一緒に画像を保持すると便利です。 ここでは、フラグメント セットに画像リソースを含める方法と、フラグメントで画像リソースを使用する方法を学びます。

注釈

Liferay DXP 7.4以降の場合、フラグメントコレクションはLiferay UIではフラグメントセットと呼ばれます。

リソースとともにフラグメント セットをインポートする

新しいLiferayインスタンスを実行します。

docker run -it -m 8g -p 8080:8080 liferay/dxp:7.4.13-u22

http://localhost:8080でLiferayにサインインします。メールアドレスtest@liferay.comとパスワードtestを使用してください。プロンプトが表示されたら、パスワードをlearnに変更します。

次に、フラグメント セットのサンプルをインポートして、フラグメント リソースがどのように機能するかを確認します。

  1. サンプルのリソースフラグメントセット をダウンロードして解凍します。

    curl https://learn.liferay.com/dxp/latest/ja/site-building/developer-guide/developing-page-fragments/liferay-i6r3.zip -O
    
    unzip liferay-i6r3.zip
    
  2. フラグメント ツールキットをセットアップします。

    cd liferay-i6r3
    
    ./setup_tutorial.sh
    

    スクリプトによって報告された満たしていない要件をすべて解決し、環境の準備が整ったと報告されるまでスクリプトを再実行してください。

  3. 以下の yarn run import コマンドを使用して、フラグメントツールキットでフラグメントセットをDockerコンテナにインポートします。

    yarn run import
    
    ...
    ? Liferay host & port http://localhost:8080
    ? Username [email protected]
    ? Password [hidden]
    
    Checking connection...
    Connection successful
    
    ? Company ID liferay.com
    ? Group ID Liferay DXP
    
    Building project...
    Importing project...
    
    ✔ Fragment I6R3 Card imported
    
    Project Imported
    
  4. フラグメントセットが利用可能であることを確認します。 ブラウザでhttps://localhost:8080にアクセスし、画面左側のサイトメニューで、 [デザイン] → [フラグメント] に移動します。 I6R3セットが他のフラグメントセットと一緒に表示されるはずです。

  5. I6R3 セット] をクリックします。

  6. [Resources] タブをクリックします。 books.png 画像がリソース リストに表示されます。

    リソースはフラグメントセットで使用できます。

リソースを含むフラグメントセットストラクチャー

リソースを含むフラグメントセットは、次の構造を使用します。

  • collection.json: {"name":"Set Name","description":"Set description"}の形式でセットを説明するテキスト ファイル。

  • [fragment-name]/: フラグメントのすべてのファイルが含まれています。

  • resources/: セットのすべてのフラグメントで使用可能なファイルが含まれています。

ちなみに

また、フラグメントエディターリソース タブから画像をアップロードすることも可能です。

画像ファイルはフラグメントの HTML で構文 [resources:image-name.extension] を使用して参照されます。 サンプルのフラグメント HTML には、次の img 要素があります。

<img
    class="card-img-top"
    src="[resources:books.png]"
/>

画像リソースをフラグメントに埋め込みます。

注釈

リソース名は大文字と小文字が区別され、参照内の名前と大文字と小文字が正確に一致する必要があります。

ちなみに

img[src="[resources:image-name.extension]"] という構文を使用して、CSS で画像リソースのスタイルを設定できます。

新しいリソースを含める

フラグメントにリソースを組み込んで参照する方法がわかったので、サンプルのフラグメント セットで新しいリソースを使用できます。

  1. https://www.freeimages.com/ から取得した画像などを liferay-i6r3.zip/src/i6r3-set/resources/ フォルダにコピーします。

  2. 上記と同様に、Docker コンテナにフラグメントセットを再度インポートします。

    yarn run import
    
  3. フラグメントセットにリソースが含まれていることを確認します。 UI の [Fragments] ページで、 [I6R3 セット] を選択し、 [Resources] タブをクリックします。 新しい画像がリソース リストに表示されるはずです。

    新しい画像がセットのリソースリストに表示されることを確認します。

  4. セットの [Fragments] タブを選択してから [I6R3 カード] フラグメントをクリックして、 [I6R3 カード] フラグメントを開きます。 フラグメント ソースがフラグメント エディターに表示されます。

  5. 新しい画像リソースを使用するようにフラグメントを更新します。 img 要素の src="[resources:books.png]" 属性から book.png を削除し、src="[resources: の後に新しい画像ファイルの名前を入力します。 画像ファイル名の属性値がカーソルの下に表示されます。 その属性値を選択します。

    フラグメントエディタ―には、一致するリソースが一覧表示されます。

  6. フラグメントが新しい画像をレンダリングすることを確認します。

    フラグメントは新しいリソース画像を使用する必要があります。

注釈

フラグメント セット内のすべてのフラグメントがセットのリソースにアクセスできます。

これで、画像リソースのフラグメント セットの使用方法がわかりました。