HTML5+WebGLシーンがブラウザで簡単に作れる「Goo」を試してみた

siren で船型を作成し、Maya で艤装を作成して、Blender に持っていって Unity 向けに出力した FBX 形式の駆逐艦「島風」のモデルを試しに読み込ませてみると、難なく使うことができました。

上の画面内でマウスをドラッグすることにより、視点を変更することができます。また、Android の Firefox や Chrome でも、こちらの URL に直にアクセスすることにより、3D 表示&フリックによる視点回転とズームができました。

簡単な操船や海戦ゲームくらい作れそうですね!

MD5ハッシュ値をURLセーフな文字列に変換

大量に保存した画像ファイルなどの重複潰しも兼ねて、ファイル名を MD5 ハッシュ値にリネームして保存しています。

dyama/hashmv · GitHub

まったく同一のファイルであれば、ハッシュ値が同一になりますので、ファイル名が同一になります。上のスクリプト「hashmv」ではリネーム時に同一ファイルを上書きしますので、結果、重複ファイルを除去することができます。

実行イメージ

    $ hashmv foobar.jpg
    foobar.jpg -> ./d41d8cd98f00b204e9800998ecf8427e.jpg    

hashmv では、32 文字のハッシュ値のそのままファイル名に変換しているので、ちょっと長いなと思いました。md5sum のオプションを見ても、もうちょっとコンパクトな出力を得るオプションが見当たらなかったので、車輪の再発明上等でシェルスクリプトを書いてみました。

    #!bash
    function compress_hash()
    {
      echo $2 | sed \
        -e 's/aaa*/A/g' \
        -e 's/abb*/B/g' \
        -e 's/acc*/C/g' \
        -e 's/add*/D/g' \
        -e 's/aee*/E/g' \
        -e 's/aff*/F/g' \
        -e 's/baa*/G/g' -e 's/ecc*/g/g' \
        -e 's/bbb*/H/g' -e 's/edd*/h/g' \
        -e 's/bcc*/I/g' -e 's/eee*/i/g' \
        -e 's/bdd*/J/g' -e 's/eff*/j/g' \
        -e 's/bee*/K/g' -e 's/faa*/k/g' \
        -e 's/bff*/L/g' -e 's/fbb*/l/g' \
        -e 's/caa*/N/g' -e 's/fcc*/n/g' \
        -e 's/cbb*/M/g' -e 's/fdd*/m/g' \
        -e 's/ccc*/O/g' -e 's/fee*/o/g' \
        -e 's/cdd*/P/g' -e 's/fff*/p/g' \
        -e 's/cee*/Q/g' -e 's/0[0-9][0-9]*/q/g' \
        -e 's/cff*/R/g' -e 's/1[0-9][0-9]*/r/g' \
        -e 's/daa*/S/g' -e 's/2[0-9][0-9]*/s/g' \
        -e 's/dbb*/T/g' -e 's/3[0-9][0-9]*/t/g' \
        -e 's/dcc*/U/g' -e 's/4[0-9][0-9]*/u/g' \
        -e 's/ddd*/V/g' -e 's/5[0-9][0-9]*/v/g' \
        -e 's/dee*/W/g' -e 's/6[0-9][0-9]*/w/g' \
        -e 's/dff*/X/g' -e 's/7[0-9][0-9]*/x/g' \
        -e 's/eaa*/Y/g' -e 's/8[0-9][0-9]*/y/g' \
        -e 's/ebb*/Z/g' -e 's/9[0-9][0-9]*/z/g' \
        | cut -c -$1
    }

    for hashstr in $@
    do
      compress_hash 6 $hashstr
    done

元のハッシュ値は [a-f0-9] の文字集合ですが、パターンマッチングによって [a-fA-Z0-9] の文字集合に置き替え、桁数を落としています。見たとおり、ある一定のパターンの繰り返しを単一文字に置き換えているので、上のスクリプトでは元ハッシュ値に対する可逆性はありません。さらに、破壊的に圧縮したハッシュ値をcut で任意の桁数に切り落としています。

次に、評価用のコードを示します。

    while :
    do
      hash=$(date +%s | md5sum | cut -f 1 -d ' ')
      compress_hash 6 $hash
      sleep 1
    done

1秒おきに、UNIX タイム文字列を変換して印字する評価コードです。実行すると

    dFc7wa
    vqA5cx
    rc1a1d
    ucufyV
    1d2b8c
    qm9Le4
    6sqc5c
    atavIr
    7bqc5r
    3auf7b
    ....

