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
Qdrant を用いた検索改善施策の紹介 / Search Engineering Tech Talk 2024 Summer
visional_engineering_and_design
2
260
ゼロから実装まで!機械学習入門
natsuki0726
0
230
【完全版】Dify - LINE Bot連携 考え方と実用テクニック
uezo
2
780
KubeVirt Networking ONIC 2024
orimanabu
4
700
Amplify Gen 2ではじめる 生成AIアプリ開発入門
tsukuboshi
0
350
普通の Web エンジニアのための様相論理入門 #yapcjapan / YAPC Hakodate 2024
ytaka23
7
1.7k
ラブグラフ紹介資料 〜プロダクト解体新書〜 / Lovegraph Product Deck
lovegraph
0
14k
不要なリソースを自動で定期的に整理する方法 ~Sandboxアカウントのコストを削減しよう!~
amixedcolor
4
180
Amazon ECS & AWS Fargate 今昔物語 / past and present stories of Amazon ECS and AWS Fargate
iselegant
16
3k
From naive to advanced RAG: the complete guide
glaforge
0
470
Perlで始めるeBPF: 自作Loaderの作り方 / Getting started with eBPF in Perl_How to create your own Loader
takehaya
1
1.1k
What a Good Platform Looks Like and How to Get There @ Large Financial Organization, Oct 2024
mfpais
PRO
0
120
Featured
See All Featured
Java REST API Framework Comparison - PWX 2021
mraible
PRO
28
7.5k
Optimizing for Happiness
mojombo
375
69k
We Have a Design System, Now What?
morganepeng
50
7.2k
Building an army of robots
kneath
302
42k
Building a Scalable Design System with Sketch
lauravandoore
459
33k
Easily Structure & Communicate Ideas using Wireframe
afnizarnur
191
16k
Infographics Made Easy
chrislema
239
18k
[Rails World 2023 - Day 1 Closing Keynote] - The Magic of Rails
eileencodes
30
1.7k
Typedesign – Prime Four
hannesfritz
39
2.3k
Testing 201, or: Great Expectations
jmmastey
38
7k
Making the Leap to Tech Lead
cromwellryan
131
8.9k
GitHub's CSS Performance
jonrohan
1030
450k
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