スポンサーリンク

Unobtrusive Scriptingは、JavaScriptを「控えめ」「でしゃばらない」スクリプティングするお作法のことです。

Unobtrusive Scriptingでは、JavaScriptをHTMLから分離します。

ウェブページは、3つの概念で成り立っています。
  • 動作
  • 表現
  • 内容
上記のそれぞれを
  • jsファイル
  • cssファイル
  • htmlファイル に分離してコンテンツを作成します。
とすることで、HTMLファイルにJavaScriptがでしゃばらないようにします。

Unobtrusive Scriptingは、ただ単にファイルを分離すればよい、という訳ではありません。例えば、分離していても、JavaScriptでスタイルシートをばりばりいじって(色やスタイル、背景など)しまっていては、動作と表現がJavaScriptに混在してしまいます。


Graceful Degradation

Unobtrusive Scriptingの重要な概念にGraceful Degradationがあります。

ウェブコンテンツは、さまざまなブラウザ(ユーザエージェント)によって表示されます。JavaScriptの動作を前提にコンテンツを作成してしまうと、ブラウザによっては、動作を保証できず、コンテンツが機能(見られないなど)しなくてなってしまいます。

JavaScriptが動作しなくてもいいという「あきらめ」も大事になってきます。そのため、JavaScriptが動作しない場合の代替手段を提供することを考慮するのも大切になってきます。

JavaScriptを使用したときのユーザエクスペリエンスは提供できなくなってしまいますが、最低限必要なコンテンツの表示や機能をすれば、コンテンツの存在意義が確保されます。

Progressive Enhancement

さらに Progressive Enhancementという概念もあります。

<a href="javascript:history.back()" id="backlink">戻る</a>
のようにJavaScriptでブラウザの履歴をたどることができますが、JavaScriptの動作しないクライアントでは、動作をせず、意味を持ちません。

このような場合には、明示的に適当なページにリンクを張り、JavaScriptが動作するときには、clickのイベントをbacklinkに追加してやり、振る舞いを変えてやればいいのです。

JavaScriptが動作しないときは、固定のリンクを提供でき、JavaScriptが動作するときには、柔軟な機能を提供することができます。

スポンサーリンク
スポンサーリンク
 
いつもシェア、ありがとうございます!


もっと情報を探しませんか?

関連記事

最近の記事

人気のページ

スポンサーリンク
 

過去ログ

2020 : 01 02 03 04 05 06 07 08 09 10 11 12
2019 : 01 02 03 04 05 06 07 08 09 10 11 12
2018 : 01 02 03 04 05 06 07 08 09 10 11 12
2017 : 01 02 03 04 05 06 07 08 09 10 11 12
2016 : 01 02 03 04 05 06 07 08 09 10 11 12
2015 : 01 02 03 04 05 06 07 08 09 10 11 12
2014 : 01 02 03 04 05 06 07 08 09 10 11 12
2013 : 01 02 03 04 05 06 07 08 09 10 11 12
2012 : 01 02 03 04 05 06 07 08 09 10 11 12
2011 : 01 02 03 04 05 06 07 08 09 10 11 12
2010 : 01 02 03 04 05 06 07 08 09 10 11 12
2009 : 01 02 03 04 05 06 07 08 09 10 11 12
2008 : 01 02 03 04 05 06 07 08 09 10 11 12
2007 : 01 02 03 04 05 06 07 08 09 10 11 12
2006 : 01 02 03 04 05 06 07 08 09 10 11 12
2005 : 01 02 03 04 05 06 07 08 09 10 11 12
2004 : 01 02 03 04 05 06 07 08 09 10 11 12
2003 : 01 02 03 04 05 06 07 08 09 10 11 12

サイト

Vim入門

C言語入門

C++入門

JavaScript/Node.js入門

Python入門

FreeBSD入門

Ubuntu入門

セキュリティ入門

パソコン自作入門

ブログ

トップ


プライバシーポリシー