「技術」カテゴリーアーカイブ

1ツイートに収まるブータブルなゲーム

Square社のセキュリティエンジニア、アロク・メングラハニさん(Alok Menghrajani, @alokmenghrajani)が公開したツイートは、ツイッターの一回のつぶやきに収まる280文字で、ブート可能なゲームを動かすというものです。

ゲームの内容は、長くなっていく線の方向を上下左右キーで操作して、画面の端や自分自身にぶつからないようにするというもの。Snake や Tron 系のレトロゲームですね。

このツイートをコマンドとして実行し、できた .iso ファイルを、VirtualBox にマウントして実行してみました。

メングラハニさんのブログでは、このイメージをCDに焼いて、実機で動かしている様子も公開されています。

via The Verge

プログラムはロックだ。あるいはロックがプログラムだ。プログラミング言語Rockstar

rockstar-js は、Rockstar言語の JavaScript によるトランスパイラ実装です。

Rockstarプログラミング言語とは何か? 言語仕様書にあるように、「1980年代ハードロック・パワーバラードの歌詞に大きく影響を受けた、歌詞として通用するプログラムが書けるようにデザインされた新言語」です。

FizzBuzz の実装は、サンプルコードからたとえばこんな感じになるということで、


Modulus takes Number and Divisor
While Number is as high as Divisor
Put Number minus Divisor into Number
(blank line ending While block)
Give back Number
(blank line ending function declaration)
Limit is 100
Counter is 0
Fizz is 3
Buzz is 5
Until Counter is Limit
Build Counter up

これだと、英語の文章風といってもまだ「あ、プログラミング言語だな。FizzBuzz 書いてるんだな」となりますが、言語仕様を活用してロック風に書いた例では、こんな風になってきます。


Midnight takes your heart and your soul
While your heart is as high as your soul
Put your heart without your soul into your heart

Give back your heart

Desire is a lovestruck ladykiller
My world is nothing
Fire is ice
Hate is water
Until my world is Desire
Build my world up
If Midnight taking my world, Fire is nothing and Midnight taking my world, Hate is nothing
Shout "FizzBuzz!"
Take it to the top


歌詞だと思って訳してみました。

真夜中がお前の心と魂を奪う
お前の心が魂と同じ高みにある時
魂のない心をお前の心に注げ

心を取り戻せ

欲望は恋に落ちた色男
俺の世界には何もない
炎は氷
憎しみは水
俺の世界が欲望ならば
その世界を築きあげろ
真夜中が俺の世界を奪うなら、炎なんてなんでもない
真夜中が俺の世界を奪うなら、憎しみなんてなんでもない
“FizzBuzz!”と叫べ
それを頂へと高めよ

任意の小文字の単語に冠詞や”my”, “your”をつけると変数になるとか、代名詞は直近に定義された変数を参照するというルールに、true/false でなく right/wrong, +/- の演算のエイリアスとして”Build up”/”Knock down”が使えるとか、加減乗を”with”/”without”/”of” でも表せるとか、ドラマティックな歌詞を書けるようにする仕様が用意されています。

たくさん数値が出てくるとロックっぽくないので、数値も任意の単語の語の長さなどで表現できるようになっています。

これで、”boolean heart = true;”みたいな文を、”My heart is true”と書けたり、”int i = 16;”が”Sweet Lucy was a dancer”(a=1, dancer=6 文字で16)と書けたりするわけですね。制御構文も用意されていてループも書けるので、慣れてくれば前述の2つ目のような、実にロックっぽい動くプログラムが書けてしまう、ということ。実際手元で変換したコードが、ちゃんとFizzBuzz として動きました。

rockstar-js は、JavaScript製パーザ・ジェネレータPEG.jsで作られています。言語仕様のメモには「ミートローフの歌詞に意味があるように見えるようなプログラミング言語があったら面白いだろう?」とも有ったので、Meatloaf の曲の歌詞を食わせてみたのですが、I’d の “‘” でパーズエラーになるなど、実際には言語仕様を良く読み込んでかなりの腕前が無いと、ロックの歌詞として読めつつもちゃんと動くプログラムを書くのは難しそうです。

言語仕様の方のリポジトリには、Python インタプリタのプルリクエストも投げられており、Rockstar言語がより多くの環境で使えるようになるかもしれませんね。

求人票に出てくる Rockstar

英語圏のIT業界の求人募集では、「突出した才能を持った人」という意味で、”Wizard”(魔法使い)、”Guru”(導師)らと並んで、”Rockstar”求む、などと書いてることがあります。まあ、使い古されてちょっと飽き飽きされている表現なのかもしれません。実際、向こうの求人サイトを検索してみると、Rockstarたくさん出てきます。何千件も

