[pushState] jquery.pjaxなクライアントとExpress4＋ECTなサーバサイドのWebアプリサンプル

jquery.pjaxとは、ブラウザ履歴をプログラムから操作できるHTML5のAPI「pushState」を便利に実装したjqueryプラグインです。ajaxを使ったWebアプリでは、画面遷移が発生しないのでサクサク動くというメリットがある反面、画面が変化してもURLが変わらないためにSEOで不利というのがデメリットでした。しかしHTML5のpushStateのお陰でそのデメリットもやっと解消されることになりました。jquery.pjaxを使えば、pushStateを簡単に使うことができます。
今回ご紹介するのは、jquery.pjax.js (クライアントサイド) と express4 (サーバサイド) を使ったpjaxなWebアプリの超簡単なサンプルです。

[HTML5] pushStateでajaxアプリでもブラウザ履歴を使ってみるサンプル

pushState はブラウザに履歴を追加するHTML5のAPIです。pushState を利用すれば、ajaxを多用しているページでもブラウザの「戻る」「進む」ボタンを使って自然な履歴操作を実現することができます。
以下は pushState を利用して擬似的な画面遷移を実現するサンプルアプリです。

[HTML5] オートコンプリートな入力ボックス

オートコンプリートな入力ボックス（サジェスト機能）は、HTML5の datalist タグを使うことで簡単に実現できます。

PolymerをHelloWorld！

Polymer は HTML5 Web Components のGoogle実装です。
Polymerを使えば、HTMLのコンポーネント化（部品化）が簡単に行なえます。部品化することで、デバイスの画面サイズに依存しないレスポンシブ・デザインも容易になります。
Polymerの導入はとても簡単です。
まずは下の簡単なサンプルでPolymerのエッセンスをつかんでみましょう。

[HTML] DOM変更イベントを検知する方法

ついつい忘れやすいのでメモ。

[HTML5]IndexedDBでCRUDするサンプル

HTML5標準APIのIndexedDBでCRUDを理解するための簡単なChromeアプリです。

[HTML5]Web Speech APIの簡単なサンプル

Web Speech APIは、HTML5の仕様の一つで、人間の言葉を認識させるためのAPIです。今のところChromeブラウザにしか実装されていませんが、とても将来性のあるAPIの一つだと思います。覚えておいて損はないでしょう。
下記はWeb Speech APIを使うための簡単なサンプルです。

レスポンシブ・ウェブデザイン：一つのHTMLで複数のデバイス画面に対応させよう

PCやスマホ、タブレットといった画面サイズの違うデバイスごとに最適なWebページを作るのは非常に骨の折れるものです。さらにそれをメンテナンスするとなると労力は何倍にもなります。なるべく労力を減らすためにはどうすれば良いでしょうか。
その答えの一つとして、レスポンシブ・ウェブデザインを意識したWebデザインが考えられます。