JavaScriptでSVGを使うまとめ

細々とまとめてみる。
何か表示が崩れるけどまあいいや。



SVGを動的に配置する

下記で100x100サイズのSVGを、IDがaaaaaのエレメントに追加できる。

var svg = document.createElementNS("http://www.w3.org/2000/svg", "svg");
svg.setAttribute("xmlns", "http://www.w3.org/2000/svg");
svg.setAttribute("xmlns:xlink", "http://www.w3.org/1999/xlink");
svg.setAttribute("width" , 100);
svg.setAttribute("height", 100);
svg.setAttribute("viewBox", "0 0 100 100");
document.getElementById("aaaaa").appendChild(svg);



動的に図形とか配置する

矩形の場合は下記のように。

var rect = document.createElementNS("http://www.w3.org/2000/svg", "rect");
rect.setAttribute("width" , 50);
rect.setAttribute("height", 50);
svg.appendChild(rect);


画像の場合は下記のように。

var img = document.createElementNS("http://www.w3.org/2000/svg", "image");
img.setAttributeNS(null, "width" , 50);
img.setAttributeNS(null, "height", 50);
img.setAttributeNS("http://www.w3.org/1999/xlink", "xlink:href", (画像のURL));
svg.appendChild(img);


ここらで注意なのが、属性の指定を「getAttribute」ではなく「getAttributeNS」を使うこと。
これを使わないと、値は設定できても反映されない。
上記矩形は使わなくても行けたっぽいのでgetAttributeのままにしてます。



矩形とかのサイズを取得する

getBBoxを使う。
例えば、上記で作った矩形のサイズを取るときは、

var s = rect.getBBox();

みたいにすれば取れる。
取れる値は、x, y, width, heightの４つ。
それぞれ左上原点でx座標、y座標、幅、高さ。

ただし、svgを非表示にしていたりすると取れないので注意。

また、ChromeとSafariで取れる値が違ったので注意。
特に、<path>で図形を書くと発生する。
例えば<path d="M100,100L200,200.....">というのがあったとする。
これは、x=100,y=100の位置からx=200,y=200の位置に線を引いて....という記述。
これに対し、それぞれでgetBBoxすると、
片方はx=100,y=100,,,と取れるのに、
一方はx=0,y=0,,,と、位置が変に取れてしまう。
バグかどうかは不明だが、しょうがないので<path d="M0,0M100,100L200,200....">
とすれば、とりあえずは同じ値を取得することができるようになる。



SVG要素まるごとテキストとして出力する

SVGでエディタとか作って、それで編集したデータをどこかに保存したいときとかに。

var t = (new XMLSerializer()).serializeToString(svg);



SVGのデータをCanvasに出力する

canvgというライブラリを使うと便利。

画像や複雑なパスもうまいこと処理してくれるよう。

http://code.google.com/p/canvg

使い方は下記のように。

canvgで指定するsvgはStringでないといけないみたいなので、

上記「SVG要素まるごとテキストとして出力する」で出力したデータをぶち込めば良い。

画像とかあると、読み込み完了のタイミングが非同期になるので、

callbackを受けてから処理を続けると良い。

// canvasを動的につくってみる

var cvs = document.createElement("canvas");
cvs.setAttribute("width" , 100);
cvs.setAttribute("height", 100);

// svgはテキストで
var svgTxt = "<svg .....>....</svg>";

// svgをcanvasに描画
canvg(
    cvs,                            // 対象canvas
    svgTxt,                         // 描画するsvg
    {
        ignoreMouse      : true,    // マウスイベント無視
        ignoreAnimation  : true,    // アニメーション無視
        ignoreDimensions : true,    // canvasサイズをsvgに合わせない
        ignoreClear      : true,    // svg描画時にcanvasをクリアしない
        offsetX          : 0,       // svg描画位置
        offsetY          : 0,       // svg描画位置
        scaleWidth       : 100,     // svg描画サイズ
        scaleHeight      : 100,     // svg描画サイズ
        renderCallback   : function(){
            // 例：canvas描画完了時に画像を変数に出力
            var img = cvs.toDataURL("image/png");
        }
    }
);


注意なのが、画像を別ドメインなどから読み込んでいたりすると、
上記例にあるtoDataURLが失敗する。

