CrossRoad

XRを中心とした技術ブログ。 Check also "English" category.

VR空間共有サービス「AltspaceVR」の基本的な使い方について

ここ最近、オンラインでのイベント参加や、リモートでのコミュニケーションの機会が増えているので、それに合わせて色々なサービスの使い方を解説しました。 www.crossroad-tech.com www.crossroad-tech.com www.crossroad-tech.com www.crossroad-tech.com …

ES6以降の仕様でthreejsのコードを記述する方法について

前回、Babylon.jsをES6以降の仕様で書く方法をまとめました。 www.crossroad-tech.com 引き続きES6に慣れるため、Babylon.jsと似ているthree.jsについても書き方を調べてみました。ただ、three.jsを初めて使ったためか、うまく動かず情報を探すことができな…

Mozilla Hubsを使った勉強会で発表するときの事前準備Tips一覧

先週、Mozilla Hubs(VR空間でイベント体験ができる仕組み)を使ったオンライン勉強会で発表をしました。 www.crossroad-tech.com Hubsの体験はほぼ初めてで、発表をしたのは初めてでした。最近参加したclusterとも異なる点が多かったです。 そこで、Hubsで…

Hubs Scrum ミートアップの概要と講演をまとめました

xR Tech Nagoyaが主催するオンラインイベント「Hubs Scrum」に参加、登壇してきましたので内容をまとめました。 1. Hubs Scrumとは? 2. ライトニングトーク (LT) 2.1 Mozilla Hubsが拓く新世代WebVRのススメ 2.2 AWSを使わずにVR空間共有ができるnetworked-…

AWSを使わないでVR空間の共有ができる「networked-aframe」の概要と環境構築方法

オンライン勉強会が増えたことによって、VR空間を使ったイベントの需要が増えています。そのため、Mozillaの「Mozilla Hubs」にも注目が集まっています。 今回は、Mozilla Hubsを調べるうちに見つけた「networked-aframe」の概要について説明いたします。 以…

ES6以降の仕様でBabylon.jsのコードを記述する方法について

JavaScriptは、ECMAという言語仕様のバージョンによって書き方が変わります。いろいろ調べたところ、2015年に策定されたES2015 (ES6) で大きく変化し、Mozilla Hubsなど、JavaScriptのOSSの多くはES6以降の仕様で書かれている印象です。 一方、Babylon.js公…

clusterを使った勉強会で発表するときの事前準備Tips一覧

先週、cluster(VR空間でイベント体験ができる仕組み)を使ったオンライン勉強会で発表をしました。 WebXR Tech Tokyo #0 の全講演をまとめてみました - CrossRoad clusterでの発表はかなり久しぶりで、だいぶ変化も多く少し準備に手間取ったところがありま…

VMagicMirrorを使って、アバターとしてZoomやTeams会議に参加する方法をまとめました

最近、打ち合わせや飲み会をオンラインで行うことが増えている方が多いと思います。ネットで探すと、それらのやり方も多数見つかります。 テレワークに必須!有料・無料のWEB会議アプリおすすめ8選(Zoom以外で) | ライフハッカー[日本版] 今、話題の「オ…

【2020/5/5追記】WebXR Tech Tokyo #0 の全講演をまとめてみました

先週に引き続き、clusterでの勉強会に参加しました。今回は聴講者だけでなく発表も行いました。 いつも通り、全講演の内容を紹介していきます。 1. WebXR Tech Tokyoとは? 2. 講演 2.1 Aframeで日本語フォントを自在にする 2.2 [8thWall x three.js] お家で…

【2020/5/5追記】HoloLens ミートアップ @ cluster vol.1の講演内容をまとめてみました

HoloLensに関するイベントとしては、おそらくHoloLensミートアップが日本最大級だと思います。これまではオフラインで開催されていましたが、昨今の事情により今回はVR空間で開催されることになりました。 今回のイベントは、VR空間で300人近くの人が参加す…

expressを使ってLAN環境向けhttpsサーバを構築する方法

npmで提供されているexpressを使うと、簡単なコードでWebサーバを作ることができます。 expressでWebサーバを作るためのサンプルコードを使うと、大抵はhttp://localhost:8080のURLで実行できるサーバになります。しかし、検証したいサービスによっては、htt…

Blender2.83αで使用可能になったVR表示機能の環境構築方法をまとめました

先日、以下のツイートを見かけました。 blenderが先月openXRに対応してViewportをHMD内で見られるようになったらしいので、誰か日本語で解説のQiita書いたら良いのではないだろうか(他力本願) https://t.co/VYH1gsumdJ— にしかわ@IntoFree代表 (@MiyuWestr…

Githubから来た"A new security advisory on minimist affects"に対応するときに出たエラーと対処方法

Githubにリポジトリを公開していると、"A new security advisory on minimist affects"というタイトルの警告メールが来ることがあります。 私の場合、npmとyarnを使っているリポジトリでセキュリティの脆弱性があるライブラリが入っていることが原因でした。…

【2020/5/17追記】Microsoft Teamsにあまり慣れていないときのTips一覧

昨今の事情でTeamsやSlackのユーザ数が急増しているようです。 cloud.watch.impress.co.jp japan.zdnet.com これだけ急に増えると、これらのチャットツールに慣れてないが急遽使うことになった方もいるかもしれません。 そこで、今回はTeamsを取り上げて、使…

はてなブログでads.txtに対応するために、Azureでhttps対応のWebサイトを作る方法

はてなブログでアドセンスを使っていると、ルートドメインにads.txtを入れてくださいという警告が出ることがあります。 「はてなブログ アドセンス ads.txt」などで調べると色々情報が出ており、はてなブログ単体では対応できないことが知られています。 対…

