Microsoft PowerPoint - プログラムとは.pptx

Formal Method Group

IS-FMG, T.I.T. All Rights Reserved, 2008

プログラムとは

1. プログラミングとは

2. プログラムの構文論

3. プログラムの意味論

13：20～14:30

Formal Method Group

IS-FMG, T.I.T. All Rights Reserved, 2008

プログラミングとは

情報システム開発

プログラム開発

情報システム開発

顧客 自然言語 による表現 要求仕様 外部設計仕様 内部設計仕様 ソース プログラム 内部設計 コーディング 統合 統合された システム 外部設計 要求分析 稼動・テスト 完成した システム これから学ぶところ

プログラム開発

自然言語 による表現 高級言語 プログラム アセンブリ言語 プログラム 再配置可能 機械語プログラム コンパイラ アセンブラ リンカー_ローダ CPU 機械語 プログラム 定式化 記号による表現 図式化 図による表現 コーディング

自然言語表現

†

ソートの対象となっている配列の右端から順

に一対比較をする。

†

もし大きいものが左にあるときには，2つの要

素の順序を入れ替える。

†

これをまだ整列していないところまで，繰り返

す。

†

整列したところまで行ったら，また右端から順

に一対比較をする。

†

すべて整列したら終了する。

記号による表現

1.

i=0とする。

2.

i=nであれば，終了。そうでなければ3へ進む。

3.

j=nとする。

4.

j=iであれば（パスの終了）， iを1増やし，2へ戻る。

そうでないときは，5へ進む。

5. X[j]<X[j-1]であるとき（大きさの順序が逆）には， X[j]と

X[j-1] を入れ替える。

6. jを1減らし，4へ戻る。

例：バブルソートのフローチャート

開始 i:=0 i=n ? j:=n j=i ? X[j]<X[j-1] ? Swap(X[j],X[j-1]) j:=j-1 i:=i+1 終了 Yes No No Yes Yes No

高級言語プログラム：ソートの場合

Program Sort(input,output) Var i,j,n:integer; X:array[0..9] of integer; Begin write(‘配列の長さを入力してください:’); readln(n); write(‘配列を入力してください’); For i:=0 to n-1 do Begin Write(‘X[’,I,’]=‘); Readln(X[i]); End; i:=0; While i < n do Begin j:=n; While i<j do Begin If X[j] < X[j-1] Then Begin Temp:=X[j]; X[j]:=X[j-1]; X[j-1]:=Temp; End; j:=j-1; End; i:=i+1; End; End.

アセンブリ言語プログラム：ソートの場合

START L0 LEA GR1,0 ST GR1,i L1 LD GR1,i CPA GR1,N JMI L2 EXIT L2 LD GR1,N ST GR1,j L3 LD GR1,i CPA GR1,j JMI L4 JMP L7 L4 LD GR2,j LD GR0,X,GR2 LD GR3,j SUB GR3,ONE CPA GR0,X,GR3 JMI L5 JMP L6 L5 LD GR2,j LD GR0,X,GR2 LD GR3,j SUB GR3,ONE LD GR1,X,GR3 ST GR0,X,GR3 ST GR1,X,GR2 L6 LD GR1,j SUB GR1,ONE ST GR1,j JMP L3 L7 LD GR1,i ADD GR1,ONE ST GR1,i JMP L1 ONE DC 1 i DS 1 j DS 1 N DC 2 X DC 1 DC 7 DC 4 END

機械語プログラム：ソートの場合

・

0001001000010000

0000000000000000

0001000100010000

0000000010000100

0001000000010000

0000000010000100

0100000000010000

0000000010000110

・

・

Formal Method Group

IS-FMG, T.I.T. All Rights Reserved, 2008

プログラムの構文論

(syntax)

形式言語の構造

†

文法

はいくつかの記

号の集合と生成規則

の集合からなる：

G=<V

Ｎ

,V

Ｔ

,S,P>

†

ある文法にしたがう文

とは，開始記号S から

生成規則を使ってで

きた，終端記号だけ

