Sandcastleで始めるCESIUM ion 超入門（連載 第1回）

## はじめに
**Cesium ion（セジウムアイオン）** は、ブラウザで3D地図や都市の景観を表示したり、そこに3Dデータをアップロードして配置したりできる、とても便利なWebサービスです。英語でも「セジウム・アイオン」と言い、世界中の3D技術者からの信頼を得て、広く使われています。

「難しそう」と感じるかもしれませんが、スタートには特別な知識がなくても大丈夫。Cesium ion には3Dの地球儀や世界中の建物などが最初から用意されているので、ブラウザだけで簡単に始められます。

そして、Cesium ion の大きな魅力は、公式の体験学習サイト **Sandcastle（サンドキャッスル）** が用意されていることです。その名の通りに作っては壊すことを繰り返しながら学べるので、あれこれと試しながら技術を理解できます。

この連載記事では、全く未経験の方でも、Sandcastle を使って Cesium ion を体験するためのステップをご紹介して行きます。

## Step 1: Cesium ion の無料アカウントを作ろう
まずは、Cesiumのデータ管理・ホスティングサービス「Cesium ion」に無料登録しましょう。

### 手順1： ブラウザで Cesium ion サイトを開く

お使いのブラウザで、https://cesium.com/ を開きます。
ここで、右上の「SIGN UP FREE」の黄色いボタンを押すと、アカウントを作る画面が開きます。

![01_sign_up_button.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/4076483/be54a5c6-fdce-4ee8-b990-9b22915a4089.png)

### 手順2：メールアドレスとパスワードを入力してアカウントを作成

![02_sign_up.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/4076483/eb85069f-23c0-4a7d-b5cc-199913ed5b54.png)

#### メールアドレスはちゃんと届くものを入れましょう。

![02-1_input_mailaddress.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/4076483/a13f2690-ae9d-4a87-baa8-1cca00e15ae9.png)

#### その他の項目も設定します。
![02-1-1_input_password.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/4076483/63411d13-8009-4cde-a916-be3c9d930a8e.png)


### 手順3：確認コードを入れる
メールアドレスを登録すると、6桁の確認コードが送られてきますので、
この画面のCode欄に入れて「Verify」ボタンを押します。

![02-2_verifycode.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/4076483/fe26349b-aa0f-402a-80f2-0e0c0dc01b64.png)

### 手順4：利用条件を読む

確認が終わると、Cesium ion の Community アカウント（無償）の利用条件の説明画面が出てきます。この画面で言っているのは、Community アカウントで許可されている用途が以下の3つだということです。

#### Community アカウントの使い方の制限
①Non-commercial personal projects
　非商用の個人プロジェクト
②Exploratory development
　試験的な開発・テスト
③Unfunded educational activities
　資金提供のない教育目的の活動
 
 ![02-3_community_license.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/4076483/aecd2972-1ec8-4aee-b443-8d07bb8e8415.png)


初めて Cesium ion に触れる皆さんは、いきなり商用利用ではないと思いますので、ここは「Okay」ボタンを押して次に進みましょう。商用で使うことになった場合は、ちゃんと有償アカウントが用意されていますので、ご心配なく！

### 手順5：ユーザータイプ選択
次に「ユーザータイプ選択」画面が表示されます。

①左側（プログラムをしないで、ノーコードで使いたい人向け）
 「プログラムのコーディングをせずにウェブ上で地図を作成・共有したい」
　開発者じゃない人は、こちらを選んでおきましょう。
　いや、わたしは開発をしたいんだ、という方も、いったんこちらを選んで先に進んで大丈夫です。
　この連載の第2回からは、少しずつですが、内側（コード）を見ていくことになりますので！
 
②右側（開発者向け）
　「開発者で、Cesium ion を使ったアプリを作りたい」
　すぐに開発を始めたい人はこちらを選んでも良いですが、たぶんそんな方は、このガイドよりも Cesium ion のチュートリアルから始める方が良いかもしれません。

どちらを選んでも、データアップロードや3Dビューアなどの基本機能は共通です。

![02-4_select_usertype.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/4076483/eadbff37-cf7d-4641-9fbd-04e92b416141.png)


### 手順6：Cesium Stories は今回スルーで

前の画面で、左側の「ノーコード」の方を選択すると、Cesium Stories（セジウム ストーリーズ）というメッセージが画面右下に出てきます。

![02-5_open_tutorial.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/4076483/b19be947-5f02-4a05-94d8-bc0ada7cab97.png)

ここで言っているのは、
「Cesium Stories を見てみましょう。これは、3D地理空間プレゼンテーションやストーリーをウェブ上で作成・共有できるアプリケーションです。」
とのことですが、今回このお誘いはスルーしておきます。
※右側の白いボタン「Open Tutorial」は押さないで！そちらに飛んでいってしまうので😂

皆さんはこんな画面が表示できていますか？何もない灰色の画面が開くので、あれ？と思われるでしょうけど、大丈夫です。まだ、ここには何も登録されていないだけです。

![04_dashborad.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/4076483/488498ab-4e48-47dd-bce5-f3abdf96e56e.png)



-------------------
:::note warn
全然違う画面が出ちゃった？😱
:::

もし、ひとつ前の「Cesium Stories」画面にあった白いボタン「Open Tutorial」を押して、画面が下のようになっている人は、右側の黄色いボタン「OPEN ION」を押して戻ってきてください。

![03_tutorial.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/4076483/cf2781a3-ebe7-4865-80ea-baf325571c39.png)

-------------------


さて、画面の上の方にはこんなボタンが並んでいますか？

![02-6_tabs.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/4076483/5e90cdc1-30ac-4162-a5b4-e59bd059c4cd.png)


