Ajax入門

Ajax入門のBLOGです。基本から始めてAjaxが使えるようになるまでの記録です。
2006.03.28 Tuesday
author : スポンサードリンク
スポンサーサイト
この広告は60日以上更新がないブログに表示されております。
新しい記事を書くことで広告を消すことができます。
| - | | - | -
2006.02.19 Sunday
author : 桐谷亮
JavaScriptの基礎知識：コメントの書き方

前回(Ajax入門：JavaScriptの書き方と文字の表示[document.write])はJavaScriptで文字を表示させる命令について見ました。
今回は、前回のプログラムにも出てきたコメントの書き方について見ます。


　

コメントとは何か
プログラムに関するメモや理解を助けるために書く
処理の対象とならないように特別な書き方がある
JavaScriptに対応していないブラウザのためにも使用する



コメントの種類
1行用のコメントと複数行用のコメントの2種類がある



1行用のコメント
先頭が//で始まる行は、行末までコメントとみなされる
//ここにコメントを書く


　

複数行用のコメント
/*〜*/でコメントを挟む
/*
*ここにコメントを書く
*/

Check
| - | 22:17 | comments(56) | trackbacks(341)
2006.02.14 Tuesday
author : 桐谷亮
Ajax入門：JavaScriptの書き方と文字の表示[document.write]

前回(Ajax入門：JavaScriptの基礎知識)はJavaScriptとはどのようなものであるのかについて簡単に見ました。今回はJavaScriptで簡単なプログラムを書いてみます。具体的には、そもそもどうやって書けばよいのか、文字を表示する方法の2点を見ます。


そもそもどうやって書けばよいのか
最低限メモ帳などのテキストエディタがあれば大丈夫
プログラムが書けたら .html で保存
表示させて確認するにはIEなどのブラウザを使います


文字を表示する方法
そもそも文字を表示させるだけであればHTMLでもできる
JavaScriptは計算結果などを表示させるところに特徴がある
しかし基本的なプログラムの書き方の練習として見てみる
書く場所はbodyの中


<script type="text/javascript">
<!--
document.write("これで文字が表示されます");
// -->

</script>


文字を表示させる命令はdocument.write()の部分です
文字列は""で囲みます
具体的なHTMLは次のようになります


<html>
<head>
<title>サンプル</title>
</head>
<body>
<script type="text/javascript">
<!--
document.write("これで文字が表示されます");
// -->
</script>
</body>
</html>


これを例えば test.html という名前で保存する
IEなどで開くと実行結果を見ることができます


ただしJavaScriptがオフの場合は何も表示されない
そこで次の1行を先ほどのプログラムの末尾(</script>の次)に加えることでオフの場合に対応することができます


<noscript>JavaScriptがオフの場合の表示方法</noscript>


簡単なJavaScriptですが、このようにテキストエディタがあればプログラムの初歩から始めることができます

Check
| - | 23:20 | comments(1) | trackbacks(0)
2006.02.13 Monday
author : 桐谷亮
Ajax入門：JavaScriptの基礎知識
前回(Ajax基礎知識：用語の説明)はAjaxの基礎知識として、関連する用語の説明を行いました。今回からはAjax(Asynchronous JavaScript and XML)という語に含まれているJavaScriptについて見ていきます。なおAjaxの特徴である非同期のウェブアプリケーションの実現に必ずJavaScriptが使用されなくてはいけないわけではないという指摘があります(Ajaxの本質、「非同期メッセージ型ウェブ・アプリケーション」のススメを参照)が、まずは使われることの多いJavaScriptがどんなものなのか、簡単な説明を見ます。

JavaScriptの特徴
Java言語と直接の互換性は無い
コンパイラを必要としない
ソーステキストをブラウザが解釈・実行する
ソースは HTML 中に書き込むか、HTML から外部ファイル(*.js)として呼び出す

[コンパイラ]　(IT用語辞典 e-Words)
人間がプログラム言語で記述したものをコンピュータが実行できる形式に変換するソウトウェア。

次回からはJavaScriptで実際にどのようなことができるのかを見ていきます。
Check
| - | 09:18 | comments(1) | trackbacks(0)
2006.02.06 Monday
author : 桐谷亮
Ajax基礎知識：用語の説明
前回(Ajaxとは何か：定義など基礎知識)はAjaxの定義を簡単に行いました。その定義の中でいくつか用語が出てきましたので、それらについて理解を深めようというのが今回の目的です。以下、前回の定義で出てきた順に見ていきます。また各用語の説明に出てくる用語についても見ていきます。用語は太字で強調しています。用語の右横のサイト名はオンライン辞典にリンクしています。

[非同期](asynchronous)　(IT用語辞典 e-Words)
クロック信号のタイミングに合わせず、任意のタイミングでデータを送信する通信方式

