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フレームワークの紹介
- Backbone.js・・・清水大輔さん（NHN Japan）
- Spine.js入門・・・村田賢一郎さん（Acroquest Technology）
- Playing With Ember.js・・・斉藤祐也さん（サイバーエージェント）
- Angular.js・・・北村英志さんさん（グーグル）
全員参加の座談会：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

スライド: https://speakerdeck.com/u/studiomohawk/p/playing-with-emberjs

SproutCoreがベース(AppleがMobileMeとかで利用してた)

Models: アプリケーションのデータ構造を表現。Model動詞の関連を含む

Views: handlebar.jsというテンプレートエンジンを利用。高速。イベントハンドリングとDOMのアップデート

Controllers: オブジェクトリスト(Modelオブジェクト)の管理

StateManager: 各MVCパーツのミディエータ。アプリの地図。ナビゲータ

■特徴

同じようなコードを書かない
標準的なアプリ構造を提供
- 双方向のバインディング (Model <-> View)
- 関数をプロパティのように扱う
- 自動で更新するテンプレート

ドキュメントの日本語訳
https://github.com/studiomohawk/emberjs-doc-translation/blob/master/ember.js-docs-translation.md

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がわかってればおｋ

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に戻すのもありかも…

登録: 投稿 (Atom)