からなる記号列のこと．

S

Np

Vp

Det N

Np

V

Det

N

the cat caught a

bird

文法の定義

G=<V

_N

,V

_T

,S,P>

V

_N

:

非終端記号

の集合,

V

_T

:

終端記号

の集合,

V

_N

∩V

_T

=Φ

S∈V

_N

:

開始記号

,

P:

生成規則

の

有限

集合,

PgQ →Pg’Q

ただし， P,Q,g,g’∈(V

_N

∪V

_T

)* & g∈V

_T

*.

終端記号は書 換えられない どれが終端記号でど れが非終端記号化 か判別できる

生成規則の表現

†

先の言語は，次の生成規則からなる：

„

S → Np Vp

„

Np → Det N

„

Vp → V Np

„

Det → the

„

Det → a

„

V → caught

„

N → cat

„

N → bird

文法記述言語

（文法を記述するためのメタ言語）

†

BNF（Backus Naur Form, Backus Normal Form）記法

による表現

†

メタ記号

„

::=, |, <, > がメタ記号

„

<>で囲まれた者はメタ言語変数

„

::=で左辺を右辺で定義することを表している。

„

|は「または」を意味している。

†

先の生成規則は，次のように表現される：

„

<S>::=<Np> <Vp>

„

<Np> ::= <Det> <N>

„

<Vp> ::= <V> <Np>

„

<Det> ::= the | a

„

<V> ::= caught

„

<N> ::= cat | bird

文法によって生成される言語

†

α ⇒* β とは，

„

α ⇒β(ある PgQ とPg’Qが，各々αとβに存在

して，PgQ →Pg’Q がPに存在する)

„

α ⇒* β’ ，β’ ⇒β となるβ’が存在する（

帰納

的定義！

）

†

このとき，文法Gで生成される言語を，

L(G)={α|S ⇒*α & α

∈V

_T

*}

で表す。

Q1:a,aa,aaa,aaaa,・・・の生成

†

L(G)=｛a,aa,aaa,aaaa,・・・}となる文法Gはど

のようなものか。Gを明示するとともに、生成

規則をBNF記法で表せ。

Formal Method Group

IS-FMG, T.I.T. All Rights Reserved, 2008

プログラムの意味論

(semantics)

流れ図プログラム

計算機械

流れ図プログラムの計算

プログラムの同値性

プログラムに対する一つの見方

†

プログラムとは、「基本的な操作と判定を計算

機械に行わせる命令の構造を持った集合」で

ある。

„

操作名：F,G,H,...

„

判定名：T,U,V,...

†

代表的なプログラム

„

流れ図プログラム

„

Whileプログラム

„

手続きプログラム

流れ図プログラム

†

開始，停止，操作，判定

の４つの要素をある規則にした

がって組み合わせてできる幾何的な図式

開始 停止 操作 判定 開始 F G T1 T2 停止 T F T F 流れ図プログラムの例 T F

名札付き命令の集合としての流れ図プログラム

†

名札

(label)と

ジャンプ

(jump)を用いた，名札付き命令の

集合として、流れ図プログラムを表現

†

例

1:do F then goto 2

2:if T1 then goto 1 else goto 3

3:do G then goto 4

4:if T2 then goto 5 else goto1

開始 F G T1 T2 停止 T F T F 2 1 3 4 5

名札付き命令

†

構成要素

„

L:labelの集合

„

F:操作名の集合

„

T:判定名の集合

†

名札付き命令

i∈I=(L×{:}×{do}×F×{then goto}×L)

∪(L×{:}×{if}×T×{then goto}×L

×{else goto}×L)

†

λ:I → L, λ(i)は左端のラベル

流れ図プログラムの定義

定義：流れ図プログラム

P ⊂Iが

流れ図プログラム

⇔(∀i,j∈P)(λ(i)=λ(j) ⇒i=j)

(⇔(∀i,j∈P)(i≠j ⇒λ(i)≠λ(j)))

同じラベルの命令は一つしかないという性質を持つ、名札つき命令の集合