dylanbeattieさんがRockstarの言語仕様を作って公開した主な動機の一つは、

もし Rockstar を実在する(無意味な)プログラミング言語にできたら、リクルーターや人事マネージャーは二度と「ロックスター・プログラマー求む」って書けないだろう?

だそうです。そんな突出した人材を欲している企業に、この Rockstar 言語を覚えただけの人が求職してきても困るでしょうね。

via Hacker News

人が見ていると恥ずかしがってちゃんと動かないソート関数

Lynnさん(@chordbug)がツイッターで公開したデモがこちら。

https://twitter.com/chordbug/status/1005701513719754752

「見てる時だけちゃんと動くソート関数を書いてみた」

JavaScript で書かれた sort() という関数に配列を与えて呼び出しています。

カメラに正面から顔が映っている状態では正しくソートされた結果が返ってくるのに対して、横を向いたリ顔を隠したりした状態で呼んだ時には、結果は毎回異なる適当な順番になっています。

もう一つの動画もあって、こちらは逆に「見ていると緊張して正しくソートできない」関数のデモ

https://twitter.com/chordbug/status/1005703638323429377

リプライでの質問に対して、Lynnさんはこのウェブページのソースコードを公開してくれています。

tracking.jsという人の顔を認識するライブラリのサンプルをベースに、顔が認識されている時のフラグを用意して、フラグがオンの時だけ正しくソートし、そうでない時はランダムに並べていることがわかります。

ブラウザのカメラ入力を許可し、JavaScriptコンソールで同じように sort() を呼び出すと、手元でも動かすことができました。

手近にあった顔の映った写真を使いました。仕組み上は視線の向きは関係ないので…

ブラウザ上のカメラ入力からの顔認識、こんなに手軽に使えるようになっているんですね。今回の「顔が映ってたら画面を見てることにする」というアイデアだけでなく、これまで無かったページ上のギミックが考えられそうです。

CSSスクロールで(マリオ風)横スクロール、(マリオカート風)キャラクター操作

CSSだけで(JavaScript無しで)動くページを作る、というお題でこんなもの

“A”キーと”D”キーで車が左右に動いています。

こちらが作者のステファン・クックさん(Stephen Cook)による解説ページで、13行のhtml以外はすべてCSS、画像ファイルも使っていないということです。

CSS内に定義したデータから絵を描くのは、グラデーションとbox-shadow を使っています。1ピクセルごとに色を指定しているんですね。

キー入力の方はというと、こちらのCSSだけで検索エンジンを作るという記事(デモはこちら)にあるように、inputフィールドの value 属性に反応させればと思ったそうですが、ユーザーの入力に応じて value の値がアップデートされるということは無く、こちらの検索デモでは1行のJavaScriptを使っていることがわかりました。

クックさんは数週間前に間違ってブラウザのJavaScriptをオフにしてしまい、未だに戻す方法を見つけられていないということで、JavaScript を使わない方法を探さざるを得なかったよう。たいへんですね。

疑似セレクタ :valid, :invalid で、フォームフィールド内のタイプ内容がaを含むかどうかを場合分けし、さらにフォームフィールドにプレースホルダーを表示してるかどうかの :placeholder-shown と併せて、キー入力に応じて3値を見分けることにしたそうです。

レースゲームとして背景が動くところは、アルシデス・ケイロスさん(Alcides Queiroz)が公開していたマリオ風横スクロールにヒントを得たということです。

See the Pen Mario made only with CSS gradients – no JS, no embedded images/data URIs, no external images and using a micro HTML =) by Alcides Queiroz (@alcidesqueiroz) on CodePen.

こちらの解説では、CSSグラデーションで各ピクセルを時間に応じて変化させるというのを全ピクセルに対して行うことで、CSSだけでの横スクロール表示を実現しているようです。ソースコードを見ると、Stylus で描画するスプライトのデータをひたすら大量のCSSコードに展開しているのがわかります。生成後のCSSを見るとすごいことになってます。

via TheNextWeb

ゼロ幅文字にエンコードした隠し情報で、文書をリークしたメンバーを特定

とある会員制掲示板からの文書の流出に困った運営者が、ユニコードの見えない文字「ゼロ幅文字(Zero-Width characters)」を使って流出させたユーザーを特定した、という話が出ていました。

