じゅころぐAR

AR/VRメインのブログ。時々ドローン。

ARCore v1.2でアップデートされた機能をさわってみた

Google I/O 2018の開催に合わせて、ARCoreがv1.2.0になりました。

内容的に注目すべき点が多いアップデートなので、追加された機能について調べていきます。
開発環境は、Unity前提になります。

ARCore1.2で追加された機能

Vertical plane detection

垂直面(壁など)の検知です。 ARKit1.5で既に提供されていたので、今回のアップデートで追従した形。
これは流石に対応してくるかなと思ってました。

実際に動かした感じでは、ARKitと同程度の精度に感じました。

  • ARCore 1.2
  • ARKit 1.5

ARCoreとARKit共通の特徴として、カメラベースなので暗いところでは平面が取れません。
また、無地の壁やカーテン、光が反射する面なども取りにくいです。
凹凸のある面の検知は結構アバウトに平面と検知します。

Augumented Image API

予めアプリに登録しておいた画像を検知することでAnchorを配置し、ARのオブジェクトを重ねることができます。

↓犬の画像がマーカーの役割でARの額縁がぴったり表示されるというサンプルアプリ

アプリに検知させたい画像はUnityエディタで追加できます。

f:id:jyuko49:20180509232059p:plain

実際に使ったことはないのですが、ARKit1.5で追加されていた2D Imagesがこの機能に相当するので、こちらもARCore v1.2で追従した形になるようです。

ARKit 1.5 can detect walls and identify 2D images such as posters, signs & artwork

用途としては、QRコードリーダーみたいなアプリを配布して、広告や展示で使うイメージでしょうか。検知時にAnchorが取れるので、マーカー検知でよくある空間共有のための位置合わせにも使える気がします。

Cloud Anchors API

今回の目玉機能とも言える複数デバイス間での空間共有機能です。
この機能のサンプルアプリはiOS/Androidを問わず共有ができる作りになっています。

チュートリアルを読むと、通信部分はUnity標準のNetworking APIを使っているようです。

Unity - Manual: Multiplayer Overview

Anchorの共有はGoogleのサーバを介しているとのことで、GCPGoogle Cloud Platform)のAPIキーが必要になります。

GCPのアカウントは既に持っていたので、新規プロジェクトのCloud Anchors APIを有効にして、すぐにAPIキーは発行できました。 f:id:jyuko49:20180510001116p:plain

発行したAPIキーは"Project Setting"で設定します。 f:id:jyuko49:20180510005520p:plain

f:id:jyuko49:20180510005537p:plain

iOSでビルドする場合は、ARKit Unity Pluginが必要なので、別途インポートします。アプリ自体の変更は不要で、プラットフォームをiOSに切り替えるてBuild Settingsを行えばOKです。

とりあえず、AndroidiOSで動かしてみました。

一方を"Host"にして、適当にオブジェクトを置きます。

共有するデバイス"Resolve"でHostで作ったRoomのナンバーとIPアドレスを入れます。
接続に成功すると、Hostで配置したオブジェクトが表示されていました。

サンプルを少し動かしただけなので、反映のリアルタイム性や接続が切れた際の挙動などは確認できていません。
この機能に関しては、利用する前により深い調査が必要そうです。

機能以外のアップデート

サポート端末の追加

v1.1からさらにサポート端末が増えていました。
プレビュー版の時点では3機種のみで、v1.0のリリース時も5機種くらいしかなかったことを考えると、v1.1,1.2でかなり増えましたね。

Supported Devices  |  ARCore  |  Google Developers

目立つところでいうとXperiaがサポート端末に入っています。
iPhone人気や海外メーカーに押されていろいろ厳しいようですが、国産メーカーとして人気のブランドでもあるので、がんばって欲しいところです。

以前からの傾向として、Android 7.0以上がARCoreの最低要件という点は変わりないため、Android 7.0のアップデートがない端末はサポートが期待できないと思います。

iOS(ARKit)との共存

ARCoreのCloud Anchorsのサンプルアプリは、ARKitを使うことでiOSでも動かせるようになっています。

Quickstart for iOS  |  ARCore  |  Google Developers

この対応は完全に予想外でしたが、開発者としてはありがたいですね。

所感

昨年はGoogle I/Oで色々発表した後にTangoが終了したりして、あまり期待しすぎないようにしていたのですが、今回のアップデートはかなり良いと思います。
既にARCore v1.2がリリースされているので、やるやる詐欺になる不安もないですしね。

