November 28, 2007
Adobe LabsのSpry Frameworkのサイトを見てたら「Unobtrusive Scripting」という、なんとも発音できない謎の単語があったので探してみたら、羽田野太巳さんの記事が見つかって、そういえばWeb標準の日々のJavaScriptトラックの司会をしてたときに、羽田野さんのプレゼンで、この言葉使ってたんですね。なんと僕は横で聞いてたらしい。
itpro:DOMから始めるJavaScriptモダン・スクリプティングより
そこで，近年，Unobtrusive Scriptingと呼ばれるスクリプティングの考え方が注目されるようになりました。"Unobtrusive"は，"でじゃばらない"，"控え目な"，"つつましい"といった意味を持っています。
詳しくは上記URLを見てもらうとして、簡単に書いておくと、SpryFrameworkとか、はてなスターとか、google mapsとか、みんなそうなんだけど、HTML上になるべくJavaScriptを書かないで、JavaScriptによるリッチな動作を実現する設計方法です。
具体的には、外部に置かれたJavaScriptファイルから、HTMLソースコード上の要素に結びつけるような形で操作する形になります。
例えば、以下は、マイカラメルのログインページで書いているSpryフォーム検査Widgetによるソースコードの抜粋です。
<script src="/user/javascripts/SpryAssets/SpryValidationTextField.js" type="text/javascript" charset="UTF-8"> </script><span id="spryUserName">
<input name="txtUserName" tabindex="1" type="text" id="txtUserName" style="width:170px;" />
<span class="textfieldRequiredMsg">値を指定する必要があります。</span>
<span class="textfieldMinCharsMsg">最小文字数に達していません。</span>
</span><script type="text/javascript">
var sprytextfield1 = new Spry.Widget.ValidationTextField("spryUserName", "none", {isRequired:false});
</script>
span要素のところに、入力フォームの値検査のエラーメッセージが書いてあります。こいつは通常CSSで不可視になっていて、入力エラーが発生したときにSpryフォーム検査WidgetのJavaScriptが自動的に表示に切り替えてくれます。
このソースコードの範囲ではイベントハンドラのようなコードは一切書かれていません。
ややこしいJavaScriptのコードは、Spry Widgetの外部JavaScriptに書いてあります。ここに値を動的に入力をチェックするコードが書かれています。
そして、エラー表示のデザインは外部CSSに定義されています。
ということで、Adobeが作った複雑なJavaScriptを僕らは一切意識することなく、上記のコードだけで動的な入力チェックを組み込むことができます。
このコードで書かれているJavaScriptは、最後の方に書いてある、
・どの要素が入力チェックの対象なのか？
・どういう値チェックをするのか？
という設定だけが書かれています。
つまり、Spryフォーム検査Widgetを導入する場合は、
１．所定の構造spanで囲まれたフォーム要素をHTMLに記述し、発生しうるエラーメッセージを書く。（多分、spanじゃなくても良いかと。）
２．Spryフォーム検査のjavascriptを読み込む処理を書く。
３．フォームとエラーチェック内容とを結びつけるJavaScriptコードを一行書く。
以上で完了です。
このような設計で作られているJavaScriptのメリットは、
１．HTMLの保守性が高まる。
（特にサーバサイド生成がシンプルになる）
２．JavaScriptオフのブラウザで動作できるように作れる。
（少なくともJavaScriptがオフだと何も表示されないようなものは作らないようになる。）
３．JavaScriptの再利用が容易になる。
と、昔々、VBあたりで言われていたコンポーネント志向を思い出しました。サーバサイドですが、ASP.netのコードビハインドもこういう考え方ですかね。
さらにWebらしいメリットとしては、はてなスターのような外部サービスとして提供されている機能を簡単に組み込めたり、JavaScriptが使えるブラウザ、そうでないブラウザの対応も簡単になります。
AdobeのSpry Frameworkも、この考えで設計されているので、JavaScriptが使えないユーザーには最低限必要なUIを提供し、JavaScriptがオンのユーザーには、リッチインターフェースなUIを提供することができます。
デバイスや、ブラウザのバージョンによって、最低限の動作を確保しつつ、新しいブラウザのユーザーには体験できるレベルに差を付けつることを、「Progressive Enhancement」と呼んだりするようで、羽田野さんの記事にも、Spry Framework1.6のドキュメントにも書いてありました。
こういう設計手法自体は、最近のJavaScriptをいじってる人は、特別に目新しいわけではありませんが、こう明示化されると新鮮に見えるものですね。
Javascriptによるインラインウインドウの研究で書いた、tumblrライクにモバツイッターへ投稿できるブックマークレットのユーザインターフェースで使っているインラインウインドウのJavaScriptでも、そこそこ意識されていると思います。素で作っていたので、ちゃんと意識ができてるわけではないのですが。