ファイルの操作

最終更新日: 2021.03.09

このページはチュートリアルの一部であり、最初から最後まで順番に実行する必要があります。最初のページに移動します：Xperienceのインターフェース。

以下について説明します

ℹ️重要な注意点

Dancing Goatは、チュートリアルの目的で使用される特定のサンプルウェブサイトです。あなたの会社のウェブサイトでの編集体験は、異なるページテンプレートやウィジェットが利用可能になるなど、異なるかもしれません。

ページのコンテンツを操作する方法や、画像をアップロードする方法はすでに知っています。ここでは、Xperience以外で作成した画像やその他のファイルでできることを詳しく見ていきましょう。

Xperience では、画像以外にも、動画、Word や PDF ドキュメント、圧縮パッケージなど、あらゆるファイルをアップロードできます。開発者は、ウェブサイトにアップロードできるファイルの種類を、最も一般的なもの（画像、文書、動画）に制限している可能性が高いでしょう。また、画像などのアップロードされたファイルの一部は、Xperience の管理画面で直接プレビューすることができます。ただし、ファイルをプレビューできるかどうかは、Xperience の機能ではなく、Web ブラウザの機能に依存します。

ファイル

Xperienceにファイルを追加する方法はいくつかあります。Xperienceで最も一般的な2つの方法は、ファイルをメディアライブラリにアップロードするか、添付ファイルとしてページに追加することです。

メディアライブラリ

Media librariesアプリケーションを使用して、Xperienceのウェブサイトに異なるサイズや種類のファイルを保存することができます。メディアライブラリに保存されたファイルはすべて、メディアライブラリファイルと呼ばれます。

メディアライブラリは、XperienceのWebサイトにファイルを保存するのに適した方法です。既存のメディアライブラリにファイルをアップロードすることも、新しいメディアライブラリを作成することもできます。

ページの添付ファイルに比べて、メディアライブラリには多くの利点があります。

たとえば、ライブラリ内のフォルダにファイルを整理することができます。メディアライブラリファイルをウェブサイト上のさまざまな場所で再利用することができます。また、メディアライブラリファイルを更新すると、ウェブサイト全体で更新されます。

このチュートリアルでは、メディアライブラリについての詳細は説明していません。メディアライブラリとそのファイルを作成、整理、削除する方法をご自由にご覧ください。

画像の編集

ウェブサイトに画像をアップロードする前に、Photoshopや他のグラフィックエディタなどで画像の最終調整を行うことをお勧めします。しかし、Xperienceには画像エディタが内蔵されているので、外出先などでファイルを素早く調整することができます。編集したいアップロードされた画像（pngやjpgなど）をプレビューするには、ファイルのサムネイル名にカーソルを合わせます。

編集ボタンをクリックすると、Xperienceに内蔵された画像エディタが開きます。これを使って、Xperienceで直接画像をトリミング、サイズ変更、回転させることができます。ファイルのプロパティタブでは、メタデータを編集することができます。これを実装すると、画像が表示されているページの HTML マークアップにメタデータが追加されます。これは、画像のSEO対策に役立ちます。

非画像ファイルの操作

サポートされている画像とは異なるファイルタイプをアップロードした場合でも、ファイル名や説明などのメタデータの一部を編集することができます。

ページの添付ファイル

ページの添付ファイルは、ページの一部であり、ページアプリケーションで作業します。ファイルをページに添付すると、そのファイルはページにバインドされます。ページを移動すると、その添付ファイルも移動します。ページを削除すると、添付ファイルもすべて削除されます。

Xperienceでは、1つのページに追加できる添付ファイルの数に制限はありません。しかし、より大きなファイルを追加したり、たくさんのファイルをアップロードしたりする必要があるとします。その場合は、代わりにメディアライブラリアプリケーションを使用することをお勧めします。なぜでしょうか？添付ファイルの数やサイズがページのパフォーマンスに影響を与え、読み込み時間が遅くなる可能性があるからです。

ページの添付ファイルのアップロード

ページの添付ファイルをアップロードする方法は3つあります。

実装されていれば、コンテンツタブのファイルアップローダーを利用することができます。例えば、Dancing Goatの記事のティザー画像は添付ファイルです。
2 つ目の方法は、Propertiesドロップダウンメニューの Attachmentsタブでファイルをアップロードすることです。ファイルを添付ファイルとしてアップロードするには、New attachmentボタンをクリックします。Dancing goat のウェブサイトでは、この方法でページに添付されたファイルがAttachmentsタブに一覧表示されます。この機能をテストするには、チュートリアルウェブサイトの任意の記事にファイルをアップロードしてみてください。
最後に、開発者はページにファイルを添付できるページビルダーウィジェットを用意することもできます。このアプローチは推奨していないので、Dancing Goatのウェブサイトではデモしていません。例えば、ページビルダーを使ってページに画像を表示したい場合は、メディアライブラリファイルを使うべきです。

開発者は、あなたのウェブサイトのビジネス要件に応じて、どのような状況でどの方法を使うべきかを定義しています。また、ContentタブまたはAttachmentsタブのいずれかで、既存の添付ファイルを更新、編集、削除することができます。Xperience では、メディアライブラリファイルと同様に、添付画像にも編集オプションが用意されています。

💡課題

コーヒーサンプルのランディングページにぴったりの画像を見つけました。その画像をヒーロー画像ウィジェットにアップロードすることにしました。この画像をヒーロー画像ウィジェットに正しく表示するには、回転などの編集が必要です。また、以前のヒーロー画像を今後使用する予定がないので、メディアライブラリから削除してください。

❔ヘルプ

ステップバイステップのガイドです。

PagesアプリケーションのLanding pagesの下にあるCoffee samplesページを開きます。
カーソルをヒーロー画像ウィジェットに移動します。
コンピューターから新しいヒーロー画像をアップロードします。
Saveボタンをクリックします。
Media librarieアプリケーションを開き、Graphicsメディアライブラリの編集(✏️)ボタンをクリックして、画像を確認して編集します。
画像の横にある編集(✏️)ボタンをクリックして、画像エディタを開きます。(どのエディタかわからない場合は、画像名の横にある画像アイコンにカーソルを合わせると、画像をプレビューすることができます)
画像エディタのRotationオプションを開きます。
左に90度回転オプションを選択します。
[Save & Close]ボタンをクリックします。
Pagesアプリケーションに戻り、コーヒーサンプルページに移動して変更内容を確認します。

以下が視覚的なヘルプです。

前のページ： Xperienceページビルダーの使用— 次のページ：新しいページの追加

完成したページ： 4/6

原文：https://docs.xperience.io/13tutorial/business-tutorial/working-with-files

Document