[クロック信号]　(Wikipedia)
コンピュータが動作する時に、タイミングを取る(同期を取る)ための周期的な信号

[JavaScript]　(IT用語辞典 e-Words、Wikipedia)
スクリプト言語の一種
Sun Microsystems社とNetscape Communications社が開発
Java言語と直接の互換性は無い

[スクリプト言語]　(IT用語辞典 e-Words)
簡易プログラムを記述するためのプログラミング言語
コンピュータが実行できる形式への変換が自動的に行われる
手間をかけずに実行することができる
小規模なプログラムをすばやく作成することが主な目的
多くはインタープリタ方式を採用

[インタープリタ]　(IT用語辞典 e-Words、Wikipedia)
ソースコードを逐次解釈しつつ実行するプログラム
プログラムの実行時に変換を行なうためコンパイラ型言語よりも遅い

[ユーザーインターフェース]　(IT用語辞典 e-Words)
コンピュータシステムの「操作感」
情報の表示様式やデータ入力方式を規定
文字ベースのCUIとグラフィックベースのGUIがある

[XML]　(IT用語辞典 e-Words)
マークアップ言語の一つ
ユーザが独自のタグを指定できる
タグを使用した囲み方は規定しているがタグの意味は規定していない＝メタ言語
もともとSGMLのサブセットとして考案された
任意のデータを HTMLと同様の感覚で送受信できることを目標に作成された

[マークアップ言語]　(IT用語辞典 e-Words)
文章の構造や修飾情報を文章中に記述していく記述言語
テキストファイル
メタ言語はスキーマ言語と組み合わせてマークアップ言語になる
　
[スキーマ言語]　(IT用語辞典 e-Words)
SGMLやXMLで文書を作成する際に、その構造を定義する言語
Check
| - | 19:57 | comments(2) | trackbacks(81)
2006.02.03 Friday
author : 桐谷亮
Ajaxとは何か：定義など基礎知識
前回(Ajax入門：基本サイトのリンク集)はAjaxについて定義・解説した基本的な入門用サイトを挙げました。今回はそれらのサイトの情報を基に、Ajaxとは何であるのかをまとめます。詳しい解説は前回挙げたサイトに書かれているので、ここでまとめる意義は「Ajaxとは簡単に言うと何なのか」という疑問に答えることです。(以下の記述は前回挙げたサイトを基にしています。)

読み方は？
　エイジャックス

何の略語か？
　Asynchronous JavaScript and XML

特徴は？
　・非同期通信を利用する
　・ユーザーインターフェース構築技術の総称
　　→Ajaxという技術が存在しているわけではない
　・Webページのリロードを伴わずにサーバとXML形式のデータのやり取りを行なって処理を進める
　　→動的にページの一部を書き換えることができる
　　→ユーザーにページのリロード作業を強いることがない
　・FlashやJavaアプレットと違って特別なソフトウエアを導入しなくてもよい

Ajaxという語が使われだした経緯は？
　・2005年2月18日にJesse James Garrettにより名付けられた

今回はAjaxについての定義・解説でした。次回は定義・解説中に出てきた用語(非同期通信など)について述べます。
Check
| - | 09:57 | comments(1) | trackbacks(1)
2006.02.01 Wednesday
author : 桐谷亮
Ajax入門：基本サイトのリンク集
Ajaxとは何なのか、まずは定義や解説をしているサイトから調べ始めました。以下のリンク集は次のような順で挙げています。

　・用語辞典などによる定義や解説
　・わかりやすく解説されているサイト
　・Ajaxという語が生まれた原典

各サイトには簡単な要約を掲載しています。

【用語辞典】
Ajax
Wikipedia
http://ja.wikipedia.org/wiki/Aja

Ajaxとは
IT用語辞典 e-Words
http://e-words.jp/w/Ajax.html

Ajaxとは
はてなダイアリー
http://d.hatena.ne.jp/keyword/Ajax

【わかりやすく解説されているサイト】
作って理解するAjax
工藤拓氏による
IT Proでの連載
Ajaxが支持される理由やAjaxを使ったサイトの具体例
http://itpro.nikkeibp.co.jp/article/COLUMN/20060110/227005/



JavaScriptのパラダイムシフト「Ajax」　Ajaxって何？
All About
Ajaxの出現、Flashとの比較、具体的なサンプルなど
All About内のAjax関連記事のリンク集も有用です
http://allabout.co.jp/career/javascript/closeup/CU20050430A/

Ajaxを勉強しよう
KaZuhiro FuRuhata氏による
「Ajaxを勉強しよう」や「Google Maps解説」などがあります
具体的なソース
http://www.openspc2.org/JavaScript/Ajax/index.html