のように、6 桁の圧縮されたハッシュ値が出てきます。

短縮 URL などの用途に代表されるように、URL セーフな文字列で桁数を抑えつつもある程度のパターン数は稼ぎたい場合に有効かもしれません。なお、元のハッシュ値は基数が a-z0-f の 16 ですが、これは a-zA-Z0-9 の 62 となる為、6 桁でも約 568 億パターンも稼ぐことが可能です。

    # 62^10 = 839299365868340224 (約84京パターン)
    # 62^9  =  13537086546263552 (約1.3京パターン)
    # 62^8  =    218340105584896 (約218兆パターン)
    # 62^7  =      3521614606208 (約3.5兆パターン)
    # 62^6  =        56800235584 (約568億パターン)
    # 62^5  =          916132832 (約9億パターン)
    # 62^4  =           14776336 (約1477万パターン)

6 桁なら長くなく、覚えられない長さではないし、1/568億の確率で衝突するくらいの強さは持ってますので、ファイル管理には十分だと思いました。

なお、a-zA-Z0-9 の文字集合に加えて記号 /+= を許可する場合は、上のようなスクリプトではなくハッシュ値をそのまま base64 エンコードした方が手っ取り早いです。

Twitterの画像を一括ダウンロードするシェルスクリプト「berryjack」を書いた。

以下、スクリプトの解説が中心です。Windows で手軽に使いたい方は berryjack/win32 をダウンロードしてください。

数年前、知人より「Twitterの特定アカウントで公開されている画像ファイルを一括ダウンロードするスクリプトがないかな」と相談を受けて、Perl でNet::Twitter::Liteを使ってがりがりコーディングしました。そして、今年になってから Ruby を使う機会が増えたため、そのコードを Ruby で書き直してみました。

機能に対した差はなく、いずれも Twitter API 経由でタイムラインを取得していき、オブジェクト化されたツイートを舐めていくだけのものでしたが、画像ファイルのダウンロードに加え、発言やプロフィール情報の保存などなどをやっているうちにコードが増えてしまって、Perl で 343 行、書き直した Ruby でも 203 行と少し行数が増えてしまいました。

速度や行数に厳しい要求じゃないので、別にまあ良いのですが、Perl で書いていた頃から Twitter API がなんだか大掛かりすぎる感がありました。コンシューマキーやらアクセストークンやら、タイムラインの遡って取得していく方法や…、とタイムラインを取ってくるだけでも色々なバックエンドを知りつつ、リファレンスと睨めっこしなければなりません。

そんな時 Twitter をWWWブラウザで眺めていると、メディアの取得は JavaScript を使って非同期的に要求・表示していることに気付きました。いや、それ自体は一応前から知ってたんですが、昨今のダイナミックに動きまくる大手ウェブサービスの暗号みたいなソースを見るのにちょっと億劫になっていて、挙動と中でやっている事の予想はついていたものの、まともに調べたことがありませんでした。タイムライン取得はどのサイトを見ても Twitter API 経由が定石のようですし…。

Twitter 側が提示している正規のアクセス方法はあくまでも Twitter API 経由でのアクセスですが、使わせてようとしているわりには使いづらかったり、何かと制限がついてきたりとなかなか良いイメージがありません。 その Twitter API も大掛かりすぎて、ちょっとだけ食傷気味になっていましたので、HTTPリクエストと返ってくるJSON情報だけでなんとかなるはずだと思って、シェルスクリプトで書いてみました。

Twitter をブラウザでアクセスした際に表示される「画像 / 動画」ページは、下にスクロールしていくと、非同期的にサーバにクエリを投げて画像 URL を含む JSON データを取得しています。Firefox の 開発ツールを開いて JavaScript でクエリーを投げている URL を検知すると、

https://twitter.com/i/profiles/show/[Twitterアカウント名]/media_timeline[パラメータ]

にアクセスしていることが分かります。

ここから、まずパラメータを省略してアクセスしてみると最新のツイートから遡って20件前後のツイートを取得しているようでした。さらにこの取得したツイートのIDを用いて、さらに古いツイートを取得するためのパラメータを生成すれば良さそうです。

つまり、最初のアクセスはパラメータなし。2回目以降は、直前のアクセスで取得した情報を基に URL を生成、そこにアクセス。というパターンです。

