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

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を、こういったサイトに突っ込むのはやめましょう。念のため

目が見えなくてもレーシングゲームができるようにする研究

コロンビア大学博士課程のブライアン・A・スミスさんが開発しているRacing Audio Display(RAD)は、音の情報だけでビデオゲームを遊べるようにするためのユーザ・インタフェースです。

コースに対する車の角度によって変わる音と、次にどちら向きのどんなカーブが来るかという音声情報の2種類によって、コースをはみでたりせずにコーナーをうまく回ることができるということです。このシステムにょって、目が見えているプレイヤーとそれほど違わない速度を出せ、よく練習した人ならタイムを上回る場合もあるということ。

研究紹介の動画では、画面を横にして隠しても、まったく影響なくレースを続けることができています。

ヘッドフォンから聴こえている情報、をこの動画で体験できるわけではないのですが、実際にどう聴こえるのかも知りたいですね。

研究の今後では、レーシングゲーム部分にライバル車を登場させた上でゲームができるようにしたり、アドベンチャーゲーム、ロールプレイングゲーム、ファーストパーソンシューティングゲームなど他のジャンルにも同様の仕組みを組み込んだりすることだそうです。

via GamesBeat

書籍「エラーメッセージでググれ」「Stack Overflowからコピペ」

いつもの動物の写真の表紙なので、本当にオライリーが出してるのかと思いそうになりますが、ウェブに流れているパロディ表紙です。

“Googling the Error Message”(エラーメッセージをグーグル検索する)

出版社のところが “O RLY?”(Oh Really? 本当に?)となっています。

このツイートに対して、「こっちも忘れるなよ」と出されてるのがこちら

“Copying and Pasting from Stack Overflow”(スタック・オーバーフローからコピー&ペースト)

こちらの表紙は”O’Reilly”と書いてあってちょっとやりすぎ感がありますね。

エラーメッセージを検索するのはトラブルシューティングの基本中の基本だと思いますし、いろいろ調べてわからなかったら質問サイトで同じ問題に捕まっている人やそれへの回答を見つけるもの有用なのは間違いないので、パロディですが良いアドバイスですよね。

と思ったら、後者については表紙に触発されてタリク・アリさん(Tariq Ali, GitHub@tra38)が本文を書いちゃってます

そんなに長い電子書籍ではないですが、Stack Overflow などの質問サイトで回答されているコードを利用したい時のライセンスについて、著作権保護の対象外となる「コード片(snippets)」とCC-BY-SA 3.0で保護される「もっと大きなコード」について、この二つの間の境界は曖昧であることや、それぞれを製品等に組み込むとした時にどのようなライセンス上の問題が起こりうるか、安全側に倒したい際の手段(クリーンルーム手法)、などまでを解説しています。

Stack Overflow 上のコードが著作物とされるだけ長い場合でも、CC-BY-SA 3.0 から CC-BY-SA 4.0 への自動アップグレード経由で GPL 3.0 や Aertistic license として扱える、と書いてあり、そんなことになってたのか、と勉強になりました。

他にも、「オリジナルコードの作者への言及を消していい、あるいは消した方がいいのはどれぐらいコードを自分で書き変えた時か」とか「Stack Overflow に書いてあるコードをただ適当にコピーすることの危険性。複数の回答がある中で間違いや質の低いコードをいかに見分けるか」といった実践的なアドバイスがまとめられています。

dockerizeコマンドで他のDockerコンテナの立ち上げを待つ

「Docker で動くようにすること」(to dockerize)じゃない、ツールの方の dockerize (jwilder さん作)を使って、同じDocker network 内(setup_remote_docker したもの)に立ち上げ中のコンテナの準備ができるのを待たせる方法。

# 名前が紛らわしいのは検索性を低めてると思いますが

どうせならツールも自力でセットアップせずに docker hub にあるものを呼べばよいということで、

docker run jwilder/dockerize -wait http://sample.test/ -timeout 3m -wait-retry-interval 5s

上は、http://sample.test/ が応答を返すまで、最大3分間、5秒おきに問い合わせ。

CircleCI の中で待ちたかった(コンテナの立ち上げが終わってからテストを流す)ので、ターゲットのコンテナと同じ Docker network でこれを呼ぶと、.circleci/config.yml は

    - steps:
       (中略)
      - run:
          name: Run Docker Containers
          command: docker-compose up -d
      - run:
          name: Wait until the target docker container fully set up
          command: |
            docker run --network my_network \
              jwilder/dockerize -wait http://my_service/about/ -timeout 3m -wait-retry-interval 5s
      - run:
          name: テストとか

こんな感じでいけました。

CircleCI公式のDocker image には dockerize も入ってる

しかし、その後、CircleCIの用意してくれているDockerベースのDocker Container を使う場合、そのコンテナには Docker だけでなく Docker Compose や Dockerize も含まれているということに気づきました。

「あれ? じゃ上のコード無意味で、直接 dockerize を呼べばいいだけでは?」と思い直し、これを試してみたのですが、

      - run:
          name: Wait until docker container fully set up, from the same docker network
          command: |
            dockerize -wait http://my_service/api/doc -timeout 3m -wait-retry-interval 10s

ネットワークが違うのでアクセスできません。そりゃそうか。CircleCIの中で立ち上がったDocker MachineのIPアドレスが取れれば、それでアクセスできそうだけど。

ドキュメントにありました。同じコンテナか、同じネットワークのコンテナからのアクセスとするのが正しいやり方のようです。CircleCIが使ってるprimary のコンテナにはもう Dockerize コマンドの実体があるので、同じものを再度リモートから取得するのはもったいない気もしますが。

sleepでwait

CircleCI のドキュメントのサンプルでも

      - run:
          command: |
            git push heroku fan-in-fan-out:master
            heroku run rake db:migrate
            sleep 5 # sleep for 5 seconds to wait for dynos
            heroku restart

みたいなことが書いてあって、”sleep 5″って、それいつでも大丈夫なの? と思ったので調べました。まあサンプルはサンプルなので。