主にプログラミングに関して。Python, .NET Framework(C#), JavaScript, その他いくらか。
記事にあるサンプルやコードは要検証。使用に際しては責任を負いかねます

スポンサーサイト

                
tags:
上記の広告は1ヶ月以上更新のないブログに表示されています。
新しい記事を書く事で広告が消せます。

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

                
tags: JavaScript
 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>
スポンサーサイト

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
1508302207353.jpg
1508302207439.jpg



 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ライブラリとして堂々と公開しておけるだろう。
1508302210434.jpg
https://travis-ci.org/hMatoba/piexifjs

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

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
1504211832136.jpg
*********************

<!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

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);
プロフィール

Matoba

Author:Matoba

最新記事
リンク
作ったものなど
月別アーカイブ
カテゴリ
タグリスト

検索フォーム
Amazon
上記広告は1ヶ月以上更新のないブログに表示されています。新しい記事を書くことで広告を消せます。