2012年12月27日木曜日

[Node.js] homebrewからインストールしてみる

以前にもいろいろ書いたけど、Node.jsのバージョン使い分けとか考えなければhomebrew使うのが楽そう。

こんな感じですかね

  1. homebrewのインストール

    ターミナルで以下のコマンドを実行する
    ruby -e "$(curl -fsSkL raw.github.com/mxcl/homebrew/go)"
  2. Node.jsのインストール

    ターミナルで以下のコマンドを実行する
    brew install node
    source ~/.bashrc
      

これだけ。簡単! npmも一緒に入っているはず。

2012年11月27日火曜日

[JavaScript]Objectをループしたい時はObject.keys()が便利

Objectをループで回す時はfor ~ inを使うのが定番だけど、そのままだとオブジェクトのプロトタイプをさかのぼってすべてのプロパティを見てしまうのでちょっとした工夫が必要になる。
こんな感じ。
var hoge = {
  a: 'paramA',
  b: 'paramB'
};
for (var key in hoge) {
  if (hoge.hasOwnProperty(key)){
    console.log(key + 'is property of hoge!');
  }
}

これだとループの中で毎回hoge.hasOwnProperty()が呼び出されるので、ちょっと遅くなってしまう。
そこで、Object.keys()の出番である。
Object.keys()は引数に渡したオブジェクトのプロパティだけを配列で返してくれる。
使い方はこんな感じ。

var hoge = {
  a: 'paramA',
  b: 'paramB'
};
var hogeKeys = Object.keys(hoge);

for (var i = 0, len = hogeKeys.length; i < len; i++) {
    console.log(hogeKeys[i] + 'is property of hoge!');
}

この方法だとループの中でhoge.hasOwnProperty()を呼ばなくていいからちょっと早い。

2012年10月9日火曜日

GitHubでレポジトリを削除

レポジトリを削除しようとしてちょっと迷ったのでメモ。 

1. レポジトリに移動して「Admin」をクリック



  2. 下の方にスクロールして「Danger Zone」>「Delete this Repository」をクリック


  -ポップアップするダイアログには、「削除したら元には戻せないよ!」と書いてあります。wikiもissuesも何もかも消えるので注意してください。

 3. レポジトリの名前を入力して、「I understand the consequences, delete this repository」をクリック


以上です。

2012年7月12日木曜日

第31回 HTML5とか勉強会 JavaScript MVCフレームワーク まとめ


第31回 HTML5とか勉強会に参加してきました。
そこでメモっておいたことをまとめたので紹介します。

テーマ:JavaScript MVCフレームワーク

アジェンダ

  • MVCフレームワークの紹介
  • 全員参加の座談会:40分 モデレータ:新野淳一さん(publickey)
  • 質疑応答など10分

togetterのまとめ: http://togetter.com/li/336924

MVCフレームワークの紹介

Backbone.js

実績:LinkedIn、FourSquare
なんでもかんでもMVCが必要というわけではない(?)
underscore.jsに依存 → ユーティリティライブラリ、単体でも便利
Backbon.View, Model, CollectionはすべてBackbone.Eventsを継承
データの同期にRESTfulAlAPI
backbone.io:node.jsとsocket.ioでサーバサイドと連携。リアクティブプログラミング可能
Simpleなのでソースコードを読めばいろいろ解決することが多い

Spine.js

backbone.jsにインスパイアされて作成された。
「ステートフルJavaScript」の著者が作成。
現在のSpine.jsはCoffeeScriptでの開発が前提
CSSはStylus
■特徴
  • Simple: シンプルなMVCアーキテクチャ
  • Lightweight: 依存ライブラリなし。ただしjQueryかZepto.jsの使用を推奨
  • CoffeeScript: CoffeeScriptは簡潔でわかりやすい。(class型のオブジェクト指向なのでJava系の言語使ったことある人には○)
