hubs by Mozilla日本語チュートリアルを公開しました

こんにちは、hubs by Mozillaに絶賛ハマり中のハブスキーです。

hubs by Mozilla（以下、hubs）を知らない方もいるかもしれないので簡単に説明しときますね！

hubsとは、ブラウザだけで動くVRコミュニティ空間です。高額なVR機器もアプリも不要です。URLを共有するだけで、同じ空間にアバターで集まれます。

ハードルが低いVR、最高です。

アカウント登録すら不要です。

そして無料です。

でも欠点もあります。

少し使いにくい、いやかなり、初見ではまず無理……とにかく操作が独特です。

ドキュメントもありますが英語ですし、載ってない操作方法もあります。（というかほとんど載ってない）

（追記：日本語ドキュメントも作ってくれた方々がいらっしゃった。）

日本語チュートリアルシーン公開

そこで、hubsを学べる空間（シーン）を作りました！誰でも自由に使っていただけます。

Japanese Tutorial Scene | Hubs by Mozilla

（hubs日本語チュートリアルシーン）

hubsのシーン検索でJapanese Tutorial Sceneと打てば見つかるはずですが、まだ出てこない。登録してから検索されるようになるまで時間がかかるのかも。Spokeはまだまだ調査中です……😥

ということで、テキスト版をnoteで公開しておこうと思います。

操作方法は、パソコン（Mac）、スマホ（Android、iPhone）、iPad、Oculus Quest2を使って確かめています。
※ もし「うちのデバイスだと動き違う」というのがあれば、教えていただきたく！追記していきます！

Ocuusコントローラーの各部位は名前が覚えづらいのでこちらに記載しておきますね！

以下、本題の日本語チュートリアルです。
hubsを楽しめるきっかけの1つになれたら嬉しいです。

視点移動の方法

■ パソコン

左クリックしながらマウスを動かせば任意の方向に振り向けます。

マウス（カーソル）は、画面上に白い丸として表示されています。
いつもの矢印カーソルではありません。

また、キーボードのQキーを押しても左45度に回転できます。
Eキーを押すと右45度に回転できます。

■ スマホ・iPad

一本指で画面をスライドします。

左にスライドさせる右を向きます。
右にスライドさせると左を向きます。
下にスライドさせると上を向きます。
上にスライドさせると下を向きます。

■ Oculus

向いている方向に向きます。シンプル。

右手のジョイスティックを倒すことでも角度を変えられます。

歩き方

■ パソコン

キーボードを使って歩きます。

Wキーで前に進みます。
Aキーで左に進みます。
Sキーで後ろに下がります。
Dキーで右に進みます。

キーボードに矢印キーがあれば、こちらでも動きます。

■ スマホ・iPad

ピンチアウトすると前に進みます。
ピンチアウトとは、よく拡大するときにやるジェスチャーです。
二本指を画面の中心に置いて外側に向かって離していくジェスチャーです。

逆にピンチインすると後ろに下がります。

■ Oculus

左手のジョイスティックを倒すと歩けます。

テレポート方法

画面内の歩行可能な場所に瞬間移動すること

■ パソコン

① マウスで右クリックを長押ししてください。
画面の中心に緑の輪がでるはずです。
マウスの場所ではなく、画面の中心に出てきます。
もし出ない場合は、歩けない場所が画面の中心に来ている可能性があります。
視点を移動して、歩けそうな場所が画面の中心に来るように調整して試してください。

② 右クリックを離すとテレポートします。

■ スマホ・iPad

できませんでしたTT

■ Oculus

右手の人差指でトリガーボタンを長押しするとテレポートできます。

リスポーン方法

もう一度入り口から始め直すこと

■ パソコン

（Macなら）キーボードのCtrlキー+Rキーなどでリロードできます。

WindowsならたしかF5キーでリロードできた記憶……。

■ スマホ・iPad

ブラウザのリロードボタンをタップするとリロードできます。

ただし、フルスクリーンモードになっていてリロードボタンが表示されていない可能性もあります。
その場合はスマホのホーム画面にいったん戻ります（ブラウザアプリは閉じません）。

再びブラウザアプリを表示するとリロードボタンが表示されることが多くあります。

それでもリロードボタンが見つからない場合は、ブラウザアプリを閉じて立ち上げ直してください。

■ Oculus

AボタンかXボタンを押すと、画面上部に「Leave Room」というボタンが現れるのでトリガーボタンでクリックして再び入ってください。

