ニフクラ mobile backend(mBaaS)お役立ちブログ

スマホアプリ開発にニフクラ mobile backend(mBaaS)。アプリ開発に役立つ情報をおとどけ!

ファイルアップロードを簡単に行えるjQueryプラグインを作りました

f:id:mbaasdevrel:20180220150603p:plain

NCMBの機能をjQueryプラグイン化することで、特定の目的を素早く解決できるようになります。今回はファイルアップロードを簡単にするプラグインを作りました。動作は下の画像をご覧ください。

f:id:mbaasdevrel:20180220150358g:plain

使い方

まず必要なJavaScriptファイルとCSSファイルを読み込みます。なお、jQueryに依存しているのでjQueryも読み込んでください。リポジトリはNCMBMania/fileuploaderになります。

CDNを使う場合には下記のようになります。

<script src="//cdn.rawgit.com/NCMBMania/fileuploader/master/ncmb_fileuploader.js"></script>
<link rel="stylesheet" href="//cdn.rawgit.com/NCMBMania/fileuploader/master/ncmb_fileuploader.css">

HTMLの用意

HTMLではファイルをD&Dする枠を用意します。CSS側で #drag-drop-area で固定で指定していますが、必要に応じてCSSを変更してください。

<div id="drag-drop-area">
  <p class="drag-drop-info">ここにファイルをドロップ</p>
</div>

JavaScript側は下記のように実装します。fileUploadメソッドがファイルアップロード処理を行います。引数としてアプリケーションキーとクライアントキー、そして管理画面のURLあるアプリケーションIDを指定します。

const applicationKey = 'YOUR_APPLICATION_KEY';
const clientKey = 'YOUR_CLIENT_KEY';
const applicationId = 'YOUR_APPLICATION_ID';
$('#drag-drop-area').fileUpload({
  applicationKey: applicationKey,
  clientKey: clientKey,
  applicationId: applicationId
}, (urls) => {
  // アップロード後されたファイルのURL
  console.log(urls);
}, (err) => {

});

後はファイルのD&Dが行われて、ファイルストアへアップロードが完了すると、そのURLが返ってきます。

アプリケーションIDとは

アプリケーションIDは下記のような管理画面のURLで言うところの TTuIeDIVY6fSS5Hk になります。

https://console.mb.cloud.nifty.com/#/applications/TTuIeDIVY6fSS5Hk

このアプリケーションIDはファイルストアをHTTPS経由で公開されるURLに使われます。

https://mb.api.cloud.nifty.com/2013-09-01/applications/TTuIeDIVY6fSS5Hk/publicFiles/image.png

このため、引数で指定する必要があります。

注意点

返ってくるURLの配列はHTTPSでファイルへアクセス可能なものとなっています。このURLを使うためには管理画面のファイルストアの設定にある、公開ファイル設定 > HTTPSでの取得を有効にしなければなりません。

f:id:mbaasdevrel:20180220150603p:plain

まとめ

このプラグインを使うことでファイルストアへの画像アップロードが簡単になります。ぜひお試しください。

中津川 篤司

中津川 篤司

NCMBエヴァンジェリスト。プログラマ、エンジニアとしていくつかの企業で働き、28歳のときに独立。 2004年、まだ情報が少なかったオープンソースソフトの技術ブログ「MOONGIFT」を開設し、毎日情報を発信している。2013年に法人化、ビジネスとエンジニアを結ぶDXエージェンシー「DevRel」活動をスタート。