spine.appでプロジェクトのひな形を作成可能
hemでローカルサーバ構築、ホットデプロイで簡単にデバッグ可能
CoffeeScriptとStylusをビルドして、application.jsとapplication.cssを作成 → jsとcssが各一つなのでhtmlヘッダがすっきり
ModelはStorage機能を併せ持つ。簡単にlocalStorageとServerの切り替えが可能
Railsと相性がいい

Ember.js

SproutCoreがベース(AppleがMobileMeとかで利用してた)
Models: アプリケーションのデータ構造を表現。Model動詞の関連を含む
Views: handlebar.jsというテンプレートエンジンを利用。高速。イベントハンドリングとDOMのアップデート
Controllers: オブジェクトリスト(Modelオブジェクト)の管理
StateManager: 各MVCパーツのミディエータ。アプリの地図。ナビゲータ
■特徴
  • 同じようなコードを書かない
  • 標準的なアプリ構造を提供
    • 双方向のバインディング (Model <-> View)
    • 関数をプロパティのように扱う
    • 自動で更新するテンプレート

Angular.js

実績: doubleclickのどこかに使われている
初めての人にも手が出しやすい
双方向データバインディング(MDV: Model Driven View)
DOM構造と直感的に結びつくControllerの継承関係
JasmineやJsTestDriverでテストしやすい作り
i18nに対応
HTMLセントリックの開発(ライブコーディングしてたけど、JSはほとんど書かなかった)
Controllerの中に定義するプロパティはすべてModel
ng-hogeの「ng」はA"ng"ular

座談会

フレームワークを利用して、アプリケーションは遅くならないか?

backbone,js: 軽量なので感じない。EventをDelegateしないでDOMに直接アタッチしたりすると重くなるかも
Spine.js: 軽量なので感じない。通信は非同期で行われるので、ストレスはない
Ember.js: ライブラリ自体が重いので、ロードに時間がかかる。
               小さなサービスでは使わないほうがいいかも。ただ、生のJavaScriptよりは遥かに整理して書けるため、大規模アプリでは利点の方が大きい。
Angular.js: 自分のアプリをAngular.jsで書きなおしてみたが、ちょっと遅くなった気が…
Ember.jsやAngular.jsは生産性重視

UIバインディングの利点?

UIバインディング有(Angular.js / Ember.js): 理解しやすい。コード量が減る
UIバインディング無(Backbone.js / Spine.js): 自分でテンプレートエンジンを選んだり書いたりできるので、バインディングの仕組みが理解しやすいし、カスタマイズしやすい。

他のライブラリとの組み合わせは?

backbone.js: jQuery (あるいはZepto.js等jQuery互換のもの)推奨。テンプレートエンジンはなんでも
Spine.js: jQuery (あるいはZepto.js等jQuery互換のもの)推奨。テンプレートエンジンはなんでも
Ember.js: jQueryが利用されることが多い。しかしZepto.js等jQuery互換のものも使える。なくても大丈夫。
               jQueryは主にフレームワークに含まれていないAjax機能を利用。
Angualr.js: フレームワーク自体にjQ-liteというjQuery互換のライブラリが含まれている。
                ただ、外部からjQueryを読み込むとそちらでオーバーライドされる。

Modelとサーバの連携は?

Angular.js: サーバとは疎結合。httpサービス使って自分で
Ember.js: railsと相性いい
Spine.js: RESTfull
Backbone.js: backbone.syncを使ってRESTfullに。
railsと相性いい。backbone.ioを使ってnode.jsともいける。

質疑応答

チームで使う時の生産性とか学習曲線とか

backbone.js: MVCがわかってればおk
Spine.js: CoffeeScriptの知識が必要。シンプルなので、フレームワーク自体はわかりやすい
Ember.js: ルールがわかるまでちょっと時間かかるが、わかれば複数人でも生産性上がる
Angular.js: いろいろ簡単にできるが、複雑なことをやろうとすると難しいかも。
                分業はしやすいのではないか。(html作る人、コントローラ作る人、みないな?)

ドキュメントやコミュニティは?

