Webサービスプランナー兼ディレクターのyumeです。
運営しているサイトの1つに、看護師向けのフリー素材サイトがあるのですが、
「Chromeがバージョンアップしたらダウンロードボタンでダウンロードできなくなった」と問い合わせがありました。
看護師🎨イラスト集の素材ダウンロードページ。関係ないけど、この画像花粉症にも使えますね。
今年の花粉やばいです。
現象
HTML5のaタグのdownload属性を使って実装しています。
<a href="https://img.kango-roo.com/upload/images/ki/cold-influenza-cough-mask-female.png" download="cold-influenza-cough-mask-female.png" class="dlBtn ieDlBtn" data-file-name="cold-influenza-cough-mask-female.png"> <img src="/pc/img/ki/common/btn/download.png" alt="無料 ダウンロード"> </a>
ダウンロードさせる画像は、S3に置いてあります。
これまでは、「無料ダウンロード」ボタンを押すと、画像ファイルのダウンロードが始まっていたのですが、
Chromeが65になると、ダウンロードできずにブラウザ内で画像を表示してしまうようになりました。
対処法
結論、S3上の画像ファイルのContent-typeをbinary/octet-streamに変更することで解決しました。
Content-typeはこれまでimage/pngになっていて、それで問題なくダウンロードをさせることができていたのですが、Chrome65では扱いが変わったようです。
AWSのGUIコンソールから変更する場合
「メタデータの変更」からポチポチやっていきます。
CUIで一括変更する場合
Content-typeのみの変更はできないようです。
下記記事では、一度ファイル名を変更して戻す、というやり方が紹介されていましたが、データ量の問題か時間がかかったりしてうまく適用できませんでした。。
AWS S3にアップロードしたファイルのContent-Typeを一括で書き換えるワンライナー - Qiita
そこで、一度S3上でバックアップ用のバケットを作成し、コピーする形で書き換えました。
aws s3 cp --profile <account-name> s3://<bucket_name_for_backup>/<directory> \ --profile <account-name> s3://<bucket_name_for_production>/<directory> \ --metadata-directive REPLACE --Content-Type=binary/octet-stream --delete
--metadata-directive REPLACEをつけるのがポイントです。
問題
今後新規でアップする画像について、サムネイル画像はimage/pngで、ダウンロード画像はbinary/octet-streamにする方法を模索中です。
都度手動でやるのは…うーん。
参考
S3のContent-Dispositionのブラウザ対応について調査してみた - Innovator Japan Engineers’ Blog 「注意点」の項に助けられました
おわりに
意味が分からなすぎてあたふたしていたら、いろんなメンバーが助けてくれました…
- ヘルプデスク
- マークアップエンジニア
- Chromeのバージョンが65になってしまった他の課のメンバー(検証環境の提供)
- インフラエンジニア(SRE)
1つの問題を協力して解決できるってほんとありがたいです( ；∀；)
ということで、
＼\一緒に『明日のはたらくを創る』仲間を募集中です!! /／ 919.jp
