omuriceman's blog

iOS / AWS / Firebase / JavaScript / Deep Learning を中心とした技術を面白く紹介します!

宇宙空間をブラウザ上で視覚化できるJavaScript製OSS / 「Spacekit」で宇宙を創造する

f:id:omuriceman:20190917011940p:plain

宇宙にいきたいと思ったことは無いだろうか。私は行きたいとは思わない。しかし手軽に宇宙目線の人間を超越した存在になれるとしたら面白そうではないだろうか?そんなことを可能にするのが「Spacekit」というJavaScriptライブラリである。

github.com

概要

タイトルにほとんど書いている通りだが、地球や月・太陽系などの宇宙空間をインタラクティブに作成できるJavaScriptライブラリである。いくつかのサービスの描画エンジンとして使用されているようだ。

  • 古代の地球を見るサービス

dinosaurpictures.org

www.asterank.com

  • 流星群可視化サービス

www.meteorshowers.org

インストール方法

今の所、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!」かもしれない。。

f:id:omuriceman:20190916204605p:plain
漆黒の闇、太陽の周りを地球がぐるぐると回っている

余談ではあるが、DOCTYPE宣言時のhtmlとbodyはheightが0になってしまうので100%を指定すると画面全体に宇宙が描画される。うまく画面が表示されない時は確認してほしい。

他の惑星を追加する

他の惑星の追加の仕方は、上記のコードをみれば創造できると思うがcreateObjectメソッドにて追加ができる。

viz.createObject('mercury', Spacekit.SpaceObjectPresets.MERCURY);

オリジナルの惑星を作成する

オリジナルの惑星は静止状態のものと、他の惑星と同じように太陽を周回するオブジェクトを作成できる。

  • 静止オブジェクトの作成
const obj = viz.createObject('myobj', {
    position: [1, 1, 1],
});
  • 周回オブジェクトの作成

このサンプルは人工惑星になったテスラロードスターが軌道を周回する情報になっているらしい。

electrek.co

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クラスに渡すプロパティについては下記を参考にパラメーターを調整する。

Ephem | spacekit.js

太陽・水金地火木土天海冥・テスラのロードスターを視覚化してみたのがこちら。

f:id:omuriceman:20190917000859p:plain

天王星/海王星/冥王星を画面に映そうとすると地球が小さく見える。

背景のデザインを宇宙にする

今のままだと惑星の背景が黒いままなので宇宙感のある背景を追加する。背景を宇宙の写真にするには簡単に2つの関数が用意されている。

  • createSkybox
  • createStars

createSkyboxはライブラリが用意している画像を読み込んで表示される。createStarsは画像ではなく星のデータを読み込んで、実際に画面上に反映させる方法である。そのためcreateStarsの方が処理速度が早いが、繊細な部分は表現しきれない。

個人的には両方ともセットすると綺麗な宇宙ができるのでオススメしたい。

viz.createStars();
viz.createSkybox(Spacekit.SkyboxPresets.NASA_TYCHO);

できあがった宇宙がこちら

f:id:omuriceman:20190917010714g:plain

createSkyboxに渡す引数のデータを変更すると違う背景になってこちらもとても美しいので紹介したい。

viz.createStars();
viz.createSkybox(Spacekit.SkyboxPresets.ESO_GIGAGALAXY);

f:id:omuriceman:20190917013132g:plain

まとめ

今回紹介したSpacekitは紹介した機能以外にも色々な機能があり、今回は省いたのだが興味のある方は是非公式のドキュメントやGitHubソースコードを追ってみてほしい。

個人的には宇宙関連のサイト構築が会った時に使える日が来たらいいなと思って待つことにする。

また宇宙旅行に行ってみたいけど怖い・お金が無い。みたいな人は是非こちらで宇宙を体感してほしい。

参考サイト

  • ドキュメント

typpo.github.io

  • 惑星の軌道要素について

ja.wikipedia.org

漫画から技術を学ぼう!技術書典7で頒布予定のマンガ技術書まとめました

技術書同人誌を販売する日本最大のイベント「技術書典7」が2019/09/22(日)に開催します。今回も楽しそうな技術書が盛りだくさんですね!

7回目の開催となる技術書典ですが、技術書典6の直前に書いた「技術書典6で販売されるマンガ技術書まとめ」記事がいろんな方に読んでいただけましたので今回もご紹介したいなと思っております!

協04 | paiza

paiza開発エンジニアによるTechbookと、ITエンジニアを目指す女子高生たちの学園ライフ4コマ漫画本を無料配布します!

オンライン学習サイトで有名なPaizaさんが4コマ漫画本を無料配布されるようですね!無料配布なので早めに手に入れないと無くなっちゃうかもしれませんね!

techbookfest.org

う38C | パルヒコさん

Webディレクターマンガ

前回のブログでもご紹介しました。技術書典6では見に行くことができなかったので、今回はリベンジしたいと思います!

techbookfest.org

お01C | おとうふ工房

  • まんがではじめるGo

私は前回の技術書典6で「まんがではじめるKubernetes」購入しましたが、中々の混み具合でしたね!今回の「まんがではじめるGo」も難しい技術を漫画でわかりやすく解説している感じで非常にいいテーマですね!早く買いに行かなければ!

techbookfest.org