ここまで到達したら、この章はおしまいです。無事に Cesium ion のアカウントを作成できました。


## Step 2: My Assets タブから Sandcastle を開く


### 手順1：My Assets（マイ アセッツ = 私の財産）タブを選択

My Assets はユーザーが自分の3Dデータを入れておく場所です。
ここには、Cesiumが最初からいくつかの3Dデータ（アセット）を置いてくれています。

![05_select_my_assets.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/4076483/a0deac7e-4cc0-4bc7-b54b-7ea4cfd72b5a.png)



My Assetsの初期状態です。

![06_myassets_tab.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/4076483/cdd9bff3-e2b1-467b-885a-91ae1c51210a.png)


ここには最初から以下のようなアセットが登録されています。
① Google が提供している世界中の建物のフォトグラメトリデータ（写真から3Dオブジェクトを作ったもの）
② OSM（Open Street Map）の建物データ。OSM はオープンソースの地図を作っている団体です
③ Bing Maps の道路地図、Bing Maps はマイクロソフトが提供している地図サービスで、Cesium の標準地図に採用されています。
④ Bing Maps のラベル付き航空写真
⑤ Bing Maps の航空写真
⑥ Cesiumが提供している3D地形


### 手順2：Google Photorealistic 3D Tiles を選択

一覧の中から1番上の “Google Photorealistic 3D Tiles”（グーグル フォトリアリスティック 3Dタイルズ）を選択してください。


そうすると、画面の右下に「Open complete code example」というリンクが表示されます。

![07_open_complete_code_example.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/4076483/46f69ba0-0240-44f6-bbc9-05021150df6a.png)

### 手順3：Sandcastle を開く

このリンクをクリックすると、 Cesium ion の Sandcastle（コード実験環境）画面が新しく開きます。
![08_grobe.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/4076483/8f99ccc6-1999-4c89-a95d-8ab3f1be0810.png)

ついに Sandcastle（サンドキャッスル = 砂の城）に到達しました！😂


## Step 3: Sandcastle を見ていく

### 手順1：Sandcastle 画面を眺める

画面の左側には JavaScript（ジャバ スクリプト）のプログラム、右側には3Dビューアに地球儀が表示されていますね。
この3Dビューアが Cesium ion が提供している Cesium Sandcastle（セジウム サンドキャッスル）というものです。「砂の城」という名前には、何回でも作り直して遊びながら Cesium の使い方を学ぼう、という意味が込められています。

あらためて画面を見ると、左側のプログラムは、先ほどみなさんが選択した Google Photorealistic 3D Tiles を表示するためのプログラムです。右側の地球儀は、そのプログラムに書かれた通りに、 Google Photorealistic 3D Tiles のデータを Cesium ion が可視化したものです。



たったこれだけのプログラムで、Cesiumの地球儀データの上に、Googleの建物データが乗っています（今は見えていないけど😅）。

![08_grobe.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/4076483/6aef06bf-78a7-4699-b536-2d7bd50bb6b1.png)


### 手順2：日本にズームイン！

早速、建物を見てみましょう。

マウスをクリックしながら地球儀を回して（マウスドラッグで）、日本を見つけてください。
![08-1_finding_japan.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/4076483/e7808180-3313-48c2-81ed-43a83c5b3410.png)

マウスホイールを回すと地図が拡大/縮小します。マウスドラッグで場所を調整しながら、日本にズームインしていきます。好きな場所を拡大します。

もしマウスではなくトラックパッドを使っているなら、トラックパッドをクリックしながら指を動かすと、地球儀が回ります。そして2本指で上下に動かすとズームイン、ズームアウトします。

以下の例では、東京駅のあたりを拡大しています。なにやら3Dぽい建物が見えてきましたね。左側の緑は皇居です。

![09_tokyo.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/4076483/a2b32931-a03b-408f-91e7-dd221ee7ddeb.png)

----------------------
:::note info
全力で拡大しすぎて地面に突っ込んでしまったら、ズームアウトして戻ってください。わけわからない状態に陥ったら、左上のRunボタンで最初に戻ることもできます。
:::

#### 地面に潜った...
![09-1_underground.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/4076483/a84b565a-5e78-4a50-9b7b-4d76a4cfae71.png)


#### 最初に戻る...
![09-2_run_button.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/4076483/cb28afa6-30ff-4580-b181-10bca4004d93.png)

----------------------


### 手順3：立体的に見る

いい感じにズームインしたら、建物を横から立体的に見てみましょう。それには、キーボードの「control（CTRL）」キーを押しながら、マウスをクリックして前後左右に動かす（ドラッグする）だけです。
どうですか？驚きの3Dシーンを見ることができましたか？？

東京駅を南側から見ています。
![10_tokyo_station.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/4076483/f1a878e7-20a3-4cc1-b195-78d85bad4c2a.png)


# おわりに
今回は Cesium ion のアカウントを作って、Sandcastle の簡単な操作でリアルな3次元建物を見ることができました。

次回は、国交省のプロジェクト PLATEAU（プラトー）で作られている、日本の3D都市モデルとリアルな地形を組み合わせて見てみましょう。さらに、自分の3Dモデルをその世界においてみる方法もご紹介します。

世界中の 3D技術者はこの Sandcastle で遊び、学びました。あなたも、これから一緒に Sandcastle で遊びながら、Cesium で3D技術のプロフェッショナルになりましょう！



#### 連載記事一覧
第2回では Cesium ion Sandcatsle の左側のコードで遊びます。

:::note info
Sandcastleで始めるCESIUM ion 超入門（連載 第2回）
https://qiita.com/YutakaYasoshima/items/ca6d1fe495fd446090e1
:::