Hello Absurd World!　javascript

2016
01
23

JavaScript: Githubで公開しているライブラリをBowerにプッシュ

　Githubで公開しているJavaScriptライブラリに、Bowerへプッシュしてくれないかとリクエストが来た。それを機にBowerへプッシュしてみたので簡単に流れを。

　Bowerとは・・・フロントエンド、つまりクライアントサイドのライブラリ管理ツールらしい。ざっくり言えばUbuntuでのapt、Pythonでのpip、Nodejsでのnpmのようなものだろうか。
https://msdn.microsoft.com/ja-jp/magazine/mt573714.aspx

　Bowerへプッシュする。

　まずNodejsをインストールし、npmコマンドを使えるようにする。そうしたらbowerをnpmでインストールする。
> npm install -g bower
　bowerをインストールしたらbowerコマンドが使えるようになっているはずである。コマンドプロンプトにbowerと打って実行できなければ、bowerがインストールされている場所を指定する必要がある。npmのパッケージの一つとしてインストールされるので、そこを探してみると見つかるかもしれない。ぼくの環境では結局以下のようになった。
> c:\nodepackages\bower --version
bowerコマンドがちょい長いので以下ではbowerと省略する。

　bowerコマンドが使えるようになったら、次はGithubに上げているファイルにbower.jsonを追加する。これはライブラリがどんなものかを説明する情報ファイルである。説明している人はちらほらいるので実例を一つ以下に。

{
  "name": "piexifjs",
  "description": "Read and write exif.",
  "main": "piexif.js",
  "authors": [
    "hMatoba"
  ],
  "license": "MIT",
  "keywords": [
    "jpeg",
    "exif"
  ],
  "homepage": "https://github.com/hMatoba/piexifjs",
  "moduleType": [],
  "ignore": [
    "**/*",
    "!piexif.js",
    "!bower.json"
  ]
}

　ignoreを設定しないと、不要なファイルまでもろもろユーザーにインストールされてしまうことになる。それなら一つ一つ含めないファイルを指定するより、必要ファイル以外は含めないでと指定するほうが楽である。
　上記のbower.jsonをパッケージのルートに置く。そうしたらあとはbowerコマンドを打つだけである。
> bower register <my-package-name> <git-endpoint>
これでbowerにプッシュが完了するので、bowerコマンドでパッケージインストールが可能になる。
> bower install <package>

スポンサーサイト

このページのトップへ

2015
08
30

JavaScript: クライアントサイドでもサーバサイドでも使えるライブラリのテスト（Docker, TravisCI）

tags: JavaScript Docker TravisCI

　ブラウザでもNodejs環境でも動作するJavaScriptライブラリをGithubにのっけてある。
https://github.com/hMatoba/piexifjs
　必要になったら使ってくださいというスタンスにしてある。信頼性確保のためにテストを書いてTravisCIで実行されるようにしていたが、テストはPhantomjsを使ってクライアントサイドのみを行っていた。クライアントサイド、サーバサイドの両対応がウリのライブラリなので両方のテストをTravisCIでやっておいて、ライブラリを見つけた人が信頼できるようにしたいので、サーバサイドのテストを行うようにちょっとファイルを追加したり。

　クライアントサイドのテストはヘッドレスでブラウザが使えるPhantomjsに自作のテストフレームワークphestum.jsを使用し、
>phantomjs phestum.js mylib.js
上記コマンドで動くようになっていた。クライアントサイドはこのままで問題ないのでサーバサイドテストを追加する。
　とりあえず簡単なテストを書き、nodetest.jsという名前で保存した。テストとして問題なく終了すればエラーコードなしで終了、問題があればエラーコード1で終了するようにしてある。これはNodejsで動かすのでコマンドとしては下記。
>node nodetest.js
上記のnodeコマンドは環境によってはnodejsでないと動かない。後で出てくるがDockerにてubuntu内ではnodejs、TravisCI環境ではnodeでコマンドが通る。

　テストは用意した。あとはテストするだけ。TravisCIですぐに行ってもいいが、自分でDockerを使ってテスト環境を用意し、それにパスしたらTravisCIで行うようにしたほうが問題があったときに手っ取り早い。よってまずDockerを使ったテストの準備。下記が実際に使ったDockerfile。NodejsとPhantomjsのインストール、テストするライブラリやテストコードのコピーを行う。

