カテゴリー別アーカイブ: node.js

Grunt の同名タスクをファイル分割する

2014年12月11日 BY DiceK Mikami | コメントをどうぞ

12月ですね。
12月と言えば、そう私たち会社人にとって避けては通れない忘年会のシーズンですね。
γ-GTPの上昇には気をつけて！

・・・くりすます？
なんですかそれは？

どうもDiceK Mikamiです。
デジャブ？

ここ最近はGruntを使ってグルグルしています。
（＠д＠）←こんな状態。
なので、Gruntに関して書いてみたいと思います。
続きを読む →

Yeoman でガジェットをつくってみよう

2014年9月9日 BY DiceK Mikami | 1件のフィードバック

もう9月ですか。
残暑厳しいかと思いきや、なんだか寒々しい日々ですね。
晴れろ！
どうもDiceK Mikamiです。
続きを読む →

モバイル向けWebページのデバッグについて

2014年5月23日 BY kenarai7 | コメントをどうぞ

スマートフォンやタブレットにもSafari、 Android Browser（Android 標準ブラウザ）、Chorme、IE、FireFoxなどたくさんのブラウザがあります。作成するWebページをそれらのブラウザに対応させるとなると、ブラウザ間でのCSSの動作や表示の違いを修正するために何かと実機でのデバッグ作業が必要な場合がでてくるかと思います。しかし、実際にiOSのSafariでデバッグするのにMacを利用できる環境でなかったり、デバッグツールがないAndroid Browserでデバッグしたい場合などがあると思います。そのような場合には「weinre」というリモートデバッグツールが有用かと思います。
weinreを利用することにより、 Chromeを使ってデバイス上のWebページのリモードデバッグが可能になります。

weinreのセットアップ手順

1.node.jsのインストール

以下のサイトからnode.jsのインストーラをダウンロードしてインストールします。
http://nodejs.jp/nodejs.org_ja/

2.weinreのインストール

npmを使用してweinreをインストールします。

npm install weinre

nodo_modules以下にweinreディレクトリが作成されればインストール成功です。

デバッグの準備

1.weinreの起動

以下のコマンドを実行しweinreを起動します。

./node_modules/weinre/weinre

起動オプションについての詳細は以下のページをご参照ください。

http://people.apache.org/~pmuellr/weinre/docs/latest/Running.html

2.スクリプトの埋め込み

デバッグしたいページに以下のスクリプトを埋め込みます。

<script src="[ホスト名]:8080/target/target-script-min.js#dev1"></script>

ホスト名にはweinreが起動しているPCのホスト名、IPアドレスを指定します。
#以降は任意の文字列を指定します。

3.デバッグコンソールの起動

Chromeで以下のURLを開きます。

http://localhost:8080/client/#dev1

#以降は2で指定した文字列と同じものを指定します。

デバッグ

実機で先ほどのスクリプトを埋め込んだWebページを開き、コンソール画面を見ると以下のようにターゲットに追加されます。URLが緑色になっていればデバッグ可能な状態です。

では、実際にコンソールを操作してみます。
Consoleボタンを選択し、コンソールを開き以下のスクリプトを実行してみると実機の情報が出力されます。

console.log(window.navigator.userAgent);

Elementsタブを開けばCSSもデバッグできます。サポートしていないCSSのクラスやプロパティを指定しようすると警告表示となります。

おわりに

以上のように、weinreを利用することで、PCから各デバイスのブラウザ上のWebページをデバッグすることができます。
専用のデバッグツールほど高機能ではありませんが、手っ取り早くCSSのサポート状態を確認したり、作成したCSSの動作確認をする時などに利用できるのではないかと思います。
また、クラウド上の検証サービスで実機をレンタルしてリモートデバッグしたり、ハイブリッドアプリケーションのデバッグも可能かと思います。

GoogleCodeからGitHubへの移行

2012年9月30日 BY DiceK Mikami | コメントをどうぞ