†

P(L):流れ図プログラムPに出現するラベルの

集合

†

l

∈P(L)を一つ固定し，

始端ラベル

と呼ぶ．

†

l

∈P(L)が

終端ラベル

⇔ (

∀i∈P)(l≠λ(i))

計算機械

†

計算機械はプログラムにおける操作と判定の

意味

を与え

る対象

†

M=<A,B,C,I

_M

,O

_M

,{F

_M

|F,G,…},{T

_M

|T,U,…}>が

計算機械

であるとは、

„

A：入力集合

„

B：出力集合

„

C：メモリ集合

„

I

M

:A → C, 入力関数

„

O

_M

:C → B, 出力関数

„

F

M

:C → C, 操作はメモリの変換

„

T

M

:C → {T,F}，メモリの内容を判定

Tはtrue,Fはfalseを表す。

計算機械の例

記憶の集合を、AとBの2つのレジスタからなっているとし、操作と判定を各々、 F A:=A-1 G B:=B+1 T A=0 とする計算機械M=<A,B,C,IM,OM,{FM,GM},{TM}>は、次のように定めることができる： A=Z, B=Z, C=Z×Z, IM:Z→ Z×Z, IM(x)=(x,0), OM: Z×Z → Z, OM(x,y)=y, FM: Z×Z → Z×Z, FM(x,y)=(x-1,y), GM: Z×Z → Z×Z, GM(x,y)=(x,y+1), TM: Z×Z → {T,F}， true x=0 TM(x,y)= false o.w.

流れ図プログラムにおける計算

Pを流れ図プログラムとし、Mを機械とするとき、M上でのPの停止する計算とは、 L×Cの要素の有限列(l₁,v₁),…,(l_n,v_n)で、次の条件を満足するものである： 1） l₁はPの指定された始端ラベルで、lnはPの終端ラベルの一つである。 2) 1≦j < nである任意のｊに対して、次のいずれかが成立する：

a) あるFおよびlに対して、Pに命令lj:do F then goto lが存在し、lj+1=lかつ

v_j+1=F_M(v_j)である。

b) あるT、l’、l”に対して、Pに命令l_j:if T then goto l’ else goto l”が存在し、 l’ T_M(v_j)＝T lj+1= l” o.w. かつvj+1=vjである。

機械

M上でプログラムPによって

計算される関数

(l

₁

,v

₁

),…,(l

_n

,v

_n

)を機械M上でのプログラムPの停止する

計算とする。

このとき、

機械M上でプログラムPによって計算される

関数

mP:X→Yは、

mP(x)=O

M

(v

n

)

(ただし、v

1

=I

M

(x))

で定められる。（停止しない計算に対しては、mPは定義されない）

すなわち、mP(x)はl

1

を始端ラベル、v

1

=IM(x)としたとき、(l

1

,v

1

)から

始まる停止する計算(l

1

,v

1

),…,(l

n

,v

n

)に対して定義され、

mP(x)=O

M

(v

n

)

である。

プログラムの同値性の定義

†

プログラムP,Qに対して，

mP=mQ

が成立するならば，PとQは機械Mに関して同値（

M-同値

）

であると呼ぶ。

†

P,Qをプログラムとするとき，任意の計算機械Mに対して，

M-同値、すなわち、mP=mQが成立するならば，PとQは

強同値

(strongly equivalent)であると呼び，P≡Qで表す

機械の同値性

†

機械M,M’に対して，任意のプログラムPを与

えたとき，m’Q=mPとなるプログラムQが存在

するならば，機械M’は機械Mをシミュレートす

る

という．

†

M,M’ が互いにシミュレートするとき，MとM’は

互いに同値であるという．

Q2:強同値性の証明

†

ホワイトボードに描かれた2つの流れ図プロ

グラムが強同値であることを示してみよう。

FYI

[1] R.バード著、土居範久訳、『プログラム理論入門』、培風館、

1981．

[2] 伊藤貴康、『ソフトウェア工学基礎論』、丸善、1981．