Angular.js: ドキュメントは充実しているが、英語。
                サンプルはかなり充実している。
                 英語のコミュニティは活発。日本語のコミュニティも作られる、かも…?
Ember.js: コミュニティはGithubで活発。
               ドキュメントは少ない。ソースコード読め。
Spine.js: ドキュメントは充実しているが、英語。
Backbone.js: ドキュメントは英語。
                    コミュニティは英語のみだが活発。
                    小さいフレームワークだからソースコード読むのが一番

スマートフォン向けに使えるか?

Angular.js / Ember.js: ライブラリ自体が大きいため、読み込みに時間がかかってしまう。
                                スマートフォンはあまり考慮されていない
Spine.js: Spine mobileというスマートフォン向けライブラリがある
Backbone.js: 特に何も用意されていない。しかし、jQueryではなくZepto.jsを使えば、backbone.js自体も軽量なので良い感じなのでは?
------------------------------------------------------------------------
以上です。
最近はスマートフォン向けのサービスを作っているので、Backbone.jsやSpine.jsはいじってみようかなあ、などと思いつつ。

2012年6月27日水曜日

[enchant-js] iPhoneで画面幅からページがはみ出てしまう場合の対処方法

Android/iPhone向けのゲームをenchant.jsで作っていた時にハマったのでメモ。

enchant.jsは自前でviewportを設定し、iPhone4のRetina対応をしようとします。

しかし、ページのサイズを固定したかったり、ページの一部だけをenchant.jsで作りたい時はこの設定が邪魔になります。

私の場合は
<meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=0" />
とhtmlで指定していたにもかかわらず、iPhone上で画面サイズが大きくなりすぎてしまい一日くらい悩みました。
htmlの各要素のサイズは320pxからはみ出てないのに、なぜiPhoneだけ横スクロールしてしまうのか、と。

そこで、強引ではありますがenchant.jsのviewportを設定している部分をコメントアウトして対応しました。こんな感じです。
// enchant.js line 144
var RETINA_DISPLAY = (function() {
    if (navigator.userAgent.indexOf('iPhone') != -1 && window.devicePixelRatio == 2) {
        var viewport = document.querySelector('meta[name="viewport"]');
        if (viewport == null) {
            viewport = document.createElement('meta');
            document.head.appendChild(viewport);
        }
     //↓これをコメントアウト。 viewportはhtml上で設定しているため不要
        //viewport.setAttribute('content', 'width=640px');
        return true;
    } else {
        return false;
    }
})();
もっとスマートな方法はあるでしょうが、とりあえずこれでひとまず解決です。

2012年6月5日火曜日

enchant.jsで画面を自動拡大しない方法

enchant.jsでは画面サイズいっぱいにゲーム領域を表示するのが標準の動作です。
しかし、固定サイズでゲーム領域を表示し、残った部分に普通のHTML要素を表示したい、ということもあるかと思います。
そんな時はhtmlに下記のように記述すればOKです。
<body>
    <div id="enchant-stage">
    </div>

    <!-- ↓任意のhtml -->

</body>
通常はenchant.jsが自動で生成するidが「enchant-stage」のタグを先に書いておくと、コードで指定した通りの大きさでゲーム領域が表示されます。

2012年3月14日水曜日

[JavaScript] sleepを擬似的に実装

こんな感じ。
引数はミリ秒。
Dateオブジェクトを利用して、現在時刻がsleepを呼んだ時の日時+引数 を経過するまでループを回す。
ただし画面が固まるので利用する場面はほとんどないんじゃないかな。

function sleep(milliSeconds) {
    var startTime = new Date().getTime();
    while (new Date().getTime() < startTime + milliSeconds);
}

2012年3月6日火曜日

[Node.js] nodebrewで環境管理

前回の記事でNode.jsをnvmという環境管理ツールを使用してインストールしました。
しかし、nvmと私が普段使っているzshの相性が悪いため、なにか代替の環境管理ツールはないかな、と探していました。
そこで本日発見したのが「nodebrew」です。
perlで書かれているためzshでも普通に使えています。

