2020年の当時、DeepL公式のAndroidアプリが無く、わざわざブラウザからアクセスする必要がありました。そこで、WebViewとJavaScriptを使用して、シンプルなDeepL翻訳サードパーティアプリを開発しました。

アプリをOSS化したところ大きな反響があり、2025年1月時点で 68個の解決済みIssues と 48個のPull requests がマージされました。 アプリ自体の言語は英語・日本語に加え、コントリビューターにより計11ヶ国語に対応しています。

また、OSS専用アプリストアのF-Droidにリリースを行い、2021年から現在まで公開されています。 https://github.com/sakusaku3939/DeepLAndroid

機能一覧

WebViewを使用し、必要な要素以外はJavaScriptで隠すことでネイティブアプリ風にしています。 単純な仕組みのためAPIを使用することなく、ユーザー登録や追加の設定無しでアプリを利用することができます。

翻訳画面のみをWebViewで表示	選択メニューからDeepLアプリを起動	設定画面 (ダークモードへの切り替え)

スクリーンショットによる表示崩れの自動検知

WebViewで表示しているDeepL翻訳のページは、不定期にデザインアップデートが入ることで要素のIDや配置が変わり、JavaScriptによる要素の非表示処理が効かなくなることがありました。結果として、ユーザーからのIssue報告を受けるまで発見が遅れ、数日間アプリが壊れた状態で放置されてしまうケースがありました。

そこで、技術的な解決策として、スクリーンショットの差分を用いたインストルメンテーションテストをCI/CDパイプラインに組み込み、定期実行によってWebViewの表示崩れを自動で検知できる仕組みを構築しました。

CIは以下のフローによって行われます。

① GitHub Actions上でAndroidエミュレーターを起動する ② pedrovgs/Shot を用いてWebView画面のスクリーンショットを撮影 ③ Shotで生成されたスクリーンショット差分ページをGitHub Pagesにデプロイ ④ 差分がある場合はCIジョブが失敗し、メールで通知

ただし、実際には対応の必要がない細かなデザイン変更も検知されてしまうことがあります。その場合でも、更新用のCIジョブを実行すれば、手作業でスクリーンショットを撮り直すことなく、新しいスクリーンショットを自動コミットできるようになっています。

コントリビューターの協力

Thank you to @S-H-Y-A, @fm-sys, @Mephodio, ... and all contributors!

• 選択メニューからDeepLアプリを起動
  • Pull Requests: #25, #40, #57, #67
  • 議論・バグ修正: #1, #5, #6, #24, #51, #59, #60, #62, #64, #69

• 設定画面・ダークモードへの切り替え
  • Pull Requests: #28, #30, #37
  • 議論・バグ修正: #17, #33, #34, #38, #55, #99

• JavaScript関連
  • Pull Requests: #2, #35, #36
  • 議論・バグ修正: #19, #23, #77, #80, #90, #96, #104, #111

リンク

• リリース版 (F-Droid)
  https://f-droid.org/packages/com.example.deeplviewer
• リリース版 (GitHub)
  https://github.com/sakusaku3939/DeepLAndroid/releases
• GitHub
  https://github.com/sakusaku3939/DeepLAndroid

使用技術

言語 ・・・ Kotlin, JavaScript フレームワーク、ライブラリ ・・・ WebView