いくつかパラメータを投げることができるみたいですが、最低限必要なパラメータはcontextual_tweet_idmax_idのようです。前者は、直前に取得した tweet ID の一番若い番号、後者はその番号をマイナス1した値みたいです。Tweet ID は全世界的に一意である整数値番号で、Perl ではMath::BigIntを使わないと扱えないくらい大きい桁数になっています。

そのことを踏まえ、適当にパターンマッチさせて書いてやると、次のような感じになりました。


初回アクセス時にはparamが空になって、最新のツイートを取得します。そこから、まずは画像ファイルの情報を列挙、その後に次のクエリーを投げるためのパラメータ検知、生成しています。最も古いツイートまで到達したりして情報が取得できなかったら抜けます。

拍子抜けしてしまうほど簡単でした。14行ておま。Perl や Ruby の Twitter API なモジュール、Gem を使ってやっていたのが虚しいくらいです。もちろん、これ以外にもいろいろな機能を実装していた上に、Unicode なツイート内容などを扱い始めるとシェルスクリプトでは都合が悪い(勝手が悪い)部分も多々存在します。

絶対的優位と言えそうな点は、media_timeline に対してクエリーを投げているので、画像ファイルのダウンロードが目的であれば不必要なその他のツイートは取得せずに、ピンポイントでダウンロードできる点じゃないでしょうか。(そっちの方が Twitter のサーバに対しても優しいかも。1万ツイートしていて画像ファイルが100個しかないアカウントに対して全ツイートを取得するのは非効率的すぎますし、そもそも API 制限で全ては取得できませんし…。Twitter API もメディアファイルがついているものだけを取得できないのかなぁ)

ということで、いくつかオプションを追加して叩けば落ちてくるシェルスクリプト「berryjack」を GitHub に置いておきました。何百番煎じかもしれませんが、興味がある方は見てみてください。

ちなみに、一度だけダウンロードしたい方は、次のようなソフトもあります。

WordPress の記事投稿を Markdown に変更しました。

タイトルのとおり、WordPress の記事投稿を WP-Markdown というプラグインを入れて Markdown に変更しました。HTML のビジュアルエディタだと、コード中の <> 記号との相性が悪かったり、ドキュメントの文字情報とレイアウト情報がごちゃごちゃになってしまう HTML というものの、情報の入れ物としての素質的にどうなのかなあ、と思うところがあっての変更です。

シンタックスハイライターと衝突

これまで、コードのシンタックスハイライトには「SyntaxHighlighter Evolved」というプラグインを利用していましたが、Markdown プラグインと相性が悪いのか、レイアウトが崩れてしまいました。 現在は SyntaxHighlighter Evolved を無効にして、WP-Markdown の pretify syntax highlighter を有効にしています。これは pretify.js というライブラリでハイライトしてくれるらしいモノで、SyntaxHighlighter Evolved のように行番号表示や言語を指定する機能はありませんが、軽快かつ適当に色をつけてくれます。

なお、wp-markdown-syntaxhighlighter というプラグインを入れれば SyntaxHighlighter Evolved との衝突を防げるといった記事を見かけましたが、自分の環境ではムリでした。

新しいサイトを作ってみた。

月曜日の早朝からナニやっているんだ、と自分でも思う。

さくらインターネットのVPSサービスを眺めていると、ふと知人がロリポップでサイトを作っていたことを思い出し、どんなプランなんだろうと詳細ページを見ていると、なかなかバカにできない環境&コストだったので、新しいサイトを作りたくなってきた。

というのも、仕事の関係でちょっと触ってみたWordPressがなかなかイイ感じだったことと、今、メインにしているホームページのサーバが遠い(ワシントンにあるらしい。シェルログインができるのは嬉しいんだけど、契約しているプランではDBが使えない上に、たまにつながらない。重い。)という理由があって、国内に一つはまともな情報発信源でも持っておきたいなあ、と思っていたから。

調子に乗ってドメインまで取得してしまった始末。

さて、これから寝て、仕事が終わったらデータの引っ越しでもするかなあ。

水槽にライブカメラを付けてみた。(JPEG配信編)

電源の関係で、新調したサーバ群を自室ではなく居間に設置した。セットアップを済ませた新サーバに近づく用事といえば、たまに DVD を焼くくらいしかない。それも自分の為ではなく、大抵が他人の為にだ。

続きを読む 水槽にライブカメラを付けてみた。(JPEG配信編)