[3] B.メイヤー著、二木他訳、『プログラミング言語理論への招

待』、アスキー出版局、1995.

1

情報システム基礎実験

第3回

演習: PHPの基礎

参考文献：山田和夫（著） 『基礎からのＰＨＰ』 （ソフトバンククリエイティブ, 2007） 2

本日の内容

1. WebアプリケーションとHTMLの概要

2. PHP演習 （Hands on）

3. これからグループで作っていくGoogleガ

ジェットに関する説明

1．Ｗｅｂアプリケーションの仕組

みとＨＴＭＬの概要

4 データ ベースエンジン プログラム サーバA サーバB サーバC World Wide Web (通常 WWW, Web などと略される) はインターネットやイントラネッ トで標準的に用いられるドキュメントシステム．HTMLという言語で文書の論理構造や 見栄えを記述し、文書の中に画像や音声など文字以外のデータや、他の文書の位置 (ハイパーリンク)を埋め込むことができる。

2

5 <HTML> </HTML > <HEAD> </HEAD> <TITLE> </TITLE>

HTMLとは

• HTML（Hyper Text

Markup Language）は

文書の性格を表す「タ

グ」と呼ばれる記号を

付けて記述する方法を

定めた標準である。

• 「タグ」を使って，文書

のタイトルやレイアウト，

文字の色など表せる。

<BODY> </BODY> <H1> </H1> <P> </P> <UL> </UL> <LI> <LI> <LI> 6

ハイパーリンクの仕組み

<HTML> </HTML > <HEAD> </HEAD> <TITLE> </TITLE> <BODY> </BODY> <H1> </H1> <A HREF= </A> ここをクリック "http://www.xxxx.ac.jp"> <A>タグのなかで、リンク先の WebページのＵＲＬを書くと、ブ ラウザ上で、リンクが表示され れる。 URLは、Web上のドキュメント の住所に相当するもの。 7

URL（ Uniform Resource Locator ）

scheme://host.domain[:port]/path[#anchor][?keyword]

どのプロトコル で情報をやりと りするか 例： http ftp telnet サーバの「住所」であるドメイン名 例： www.is.me.titech.ac.jp ドキュメントの「住所」 例： /files/paper.htm はFilesフォルダーの下の paper.htm というファイル IPアドレスを電話番号に 喩えるなら、ドメイン名は 電話帳に登録されている 名前に相当する 8

HTML (Hyper Text Markup Language)

<HTML>

<TITLE>HTML example page</TITLE> <BODY>

<H4>Example Page</H4>

Click <A HREF="http://www.is.me.titech.ac.jp">Here</A> to go to Iijima Lab Web site.<BR><BR>

Laboratory Member<BR>

<IMAGE SRC="picture.jpg" width="200"> </BODY>

3

9

HTTP (Hyper Text Transfer Protocol)

でWebページを取得 Step 1

[クライアントからサーバへの要求]

GET /test.html HTTP/1.0<CR>

[サーバからクライアントへの返答] HTTP/1.0 200 OK^M

Date: Tue Jan 18 16:19:48 2008 GMT^M Server: NCSA/1.0a^M

MIME-version: 1.0^M Content-type: text/html^M ^M

<HEAD>^M

<TITLE>HTML example page</TITLE>^M </HEAD>^M

<BODY>^M

<H4>Example Page</H4>^M Click ^M

<A HREF="http://www.is.me.titech.ac.jp">Here</A> to go to Iijima Lab Web site.<BR><BR>^M

Laboratory Member<BR>^M <IMAGE SRC=“picture.jpg">^M </BODY>^M </HTML>^M ₁₀

Webアプリケーションの仕組み

データ ベース エンジン プログラム HTTPD プログラム エンジン リクエスト レスポンス クライアント サーバ

HyperText Transfer Protocol Daemon

WWWで、クライアントと サーバ間で通信するため の約束事 ネットワークリクエス トを受け、必要な処 理を行う「裏」で動く プログラム。 例： POST /register.php name = 花子 name_kana= はなこ 例： POST /register.php name = 花子 name_kana= はなこ

