はじめに
ウェブ上の画像をワンタップで取得・保存できるiOSアプリ「画像ダウンローダー」をリリースしました。本記事では、実装における技術的なポイントや工夫した点を紹介します。
App Store: https://apps.apple.com/jp/app/id6807882065
使用技術
- Flutter（iOS向け）
- WebView（内蔵ブラウザ）
- JavaScript連携（画像の抽出）
- 各種権限・写真ライブラリ連携
- AdMob（バナー広告）
実装のポイント
1. 内蔵ブラウザと画像抽出の連携
内蔵ブラウザとしてWebViewを採用し、ページ読み込み完了後にJavaScriptを注入してDOMを走査する構成にしました。imgタグのsrcを収集するだけでなく、getComputedStyleで各要素のbackground-imageを取得することで、CSS背景画像にも対応しています。
// 抽出した画像URLをJS側から受け取るイメージ
final result = await controller.runJavaScriptReturningResult(jsCode);
2. imgタグ＋CSS背景画像の両対応
imgタグだけでは取りこぼしが多いため、全要素を走査してbackground-imageにurl(...)が含まれるものを正規表現で抽出しました。相対URLはページのベースURLと結合して絶対URLに変換しています。
3. サムネイル一覧とまとめて保存
抽出した画像はサムネイル一覧で表示し、複数選択して一括ダウンロードできるUIにしました。大量の画像を扱うため、サムネイル表示は遅延読み込みとし、スクロール性能を確保しています。
4. アプリ内ギャラリーと写真アプリ連携
ダウンロードした画像はアプリ内のギャラリーで一覧管理し、タップで拡大表示。写真アプリへの転送やShareSheetでの共有にも対応させました。不要な画像の削除もアプリ内で完結します。
工夫した点
- 画像抽出をJS側に寄せることで、Flutter側の処理を軽量化
- 相対URL・絶対URLの両方を正しく扱えるよう正規化処理を実装
- 一覧UIはサムネイルの遅延読み込みでスクロールを快適に
- 無料提供のためバナー広告を画面下部に配置
おわりに
「ウェブ閲覧中に画像を保存したい」というシンプルな課題を、ブラウザ機能と画像抽出を組み合わせて解決しました。FlutterのWebViewとJavaScript連携は、DOM操作を伴うアプリと相性が良いと感じています。
App Store: https://apps.apple.com/jp/app/id6807882065