━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
かみうまメルマガ　#036（2009/04/18）
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━

うちやまです。こんにちは！

先日のWebサイトのメンテナンスではご協力ありがとうございました。
サイトの動作でおかしな点などありましたら、ぜひご連絡ください。

メルマガ本編に入る前に、1点お知らせです


●スタイルチェックツールを公開しました
￣￣￣￣￣￣￣￣￣￣￣￣￣￣￣￣￣￣￣￣￣￣￣￣￣￣￣￣￣￣￣￣￣
先日もお伝えしましたが、翻訳ファイルの表記チェック（スタイルガイ
ドの遵守）を支援するためのツール「かみうまスタイルチェッカー」を
公開しました。
翻訳やチェックの仕事に役立つ、Microsoft Word用のアドインツールです。

詳しくは、下記ページでご確認のうえ、ぜひご活用ください。
http://www.kamiuma.net/staticpages/in...ylechecker


では、ここからがメルマガ本編です。

■はじめに
￣￣￣￣￣￣￣￣￣￣￣￣￣￣￣￣￣￣￣￣￣￣￣￣￣￣￣￣￣￣￣￣￣
今回のテーマはJavaScriptとAjaxです。

これらは、前回のメルマガの中で簡単に紹介しました。一方はプログラ
ム言語の名前、もう一方はそれを使った処理手法の名前です。

昔のWebサイトは、単純にページを表示するだけのものが多かったので
すが、最近のWebサイトでは、インタラクティブな操作が可能なものが
増えています。そうしたサイトでよく利用されているのがこれらの技術
です。

まずは準備として、HTMLとは何かという話から始めましょう。

■HTMLとは
￣￣￣￣￣￣￣￣￣￣￣￣￣￣￣￣￣￣￣￣￣￣￣￣￣￣￣￣￣￣￣￣￣
HTML（HyperText Markup Language）という名前は、既にご存知の方も
多いでしょう。ブラウザで表示するWebページの中身を記述するための
言語です。

ファイルの中身は通常のテキスト形式です。その中では、ページ内に表
示する文章自体と併せて、文章の各部分の構造や機能についての指示を、
「タグ（tag）」という形で記述する決まりになっています。

“構造や機能についての指示”というのは、例えば、「この部分は見出
しにせよ」「ここは箇条書きにせよ」「ここはリンクにせよ」「ここに
画像を表示せよ」、といったことです。

例えば、HTMLファイルの中に

　　<a href="http://www.kamiuma.net">ホームページへ</a>

と記述した場合、

　　「ホームページへ」という文字列を http://www.kamiuma.net への
　　リンクとして表示せよ

という指示を表しています。<a href="～"> がその指示の対象範囲の始
まりを表すタグ、</a> が範囲の終了を表すタグです。

このように、文章にタグを付けることを「マークアップ（markup）」と
いいます。タグは、上の<a>タグのように、開始タグと終了タグのペア
で使うものが多くあります。

○ http://searchsoa.techtarget.com/sDefi...86,00.html
｜ HTML (Hypertext Markup Language) is the set of markup
｜ symbols or codes inserted in a file intended for display on
｜ a World Wide Web browser page. The markup tells the Web
｜ browser how to display a Web page's words and images for
｜ the user. Each individual markup code is referred to as an
｜ element (but many people also refer to it as a tag). Some
｜ elements come in pairs that indicate when some display
｜ effect is to begin and when it is to end.

もっとも、最近のWebページ作成ツールやブログサイトなどでは、HTML
やタグを意識する必要はほとんどありません。ページ作成者が文章やデ
ザインを指定すれば、それに応じたHTMLをツールが自動で生成してくれ
るものがほとんどだからです。

HTMLの実物は、Webブラウザから簡単に見ることができます。Webページ
上で右クリックし、ショートカットメニューの「ソースの表示」といっ
た項目を選択すれば、現在見ているページのソースを確認できます。


■JavaScriptとは
￣￣￣￣￣￣￣￣￣￣￣￣￣￣￣￣￣￣￣￣￣￣￣￣￣￣￣￣￣￣￣￣￣
HTMLで作成するWebページは“静的”です。つまり、決まりきった内容
を表示するだけであり、ユーザーの操作や処理の流れに応じてページの
内容を動的に変えることはできません。

