Velo 第７５回 メディアマネジャ（２）
メディアマネジャにアップロードしたファイルは fileUrl という内部フォーマットのURLが与えられています。
一方各ページの画像には src というプロパティがあり、これに内部フォーマットのURLを与えると画像が表示できるようになっています。
例えば以下の様に、アップロードボタン(uploadButton)の onChange( )イベントでアップロードファイルの fileUrl を取得し、それを画像(displayImage)の src に与えるとアップロードした画像が表示されます。
実際のURLを取得する
前回の記事でお知らせしました様に、メディアマネジャからアップロードファイルの実際のURLを手動で取得することは可能です。
ではVeloで取得することは可能でしょうか。
そのためには wix-media-backend モジュールから mediaManager API を呼び出してバックエンドで動かす必要があります。
こう言うとハードルが高い気がしますが、ほぼ定型コードなので、「習うより慣れろ」と覚えてしまえば意外に乗り切れるものです。
学習には必ずこう言う山場や壁や崖があり、多少分からなくても「えいや」っと乗り切らねばならない場面が現れます。
皆さんよくご存知のように基礎・基本を単純に積み上げるだけでは良い成果はなかなか得られないものです。
全ての学習は慣れればどうって事はなくなりますのでこう言うときこそ場の雰囲気だけで心が折れない様ににしたいものです。
Webメソッド
バックエンドAPI(サーバー用API)をフロントエンド(ブラウザー)から呼び出すためには、バックエンドに拡張子が「web.js」のファイルを作り、その中でWebメソッドと言う方法で、フロントエンドに輸出する関数にパーミッションを付けてラッピングする必要があります。
先ずはバックエンドに追加(⊕)をクリックし、media.web.js というファイルを作ります。ファイル名は任意ですが拡張子は「web.js」に決められています。
そのファイルの中で以下のコードを確認しましょう。
１行目～２行目に必要なモジュールをインポートしました。
４行目で定数 getDownloadUrl に webMethod( )で作られたラッピング関数を割当てエクスポートしています。
５行目～７行目で、パーミッションは全員、輸出関数は fileUrl を入力すればダウンロード用の URL を返す関数となっています。
ページコード
フロントエンド側に戻ってページコードを確認しましょう。
１行目でエクスポートした getDownloadUrl をバックエンドの media.web.js ファイルからからインポートしています。
６行目でアップロードボタンの onChange( ) イベントハンドラを定義していますが、async/await 演算子を使って非同期対応をしています。
１０行目で fileUrl からダウンロード用URLを非同期で取得しています。
そして画像(displayImage)の src に割り当てています。
画像は内部フォーマットの fileUrl でも表示できますので、ダウンロード用のURL を使うとかえって面倒なコーディングになりメリットはありません。
しかし例えばドキュメントファイルを得て表示するにはダウンロード用URLを使う必要があります。
次回は fetch( ) 関数を使ってテキストファイルをページに表示するコーディングを確認してみましょう。
前回の記事
Velo開発のご依頼はこちら