宇宙空間をブラウザ上で視覚化できるJavaScript製OSS / 「Spacekit」で宇宙を創造する
宇宙にいきたいと思ったことは無いだろうか。私は行きたいとは思わない。しかし手軽に宇宙目線の人間を超越した存在になれるとしたら面白そうではないだろうか?そんなことを可能にするのが「Spacekit」というJavaScriptライブラリである。
概要
タイトルにほとんど書いている通りだが、地球や月・太陽系などの宇宙空間をインタラクティブに作成できるJavaScriptライブラリである。いくつかのサービスの描画エンジンとして使用されているようだ。
- 古代の地球を見るサービス
- 小惑星のデータベース
- 流星群可視化サービス
インストール方法
今の所、npmなどでインストールできる方法はない。公開されているGitHubのファイルを読み込むか、生のファイルをダウンロードして設置するかのどちらかになる。
次の事例ではGitHubのファイルを読み込む方法で宇宙を創造する方法を紹介している。
Webサイトで宇宙を表現する
太陽と地球を創造する
まずは太陽と宇宙を創造しよう。そのための一番シンプルなコードがこんな感じになると思う。
<!DOCTYPE html> <html lang="ja"> <head> <style> html,body{ height: 100%; } #main-container { width:100%; height: 100%; } </style> </head> <body> <div id="main-container"></div> <script src="https://typpo.github.io/spacekit/build/spacekit.js"></script> <script src="./main.js"></script> </body> </html>
scriptファイルのmain.jsの中身はこのような状態になっている。
const viz = new Spacekit.Simulation(document.getElementById('main-container'), {}); viz.createObject('sun', Spacekit.SpaceObjectPresets.SUN); viz.createObject('earth', Spacekit.SpaceObjectPresets.EARTH);
完了してみたらhtmlファイルを開いてみよう。これが本当の「Hello, World!」かもしれない。。
余談ではあるが、DOCTYPE宣言時のhtmlとbodyはheightが0になってしまうので100%を指定すると画面全体に宇宙が描画される。うまく画面が表示されない時は確認してほしい。
他の惑星を追加する
他の惑星の追加の仕方は、上記のコードをみれば創造できると思うがcreateObjectメソッドにて追加ができる。
viz.createObject('mercury', Spacekit.SpaceObjectPresets.MERCURY);
オリジナルの惑星を作成する
オリジナルの惑星は静止状態のものと、他の惑星と同じように太陽を周回するオブジェクトを作成できる。
- 静止オブジェクトの作成
const obj = viz.createObject('myobj', { position: [1, 1, 1], });
- 周回オブジェクトの作成
このサンプルは人工惑星になったテスラロードスターが軌道を周回する情報になっているらしい。
const roadster = viz.createObject('spaceman', { labelText: 'Tesla Roadster', ephem: new Spacekit.Ephem({ // These parameters define orbit shape. a: 1.324870564730606E+00, e: 2.557785995665682E-01, i: 1.077550722804860E+00, // These parameters define the orientation of the orbit. om: 3.170946964325638E+02, w: 1.774865822248395E+02, ma: 1.764302192487955E+02, // Where the object is in its orbit. epoch: 2458426.500000000, }, 'deg'), });
Ephemクラスに渡すプロパティについては下記を参考にパラメーターを調整する。
太陽・水金地火木土天海冥・テスラのロードスターを視覚化してみたのがこちら。
天王星/海王星/冥王星を画面に映そうとすると地球が小さく見える。
背景のデザインを宇宙にする
今のままだと惑星の背景が黒いままなので宇宙感のある背景を追加する。背景を宇宙の写真にするには簡単に2つの関数が用意されている。
- createSkybox
- createStars
createSkyboxはライブラリが用意している画像を読み込んで表示される。createStarsは画像ではなく星のデータを読み込んで、実際に画面上に反映させる方法である。そのためcreateStarsの方が処理速度が早いが、繊細な部分は表現しきれない。
個人的には両方ともセットすると綺麗な宇宙ができるのでオススメしたい。
viz.createStars(); viz.createSkybox(Spacekit.SkyboxPresets.NASA_TYCHO);
できあがった宇宙がこちら
createSkyboxに渡す引数のデータを変更すると違う背景になってこちらもとても美しいので紹介したい。
viz.createStars(); viz.createSkybox(Spacekit.SkyboxPresets.ESO_GIGAGALAXY);
まとめ
今回紹介したSpacekitは紹介した機能以外にも色々な機能があり、今回は省いたのだが興味のある方は是非公式のドキュメントやGitHubのソースコードを追ってみてほしい。
個人的には宇宙関連のサイト構築が会った時に使える日が来たらいいなと思って待つことにする。
また宇宙旅行に行ってみたいけど怖い・お金が無い。みたいな人は是非こちらで宇宙を体感してほしい。
参考サイト
- ドキュメント
- 惑星の軌道要素について
漫画から技術を学ぼう!技術書典7で頒布予定のマンガ技術書まとめました
技術書同人誌を販売する日本最大のイベント「技術書典7」が2019/09/22(日)に開催します。今回も楽しそうな技術書が盛りだくさんですね!
7回目の開催となる技術書典ですが、技術書典6の直前に書いた「技術書典6で販売されるマンガ技術書まとめ」記事がいろんな方に読んでいただけましたので今回もご紹介したいなと思っております!
- 協04 | paiza
- う38C | パルヒコさん
- お01C | おとうふ工房
- お43C | 湊川あいの、わかば家。
- か03C | みさきとミギー
- き07D | Rotelstift
- き46D | GrabTF
- し20D | ふりにち
- し24D | ロボット修業中
- し26D | オサルのロボットラボ
- せ01D | ほっぺ食堂
- せ18D | ゴロゴロカヤック
- お願い
- まとめ
- 宣伝
協04 | paiza
paiza開発エンジニアによるTechbookと、ITエンジニアを目指す女子高生たちの学園ライフ4コマ漫画本を無料配布します!
オンライン学習サイトで有名なPaizaさんが4コマ漫画本を無料配布されるようですね!無料配布なので早めに手に入れないと無くなっちゃうかもしれませんね!
う38C | パルヒコさん
Webディレクターマンガ
前回のブログでもご紹介しました。技術書典6では見に行くことができなかったので、今回はリベンジしたいと思います!
お01C | おとうふ工房
- まんがではじめるGo
私は前回の技術書典6で「まんがではじめるKubernetes」購入しましたが、中々の混み具合でしたね!今回の「まんがではじめるGo」も難しい技術を漫画でわかりやすく解説している感じで非常にいいテーマですね!早く買いに行かなければ!
お43C | 湊川あいの、わかば家。
- マンガでわかるRuby② 〜オブジェクト指向編〜
- 【無料頒布】マンガでわかるBtoBアプリエンジニア
- マンガでわかる痩せる技術【2ヶ月半で−8kg】実録!原始人ダイエットやってみた
- マンガでわかるRuby 番外編 gem・CSS組版 制作秘話
「マンガでわかる〇〇」で有名な湊川あいさんのサークルです。技術書典初頒布の本がこれだけあるようですね!
個人的に「マンガでわかるRuby② 〜オブジェクト指向編〜」は、何年エンジニアやってても一向に理解が進まない「オブジェクト指向」の手がかりとして購入したいと思います!
既刊の「マンガでわかるDocker①〜③」も購入しましたが、なんちゃってDocker使いには新しい学びがたくさんあってよかった!
か03C | みさきとミギー
とのことです。マンガでわかるRubyシリーズはこちらのサークルでも購入できそうですね!
き07D | Rotelstift
主人公である男子中学生がPC部の入部試験としてFizzBuzz問題を解いていく物語です。
入稿〆切に向けてまだ作画を続けているようです。続報を期待したいですね!
き46D | GrabTF
- VRoidとクリスタでマンガを作る本
という本を頒布されるようです。紹介しているリンクを見てみると、この本自体もVRoid(VRoid Studio)とクリスタ(CLIP STUDIO)というソフトを利用してマンガで描かれているページがあるようです。
し20D | ふりにち
- マンガでわかる画像の基本
- 残業を減らし定時で帰る仕事術〜定時退社はエンジニアのキャリア形成と両立できるのか〜
これらの本でマンガで描かれている箇所があるようですね!
「dpi」についてもマンガで分かりやすく解説します!
dpiはAndroidアプリ開発ででてきますが、ちゃんと理解していないので興味があります。
し24D | ロボット修業中
- ロボットマスターへの道
というシリーズの「電子回路についての解説本」のようです。部分的に4コマ漫画で描かれているようですね。
私的には電子回路の技術を学ぶ機会がなかった(独学ではなかなか学びづらいですよね?)のでとても興味深いテーマです
し26D | オサルのロボットラボ
- ロボット作りたい息子とそのハハのはなし
ロボット作りたい息子オサルと、技術についてド素人のハハの、ドタバタの毎日。
という内容のエッセイ風マンガのようです。
せ01D | ほっぺ食堂
VTuber稼業の暴露話漫画を描いていきます
なんとも怖そうなテーマですが、私の周りにもVTuberを始めている人がいるので共有したいと思います!
せ18D | ゴロゴロカヤック
ちょっと変わった技術の活用法や、漫画コンテンツもあります。
面白法人で有名なカヤックさんが頒布される本に漫画コンテンツが掲載されるようです。詳細情報を期待したいですね!
お願い
現在時点で12のサークルで漫画技術書が頒布予定ということがわかりました。サークル数が前回より多いのに、漫画が少なくなっているのは少し気になる傾向ですね!
もしこの記事に掲載されていない、マンガで描かれている技術書を技術書典7で掲載されているサークルの方がいらっしゃいましたらぜひコメントやツイートいただけると大変嬉しいです!
まとめ
前回の技術書典6で何冊もマンガ技術書を購入したのですが、読みやすく・読み進めやすくという感じですぐに知識を吸収することができました。日本のマンガ文化は素晴らしいですね。
宣伝
私も技術書典7に出典いたします!サークル場所は「お23C」
私はAWS Amplify Predictionsを使ってお手軽にAI/MLを開発するというテーマで執筆しております!朝からしばらく立ってますのでお越しください!
実は今回、私も漫画を描きたかったのでiPadとApple Pencilを購入したのです。
でも漫画で執筆できませんでした。。。本当に漫画をかける人尊敬します。
ブラウザのデバッグコンソールにshields.io風のログを簡単に出力できるOSS「console-badge」
この記事は2分程度で読めます
ブラウザのコンソールは色をつけたり、フォントを大きくするなどのカスタマイズができることは有名ですが、実際自分で作るとなるとかなり面倒です。
「mozillaの恐竜」とか「SUUMOのスーモくん」などコンソールに面白く表示してるのを見かけて「時間があったらやりたいですよ…」と思っているのは私だけではないはずです。
先日console-badge
というOSSを見つけました。簡単にshields.ioのバッジのようなログを出力できるようなので調査をしてみることにしました。
shields.ioに似たデザインになるので表現には限界があるのですが、ちょっとした時に使えそうなのでご紹介します。
インストール方法
NPM / YARN
$ npm install console-badge
# OR
$ yarn add console-badge
CDN
プロトタイピング環境などでは下記を利用します。
<script src="https://cdn.jsdelivr.net/npm/console-badge"></script>
本番環境に関しては下記のjsを使用することが推奨されています。
<script src="https://cdn.jsdelivr.net/npm/console-badge@1/dist/console-badge.umd.min.js"></script>
使用方法
基本的な使い方をコメントをつけてご紹介します。
//log warn error infoに対応 consoleBadge.error({ //2種類の表示モードが選べる。デザインが少し違う mode: 'shields.io', //左側に表示するテキスト。絵文字やURLも可能 leftText: 'エラー', //左側に表示するテキストの色。URLの場合無効 leftTextColor: 'red', //左側に表示する背景色 leftBgColor: 'white', //右側に表示する内容 rightText: 'なんかエラーです', rightBgColor: 'red', rightTextColor: '#FFF' });
余談ですが上記のオプションに何もいれないと、Lorem Ipsumが表示されます。
ブログでも利用する
私のような人間はブログにも秘密のメッセージをいれたくなります。早速はてなブログで試して見ましょう。
<script src="https://cdn.jsdelivr.net/npm/console-badge@1/dist/console-badge.umd.min.js"></script> <script> consoleBadge.log({ mode: 'shields.io', leftText: '絶対見ないでね', rightText: 'https://twitter.com/iijima_wataru 🚀', rightBgColor: '#ffc107', }); </script>
テキストエリアに上記のようにscriptを入力すればOKです。ブログの入力モードによってはscriptがテキストと認識されて表示できないかもしれないので、プレビューを見ながらチャレンジしてみてください。
もしかして…この記事にも秘密のメッセージがはいっているのか?!