座り方

座れる椅子と座れない椅子があります。これはシーン製作者が決めています。座った状態で周囲を見回すこともできます。

※ 日本語チュートリアルシーン内には実際に座れる椅子が用意してあるので試せます。

■ パソコン

① 椅子を見てください。

② キーボードのスペースキーを押してください。
座れる椅子であれば、人が輪に囲まれた白いマーク（ウェイポイント）が表示されるはずです。

③ ウェイポイントをマウスでクリックすると座れます。

■ スマホ・iPad

① 椅子を見て、画面をマルチタップして選択モードにします。
マルチタップとは、二本指で画面をタップすることです。
人が輪に囲まれた白いマーク（ウェイポイント）が表示されるはずです。

② ウェイポイントをタップ（一本指）で座れます。

③ しかし、スマホではなかなか座れません…。
感度が悪いのか、何回（何十回）か試さないと座れません。
個人的なコツですが、選択モードのまま少し視点移動した瞬間に、すかさずタップすると高確率で座れます。

■ Oculus

AボタンかXボタンを押して選択モードにすると、人が輪に囲まれた白いマーク（ウェイポイント）が表示されるので、そのまま人差指のトリガーボタンを押して座ります。

※ 選択モードというのは私の造語です。英語だとpause modeとなっています。

椅子からの立ち方

立てる椅子と立てない椅子があります。これもシーン製作者が決めています。立てる椅子の場合は、Wキーで前に進んだりするだけで立てます。

何も知らずに立てない椅子に座ってしまうとスタックします。椅子に限らず、移動したら最後、もう前後左右に動けないウェイポイントというものが存在します。

しかし大丈夫、まだ慌てる時間ではありません。

■ パソコン・Oculus

立てない椅子から立つ方法は、テレポート（パソコンなら右クリック長押し、Oculusならトリガーボタン長押し）です。

周囲にまったく歩ける場所がない場合はテレポートすらできない可能性があります。そういうときはリスポーンしてください。

「スマホ・iPadの場合はどうするの？」

スマホ・iPadではテレポートができませんでしたが、立てない椅子に座っても歩けば立てました。安全です。

物を掴む方法

掴めるオブジェクト（物）と掴めないオブジェクトがあります。これはシーン設計者が決めています。

■ パソコン

① マウスを掴みたいオブジェクトに合わせます。

② 掴める場合は、マウスカーソルが青い丸になるので、左クリックして掴みます。

③ 左クリックを離すと、オブジェクトを離します。

■ スマホ・iPad

※ Android、iPadでは掴めませんでした。

①（iPhoneで）マルチタップして、選択モードにします。

②オブジェクトを一本指で長押しします。

③ iPhoneのバイブが反応してからゆっくり動かすと掴めます。

④ 画面から指を離せば、オブジェクトを離します。

■ Oculus

オブジェクトに合わせて人差指のトリガーボタンを押すと掴めます。

写真の撮り方

撮影はhubsの醍醐味の１つ。自撮りモードで撮影できるので、イベントなどの参加記録や知り合った人と一緒に記念撮影が楽しめます。Twitter共有がしやすい仕組みにもなっています。

■ パソコン・スマホ・iPad

① 画面下部の「Place」を押して「Camera」を選べばカメラが現れます。

② カメラの上部にある丸いボタンを押すと撮影できます。

パソコンなら、キーボードのCキーを押すとカメラが配置されます。
もう一度押すと消えます。

■ Oculus

① 画面の上を見てください。

② 右端にカメラのアイコンが浮かんでいるので、トリガーボタンでクリックします。

③ カメラの上部にある丸いボタンをクリックして撮影できます。

カメラの調整方法

カメラ出現時はズレている前提で考えてください。調整は少しコツが必要な操作なので、カメラだけでなく自分も動きながら調整します。カメラの角度と位置（縦横と距離）を調整できます。

※ 2021/7/12 現在、距離を調整してもカメラに映るプレビューが更新されません。きっと改善されると思います。

■ パソコン

・角度調整

① カメラにカーソルを合わせた状態で、キーボードのスペースキーを押します。

② カメラの左側にスコープ（的、まと）のボタンが出てくるので、これを押すとカメラが自分に向きます。

・縦横の位置調整

左クリックを押してドラッグしながらカメラを動かすと縦横の位置も変えられます。

・距離の調整

