Hubに含まれるサービスの一つ、ファイルストレージとMonacaアプリを連携します。HubのファイルストレージにはS3が使われています。作成したプロジェクトにファイルストレージ機能を追加していきます。files」を選択して、保存します。設定をローカルのMonacaプロジェクトに反映します。コマンドを実行するとファイルストレージ機能が使えるようになります。Hubの設定は完了です。S3の設定を変更するMonacaアプリからファイルをアップロードするには、S3の設定変更が必要です。いった名前のバケットが作成されています。それを開き、アクセス権限設定の中にある「CORSの設定」を開きます。以下のように記述すると任意のホストからGET/POST/PUTアクセスが許可されます。xmlns="http://s3.amazonaws.com/doc/2006-03-01/"><CORSRule><AllowedOrigin>*</AllowedOrigin><AllowedMethod>GET</AllowedMethod><AllowedMethod>POST</AllowedMethod><AllowedMethod>PUT</AllowedMethod><MaxAgeSeconds>3000</MaxAgeSeconds><AllowedHeader>*</AllowedHeader></CORSRule></CORSConfiguration>さらに「バケットポリシー」を変更してGETアクセス可能にします。リソース名はご自身の環境に合わせて変更する必要がありますので注意してください。"arn:aws:s3:::xxxxx-userfiles-mobilehub-99999/public/*"}]}この二つの設定を行うことでファイルのアップロードと表示が可能になります。Amplifyから「Storage」モジュールを取得しておきます。UIでファイルをアップロードする画面を作ります。アップロード後、ons-cardの中に画像を表示します。タグ内に処理を記述します。ファイルを選択したタイミングでアップロード処理を行います。メソッドで実行します。url;});};};なお、保存が完了した際の返り値の中にファイルの保存先URLはなかったため、若干複雑なURL生成処理を行っています。選択されたファイルがアップロードされ、画面上に表示されます。publicフォルダの中に格納されています。S3はCloudfrontに対応していますので、設定を行うことでCDN配信が可能になります。その場合には表示用のURLが上記のコードとは異なりますのでご注意ください。まとめS3の設定などが必要といった面倒さはありますが、たった数行のJavaScriptのコードでファイルアップロードが実装できるので、便利に使えそうです。今回はストレージに対してパブリックアクセス可能としましたが、認証を行って、S3上のアクセス権限によってファイルに対する操作の可否を設定することもできます。今回のコードはgoofmint/Monaca_AWS_Mobile_Hub_Demoにアップロードしてありますので実装時の参考にしてください。中津川篤司プログラマ、エンジニアとしていくつかの企業で働き、28歳のときに独立。2004年、まだ情報が少なかったオープンソースソフトの技術ブログ『MOONGIFT』を開設し、毎日情報を発信している。2013年に法人化、ビジネスとエンジニアを結ぶエバンジェリスト業「DevRel」活動をスタートした。