React アプリケーションで Cloudinary でイメージ ファイルをホストする方法

React アプリケーションで Cloudinary でイメージ ファイルをホストする方法

多くのアプリケーションは、そのコンテンツを Web に依存しています。サードパーティのクラウド プラットフォームでイメージ アセットをホストすることにより、アプリからイメージ アセットに高速かつ効率的にアクセスできるようになります。

さらに、オンプレミス サーバーを使用してアセットをホストする場合に発生するストレージと帯域幅のコストを回避できます。これが、Cloudinary のような画像ホスティング クラウド ソリューションの人気が高まっている理由です。

Cloudinary を使用してイメージ アセットをホストする方法を学びましょう。

イメージ ホスティングとは何ですか? なぜ重要なのですか?

画像ホスティングは、サードパーティのクラウド プラットフォームに画像アセットやその他のデジタル メディアを保存してアクセスできる Web ホスティング サービスの一種です。

画像などのメディア アセットは、あらゆる Web アプリケーションで優れたユーザー エクスペリエンスを作成する上で不可欠です。画像ホスティング サービスを使用すると、アセットをクラウドから簡単にアップロード、保存、取得、管理できるため、ロード時間の短縮と画像品質の向上によってアプリケーションのパフォーマンスが向上します。

クラウディナリーとは?

Cloudinary は、クラウドベースのメディア管理プラットフォームです。画像や動画などのデジタル メディア アセットを簡単にアップロード、保存、管理できる機能を提供します。基本的に、Cloudinary を使用すると、あらゆるアプリケーションに必要なすべてのデジタル メディアを 1 つのプラットフォームから簡単に管理できます。

データ サーバー上の接続されたデータ ノードのネットワーク

画像ファイルをホストする Cloudinary プロジェクトを設定する

画像ファイルのアップロードとホスティングを開始するには、Cloudinaryアカウントにサインアップしてください。

アカウント ダッシュボードにログインし、左側のメニュー ペインにある設定アイコン タブをクリックします。

Cloudinary 設定 ユーザーダッシュボードのアイコンタブ

設定ページで、[アップロード] ボタンをクリックして、アップロード設定ページを開きます。

アップロード オプションが強調表示された Cloudinary 設定ページ

次に、 [アップロード プリセットの設定] セクションに移動し、[アップロード プリセットの追加] をクリックして、アプリケーション用の新しいアップロード プリセットを作成します。

アップロード プリセットは、Cloudinary にアップロードするメディア ファイルのデフォルト構造を定義するパラメーターの構成です。メディア ファイルをアップロードするたびに適用する一連のルールを定義できます。

事前設定されたパラメーターにより、Cloudinary はすべてのメディア ファイルをアプリケーションへの配信用に最適化し、パフォーマンスを向上させ、読み込み時間を短縮します。

プリセット設定ページのアップロード

プリセットの名前を入力し、表示されるドロップダウン メニューからunsignedモードを選択します。署名モードを使用すると、Cloudinary がメディアのアップロードを認証および承認するために使用する方法を指定できます。

署名なしモードを選択すると、Cloudinary で認証することなく、アプリケーションから Cloudinary ストレージにアップロードできます。簡単に言えば、このモードでは画像を選択して、アプリケーションから直接アップロードできます。Cloudinary は、リクエストに応じてそれを配信します。

Cloudinary Unsigned プリセット設定ページ

これらの変更を行った後、[保存] をクリックしてアップロード プリセットを作成します。

デモ React アプリケーションを作成する

Cloudinary API エンドポイントとアップロード ウィジェットを使用して、アップロード機能を処理するシンプルな React アプリケーションをセットアップできます。

開始するには、デモ用の React アプリケーションを作成します。次に、以下のコマンドを実行して開発サーバーを起動し、ブラウザーで http://localhost:3000 に移動して結果を表示します。

npm start

次に、このコマンドを実行して、ブラウザから HTTP リクエストを作成するために使用される JavaScript ライブラリである Axios をインストールします。

npm install axios

Cloudinary API エンドポイントを使用して画像ファイルをアップロードする

React アプリをセットアップしたら、Cloudinary の API エンドポイントに POST 要求を送信して Cloudinary クラウド ストレージに画像ファイルをアップロードするアップロード コンポーネントを作成します。次に、API 応答を分解して、アップロードされた画像を表示します。

アップロード コンポーネントを作成する

/src ディレクトリに新しいフォルダーを作成し、components. このフォルダーに、新しいファイル Upload.js を作成します。

Upload.js ファイルに、次のコードを追加します。

import React, {useState} from 'react';
import Axios from "axios";

