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
Unityでチャットに使えるモバイルキーボードの実現
Search
Nakaji Kohki
February 19, 2021
Programming
2
5.4k
Unityでチャットに使えるモバイルキーボードの実現
CA.unity #1 - Unity Meetup
https://meetup.unity3d.jp/jp/events/1271
https://twitter.com/nkjzm
Nakaji Kohki
February 19, 2021
Tweet
Share
More Decks by Nakaji Kohki
See All by Nakaji Kohki
アバター配信アプリ『Vフレット』 でVRM 1.0対応をしてみる
nkjzm
1
200
VRMアバターでギターの弾き語りがしたい!! 『Vフレット』の開発で考えたこと
nkjzm
0
460
『ALTDEUS: Beyond Chronos』で物語に没入できる操作感を実現するマルチプラットフォーム対応の道のり / The path to multi-platform support for immersive storytelling in ALTDEUS: Beyond Chronos
nkjzm
0
340
『ALTDEUS: Beyond Chronos』におけるマルチプラットフォーム向けコントローラーの対応 / Support for multi-platform controllers in "ALTDEUS: Beyond Chronos
nkjzm
0
410
Unityで使える汎用的な ハンバーガーメニューの実装 / UniHamburger
nkjzm
3
1.3k
20時間超の物語をVRで!『ALTDEUS: Beyond Chronos』の制作を支えた”Uranus”の制作過程と機能紹介 [CEDEC2021] / Introduction of ALTDEUS' VR ADV tool "Uranus", CEDEC2021
nkjzm
1
2.4k
withコロナに見るXR業界のイマ! [CEDEC2021] / XR NOW CEDEC2021
nkjzm
3
1.8k
VRプロダクト開発ラウンドテーブル2021
nkjzm
0
1.4k
Notionで人生を公開している話
nkjzm
0
1k
Other Decks in Programming
See All in Programming
なぜ「共通化」を考え、失敗を繰り返すのか
rinchoku
1
340
iOSアプリ開発で 関数型プログラミングを実現する The Composable Architectureの紹介
yimajo
2
210
DroidKnights 2025 - 다양한 스크롤 뷰에서의 영상 재생
gaeun5744
3
300
TypeScript LSP の今までとこれから
quramy
1
510
統一感のある Go コードを生成 AI の力で手にいれる
otakakot
0
3k
Datadog RUM 本番導入までの道
shinter61
1
310
既存デザインを変更せずにタップ領域を広げる方法
tahia910
1
240
Julia という言語について (FP in Julia « SIDE: F ») for 関数型まつり2025
antimon2
3
970
社内での開発コミュニティ活動とモジュラーモノリス標準化事例のご紹介/xPalette and Introduction of Modular monolith standardization
m4maruyama
1
130
型付きアクターモデルがもたらす分散シミュレーションの未来
piyo7
0
800
Perplexity Slack Botを作ってAI活用を進めた話 / AI Engineering Summit プレイベント
n3xem
0
670
GoのWebAssembly活用パターン紹介
syumai
3
10k
Featured
See All Featured
GitHub's CSS Performance
jonrohan
1031
460k
The Cult of Friendly URLs
andyhume
79
6.4k
YesSQL, Process and Tooling at Scale
rocio
173
14k
Become a Pro
speakerdeck
PRO
28
5.4k
Building Adaptive Systems
keathley
43
2.6k
A better future with KSS
kneath
239
17k
The Pragmatic Product Professional
lauravandoore
35
6.7k
実際に使うSQLの書き方 徹底解説 / pgcon21j-tutorial
soudai
PRO
181
53k
VelocityConf: Rendering Performance Case Studies
addyosmani
330
24k
Practical Orchestrator
shlominoach
188
11k
Designing Experiences People Love
moore
142
24k
Testing 201, or: Great Expectations
jmmastey
42
7.5k
Transcript
Unityでチャットに使える モバイルキーボードの実現 2020/01/19 CA.unity #1
Nakaji Kohki / なかじ Twitter: @nkjzm ・日本VR学会認定 上級VR技術者 ・専門学校の先生(VRエンジニア専攻) ・Podcast『xR.fm』のパーソナリティ
・エンジニア系勉強会のオーガナイザー 略歴: CyberAgent → メルカリ R4D XR → 現在 Unity / VR Engineer ~0:30
~1:00 ALTDEUS: Beyond Chronos • VRゲーム開発してます! ◦ アドベンチャー ◦ マシンアクション
◦ VRライブ • Quest/Riftで好評配信中 • Steam版 本日リリース!! • PSVR版 4/15発売
本日の内容 モバイルキーボードを 気持ちよく実装する方法 ~2:00 よくある実装 今回の実装 このアプリの開発で使用
アジェンダ ~2:30 1. キーボードの高さにチャット欄を調整する a. キーボード高さの取得 b. チャット欄に反映させる 2. ネイティブの入力フィールドを非表示に
3. ネイティブボタンのOKイベント取得 4. キーボードのハンドリング
キーボード高さの取得(1/2) iOSはそのままいける > Android では Rect は 0 です。 https://docs.unity3d.com/ja/current/ScriptReference/TouchScreenKeyboard-area.html
→ baba-s さんのスクリプトで対応 ~3:00 1. Rect area = UnityEngine.TouchScreenKeyboard.area; 2. int height = Mathf.RoundToInt(area.height);
キーボード高さの取得(2/2) 引用元: https://github.com/baba-s/UniSoftwareKeyboardArea/blob/master/Scripts/SoftwareKeyboardArea.cs ~3:30 1. var currentActivity = unityClass.GetStatic<AndroidJavaObject>( "currentActivity"
); 2. var unityPlayer = currentActivity.Get<AndroidJavaObject>( "mUnityPlayer" ); 3. var view = unityPlayer.Call<AndroidJavaObject>( "getView" ); 4. 5. if ( view == null ) return 0; 6. 7. int result; 8. using ( var rect = new AndroidJavaObject( "android.graphics.Rect" ) ) 9. { 10. view.Call( "getWindowVisibleDisplayFrame", rect ); 11. result = Screen.height - rect.Call<int>( "height" ); 12. }
チャット欄に反映させる(1/3) • uGUIに反映させる処理 ◦ 右図ならBottomに反映 ◦ uGUIの組み方次第 ◦ Debug表示で 実際の値が見られる
~4:00 1. chatContainer.sizeDelta = new Vector2(0, -margin);
チャット欄に反映させる(2/3) • 解像度の調整 ◦ キーボードの高さは端末の解像度で返ってくる ◦ uGUIはCanvasの解像度で制御されている(ことが多い) ~4:30 1. //
解像度比を取得 2. var resolutionHeight = chatContainer 3. .GetComponentInParent<CanvasScaler>() 4. .GetComponent<RectTransform>().sizeDelta.y; 5. var rate = resolutionHeight / Screen.height; 6. 7. var margin = height * rate; 8. chatContainer.sizeDelta = new Vector2(0, -margin);
チャット欄に反映させる(3/3) ~5:00 • SafeAreaの罠 ◦ TouchScreenKeyboard.areaは SafeAreaの下部領域の高さを含む
ネイティブの入力 フィールドを非表示 ~6:00 変数が用意されている TouchScreenKeyboard.hideInput →InputFieldの HideMobileInputで上書きされる ※ネイティブのコピペ機能などが使えなくなる ※Androidだと疑似的な実装 https://docs.unity3d.com/ja/current/ScriptReference/TouchScreenKeyboard-hideInput.html)
ネイティブボタンの OKイベント取得 • Androidだとキーボード表示中に キーボード外の入力が拾えない ◦ →ネイティブのOKボタンで送信 • keyboard.statusを監視で実現 ◦
Done:OKを押した時 ◦ LostFocus:フォーカスが外れた時 ~7:00
キーボードのハンドリング ~8:00 1. Keyboard = TouchScreenKeyboard.Open(string.Empty, TouchScreenKeyboardType.Search); 2. EventSystem.current.SetSelectedGameObject(chatInput.gameObject); •
Unity領域タップ or OKボタン押下でキーボードが閉じる ◦ →チャットだと開きっぱなしにしたい • 色々なタイミングで再表示/再フォーカス ◦ チャット送信をした時 ◦ Unityの送信ボタンを押した瞬間 ◦ ボタンを押しかけて押さなかった時
できなかった事 • キーボードの再表示 ◦ Androidは微妙にチラつく(ちょっと妥協している) • Androidで通知がくるとキーボードのheightに含まれる ◦ ネイティブ部分の処理を見直せば改善しそう ~8:30
解決方法わかる人いたら教えてくださいmm
• キーボードの高さ周りの処理は少し複雑 ◦ Android対応と解像度、SafeAreaを考慮しよう • TouchScreenKeyboard.hideInputはInputFieldで上書きされる • ネイティブのボタン:status監視で疑似的にハンドリング • キーボードの常時表示:再フォーカスを繰り返して実現
• (毎回ビルドして確認するのがめちゃくちゃ大変だった) ◦ →なので・・・ まとめ ~9:00
公開しました UnityMobileKeyboardSample (Unlicense) https://github.com /nkjzm/UnityMobileKeyboardSample ~9:30
最後に
Roppongi.unity開催します ~10:00 Unityに関するLTイベント • 2/24(水) 20:00〜 • YouTube Live &
cluster • 協賛 ◦ クラスター株式会社 ◦ 株式会社ハシラス • #roppongiunity
フォロー & チャンネル登録 お願いします!! ありがとうございました!! @nkjzm VRエンジニアなかじ
None