Space Doitsu no Toriについて

f:id:oboenikui:20161208232455p:plain
この記事はドイツのトリAdvent Calendar 2016 20日目の記事です.
私の誕生日にACを入れる毎年の癖で今日にしていたのですが,よく考えたら明日21日に修論予備審の最終練習が控えてたので軽い記事ですすみません?


さて,ドイツのトリコンテンツの中でも著名なもの(私調べ)のひとつにSpace Doitsu no Toriというものがあるのですが,これの正しい遊び方について意外と知られていないようなので解説していきます.

Lv1. ドイツのトリを飛ばす

まずは入門編.
プカプカと浮かんでいるドイツのトリをマウスでドラッグ or 指でスワイプすると,ドイツのトリが飛びます.
または配置して楽しむのも良いかもしれないです.f:id:oboenikui:20161209000841p:plain
ちなみに今年の12月に入ってここの処理を高速化したので,特にスマホでは前よりもスムーズに動かせるようになりました.

Lv2. 気に入った瞬間を保存する

Space Doitsu no Toriを見ていると,収めておきたい瞬間というものが訪れると思います.

f:id:oboenikui:20161208222419p:plain
当然ぼくもお気に入りの瞬間はspace_doitsu_no_toriフォルダに保存してます.

そのような機会にわざわざスクショしてトリミングをするのは面倒なので,右クリックで保存するようにしましょう.
幸いにもこのページはHTML5 Canvasで作成されているので,ブラウザが対応していれば簡単に画像として保存することができます.
確認したところ,ChromeFirefoxではできるようでした.

Lv3. フルスクリーンで鑑賞する


という報告もあるように,このページには癒やし効果があるようです.
できればフルスクリーンで鑑賞したいところでしょう.
開発者ツールで以下のコードを実行し,適当なところをクリックすればフルスクリーンで鑑賞できます.(ラムダ式を解釈できないレガシーブラウザは滅びて)

(e=>["msRequestFullscreen","mozRequestFullScreen","webkitRequestFullscreen","requestFullscreen"].some(f=>e[f]&&(e.addEventListener("click",e[f]),true)))(document.getElementById("space"))

Lv4. ドイツのトリ以外のものも宇宙空間に浮遊させる

Space Doitsu no ToriのコードはGitHubに上がっています.
github.com
フォークして自分だけのSpace Hogehogeを作りましょう.

(例)

github.com
この例ではC#たんも浮きます.

終わりに

時間がなくてあまり新規性のない記事になってしまい申し訳なさを感じつつ他の多くの記事の軽さを見たら申し訳なさが吹き飛びました.
お詫びにしようと考えてた今のTwitterアイコンを毛筆ツールで描いたときのチートスクリプトをお詫びの気持ちがなくなったけど置いておきます.

(() => {
    let div= document.createElement("div")
    document.querySelector("#wrap > .container > .yb-l-main > .yb-area").appendChild(div)
    div.setAttribute("style", `position:absolute;width:100%;height: 493px;top: calc(660px * 0.02 - 270px + 50%);opacity:0.5;background-image:url("https://pbs.twimg.com/media/BiCFw-qIYAAdwBR.jpg:orig");background-size:2208px 1166px;pointer-events:none;background-position: calc(50% - 300px) calc(50% - 120px);;min-width: 1024px;`)
})()

f:id:oboenikui:20161219233225p:plain

明日の担当は@takaru_tgsさんです.