Tweet
Tweet

Slide 1

Slide 1 text

iOSのWebViewと ClipboardAPI 2024-05-29 Mirrativ フロントエンドLT会 @dojineko

Slide 2

Slide 2 text

dojineko ● Webフロントエンドエンジニア ● 最近Unityをあれしています ● たまにVRChatやclusterに 出没するバーチャルネコです ● GitHub: @dojineko ● X : @dojinekox

Slide 3

Slide 3 text

おしながき ➔ iOSにおけるWebViewの ClipboardAPIの制約 ➔ UnityとJavaScriptの連携方法 ➔ WebView内のUnityから クリップボードにアクセスする方法 ➔ まとめ

Slide 4

Slide 4 text

iOSにおけるWebViewの ClipboardAPIの制約

Slide 5

Slide 5 text

ClipboardAPIについて ● クリップボードの操作をするための標準API ● JavaScriptを使ってコピーとペーストの操作ができる

Slide 6

Slide 6 text

iOS WebViewにおける課題 (1) ● iOS の WebView内では任意のタイミングで Clipboard APIを実行できない ● JavaScript実装から ClipboardAPI の Read/Write を 実行しようとしたとき Promise の Reject が発生する ○ つまり標準APIをつかってコピー/ペーストができない ○ iOSのプライバシー/セキュリティのための措置と思われる ● Androidであれば特に制限なく使用できる

Slide 7

Slide 7 text

iOS WebViewにおける課題 (2) ● WebView内ではOSのコピペ機能も同じく 制限がされておりコピーが機能しない ● 一方共有メニューのコピーは 別扱いのようで選択したテキストの 内容を取得できる ● ペーストに関してはテキストボックスであ れば可能の様子 ✅こちらは使用可能 ❌こちらは使用不可

Slide 8

Slide 8 text

UnityとJavaScriptの連携方法

Slide 9

Slide 9 text

No content

Slide 10

Slide 10 text

UnityとJavaScriptの連携方法 (1) ● UnityにはWebGLビルドの際にブラウザ側の実装を利用するための 仕組みが備わっている ● 「.jslib」という拡張子で Assets/Plugins ディレクトリ配下に配置 すると使用できる ○ 拡張子は違うものの通常のJavaScriptと同じように扱って良い ● 利用できるJavaScriptはUnityで使用されているEmscriptenのバー ジョンの関係により一部の文法とAPIの利用ができない

Slide 11

Slide 11 text

● UnityとJavaScriptの相互運用時に、実装をまたいで数値以外の値を 渡す場合は変換処理が必要になる ○ 関数に文字列を渡した場合、文字列に対応するポインタが JavaScirpt実装に対して数値として渡される ○ 渡された文字列を参照するにはポインタから文字列を参照する 必要がある ● UnityのバージョンによってJavaScriptからC#の関数を呼び出す場 合にWebAssembly.WasmTableを使う場合と使わない場合がある UnityとJavaScriptの連携方法 (2)

Slide 12

Slide 12 text

細かいところはこちらをどうぞ

Slide 13

Slide 13 text

WebView内のUnityから クリップボードにアクセスする方法

Slide 14

Slide 14 text

どうやって課題を回避したか ● OSの制限でWebView内でのClipboardAPIを直接使用できない ○ ワンタップでコピペするような機能は実装できない ● しかし... ○ WebView内のテキストボックスへはペーストができる ○ さらにOSの共有機能を組み合わせて使えばコピーができる ● 若干の手数は増えるものの(デバッグ用途であれば) 許容できる程度の煩わしさで回避できそう

Slide 15

Slide 15 text

WebView TextBox (HTML) おはようございます コピーの場合 コピーさせたい文字列を Unityの実装からWebViewの テキストボックスに送信する 最終的なコピー操作は 共有メニューを介して行う

Slide 16

Slide 16 text

WebView TextBox (HTML) おはようございます ペーストの場合 貼り付けた文字列を JavaScriptを介して Unityに送信する ペーストしたい文字列を WebView内の テキストボックスに貼り付ける

Slide 17

Slide 17 text

まとめ

Slide 18

Slide 18 text

まとめ ● WebView内の標準APIはOSによる制限が一部発生することがある ○ Unity WebGLもWebView内で動いていれば影響を受ける ○ 今回で言えばClipboardAPIの利用ができない状態だった ● UnityとWebの相互運用を駆使すると WebブラウザやWebViewへのデータ送信ができる ● OS自体の機能を更に組み合わせれば使い所は選ぶが 標準APIの制限を迂回して目的を達成できる...かもしれない

Slide 19

Slide 19 text

希望は残っているよ どんなときにもね

Slide 20

Slide 20 text

No content