お43C | 湊川あいの、わかば家。

  • マンガでわかるRuby② 〜オブジェクト指向編〜
  • 【無料頒布】マンガでわかるBtoBアプリエンジニア
  • マンガでわかる痩せる技術【2ヶ月半で−8kg】実録!原始人ダイエットやってみた
  • マンガでわかるRuby 番外編 gem・CSS組版 制作秘話

「マンガでわかる〇〇」で有名な湊川あいさんのサークルです。技術書典初頒布の本がこれだけあるようですね!

個人的に「マンガでわかるRuby② 〜オブジェクト指向編〜」は、何年エンジニアやってても一向に理解が進まない「オブジェクト指向」の手がかりとして購入したいと思います!

既刊の「マンガでわかるDocker①〜③」も購入しましたが、なんちゃってDocker使いには新しい学びがたくさんあってよかった!

techbookfest.org

か03C | みさきとミギー

「マンガでわかるRuby」シリーズと「猫と森羅と日本語とRuby」シリーズを頒布する予定です。

とのことです。マンガでわかるRubyシリーズはこちらのサークルでも購入できそうですね!

techbookfest.org

き07D | Rotelstift

主人公である男子中学生がPC部の入部試験としてFizzBuzz問題を解いていく物語です。

入稿〆切に向けてまだ作画を続けているようです。続報を期待したいですね!

techbookfest.org

き46D | GrabTF

  • VRoidとクリスタでマンガを作る本

という本を頒布されるようです。紹介しているリンクを見てみると、この本自体もVRoid(VRoid Studio)とクリスタ(CLIP STUDIO)というソフトを利用してマンガで描かれているページがあるようです。

techbookfest.org

し20D | ふりにち

  • マンガでわかる画像の基本
  • 残業を減らし定時で帰る仕事術〜定時退社はエンジニアのキャリア形成と両立できるのか〜

これらの本でマンガで描かれている箇所があるようですね!

「dpi」についてもマンガで分かりやすく解説します!

dpiはAndroidアプリ開発ででてきますが、ちゃんと理解していないので興味があります。

techbookfest.org

24D | ロボット修業中

  • ロボットマスターへの道

というシリーズの「電子回路についての解説本」のようです。部分的に4コマ漫画で描かれているようですね。

私的には電子回路の技術を学ぶ機会がなかった(独学ではなかなか学びづらいですよね?)のでとても興味深いテーマです

techbookfest.org

し26D | オサルのロボットラボ

  • ロボット作りたい息子とそのハハのはなし

ロボット作りたい息子オサルと、技術についてド素人のハハの、ドタバタの毎日。

という内容のエッセイ風マンガのようです。

techbookfest.org

せ01D | ほっぺ食堂

VTuber稼業の暴露話漫画を描いていきます

なんとも怖そうなテーマですが、私の周りにもVTuberを始めている人がいるので共有したいと思います!

techbookfest.org

せ18D | ゴロゴロカヤック

ちょっと変わった技術の活用法や、漫画コンテンツもあります。

面白法人で有名なカヤックさんが頒布される本に漫画コンテンツが掲載されるようです。詳細情報を期待したいですね!

techbookfest.org

お願い

現在時点で12のサークルで漫画技術書が頒布予定ということがわかりました。サークル数が前回より多いのに、漫画が少なくなっているのは少し気になる傾向ですね!

もしこの記事に掲載されていない、マンガで描かれている技術書を技術書典7で掲載されているサークルの方がいらっしゃいましたらぜひコメントやツイートいただけると大変嬉しいです!

まとめ

前回の技術書典6で何冊もマンガ技術書を購入したのですが、読みやすく・読み進めやすくという感じですぐに知識を吸収することができました。日本のマンガ文化は素晴らしいですね。

宣伝

私も技術書典7に出典いたします!サークル場所は「お23C」

techbookfest.org

私はAWS Amplify Predictionsを使ってお手軽にAI/MLを開発するというテーマで執筆しております!朝からしばらく立ってますのでお越しください!

実は今回、私も漫画を描きたかったのでiPadApple Pencilを購入したのです。

omuriceman.hatenablog.com

でも漫画で執筆できませんでした。。。本当に漫画をかける人尊敬します。

ブラウザのデバッグコンソールにshields.io風のログを簡単に出力できるOSS「console-badge」

f:id:omuriceman:20190824161435p:plain

この記事は2分程度で読めます

ブラウザのコンソールは色をつけたりフォントを大きくするなどのカスタマイズができることは有名ですが、実際自分で作るとなるとかなり面倒です。

mozillaの恐竜」とか「SUUMOのスーモくん」などコンソールに面白く表示してるのを見かけて「時間があったらやりたいですよ…」と思っているのは私だけではないはずです。

先日console-badgeというOSSを見つけました。簡単にshields.ioのバッジのようなログを出力できるようなので調査をしてみることにしました。

github.com

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が表示されます。

f:id:omuriceman:20190825133338p:plain

ブログでも利用する

私のような人間はブログにも秘密のメッセージをいれたくなります。早速はてなブログで試して見ましょう。

f:id:omuriceman:20190825133022p:plain

<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がテキストと認識されて表示できないかもしれないので、プレビューを見ながらチャレンジしてみてください。

もしかして…この記事にも秘密のメッセージがはいっているのか?!