読み書きプログラミング

日常のプログラミングで気づいたことを綴っています

Meteorのappcacheの有効活用

Meteorは、appcacheというパッケージを追加するだけで、Application Cacheを利用できます。
手作業だと、manifestをしこしこ書かないといけないのでとても楽です。

ただ、Meteorのappcacheは静的リソースのサーバー側での動的変更をサポートしていて、このために、オンラインの時には静的な画像もクライアントは毎回サーバーにリクエストし、サーバー側は変更がなければステータスコード304を返します。
静的な画像が多いとこのパケットの往復がバカにならない。
なので、一度デプロイしたら更新しない静的リソースはオンラインでもApplication Cacheを使うようにしたいです。

以下、そのためのハッキングです。

Meteor.startup ->
    unless Meteor.AppCache?
        return

    for resource in WebApp.clientPrograms['web.browser'].manifest
        if resource.url?
            if resource.url.indexOf('/images/') == 0 # 例えば、/public/images/以下のリソースが対象
                resource.cacheable = true # オンラインでもキャッシュを有効化
    return

Meteorのソースコードを見ると、リソースのハッシュを取ってくるヘルパーを作って、アプリのURL指定の部分にハッシュを埋め込むようにと書いてあったのですが、CSSのURLにヘルパー埋めるのは大変なので、cacheableがオフになっているところ、強引にオンにしました。

appcacheのさらなる高速化を求めている方のご参考になれば幸いです。

サイトの画像を一括ダウンロード

訳あって、サイトに表示されているimg画像を一括してダウンロードするスクリプトを書きました。

((func) ->
    scr = document.createElement 'script'
    scr.src = "//ajax.googleapis.com/ajax/libs/jquery/3.0.0/jquery.min.js"; # 短いのに大げさですが、jQueryを使います
    scr.onload = ->
        func jQuery.noConflict true
    document.body.appendChild scr
) ($) ->
    $('img').each (num) -> # セレクタを変更すると欲しい部分だけにしぼれる
        a = document.createElement 'a'
        a.download = num + '.jpg' # jpg決めうちの品のないコード
        a.href = $(this).attr 'src'
        evt = document.createEvent 'MouseEvent'
        evt.initEvent 'click', true, false
        a.dispatchEvent evt
        return
    return

これをコンパイルして、自分のサイトに置きます。

次に、このスクリプトを読み込むブックマークレットを作ります。

javascript:(function(d,s){s=d.createElement("script");s.src="<スクリプトのURL>?"+Date.now();d.body.appendChild(s)})(document)

取得したいサイトを開いて、ブックマークレットをクリックすると、画像のダウンロードが始まります。
(Chromeの場合、初回だけ複数ダウンロードを許可するかどうか確認のウィンドウが開きました。)

ファイル名に<番号>.jpgを指定していますが、他の種類の画像もあるので、本来対称のsrc属性を調べて決定すべきです。
src属性からハッシュを消して拡張子を取り出すのがそれっぽい処理ですが、srcはdataURLの場合もあるのでご注意ください。

不具合

Chromeの場合、最初の0から19までの画像は<番号>.jpgの名前で保存されましたが、それ以降はimages.jpeg, image (番号).jpegという名前になりました。なぜでしょう?自分の用は足せたので原因を調べたりしていません。あしからず。

Twitterボタンを動的に更新する

[2016/06/08追加]
動的にボタンを追加するAPIがあるみたいですね。
dev.twitter.com

Twitterボタンには以下の属性が設定可能です。

type
ボタンのタイプ
size
ボタンのサイズ
lang
ボタン表示の言語設定
text
ツイート内容
url
添付するURL
hashtags
ハッシュタグ
id
ボタン(iframe)のid
time
ボタン生成時刻
original_referer
ボタンが配置されたページのURL
dnt
Twitterによるカスタマイズのオプトアウトのオンオフ
ウェブアプリでゲームを作って、ゲームの成績をツイートするような場合には上記のtextに結果を埋め込みたいです。
ボタンに変換されるアンカーaを動的に生成、追加して、twttr.widget.load()を実行すればいいのですが、元々ボタンが設置されている場合、削除してload()を実行するのは、それなりにオーバーヘッドがあるかなと思いました。

