JavaScriptでUnobtrusive Scripting
スポンサーリンク
Unobtrusive Scriptingは、JavaScriptを「控えめ」「でしゃばらない」スクリプティングするお作法のことです。
Unobtrusive Scriptingでは、JavaScriptをHTMLから分離します。
ウェブページは、3つの概念で成り立っています。
Unobtrusive Scriptingは、ただ単にファイルを分離すればよい、という訳ではありません。例えば、分離していても、JavaScriptでスタイルシートをばりばりいじって(色やスタイル、背景など)しまっていては、動作と表現がJavaScriptに混在してしまいます。
Graceful Degradation
Unobtrusive Scriptingの重要な概念にGraceful Degradationがあります。
ウェブコンテンツは、さまざまなブラウザ(ユーザエージェント)によって表示されます。JavaScriptの動作を前提にコンテンツを作成してしまうと、ブラウザによっては、動作を保証できず、コンテンツが機能(見られないなど)しなくてなってしまいます。
JavaScriptが動作しなくてもいいという「あきらめ」も大事になってきます。そのため、JavaScriptが動作しない場合の代替手段を提供することを考慮するのも大切になってきます。
JavaScriptを使用したときのユーザエクスペリエンスは提供できなくなってしまいますが、最低限必要なコンテンツの表示や機能をすれば、コンテンツの存在意義が確保されます。
Progressive Enhancement
さらに Progressive Enhancementという概念もあります。
このような場合には、明示的に適当なページにリンクを張り、JavaScriptが動作するときには、clickのイベントをbacklinkに追加してやり、振る舞いを変えてやればいいのです。
JavaScriptが動作しないときは、固定のリンクを提供でき、JavaScriptが動作するときには、柔軟な機能を提供することができます。
Unobtrusive Scriptingでは、JavaScriptをHTMLから分離します。
ウェブページは、3つの概念で成り立っています。
- 動作
- 表現
- 内容
- jsファイル
- cssファイル
- htmlファイル に分離してコンテンツを作成します。
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が動作するときには、柔軟な機能を提供することができます。
スポンサーリンク
スポンサーリンク
いつもシェア、ありがとうございます!
もっと情報を探しませんか?
関連記事
最近の記事
- パナソニック ジェットウォッシャードルツ EW-DJ61-Wのホースの修理
- LinuxセキュリティモジュールIntegrity Policy Enforcement
- アマゾンのEcho Show 5を買ったのでレビューします
- アマゾンのサイバーマンデーはAlexa Echo Show 5が安い
- Android スマートフォン OnePlus 7T と OnePlus 7の違い
- Android スマートフォン OnePlus 7 をAndroid10にアップデートしてみた
- クレジットカードのバーチャルカードの比較のまとめ
- 活動量計 Xiaomi Mi Band 4を買ってみたのでレビュー
- Android スマートフォン OnePlus 7 のレビュー
- AliExpressでスマートフォンを買い物してみた
- パソコンのホコリ対策 レンジフードフィルターと養生テープ
- 80PLUS GOLDのPC電源ユニットAntec NeoEco 750 Goldのレビュー
- イギリスの付加価値税 VAT は払い戻しを受けられる
- イギリスのロンドンでスーツケースなど荷物を預けられる場所は
- イギリスのロンドンで地下鉄やバスに乗るならオイスターカードを使おう
- イギリスのヒースロー空港からロンドン市内への行き方
- 航空便でほかの航空会社に乗り継ぎがある場合のオンラインチェックイン
- SFC会員がANA便ではなくベトナム航空のコードシェアを試して解ったこと
- ベトナムの入国審査でeチケットの掲示が必要だった話
- シアトルの交通ICカードはオルカカード(Orca)です
人気のページ
- Windows7 IME 辞書ツールで単語の登録に失敗しました
- C言語 popen()でコマンドを実行して出力を読み込む
- Windows7で休止状態にする方法
- CentOS MySQLの起動、停止、再起動
- loggerコマンドでsyslogにエラーを出力する方法
- パソコンパーツの買取をしてくれる店のまとめ
- Java Mapの使い方 get(),put(),remove(),size(),clear()
- 楽天のRポイントカードを作ってみた
- iPhone 5 から iPhone 6 に乗り換えたのでレビュー
- netstatコマンドのステータスの意味
スポンサーリンク
過去ログ
2020 : 01 02 03 04 05 06 07 08 09 10 11 122019 : 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