12月ですね。
12月と言えば、そう私たち会社人にとって避けては通れない忘年会のシーズンですね。
γ-GTPの上昇には気をつけて!
・・・くりすます?
なんですかそれは?
どうもDiceK Mikamiです。
デジャブ?
ここ最近はGruntを使ってグルグルしています。
(@д@)←こんな状態。
なので、Gruntに関して書いてみたいと思います。
続きを読む
12月ですね。
12月と言えば、そう私たち会社人にとって避けては通れない忘年会のシーズンですね。
γ-GTPの上昇には気をつけて!
・・・くりすます?
なんですかそれは?
どうもDiceK Mikamiです。
デジャブ?
ここ最近はGruntを使ってグルグルしています。
(@д@)←こんな状態。
なので、Gruntに関して書いてみたいと思います。
続きを読む
もう9月ですか。
残暑厳しいかと思いきや、なんだか寒々しい日々ですね。
晴れろ!
どうもDiceK Mikamiです。
続きを読む
スマートフォンやタブレットにもSafari、 Android Browser(Android 標準ブラウザ)、Chorme、IE、FireFoxなどたくさんのブラウザがあります。作成するWebページをそれらのブラウザに対応させるとなると、ブラウザ間でのCSSの動作や表示の違いを修正するために何かと実機でのデバッグ作業が必要な場合がでてくるかと思います。しかし、実際にiOSのSafariでデバッグするのにMacを利用できる環境でなかったり、デバッグツールがないAndroid Browserでデバッグしたい場合などがあると思います。そのような場合には「weinre」というリモートデバッグツールが有用かと思います。
weinreを利用することにより、 Chromeを使ってデバイス上のWebページのリモードデバッグが可能になります。
以下のサイトからnode.jsのインストーラをダウンロードしてインストールします。
http://nodejs.jp/nodejs.org_ja/
npmを使用してweinreをインストールします。
npm install weinre
nodo_modules以下にweinreディレクトリが作成されればインストール成功です。
以下のコマンドを実行しweinreを起動します。
./node_modules/weinre/weinre
起動オプションについての詳細は以下のページをご参照ください。
http://people.apache.org/~pmuellr/weinre/docs/latest/Running.html
デバッグしたいページに以下のスクリプトを埋め込みます。
<script src="[ホスト名]:8080/target/target-script-min.js#dev1"></script>
Chromeで以下のURLを開きます。
http://localhost:8080/client/#dev1
実機で先ほどのスクリプトを埋め込んだWebページを開き、コンソール画面を見ると以下のようにターゲットに追加されます。URLが緑色になっていればデバッグ可能な状態です。
では、実際にコンソールを操作してみます。
Consoleボタンを選択し、コンソールを開き以下のスクリプトを実行してみると実機の情報が出力されます。
console.log(window.navigator.userAgent);
Elementsタブを開けばCSSもデバッグできます。サポートしていないCSSのクラスやプロパティを指定しようすると警告表示となります。
以上のように、weinreを利用することで、PCから各デバイスのブラウザ上のWebページをデバッグすることができます。
専用のデバッグツールほど高機能ではありませんが、手っ取り早くCSSのサポート状態を確認したり、作成したCSSの動作確認をする時などに利用できるのではないかと思います。
また、クラウド上の検証サービスで実機をレンタルしてリモートデバッグしたり、ハイブリッドアプリケーションのデバッグも可能かと思います。
これからはソーシャルコーディングの時代です(キリッ
冷やし中華は終わりを迎える時節ですが、ソーシャルコーディングをはじめました。
ソーシャルコーディングと言えば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と同時にインストールできると思います。
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のアカウントが必要になるのがネックです。
チームで利用していた場合、チームを抜けた人などにもお願いする必要があります。
移行するための箱を用意する必要があります。
GitHubのWeb画面からリポジトリを作成します。
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に作成したリポジトリの箱はまだ汚れません。
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
使い方はリンク先を見ていただくとして、これでリポジトリとチケットの移行ができました。
結構簡単にできるものです。
これを機に、皆様もソーシャルコーディングはじめてみませんか?
GitHub
Do Ruby! 「SourceForge.JPのプロジェクトをSubversionからGitへ移行する」
infoScoop(GitHub)
調べる機会があったのでメモ。
expressが3になってから微妙に仕様が変わっているようで、過去のサンプルが動かなかったりしたのでまとめておきます。
以下環境。
公式サイトからWindows Installerをダウンロード。インストーラを起動します。
やることはライセンスに同意するだけ。インストール先を選ぶ余地もありません。
コマンドプロンプトで以下を入力し、インストールされたことを確認します。node.exeは環境変数pathに勝手に追加されています。
> node -v
v0.8.4
コマンドプロンプトで以下を入力。最新版がインストールされます。-gを忘れずに。
> npm install express -g
以下のコマンドでインストールされたことを確認します。
> express –version
3.0.0rc1
バージョンを指定したい場合は、express@バージョン のように指定してやるといいです。
どこか適当なディレクトリに移動し、コマンドプロンプトで以下を入力。アプリケーションの雛形が作成されます。
> express -tejs mynodeapp
-tejsは、使用するテンプレートエンジンの指定です。HTMLライクに書けるejsを指定しています。(デフォルトはjade)
-tとejsの間にスペースは入れないでください。スペースが入るとjadeになります。どうもこれはWindowsだけっぽい。
mynodeappは作成するアプリケーション名です。
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 にアクセスします。
動いた
他のブラウザから参照しても入力メッセージが表示されるはず。