また、上記引数の「scaleWidth」とかは計算が特殊みたいなので、
詳しく知りたい方は詳細は本家ドキュメントなどを参考に。


SVGをIllustratorとかで読み込む

一応、IllustratorでSVG読み込みはできるが、崩れてしまって使いものにならない。
そこで、一度EPS変換して読み込ませると良い。

そのソフトのおすすめはInkscape(http://inkscape.org)。
Windowsの他、Linux版もある。

コマンドラインでSVGを渡してEPS変換もできるので、
例えばPHPとかから呼び出せば簡単にEPS出力できる。

コマンドについては下記を参考に。

http://inkscape.paix.jp/manual/cmdline-usage.html

GoogleのURL短縮サービスをJavaScriptから使う

サイト放ったらかしすぎてヤバイ。


Googleの短縮URLサービスの利用方法。


１．まずGoogle APIs Consoleから、Google URL Shortenerを「ON」にしてKEY確認。

https://code.google.com/apis/console


２．上記サービスを使いたいページのヘッダーで下記を呼ぶ。

下記を読み込めば、GoogleのAPIに簡単アクセスできて便利。たぶん。

<script src="https://apis.google.com/js/client.js?onload=load"></script>

３．下記JavaScriptを実行すると、取得できる。

// ---------------------------------------------------------
// Googleサービスで短縮URL取得
// ---------------------------------------------------------
function getShortUrl(url, callBack){
    var key = "(Googleから取得したキー)";
    if(!gapi) return callBack(false);
    gapi.client.setApiKey(key);
    gapi.client.load('urlshortener', 'v1', function(){
        var req = gapi.client.urlshortener.url.insert({
            resource: {
                'longUrl': url
            }
        });
        req.execute(function(data){
            if(data.error) return callBack(false);
            callBack(true, data.id);
        });
    });
};
// ---------------------------------------------------------
// 取得例
// ---------------------------------------------------------
getShortUrl("http://google.com", function(f, d){
    // 取得失敗した
    if(!f) return false;
    // 取得キーをアラート表示
    alert(d);
});

// ---------------------------------------------------------

SQLite 全文検索をする方法

下記サイトがとても参考になった

http://blog.mwsoft.jp/article/34911345.html


ところで、文章中に「*」とかがあった場合、
どうやってエスケープするんだろう？？？

JavaScript IEで処理中にスタイル変更が効かないときの対処

IEで、重い処理前とかにスタイルの変更とかを行っても、
そのタイミングで画面が更新してくれない。

そこで、タイマーでちょっとだけウェイトをかければ表示される。
以下の「tmr」というのがその対策処理(赤色の部分)。

例：
(
  ここにスタイルを変更するなどの処理
)
tmr(function(){
    alert("これでちゃんとスタイルが表示されます");
});


// ちょっとだけ待つ関数(10ミリ秒とか)

function tmr(fnc){
    var t = setTimeout(function(){
        fnc();
    }, 10);
}

PostgreSQL 日付同士の差分をとって秒で返す

以下のように書くとできる(○○○はカラム名とか) 。
結果は秒で返る。

EXTRACT(EPOCH FROM ○○○::timestamp - △△△::timestamp)

例：
SELECT * FROM AAA WHERE  EXTRACT(EPOCH FROM now() - BBB::timestamp) > 100;
AAAテーブルで、現在時刻とBBBカラムに登録された時刻の差が100秒より大きいものを返す

Flexでimageの実サイズを取得する

以下がわかりやすい。
FlexLoaderを利用して取得する。

http://www.mitchy-world.jp/itmemo/flex/01.htm

PHPでExcelファイルを作成する

PHPでExcelを作りたい場合は、「PHPExcel」を使う。


使い方などは、下記などを参照

    PHPでExcel2007のファイルを扱えるクラスライブラリ「PHPExcel」


PHPExcelを使用してのExcelの出力方法は色々あるが、下記に注意。

    ・PDF出力は、レイアウトが崩れて使い物にならなかった

    ・Excel出力ではフォントが無視されたので、Excel2007で出力する必要があった

    ・CPUを意外に使用しまくる(AtomではしばらくMAXだった)