🗂

Cesiumを使って地球儀Webページを作成する

9 min read

やりたいこと

地球儀をくるくるまわせるWebページを作りたい。
まずはローカルで動かして、そのあと他の人に共有できるようにWeb公開したい。

用意するもの

  • ノートPC(OS:Windows10端末)

  • chromeブラウザ(バージョン56以上)

  • メモ帳(ソース編集のためのテキストエディタ、サクラエディタとか秀丸とかVisual Studio Codeのほうがよい)

  • AWSアカウント

使う技術

  • Node.js
  • npm
  • html,JavaScript,stylesheet
  • AWS S3 ※ローカルで動かしたいだけなら不要

参考にしたサイト

https://qiita.com/rot/items/bf7434d299e58d4c5a2a
https://qiita.com/keijipoon/items/615ebaf7561a27d744f5
https://garafu.blogspot.com/2017/11/nodejs-npm-proxy-config.html
https://qiita.com/shika-e/items/808ccdd047133315b95c
https://cesium.com/learn/cesiumjs/ref-doc/Cartesian3.html

手順

1 「用意するもの」をそろえる。

たぶん、Windows端末が一つあれば事足ります。

2 cesiumアカウントを取得する。

以下サイトでサインアップ(登録)します。

https://cesium.com/

メールアドレスを使ってサインアップする場合は、

こんな感じで必要事項を入力します。Sign upを押せば完了。


ここはどっちでもいいです。

メインページが表示されていますので、Access Tokensをクリックします。

デフォルトのアクセストークンを確認することができます。

また、サインアップ時に入力したメールアドレス宛に確認メールがきますので、Verify emailしておきましょう。

3 Node.jsをインストールする。

お手本の記事に従って、インストーラを公式サイトからダウンロードします。

https://nodejs.org/en/download/

Windows10(64bit)端末使っているなら以下。

ダウンロードしたmsiファイルを実行して、インストールを進めます。

4 ローカルにプロジェクトファイルを作成する。

Windowsであれば、コマンドプロンプトを起動します。

以下を実行してcesium用のディレクトリcesium-projectを作成し、その中にpackage.jsonを作ります。これはプロジェクトのメタデータで、今後インストールするモジュールの名前とバージョン情報なども管理できるようになります。

mkdir cesium-project
cd cesium-project
npm init -y

具体的にはこんな感じです。

※赤いところはWindowsにログインしているアカウント名

cesium-projectフォルダが作成されその中にはpackage.jsonファイルが作られています。

このpackage.jsonファイルをメモ帳で開いてみたところ。※開く必要はないです

5 cesiumパッケージをインストールする。

npmを使って、さきほどのcesium-projectフォルダにcesiumパッケージをインストール(ダウンロード)します。
コマンドプロンプトが起動されていて、さきほど作成したcesium-projectフォルダに入っている状態が前提です。

npm install cesium --save

具体的にはこんな感じです。

cesium-projectフォルダの中に、node_modulesフォルダとpackage-lock.jsonファイルが作られています。

package.jsonファイルをメモ帳で開いてみると、dependenciesにcesiumの行が追加されています。

プロキシ経由でインターネットへ出る環境下であれば、別途作業が必要です!
こんなエラー(E407)が出た時は、お手本の記事を参考に、npmへプロキシ設定を行いましょう。

http://proxy.sample.com」は、仮のURLです。ご利用環境のプロキシサーバのものに変えて設定してください。

npm -g config set proxy http://proxy.sample.com:8080
npm -g config set https-proxy http://proxy.sample.com:8080
npm -g config set registry http://registry.npmjs.org/

ちゃんと設定できているかどうか確認する。

npm -g config list

具体的にはこんな感じです。

もし、プロキシ認証が必要な状態で、上記のURLの設定がうまくいかない場合は、ご自分のプロキシ認証用ユーザ名・パスワードとプロキシサーバのIPを確認の上、以下のように設定してみてください。