これからはソーシャルコーディングの時代です(ｷﾘｯ

冷やし中華は終わりを迎える時節ですが、ソーシャルコーディングをはじめました。
ソーシャルコーディングと言えばGitHubなのですが、既存資産をGoogleCodeなどで管理していた場合、なかなか移行の手間とか覚えなければならないことが増えたりとかで二の足を踏んでしまいますよね？
ですが、ここは思い切ってやってしまおうと言うのが今回の趣旨です。
今回はGooleCodeからGitHubに移行する手順をテーマにしたいと思います。
　
　

検証環境

OS: Mac OSX 10.8.2 Moutain Lion
Java: JDK1.6.0_33 64bit
Git: 1.7.10.2
　
　

リポジトリの移行

GitHubはその名の通りGitリポジトリですが、GoogleCodeはSubversion、Mercurial、GitといくつかのSCMの中から選択することができます。
今回は中央管理型SCMから分散型SCMへの移行、SubversionからGitへの移行に焦点を当てたいと思います。
SubversionとGitでは、若干その管理スタイルが異なります。
ですので、Git-SVNと言ったツールが必要となります。
Git-SVNは、Gitをインストールする際に、+svnオプションを付けることでGitと同時にインストールできると思います。
　

1. authour.txtの作成

authors.txtによってGoogleCodeアカウントとGitHubアカウントを紐づけます。
この紐付けがうまくいっていないとエラーになってしまいます。

// authors.txt
hogeta hogeo = hogeta hogeo <hogeo@gmail.com>
(no author) = hogeta hogeo <hogeo@gmail.com>

左辺がGoogleCodeのアカウント名、右辺がGitHubアカウントになります。
(no author)はGoogleCodeが勝手に作成するものですので、これの紐付けも必要になります。
移行するにはGitHubのアカウントが必要になるのがネックです。
チームで利用していた場合、チームを抜けた人などにもお願いする必要があります。
　

2. GitHubにリポジトリを作成

移行するための箱を用意する必要があります。
GitHubのWeb画面からリポジトリを作成します。
　

3. Git−SVNで変換

git svn clone -s -A ./authors.txt ＜GoogleCodeのチェックアウトURL＞ repo
cd repo/
git remote add origin git@github.com:＜GitHubアカウント名＞/＜GitHubリポジトリ名＞
git push origin master

ローカルにソースコードをチェックアウトするときにGit-SVNで変換を行っています。
この時、repoディレクトリにチェックアウトしたコードが格納されます。
authours.txtの紐付けができていない場合、チェックアウト時にエラーを吐きますので、GitHubに作成したリポジトリの箱はまだ汚れません。
　

4. ブランチとタグを切る

GitHubにプッシュしただけでは、既存のブランチ情報やタグなどはGitHubには反映されていません。
ですので、ブランチなどをここで用意しましょう。

// ブランチの作成
git branch -r
git branch <新しく作るブランチ名> <-rで確認したブランチ名> 
git push origin <ブランチ名>

// タグの作成
git branch -r
git checkout <タグ名>
git tag  <タグ名>
git push --tags origin

ブランチの切り方は若干ややこしいかと思います。
引数としてが正確です。
タグもブランチと同じ方式で切れるのですが、私の環境では上記方法でも問題ありませんでした。
　
　

チケットの移行

GitHubは、Issue Trackerも備えています。
若干というかかなり使いにくいのですが、折角なのでGoogleCodeで管理していたチケットも移行してしまいます。
ですが、ここで問題があります。
チケットを移行する仕組みがAPIしかありません。
また、GitHub API V2.0に対応しているツールはたくさんあったのですが、現在はGitHub API V3.0＆OAuth2です。
仕方ないので、node.jsを使ってサクッと作りました。
GoogleCode Issue Import

使い方はリンク先を見ていただくとして、これでリポジトリとチケットの移行ができました。
結構簡単にできるものです。
これを機に、皆様もソーシャルコーディングはじめてみませんか？
　
　

参考URL

GitHub
Do Ruby! 「SourceForge.JPのプロジェクトをSubversionからGitへ移行する」
infoScoop(GitHub)

[Windows]node.js(0.8)+express(3.0)+ejs+socket.ioを使ったサンプルアプリを動かすまでのメモ

2012年7月27日 BY aknishi | 1件のフィードバック

調べる機会があったのでメモ。

expressが3になってから微妙に仕様が変わっているようで、過去のサンプルが動かなかったりしたのでまとめておきます。

以下環境。

Windows XP
node.js(0.8.4)
express(3.0.0rc1)
socket.io(0.9.8)

node.jsのダウンロード・インストール

公式サイトからWindows Installerをダウンロード。インストーラを起動します。

やることはライセンスに同意するだけ。インストール先を選ぶ余地もありません。

コマンドプロンプトで以下を入力し、インストールされたことを確認します。node.exeは環境変数pathに勝手に追加されています。

> node -v

v0.8.4

expressのインストール

コマンドプロンプトで以下を入力。最新版がインストールされます。-gを忘れずに。

> npm install express -g

以下のコマンドでインストールされたことを確認します。

> express –version

3.0.0rc1

バージョンを指定したい場合は、express@バージョンのように指定してやるといいです。

expressでアプリの雛形を作る

どこか適当なディレクトリに移動し、コマンドプロンプトで以下を入力。アプリケーションの雛形が作成されます。

> express -tejs mynodeapp

-tejsは、使用するテンプレートエンジンの指定です。HTMLライクに書けるejsを指定しています。（デフォルトはjade）

-tとejsの間にスペースは入れないでください。スペースが入るとjadeになります。どうもこれはWindowsだけっぽい。

mynodeappは作成するアプリケーション名です。

利用するnodeモジュールのインストール

mynodeappフォルダに移動し、コマンドプロンプトで以下を入力。アプリで利用するモジュールをインストールします。

mynodeapp > npm install express ejs socket.io

socket.ioはここでインストールされます。

サンプルアプリの作成

この時点でアプリを起動可能ですが、Welcome to Express!しか出ない味気ものなのでサンプルアプリを作ってみます。まあよくある簡単なチャットアプリです。

以下の2ファイルを修正します。

mynodeapp/app.js

/**
* Module dependencies.
*/
var express = require('express')
, routes = require('./routes')

//*************(中略) *************//

/* コメントアウトします
http.createServer(app).listen(app.get('port'), function(){
 console.log("Express server listening on port " + app.get('port'));
});
*/

/** 以下を追記します **/
var server = http.createServer(app).listen(app.get('port'), function(){
console.log("Express server listening on port " + app.get('port'));
});
var socket = require('socket.io').listen(server);
socket.on('connection', function(client) {
 client.on('message', function(event){
   // クライアントからのメッセージをコンソールに出力
   console.log(event.message);
   // 送信元へメッセージ送信
   client.emit('message', event.message);
   // 送信元以外の全てのクライアントへメッセージ送信
   client.broadcast.emit('message', event.message);
  });
});

mynodeapp/views/index.ejs

<!DOCTYPE html>
<html>
<head>
<title><%= title %></title>
 <link rel='stylesheet' href='/stylesheets/style.css' />

 <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
 <script type="text/javascript" src="/socket.io/socket.io.js"></script>
 <script>
 $(function(){
 var socket = new io.connect("/");

 socket.on("connect", function(){
 $("#transportName").text("connect via " + socket.socket.transport.name);// 接続時に接続方式表示
 });

 socket.on("message", function(message){
 $("<li>").text(message).prependTo($("#messageArea ul"));// 受信メッセージをレンダリング
 });

 $("#submitButton").click(function(event){
 socket.emit("message", {message: $("#msg").val()});// 入力メッセージをサーバへ
 });
 });
 </script>
 </head>
 <body>
 <div id="transportName"></div>
 <input id="msg">
 <input id="submitButton" type="button" value="submit!">
 <div id="messageArea">
 <ul></ul>
 </div>
 </body>
</html>

サンプルアプリを動かす

mynodeapp直下で、コマンドプロンプトから以下を入力。アプリが起動します。

mynodeapp > node app

ポート3000で起動するので、ブラウザで http://localhost:3000 にアクセスします。

動いた

他のブラウザから参照しても入力メッセージが表示されるはず。

その他

express 2.5と違ってlayout.ejsが消えてる。部分テンプレートはexpress-partialsモジュールを使うらしい
node.jsのホスティングサービスまわりをちょっと調べているので、次はそれを書くかも。