PHP & JavaScript Room :: 設置サンプル

実行結果

highlight: JavaScript text higlighting jQuery plugin | 設置サンプル

▼クリックした単語をハイライト表示します。

ハイライト表示を解除する

従来のWebアプリケーションでは、サーバにリクエストを送信後、レスポンスを新たにウェブページとして受け取り画面遷移が発生していたが、Ajaxにより画面遷移を伴わない動的なWebアプリケーションの製作が実現可能になる。例えばWeb検索に応用することで、従来は入力確定後に行っていた検索を、ユーザがキー入力をする間にバックグラウンドで行うことによってリアルタイムに検索結果を表示していくといったことが可能になる。

Webブラウザのみで動作する（別途プラグインを要求しない）、既存の技術の組み合わせであることが特徴。技術自体はこの用語が発生する前から存在していたが、Ajaxという名前が付けられたこと、GoogleがGoogle マップやGoogle サジェストにこの技術を利用したことで有名になり、Webアプリケーションの可能性を広げるものとして注目され始めた。さらに、Googleでは、デスクトップアプリケーションと遜色のない電子メールクライアントであるGmailやGoogle Calendarでも積極的にAjaxを採用し、Ajaxの実用性がGoogleのWebアプリケーションを通じて世間に認知されはじめている。

AjaxによるWebプログラミング（Webアプリケーション製作）が注目されだした背景には、この従来のページ遷移のみに頼ったWebの使い勝手の悪さに対する不満や、XML、DOMなどのWeb関連技術の標準化（ウェブ標準）、および高い機能を持ったWebブラウザの普及などが挙げられる。

また、ダウンロード型アプリケーションは、マニア層から先に広がりにくい、競合がOSメーカーとなったときに競争に負けてしまう、といった問題を抱えているため、ダウンロード型アプリケーションからWebアプリケーションに切り替える技術として、Ajaxが利用されている。

DHTMLが登場した当時は、単にお遊び要素に過ぎないと考えられていた動的ページだが、JavaScriptをより効果的に使うことで、業務や実用に耐える優秀なインターフェースを備えたアプリケーションをHTMLで作ることが可能であったという事実を世の中に知らしめたという意義をもつ技術である。

出典: フリー百科事典『ウィキペディア（Wikipedia）』

設置サンプルのソース

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja" lang="ja">
   <head>
      <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
      <meta http-equiv="Content-Language" content="ja" />
      <meta http-equiv="Content-Script-Type" content="text/javascript" />
      <meta http-equiv="Content-Style-Type" content="text/css" />
      <meta http-equiv="imagetoolbar" content="no" />
      <title>highlight: JavaScript text higlighting jQuery plugin | 設置サンプル</title>
      <link rel="stylesheet" type="text/css" href="/content/lib/global.css" />
      <!-- JS -->
      <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
      <script type="text/javascript" src="/content/lib/jquery/jquery.highlight-2.js"></script> 
      <script type="text/javascript">
         $(function() {
            $('li').each(function() { $.highlight(this, 'BLA'); });
         });
      </script>
      <!-- CSS -->
      <style type="text/css">
         .highlight { background-color:yellow; font-weight:bold; }
      </style>
   <link rel="stylesheet" type="text/css" href="/common/css/example.css"></head>
   <body id='example3' class='example'><div class="ads" style="margin:32px auto;text-align:center;"></div><h1 class='h'><a href='/'>PHP &amp; JavaScript Room</a> :: 設置サンプル</h1>
<h3 class='h'>実行結果</h3>
      <div id="wrap">
         <h1><a href='http://johannburkard.de/blog/programming/javascript/highlight-javascript-text-higlighting-jquery-plugin.html'>highlight: JavaScript text higlighting jQuery plugin</a> | 設置サンプル</h1>
         <p>▼クリックした単語をハイライト表示します。</p>
<!-- CODE -->
         <ul>
            <li><a href="javascript:void($('#highlight-plugin').removeHighlight().each(function() { $.highlight(this, 'HTML')}))">HTML</a></li>
            <li><a href="javascript:void($('#highlight-plugin').removeHighlight().each(function() { $.highlight(this, 'AJAX')}))">Ajax</a></li>
            <li><a href="javascript:void($('#highlight-plugin').removeHighlight().each(function() { $.highlight(this, '動的')}))">動的</a></li>
         </ul>
         <p>
            <a href="javascript:void($('#highlight-plugin').removeHighlight());">ハイライト表示を解除する</a>
         </p>
         <blockquote id="highlight-plugin">
            <p>従来のWebアプリケーションでは、サーバにリクエストを送信後、レスポンスを新たにウェブページとして受け取り画面遷移が発生していたが、Ajaxにより画面遷移を伴わない動的なWebアプリケーションの製作が実現可能になる。例えばWeb検索に応用することで、従来は入力確定後に行っていた検索を、ユーザがキー入力をする間にバックグラウンドで行うことによってリアルタイムに検索結果を表示していくといったことが可能になる。</p>
            <p>Webブラウザのみで動作する（別途プラグインを要求しない）、既存の技術の組み合わせであることが特徴。技術自体はこの用語が発生する前から存在していたが、Ajaxという名前が付けられたこと、GoogleがGoogle マップやGoogle サジェストにこの技術を利用したことで有名になり、Webアプリケーションの可能性を広げるものとして注目され始めた。さらに、Googleでは、デスクトップアプリケーションと遜色のない電子メールクライアントであるGmailやGoogle Calendarでも積極的にAjaxを採用し、Ajaxの実用性がGoogleのWebアプリケーションを通じて世間に認知されはじめている。</p>
            <p>AjaxによるWebプログラミング（Webアプリケーション製作）が注目されだした背景には、この従来のページ遷移のみに頼ったWebの使い勝手の悪さに対する不満や、XML、DOMなどのWeb関連技術の標準化（ウェブ標準）、および高い機能を持ったWebブラウザの普及などが挙げられる。</p>
            <p>また、ダウンロード型アプリケーションは、マニア層から先に広がりにくい、競合がOSメーカーとなったときに競争に負けてしまう、といった問題を抱えているため、ダウンロード型アプリケーションからWebアプリケーションに切り替える技術として、Ajaxが利用されている。</p>
            <p>DHTMLが登場した当時は、単にお遊び要素に過ぎないと考えられていた動的ページだが、JavaScriptをより効果的に使うことで、業務や実用に耐える優秀なインターフェースを備えたアプリケーションをHTMLで作ることが可能であったという事実を世の中に知らしめたという意義をもつ技術である。</p>
            <cite>出典: フリー百科事典『ウィキペディア（Wikipedia）』</cite>
         </blockquote>
<!-- CODE / -->
      </div>
   </body>
</html>