そこで役立つのが、Webブラウザ上で動作するプログラミング言語、
JavaScriptです。この言語を使ったプログラムをHTMLに組み込むことに
よって、Webページ内で動的な処理を実行できるようになります。

○ http://www.devx.com/projectcool/Article/20066
｜ First, a formal description:
｜
｜ JavaScript is an object-oriented scripting language
｜ that lets you build interactions between page content, the
｜ state of the browser, and the actions of the reader.
｜
｜ In other words, JavaScript is a language that lets you make
｜ your pages interact with your readers and respond to what
｜ they do.
｜
｜ It is a programming language that can make your pages feel
｜ more dynamic and give feedback to your user. This is a good
｜ argument for learning and incorporating it into your web
｜ techniques basket.

JavaScriptのプログラムは、HTMLファイルの中に直接記述できます。そ
の場合は、<script>というタグで囲んだ中にプログラムを書いていきま
す。

○ http://www.devx.com/projectcool/Artic...6/0/page/4
｜ Scripts can range from the very basic to the very complex,
｜ depending on what they do and how they were written. It's
｜ easy to spot a JavaScript script in an HTML source file.
｜ Just look for the tags:
｜
｜ <script language="javascript"> and </script>.
｜
｜ The script appears between them. Most often, the script
｜ will be at the very beginning of the HTML text file.

また、プログラムのみを別ファイルに記述しておき、HTMLからそのプロ
グラムを取り込んで使うことも可能です。その方が、同じプログラムを
複数のWebページで使い回すには便利です。

○ http://javascript.about.com/od/refere....htm（一部改変）
｜ Q: Does the Javascript go in the same file as the HTML?:
｜
｜ A: It can but your scripts will be more easily reused on
｜ multiple pages of your site if you place them in separate
｜ files (using a .js extension helps identify them as
｜ Javascript). You then just link the Javascript to your HTML
｜ by inserting a <script> tag. The same Javascript can then
｜ be added to several pages just by adding the appropriate
｜ tag into each of the pages to set up the link.

　※補足：
　　・.js extension：このextensionは「拡張子」の意味です。
　　 JavaScriptのファイルには一般に「.js」という拡張子を付けま
　　 す。

JavaScriptの特徴の1つは、パソコン用の一般的なWebブラウザすべてが
標準で対応しており、拡張プラグインの類をインストールする必要がな
い点です。Adobeの「Flash」やMicrosoftの「Silverlight」など、ブラ
ウザ上で動的な処理を実現する技術はいろいろあるんですが、こうした
ものはプラグインのインストールが必要です。JavaScriptはそれが必要
ない分、利用者にとって敷居が低いと言えます。

○ http://javascript.about.com/od/refere...script.htm
｜ Javascript support is built right into web browsers.
｜ Provided that the visitors to your site are using web
｜ browsers that support Javascript (most do) and have
｜ Javascript enabled (it is by default) then your Javascript
｜ will run.

なお、米Sun Microsystemsのプログラミング言語で「Java」というもの
があります。JavaScriptと名前が似ているので、両者はいかにも関係あ
りそうに思えますが、実際には別物の言語です。プログラムの表記法は
多少似ていますが、用途や機能は全く異なります。

○ http://en.wikipedia.org/wiki/JavaScript
｜ JavaScript, despite the name, is essentially unrelated to
｜ the Java programming language even though the two do have
｜ superficial similarities. Both languages use syntaxes
｜ influenced by that of C syntax, and JavaScript copies many
｜ Java names and naming conventions. The language's name is
｜ the result of a co-marketing deal between Netscape and Sun,
｜ in exchange for Netscape bundling Sun's Java runtime with
｜ their then-dominant browser.

　※補足：
　　・naming convention…「名前付け規則」とか「命名規則」と言い
　　 ます。ここでは、プログラムの中で使う要素（変数や関数など）
　　 に対する名前の付け方のことを指しています。