今回はnvmのアンインストールからnodebrewのインストール、node.jsのインストールまで書いてみようと思います。

nvmのアンインストール


ホームディレクトリ直下の[.nvm], [.npm], [.nodejs]フォルダを削除します。
これでnvmやnode.jsの関連ファイルを全削除できます。

nodebrewのインストール


$ curl https://raw.github.com/hokaccha/nodebrew/master/nodebrew | perl - setup

シェルの設定


zshrcにインストールしたnodebrewのパスを追記します。

PATH=$HOME/.nodebrew/current/bin:$PATH

nodeのインストール


現時点での最新版だった0.6.12をインストールします。

nodebrew install v0.6.12


npmは一緒にインストールされるみたいなので、express等モジュール類は簡単にインストールできます。
使用するバージョンの設定はこんな感じ。

nodebrew use v0.6.12

その他


nodebrewのコマンド類は本家githubを参照してください。

hokaccha/nodebrew

2012年2月29日水曜日

[Node.js]Mac OS X Lionにインストールしてみる

すでにたくさん記事はあるけど備忘録として。

とりあえずwgetをインストール。 私はhomebrew使ってるけど、まあMac portsとかそのへんはお好みで。

brew install wget

次にnvm(Node Version Manager)をインストール。

% git clone git://github.com/creationix/nvm.git ~/.nvm
% source ~/.nvm/nvm.sh

sourceのところで

nvm_ls:17:no matches found: vdefault*

とかいうエラーが出ていつも使ってるzshでは先に進めなかった。
そのため一時的にbashに切り替えて実行したところうまくいった。

*後から考えてみると、lsコマンドはエイリアス使ってたからそれが問題だったのかもしれない。


最後にNode.js本体のインストール。
Node.jsの日本語サイトでバージョンを調べ、適当なものを選ぶこと。
今回は安定版のv0.6.11を入れた。

nvm install v0.6.11

上記のコマンドを入力すると、コンパイルが始まるので暫く待つ。
インストール後、バージョンを確認する。

node --version

インストールしたバージョンが表示されれば成功。
あと、.zshrcに以下を追記する。

source ~/.nvm/nvm.sh
nvm use v0.6.11 > /dev/null

これでNode.jsが使えるようになっているはず。

ちょっと調べてみたら、nvmとzshは相性が悪いらしい。
というのも、nvmの作者がbash使いでかつ「自分が使うもの以外は実装しない」という主義だからだとか。
zshにそこまでこだわりがあるわけではないので、bashに戻すのもありかも…

2012年2月11日土曜日

[JavaScript] 秒から時分秒を算出

秒で格納してある値を時分秒で表示したかった。
こんな感じ。

var formatTime = function(seconds) {
    var result = "";
    //時間計算
    var hour = Math.floor((seconds / 60) / 60);
    var min = Math.floor((seconds / 60) % 60);
    var sec = Math.floor(seconds % 60);
    //フォーマット

    if (hour > 0) {
        result += hour + "時";

    }
    if (min > 0) {
        result += min + "分";
    }
    if (sec > 0) {
        result += sec + "秒";

    }
    return result;
}

2012年1月27日金曜日

Macbook Airを買って一週間でインストールしたアプリ

Macbook Air 11in.を購入しました。
今までWindowsのデスクトップしかなかったのですが、今年は勉強会等にも積極的に参加しようと思い、手軽に持ち出せる開発環境を用意しよう、という意図です。
後はMacを使ってみたかった、というのもありますね。
メインPCはWindows7なので使い勝手の比較が楽しいです。

