SafariDrop — iPhoneのSafariからAndroidへワイヤレス転送するアプリを作った

1. SafariDrop とは

1-1. 開発の背景・課題

iPhoneで撮影した写真・動画をAndroidスマートフォンへ転送したい場面は意外と多くあります。しかし既存の手段はどれも一長一短です。AirDropはApple端末間のみ対応、Bluetoothは速度が遅い、USBケーブルは持ち歩きが必要、クラウドサービスは通信量と同期待ちが発生します。

SafariDropはこれらの課題を解決するために開発したAndroidアプリです。iPhoneとAndroidが同一Wi-Fiネットワークに接続されていれば、iPhoneのSafariブラウザからAndroid上のHTTPサーバーへ直接ファイルをアップロードできます。追加アプリのインストールも、iCloud契約も、ケーブルも不要です。

1-2. 既存ツールとの比較

2. 技術スタック

3. アーキテクチャ・データフロー

3-1. アーキテクチャ解説

SafariDropはMVVM（Model-View-ViewModel）に近い構成を採用しています。MainActivityが状態（State）を保持しコールバックを管理します。MainScreenはCompose UIで状態を表示するだけに留め、ビジネスロジックを持ちません。FileTransferServerはKtor CIOでHTTPサーバーを実装し、iPhoneからのPOSTリクエストを受信してMediaStoreへファイルを保存します。

3-2. APIシーケンス

3-3. DBスキーマ

4. 画面構成・機能一覧

5. 使い方ガイド

5-1. 初回セットアップ

1. SafariDropアプリをAndroidにインストールします。
2. iPhoneとAndroidを同じWi-Fiネットワークに接続します。
3. SafariDropを起動し、「サーバー開始」ボタンをタップします。
4. 表示されたIPアドレス（例: http://192.168.1.10:8080）またはQRコードをiPhoneのSafariで開きます。
5. （任意）必要に応じて☰設定からPIN認証や保存先フォルダを設定します。

5-2. 主要機能の使い方

1. iPhoneのSafariでアプリのURLを開き、「ファイルを選択」から写真・動画を選びます。
2. 選択後、全ファイルの読み込みが完了するとアップロードボタンが有効になります（読み込み中はスピナーが表示されます）。
3. 「アップロード」をタップするとファイルが10件ずつバッチ送信されます。
4. 転送完了後、Androidに件数一致の確認結果とプッシュ通知が届きます。
5. 転送履歴はAndroidアプリのリスト画面でセッション別に確認できます。

6. 主な実装上のポイント

6-1. NanoHTTPDからKtor CIOへの移行

初期実装はNanoHTTPDを使用していましたが、大容量ファイルのアップロード時にメモリ上に全データを展開する問題がありました。Ktor CIOへ移行することで、マルチパートストリームを直接ディスクに書き込み、大容量動画でも安全に転送できるようになりました。

// Ktor CIOによるストリーミング受信
routing {
    post("/upload") {
        val multipart = call.receiveMultipart()
        multipart.forEachPart { part ->
            if (part is PartData.FileItem) {
                part.streamProvider().use { input ->
                    saveFileFromStream(input, part.originalFileName ?: "file")
                }
            }
            part.dispose()
        }
    }
}

6-2. Google Photos撮影日付保持

MediaStoreにファイルを保存する際、DATE_TAKENを設定しないと転送日（当日）が撮影日として登録されてしまいます。SafariDropではiPhone側のJavaScriptでfile.lastModified（撮影日時のms）を送信し、Kotlin側でMediaStoreに反映します。

// Safari JS側: 撮影日付を送信
fd.append('fileDate', file.lastModified.toString())

// Kotlin側: MediaStoreにDATE_TAKENをセット
if (fileDate != null) {
    put(MediaStore.MediaColumns.DATE_TAKEN, fileDate)          // ms
    put(MediaStore.MediaColumns.DATE_MODIFIED, fileDate / 1000L) // 秒
}

6-3. iOS Safariの制約への対応

iPhoneのフォトピッカーで「追加」をタップしてからJavaScriptのchangeイベントが発火するまでの間、JSは一時停止します（iOSの仕様）。スピナーはこのタイミングでは表示できないため、ピッカーを閉じた後にposition:fixedの全画面オーバーレイで対応しました。またwindow.alert()はローカルIPでブロックされるため、カスタムHTMLモーダルを実装しています。

// changeイベント後（ピッカーが閉じてから）スピナーを表示
fileInput.addEventListener('change', async (e) => {
    document.getElementById('loadingOverlay').style.display = 'flex';
    // ... ファイル読み込み処理
    document.getElementById('loadingOverlay').style.display = 'none';
});

6-4. 保存先フォルダ設計の選択

保存先をユーザーが自由に選べるよう、SAF（Storage Access Framework）のフォルダピッカーも検討しましたが、DocumentFile経由ではMediaStoreを使わないためDATE_TAKENが設定できず撮影日付が失われます。そのためPictures/DCIM/Downloadsのドロップダウン選択方式を採用し、MediaStore経由を維持しています。

7. 使用技術の解説

8. 開発プロセス

9. 今後の改善候補

• 既存ファイルのDATE_TAKEN一括修正（ADB + ExifTool による過去の転送ファイルの撮影日付修正）
• 転送済みファイルの一覧表示からダウンロード（Android→iPhone 逆方向転送）
• 複数デバイスへの同時転送対応
• HTTPS対応（自己署名証明書によるセキュア通信）
• ファイル名の重複時のリネーム戦略設定（連番付与・上書き・スキップの選択）
• 転送速度・残り時間のリアルタイム表示改善

10. 動作要件

• Android端末: Android 8.0（API 26）以上。Android 10（API 29）以上でMediaStore API（DATE_TAKEN保持）が有効になります。
• iPhone: iOS 14以上推奨。Safari最新版。追加アプリのインストールは不要です。
• ネットワーク: iPhoneとAndroidが同一Wi-Fiに接続されている必要があります。モバイルデータ通信では動作しません。
• ポート: HTTPサーバーはポート8080を使用します。ルーターのファイアウォール設定によっては追加設定が必要な場合があります。
• 権限: WRITE_EXTERNAL_STORAGE（Android 9以下）、POST_NOTIFICATIONS（Android 13以上）、FOREGROUND_SERVICE が必要です。