Hatena::ブログ(Diary)

C++でゲームプログラミング

2013-07-26

[][]phantomjs でアンカーへ移動した状態でスクリーンショットを保存したかった

phantomjs で

https://github.com/osyo-manga/vim-textobj-multiblock/blob/master/plugin/textobj/multiblock.vim#L10

みたいにアンカーへ移動した状態でスクリーンショットを保存したかったんですが、そのまま開くだけでは移動しなかったので自前でクリッピングしました。


[ソース]

var url = "https://github.com/osyo-manga/vim-textobj-multiblock/blob/master/plugin/textobj/multiblock.vim#L10"
var output = "output.png"


var page = require('webpage').create();
page.open(url, function (status) {
    page.includeJs('http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js', function() {
        var anchor = page.evaluate(function() {
            var hash = location.hash;
            if( hash == "" ){
                return 0
            }
            return $(hash).offset().top;
        });

        var width = page.evaluate(function() {
            return $(document).width();
        });
        var height = page.evaluate(function() {
            return $(document).height();
        });

        page.clipRect = { top: anchor, left: 0, width: width, height: height - anchor };
        page.render(output);

        phantom.exit();
    });

});

[output.png]

f:id:osyo-manga:20130726221157p:image


jQuery 便利だなぁ。

2013-07-11

[]github にある JavaScript のコードを読み込む

例えば、github で公開されている marked.js を HTML から直接読み込みたい事があると思います。

この場合、raw で読みこめばいいと思うのですが、


<script src="https://raw.github.com/chjj/marked/master/lib/marked.js"></script>

これだけでは読み込みに失敗してしまいます。

これを正しく読み込まれるようにするには次のように URL を変更する必要があります。


[before]

https://raw.github.com/chjj/marked/master/lib/marked.js

[after]

https://rawgithub.com/chjj/marked/master/lib/marked.js

このように URL を変更することで JavaScript が正しく読み込まれて marked.js が使用できるようになります。


[gist の場合]

同様に gist の場合も raw だけでは正しく読み込まれません。

こちらも次のように URL を変更する必要があります。


[before]

https://gist.github.com/osyo-manga/5906943/raw/hoge.js

[after]

https://rawgithub.com/osyo-manga/5906943/raw/hoge.js

これで gist にある JavaScript も読み込めるようになります。

ホスト名が変わっていることに注意して下さい。


[参照]

http://rawgithub.com/

2013-06-21

[]node.js で require したらモジュールが見つからないとエラーになった

覚書。

npm でモジュールをインストールして node.js で使用しようとしたんですが、require したら以下のようなエラーに。


module.js:340
    throw err;
          ^
Error: Cannot find module 'phantom'
    at Function.Module._resolveFilename (module.js:338:15)
    at Function.Module._load (module.js:280:25)
    at Module.require (module.js:364:17)
    at require (module.js:380:17)
    at Object.<anonymous> (D:test\main.js:3:15)
    at Module._compile (module.js:456:26)
    at Object.Module._extensions..js (module.js:474:10)
    at Module.load (module.js:356:32)
    at Function.Module._load (module.js:312:12)
    at Function.Module.runMain (module.js:497:10)

[解決]

環境変数 NODE_PATH にモジュールがインストールされているディレクトリのパスを設定すれば解決しました。

PATH には設定されていたんですけどそれだけだとダメだったみたい。


[参照]

http://d.hatena.ne.jp/j7400157/20130121/1358722561

http://d.hatena.ne.jp/masaakib/20110526/1306396268

2012-10-06

[][]Vim 上で TypeScript から JavaScript へのリアルタイム変換

巷で話題の TypeScript なんですがここの動画にあった、TypeScript がリアルタイムで JavaScript に変換されているのが面白くて、Vim でも同じようになってみました。


D


[必要な設定]

set autoread
set updatetime=50

let s:system = exists('g:loaded_vimproc') ? 'vimproc#system_bg' : 'system'

augroup vim-auto-typescript
	autocmd!
	" 適当なタイミングで再読み込み
	autocmd CursorHold   *.ts :checktime
	autocmd CursorMoved  *.ts :checktime
	
	" 書き込み時に js に出力する
	autocmd BufWritePost *.ts :call {s:system}("tsc main.ts")
augroup END

書き込み時に自動で tsc で js を吐き出して、再読み込みを行なっています。

上の設定は結構適当なので、まじめにやる場合はもうちょっと工夫が必要だと思います(quickrun.vim を使うのが楽かなー。

やってみたら思ったよりも面白かったので、他のこの手の言語(JSXとか)でも試してみたいですね。


[参考]

http://vim-users.jp/2011/03/hack206/

https://github.com/leafgarland/typescript-vim

http://d.hatena.ne.jp/mizchi/20121004/1349360909

2012-08-18

[]JavaScript でシンタックスチェック

JavaScript Lint という JavaScript のシンタックスチェックを行うツールがあるみたいなので使ってみた。


[導入]

$ npm install -g jshint

[quickrun_config]

let s:config = {
\   "javascript/syntax_check" : {
\      "command" : "jshint",
\      "exec"    : "%c %s:p",
\      "outputter" : "quickfix",
\      "quickfix/errorformat" : "%f: line %l\\,\ col %c\\, %m",
\   },
\}

call extend(g:quickrun_config, s:config)
unlet s:config

昨日の書いた JavaScript で使ってみるとこんな感じで出力されます。


[:QuickRun javascript/syntax_check]

D:\enchant\test\test\main.js: line 38, col 11, Missing semicolon.
D:\enchant\test\test\main.js: line 40, col 6, Missing semicolon.
D:\enchant\test\test\main.js: line 42, col 2, Missing semicolon.

3 errors

f:id:osyo-manga:20120818022329p:image


ひとまずこれを使用してシンタックスチェックはしてみようかなー。

本音をいえば、未定義な変数や関数もエラーとしてチェックして欲しいけど、流石にそれは無理かなぁ…。


[参照]

http://d.hatena.ne.jp/replication/20100425/1272168937

http://d.hatena.ne.jp/m-hiyama/20080731/1217493351

http://d.hatena.ne.jp/sasaplus1/20120517/1337260047