function Upload() {
  const [uploadFile, setUploadFile] = useState("");
  const [cloudinaryImage, setCloudinaryImage] = useState("")

  const handleUpload = (e) => {
    e.preventDefault();
    const formData = new FormData ();
    formData.append("file", uploadFile);
    formData.append("upload_preset", "your upload preset name");

    Axios.post(
     "https://api.cloudinary.com/v1_1/your Cloudinary cloud name/image/upload",
     formData
   )
    .then((response) => {
      console.log(response);
      setCloudinaryImage(response.data.secure_url);
    })
    .catch((error) => {
      console.log(error);
    });
  };

  return (
    <div className="App">
         <section className="left-side">
          <form>
              <h3> Upload Images to Cloudinary Cloud Storage</h3>
              <div>
                <input type="file"
                onChange ={(event) => {setUploadFile(event.target.files[0]);}}
              />
              </div>
             <button onClick = {handleUpload}> Upload File</button>
            </form>
         </section>
         <section className="right-side">
          <h3>The resulting image will be displayed here</h3>
          {cloudinaryImage && (<img src={cloudinaryImage} />)}
        </section>
    </div>
  );
}
export default Upload;

アップロード コードの機能は次のとおりです。

  • uploadFilecloudinaryImageの 2 つの状態を宣言します。これらを使用して、アップロードされたファイルと Cloudinary からの結果の画像を保存します。
  • 入力フィールドでは、マシンのファイル システムからイメージ ファイルを選択できます。ファイルを選択すると、uploadFile 変数の値が更新されます。
  • handleUpload関数は、Axios を使用して Cloudinary へのポスト リクエストを作成します。アップロードされたファイルと、Cloudinary クラウド アカウントに関連付けたアップロード プリセットが渡されます。送信ボタンをクリックすると、この関数が呼び出されます。
  • コードが応答を受信すると、Cloudinary イメージのsecure_urlを state に格納します。
  • 最後に、2 つのセクションをレンダリングします。1 つはファイルをアップロードするためのもので、もう 1 つは結果の画像を表示するためのものです。

app.js ファイルに upload.js コンポーネントをインポートしてレンダリングします。画像ファイルを選択してアップロードすると、ブラウザーに次のような応答が表示されます。

画像ファイル アップロード コンポーネントとアップロードされた画像を示す React アプリケーション

Cloudinary アカウントに移動し、[メディア ライブラリ] タブをクリックして、アップロードされたファイルを表示します。

Cloudinary ウィジェットを使用して画像ファイルをアップロードする

Cloudinary ウィジェットを React アプリケーションに統合すると、アップロード プロセスが大幅に簡素化されます。さらに、ウィジェットを使用すると、Dropbox などのさまざまなソースから画像ファイルをアップロードできます。

ウィジェットを React アプリに統合するには、まず、ウィジェットのリモート JavaScript ライブラリを /public ディレクトリの index.html ファイルに含める必要があります。index.html ファイルの head セクションに以下のスクリプト タグを追加します。

<script src="https://upload-widget.cloudinary.com/global/all.js"
 type="text/javascript"></script>

次に、upload.js ファイルに次の変更を追加します。

  • 次の React フックをインポートします: useEffect および useRef。 import {useState, useEffect, useRef} from 'react';
  • 以下のコードを追加します。     const cloudinaryRef = useRef();
        const widgetRef = useRef();

        useEffect(() => {
            cloudinaryRef.current = window.cloudinary;
            widgetRef.current = cloudinaryRef.current.createUploadWidget({
                cloudName: 'your cloudinary cloud name',
                uploadPreset: 'the upload preset name'
            }, (error, result) => {
                console.log(error, result)
            });
        }, []);
    上記のコードは、useRef フックを使用して Cloudinary オブジェクトとアップロード ウィジェットへの参照を作成します。useEffect フックは、コンポーネントのマウント時にコールバック内のコードを 1 回実行します。次に、クラウド名とアップロード プリセット名を使用してウィジェットを初期化し、ウィジェットから発生する可能性のある結果とエラーをログに記録します。

  • 最後に、クリックするとアップロード ウィジェットを呼び出して開くボタンを作成します。 <button onClick = { () => widgetRef.current.open()} >
      Upload Via Widget
    </button>

Cloudinary を最大限に活用する

Cloudinary は、画像ファイルやその他のメディア資産の管理プロセスを簡素化する、使いやすいソリューションを提供します。

Cloudinary は、クラウド ストレージ プラットフォームを提供するだけでなく、画像の変換や画像の最適化などの機能も提供します。これらは、メディア資産の品質を向上させるために不可欠なツールです。

コメントを残す

メールアドレスが公開されることはありません。 が付いている欄は必須項目です