javascript

Sencha Touch の Model と Store の使い方メモ

Sencha Touch の Model を Store を使って、 Web API からデータを取得する方法をメモしておく。 まず、次のようなモデルを定義したとする。 Ext.define("App.model.Post", { extend: "Ext.data.Model", config: { fields: [ { name:"name", type:"string" }…

Bootstrap を使ってデザインしたアプリに Sidr でメニューを作成

Twitter Bootstrap はレスポンシブ Web デザインをサポートしているから、 小さい画面ではナビゲーションバーのメニューが隠れて、代わりにボタンが表示される。 このボタンをタップするとメニューがドロップダウン(?)表示されるんだけど、これ好みじゃない…

文字列を扱う便利メソッドが大量な『Underscore.string』

Backbone.js で Model や Collection や Router の URL を組み立てるのに、 C# でいうところの string.Format みたいなメソッドが欲しいけど、 今のところ Backbone.js にも Underscore.js にも無い。 その代わりといっては何だが、『Underscore.string』と…

Gmail スタイルのショートカ​ットを実装できる『M​ousetrap』

Web アプリにショートカットを実装したくて、ライブラリを探していたら、良いの見つけた。 『Mousetrap』。 ccampbell/mousetrap JavaScript でショートカットを実装するライブラリでは shortcuts.js が有名だけど、後発の Mousetrap は shortcuts.js と同等…

Rails で JavaScript を国際化する

はじめに Rails で JavaScript を国際化するには、『i18n-js』という gem を使う。 fnando/i18n-js 自分が作っている Web アプリでそこまでやる必要性は無いかもしれないけど、 国際化せずに直接 HTML や JavaScript のメッセージに日本語を書き込むのは、何…

AngularJS で Rails の CSRF トークン検証に引っか​かったときの対処法

Rails で AngularJS を使おうと、angular-rails や angularjs-rails といった gem を調べてみたけど、どれもイマイチだったんで vendor/assets/javascripts 下に AngularJS ファイル一式を放り込んで開発している。 AngularJS のデータバインディングを活用…

AngularJS でモデルとコントローラーをモジュール化する

先日 AngularJS のルーティング機能を試したけど、サンプルではモデルをコントローラーごとに作成していた。でも、プロダクトコードだとコントローラーやモデルは再利用しやすいように、AngularJS のモジュールにするはず。特にモデルは。そういうわけで、モ…

AngularJS のルーティング機能を試してみた

AngularJS を使って Single Page Application を作成するなら、おそらく避けて通れないのがルーティング機能。例えば一覧と編集でビューを切り替えたい場合、ルーティング機能を使ってコントローラーとテンプレートを切り替えて描画する、はず。先日作成した…

AngularJS で Web API を呼び出す

AngularJS で Web API を呼び出すのに使う $resource が、ドキュメントを読んだだけじゃイマイチ分からなかったんで、簡単なサンプルを書いてみた。まず、呼び出す対象の Web API は Sinatra でさくっと作成。 # coding: utf-8 require "sinatra" require "j…

AngularJS でコントローラーをネストする

AngularJS ではコントローラーを入れ子にして、ng-repeat で処理するコレクションの要素1つ1つに子コントローラーをバインドすることができる。例えば、よく見かける 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 をアンインストールして nvm でインストールし直す

公式サイトからダウンロードできる pkg ファイルは簡単に Node をインストール出来ていいんだけど、残念なことにアンインストール手段が提供されていなかった…。手動で削除するしかないかと諦めて、何を削除すればいいのかネットで調べたところ、gist で削除…

jQuery Mobile + Backbone.js でルーティングに Backbone.Router を使う方法

自分が jQuery Mobile と Backbone.js を組み合わせて使うときって、jQuery Mobile のデザインやウィジェットが使いたいだけで、ルーティングは Backbone.js でやりたいのがほとんど。例えば List/Detail タイプのアプリを作っていて、URL に含まれている id…

試行錯誤の末にたどり着いた Backbone.Router の使い方

だいぶ前に書いた Backbone.js の入門記事で Backbone.Router を使ったサンプルを紹介した。 作って覚える Backbone.js (2) Router 編 - present Router が表示する View を切り替える良い方法が思いつかなかったので、サンプルではメイン View をグローバル…

jquery-mockjax を使って CRUD 処理をすべてテストする方法

jQuery.ajax の動作を差し替えられる jquery-mockjax プラグインは、自分にとって JavaScript での UI 開発に欠かせないプラグインになってしまった。何が気に入っているかっていうと、動的に、しかも簡単にレスポンスを変更できるところ。以前書いた jquery…

RequireJS と Backbone.js を組み合わせてモデルとビューをモジュール化してみる

はじめに Backbone.js を使って UI を実装しているけど、モデルやビューが増えてきた。1ファイルに収めるには多いんで、ファイルを分割して実装し、最終的には結合したい。そこで、RequireJS を使ってモデルやビューをモジュールにして、ファイルを分割しつ…

AngularJS で ToDo アプリのサンプルを書いてみた

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.js で HTML5 Web SQL Database を使うための backbone-webdatabase を作ってみた

Backbone.Model の fetch や save はサーバーと通信するけど、データをサーバーではなくローカルにだけ保存したいときがある。例えば PhoneGap でスタンドアロンアプリを作るときとか。localStorage にアクセスするライブラリは、backbone-localstorage って…

PhoneGap でも使えるという HTML5 の Web SQL Database を試してみた

PhoneGap で何かスマートフォンアプリでも作ろうかなと思ってネットで調べてたけど、PhoneGap ってデータベースに HTML5 の Web SQL Database を使うのか。Titanium Mobile みたいに独自の API とかじゃないんだね。 Apache Cordova API Documentation Web S…

QUnit はオワコン!?Jasmine を使ってみる

はじめに JavaScript でテストするためのフレームワークは QUnit と Jasmine が人気を二分していたみたいですが、最近は Jasmine が優勢?雑誌やブログで Jasmine を推しているのをよく見かけました。中には「QUnit はオワコン。これからは Jasmine!」って…

Knockout.js にイベント機能を追加するプラグインを作ってみた

以前、「Knockout.js には Backbone.js みたいなルーティング機能が足りない」みたいなことを書きました。でも、Knockout.js はそもそもルーティング機能を本体で提供する気が無いようだし、Sammy.js や nav.js を併用すればいいかな、ってことで自己解決。……

Knockout.js で DOM 要素をバインドするためのカスタムバインディングを作ってみた

Knockout.js には text や value など、組み込みでバインディングが一通り用意されています。 Knockout : Introduction これで十分かというと、そんなことはない。組み込みバインディングでは実現できない場面は多々あります。例えば、ビューモデルが持って…

Knockout.js と Sammy を使って Single Page Application に挑戦

Knockout.js はブラウザの履歴に対応していません。対応するには他のライブラリと組み合わせる必要があります。組み合わせるライブラリは、Knockout.js のチュートリアル Single page applications で使ってある Sammy が有力。なにせ、公式のチュートリアル…

Sinatra ライクな JavaScript フレームワーク『Sammy.js』

はじめに 前に「Knockout.js は画面を切り替える手段を提供していない」っていうことをブログに書いたら id:iakio tutorialの中にはsammy.jsと連携してブラウザの履歴を使う例がありますね http://learn.knockoutjs.com/#/?tutorial=webmail っていうブクマ…

目から鱗が落ちた JavaScript の即時関数パターンの使い方

JavaScript でよくやるおまじないの1つに、即時関数パターンがあります。こんなの。 (function(){ // ... 何かする })(); 自分が書いたコードとライブラリの間で、名前が衝突するのを回避するときに使ってきました。で、ついこの間、enchant.js のソースコ…

jQuery Mobile と Knockout.js を組み合わせてみた

先日、Backbone.js と比較しながら Knockout.js を試してみました。 Backbone.js と比較しながら Knockout.js を試してみた - present Knockout.js よりも Backbone.js のほうが多機能だけど、コードの書きやすさは Knockout.js の方が上、というのが個人的…

Backbone.js と比較しながら Knockout.js を試してみた

Backbone.js を試したから Knockout.js にも挑戦 JavaScript のクライアント MVC フレームワークは Backbone.js でいこうと思っていたんですが、Knockout.js が Ver 2.0 でかなり機能追加されて、ちょっと心変わり。もともと Knockout.js のデータバインディ…

jQuery Mobile でフォームを submit 後にリダイレクトするとロケーションが変わらない

jQuery Mobile を使った Web アプリ開発で、 フォームの submit で非同期に POST リクエストを送信 サーバー側でフォームデータを処理した後リダイレクトを返す クライアント側でリダイレクト先にページ遷移 という処理を実装するとき、data-role="page" を…

jQuery Mobile で動的ページ作成

jQuery Mobile でスマートフォン用ページを作成しているんですけど、スマートフォンからのアクセスかどうかを判断して、サーバー側で生成する HTML を切り替えるのが面倒です。PC 用ページではクライアント MVC を採用していて、PC からのアクセスのときは J…

Backbone.js でレスポンスをキャッシュするプラクティス

Backbone.js を使ってクライアント MVC で実装したとしても、画面遷移のたびにサーバーと通信していては、データが表示されるまで結局ユーザーは待たされます。操作が固まらない、ただそれだけ。それに何度も通信していては、サーバー側に余計な負担もかかり…

Underscore.js はもっと評価されていい

Backbone.js が注目されがちですけど、Backbone.js を支えている Underscore.js も、実はかなり便利なライブラリです。公式サイトを見ると、よさげなメソッドが盛りだくさん。 Underscore.js 私自身はまだ Backbone.js のついでに使っている段階ですけどね。…