FROM ubuntu

RUN apt-get update && \
    apt-get install -y nodejs && \
    apt-get install -y phantomjs

RUN mkdir /test/
ADD . /test/
WORKDIR /test/

ENTRYPOINT phantomjs phestum.js piexif.js && nodejs nodetest.js

　準備ができたらイメージのビルドから実行までを行い、テストを通ることを確認する。テストに通らなかったら修正を加え、またビルドから実行まで。
docker build mylib_test .
docker run mylib_test

　Dockerで用意した環境でテストが通ったのでTravisCIでも行う。.travis.ymlが下記。

sudo: false

language: node_js
node_js:
  - "0.12"
  
script: phantomjs phestum.js piexif.js && node nodetest.js

　これでTravisCIでもテストが行われる。テストはコマンドにあるとおり、Phantomjsを使ったクライアントサイド、Nodejsを使ったサーバサイドのテストが行われる。二つのコマンドが&&でつながれているので、問題なければ二つが順番に実行される。これでクライアントサイド、サーバサイド両対応のJavaScriptライブラリとして堂々と公開しておけるだろう。

https://travis-ci.org/hMatoba/piexifjs

このページのトップへ

2015
04
23

Node.js: Githubに上げているライブラリをnpmにパッケージとしてアップロードしてみた

tags: JavaScript

　以前にブラウザで使うJavaScriptライブラリをNode.jsでも使えるように書き換えた。
http://elicon.blog57.fc2.com/blog-entry-444.html

　Node.jsのパッケージインデクスであるnpmに同じ機能を持ったライブラリはあるだろうと思ってアップロードしていなかったが、どうやらまだないようだったのでライブラリをパッケージ化してnpmにアップロードしてみた。

　npmへのパッケージアップロードのためにやることをざっくり書くと、設定ファイルであるpackage.jsonの追加である。これさえあればあとはnpmコマンドで公開するだけだ。というわけでまずpackage.jsonを追加。
　あとはREADME*という名前のテキストファイルがあるとパッケージのページで説明として表示される。マークダウンで書けるが、rSTには対応していない。もともとGithubでの説明表示のためにREADME.rstを用意してあったが、npm用に追加でREADME.mdも用意した。npmはREADME.mdとREADME.rstが両方あったらファイル名順の認識なのかREADME.mdの内容を表示した。Github側ではややこしいことにならないように.gitignoreにREADME.mdを追加した。
　あと.gitignoreのごとく.npmignoreを作って、パッケージから除外したいファイルやフォルダを列記。準備を済ませたらアップロードを行った。
https://www.npmjs.com/package/piexifjs

このページのトップへ

2015
04
21

JavaScript: Generates rotated jpeg with exif "Rotation" value

tags: JavaScript

Exif has "Rotation" value. Many photo viewers check it to show image. I wrote that to get rotated jpeg and remove exif "Rotation" value on client-side JavaScript.

To try, download two files below and put them same directory and open .html.
150421.html
piexif.js

Rotated image samples: https://github.com/recurser/exif-orientation-examples

********************* screen shot

*********************

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>generates rotated jpeg</title>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js" ></script>
    <script src="piexif.js"></script>
</head>
<body>
    <div>JPEG FILES ONLY<br>You can choose multiple files<br>
        <input type="file" id="files" name="files[]" multiple /><br>
    </div>
    <div id="preview"></div>
<script>
function postJpeg (binStr) {
    var array = [];
    for (var p=0; p<data.length; p++) {
        array[p] = data.charCodeAt(p);
    }
    var u8array = new Uint8Array(array);
    
    var req = new XMLHttpRequest();
    req.open("POST", "/jpeg", false);
    req.setRequestHeader('Content-Type', 'image/jpeg');
    req.send(u8array.buffer);
}