2．ＰＨＰ演習

12

準備

1.

PCを起動し、ログインする。

2.

ブラウザを起動し http://iskiso.hustle.ne.jp/ にアクセスし、

このＵＲＬをブラウザの「お気に入り」に追加する。

3.

次に、下記レンタルサーバのホームページにアクセスし、こ

のＵＲＬをブラウザの「お気に入り」に追加する。

http://www.hustle.ne.jp/login.cgi

4.

ホワイトボードに書かれているユーザID／パスワードを使っ

て、レンタルサーバにログインする

5.

ログイン後、画面左下にあるリンク [ファイルマネージャー]を

クリックし、ファイルマネージャ画面で、自分のチームナン

バー（二人一組の演習用）のフォルダーをクリック。

注意： サーバにログイン後、ファイルマネージャー以外の機能は、一切使わないよう にしてください。ファイルマネージャー以外の機能を使って、操作を誤った場合、クラス 全員が演習を続けられなくなる可能性がありますので、十分注意してください。

4

13 重要： 各自、自分のチームナンバー のフォルダーの下に作ったファイルを 置く。それ以外のところでファイルを置 いたり、変更したりしてはいけない。 誤って、他の人のフォルダーを操作し ないよう、よく確認してから作業してく ださい。 14

ファイルマネージャの使い方

ファイル名を入力し [ファイ ル作成] をクリックすると、 ファイルが作成され、画面 上部のファイル一覧に表示 される。 ファイル作成後、ファイ ル一覧からそれを探し 出し、[内容の編集]を クリックすると、中身を 作成・変更できる。 15

最初のPHPプログラム

自分のフォルダのしたで、helloWorld.phpというファイ

ルを作り、以下の内容を入力し、保存してください。

<HTML> <HEAD><TITLE>Hello</TITLE></HEAD> <BODY> <?php

echo Hello, world!; ?> </BODY> </HTML>

紙版配布資料参照

16

プログラムの説明

モード開始記号

<?php

echo ‘Hello, world!’;

?>

モード終了記号

ＰＨＰの命令

※他の形のモード開始・終了記号も幾つかある。 （いずれもPHPプログラムの開始と終了を意味する）

5

17

ブラウザで結果確認

• ブラウザを起動し、作ったhelloWorld.phpにアク

セスして、結果を確認する

http://iskiso.hustle.ne.jp/12345/helloWorld.php

自分のフォルダーの番号をここ に入れる 18

ブラウザの[表示]-[ソース]機能

無事、”Hello, world!”が表示 されたら、ブラウザのメニュー から[表示]-[ソース]をクリック し、ブラウザがサーバから受 信ファイルの中身を確認しよ う。 質問： 皆さんが作ったPHPファイルとブラウザが受信したファイルは、どこが違うか？ なぜこのような違いが出るか？ 19

重要： エラーメッセージが出たら、

その内容をよく読む

• エラーが出たら、慌てずに、

エラーメッセージの内容を

読んで、原因を考える。

• 右の例は、「syntax

error(文法のエラー) があ

り、6行目前後で、”,”また

は”;”が抜けている」 とい

うメッセージですので、指

摘されたことをプログラム

で確認して、修正すれば、

解決です。

20

2つ目のプログラム

今度は自分のフォルダーのなかで、showDateTime.php

を作り、ブラウザから確認してみよう。

<HTML>

<HEAD><TITLE>2つ目のサンプル</TITLE></HEAD>

<BODY>

<?php

echo "<H1>" . date('Y-m-d') . "&nbsp;" .

strftime("%H:%M:%S", time()) . "</H1>";

?>

</BODY>

</HTML>

6

21

プログラムの説明

• ①、⑤ はＨＴＭＬの<H1>タグ (このタグで括られた

文字列は、表題の大きい文字として表示される)

• ③の”&nbsp;”はHTMLで半角スペースを意味する

記号

• ②、④はＰＨＰの関数を呼び出し、その関数が出力

した結果