なにはともあれ本題。
購入後一週間でインストールし、常用しているアプリを列挙します。
色々なブロガーさんがやっているのを見て、私もMacbook Airを買ったら書こうと思っていたのです^^

  • Alfred

    コマンドラインランチャーです。
    キーボードのみでアプリケーション起動やら検索やら、なんでもできるので便利です。
    QuickSilverというアプリが有名なようですが、とりあえずこちらを試してます。

  • AppCleaner

    Macはアプリをアンインストールしても、設定ファイルやらが一部残ってしまうそうです。
    ですが、これを使ってアンインストールするとその設定ファイルやらなんやらも良きに計らってくれるとか。

  • Dropbox

    オンラインストレージです。
    Windowsとのファイル共有とか、バックアップとか、色々便利です。

  • Eclipse

    Androidアプリの開発もあるため必須です。
    日本語化プラグイン「Pleiades」を使う際は、eclipse.iniにpleiades.jarのフルパスを記入する必要があります。 相対パスではダメなようです。
    日本語化するとメモリを大量に消費するので、出来る人は英語で使うことをオススメします。

  • Evernote

    言わずと知れたオンラインメモサービス。
    色々な情報を貯めこんで、ライフログと化してます。
    整理できてませんけどねー…

  • Google Chrome

    メインで使っているWebブラウザなので、これがないと始まりません。

  • Google Japanese Input

    標準のことえりがおバカさんなのと、Windowsでもメインで使ってるため変更。
    これがフリーっていうのはすごいです。
    後はPC間でのユーザ辞書同期があれば…

  • iTerm2

    ターミナルエミュレータ。せっかくユニックス系のOSなのでターミナル使いこなせるようになりたいですね。

  • MarsEdit

    ブログエディタです。
    まだあまり使っていませんが、良い感じです。Wordpressの管理画面から書くよりは数倍いいですね。

  • XCode

    主にiPhone Simulator用にインストール。
    スマートフォン向けサイトの動作確認によく使います。

  • 夜フクロウ

    Twitterクライアント。
    Tweenみたいのがあればいいんですけどねー。

とりあえずはこんな感じで。
テキストエディタはまだ色々試している状態なので、そのうちまとめて書きたい。
そのうちiTerm2の設定とかも書けたらいいなあ

2012年1月18日水曜日

[Android] WebViewのJavaScriptとJavaを連携する時に注意したこと

Asus Transformer TF101 Android 3.2.1でWebView使って詰まったことの覚え書き

・console.logの出力
そのままでもlogcatに出力されるはずが出力されず。
調べてみたら、WebChromeClientのonConsoleMessageをオーバーライドすればできるらしい。
こんな感じ。

WebView wv = (WebView)v.findViewById(R.id.webview);
wv.loadUrl("file:///android_asset/www/index.html");
wv.setWebChromeClient(new WebChromeClient(){
    @Override
    public boolean onConsoleMessage(ConsoleMessage cm){
        log.d("hogeActivity", cm.message() + "--From line " + cm.lineNumber() + " of " + cm.sourceId());
        return true;
    }
});

html上でconsole.logが呼ばれたタイミングでこのonConsoleMessageが呼ばれ、logcatにlogを出力してくれる。
cm.message():ログの内容
cm.lineNumber():console.logの呼ばれたhtml上の行番号
cm.sourceId():console.logの呼ばれたファイルパス

・JavaScriptのfunctionをJavaから呼ぶ

wv.loadUrl("javascript:hoge()");

hoge()はhtml上で定義してあるJavaScriptのfunction。

・jQueryのfunctionをJavaから呼ぶ
基本は上と同じ。でも、下のhoge()は呼べない。

$(document).ready(function() {
    function hoge() {
        $(document).text("hello world");
    }
});

どうやら、$(document).ready(function() {}); で囲われた部分のfunctionは呼べないらしい。
まあグローバルメソッドじゃないから当たり前といえば当たり前か…
だから、下記のように囲わないで記述すれば呼ぶことができる。
function hoge() {
    $(document).text("hello world");
}

ていうか、$(document).ready(function() {}); で囲わなくても動くんですね…
EDIT: なんかうまく追加したプラグインがロードできてない…ログを見るかぎりではロードの順序がおかしいみたいだけど。

あ、WebViewのJavaScriptを有効にし忘れないようにー。
wv.getSettings().setJavaScriptEnabled(true);