ポイントとしては、

  • Imageの検知、垂直面検知など基本的な機能はARKit1.5に追従した
  • ARCoreだけでiOS/Android両対応でマルチプレイのARコンテンツが作れるようになった

という2点です。

ARCoreはARKitに比べて機能の少なさと対応デバイスの少なさがネックでしたが、機能面はほぼ追いつきましたし、デバイスについてはARKitとの共存戦略でiOSバイスもサポート範囲に含めてきました。
Cloud Anchorを他社に先んじてリリースしたことで、iOSユーザも含めてプラットフォームを握っておこうという意図がありそうです。

これを受けて、6月のWWDCAppleが何を発表するのかも楽しみになってきました。

オマケ(VPS

内部でARCoreを使っているであろう"Google MapのAR機能"も近々リリースされます。

www.rbbtoday.com

上記の記事をよく読むと、VPS(Visual Position System)という単語が!
VPSといえば、昨年のGoogle I/Oで発表され、Tango終了とともに消息を絶ったと思われていたGPSが使えない屋内で位置を特定する仕組み

グーグル、ARを使った最新技術「VPS」発表 屋内空間を把握しリアルタイムにガイドを表示 | Mogura VR - 国内外のVR/AR/MR最新情報

ARCoreで取得できるPoint Cloudを見て、TangoじゃなくてもエリアラーニングやVPSいけるのでは・・・と思っていたので、Google Mapでどう実装されているのか興味はあります。

Amazon Sumerianのプレビュー版を使ってみた

Amazon SumerianがLimited Previewから誰でも試せるPublic Previewになっていることをご存知でしたでしょうか。
私は今日まで知りませんでした…

Limited Previewで知り得た情報については公開を控えていたのですが、想像以上に使いやすく可能性を秘めたサービスに感じていたので、この機会に紹介しておきたいと思います。

Amazon Sumerianとは?

AWSサービスの1つとしてAmazonが提供しているVR/ARプラットフォームです。
2018年5月現在はプレビュー期間となっており、リージョン限定ではありますが無料で試すことができます。

aws.amazon.com

開発の流れ

AWSアカウントを用意してマネージドコンソールにログインします。
サービス一覧からAmazon Sumerianを選択すると、プロジェクトの作成画面が表示されます。

f:id:jyuko49:20180507215608p:plain

f:id:jyuko49:20180507215559p:plain

プロジェクト作成時には、予め用意されたテンプレートを利用することもできます。

プロジェクトを作成すると、Webコンソール上でそのままシーンの作成ができます。
シーンを構成する方法は、わかりやすいチュートリアルがあるので、この記事では割愛します。

f:id:jyuko49:20180507215844p:plain

シーンの構成が完了したら、画面左上のメニューからPublishでコンテンツを公開します。

f:id:jyuko49:20180507220039p:plain

Publishを行うと、すぐにAmazon CloudFrontのURL(xxxxxxxxxxxxxx.cloudfront.net)が発行されます。
このURLにブラウザでアクセスすれば、WebVR対応のコンテンツが表示されます。

f:id:jyuko49:20180507221621p:plain

料金

前述の通り、現在はプレビュー期間で無料ですが、料金プランは既に提示されています

aws.amazon.com

シーンの保存は、ストレージサイズに対して、1 か月あたり 0.06 USD/GBAmazon S3の料金に比べると少し割高ですが、S3が安すぎるのでそれでもかなり低コストです。
ユーザにコンテンツを提供する場合、トラフィックの合計量に対して、1 か月あたり 0.38 USD/GBがかかります。こちらもCloudFrontの料金に比べるとやや割高ですが、プラットフォームの利用料と考えれば納得できる金額ではあります。

Sumerianのメリットを活かしてコンテンツ更新の頻度とスピードを上げつつ、通信量はできるだけ抑える使い方がよさそうです。

Sumerianの良いところ

数日試してみて、良いと感じた点を挙げていきます。

豊富なチュートリアル

まず好印象だったのが、チュートリアルの充実度です。Limited Previewの時点でもかなりの数でしたが、その後もさらに追加されているようです。

docs.sumerian.amazonaws.com

一覧をざっと眺めていれば、Sumerianで何ができるのかは掴めますし、興味を引いたトピックをいくつか実行するだけで初心者でも基本的な操作は習得できるはずです。

プログラムレスで動き、JavaScriptにも対応

Sumerian上でのシーン構成は非常に直感的です。
特に秀逸だと感じたのはState Machineで、Key DownやClick、Collisionなどのアクションと移動やライトのON/OFFといった状態(State)の変化を紐付けるだけでプログラムなしでシーンの状態を遷移させることができます。

f:id:jyuko49:20180507223544p:plain

状態の変化を定義するのはエディタ上で矢印をつなぐだけです。

f:id:jyuko49:20180507223523p:plain

一方で、スクリプトを作成して処理を行うこともでき、JavaScriptで記述ができます。
AWSを利用する機会の多いWebエンジニアであれば、標準の開発言語としてJavaScriptが使える点は十分メリットになり得ます。

f:id:jyuko49:20180507224146p:plain

WebVRでクロスプラットフォームに公開可

Sumerianで公開されるコンテンツはWebVRがベースになっています。
つまり、WebVRに対応していれば、単一のコンテンツをPC、モバイル、Oculus、HTC VIVEなど複数のデバイスに同時に提供できます。

ARについては、WebXRに正式対応しているブラウザがまだないため、デバイスですぐに利用することはできません。
ただし、チュートリアルの中にARKit、ARCoreに対応したビューアアプリのサンプルがあるので、ビューアだけをアプリで提供して、コンテンツはSumerianで更新する形であれば利用できます。

https://github.com/aws-samples/amazon-sumerian-arkit-starter-app
https://github.com/aws-samples/amazon-sumerian-arcore-starter-app

Unityプロジェクトからのインポートに対応予定

VR/ARアプリを開発する場合、現状ではUnityがファーストチョイスになっていると思います。
Sumerianは近日中にUnityからのインポートもサポートする予定と明言しており、シーンの構成は使い慣れたUnityで行い、公開はSumerianという運用が可能になります。

f:id:jyuko49:20180507232700p:plain

用途によりますが、Unityからプラットフォーム毎のビルドを行い、ストアに公開するよりも、Sumerian向けのインポートだけを行ってそのまま公開できれば、より素早くより多くのユーザにコンテンツを提供できるはずです。
まだUnityサポートの詳細が未知数ではあるものの、注目したい機能です。

シーンの公開、更新がスムーズ

Sumerianに限らず、WebVRの最大の強みは、クロスプラットフォームかつコンテンツの更新を即座にユーザに届けられることだと思っています。

例えば、日によって一部が変化するVRシーンを提供したい場合、WebVRならSumerianでコンテンツを公開して、ユーザがリロードボタンを押せば、タイムリーに更新を反映することができます。
他のプラットフォームでも実現できなくはないですが、バックエンドにAWSがいることでスムーズなデプロイ、高速なデリバリーが容易になっています。

課題

使ってみて気になった点(利用時に調査が必要な点含む)です。

閲覧時のパフォーマンス

コンテンツの配信はCloudFrontによって高速化されますが、ブラウザで閲覧する際のパフォーマンスはデバイスに依存します。
WebVRということもあり、十分なパフォーマンスが出せるかは確認が必要で、特定のデバイス向けに高品質のコンテンツを提供したいなら他の選択肢もあわせて検討すべきです。

コスト妥当性の評価

料金プランを見る限り、高すぎるという印象はないのですが、構築するシーンの内容によってどの程度のサイズ(通信量)になるかが読みにくいため、コストの試算が難しそうです。
ローンチ後は様々な事例で知見が溜まっていくと思うので、解消していく部分ではあります。

Assetの充実

プレビュー期間とはいえ、UnityのAsset Storeに比べるとかなり物足りない感じはあります。 FBX、OBJファイル形式からのインポートができるので、自前でコンテンツを用意する分には何とかなりますが、ちょっとしたアイテムが欲しいときなどサードパーティ製のコンテンツを二次利用する仕組みが構築されるとよいかなと思います。

WebXR(WebAR)の対応状況

Sumerianの問題ではないですが、WebXR(WebAR)に対応しているブラウザがないため、AR開発のプラットフォームとしてはメリットを最大限に発揮できません
数年後にはChromeSafariで正式サポートされると信じて待ちましょう。

まとめ

プレビュー版で基本的な機能を試しただけですが、コンセプトが明確で、初心者にも使いやすく、AWSとWebVRの利点を活かしたサービスになっていると感じました。
VR/ARプラットフォームとして飛躍的に成長するポテンシャルはあると思います。

特に、Web開発やAWSの利用を行なっていて、VR/ARコンテンツの制作に興味があるユーザにとっては強力なツールだと思います。現状ではVR/ARのエンジニアよりもWebやAWSの開発者の方が遥かに多いと思うので、VR/ARの裾野を拡げる意味でも期待したいところです。
また、予告通りにUnityサポートがされた後には、Unityで開発をしていて、更新の頻度を重視したVR/ARコンテンツを配信したいユーザにとっても選択肢になります。

今はまだプレビュー期間でWebVRの注目度もこれから上がっていくところなので、正式ローンチを待ちつつ、今後の動向を注視しておきたいと思います。

UnityでビルドしたARKitアプリが実機でアプリ落ちするとき

わざわざ記事にするまでもないのですが、ここで躓くの2回目なので。

カメラ許可ダイアログのメッセージを入れ忘れている

ARでカメラが映る前に落ちている場合、まず疑うべきはここ。

"Build Settings" > "Player Settings" > "Settings for iOS" > "Other Settings" > "Configuration" > "Camera Usage Description"

f:id:jyuko49:20180502090536p:plain

何らかのメッセージを入力すれば、アプリ起動時にカメラ許可のポップアップが表示され、許可するとアプリが動く。

Vue.jsで作ったWebサイトをAmazon S3+CloudFrontで公開する

先日Vue.jsで制作&公開したWebサイトは、AWSでお安く運営しています。

Vue.jsでWebサイトをサクッと作る - じゅころぐAR
Vue.jsで作ったサイトをPWAに対応させてみる - じゅころぐAR

構成はよくある"静的WebサイトのS3ホスティングパターン"ですが、必要な設定を全部まとめておきたかったので書きます。

f:id:jyuko49:20180428231806p:plain

構築手順

2018年4月時点の画面および手順です。
※Managed ConsoleのUIは頻繁に変わるので注意

独自ドメインを取得する

"Route53"を選択し、Domainsの"Register Domain"をクリックします。

f:id:jyuko49:20180428232738p:plain

希望のドメインを入力し、トップドメイン(.comなど)を選択して"Check"をクリックすると、取得可能なドメインが表示されます。

ドメインを決めたら"Add to cart"でカートに入れて、画面に従って購入します。

f:id:jyuko49:20180428234438p:plain

SSL/TLS証明書を取得する

WebサイトをHTTPSに対応させるため、SSL/TLS証明書を取得しておきます。AWS内での利用になりますが、無料で発行できます。

"Certificate Manager"を選択し、証明書のプロビジョニングを選びます。

f:id:jyuko49:20180429002916p:plain

証明書を発行したいドメインを入力します。Route53で取得したドメインに、*.を付けてワイルドカード証明書を発行します。
こうしておけば、サブドメイン全てで同じ証明書が利用でき、再発行等の手間が省けます。

f:id:jyuko49:20180429002936p:plain

S3バケットを作成する

"S3"を選択し、ファイルをアップするバケット(Bucket)を作成します。
バケット名は公開したいドメインにします。Route53で取得したドメイン(例: jyuko49.com)にサブドメインを追加したドメイン名(例: app.jyuko49.com)を入れます。
リージョンはロケーションが近い場所(東京)を選択した方がファイルアップの際の通信などで都合がよいです。

f:id:jyuko49:20180428235431p:plain

バケットを作成したら、ファイルをアップします。Vue.jsをwebpackでビルドして、/distに作られるファイルをまるっとアップします。

f:id:jyuko49:20180429000724p:plain

CloudFrontを設定する

"CloudFront"を選択して、"Create Distribution"をクリックします。

f:id:jyuko49:20180429012414p:plain

最初の選択肢は"Web"を選びます。表示される設定画面で、オリジン(Origin)に先程作成したS3バケットを選択します。

f:id:jyuko49:20180429001735p:plain

"Alternate Domain Names(CNAMEs)"S3バケット名にしたドメインと同じドメイン名を設定します。
あわせて、すぐ下の"SSL Certificate""Custom SSL Certificate"に変更し、Certificate Managerで作成したワイルドカード証明書を選択します。

f:id:jyuko49:20180429005525p:plain

その他の項目はお好みで。全てデフォルトのままでも問題ありません。

私が実際に設定したのは、ドメイン直下(パスなし)でアクセスした際の"Default Root Object"index.htmlにしたのと、

f:id:jyuko49:20180429012925p:plain

HTTPのリクエストをHTTPSにリダイレクトする設定(常時HTTPS化)です。

f:id:jyuko49:20180429013604p:plain

作成できたら"Domain Name"に表示されるURL(*****.cloudfront.net)をメモっておきます。次の手順で使います。

Route53にサブドメインを登録する

いよいよ最後の手順です。

"Route53"に戻って、"Hosted zones"から最初に設定したドメインを選択します。
メニューが開いたら"Create Record Set"をクリック。

Nameサブドメインを入力します。S3バケット名とCloudFrontのCNAMEに設定したドメインサブドメインです。
続いて、ValueCloudFrontディストリビューションのDomain Name(*.cloudfront.net)を入力します。
設定ができたら、"Create"でレコードが作成されます。

f:id:jyuko49:20180429013844p:plain

ここまで設定したら、ドメインにアクセスして表示ができているか確認しましょう。
Route53 → CloudFront → S3 とS3にアップされたコンテンツが参照され、HTTPS通信時はCloudFrontにてCertificate Managerで発行した証明書による認証が行われます。

S3アップ時に自動でCache Invaridationを行う

CloudFrontはS3にアップしたコンテンツをキャッシュするので、S3のファイルを更新した際にキャッシュが残っていると反映が遅れます。
"Invalidation"を行えばキャッシュが消えますが、毎回手動で行うのは手間なので、S3にファイルをアップしたら自動でInvalidationを行うようLambdaファンクションを設定しておきます。
Lambdaには常に有効な無料枠があるので、余程頻繁にファイルアップをしない限り、コスト負担はありません。

"Lambda"を選択して、"関数の作成"をクリックします。名称の他に、ランタイム(スクリプト)の言語とバージョン、IAMロールを入力する必要があります。

IAMロールとスクリプトは、以下の記事を参考にしました。
Automatic Cloudfront Invalidation With Amazon Lambda | Blog

スクリプトの用意ができたら、トリガーとしてS3を追加します。

f:id:jyuko49:20180429165956p:plain

Webサイト用に作成したバケットを選択して、"オブジェクトの作成(すべて)"をトリガーにします。

f:id:jyuko49:20180429170019p:plain

トリガーを保存してLambdaファンクションを有効にすれば、S3へのファイルアップ時、自動でキャッシュが消えるようになります。

請求アラートを設定する

アクセスが急増して請求額が増えたときに気付けるようアラートを設定しておきます。

"請求ダッシュボード"の設定メニューで請求アラートが有効になっていなければチェックして設定を保存します。

f:id:jyuko49:20180429172340p:plain

通知の設定は"Cloud Watch"で行います。
"アラームの作成"を行い、メトリクスに"概算合計請求額"を設定します。

f:id:jyuko49:20180429172505p:plain

アラームの名前を入力して、通知を行う金額を設定します。コスト感は後述しますが、想定の利用料は$5にも満たないので、$5を超えたらメールが来るようにしました。

f:id:jyuko49:20180429173418p:plain

請求アラートはその金額を超えたときに1回のみの通知なので、通知する金額を段階的に変えて、複数のアラートを設定するのも手です。


かなり長くなりましたが、ここまで設定しておけば、Webサイトとして実運用に耐えうるレベルかなと思っています。

まだ未対応の作業としては、"ローカルマシンからS3へのアップロードを自動化するwebpackのプラグイン"を追加すれば、サイトの更新がさらに楽になるので導入を検討中です。

github.com

メリット

機能面

CloudFrontを導入していることで、

  • 常時HTTPS
  • HTTP/2
  • キャッシュによる高速化(CDN)

が有効になります。

HTTPSでセキュアな通信を行いつつ、HTTP/2とCDNの効果でクライアントとの通信遅延も抑えられるため、Webサイトの品質も向上します。

また、サーバレスの構成なので、サーバの高負荷や遅延に悩むこともありません。特定の時間帯にアクセスが急増したとしても耐えられます。
その分、課金はされますが、アラートも設定していますし、金額的には誤差の範囲に収まるかと思います。

コスト面

まず、ドメインの取得に年額$12.0かかっています。1ヶ月あたり100円くらいですね。取得したドメイン名によって金額は異なります。
また、Route53でホストゾーン1つに$0.5かかります。

S3にファイルを配置する料金は1GBあたり$0.025で、仮に1GB使ったとしても月額3円程度です。今回制作したサイトは画像を含めても15MB以下なので1円もかかりません。

費用として見込んでおく必要があるのは、Webサイト閲覧時のファイルダウンロードにかかる通信料です。
CloudFrontでは$0.14/GBで、ページサイズが1MBなら1000PVで1GB=$0.14の計算になります。個人サイトなら月間のPVはそこまで多くないので、実際には100円以下の請求です。

合計しても、数百円/月で運営できています。

実際に4月の請求額からドメイン取得にかかった費用($12+税)を除くと、$1もかかっていません。

f:id:jyuko49:20180429174927p:plain

f:id:jyuko49:20180429175416p:plain

まとめ

Webサイト用にわざわざインスタンスを立てるより管理が楽ですし、機能・コストのどちらを取ってもオススメの構成です。
サーバがないのでSSRとかは難しいかもしれませんが、非同期処理はAPI Gateway + LambdaのサーバレスAPIと組み合わせれば実現できるので拡張性もそこそこあります。

Vue.jsで作ったサイトをPWAに対応させてみる

2018年はPWA(Progressive Web Application)が注目されつつあるので、先日Vue.jsで作成したWebサイトをPWA対応させてみたいと思います。

jyuko49.hatenablog.com

PWAとは?

"ホーム画面に追加"を行うことでネイティブアプリのように動作するWebアプリケーションです。オフラインキャッシュで快適に動作したり、Webプッシュ通知が受けられたりします。

Googleが提唱していた技術で、以前から気になってはいましたが、MicrosoftAppleが相次いでサポートを表明したため、ここに来て注目度が上がっています。

マイクロソフト、Progressive Web Apps(PWA)をWindows 10のデスクトップで実行可能に。Windows 10はWindows、Linux、PWA対応のプラットフォームへ - Publickey

AppleもiOS/macOSをProgressive Web Apps(PWA)対応へ。次のSafari 11.1でService Workerなど実装 - Publickey

今年中にはAndroidiOS(Mac OS)、Windowsの主要3プラットフォームで使えるようになることで、クロスプラットフォームアプリの開発における有力な選択肢の一つに変わってきた訳です。

PWAのメリット

前提として、"Webサイトを持っている"もしくは"開発者のスキルセットがWebアプリケーション開発に向いている"場合に有益な技術です。
名前の通り、ネイティブアプリから置き換えるのではなく、Webアプリケーションの進化系(Progressiveとして捉えた方がいいと思います。

SPAのアプリ化が簡単

Webアプリ設計のトレンドとして、AngularJS、React、Vue.jsなどのJSフレームワークを利用したSPA(Single Page Application)が増えてきていると思います。
上記の環境なら、既存のWebアプリケーションを拡張する形で簡単にPWA対応できそうです。

WebのOSSを使い放題

PWAで対応するメリットとしては、Webには膨大なOSSGithubやnpmをはじめとしてWeb上のいたるところで公開されています。
PWAもWebアプリケーションには変わりないので、それらの資産を好きなだけ活用できます。

Webアプリの機能を拡張

キャッシュを利用したオフライン状態での動作、フルスクリーン表示、プッシュ通知などが実装できます。

Web Fundamentals  |  Google Developers

PWAに対応する

元サイトがVue.jsの前提です。

Vue.jsプロジェクトをPWAボイラープレートで作成する

vue-cliでプロジェクトを作成する際に、vue init webpackではなくvue init pwaを実行するとPWA対応に必要なファイル込みで初期化してくれます。

$ vue init pwa vue-pwa
$ cd vue-pwa
$ npm install
$ npm run build

新規にプロジェクトを作り直す形にはなりますが、componentsやrouterはそのまま使えるので、移植はそこまで難しくなかったです。

成功すると、/static/manifest.jsonが作成されています。また、ビルドを行うと/dist/service-worker.jsが作成されます。

アイコンを作る

ホーム画面に追加されるアイコンやfaviconのデフォルトはVue.jsのロゴになっているため、オリジナルの画像に差し替えます。

f:id:jyuko49:20180427232350p:plain

イコン画像はmanifest.jsonで指定されているのですが、プラットフォームによって画像サイズや指定方法が統一されていないようでindex.htmlにもアイコン等の記述があります。

  "icons": [
    {
      "src": "/static/img/icons/android-chrome-192x192.png",
      "sizes": "192x192",
      "type": "image/png"
    },
    {
      "src": "/static/img/icons/android-chrome-512x512.png",
      "sizes": "512x512",
      "type": "image/png"
    }
  ],
  • index.html
<link rel="apple-touch-icon" href="<%= htmlWebpackPlugin.files.publicPath %>static/img/icons/apple-touch-icon-152x152.png">

<meta name="msapplication-TileImage" content="<%= htmlWebpackPlugin.files.publicPath %>static/img/icons/mstile-150x150.png">

アイコンの作成はどのツールを使ってもよいです。今回は簡単にオリジナルのアイコンを作成できるIconionを使ってみました。

beginners-high.com

アイコンとスタイルを選んで保存するだけです。

f:id:jyuko49:20180429110702p:plain

いくつかのサイズを用意して、staticディレクトリに保存。manifest.jsonとindex.htmlを書き換えればアイコンが変わります。

注意事項として、apple-touch-iconでは透過色が黒く表示されてしまいます。
Gimp等で透過部分を背景色に塗りつぶしたら、正しく表示されました。

※ 透過色の縁取りが黒くなる f:id:jyuko49:20180429135049p:plain

※ 透過なしで塗り潰しておけばOK f:id:jyuko49:20180429135143p:plain

Lighthouseでチェックする

PWA対応のチェックを行うツールがオープンソースで提供されています。

developers.google.com

Chrome拡張機能を使うのが簡単で、チェックしたいページをChromeで開いて、"Generate report"をクリックするだけでレポートを作成してくれます。

f:id:jyuko49:20180427230649p:plain

PWA対応以外にもパフォーマンスやSEO対策などサイト改善のヒントを教えてくれます。
パフォーマンスのスコアが低いのは、ネット回線が調子悪いせいだと思う・・・。

PWAを動かしてみる

iOS11.3

iPhone SEでPWAとして動かしてみます。

PWA対応したWebサイトをSafariで開いて、メニューから"ホーム画面に追加"を行います。

f:id:jyuko49:20180429124202p:plain

ホーム画面に追加されたアイコンをタップすると、PWAが起動します。

f:id:jyuko49:20180429124255p:plain

画面の見た目はブラウザと変わりませんが、アドレスバーとメニューバーの分、画面を広く使えていますし、画面を切り替える際のレスポンスも良いです。

Safariだと赤枠の部分が表示される

f:id:jyuko49:20180429124356p:plain

Android7.0

続いて、Androidでも試してみました。

Chromeでサイトのトップページを開くと、PWAがあることを教えてくれます。流石Google、PWAを協力にプッシュしてくれています。

f:id:jyuko49:20180429132817j:plain

ホーム画面に追加してアイコンをタップすると、スプラッシュ画面(デフォルトはアイコンとアプリ名)が表示されます。

f:id:jyuko49:20180429133609j:plain

起動後の画面は、iOSと同じでブラウザのアドレスバーがないフルスクリーン表示になります。

f:id:jyuko49:20180429133715j:plain

まとめ

元々のサイトをSPAで作っていれば、アプリケーション自体は変える必要がなく、mafifest.jsonやアイコンなどを用意するだけなので、PWA対応は簡単です。
Google主導で先行しているAndroidは機能も多く、PWAをプッシュしてくれているので、iOSも追従してくれると一気に普及しそうです。

Nintendo Labo Robot Kitで遊ぶぞ!

GW前半に入り、ようやく時間ができたので、Nintendo Labo Robot Kitで遊びたいと思います。

ロボットになりたい

Nintendo Laboで遊ぶにあたり、まずはVariety Kitから買って、お子さんとワイワイ楽しみながら作る方が多いと思うんです。

↓こっち

しかし、30代男子としてはね、『断然ロボット』な訳ですよ。世代的にロボットアニメで愛と勇気と友情のなんたるかを知ったと言っても過言ではないです。
魔神英雄伝ワタルグランゾート、ラムネ&40、勇者シリーズレイアースとか見て育った。

『だから、俺は、ロボットになる!!』

| ● ▲ ● |

Amazon限定セットを購入すると、バイザーに取り付けられるダンボーのお面が付いてきます。
ダンボール+ロボット=ダンボーということで、Robot Kitを購入する人にはオススメです。

組み立ててみる

Switchにソフトを入れて、動画付きの説明を見ながら作ります。

ダンボールの部品はギザギザの切れ目が付いていて、手で少し押せば取れるので、カッターとか使わなくても大丈夫。

チュートリアルとして、最初に作るJoy-Conケース。簡単!

最初の部品、バイザーです。割と複雑で30分くらいかかったかな。

やっぱりアプリケーション開発に限らず、ものづくり楽しい!!
残りのパーツも作っていきます。

1時間経過...

メインボディを組み立てていく、デカいので大変。

3時間経過...

ようやく本体ができてきた。紐を引っ張ると箱(パワーユニットが)上下するようになってて、箱に貼られたラメシールがIRセンサに反応するようになっています。
すごーい!

5時間経過...

できました!!

時間かかったけど、作るのすごい楽しかった。

遊ぶ

レッツプレイ!

基本攻撃はパンチ!空を飛んだり、クルマに変形したりできます。

f:id:jyuko49:20180428182924j:plain

バイザーを下ろすと、FPV(一人称視点)モードになります。

f:id:jyuko49:20180428183240j:plain

1人プレイのゲームモードはシンプルで、目の前に見えるものすべてを壊しまくってスコアを稼ぐ!UFOだけでなく、ビルも車も木々も壊す。地球の平和を守ったりはしない。

なお、ロボットだけどカロリーは消費します。体重を入力すると、累計の消費カロリーを見ることができて、設定後はプレイ中も画面の下に表示されるようになります。

1時間後...

ロボット、疲れる。

手足を頻繁に動かすので、結構疲れます。毎日1-2時間ロボットになれば、ロボダイエットできそう。

わかる

「つくる」「あそぶ」の他に、「わかる」メニューがあり、動画でロボットが動く仕組みや片付け方を教えてくれます。

f:id:jyuko49:20180428185111j:plain

バイザーやハンドコントローラーは全部本体の中に仕舞えて、本体は壁に掛けられるようになっていました。本当によく考えられています。

感想

作るのは時間が掛かるけど、安全でわかりやすいし、何より楽しいです。時間を忘れて作っていましたが、休憩を入れつつ、数日に分けてじっくり楽しむのもよさそう。

ゲームは単純ですが、心の内に秘めている破壊衝動を解き放つのに最適です。ストレス、運動不足を解消できるかもしれない。
2人プレイもやってみたいので、一緒にロボットになってくれる人も募集中です。

2017年に買ったものランキング

突然ですが、Amazonアソシエイトプログラム参加記念!2017年に買ったものランキング』です。
過去このブログに登場した商品をランキング形式で紹介します。

なお、このページのリンクから商品を購入して頂くと、全国の恵まれないjyukoさんに幾ばくかの報酬が入りますので是非!(直球)

第5位:Daydream View

GoogleのDaydreamを体験するのに必要なゴーグルとコントローラのセットです。
私は第一世代の並行輸入品を買いましたが、現在はより安価で視野角の広い第二世代が国内販売されています。

OculusやVIVEに比べればクオリティは低いですが、ゴーグルが軽くて装着感がいいですし、スマートフォン型のVRとしては十分な品質の体験ができます。

個人的には、Rez Infiniteがプレイできただけでも満足。

jyuko49.hatenablog.com

第4位:Google Home Mini

こちらはAmazonではなく、家電量販店で半額セールのときに買いました。
おうちハックとか普通の使い方はあんまりしていなくて、ボスぐるみのAIを開発して遊んでました。わーい!たーのしー!

ちなみに、ボスぐるみの方はAmazonで買えます。

jyuko49.hatenablog.com

第3位:ジェダイ・チャレンジ

スター・ウォーズ 最後のジェダイ」の公開に先駆け、Lenovoが発売したARホビーです。
ホログラム表示されるキャラクターとライトセイバーを振り回して戦うので、プレイ時は結構身体を動かしますし、正直めちゃくちゃ楽しいです。

対応機種でないと全く遊べない恐れがあるので、購入を検討する場合は公式サイトで事前に確認を。

jyuko49.hatenablog.com

第2位:Parrot Mambo FPV

私の愛機(というほど飛ばしてないけど)、お気に入りのミニドローンを2位にしました。

Mamboの特徴は、

  • 軽いのでドローン規制の対象にならない
  • パーツを付け替えて遊べる
  • FPVセットが発売された
  • Node.jsで飛ばせる

本格的な空撮やドローンレースをやりたい人よりは、練習用だったり、気軽に飛ばして色々遊びたい人向け。
見た目もよくて気に入っています。

あと、予想外の効果として、Qiitaでもはてブでも、ARじゃなくてMamboのことを書いた方がPVが伸びるっていうね。そういう意味でも貢献しています。

qiita.com

jyuko49.hatenablog.com

第1位:ASUS Zenfone AR

昨年6月に購入して以降、Android開発の主力機として活躍中のZenfone ARを1位にしました!
10万円近いのでまあまあの出費でしたが、Pixelが未だに国内販売されない現状において、Tango、Daydream、ARCoreといった技術を先行体験できている希少性を考えると投資に見合うだけの価値はあったかなと思います。

jyuko49.hatenablog.com

いかがでしたでしょうか? ここに書いていないところではNintendo Switchも買ってたりして、振り返ってみると買い過ぎなんじゃないかと思ったりもしますが、自己投資でもあるし、深くは考えないことにします。