Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
iOSのWebViewとClipboardAPI / WebView and Clipboar...
Search
dojineko
May 29, 2024
Technology
0
10
iOSのWebViewとClipboardAPI / WebView and ClipboardAPI on iOS
dojineko
May 29, 2024
Tweet
Share
More Decks by dojineko
See All by dojineko
最近のUnityとVRChat / About Unity and VRChat recently
dojineko
0
87
WebXRでポートフォリオを作ろう/Let's make your portfolio with WebXR!
dojineko
0
140
ペパボ ホスティング事業部のWebフロントエンドについて 2022 / About Web Frontend of Pepabo Hosting division 2022
dojineko
0
8.5k
Viteはいいぞ/Vite is Good
dojineko
1
640
はじめてでもできた!VR登壇への道 / Let's VR speech!
dojineko
0
360
gRPC-WEBを使ったWEBアプリ開発/Development web-app with gRPC-WEB
dojineko
1
740
もう俺には関係なくないTypeScript/Our TypeScript
dojineko
3
300
TypeScript ではじめる Clean Architecture / Let's start Clean Architecture with TypeScript
dojineko
2
3k
Hosting meets .NET / hosting-meets-dotnet
dojineko
0
620
Other Decks in Technology
See All in Technology
The road to green code (with Sonar)
bluehats
0
100
20241015 Toranomon Tech Hub#1 Service Catalog使ってみた
hiashisan
0
140
AWS DDKを利用したDataOps事始め
beex
1
120
入門 バックアップ
ryuichi1208
18
7.4k
エンジニア向け会社紹介資料
caddi_eng
14
270k
0x5F3759DF
ykozw
0
140
シェルとPerlの使い分け、 そういった思考の道具は、どこから来て、どこへゆくのか?v1.1.0
fmlorg
0
670
業務ヒアリングと知識の呪い
tamai_63
0
310
New Relicを活用したシステム監視の強化とオブザーバビリティ向上
sugoto911
1
110
LINE-ChatGPT 倫理問題を整理する全力肯定彼氏くん [LuC4]に訪れたサービス開始以来の最大の危機
o_ob
2
260
不要なリソースを自動で定期的に整理する方法 ~Sandboxアカウントのコストを削減しよう!~
amixedcolor
4
180
Bluesky 2019〜2022
yamarten
1
110
Featured
See All Featured
Building a Modern Day E-commerce SEO Strategy
aleyda
38
6.9k
Building Flexible Design Systems
yeseniaperezcruz
327
38k
Robots, Beer and Maslow
schacon
PRO
157
8.2k
Designing Dashboards & Data Visualisations in Web Apps
destraynor
228
52k
Building Adaptive Systems
keathley
38
2.2k
Fireside Chat
paigeccino
32
3k
Optimising Largest Contentful Paint
csswizardry
31
2.8k
StorybookのUI Testing Handbookを読んだ
zakiyama
26
5.1k
Visualization
eitanlees
143
15k
Making Projects Easy
brettharned
115
5.9k
In The Pink: A Labor of Love
frogandcode
139
22k
jQuery: Nuts, Bolts and Bling
dougneiner
61
7.5k
Transcript
iOSのWebViewと ClipboardAPI 2024-05-29 Mirrativ フロントエンドLT会 @dojineko
dojineko • Webフロントエンドエンジニア • 最近Unityをあれしています • たまにVRChatやclusterに 出没するバーチャルネコです • GitHub:
@dojineko • X : @dojinekox
おしながき ➔ iOSにおけるWebViewの ClipboardAPIの制約 ➔ UnityとJavaScriptの連携方法 ➔ WebView内のUnityから クリップボードにアクセスする方法 ➔
まとめ
iOSにおけるWebViewの ClipboardAPIの制約
ClipboardAPIについて • クリップボードの操作をするための標準API • JavaScriptを使ってコピーとペーストの操作ができる
iOS WebViewにおける課題 (1) • iOS の WebView内では任意のタイミングで Clipboard APIを実行できない •
JavaScript実装から ClipboardAPI の Read/Write を 実行しようとしたとき Promise の Reject が発生する ◦ つまり標準APIをつかってコピー/ペーストができない ◦ iOSのプライバシー/セキュリティのための措置と思われる • Androidであれば特に制限なく使用できる
iOS WebViewにおける課題 (2) • WebView内ではOSのコピペ機能も同じく 制限がされておりコピーが機能しない • 一方共有メニューのコピーは 別扱いのようで選択したテキストの 内容を取得できる
• ペーストに関してはテキストボックスであ れば可能の様子 ✅こちらは使用可能 ❌こちらは使用不可
UnityとJavaScriptの連携方法
None
UnityとJavaScriptの連携方法 (1) • UnityにはWebGLビルドの際にブラウザ側の実装を利用するための 仕組みが備わっている • 「.jslib」という拡張子で Assets/Plugins ディレクトリ配下に配置 すると使用できる
◦ 拡張子は違うものの通常のJavaScriptと同じように扱って良い • 利用できるJavaScriptはUnityで使用されているEmscriptenのバー ジョンの関係により一部の文法とAPIの利用ができない
• UnityとJavaScriptの相互運用時に、実装をまたいで数値以外の値を 渡す場合は変換処理が必要になる ◦ 関数に文字列を渡した場合、文字列に対応するポインタが JavaScirpt実装に対して数値として渡される ◦ 渡された文字列を参照するにはポインタから文字列を参照する 必要がある •
UnityのバージョンによってJavaScriptからC#の関数を呼び出す場 合にWebAssembly.WasmTableを使う場合と使わない場合がある UnityとJavaScriptの連携方法 (2)
細かいところはこちらをどうぞ
WebView内のUnityから クリップボードにアクセスする方法
どうやって課題を回避したか • OSの制限でWebView内でのClipboardAPIを直接使用できない ◦ ワンタップでコピペするような機能は実装できない • しかし... ◦ WebView内のテキストボックスへはペーストができる ◦
さらにOSの共有機能を組み合わせて使えばコピーができる • 若干の手数は増えるものの(デバッグ用途であれば) 許容できる程度の煩わしさで回避できそう
WebView TextBox (HTML) おはようございます コピーの場合 コピーさせたい文字列を Unityの実装からWebViewの テキストボックスに送信する 最終的なコピー操作は 共有メニューを介して行う
WebView TextBox (HTML) おはようございます ペーストの場合 貼り付けた文字列を JavaScriptを介して Unityに送信する ペーストしたい文字列を WebView内の
テキストボックスに貼り付ける
まとめ
まとめ • WebView内の標準APIはOSによる制限が一部発生することがある ◦ Unity WebGLもWebView内で動いていれば影響を受ける ◦ 今回で言えばClipboardAPIの利用ができない状態だった • UnityとWebの相互運用を駆使すると
WebブラウザやWebViewへのデータ送信ができる • OS自体の機能を更に組み合わせれば使い所は選ぶが 標準APIの制限を迂回して目的を達成できる...かもしれない
希望は残っているよ どんなときにもね
None