npm -g config set proxy http://ユーザ名:パスワード@プロキシサーバのIP:8080
npm -g config set https-proxy http://ユーザ名:パスワード@プロキシサーバのIP:8080
npm -g config set registry http://registry.npmjs.org/

6 hrmlとJSとCSSを作成する。

メモ帳などで、以下ソースをコピペして、それぞれ保存します。保存時の名称と拡張子は以下ソースの左上に記載しています。保存先は、さきほど作成したcesium-projectフォルダにしておきましょう。

index.html
<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>cesium</title>
    <meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,minimum-scale=1,user-scalable=no">
    <link rel="stylesheet" href="node_modules/cesium/Build/Cesium/Widgets/widgets.css">
    <link rel="stylesheet" href="stylesheet.css">
  </head>
  <body>
    <div id="cesium" class="cesium"></div>
    <script src="node_modules/cesium/Build/Cesium/Cesium.js"></script>
    <script src="main.js"></script>
  </body>
</html>

ここで、1.で取得したcesiumのアクセストークンで、以下「hogehogetoken」箇所を書き換えてください。

main.js
(function() {
  "use strict";

  Cesium.Ion.defaultAccessToken = 'hogehogetoken';
  var viewer = new Cesium.Viewer("cesium");

    //初期の視点(カメラ)の位置 日本の上空にカメラが来るように設定。
  viewer.camera.setView({
   destination: Cesium.Cartesian3.fromDegrees(138, 29, 20000000),
   orientation: {
     heading: 0, // 水平方向の回転度(ラジアン)
     pitch: -1.4, // 垂直方向の回転度(ラジアン) 上を見上げたり下を見下ろしたり
     roll: 0
  }
});

}());
stylesheet.css
html {
  height: 100%;
}

body {
  margin: 0;
}

.cesium {
  height: 100%;
}

こんな状態になります。

7 ローカル実行時のエラーを回避する。

この状態で、cesium-projectフォルダのindex.htmlを適当なブラウザで表示しても、エラーとなります。

An error occurred while rendering. Rendering has stopped.

SecurityError: Failed to execute 'texImage2D' on 'WebGLRenderingContext': The image element contains cross-origin data, and may not be loaded.

See more...

ここで、お手本の記事に従い、chromeのショートカットをいじります。

まずは、chromeのショートカットを用意します。(なければ作ってください。)

右クリック>プロパティ で、リンク先を編集できる状態にします。

ここで、このリンク先を以下のように変更して適用します。

変更前

"C:\Program Files (x86)\Google\Chrome\Application\chrome.exe"

変更後
「ユーザ名」はご自分のものに書き換えてください。

"C:\Program Files (x86)\Google\Chrome\Application\chrome.exe" --disable-web-security --user-data-dir="C:\Users\ユーザ名\Local\Google\Chrome\User Data"

管理者権限で変更します。続行で。OKでプロパティ画面を閉じてください。

8 ローカルで動作確認する。

さきほどプロパティでリンク先を編集したchromeのショートカットを使って、chromeブラウザを起動します。

ちょっと注意されますが、無視します。

このブラウザにて、cesium-projectフォルダのindex.htmlを表示します。


うまくいきました。

9 AWSのS3にアップする。

ローカルで動いたプロジェクトフォルダをごっそりAWSのS3へもっていくと、Web上でこの地球儀クルクルが他の方に共有できます。
※S3は静的Webページを試験的に置く際、便利です。

コンソール画面でS3の新規バケットを作成します。バケット名はなんでもいいです。ここでは一旦「cesium-project」としています。

作成したバケットへ、cesium-projectフォルダをまるごとアップロードします。ファイル数が2,500以上あるので、環境にもよりますが、少し時間がかかります。

アップロード確認画面です。アクセス許可設定は、公開する範囲にあわせて設定してください。


アップロードが終わりましたらこんな感じになっています。
package.jsonとかpackage-lock.jsonはいらないかも?

S3バケットの中のindex.htmlのURLへアクセスしてみます。


うまくいきました。
おしまい。

Discussion

ログインするとコメントできます