外部ファイル

Essepageにはファイルをアップロードする機能はありません。

HTML、CSS、JavaScriptのようにテキストで記述できるファイルは作成できますが、画像やPDFなどのファイルをプロジェクトへ直接アップロードしたり保存したりすることはできません。

ページに画像を表示したりPDFファイルを提供したりするには、ファイルを外部サービスへアップロードし、生成されたファイルURLをHTMLまたはCSSに入力します。

ファイルを外部サービスへアップロードし、EssepageではそのファイルのURLを使用します。

/publicはファイルのアップロード領域ではありません

/publicフォルダにページファイルを作成すると、そのファイルに対応する公開URLが生成されます。

しかし、/publicは端末内のファイルをアップロードするための保存領域ではありません。

たとえば、次のようなフォルダを作成しても、画像ファイルを直接アップロードすることはできません。

/public/images

画像やPDFをはじめとする一般的なファイルは、外部のファイルホスティングサービスへアップロードし、URLで接続する必要があります。

画像を表示する

画像をアップロードできる外部サービスへファイルをアップロードし、画像URLをコピーします。

https://example.com/images/flowers.jpg

Essepageで、コピーしたURLを<img>要素のsrc属性に入力します。

<img
    src="https://example.com/images/flowers.jpg"
    alt="A bouquet of colorful flowers"
>

プレビュー画面に画像が表示されます。

PDFなどの一般ファイルをリンクする

PDFファイルも外部サービスへアップロードし、URLでリンクします。

<a
    href="https://example.com/files/company-profile.pdf"
    target="_blank"
    rel="noopener"
>
    View Company Profile
</a>

訪問者がリンクを選択すると、PDFがブラウザで開くか、端末へダウンロードされます。実際の動作は、訪問者のブラウザとファイルホスティングサービスの設定によって異なる場合があります。

ほかの種類のファイルも同じ方法でリンクできます。

<a href="https://example.com/files/sample.zip">
    Download Sample Files
</a>

ファイルホスティングサービスがそのファイル形式に対応し、公開URLを提供していれば、画像やPDF以外のファイルも使用できます。

ファイルをアップロードする外部サービスを選ぶ

ファイルをアップロードし、公開URLを提供するサービスは数多くあります。

Amazon S3のほか、Cloudflare R2、Backblaze B2、DigitalOcean SpacesなどのS3互換オブジェクトストレージを使用できます。

画像やPDFを簡単に使用できる、Essepage専用ファイルホスティングサービスのEssedropも利用できます。

重要なのはサービスの種類ではなく、アップロードしたファイルへ訪問者のブラウザからアクセスできるURLが提供されるかどうかです。

訪問者のブラウザから直接アクセスでき、外部Webサイトでの使用が許可されているファイルURLであれば、Essepageで使用できます。

S3互換ストレージを使用する

ファイルが多い場合や、ストレージ容量とドメインを自分で管理したい場合は、Amazon S3またはS3互換オブジェクトストレージを使用できます。

代表的なサービスは次のとおりです。

• Amazon S3
• Cloudflare R2
• Backblaze B2
• DigitalOcean Spaces

サービスへ登録し、バケットを作成して必要な設定を行い、ファイルをアップロードすると、次のようなファイルURLを使用できます。

https://files.example.com/images/flowers.jpg

<img
    src="https://files.example.com/images/flowers.jpg"
    alt="A bouquet of colorful flowers"
>

S3互換サービスでは、ストレージ容量やファイル転送量を細かく管理できます。ただし、バケットや公開アクセスの設定が必要なため、初めて使用する場合は少し複雑に感じることがあります。

ファイルを簡単にアップロードしてURLを使用したい場合は、一般的なファイルホスティングサービスのほうが便利なことがあります。

Essedropを使用する

Essedropは、Essepageで使用するファイルをアップロードし、URLで提供するために開発されたEssepage専用のファイルホスティングサービスです。

基本的な使用手順は次のとおりです。

1. ファイルをEssedropへドラッグ＆ドロップしてアップロードします。
2. 生成されたファイルURLを選択してコピーします。
3. EssepageのHTMLまたはCSSにURLを貼り付けます。
4. ページを保存し、プレビューでファイルが表示されることを確認します。
5. 変更を公開サイトへ適用します。

Essedropは、複雑な設定を行わずにEssepageで使用するファイルのURLを作成したい場合に便利です。

EssedropはEssepageに組み込まれたアップロード機能ではなく、別途提供されるファイルホスティングサービスです。ファイルのアップロードと管理はEssedropで行います。

現在、画像とPDFファイルに対応しています。対応するファイル形式と利用条件はEssedropで確認できます。

ファイルURLを確認する

ファイルURLをEssepageで使用する前に、ブラウザのアドレスバーへ直接入力し、ファイルが表示されることを確認してください。

• URLがhttps://で始まっているか
• ログインしなくてもファイルへアクセスできるか
• ファイル共有画面ではなく、ファイル自体が開くかダウンロードされるか
• 外部Webサイトでのファイル使用が許可されているか

ファイルが表示されない場合

外部ファイルがページに表示されない場合は、次の内容を確認してください。

• ファイルURLが正しいか
• ファイルURLをブラウザで直接開けるか
• ログインしなくてもファイルへアクセスできるか
• ファイル共有画面ではなく、ファイル自体のURLを使用しているか
• 外部Webサイトでのファイル使用が許可されているか
• ファイルが削除されていないか、URLが変更されていないか

S3互換サービスを使用している場合は、バケットまたはファイルの公開アクセス設定も確認してください。

次のステップ

外部ファイルの使用方法を理解したら、次のドキュメントへ進んでください。

• ページと共通デザインにCSSを適用する：CSS
• プロジェクト内のテキストファイルをページへ挿入する：ファイルのインクルード
• Markdownドキュメントに画像を追加する：Markdown
• 複数のページで共通の画像とデザインを使用する：レイアウト
• 変更を公開サイトへ反映する：公開・適用・一括適用