(4-1-2020 updated) A new 3D VR180 sci-fi action film "GEIMU"

3-28 (1) : Added Ep3 youtube link (Chp1) 3-29 (2) : Added additional information about official site (Chp3) 4-1 (3) : Added canceling crowd funding (Chp3) VR180 is expected to be a new standard VR photo/movie format. The "GEIMU" is one of …

Noodl v2.0.2でa-frameを表示させる方法について

以前、Noodlというプロトタイピングツールについて紹介しました。 www.crossroad-tech.com NoodlはHTML5をベースとしていることもあり、Babylon.js、a-frameなどのWebGLラッパーも使うことができます。 www.crossroad-tech.com www.crossroad-tech.com これ…

JapanVR Fest開発者会でプロトタイピングについて登壇しました

先日、Japan VR Fest主催の開発者会がありました。7時間近くで約40人が発表、参加者も100人以上というかなり大規模なものでした。 様々な方面で真面目に取り組んでおられる方々の発表なので、どれも大変勉強になりました。 ついでに私も少し発表してますので…

Microsoft DocsのContribution License Agreementを確認してプルリクエストを出す手順をまとめました

Microsoftは、様々な技術情報をMicrosoft Docsというサイトでまとめています。 ドキュメントの紹介範囲は広く、Microsoft製の技術のみとは限りません。また、このドキュメントはGithubで管理されており、だれでも修正依頼 (プルリクエスト)を出すことができ…

Noodlで任意の3Dモデルを表示させる方法をまとめました

これは Noodl Advent Calendar 2019 の14日目の投稿です。昨日は@kmaepuさんのラズパイとNoodlでデジタルサイネージを作った話でした。 本日は、Noodlで3DCGモデルを表示する方法やTipsを紹介します。 なお、Noodlの基本的な内容を確認したい場合、たとえば…

PWAでWebXRアプリをオフラインで使うための方法

これは PWA Advent Calendar 2019の3日目の投稿です。昨日は@dryttさんの初学者目線でみるPWAでした。 本日は、PWAとBabylon.jsで作ったWebXRアプリをオフラインで使う方法を説明します。 1. 前提 1.1 Babylon.jsとは? 1.2 PWAとは? 2. オフラインに対応し…

【2020/1/26解決策追記】MacOSをCatalinaにあげてからWebブラウザの読み込み速度が遅くなった問題について

2週間ほど前、MacOSを10.15のCatalinaにアップデートしました。 (11/8時点で10.15.1) その後から、Macの動作が全体的に重くなったので、クリーンインストールを実施しました。しかし、現時点でもWebブラウザの読み込みが異常に遅い問題は残ったままです。 今…

プロトタイピングツール「Noodl」でBabylon.jsを表示させる手順について

前回の記事では、Noodlの概要を紹介しました。 www.crossroad-tech.com Noodlはノードをつなげてプロトタイピングするツールですが、javascriptを自分で書いたり、インターネットで提供されているjavascriptソースを読み込んで使うこともできます。 今回はBa…

センサ連携もできるプロトタイピングツール「Noodl」の概要と基本的な使い方をまとめました

本格的な開発に入る前に完成イメージを作って、関係者で内容や方針を決めるため、プロトタイピングツールというものがあります。 個人的には、ARやVRのアプリケーション開発にはプロトタイピングが重要だと思っていますが、よい手段を見つけられていないのが…

Visual Studio 2017で「エラー MSB4018」が出たときの対処方法

前回に引き続きPWA(Progressive Web App)について調べています。 www.crossroad-tech.com 前回は、オフライン化には成功したものの、キャッシュの扱いが不十分である程度時間が経つと再度アクセスが必要でした。これを解決する方法を探しているのですが、色…

gitコマンドで「Agreeing to the Xcode/iOS license requires admin privileges」が出たとき、Xcodeから対処する方法

先日、MacOSをMojaveからCatalinaにアップデートしたあとに発生しました。ターミナルからコマンド入力しても良いのですが、Xcodeを起動するだけでも解決できるので、対応方法を書いておきます。 1. 現象 2. 対応方法 3. おわりに

【暫定版】BabylonjsベースのWebXRコンテンツをオフラインのOculus Questで動かす方法

前回、PWAを使ってBabylon.jsで作られたWebサイトをアプリのようにする方法をまとめました。 www.crossroad-tech.com PWA(Progressive Web App)の特徴の1つにオフライン動作というのがあります。うまく使えればWebXRアプリをネットワーク接続不要で動作でき…

Babylon.jsで動くサイトをPWA化する手順について

Babylon.jsを使ってOculus Quest向けのアプリを作ろうとすると、ネットワーク接続が必須になります。そのため、自宅以外では動作確認がしづらくなります。 そこで、Progressive Web App(PWA)で解決ができないかを調べることにしました。 PWAをうまく使うと、…

【2019/9/18追記】Immersive Web Meetup#1の全講演をまとめました

先日、WebXRとWeb Musicに関する勉強会が開催されました。少し時間が経ってしまいましたが、ブロガー枠での参加というのもあり、当日の講演内容をまとめました。 主催者のRyoya Kawaiさんのまとめは下記の通りです。 ryoyakawai.com (2019/9/17追記) 参加者…

【2019/8/28追記】xR Tech Tokyo #17 の全講演をまとめてみました

すでに何度か参加報告を書いてますが、昨日、XR系のイベント「xR Tech Tokyo #17」に参加しました。今回はLT枠で発表をさせていただきました。 今回もXRおよび関連技術の発表が興味深かったのでまとめました。他の方のまとめはこちらです。 bibinbaleo.haten…