2017-06-08

「彼女とデイトなう」につかえるスクリプトを書きました。 😆

つくったもの JavaScript

はじめに

こちらのツイートがとても話題になってますね。

そんなこんなで、ブームにのって、「彼女とデイトなう」を実装してみたいと思います。

仕様

まあ、ネーミング先行で中身をなにも考えてなかったので考えます。
Date.now();を実行すると、

コンソールにこの写真が表示されるという仕様で良いでしょう。＾＾
でも一応、1970年1月1日からの経過時間もリターンするようにしておきましょう。＾＾
Date.now();なんで。＾＾

developer.mozilla.org

実装

JavaScript

(function() {
  var now = window.Date.now;

  window.Date.now = function() {
    console.log(now());
    console.log("\n\n\n\n");
    console.log("%c ", "padding: 100px; background:url(https://pbs.twimg.com/media/DBl9HtdVoAAzt1A.jpg:small) center center no-repeat; background-size:contain");
    console.log("\n\n\n\n\n\nhttps://twitter.com/H_KANNA_0203/status/871865582408220672");

    return now();
  };
})();

コンソールに画像を表示される方法を色々考えたんですが、
コンソールにはスタイルを当てることができるので背景画像として指定することにしましょう。

空文字を出力
paddingで領域を大きくする
背景画像を当てる
背景画像のサイズを長編合わせのアスペクト非維持にする

という方針でいくことにしました。
また、橋本環奈を大きく表示するためにpaddingを大きく取った結果、複数行にまたがってしまったため、
適当に改行コードを出力しています。

こちらの関数で、window.Date.nowを上書きすればOKです。

DEMO

早速コンソール上で Date.now(); を実行してみましょう。

f:id:kimizuka:20170608090347g:plain

てってれー。これで彼女とデイトなうにつかえますね。＾＾

橋本環奈とDate . now ();

に使っていいよ😆 pic.twitter.com/pXbkqdS6vt
— 君塚史高 (@ki_230) 2017年6月7日

ちなみにいま、PC版のChromeでこのブログを観覧している方は、コンソール上で Date.now(); を実行してもらえれば、もれなく橋本環奈の画像が出力されるはずです。＾＾

2017-06-07

iOS11向けにウェブARコンテンツをつくってみました。（マーカーレスの超簡易版） 🏃

つくったもの iOS JavaScript CSS

追記：（2017/06/09 00:16）
本記事内に掲載している動画キャプチャが、
Apple.Incの開発者利用規約（APPLE BETA SOFTWARE PROGRAM AGREEMENT APPLE INC.）に抵触しているというご指摘をいただきました。
掲載内容を不適切と判断し、該当箇所を削除させていただきます。Apple.Inc及び読者の皆様に深くお詫び申し上げます。

追記：（2017/07/14 16:32）
その後Apple.Incより、自分つくったアプリケーションのスクリーンショットの公開はOKという見解をいただきましたので、
スクリーンショットを再度掲載しました。

1. ざっくりGIFアニメでまとめると

f:id:kimizuka:20170607090412g:plain

こんな感じです。

2. はじめに

昨日、iOS11のMobile SafariがgetUserMediaでカメラにアクセスできることに気づき、しゃかりき急いでこの記事とサンプルコードを書き上げました。

techblog.kayac.com

記事の最後は、

Canvasに取り込みさえすればこっちのものなので、簡単なARアプリぐらいはつくれるかもしれません。

※ http://techblog.kayac.com/webcamera-preview-for-ios11 より引用

という感じで締めくくったのですが。
締めくくった途端に思いつきました。というか思い出しました。

サプライズ・ウィンドウ

8年前に頑張ってつくった、車窓用簡易ARコンテンツ、「サプライズ・ウィンドウ」の存在を。
ガラケーを使っているところに時代を感じますね。＾＾

3. サプライズ・ウィンドウとは