〜JavaScriptでXMLHttpRequest〜
harupu氏による
解説が少しずつ表示されるのでゆっくり考えながら理解できます
実際にAjaxを用いてAjaxを解説されているので、Ajaxが実感できます
http://sagittarius.dip.jp/~toshi/Ajax/yui.html

AJAXに注目--グーグルが最新ウェブアプリ開発に選んだ「旧技術」
CNET Japan
2005年4月の記事
Googleによる既存の技術の見直し
http://japan.cnet.com/special/story/0,2000050158,20082580,00.htm

古くて新しいAjaxの真実を見極める
＠IT
2005年8月の記事
解説の図がわかりやすいです
http://www.atmarkit.co.jp/fwcr/special/ajax01/01.html

Ajaxの本質、「非同期メッセージ型ウェブ・アプリケーション」のススメ
中島聡氏による
流行し始めたAjaxの本質とは何か
「非同期」と「HTML+Jascript+XM」は別であると指摘
こちらのBLOGのエントリはどれも興味深いものばかりです
http://satoshi.blogs.com/life/2005/06/ajax.html

AJAXが注目されるわけ
ZDNet Japan
2005年5月の記事
David Berlind氏の原文の翻訳
http://japan.zdnet.com/column/btl/story/0,2000052832,20084030,00.htm

【Ajaxという語が生まれた原典】
Ajax: A New Approach to Web Applications
Jesse James Garrett氏による
Ajaxという語はここから始まりました
http://www.adaptivepath.com/publications/essays/archives/000385.php

Ajax: Web アプリケーション開発の新しいアプローチ
けんたろ氏による翻訳
http://antipop.gs/docs/translations/ajax.html

Check
| - | 00:25 | comments(3) | trackbacks(89)
2006.01.30 Monday
author : 桐谷亮
Ajaxに興味を持ったきっかけ
Ajaxに興味を持ったきっかけは、工藤拓氏(Google)の「Ajax を使った 日本語 IME + KWIC」を見たことです。キーワードを入力すると、対象のデータベースを検索し、ヒットした文字列を一覧で表示します。表示形式は検索語が中央に表示され、検索語の前後にどのような語がくるのかが見てわかるようになっています(参考：ＫＷＩＣ検索; 総合研究大学院大学)。

(「Ajax を使った 日本語 IME + KWIC」を使っているところ)
「Ajax を使った 日本語 IME + KWIC」を使用しているところ

これはおもしろい。自分でデータベースを指定したり、表示の形式を変えたりできたらなよいのにと思いました。ではどうすればよいのか。説明を見ていると、どうやらAjaxというものを使っているとのこと。それなら自分で作ってみようと思ったのが、そもそものきっかけです。

Ajaxが関心を持たれるようになったのはGoogle SuggestやGoogle Mapsの影響が大きいとよく言われます(参考：古くて新しいAjaxの真実を見極める; ＠ITの記事)が、個人的には上記の工藤拓氏の技術からAjaxに興味を持ち始めました。

工藤拓氏は他にも形態素解析エンジンMeCabや係り受け解析器CaboChaなどの興味深いソフトウェアを公開されています。

【本文中のリンク・関連リンク】
Taku Kudo
工藤拓氏のサイトです
様々なソフトが公開されています
発表論文などの一覧もあります
http://chasen.org/~taku/

作って理解するAjax
工藤拓氏がIT Proに連載されている記事です
解説とプログラムの例が掲載されています
http://itpro.nikkeibp.co.jp/article/COLUMN/20060110/227005/

ＫＷＩＣ検索
総合研究大学院大学
KWIC検索の簡単な解説
どのように表示されるかの例が掲載されています
http://aci.soken.ac.jp/pages/HowToUse/htu_030.html

古くて新しいAjaxの真実を見極める
＠ITの記事
Ajaxという言葉が広がる経緯について書かれています
http://www.atmarkit.co.jp/fwcr/special/ajax01/02.html
Check
| - | 16:23 | comments(8) | trackbacks(8)
2006.01.30 Monday
author : 桐谷亮
Ajax入門
Ajaxというものを最近よく目にします。どうやら便利なことがいろいろできるらしい。

このBLOGは「Ajaxに興味を持った」「Ajaxとは何か知りたい」「Ajaxが使えるようになりたい」という思いから始まったものです。最近流行りだしているAjaxが使えるようになるまでの記録を残していく、Ajax入門のBLOGです。
Check
| - | 16:09 | comments(1) | trackbacks(1)
Copyright (C) 2012 JUGEM Some Rights Reserved.
Powered by "JUGEM"
▲このページの先頭へ
CALENDAR
S M T W T F S
1234567
891011121314
15161718192021
22232425262728
2930     
<< April 2012 >>
RECENT COMMENT
RECENT TRACKBACK
PROFILE
SELECTED ENTRIES
ARCHIVES
JUGEMの広告