ファイルストア利用時にはファイルサイズに注意しましょう

ファイルストアはプランによってファイル上限サイズが異なります。無料のBasicプランの場合は5MB、有料の場合は100MBまでのファイル制限となっています。

最近のスマートフォンでは写真の解像度が上がっており、5MBを超えるケースも出てきています。その結果、ファイルアップロードに失敗してしまう場合があります。この記事ではそういった問題を防ぐ方法をMonaca、JavaScriptを使った場合で紹介します。

利用するライブラリ

Donaldcwl/browser-image-compressionというライブラリがあります。これはファイルサイズを縮小してくれるライブラリになります。まず、これをインストールします。CDNの場合は次のようになります。

<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/browser-image-compression@1.0.13/dist/browser-image-compression.js"></script>

利用例

元のファイルアップロード処理が次のようになっていたとします。ファイル選択ダイアログでファイルを選ぶと、自動的にアップロードを開始する処理です。

document.querySelector('#file').onchange = async e => {
  try {
    const file = e.target.files[0];
    const fileName = 'test.jpg';
    await ncmb.File.upload(fileName, file);
  } catch (e) {
    document.querySelector('#result').innerText = JSON.stringify(e);
  }
}

この場合、次のようなエラーになります。ファイルサイズの上限を超えたというメッセージが出ます。

そこで、 browser-image-compression を間に挟みます。

document.querySelector('#file').onchange = async e => {
  try {
    const file = e.target.files[0];
    const cFile = await imageCompression(file, {
      maxSizeMB: 5,
    });
    const fileName = '1-1.jpg';
    await ncmb.File.upload(fileName, cFile);
  } catch (e) {
    document.querySelector('#result').innerText = JSON.stringify(e);
  }
}

これでファイルサイズを上限5MBに収まるように圧縮してくれます。ほかにも画像の最大高さ、幅を指定することもできます。

差異

元の画像と、変換後の画像です。元の画像は10.6MBだったのに対して、4.2MBまで容量が削減しています。サイズは5472x3648だったのに対して、4938 × 3291に縮小しています。約90%の大きさになっていますが、アプリの中で見る分には特に問題にはならないでしょう。また、EXIFデータはすべて消えています。

画像の圧縮処理ですが、数秒かかるようです。アップロード時間もありますので、処理中はインジケータを出す方がユーザビリティが高くなるでしょう。

まとめ

今後スマートフォンが高機能化するのに伴って、画像ファイルサイズはどんどん大きくなることでしょう。新世代の画像フォーマットもありますが、やはり写真の基本はJPEGのようです。ユーザによってアップロードできる、できないといった問題が生じた場合には、ファイルサイズを疑ってみてください。

中津川 篤司

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