2013-04-07

PhantomJSメモ2

PhantomJS

colorwheel.js

HTML5 canvasを使ってカラーホイールを作成しPNGで保存

// 空ページ作成
var page = require('webpage').create();
// サイズを400x400に変更
page.viewportSize = { width: 400, height : 400 };
// canvasを持つhtmlの作成
page.content = '<html><body><canvas id="surface"></canvas></body></html>';
// カラーホイールを作成するjavascriptを記述
page.evaluate(function() {
    (...)
}

rasterize.js

ウェブページのキャプチャーをPDFで保存する。すごく便利

使い方：

phantomjs rasterize.js http://phantomjs.org/ home.pdf

他にもサイズ、書式、ズームが指定できる

WebPageモジュール

paperSize
PDFで出力するときのページサイズを指定する。フォーマットは以下のような形

{ width: '200px', height: '300px', border: '0px' }
{ format: 'A4', orientation: 'portrait', border: '1cm' }

zoomFactor
render()やrenderBase64()でレンダリングするときのスケール要素

// デフォルトは1（100%）
page.zoomFactor = 0.25; // 25%
page.render('capture.png');

statusがsuccessかどうかで読み込めたかを判断できる

page.open(address, function (status) {
    if (status !== 'success') {
        console.log('Unable to load the address!');
        phantom.exit();
    }
    (...)
}

render_multi_url.js

複数のページをPNG形式でキャプチャー

使い方：

phantomjs render_multi_url.js www.google.com www.bbc.co.uk www.phantomjs.org

WebPageモジュール

settings
ウェブページのさまざまな設定。この設定はWebPage#openのときに適用される。WebPage#open後の変更は適用されない
- javascriptEnabled
  ページ内のjavascriptを実行するかどうか。デフォルトはtrue
- loadImages
  画像を読み込むかどうか。デフォルトはtrue
- localToRemoteUrlAccessEnabled
  ローカルリソースからリモートURLにアクセスできるかどうか。デフォルトはfalse
- userAgent
  サーバに送信するユーザーエージェント。ユーザーエージェント一覧
- userName
  HTTP認証で用いる名前
- password
  HTTP認証で用いるパスワード
- XSSAuditingEnabled
  XSSフィルターを有効にするかどうか。デフォルトはfalse
- webSecurityEnabled
  web securityを可能にすべきかどうか。デフォルトはtrue

URL毎にcallbackPerUrl()、すべてが終わったらcallbackFinal()を呼び出すようにしている

RenderUrlsToFile = function(urls, callbackPerUrl, callbackFinal) {
    (...)
};
(...)
RenderUrlsToFile(arrayOfUrls, (function(status, url, file) {
    if (status !== "success") {
        return console.log("Unable to render '" + url + "'");
    } else {
        return console.log("Rendered '" + url + "' at '" + file + "'");
    }
}), function() {
    return phantom.exit();
});

technews.js

Google NewsをPNG形式でキャプチャー

(...)
page.evaluate(function () {
    var body = document.body;
    
    // 背景色を変更
    body.style.backgroundColor = '#fff';
    
    // div#title-block要素を表示しない
    body.querySelector('div#title-block').style.display = 'none';
    
    // form#edition-picker-formの親の親の要素を表示しない
    body.querySelector('form#edition-picker-form').parentElement.parentElement.style.display = 'none';
});
(...)

2013-04-06

libgdxメモ2

libgdx

#2 - libgdx Tutorial: Game Screens で気になったところのメモ

Screenの遷移

setScreen()でScreenをセットできる

public SplashScreen getSplashScreen() {
    return new SplashScreen(this);
}

@Override
public void create() {
    Gdx.app.log(MyGdxGame.LOG, "Creating game");
    fpsLogger = new FPSLogger();
    setScreen(getSplashScreen());
}

Screenにはshow()とhide()メソッドがある。
show()はgame.setScreen()でScreenがセットされた時、 hide()は違うScreenになった時に呼び出される

作成したAbstractScreenを継承してScreenを作成すると良い

参考

TexturePacker

Texture Atlasが簡単に作成できる。詳しいことは別の記事で紹介する

libgdx-texturepacker-guiというものもある

画像の表示

TextureRegionを使って画像表示

については翻訳＆理解しておきたい

package com.me.mygdxgame;

import com.badlogic.gdx.Gdx;
import com.badlogic.gdx.graphics.Texture;
import com.badlogic.gdx.graphics.Texture.TextureFilter;
import com.badlogic.gdx.graphics.g2d.TextureRegion;

public class SplashScreen extends AbstractScreen {
    
    Texture splashTexture;
    TextureRegion splashTextureRegion;
    
    public SplashScreen(MyGdxGame game) {
        super(game);
    }
    
    @Override
    public void show() {
        super.show();
        
        // スプラッシュ用の画像をTextureとして読み込む
        splashTexture = new Texture("data/splash.png");
        
        // 縮小フィルタと拡大フィルタの方法を設定する
        splashTexture.setFilter(TextureFilter.Linear, TextureFilter.Linear);
        
        // TextureとTextureの位置を指定する
        splashTextureRegion = new TextureRegion(splashTexture, 0, 0, 512, 301);
    }
    
    @Override
    public void render(float delta) {
        super.render(delta);
        
        // 描画処理開始
        batch.begin();
        
        // TextureRegionを(0,0)から画面全体に表示する
        batch.draw(splashTextureRegion, 0, 0, Gdx.graphics.getWidth(), Gdx.graphics.getHeight());
        
        // 描画処理終了
        batch.end();
    }
    
    @Override
    public void dispose() {
        super.dispose();
        // Textureを破棄する
        splashTexture.dispose();
    }
    
}

TextureFilterには

Nearest(GL10.GL_NEAREST)
Linear(GL10.GL_LINEAR)
MipMap(GL10.GL_LINEAR_MIPMAP_LINEAR)
MipMapNearestNearest(GL10.GL_NEAREST_MIPMAP_NEAREST)
MipMapLinearNearest(GL10.GL_LINEAR_MIPMAP_NEAREST)
MipMapNearestLinear(GL10.GL_NEAREST_MIPMAP_LINEAR)
MipMapLinearLinear(GL10.GL_LINEAR_MIPMAP_LINEAR)

がある

2013-04-06

libgdxメモ

libgdx

#1 - libgdx Tutorial: Introduction で気になったところのメモ

libgdxのライフサイクル

create-アプリケーションの作成時に1回だけ呼びださえる
resize-ゲーム画面のリサイズ時。createの後にも呼ばれる
render-ゲームロジックの更新を行うメソッド
pause-Androidではホームボタンが押された時。デスクトップではdisposeの前。ゲームを保存するのに適した場所
resume-一時停止の状態から再開する時。Androidのみ
dispose-アプリケーションが破棄される時

FPSLogger（source code）

// 1秒毎にFPSを出力する
private FPSLogger fpsLogger;

// 現在のFPSを出力
fpsLogger.log();

Logging

// 出力の仕方
Gdx.app.log("MyTag", "my informative message");
Gdx.app.error("MyTag", "my error message", exception);
Gdx.app.debug("MyTag", "my error message");

// ロギングレベルを設定
Gdx.app.setLogLevel(logLevel);

Application.LOG_NONE: ログを出力しない
Application.LOG_DEBUG: すべてのメッセージを出力
Application.LOG_ERROR: エラーメッセージのみ出力
Application.LOG_INFO: エラーとノーマルメッセージのみ出力

OpenGL

// 画面をクリアするには
Gdx.gl.glClearColor( 0f, 1f, 0f, 1f );
Gdx.gl.glClear( GL20.GL_COLOR_BUFFER_BIT );

glClearColorとglClearに関しては

LwjglApplicationConfiguration（source code）

LwjglApplicationConfigurationを使っても設定できる

public static void main(String[] args) {
    LwjglApplicationConfiguration cfg = new LwjglApplicationConfiguration();
    
    // ウィンドウのタイトル
    cfg.title = "my-gdx-game";
    
    // ウィンドウアイコンの変更
    cfg.addIcon("data/icon.png", FileType.Internal);
    
    // OpenGL ES 2.0を使うかどうか
    cfg.useGL20 = false;
    
    // ウィンドウのサイズ
    cfg.width = 480;
    cfg.height = 320;
    
    // create game
    new LwjglApplication(new MyGdxGame(), cfg);
}

そのほか設定できる項目はソースコードを参照

2013-03-31

PhantomJSメモ

PhantomJS

Basic examplesのメモ

arguments.js

引数を表示する。systemモジュールのargsプロパティでアクセスできる

countdown.js

カウントダウン。setInterval()を使っている

echoToFile.js

引数で指定したファイルに引数を書き込む。FileSystemモジュールでファイルやディレクトリにアクセスできる

fibo.js

フィボナッチ数を少し表示する。countdown.jsとの違いがわからない

hello.js

console.log()でコンソールに文字列を表示

module.js、universe.js

自分で作成したモジュール（universe.js）の使い方。require()でモジュールを参照する

outputEncoding.js

出力に使用する文字コードの指定方法。phantom.outputEncodingに文字コードを設定する。デフォルトは"utf8"。他には"euc-jp"、"sjis"、"System"がある

printenv.js

システムの環境変数を表示する。systemモジュールのenvオブジェクトを使う

scandir.js

引数で指定したパスのディレクトリの中身をリスト形式で出力する。FileSystemモジュールを使う

sleepsort.js

引数の値をSleep Sortする。sleepの代わりにsetTimeout()を使っている。

関係ないけど

(len === sortedCount) && callback();

こんな方法は初めて見た

version.js

PhantomJSのバージョンを出力する。phantomオブジェクトのversionオブジェクトを使う

page_events.js

ページのイベントを出力する。引数に"-v"を指定するとPage Resourcesも出力する。イベントごとに引数を表示するようにしている。

クリックはdocument.querySelector()でクリックする要素を指定してdispatchEvent()でイベントを割り当てる。

各ステップの動作は

STEP 1：URLを読み込む
STEP 2：フラグメント識別子付きのURLを読み込む
STEP 3：内部リンク（フラグメント識別子）をクリックする
STEP 4：外部リンクをクリックする
STEP 5：ページを閉じて終了する

2013-03-29

TypeScriptを使ってPhantomJSを動作させる

PhantomJS

タイトルの通り、TypeScriptで記述、Javascriptを出力、PhantomJSで実行をするだけです。ここではVisual Studioでコンパイル、実行しています。

Visual Studioの設定

まずは、出力するJavascriptのコードをPhantomJSで実行できるようにします。

[ツール]-[外部ツール]を選択して以下のように設定します。

タイトル：PhantomJS

コマンド：phantomjs.exeのパス

引数：$(ItemFileName).js

初期ディレクトリ：$(ItemDir)

出力ウィンドウを使用にチェック

サンプルコード

次のコードは、Googleのホームページのスクリーンショットをpng形式で保存します。

TypeScriptでは宣言なしの変数や関数を扱うことができないため、declareでphantomやrequireを宣言する必要があります。

declare var phantom;
declare function require(x: string): any;

var page = require('webpage').create();
page.open('http://google.com', function () {
    page.render('google.png');
    phantom.exit();
});

後は、ビルドしてツールからPhantomJSを選択すれば実行されます。

参考

Execute Javascript and Typescript within Visual Studio (and repl)

2013-03-17

オープンソースのドキュメントを翻訳

ドキュメント翻訳

ドキュメントの翻訳を始めて約1ヶ月、ようやく翻訳のやり方が確立してきました。

ここで一度、翻訳の方法を整理しておきたいと思います。

翻訳スタイル

翻訳のスタイルはJTF日本語標準スタイルガイド（翻訳用）が参考になりそうです。

今のところは12の基本ルールのみ採用しています。後々のことを考えると、いろいろと決めた方がいいのかもしれません。

翻訳ツール

さまざまなツールを吟味した結果、今はGoogleの翻訳者ツールキットを使っています。

ネットが繋がればどこでもできる、自動翻訳が便利といった点が選択の理由になります。

使う上で気をつけなければいけないポイントは、デフォルトだと翻訳メモリーが共有されている点でしょうか。

オープンソースのドキュメントを翻訳している分には共有でも問題ないでしょう。また、共有から変更することもできます。

バージョン管理

バージョン管理はgithubで行なっています。

翻訳元のドキュメントがgithub上で管理されている場合は、翻訳元と翻訳後のブランチを作成すれば簡単に翻訳作業を始めることができます。

翻訳作業

翻訳者ツールキットで翻訳元のブランチから翻訳するページを選んで翻訳します。

翻訳が完了したら、Markdownに書き直していきます。この時、監訳や差分のために原文はコメントアウトで残しておきます。

MarkdownのエディタにはOnline Markdown Editorを使ってます。

おわりに

今回紹介した方法は、割りと手軽で簡単だと思います。

まだまだ改善する点があるので、その辺を何とかしていくつもりです。

最後に、参考になりそうなサイトをいくつか紹介しておきます。