ご覧のページは、お客様の利便性のために一部機械翻訳されています。また、ドキュメントは頻繁に更新が加えられており、翻訳は未完成の部分が含まれることをご了承ください。最新情報は都度公開されておりますため、必ず英語版をご参照ください。翻訳に問題がある場合は、こちらまでご連絡ください。

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

画像ファイル (例: .gif、 .jpg、 .jpeg、または .png) をフラグメントセットに直接含めることができます。画像を、ドキュメントとメディアなどの他のアプリケーションではなく、フラグメントに保存しておくと便利です。フラグメントセットに画像リソースを含めて使用する方法を学習します。

注

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

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

新しいLiferay インスタンスを起動し、以下を実行します。

docker run -it -m 8g -p 8080:8080 liferay/portal:7.4.3.132-ga132

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

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

サンプルリソースフラグメントセットをダウンロードして解凍します。
```
curl https://resources.learn.liferay.com/examples/liferay-i6r3.zip -O
```
```
unzip liferay-i6r3.zip
```

フラグメントセットを手動でインポートします。
フラグメントセットが利用可能であることを確認します。 サイトメニュー () を開き、 デザイン → フラグメントに移動します。セットがリストに表示されます。
I6R3 セットをクリックします。
リソース タブを選択します。 books.png 画像がリソースリストに表示されます。

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

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

collection.json: セットを次の形式で説明するテキストファイル {"name":"セット名"、"description":"セットの説明"}。
[フラグメント名]/: フラグメントのすべてのファイルが含まれます。
resources/: セットのすべてのフラグメントで使用できるファイルが含まれます。

ヒント

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

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

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

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

注

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

ヒント

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

新しいリソースを含める

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

https://www.freeimages.com/などの画像を liferay-i6r3.zip/src/i6r3-set/resources/ フォルダにコピーし、フォルダを zip 圧縮します。
上記と同じようにフラグメントセットを手動でインポートします。

フラグメントセットにリソースが含まれていることを確認します。 UI の フラグメント ページで、 I6R3 セット を選択し、 リソース タブをクリックします。新しい画像がリソースリストに表示されるはずです。
セットの フラグメント タブを選択し、 I6R3 カード フラグメントをクリックして、 I6R3 カード フラグメントを開きます。フラグメントソースがフラグメントエディターに表示されます。
新しい画像リソースを使用するようにフラグメントを更新します。 books.png を img 要素の src="[resources:books.png]" 属性から削除し、 src="[resources:の後に新しい画像ファイルの名前を入力し始めます。画像ファイル名の属性値がカーソルの下に表示されます。その属性値を選択します。
フラグメントが新しい画像をレンダリングすることを確認します。