読者です 読者をやめる 読者になる 読者になる

#! /bin/blog

実行形式のブログです。というか、ほぼポエムです。

私的HTML5モバイルアプリ開発リファレンスまとめ

HTML5 CoffeeScript PhoneGap JavaScript Backbone.js Handlebars SCSS Compass D3.js Require.js

Javascript

JavaScript | MDN

Javascriptjavadocはどこにあるのでしょうか?

CoffeeScript

CoffeeScript

Javaエンジニアなので、CoffeeScriptから入った方が取っ付き易いんです。
CoffeeScriptは、覚えやすいよ。公式サイトのチュートリアルを、ひととり写経すればOK。
へたにJavascriptを覚えようとして、プロトタイプチューンとかで、わかめになるよりCoffeeScriptをやろう。

今更ですけど、複数人で開発するような大きめのアプリだったんですが、
静的型付けのTypeScriptの方にしておけばよかったなと…。

JQuery

jQuery.ajax() | jQuery API Documentation

jQuery.ajax(options) - jQuery 日本語リファレンス

JQueryのDeffered()は、覚えておいて損はない。
(Backbone.jsならイベントチェーンしていけば同じことはできるけど。)
今回、非同期処理で、そうとう苦しんだ。

値のバインディングに、JQueryを使ってしまうようで、Handlebars意味ねっていうコードが多数でた。
値のバインディングはHandlebars、JQueryは装飾とかそういう役割分担をしたほうがいい。

Phonegap

HTML5/JavaScriptとPhoneGapで作るiPhoneアプリ開発入門

HTML5/JavaScriptとPhoneGapで作るiPhoneアプリ開発入門

Handlebar.js

I am mitsuruog: Backbone.jsとHandlebars.jsを組み合わせる
Handlebar.jsを使ったヘルパーの登録 - Surflog 2.0
Overview | Assemble

{{ mustache }}のような、テンプレートエンジン。
Handlebar.jsで値を埋め込むと、HTMLタグをエスケープしてくれる。
JQueryは基本、装飾に使い、値を埋め込みは、Handlebar.jsを使うと、セキュリティー上よい。

ヘルパー関数で拡張できるので、{{ mustache }}より拡張性が高い。

requirejs/text でテンプレを取得する形にした。

Require.js

http://requirejs.org/

Coffeescriptのクラスを、クラス毎にファイルを分けたくて導入。
Require.jsの設定にハマり、JSライブラリの導入にハマり、特に誤字脱字が原因不明すぎて泣いた。

まだ、AMDに対応してないライブラリがまだまだあるし。
分けたモジュールをgruntでconcatするという手法もあるので、今後、スタンダートになるのかどうか?

HTML+SASS

Device and Viewport Size In JavaScript

WebViewのサイズを調べるときに利用しました。
Androidは、iOSとくらべて、小さいっ。

CSS3コードがコピペできる200以上のアイコン集『CSS3 Icons』 | IDEA*IDEA

使わなかった。

Bootstrap
言わずと知れたCSSフレームワーク
グリッドがすごい便利。いろいろ簡単にできて便利。
でも、あまりネイティブアプリっぽいUIがなくて、いまさら後悔している。Topcoatや素直にjQuery Mobileにしておけばよかったかな。

Bootstrap Icons Plus
twitter Bootstrapには、Glyphiconsがあるので結局つかませんでした。

Grunt

Bower

Yo

広告を非表示にする