■Ajaxとは
￣￣￣￣￣￣￣￣￣￣￣￣￣￣￣￣￣￣￣￣￣￣￣￣￣￣￣￣￣￣￣￣￣
JavaScriptがWebブラウザに搭載されたのは10年以上前ですが、最近再
び脚光を浴びるようになっています。JavaScriptを利用した「Ajax」と
いう処理手法が、最近のWebサイトで広く使われるようになったからです。

Ajax（エイジャックス）とは、「Asynchronous JavaScript ＋ XML」の
略です。名前のとおり、JavaScriptとXML（＝HTMLの親戚のようなデー
タ形式）を使った非同期通信（※後述）による処理手法のことなんです
が、ひらたく大ざっぱに言えば、Webページの一部分だけを動的に書き
換えるための処理手法、といえます。

例えば、「Googleマップ（http://maps.google.co.jp/）」や「Yahoo地
図（http://map.yahoo.co.jp/）」のような、Web上の地図サイトで考え
てみましょう。ひと昔前の地図サイトでは、地図のスクロールや縮尺変
更を行うとき、地図の部分だけではなく、Webページ全体を読み込み直
して再表示する形となっていました。でも、最近の地図サイトでは、地
図の部分だけをマウスのドラッグ操作でスクロールできますし、縮尺変
更もその場で行えます。

こうした処理を実現するのがAjaxです。ページ全体のHTMLを改めて読み
込むのではなく、スクロールや縮尺変更に伴って新たに必要になった地
図の画像データだけを、JavaScriptのプログラムを使って非同期通信に
よりその場でWebサーバーから読み込むしくみとなっています。

○ http://searchwindevelopment.techtarge...21,00.html
｜ Ajax allows content on Web pages to update immediately when
｜ a user performs an action, unlike an HTTP request, during
｜ which users must wait for a whole new page to load. For
｜ example, a weather forecasting site could display local
｜ conditions on one side of the page without delay after a
｜ user types in a zip code.
｜
｜ Google Maps is one well-known application that uses Ajax.
｜ The interface allows the user to change views and
｜ manipulate the map in real time. Ajax applications do not
｜ require installation of a plug-in, but work directly with a
｜ Web browser.

なお、“非同期通信”といった言葉の「同期（synchronous）」「非同
期（asynchronous）」というのは、処理の要求を出した後でその結果が
返って来るまで待つかどうか、という違いを表します。「同期」は、サー
バーにデータを要求した後、結果が返って来るまで他の処理をせずに待
つ方式、「非同期」は、結果が返って来るまでの間も他の処理を並行し
て進める方式です。

先ほどの例で言えば、昔の地図サイトは同期処理です。サーバからペー
ジ全体を読み込み直すのを待つ間、ブラウザでは他の処理や操作は行え
ないからです。一方、最近の地図サイトは非同期処理です。スクロール
等で必要になった地図データを読み込む間も、Webページ上の別の操作
や処理は普通に行えるからです。

○ http://searchnetworking.techtarget.co...05,00.html
｜ In computer programs, asynchronous operation means that a
｜ process operates independently of other processes, whereas
｜ synchronous operation means that the process runs only as a
｜ result of some other process being completed or handing off
｜ operation.


前回のメルマガでも書きましたが、SaaSやクラウド・コンピューティン
グといった潮流の中、ブラウザ上で動作するWebアプリケーションを利
用する機会が増えています。Ajaxは、そうしたアプリケーションで広く
使われています。

以上、今回のテーマは、JavaScriptとAjaxでした。


■編集後記
￣￣￣￣￣￣￣￣￣￣￣￣￣￣￣￣￣￣￣￣￣￣￣￣￣￣￣￣￣￣￣￣￣
今年はこれまで花粉症の症状があまり出ず、意外と楽に過ごせて
きたのですが、先週～今週あたりは少々つらい日もありました。
スギ花粉よりヒノキ花粉に強く反応しているのかもしれません…。
もうしばらくは花粉対策が必要そうです。

では、来週のスクーリングもよろしくお願いします。

－－－－－－－－－－－－－－－－－－－－－－－－－－－
□発行元：かみうま翻訳倶楽部 内山卓則
　http://www.kamiuma.net
－－－－－－－－－－－－－－－－－－－－－－－－－－－