コンテンツにスキップ

FOSS4G 2025 JP Mapray Hands-onにようこそ

参加者の皆様。この度はMaprayハンズオンにご参加いただき誠にありがとうございます。 本ページでは当日の流れと会場にいらっしゃる前に事前準備をしていただきたい事柄を記載しています。 本ドキュメントを参考にして、事前に確認とセットアップをお願いします。

当日のプログラム

以下のようなプログラムを考えています。

  • 第１章: Mapray Cloud(クラウドサービス)を使った、Maprayアプリケーションでデジタルツインコンテンツの作成
  • 第２章: mapray JSとMapray Cloudを使って、Maprayを使ったプログラミングを学習
  • 第３章: 残り時間で、自由にプログラミング。Mapray Cloudにデータをアップロードしたり、コンテンツを作成したり、プログラムを行います、進行具合で時間が短くなる可能性もあるのでご了承ください。

第1章

ウェブブラウザからMapray Cloudにログインしてアプリケーションを操作します。サンプルデータをクラウドにアップロードして利用します。

第2章

HTMLとJavaScriptでプログラミングを行います。ウェブアプリケーションを作成しますので、開発環境が必要になります。

第3章

1章、２章の復習も兼ねて、自由にコンテンツを作成したり、プログラミングができる時間とします。Mapray Cloudの有料版をご用意する予定ですので、表示したい点群データなどがあれば、事前にご用意いただいてもいいかもしれません。ただし、あまりにも容量が大きいデータは、アップロード時にWiFiの帯域に負荷をかけ、さらに変換時間が長くかかる場合があるので、例えば点群データの場合ですと、最大でも1GB程度が妥当かと考えています。 有料版はOrganizationというグループに参加していただきます。

必要な環境

  • ネットワークに接続可能なコンピュータ
  • WebGL 2.0が動作するウェブブラウザ(Maprayに必要な動作環境)。最新版に更新していることが望ましいです。
  • Mapray Cloudのアカウント
  • HTML/JavaScriptの開発ができる開発環境 (講師はVisual Studio Codeを利用予定)
  • 作成したウェブアプリを動作させるローカルサーバー (PythonやNode等、自由ですので、使いやすいものをご用意ください。もちろん開発環境に付属しているものでも結構です)
    • ライブサーバーとは: ローカルサーバーの一種で、コードの変更を保存すると自動的にブラウザをリロード（再読み込み）してくれる便利な機能です。これにより、修正がすぐに画面に反映されるため、開発効率が格段に向上します。Visual Studio Codeには拡張機能として簡単に追加できます。導入方法の詳細は、こちらの記事などが参考になります。
  • サンプルデータ

Note

今回はNode.jsを使わず、プログラムの説明は標準的なJavaScriptを利用します。Node.jsの環境で開発をしたい場合は、質問ベースで講師が答えることができますが、サンプルは標準的なJavaScriptで説明します。Nodeでの開発は3章でトライいただくとスムーズかもしれません。

事前準備

特に事前に確認いただきたい内容を説明します。

  • 開発環境は各自準備してください
  • ブラウザがWebGL 2.0に対応しているか
  • Mapray Cloudのアカウント作成。以下にアカウント作成方法を掲載します
  • 作成したUserIDをGoogleスプレッドシートに記入
  • サンプルデータのダウンロード（サイズが大きいので当日のネットワーク環境によっては時間がかかるので事前にダウンロードをお願いします）

WebGL2.0が動作するか否かの確認

WebGL テストサイトを紹介します。

以下をクリックして（外部サイト）Your browser Supports WebGL2と表示されればWebGL2.0が動作します。

WebGL2.0が動作するブラウザのリスト Can I Use

Mapray Cloudのアカウント作成

Mapray Cloudを使うためには、アカウントの作成が必要です。 Maprayは現在ベータ版として運用されています。 どなたでも無料でアカウントを作成できます（注：ただし容量制限があります）

無料アカウントを作成した後、セミナー当日に本セミナー用のグループ（Organization)にご案内します。 Organizationは制限を解除しているグループですので、自由にデータをアップデートできます。

Organizationの注意点

Organizationはグループですので、アップロードしたデータはグループに参加した全員が閲覧することができます。 秘匿性のあるデータをアップロードしないようにご注意ください。

Organizationの削除

本セミナー用のOrganizationは２から３週間後に削除されます。アップロードいただいたデータも同時に削除されますので ご了承ください。

最初に Mapray Cloud のアカウントを作成します。Maprayはソニーアカウントを利用してアカウントを作成します。

1. Mapray Cloudにアクセスします。

リンク 以下のトップページが表示されます。 mapray-cloud-top-page

2. アカウント作成

SIGNUP FOR BETAボタンをクリックすると、ソニーアカウントでログインするように促されるので、指示に従いソニーアカウントへログインしてください。Maprayのアカウントはソニーアカウントと紐づけられます。ソニーアカウントをお持ちでない方は、ページ真ん中のアカウントの作成をクリックして、ソニーアカウントを作成してください。 mapray-cloud-sonyaccount

3. ログイン

以後、指示に従うとMapray Cloudにログインできます。以下のDashboardページが表示されれば成功です。

dashboard

UserIDをGoogleスプレッドシートに記入

Organizationに参加したい方は、MaprayのユーザーIDをサンプルデータをダウンロードしたGoogle Driveに置いてあるスプレッドシートに記入してください。

ID番号は UserProfile画面からコピーできます。

userprofile-dashboard

サンプルデータのダウンロード

Google Driveにデータをアップロードしました。このリンクからダウンロードしてください。サイズは、約250MBです。