こどもの頃、車窓を眺めながら思い描いていたイメージを再現する、懐かしARコンテンツです。
f:id:kimizuka:20170606224901g:plain

詳しくはこちらのサイトなんかをご覧頂けると幸いです。
www.sensors.jp

4. 原理

ガラケーの画面を45度に張ったプラバンに反射させることによって、
画面の黒い部分が透過し、車窓とコンテンツを同時に鑑賞できるという画期的なシステムです。
子供の頃にハマったゲームである「技脳体」からヒントを得て制作しました。
（のちにペッパーズ・ゴーストという手法ということを知りました）

f:id:kimizuka:20170606194927p:plain

ちょっと形は違うんですが、この動画を観て頂ければ仕組みがわかると思います。

サプライズ・ウィンドウ

さてさて、こちらのコンテンツの最大の特徴なんですが、

コンテンツが景色に対してまったくインタラクティブでないことがあげられます。

つまり、景色を画像解析してキャラクターにぶつかるとかそういった類の処理を一切入れてないんですね。
（ガラケーだったんで、電波強度でキャラクターの活発さが変わるようにはなっています。完全に余談ですが。）

流れる景色に対して、ユーザーが手動で位置を合わせ、ボタンを押してジャンプさせる。
ただそれだけの単純なARコンテンツ、もはやARコンテンツと呼べるのかどうかも微妙なコンテンツなのですが、
流れる風景と一緒に鑑賞すると、なんとも言えないいい雰囲気を醸し出すんですよね。
逆にこのコンテンツならさくっと移植できそうです。

5. 今回つくったもの

そこで、今回はこのゆるいARコンテンツをiOS11向けウェブコンテンツとして蘇らせてみようと思いました。
キャラクターが走る（クリックすると飛ぶ）コンテンツはCSSで開発済みなので、これを流用すればちょちょいのほいでつくれるはずです。

See the Pen DOT RUNNING by kimmy (@kimmy) on CodePen.

videoタグにカメラの映像をリアルタイムプレビューするところは昨日すでに完成しているわけですから、

f:id:kimizuka:20170606225244p:plain

こんな感じでvideoタグの上にCSSでつくったコンテンツを重ねるだけでOKです。
なぜならマーカー認識とか画像解析とかしていないお手軽ARコンテンツだからですね。

6. 完成したもの

プロトタイプ名は、車 + キャンバスでカーンバスと名付けました。
iOS11であれば、これぐらいのオーバーレイコンテンツ（もはやARと呼ぶのもおこがましくなってきた）だったら余裕で作れそうですね。
あと、ランドスケープモードだとフルスクリーンになるのが良いですね。（最後にちょっとUIが見切れてますが）
iOS11のリリースが楽しみです！

7. これからやりたいこと

リリースまでにはオーバーレイコンテンツ以外もつくれるようになってたいですね。
まずはCanvasにキャプチャした画像を検出してマーカーを認識するところを頑張ろうと思います。

おまけ

「やばい！日が沈む」と思って焦って撮影したらiPhoneを落とした失敗バージョンです。

追記

スクリーンショットなしではまったく伝わらないかと思いますが、イメージ的にはこのような体験がiPhone単独でできるようになるかもしれないということです。

車の窓のそと from そうぞうの遊び on Vimeo.

2017-06-06

ターミナルで画像をbase64にするぞ 😀

Mac

SublimeText2から3に乗り換えて、唯一の不満が画像をbase64に変換するところ。

2では、画像をエディタにドラッグ＆ドロップするだけでbase64化してくれるプラグインがあったのですが、

kimizuka.hatenablog.com

3では見当たらず。探し方が悪いだけかもしれませんが。

しょうが無いので最近はターミナルをつかって画像をbase64化しています。

base64 hogehoge.png

と打つだけなので、まあ、コマンド自体はとても短いんですが、若干面倒です。

みかづきブログその3

本ブログは更新を終了しました。通算140万ユーザーの方に観覧頂くことができました。長い間、ありがとうございました。