数年前の話、Tom さんが所属していた競技ビデオゲームのチームでは、ログインが必要なプライベートの掲示板を使って連絡していました。その掲示板に書かれた秘密情報や戦術に関する重大アナウンスなどがしばしば掲示板外のウェブにコピペされ、チームにとって大きな問題となっていたそうです。

外部ユーザーの攻撃で中身が漏れたというよりは、メンバーの誰かがコピーしているのでは、と考えた Tom さんは、当時気になっていたユニコードのゼロ幅文字を使ったトリックを仕掛けたそうです。

ユーザーを特定する情報を、見えない文字に変換して埋め込む

ログイン中のログインユーザーのユーザーIDを、一定のルールによってゼロ幅文字の並びに変換します。そして、この文字列が、掲示板のコメントを表示する際に文章の間に埋め込まれるようにします。

コピー&ペーストされた外部の掲示板等を見ると、目には見えませんがそちらにもこのゼロ幅文字を組み合わせた文字列が含まれているので、そこから逆への変換を適用することで、コピーをしたユーザーのIDがわかる、というわけです。

GitHub 上で公開されたデモコードがこちら。動くデモがこちらです。

1 で入れたユーザー名が入っていないように見える2 のテキストをコピーすると、コピー先の 3 から、元のユーザー名が取り出せていますね。

データ列をASCII文字64個でエンコードすれば Base64 ですが、このデモでは 4種類のゼロ幅文字を使った ZeroWidth4 とでもいうべきエンコーディングですね。

元ブログ記事では、この手法を掲示板に組み込んで新しい情報を流したところ、数時間でコピーされた文章からユーザー名を回復し、流出者を特定できた、と語っています。

この場合はうまくいきましたが、この仕掛けを知った上で無実の他人のユーザーIDに書き換える、といった反撃も考えられるので、ユーザー名をそのまま組み込むとかではなく、改竄があればわかるような形にするのがより良いだろう、とも述べられていました。

自衛ツールの登場など

この記事が広く読まれたので、Chrome拡張が早速登場。ゼロ幅文字を絵文字に変換して表示する拡張で、こういうのを入れておくと何かが埋め込まれているな、というのを見つけられますね。急いで作られたせいか、ユーザーが能動的にクリックしないと絵文字表示されないなど、実用するには今一つですが。

それと、英語のテキストでやってる分には問題ないですが、そもそも役割があって文章中にゼロ幅文字が含まれている言語もあるので、一律に除去したり警告したりするようなツールでは不十分だと言えそうですね。

情報を守る立場からすれば、このような追跡手法をいくつも持って仕掛けておくことは有用でしょう。

逆に、内部告発など悪事を暴く活動として秘密情報をコピーする立場から見れば、このような仕掛けがないかを確認したり、同定されないよう過剰と思われる情報を切り落とすツール等を使うなど、ある程度のリテラシーが必要となってきそうですね。

via reddit

関連

忍者猫(Ninja Cat)絵文字がWindows 10に登場 – 合字用Zero Width文字

Unicodeの空白文字を使ってクリックトラッキング – URLに同様の文字を入れ込む

市販のプリンターは印刷時に追跡用の隠しコードを描き込んでいるものがある

[追記 2018-04-11] 隠し情報をゼロ幅文字エンコードする仕組み – Qiita – Ruby で試してみた方

AWSの日本サーバのIPアドレスのリストを得る

ツールのインストールなしで。

EC2サーバーなどのIPアドレスの範囲については、AWS公式がJSON形式で最新の情報を公開しています。

AWSのサーバ「からのアクセスを禁止したい」とか「からだけアクセスを許可したい」という時は、ここから対象となるサーバのリストを抽出することになります。

公式ドキュメントでは jq を使ってフィルタするといいよ、と言っています

jq をオンラインで実行できるサービス jq playがあるので、これをブラウザで開き、JSON のところに先ほどの公式のJSON の中身を貼りつけます。

フィルタとして、たとえば、「東京と大阪リージョンのEC2のアドレスを絞りこむ」だと、以下を入れます。

.prefixes[] | select(.region=="ap-northeast-1" or .region=="ap-northeast-3") | select(.service=="EC2") | .ip_prefix

ダブルクオートが不要であれば、Raw Output にチェックを入れましょう。

[訂正] はてブでご指摘いただきました。大阪は ap-northeast-3 ですね。ごめんなさい

jq play の結果は、permalink 化して共有できます。右上の”Share snippet” から。

今日の時点でのIPアドレスの範囲は、こんな風にでました。

# 今回は、公開されているデータを絞り込んだだけなので問題ないと思います。社外に漏れたら困るようなJSONを、こういったサイトに突っ込むのはやめましょう。念のため