echo "<H1>" . date('Y-m-d') . "&nbsp;" .

strftime("%H:%M:%S", time()) . "</H1>";

① ② ③ ④ ⑤ 22

フォーム送信プログラム

• フォームでデータを送信し、そのデータを表示

するプログラムを作って、ブラウザで試してみ

よう。データを入力するためのフォーム画面

（単純なHTML）とそれを受信して表示するた

めの画面(ＰＨＰで作る)を作る必要がある。

23

form1.html

<HTML> <HEAD><TITLE>フォームサンプル</TITLE></HEAD> <BODY>

<FORM action="./form1.php" method="POST">

<H1>挨拶の確認</H1>

<P>以下の人に挨拶します。</P>

<INPUT type="text" name="myName" value="" />

<INPUT type="submit" name="buttonName" value="送信する" />

</FORM> </BODY> </HTML> ① ② このテキストフィールドの name属性が 「myName」と なっているので、ここに入力 されたデータは、 「myName」として、サーバに 送信される。 「./form1.php」は同じフォル ダの下のform1.phpという ファイルを意味します。 この一行の意味は、同じフォ ルダの下のform1.phpに、 POSTという方法で、入力さ れたデータを送信する。

紙版配布資料参照

24

form1.php

<HTML> <HEAD><TITLE>フォームサンプル </TITLE></HEAD> <BODY> <H1>こんにちわ<?= $_POST["myName"] ?>さん </H1> </BODY> </HTML> ① フォームから送信されたデータを参照 するときは、 $_POST[“~”] を使う。 （～の部分は、name属性で指定した 名前）

紙版配布資料参照

7

25

配列について

• PHPの配列は変数の集合体のようなもので、下記書式で利

用する

$<配列名>[<キー>]

• PHPでは、数字も、文字列も配列のキーとして使うことができ

る。

例：

$month[1] = 31;

$month[2] = 28;

$iijima[“name”] =“Iijim Junichi”;

$iijima[“office”] =“W9522”;

$iijima[“mailBox”] =“W9-66”;

$iijima[“Email”] =“[email protected]”;

• 各月の日数を出力するプログラム form2.html, form2.phpを

作成し、ブラウザで結果を確かめてみよう。

26

form2.html

(配列とフォームを使うプログラム)

<HTML> <HEAD><TITLE>フォームサンプル2</TITLE></HEAD> <BODY>

<FORM action="./form2.php" method="POST"> <H1>配列を使うプログラムです。</H1> <P>この月は何日あるか？</P>

<INPUT type="text" name="month" value="" />

<INPUT type="submit" name="buttonName" value="送信する" /> </FORM> </BODY> </HTML>

紙版配布資料参照

27

form2.php

(配列とフォームを使うプログラム)

<HTML> <HEAD><TITLE>配列の基本のサンプル</TITLE></HEAD> <BODY> <?php

$month[1] = 31; $month[2] = 28; $month[3] = 31; $month[4] = 30; $month[5] = 31; $month[6] = 30; $month[7] = 31; $month[8] = 31; $month[9] = 30; $month[10] = 31; $month[11] = 30; $month[12] = 31; $thisMonth = $_POST["month"];

echo $thisMonth . "月は" . $month[$thisMonth] . "日まであります"; ?> </BODY> </HTML>

紙版配布資料参照

28

分岐処理について： if~else文

• If文の書式

if (<条件>)

{

条件が成立するときに実行する処理ブロック

}

else

{

条件が成立しないときに実行する処理ブロック

}

さて、 if文を使って、先ほど作ったform2.phpに入力ミスのチェッ

ク機能を追加しましょう。

8

29

form3.html

(配列とフォームを使うプログラム)

<HTML> <HEAD><TITLE>フォームサンプル2</TITLE></HEAD> <BODY>

<FORM action="./form3.php" method="POST"> <H1>配列を使うプログラムです。</H1> <P>この月は何日あるか？</P>

<INPUT type="text" name="month" value="" />

<INPUT type="submit" name="buttonName" value="送信する" /> </FORM> </BODY> </HTML>