なので、iframeのsrcを直接変更してみたのですが、ボタンが更新されない。調べたところ、上記のパラメータがsrcのハッシュ部分に埋め込まれていて、ハッシュだけの更新の場合、iframeは再読み込みを実行しないからでした。
原因がわかれば対策は簡単で、キャッシュを外すよくあるテクニックで、ダミーのタイムスタンプを付けることで解決しました。

以下、コードスニペット(CoffeeScript, jQuery使用)です。

parseTwitterButtonSrc = (url) ->
    match = url.match /(.*)#(.*)/
    unless match?
        return null
    result =
        page: match[1]
        params: {}
    for eq in match[2].split '&'
        match = eq.match /(.*)=(.*)/
        if match?
            result.params[decodeURIComponent match[1]] = decodeURIComponent match[2]
    result

composeTwitterButtonSrc = (obj, timestamp = false) ->
    head = obj.page
    if timestamp
        head += "?dummy=#{Date.now()}"
    head + '#' + (encodeURIComponent(k) + '=' + encodeURIComponent(v) for k, v of obj.params).join '&'

updateButtonText = ($target, text) ->
    parsed = parseTwitterButtonSrc $target.attr 'src'
    parsed.params.text = text
    $target.attr 'src', composeTwitterButtonSrc parsed, true
    return

新浪微博の各ポストへのURL生成

新浪微博の各ポストに当たるURLを生成する必要があったので、調べました。

URLはhttp://weibo.com/<user id>/<post mid>という構造になっていて、post midはpost idから計算できます。
post midを計算するAPI(Querymid)が用意されていたようですが、今の提供されていないようです。


それ以前に単なる関数なのにRESTで取得するのが嫌だった人がいて、関数を実装されていました。

Using base62 to generate a Sina Weibo post permalink

ちょっと長いコードですが、どうやら大部分はbase62の実装のようです。

Rubyにはbase62のgemがあったので、それを使って、id2midだけ実装しました。

require 'base62'

def id2mid id
    id.to_s.reverse.scan(/.{1,7}/) # 下から7桁ずつに分割
        .map { |a| a.reverse.to_i.base62_encode }.reverse # 各パートをbase62エンコード
        .join('').swapcase #くっつけて大文字小文字変換
end

終わり。(短くてすいません)

meteor.comにデプロイした古いMeteorアプリでのsiperableの注意点

追記
去年の10月にAJAX Crawling (Deprecated)はご覧の通りdeprecatedになっており、meteorのspiderableパッケージは今となっては特に有効ではないということのようです。

Meteorアプリを検索エンジンのボットに読み取ってもらうにはspiderableパッケージを使います。
spiderableパッケージはPhantomJSを起動してボットが読み取れる様アプリがレンダリングした結果のHTMLをボットに提供します。
ところが、いつ頃からかmeteor.comにデプロイしたアプリでspiderableのレンダリングがうまくいかなくなりました。

不思議に思いながら放置していたのですが、今回調査したところ、

  1. どうやらmeteor.comのPhantomJSはバージョン1の模様
  2. PhantomJS v1はFunction.prototype.bindをサポートしてない
  3. Meteorはproduction build(minificationなど)する時に.bindを使っている部分がある
  4. なのでlocalや--debugの時は動いてもproductionで動かなくなる

ということが起こっていました。
問題ないアプリもあるので、使っているパッケージに依存しているようです。

.bindのpolyfillを入れれば直るはずということで、es5-shimパッケージを追加したところ、直りました。

es5-shimは今ではmeteor createでデフォルトで追加されるパッケージのようです。
ずいぶん前から作り続けているアプリだったので今回のような問題が起こりました。

それにしても、meteor.comのPhantomJS、バージョンアップした方がいいんじゃないかな?

SGFパーサ

Rustでコンピュータ碁に取り組むプロジェクト「きり」、ちょっと地味ですが初めての成果公開します。
SGFパーサを作ってcrate.ioに公開しました。
レポジトリ

y-ich/rust-sgf: Smart Game Format parser in Rust

rust-pegを使って書きました。