function previewJpeg(evt) {
    var files = evt.target.files;
    var previewDiv = $("#preview");
    for (var i=0; i<files.length; i++) {
        var file = files[i];
        if (!file.type.match('image/jpeg.*')) {
            continue;
        }

        var reader = new FileReader();
        reader.onload = function(e) {
            var exif = piexif.load(e.target.result);
            var image = new Image();
            image.onload = function () {
                var orientation = exif["0th"][piexif.ImageIFD.Orientation];

                var canvas = document.createElement("canvas");
                canvas.width = image.width;
                canvas.height = image.height;
                var ctx = canvas.getContext("2d");
                var x = 0;
                var y = 0;
                ctx.save();
                if (orientation == 2) {
                    x = -canvas.width;
                    ctx.scale(-1, 1);
                } else if (orientation == 3) {
                    x = -canvas.width;
                    y = -canvas.height;
                    ctx.scale(-1, -1);
                } else if (orientation == 3) {
                    x = -canvas.width;
                    y = -canvas.height;
                    ctx.scale(-1, -1);
                } else if (orientation == 4) {
                    y = -canvas.height;
                    ctx.scale(1, -1);
                } else if (orientation == 5) {
                    canvas.width = image.height;
                    canvas.height = image.width;
                    ctx.translate(canvas.width, canvas.height / canvas.width);
                    ctx.rotate(Math.PI / 2);
                    y = -canvas.width;
                    ctx.scale(1, -1);
                } else if (orientation == 6) {
                    canvas.width = image.height;
                    canvas.height = image.width;
                    ctx.translate(canvas.width, canvas.height / canvas.width);
                    ctx.rotate(Math.PI / 2);
                } else if (orientation == 7) {
                    canvas.width = image.height;
                    canvas.height = image.width;
                    ctx.translate(canvas.width, canvas.height / canvas.width);
                    ctx.rotate(Math.PI / 2);
                    x = -canvas.height;
                    ctx.scale(-1, 1);
                } else if (orientation == 8) {
                    canvas.width = image.height;
                    canvas.height = image.width;
                    ctx.translate(canvas.width, canvas.height / canvas.width);
                    ctx.rotate(Math.PI / 2);
                    x = -canvas.height;
                    y = -canvas.width;
                    ctx.scale(-1, -1);
                }
                ctx.drawImage(image, x, y);
                ctx.restore();

                var dataURL = canvas.toDataURL("image/jpeg", 1.0);
                var jpegBinary = atob(dataURL.split(",")[1]);
                
                // restore exif(remove orientation value)
//                if (typeof orientation !== "undefined") {
//                    delete exif["0th"]["Orientation"];
//                }
//                var exifbytes = piexif.dump(exif);
//                jpegBinary = piexif.insert(exifbytes, jpegBinary);

                var div = $("<div></div>");
                div.append(canvas);
                var button = $("<button>post this image</button>");
                button.click(function () {
                    //post(jpegBinary);
                    console.log("post jpeg");
                });

                previewDiv.prepend(div).prepend(button);
            };
            image.src = e.target.result;
        };

        reader.readAsDataURL(file);
    }
}
    
document.getElementById("files").onchange = previewJpeg;
</script>
</body>
</html>

https://github.com/hMatoba/piexifjs

このページのトップへ

2015
04
17

JavaScript: ブラウザ用に書いていたライブラリをNode.jsにも対応させてみる

tags: JavaScript Node.js

　以前にクライアントサイドJavaScriptでJPEGのメタデータであるExifを編集できるPiexifjsというライブラリを書いた。StackoverflowでNode.js環境でExifを編集する方法はないかと質問が出ているのを見かけたので、PiexifjsをNode.jsにも対応させてみた。

　Node.jsで使えるライブラリにするための書き方は、作った関数やオブジェクトをmodule.exportsに入れることだ。
module.exports = foo;
　つまりNode.js環境では上記を実行、ブラウザ環境ではグローバルオブジェクトのプロパティに作成した関数やオブジェクトを入れるように書くことで、Node.js環境でもブラウザ環境でも使えるライブラリとなる。有名なunderscore.jsはそうしているので、Piexifjsもそれにならってみる。
　Piexifjsでは定義された関数をthatというオブジェクトにまとめて入れてある。そのthatの代入先を条件に応じて変える。

if (typeof exports !== 'undefined') {
     if (typeof module !== 'undefined' && module.exports) {
        exports = module.exports = that;
    }
    exports.piexif = that;
} else {
    window.piexif = that;
}

　作ったライブラリを読み込む。Node.js環境では・・・・・・
var piexif = require("piexif.js");
ブラウザ環境では・・・・・・
<script src="piexif.js"></script>

　あとはどちらの環境でも共通のスクリプトを書けば使える。

var exifOjb = piexif.load(jpegData);
var exifbytes = piexif.dump(exifObj);

このページのトップへ

ホーム次のページ »

このページのトップへ