先日、10文字ホラージェネレーター たるものを制作させていただきました。
「ユーザーが入力した文字をCanvasにレンダリングして画像として書き出す」という非常にシンプルな仕様のサイトです。
生成した画像をローカルにダウンロードしてもらうために、ひさしぶりにダウンロード属性を使ってみたところ、iOS14から仕様が変わっていることに気づきました。
ダウンロード属性とは
aタグに設定する属性です。
リンクされた URL に移動するのではなく、保存するようユーザーに促します。値があってもなくても利用できます。
download は同一オリジンの URL と、 blob:、 data: の各スキームでのみ動作します。
https://developer.mozilla.org/ja/docs/Web/HTML/Element/a#attr-download より引用
という感じで、ユーザーにファイルをダウンロードしてもらう際に便利な属性です。
このダウンロード属性を使って、これまでCanvasにレンダリングした画像をダウンロードしてもらうときは、
- canvasをtoDataURLを使ってbase64にする
- base64をaタグのdownload属性に指定する
としていました。
iOSにおけるダウンロード属性の設定されたaタグをタップした際の挙動
iOS12までは「別タブで画像を開く」という挙動でしたが、iOS13から名前通りダウンロードする仕様に変わったようです。
では、ダウンロードしたファイルはどこで管理されているのかというとファイルアプリ内に保存されています。
ファイルアプリ内の画像をカメラロールに保存するためには、長押し → 「共有」 → 「画像を保存」と選択する必要があり、なかなか直感的ではありません。
そんなこんなで、10文字ホラージェネレーターでは、生成した画像を長押しすることで直接カメラロールに保存できる機能もつけておいた次第です。
現場からは以上です。
