javascript

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 のついでに使っている段階ですけどね。…

jquery-mockjax 使えよ色々と捗るぞ

jQuery や Backbone.js で UI を開発していて面倒なのが、サーバー側の API を呼び出す部分の実装です。呼び出したい API が既に実装されていないと、細かいところまで作り込めません。あと、上手く動かなかったときも面倒です。原因がクライアント側ならす…

Backbone.js を使った開発で QUnit を試してみた

最近は Backbone.js をよく触っています。Backbone.js を使った場合、そこそこな規模の UI が出来あがるわけで、品質を上げるためにはテストが必要不可欠です。Backbone.js みたいな MVC フレームワークを導入するメリットとしては、「役割がはっきりしてソ…

作って覚える Backbone.js (2) Router 編

モバイル版 Basecamp に使われていると聞いて興味を抱いていた、JavaScript の MVC フレームワーク Backbone.js。Model と View は先日試しました。 作って覚える Backbone.js - present でも、Controller はまだ。「今度試す」といってやらないことが多い私…

作って覚える Backbone.js

Web サービスにリッチな UI を実装したいけど、jQuery だけだとコードがスパゲッティになりそうなので、JavaScript の MVC フレームワークを使うことにしました。候補は Backbone.js と Knockout.js の2つ。どちらも最近はてブで注目を浴びましたね。 Backbo…

秋なので Canvas に絵を描いてみた

朝夕はすごく涼しくなりましたね。むしろ寒いくらいです。もうすっかり秋ですね。秋だけに、絵を描いてみたくなりました。ただし、使うキャンバスは絵画用じゃなく、HTML5 のものですけど。線を引くところから初めて、画像を表示するまで、一通り試したコー…

Pjax を使ってフォームの submit で非同期にページを更新してみた

前回、非常に苦労して Pjax を試しました。 Pjax に挑戦したら思っていた以上に苦労した話 - present ページ移動を非同期で行えるようになったので、次はフォームの submit 後も同じようにページを移動したい、と考えてしまうのは当然ですよね。これも Pjax …

Pjax に挑戦したら思っていた以上に苦労した話

GitHub が採用している、非同期でぬるぬる動く画面遷移、これ pushState と Ajax を組み合わせたテクニックで実現されているんですね。その名も Pjax。HTML5 の history.pushState を使うからブラウザの履歴にも対応でき、しかも URL がキレイ。Pjax につい…

Closure Library 超入門 〜モック編〜

はじめに 例えば、UI ウィジェットを生成して何かしたり、サービスの API を呼び出して何かしたりするコードは、テストが困難です。DOM が変更されたら正しいテストにならない可能性があるし、API 呼び出しで環境が破壊されたら困りますからね。そこでモック…

Closure Library 超入門 〜テスト編〜

はじめに UI フレームワークとかすっとばして、いきなりテストです。Closure Library 使って Web アプリを作るということは、それなりの規模の RIA を作るということ。ちょっとしたやつなら jQuery でいいですからね。それなりの規模の RIA の品質を高めるに…

Closure Library 超入門 〜データソース編〜

はじめに .NET 歴が長いので、データソースと聞くとデータバインドを連想してしまいます。でも残念ながら、Closure Library の UI フレームワークはデータバインドを提供していません。今後に期待。Google Closure のデータソース機能は goog.ds 名前空間で…

Closure Library 超入門 〜イベント編〜

はじめに Closure Library に少しずつ慣れてきたので、自分が覚えたことをブログに整理してみます。Closure Library は機能が多すぎるので、私が使い方を覚えた順番で書いていく予定。まずはイベントから。 Closure Library のイベントの基本 イベント機能は…

Closure Library 導入メモ

jQuery から Closure Library への移行を決意 jQuery は部分的に Ajax を取り入れるのには最適ですが、フル Ajax な Web アプリを開発するのは超大変。目的の UI コンポーネントを探すのも一苦労です。その点、Closure Library は Google の Web サービスで…

RESTViewGroupで生成したAPIを呼び出すためのjQueryプラグイン

Kay Framework の RESTViewGroup や appengine-rest-server を使って生成した RESTful な API を、JavaScript から呼び出すための jQuery プラグインを作ってみました。 (function(){ function Rest(url){ this.url = url; this.filters = new Array(); } Re…

Flickr に保存している写真をブログに貼り付けるためのタグを生成するブックマークレット

最近 Flickr を始めたんですが、保存している写真ををダウンロードしたり、ブログ貼付用タグを取得するのが面倒ですね。写真の詳細ページに移動して、サイズ選択ページに移動して、ってページ移動多すぎ!1枚貼り付けるだけなら我慢できますが、数枚貼り付け…

トラックバック URL を自動入力するグリモン

はてなダイアリーの日記編集画面(詳細)に、トラックバック URL を入力する欄があります。ここに自動で URL を入力する Greasemonkey 用スクリプトを書いてみました。 // ==UserScript== // @name AutoInsertTrackbackUrls // @namespace http://d.hatena.ne.…

もんたプラグイン

もんたメソッドを実現する jQuery プラグインを作ってみました! JavaScript と jQuery の勉強も兼ねて。 JRuby の勉強は、愛機 VAIO type T をリカバリしてしまい、環境がきれいさっぱり無くなったので、また今度。 作成した jQuery プラグインがこちら。 /…

タイマー機能で時間を賢く使うグリモン

下の記事を読んで、つい作ってしまいました>< タイマー機能で時間を賢く使うスクリプト(Mac版) 10分おきに注意してくれるグリモンです。2ch まとめサイトばかり読んでしまって仕事がはかどらない人は使うといいんじゃないかな? // ==UserScript== // @n…

お気に入りへの追加

AddFavorite メソッドで追加できる。ただし IE のみ。 var title = window.document.title; var url = window.document.URL; window.external.AddFavorite(url, title); AddFavorite メソッドの第1引数に渡せる URI はスキームが http か https か ftp のも…

スクロール量の取得と設定

JavaScript の勉強を再開。まず、現在のページのスクロール量を取得してみる。 var obj = new Object(); obj.x = document.documentElement.scrollLeft || document.body.scrollLeft; obj.y = document.documentElement.scrollTop || document.body.scrollTo…

はてなダイアリーの下書きを公開するかどうか確認する Greasemonkey スクリプト

下書きを保存するつもりが、間違って公開してしまう事が多いので、それを防ぐために Greasemonkey スクリプトを書いてみました。 // ==UserScript== // @name ConfirmPublish // @namespace http://d.hatena.ne.jp/griefworker/ // @include http://d.hatena…

Greasemonkey 用ユーザースクリプトのテンプレート

JavaScript の勉強のために、Greasemonkey のユーザースクリプトを書いてみようかな。とりあえず今回はテンプレートだけ用意しておきます。 // ==UserScript== // @name スクリプト名 // @author 作者名 // @namespace 作者のサイトURL // @description スク…

見出しアニメーション

id:amachang の ロケーションバーアニメーション タイトルアニメーション が面白かったんで、JavaScript 未経験ながら試してみました。見よう見まねで(;^_^A「タイトルとロケーションバーが既にあるなら、残るは本文しかない!」というわけで、本文の見出し…