ドラッグしながらマウスホイールを動かすことで、カメラを近づけたり遠ざけたり出来ます。
（マウスホイールのないマジックマウス可）

■ スマホ・iPad

・角度調整

① 画面をマルチタップします。

② カメラの左側にスコープ（的、まと）のボタンが出てくるので、これを押すとカメラが自分に向きます。

・縦横の位置調整、距離の調整

カメラの縦横位置・距離は調整困難です。

カメラをドラッグすると動くのですが、とんでもない位置に飛んでいくことが多いです。

自分が前後左右に動くことで調整してください。

カメラが飛んでいったら、出し直します。

■ Oculus

・角度調整

Aボタンを押すと、カメラの左側にスコープ（的、まと）のボタンが出てくるので、これを押すとカメラが自分に向きます。

・縦横の位置調整

中指のグリップボタンでカメラの縦横位置を調整できます。

・距離の調整

グリップボタンを押したまま、ジョイスティックを倒すと距離の調整もできます。

写真の保存方法

デフォルトだとtweetするという方法しかありません。hubsもバズろうと必死なんですね。

そこで、保存したいときはブラウザの機能を使ってダウンロードをしてしまいます。

■ パソコン・スマホ・iPad

① パソコンなら写真にカーソルを合わせてキーボードのスペースキーを押します。
スマホなら画面をマルチタップします。

② open linkボタンをクリックして別タブで開きます。

③ Firefoxなら「ファイル > 別名でページを保存」します。

■ Oculus

① Aボタンで出てくるopen linkボタンを押します。

② ポップアップが禁止されてしまったら、アドレスバーの近くに許可するマークが出現するので、許可して再度試します。

③ Firefoxなら右下のメニューから「タブを端末に送信」できるので端末で保存します。

まとめ

PC = パソコン
SP = スマホ・iPad
OC = Oculus

・視点移動
PC）マウスドラッグ
SP）一本指でスライド
OC）振り向くか、右ジョイスティック

・歩き方
PC）WASDキーまたは矢印キー
SP）ピンチアウトで前進、ピンチインで後退
OC）左手ジョイスティック

・テレポート
PC）右クリック長押し
SP）不可
OC）人差し指トリガーボタン長押し

・リスポーン
PC）ブラウザのリロード
SP）ブラウザのリロード
OC）ブラウザのリロード

・座り方
PC）スペースキーを押してウェイポイントをクリック
SP）マルチタップしてウェイポイントをクリック
OC）AかXボタンを押してウェイポイントをクリック

・（立てない椅子からの）立ち方
PC）右クリック長押し
SP）歩けば立てる
OC）トリガーボタン長押し

・物を掴む方法
PC）左クリック
SP）マルチタップして一本指で物を長押し（iPhoneのみ可）
OC）人差し指トリガーボタン

・写真の撮り方
PC）Place > Cameraを押して、カメラ上部の丸いボタンを押す
SP）Place > Cameraを押して、カメラ上部の丸いボタンを押す
OC）画面の上方にあるカメラアイコンを押して、カメラ上部の丸いボタンを押す

・カメラの調整方法（角度）
PC）カメラにカーソル合わせてスペースキーを押して、カメラ左側に出てきたボタンを押す
SP）マルチタップして、カメラ左側に出てきたボタンを押す
OC）Aボタンを押して、カメラ左側に出てきたボタンを押す

・カメラの調整方法（位置）
PC）カメラをドラッグ
SP）困難、自分が動く
OC）中指のグリップボタンでドラッグ

・カメラの調整方法（距離）
PC）ドラッグ中にマウスホイール
SP）困難、自分が動く
OC）中指のグリップボタンを押したまま、ジョイスティック

・写真の保存方法
PC）写真にカーソル合わせてスペースキーを押して、open linkボタンを押して、ブラウザ機能で保存
SP）マルチタップして、open linkボタンを押して、ブラウザ機能で保存
OC）Aボタンを押して、open linkボタンを押す。ポップアップを許可したら再試行して、タブを端末に送信して保存

日本語チュートリアル第１弾の分量はこのくらいにしておきました。

他にも「アバターにマイクラのスキン使う方法」とか「セミナーやイベントで役立つ資料の操作方法」を色々近々noteで公開したいです。

合わせて日本語チュートリアルシーンもどんどん更新していく予定です。

hubsのことをもっともっとお伝えできるようにnoteしていきますので、hubsに興味がある方、XR界隈の方、もしよかったらスキ・フォローよろしくおねがいします😃