スポンサーサイト
上記の広告は１ヶ月以上更新のないブログに表示されています。
新しい記事を書く事で広告が消せます。
新しい記事を書く事で広告が消せます。
Ajaxについて
Ajaxとは、ウェブブラウザ内で非同期通信をしてくれる技術です。
非同期通信とは、その名の通り、同期せずに通信を行うことです。ココで言う同期は、処理を「待つ」ということです。
通常のウェブサイトの仕組みは、URLにアクセスし、そのレスポンスを新たなページとして処理します。まぁ通常の画面遷移ですね。リンクをクリックしたら、別のページが表示されます。これが同期通信です。
これが非同期になると、画面遷移をせずに、裏（バックグラウンド）でページを読み込み、Javascriptと組み合わせればHTMLを書き換えたりできるので、より動的なウェブアプリが作れます。
Googleはこの技術を流行らせた第一人者なので例に上げると、Google MapやGmailがAjaxを利用してます。地図を動かすと、その先の地図が非同期に裏で読み込まれ、表示されていく部分がわかりやすいです。
やっていることは、ajaxで通信し、javascriptでHTML書き換えです。
一昔前は、Flashで魅せる時代でしたが、今はHTMLで済む時代になりました。
この便利なajaxをjQueryではとても簡単に使えるようになっています。
非同期通信とは、その名の通り、同期せずに通信を行うことです。ココで言う同期は、処理を「待つ」ということです。
通常のウェブサイトの仕組みは、URLにアクセスし、そのレスポンスを新たなページとして処理します。まぁ通常の画面遷移ですね。リンクをクリックしたら、別のページが表示されます。これが同期通信です。
これが非同期になると、画面遷移をせずに、裏（バックグラウンド）でページを読み込み、Javascriptと組み合わせればHTMLを書き換えたりできるので、より動的なウェブアプリが作れます。
Googleはこの技術を流行らせた第一人者なので例に上げると、Google MapやGmailがAjaxを利用してます。地図を動かすと、その先の地図が非同期に裏で読み込まれ、表示されていく部分がわかりやすいです。
やっていることは、ajaxで通信し、javascriptでHTML書き換えです。
一昔前は、Flashで魅せる時代でしたが、今はHTMLで済む時代になりました。
この便利なajaxをjQueryではとても簡単に使えるようになっています。
jQueryの使い方
今回は、jQueryについて少し。
公式はこちら
http://jquery.com
このライブラリは、bootstrapでも使われております。
JavaScriptのライブラリは、HTMLで読み込めば使えます。HTMLは上から順番に読み込まれるので、最初に書けばソース全体で使えます。sample.htmlで最後に書いていたのは、JavaScriptを最初に読み込むと、読み込みが終わるまで次の行を読み込んでくれず、ブラウザの描画が遅くなるためです。
このように、読み込むタイミングは結構考える必要が出てきます。sample.htmlのように表示をキレイにしたいだけだったら最後のほうが良いです。HTMLの途中で使うのであれば、先に読み込んでおく必要があります。
しかしみんなが使うライブラリは、色々なホームページで毎回読み込むわけです。それってとても非効率だしインターネット全体にとって良いことではないのです。それを解決する仕組みに、CDNと言うものを利用します。CDNは色々なコンテンツを安定的に配信するネットワークのことで、無料で利用できるものもあります。
今回はGoogleとMSNとjQuery本家のCDNを紹介しときます。
GoogleのCDN
https://developers.google.com/speed/libraries/devguide?hl=ja
ここを見ると分かる通り、色々なCDNがあります。
jQueryを使う場合は、HTMLに以下のように書けば読み込まれます。
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
MSNのCDN
http://www.asp.net/ajaxlibrary/cdn.ashx
jQuery使う場合は、
http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.9.1.min.js
本家のCDN
http://code.jquery.com
常に最新版を使いたければ以下が使える。
http://code.jquery.com/jquery.min.js
公式はこちら
http://jquery.com
このライブラリは、bootstrapでも使われております。
JavaScriptのライブラリは、HTMLで読み込めば使えます。HTMLは上から順番に読み込まれるので、最初に書けばソース全体で使えます。sample.htmlで最後に書いていたのは、JavaScriptを最初に読み込むと、読み込みが終わるまで次の行を読み込んでくれず、ブラウザの描画が遅くなるためです。
このように、読み込むタイミングは結構考える必要が出てきます。sample.htmlのように表示をキレイにしたいだけだったら最後のほうが良いです。HTMLの途中で使うのであれば、先に読み込んでおく必要があります。
しかしみんなが使うライブラリは、色々なホームページで毎回読み込むわけです。それってとても非効率だしインターネット全体にとって良いことではないのです。それを解決する仕組みに、CDNと言うものを利用します。CDNは色々なコンテンツを安定的に配信するネットワークのことで、無料で利用できるものもあります。
今回はGoogleとMSNとjQuery本家のCDNを紹介しときます。
GoogleのCDN
https://developers.google.com/speed/libraries/devguide?hl=ja
ここを見ると分かる通り、色々なCDNがあります。
jQueryを使う場合は、HTMLに以下のように書けば読み込まれます。
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
MSNのCDN
http://www.asp.net/ajaxlibrary/cdn.ashx
jQuery使う場合は、
http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.9.1.min.js
本家のCDN
http://code.jquery.com
常に最新版を使いたければ以下が使える。
http://code.jquery.com/jquery.min.js
JavaScriptを使ったbootstrap
JavaScriptが何なのかざっくりと説明しましたが、どんなものなのか実際に見て行きましょう。
bootstrapで作ったsample.htmlを一部変更します。
<li><a href="#">お問い合わせ</a></li>
となっていた部分を↓のように書き換えます。
これで、ナビゲーションの「お問い合わせ」にドロップダウンが付きました。
「お問い合わせ」をクリックすると、サブメニューが表示されたり消えたりします。
これはbootstrapの内部でJavaScriptを使い、HTMLを書き換えているのです。
やっていることを上から簡単に説明します。
bootstrapで作ったsample.htmlを一部変更します。
<li><a href="#">お問い合わせ</a></li>
となっていた部分を↓のように書き換えます。
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown">お問い合わせ <b class="caret"></b></a>
<ul class="dropdown-menu">
<li><a href="#">プロジェクトについて</a></li>
<li><a href="#">記事について</a></li>
<li><a href="#">広告について</a></li>
<li class="divider"></li>
<li><a href="#">その他</a></li>
</ul>
</li>
これで、ナビゲーションの「お問い合わせ」にドロップダウンが付きました。
「お問い合わせ」をクリックすると、サブメニューが表示されたり消えたりします。
これはbootstrapの内部でJavaScriptを使い、HTMLを書き換えているのです。
やっていることを上から簡単に説明します。
JavaScriptについて
エロぺん動画で使っている技術はjQueryというJavaScriptのライブラリに支えられています。
jQueryは、使いにくいJavascriptを使いやすくしてくれるライブラリです。
そもそもJavascriptで出来ることって何？というところを簡単に。
まず、JavaとJavaScriptは、全くの別物です。
その昔、それぞれを作ってた会社が業務提携してたので、そんな名前を付けたのだとか。
で、JavaScriptで何が出来るかというと、計算、HTMLやCSSの書き換え、通信等です。その他、リンクをクリックした時の処理を変更したり、ブラウザの機能を使ったり、とにかく色々出来ます。
これにより、動きのあるウェブサイトや、ゲームまで作れちゃうわけです。
JavaScriptは基本的に、ブラウザに搭載されています。
そのため、処理は全てブラウザ上で行われます。
jQueryは、使いにくいJavascriptを使いやすくしてくれるライブラリです。
そもそもJavascriptで出来ることって何？というところを簡単に。
まず、JavaとJavaScriptは、全くの別物です。
その昔、それぞれを作ってた会社が業務提携してたので、そんな名前を付けたのだとか。
で、JavaScriptで何が出来るかというと、計算、HTMLやCSSの書き換え、通信等です。その他、リンクをクリックした時の処理を変更したり、ブラウザの機能を使ったり、とにかく色々出来ます。
これにより、動きのあるウェブサイトや、ゲームまで作れちゃうわけです。
JavaScriptは基本的に、ブラウザに搭載されています。
そのため、処理は全てブラウザ上で行われます。