紙版配布資料参照

30

form3.php

(if文、配列とフォームを使うプログラム)

<HTML> <HEAD><TITLE>配列の基本のサンプル</TITLE></HEAD> <BODY> <?php

$month[1] = 31; $month[2] = 28; $month[3] = 31; $month[4] = 30; $month[5] = 31; $month[6] = 30; $month[7] = 31; $month[8] = 31; $month[9] = 30; $month[10] = 31; $month[11] = 30; $month[12] = 31; $thisMonth = $_POST["month"];

if ( $thisMonth >= 1 and $thisMonth <= 12 ) {

echo $thisMonth . "月は" . $month[$thisMonth] . "日まであります"; } else { echo "1から12の整数を入力してください。"; } ?> </BODY> </HTML>

紙版配布資料参照

３．iGoogleガジェットについて

32

Googleガジェットと一般のWebページの違い

• 基本的に、一般のWebページで出来ることが、

Googleガジェットのなかでも出来る。ただし、以下の

ことに気をつける必要がある：

– 小さい枠（「インラインフレーム」）の中で表示する必要が

ある。

– JavaScript機能のほどんとが利用できるが、一部利用で

きないものもある。

– 通常、ユーザがフォームから、サーバ側のプログラムにリ

クエストを送信した場合、そのレスポンスを返すとき、別の

Windowを開いて表示することになる。（例： Wikipedia検

索ガジェット）

※工夫をすれば、別Windowにしないことも可能。

9

33

Google ガジェットを使うには

1. igoogle( http://www.google.co.jp/ig) にアクセスし、googleアカウントをつく

り、ログインする。 2. [コンテンツを追加] ページで、使いたいガジェットを選ぶか、[フィードやガ ジェットを追加] をクリックして、ガジェットのURLを入力して追加する。 簡単なガジェット の例を見てみよう 34 このガジェットのURLは http://g.1o4.jp/module/ wikipediasearchbox.xml <?xml version="1.0" encoding="UTF-8" ?> -<Module>

<ModulePrefs title="Wikipedia 検索" title_url="http://ja.wikipedia.org" directory_title="Wikipedia 検索" description="フリー百科事典「ウィキペディア （Wikipedia）」検索ボックス"

screenshot="http://g.1o4.jp/module/wikipediasearchbox.png" thumbnail="http://g.1o4.jp/module/wikipediasearchbox_thumbnail.png" author="G-FAN" author_email="[email protected]" author_location="Japan" height="40" scrolling="0" render_inline="optional" />

<Content type="url" href="http://g.1o4.jp/module/wikipediasearchbox.html" /> </Module> wikipediasearchbox.xmlというXML形式のドキュメントの中で、ガジェットの基本情報（ガ ジェット名、作者、作者のメールアドレスなど）が記述されている。また、 wikipediasearchbox.html というドWebページを読み込んで表示するように指示している。 35

Googleガジェットの仕組み

クライアント Googleの サーバ Googleの システム データ ベース エンジン プログラム H T T P D プロ グ ラ ム エ ン ジ ン H T T P D 36

Googleガジェットを作るための技術

• ガジェットを作るのに、HTMLと簡単なXMLを書く必

要がある。その他に使う技術は、必要な機能によっ

て変わる。

必要な機能 使う技術 沢山の情報を、自分のサーバー上で蓄積・管理する データベース、PHP ユーザに、情報を登録してもらい、それを蓄積・管理する データベース、PHP 動きのあるユーザインタフェースを実現する（例：マースで通過 すると絵が変わる） JavaScript, 場合によってはスタイルシート ユーザが入力した情報を元に、他のWebサイドから情報を収集 し、集めた情報の形を整えて、ユーザに返す JavaScript, 場合によってはPHP ユーザの設定にもとづいて、他のWebサイトからリアルタイムに 情報を集め、形を整えて表示する JavaScript, 場合によってはPHP 文字の色、行間など、きめ細かい書式を設定して、きれいな ユーザインターフェースを作る スタイルシート