JavaScript
以前 Konacha を導入してから、 Rails アプリの JavaScript コードをテストできるようになった。 Evergreen を導入したばかりだけど Konacha に移行した JavaScript コードの大半は、Backbone を使って実装した UI なんだけど、 困ったことに View のテスト…
ネタ元はこちら。 クライアントサイド JavaScript のパフォーマンス改善には backburner.js が便利！ - tricknotesのぼうけんのしょ 自分の場合、Web アプリの UI を開発するときって、たいてい Backbone 使っている。 この Backbone が依存している Undersc…
Backbone でモバイル版の UI を作っていて、 Facebook や Gmail の iPhone アプリみたいな、 スライド表示されるメニューを実装したくなった。 そういったメニューを実装するための jQuery プラグインは既にいくつか存在していて、 Sidr - A jQuery plugin f…
Sencha Touch の Model を Store を使って、 Web API からデータを取得する方法をメモしておく。 まず、次のようなモデルを定義したとする。 Ext.define("App.model.Post", { extend: "Ext.data.Model", config: { fields: [ { name:"name", type:"string" }…
Twitter Bootstrap はレスポンシブ Web デザインをサポートしているから、 小さい画面ではナビゲーションバーのメニューが隠れて、代わりにボタンが表示される。 このボタンをタップするとメニューがドロップダウン(?)表示されるんだけど、これ好みじゃない…
Backbone.js で Model や Collection や Router の URL を組み立てるのに、 C# でいうところの string.Format みたいなメソッドが欲しいけど、 今のところ Backbone.js にも Underscore.js にも無い。 その代わりといっては何だが、『Underscore.string』と…
Web アプリにショートカットを実装したくて、ライブラリを探していたら、良いの見つけた。 『Mousetrap』。 ccampbell/mousetrap JavaScript でショートカットを実装するライブラリでは shortcuts.js が有名だけど、後発の Mousetrap は shortcuts.js と同等…
はじめに Rails で JavaScript を国際化するには、『i18n-js』という gem を使う。 fnando/i18n-js 自分が作っている Web アプリでそこまでやる必要性は無いかもしれないけど、 国際化せずに直接 HTML や JavaScript のメッセージに日本語を書き込むのは、何…
Rails で AngularJS を使おうと、angular-rails や angularjs-rails といった gem を調べてみたけど、どれもイマイチだったんで vendor/assets/javascripts 下に AngularJS ファイル一式を放り込んで開発している。 AngularJS のデータバインディングを活用…
先日 AngularJS のルーティング機能を試したけど、サンプルではモデルをコントローラーごとに作成していた。でも、プロダクトコードだとコントローラーやモデルは再利用しやすいように、AngularJS のモジュールにするはず。特にモデルは。そういうわけで、モ…
AngularJS を使って Single Page Application を作成するなら、おそらく避けて通れないのがルーティング機能。例えば一覧と編集でビューを切り替えたい場合、ルーティング機能を使ってコントローラーとテンプレートを切り替えて描画する、はず。先日作成した…
AngularJS で Web API を呼び出すのに使う $resource が、ドキュメントを読んだだけじゃイマイチ分からなかったんで、簡単なサンプルを書いてみた。まず、呼び出す対象の Web API は Sinatra でさくっと作成。 # coding: utf-8 require "sinatra" require "j…
AngularJS ではコントローラーを入れ子にして、ng-repeat で処理するコレクションの要素１つ１つに子コントローラーをバインドすることができる。例えば、よく見かける ToDo アプリのサンプルだとこんな感じ。 <html ng-app> <head> <meta charset="utf-8"> <title>Angular Sample</title> <style type="text/css"> .done-true { text-decora</style></meta></head></html>…
公式サイトからダウンロードできる pkg ファイルは簡単に Node をインストール出来ていいんだけど、残念なことにアンインストール手段が提供されていなかった…。手動で削除するしかないかと諦めて、何を削除すればいいのかネットで調べたところ、gist で削除…
自分が jQuery Mobile と Backbone.js を組み合わせて使うときって、jQuery Mobile のデザインやウィジェットが使いたいだけで、ルーティングは Backbone.js でやりたいのがほとんど。例えば List/Detail タイプのアプリを作っていて、URL に含まれている id…
だいぶ前に書いた Backbone.js の入門記事で Backbone.Router を使ったサンプルを紹介した。 作って覚える Backbone.js (2) Router 編 - present Router が表示する View を切り替える良い方法が思いつかなかったので、サンプルではメイン View をグローバル…
jQuery.ajax の動作を差し替えられる jquery-mockjax プラグインは、自分にとって JavaScript での UI 開発に欠かせないプラグインになってしまった。何が気に入っているかっていうと、動的に、しかも簡単にレスポンスを変更できるところ。以前書いた jquery…
はじめに Backbone.js を使って UI を実装しているけど、モデルやビューが増えてきた。1ファイルに収めるには多いんで、ファイルを分割して実装し、最終的には結合したい。そこで、RequireJS を使ってモデルやビューをモジュールにして、ファイルを分割しつ…
Google 製の JavaScript MVC フレームワーク『AngularJS』で、簡単な ToDo アプリのサンプルを書いてみた。 <html ng-app> <head> <meta charset="utf-8"> <title>AngularTodo</title> <script src="http://code.angularjs.org/angular-1.0.1.min.js"></script> <script> // モデル function Todo(text, done) { this.id = Todo.getNextId(); …</meta></head></html>
Backbone.Model の fetch や save はサーバーと通信するけど、データをサーバーではなくローカルにだけ保存したいときがある。例えば PhoneGap でスタンドアロンアプリを作るときとか。localStorage にアクセスするライブラリは、backbone-localstorage って…
PhoneGap で何かスマートフォンアプリでも作ろうかなと思ってネットで調べてたけど、PhoneGap ってデータベースに HTML5 の Web SQL Database を使うのか。Titanium Mobile みたいに独自の API とかじゃないんだね。 Apache Cordova API Documentation Web S…
はじめに JavaScript でテストするためのフレームワークは QUnit と Jasmine が人気を二分していたみたいですが、最近は Jasmine が優勢？雑誌やブログで Jasmine を推しているのをよく見かけました。中には「QUnit はオワコン。これからは Jasmine！」って…
以前、「Knockout.js には Backbone.js みたいなルーティング機能が足りない」みたいなことを書きました。でも、Knockout.js はそもそもルーティング機能を本体で提供する気が無いようだし、Sammy.js や nav.js を併用すればいいかな、ってことで自己解決。……
Knockout.js には text や value など、組み込みでバインディングが一通り用意されています。 Knockout : Introduction これで十分かというと、そんなことはない。組み込みバインディングでは実現できない場面は多々あります。例えば、ビューモデルが持って…
Knockout.js はブラウザの履歴に対応していません。対応するには他のライブラリと組み合わせる必要があります。組み合わせるライブラリは、Knockout.js のチュートリアル Single page applications で使ってある Sammy が有力。なにせ、公式のチュートリアル…
はじめに 前に「Knockout.js は画面を切り替える手段を提供していない」っていうことをブログに書いたら id:iakio tutorialの中にはsammy.jsと連携してブラウザの履歴を使う例がありますね http://learn.knockoutjs.com/#/?tutorial=webmail っていうブクマ…
JavaScript でよくやるおまじないの１つに、即時関数パターンがあります。こんなの。 (function(){ // ... 何かする })(); 自分が書いたコードとライブラリの間で、名前が衝突するのを回避するときに使ってきました。で、ついこの間、enchant.js のソースコ…
先日、Backbone.js と比較しながら Knockout.js を試してみました。 Backbone.js と比較しながら Knockout.js を試してみた - present Knockout.js よりも Backbone.js のほうが多機能だけど、コードの書きやすさは Knockout.js の方が上、というのが個人的…
Backbone.js を試したから Knockout.js にも挑戦 JavaScript のクライアント MVC フレームワークは Backbone.js でいこうと思っていたんですが、Knockout.js が Ver 2.0 でかなり機能追加されて、ちょっと心変わり。もともと Knockout.js のデータバインディ…
jQuery Mobile を使った Web アプリ開発で、 フォームの submit で非同期に POST リクエストを送信 サーバー側でフォームデータを処理した後リダイレクトを返す クライアント側でリダイレクト先にページ遷移 という処理を実装するとき、data-role="page" を…
