コンピュータ言語の発展と応用分野〜筑波 EDP-entry: ビジネス戦略を支える IT 進展〜
久野靖∗

2007.3.5

1

コンピュータ言語□ コンピュータ言語:□ 「人工言語」がいいのか?

• 曖昧さを排した簡潔な規則→コンピュータで曖昧さなく容易に処理、コンピュータで扱うために設計された人工言語• 反対語:
英語• 注:

自然言語 (人間が日常使う言語)…日本語、• 質問:「GUI(グラフィカルユーザインタフェース) の方が、言語 (文字の並び) よりも優れていると思いま

言語…)

すか?」

→ 意思の疎通□ 「言語」であることによる利点…

意志の伝達
考え

音や文字の
並び方の規則（言語）• 自然言語は本質的に曖昧 (人間の性質) →「曖昧でないこと」が求められる場面には向かない

エスペラント (人間が日常使う言語だけど人工□ なぜ「言語」が大切か?

• 自然言語処理は実用化されつつあるが、完全でない• 少数の語彙と規則だけで、ほとんど無限の意味を伝達可能 (小学校で習う漢字は 800 字とか)考え

• 「予め決めておかなかった意味」を組み合わせて作
り出すことができる

物理媒体（音声、紙の上の文字等）□ もちろん「言語」であることの弱点もある• 「文字」「語彙」「文法」「文の作り方、読解方法」を• 並び方の「規則」(=言語) →その規則を利用することで、情報の流通や意思の疎通が可能になっている「学習」しなければならない。きちんと学習しないと「間違った文」ができてしまい意味が伝わらない• 言語以外の意思疎通手段もあるが、言語の効率、正• これに対し、GUI であればメニューなどにより「語確さにはかなわない

彙」が見えるので覚えなくてよい。いつ何が押せる/• (人類の歴史において「言語の発明」は重要な節目)選べるかもコンピュータが規制してくれるので「間違った文」にはならない。その替わり、表現できる□ 「コンピュータ言語」の用途

範囲は限られている• コンピュータと人間のやりとりも「文字情報」が中• 結局「何が優れている」とは一律に言えない「どういう目的で」「どういう状況で」を決めなければ評価

心 (効率、正確さ)• 文字の並びにおける「規則」(=言語) により情報を伝達→コンピュータ言語できない□ 1 節のまとめ• ただし、主に「人間→コンピュータ」の方向で用いる。逆向きは自然言語とか、画像、動画、音などが• 「文字の並び」の規則→言語使われる (←人間の柔軟性)• コンピュータ言語→人間からコンピュータへの情報

• 質問:

伝達に有用

「コンピュータに、自然言語 (日本語) で指• GUI など別の手段も普及しているが、言語には「多示を出せたらいいと思いますか?」様性」「柔軟性」などの利点がある∗ 筑波大学大学院経営システム科学専攻

1

2

さまざまな言語• これらの基本的考え:論理的マークアップ (「段落」「見出し」「強調」など文書の各部分の「意味」を指定□ コンピュータの歴史の上ではさまざまなコンピュータ言• 質問:「このような方法より Word みたいにメニュー語が出現し、使われて来たで指示する方がよい?」• 実際には「○○語」という名前はつけていないかも□ マークアップ言語を使うことの利点…

知れない。書き方の規則→言語だから• さまざまな環境に応じて自動的に表現を選択し整形• 質問:「どんな用途のコンピュータ言語があると思いますか?」できる。たとえば HTML は「ブラウザが整形して表示」するため、PC、携帯などさまざまな環境でそれ□ プログラミング言語 --- コンピュータの動作内容 (=プなりに見えるようにできるログラム) を記述するための言語• 多様な処理の可能性。たとえば 200p くらいある文書• 初期のコンピュータ→「0」「1」の列を直接メモリに書き込み実行: 機械語について「『強調』という文字を全部赤字にしろ」と• CPU が実行する命令 (足すとか転送とか) に名前をつ

ら簡単

けて記述:

言われたとき、Word だと大変 (ですよね?)、HTML な• ワープロソフトの場合は「A4 版」とかサイズが決まっ

アセンブリ言語ているので直接文字サイズ等を指定も可能。しかし• より「人間に分かりやすい」記法、特定の CPU に依流用は大変。結局「何が一概によい」とは言えない

存しない記法:高水準言語• 例:

C、C++、Pascal、Basic、Java、…

□ データ表現も「言語」と考える…

• 質問:「なぜこんなに色々なプログラミング言語があるのだと思いますか?」• 例: CSV…Excel 等のデータを「,」で区切って出力する機能による (セルの中に「,」が入っていると CSVではどうなるか知ってますか?)□ プログラミング言語がたくさんある理由…

• 例:• プログラミング言語に関する研究の進展→より新し

MML…MIDI による音楽のデータを記述• その他、さまざまな場面で「決まった形で」データ

い (利点を持った) 機構や記述方法の発明→それを採を保存する→言語

り入れた言語• コンピュータの高度化→ソフトウェアも爆発的に複 □ XML →汎用に使えるデータ表現言語 (形式)
雑なものに→従来の言語では書くのがつらい→より• もともとは Web で HTML が非常に普及したことに発端
大きなソフトが書ける言語への進化• HTML では特定のタグ群が決まっていて増やしたりで• コンピュータの用途がさまざま→それぞれの用途にきない (文書の記述のみに特化)応じた (その使い方が記述しやすい) 言語の方が有利• データの種別に応じて自分でタグを定義できるよう→用途ごとの言語
したい→ XML (eXtensible Markup Language)• プログラミング言語を作るのが趣味な人が沢山いる• たとえば書籍のデータとか…
から?
<book><author>久野＿靖</author><title>入門 JavaScript</title><isbn>4756138713</isbn></book>• これらの理由は他の言語が色々ある理由としてもあてはまるが、プログラミング言語が圧倒的に色々あることは事実• 質問:「なぜわざわざこんな長々しい形をわざわざ使うの?」□ マークアップ言語 --- 文書を記述するための言語• 文書は「見出し」「段落」「図」など多くの要素から □ XML を使うことの利点/欠点成っている→どの範囲が何であるかを「印」をつけて示す• 汎用性が高く、入れ子構造 (ある部分がさらに細かい構造を持つ) がそのまま扱える<p>このように<em>強調</em>の範囲も印で表す。</p>• 処理するためのツール (ソフト、ライブラリ) が既に• 文書作成には TeX、Web ページ作成には HTML/XHTML

ある→いちいち作らなくてもいい、生産性が高まる、

が使われる

安心

2

• このため今日では多くのデータ表現が XML に基づく

• オブジェクト指向データベース

ものになってきている。HTML の XML 化→ XHTML• ここでは「言語」を中心に扱う• 一方で、人間が直接読み書きするには長くて煩わし□ たとえば、「温室の温度調節システム」を考える

いという弱点もある→専用の言語やデータ表現が選択される場合もwindow• たとえばプログラミング言語の表現を XML にするというのはあまりない□ 2 節のまとめＣ• さまざまなコンピュータ言語がある

sensor• プログラミング言語→プログラムを書く。例:
Java

C、

• マークアップ言語→文書にマークアップ。例:
HTML

TeX、

• データ表現言語→さまざまなデータの表現。例:XML □ 旧来の考え方→手続き+受動的なデータ

heater• 「センサーを見て、気温が下がってきたらヒーターを通電するが、温度が上がりすぎたらヒーターを切プログラミング言語の発展

3る」「気温が上がってきたら窓を開くが、下がってき□ プログラミング言語は多くの変遷を経て来ているたら閉める」など機能中心に考える• 制御する要素や条件が複雑になるとごちゃごちゃになりやすい• 1960 頃→科学技術計算言語 (FORTRAN)、事務処理言
語 (COBOL)• 1975 頃→汎用言語 (Pascal、C)□ オブジェクト指向だと…

• 1980 頃→オブジェクト指向言語のはじまり

暑いよ！

• 1995 頃→実用的オブジェクト指向言語 (C++、Java)window• 同時期→ WWW の急速な普及、スクリプト言語 (Perl、
JavaScript) の活用

閉めて
いい？

• 現在→ Light Language(軽量言語)…スクリプト言語の発展概念 Perl、JavaScript に加えて、PHP、

止めて
いい？

Python、Ruby、OCaml など
sensor3.1

オブジェクト指向言語□ オブジェクト指向とは?

寒いよ！

heaterプログラム (ないし様々なソ

フトウェア) が扱う対象を自立した「もの」(オブジェク• オブジェクト指向→「気温センサ」「ヒーター」「窓開閉装置」などの「もの」を考える→「気温センサ」

ト) と見る「考え方」□ オブジェクト指向が取り入れられている分野はいろいろ

は温度が低いと「ヒーター」、高いと「窓」に注意をある

喚起→「ヒーター」は注意を喚起されると、定期的に「センサ」に温度を尋ね、一定以下だと通電、十分暖• オブジェクト指向プログラミング

かいならヒーターを止めて仕事を終る→人間にとっ• オブジェクト指向ソフトウェア工学 (分析、設計、開て考えやすく、適度な大きさに分けて考えられる

発、UML…)• オブジェクト指向ソフトウェア技術 (コンポーネン □ …でト、分散オブジェクト、…)• 「結局、従来と同じことをやってる」と思いますか?
3• 「それは大変よさそうだ」と思いますか?

□ 3.1 節のまとめ□ オブジェクト指向言語が持つ機能 (クラス方式の場合)• オブジェクト指向…ソフトウェアが扱う対象を「もの」としてとらえる「考え方」• クラス定義…「データ (インスタンス変数)」と「処• オブジェクト指向言語…オブジェクト指向の考え方を素直に表現できるような設計のプログラミング言語

理 (メソッド)」を一体としてパッケージ…抽象デー
タ型の機能• ソフトウェアの大規模/複雑化→オブジェクト指向に
より「複雑な部分」をパッケージしてまとめるやり• 継承機能…「あるクラスを土台として別のクラスを定義」これにより新しいクラスが簡単に作れる (差方が不可欠となった

分プログラミング) が、クラス同士の関係が込み入るため弊害も指摘• 動的分配…ある変数 x に対して処理 (メソッド) 呼び

3.2

出しを行った場合、x に現在入っているオブジェクト

スクリプト言語/軽量言語□ 伝統的なプログラミング言語:に対応したメソッドが呼び出され実行される←現実「ソース作成→コンパ

イル→組み立て (リンク) →実行」の手間が必要…重量

世界とよく対応し有用な機能

級 (?)□ 「クラス方式」以外に「プロトタイプ方式」もある• これに対し、「ソース作成→直ちに実行」のような「軽い」言語が便利と考えられるようになってきた(JavaScript など) ←スクリプト言語などに適した方式□ 「オブジェクト指向」がよいかどうか…

• 実際はそのような言語は古くからあった (BASIC、
LISP 等) が、傍流とされてきた←実行速度が遅い等• プログラムの動作そのものは同じことをさまざまに書ける。当然• CPU が非常に高速になったため、それでも性能的に問題がなくなったことが普及の理由• 人間にとって考えやすくさせてくれるならそれは「よいこと」• 質問:「どのような言語があると思いますか?」• 問題は「その分だけ余計な概念が増えて負担になる」□ Perlことを差し引いてトータルで儲かっているかどうか• スクリプト言語の最初としては「シェルスクリプト」□ 「オブジェクト指向」が主流となっている理由…
「バッチファイル」など「コマンドを並べておき順次実行」するものがあったが、言語としての機能は不• ハードウェア性能の向上 (CPU 能力増大、メモリ容量十分だったの大規模化) →ソフトがいくらでも載せられる→今日のソフトウェアは大規模化• これを受けて Rally Wall がスクリプトでありながらさまざまなプログラムを書くのに十分な機能を持っ• このような複雑なコード→「オブジェクト」とその組み合わせという形でなければ実質作れない状況にた言語として開発→手軽で便利なため広く普及した(特に CGI…Web ページのデータ処理…のための言語□ 単純に「開発する言語が変わった」以上の多様な手法として)• クラスライブラリ→汎用性のある機能を提供する大• 変数の冒頭に＄、@などさまざまな記号を置くことを量のクラスを用意→そこから機能を選んで呼び出す

始めた

ことで「書かずに済ます」• 「1 つのことでもさまざまに便利な書き方ができる」• コンポーネント→オブジェクトを「ソフトウェア部品」としてパッケージ→他のソフトウェアに「その特徴□ JavaScript

まま」組み込んで使える• フレームワーク→自分が作成するオブジェクトをほぼできあがっているソフトウェアの「穴」に「はめ• Web ページ記述 (HTML) の中に埋め込んで動作させることで、ページ内容を自在に操作できることをめざる」ことでソフトが完成して作られた言語• いずれも「できているものを活用」(書かない) こと• Netscape 社 が 開 発 → 普 及 し て 事 実 上 の 標 準 →で生産性を高めるが、その「できているもの」を熟MS Internet Explorer な ど も「 互 換 な 言 語(JScript)」を搭載している知しないと使えないという敷居の高さもある4

• 今日では Web ページ内容をより動的にすること、ま• 個々のページやそれが使う機能がある程度独立してたページを表示したままでサーバと通信して多様な動作→小さい案件を短時間で開発する必要に迫られ機能を提供すること (Ajax) などで活用ることが多い• このような場合に、開発言語としてもスクリプト言語を使い、短時間で設計から実装までをこなさざる• 詳しくはまた後で…
□ PHP

を得なくなっている• Perl が CGI むけ言語として普及したが、Perl でページ内容を全部「print」で打つのは面倒• このため「ほとんどは HTML で一部分だけプログラムを埋め込む」方法が考えられる→その先駆けが PHP
言語• 時間が短いこと、言語が「簡便な」タイプであること
は従来のソフトウェア開発と大きく違う→とまどいもある。開発方式も試行錯誤がある段階 (例:XP、

アジャイル開発)• ユーザ (発注) 側も、「まっとうな仕事」と「やっつけ」の違いが分からないという問題<table border="2"><tbody><?phpfor($i = 0; $i < 10; ++$i) {echo "<tr><th>$i</th></tr>"}?></tbody></table>□ 3.2 節のまとめ• スクリプト言語/軽量言語の普及← CPU の能力向上、
オブジェクト指向機能の普及などによりこれらの言• さらに、多くの機能をライブラリとして提供語が実用になる• 記述の便利さとあいまって、現在、Web ページの内• 誰でも小規模な、しかしそれなりに役立つプログラ

容を (サーバ側で) 処理する言語として最も広く使ムが書けるようになっている

われている• その一方で、そのような「アマチュアっぽい」環境/
言語で「お仕事の」ソフトを開発しなければならな□ Python --- Perl より「きれいな」構文 (→書きやす

いという変化にとまどいもあるさ) で普及してきているスクリプト言語。制御構造の範囲を「字下げ」で示すところが特徴。
□ Ruby --- 日本生まれのオブジェクト指向スクリプト言

Web 言語

4

語で国際的にもファンは多い。Ruby で実装されている

Rails という Web 向けフレームワークが 2006 年に人気 □ Web 言語…という言葉があるわけではないが (久野の造語)、ここでは「WWW に関連するコンピュータ言語」程
を呼び、その利用のために Ruby を学ぶ人も増えた度の意味で使う□ OCaml (Objective Caml) --- 関数型言語 ML のオブ

ジェクト指向拡張から来ている。型推論による強い型検 □ なぜ「WWW に関連…」か?
査と関数型パラダイムにより実行時のエラーが少なくで• ユーザ数の多さ:に WWW のユーザきるとされる。
□ スクリプト/軽量言語とオブジェクト指向…深い結び付き← WWW の影響力の大きさ

PC を使っている人ならほぼ確実• どんな新しいことでも」ブラウザ上で動く」ならそれで使える (インストールレス)• オブジェクト指向機能を活用することにより、スク
リプト言語部分で大量に書かなくてもそれなりの機 □ なぜ「…に関連するコンピュータ言語」か?
能を実現できる• 最初に述べたように「言語であれば色々応用できる」• 既存のオブジェクトを活用するだけであれば、重量ため、またプログラミング言語であれば「動作を記
級の言語よりも手軽な言語の方が向いている述できる」ため• 質問:「これらの普及により、ソフトウェア開発のあり方がどのように変化していると思いますか?」

4.1□ 現在多く行われているソフトウェア開発→ Web ベースでのさまざまなシステムの構築

HTML+CSS□ HTML(HyperText Markup Language) --- Web ページを記述するマークアップ言語

5• Tim Berners-Lee (WWW を作った人) が生み出した• 世の中の人はいい加減に書いている人がかなり多い

もの (HTML 0.9?) から徐々に発展、最終版は HTML
4.01

が、ブラウザは「エラーがあってもそれなりに表示」
することになっているため、表示されてしまい間違いに気付かないまま• Tim はマークアップの形式 (「< ... >」というタ
グの形) を SGML から借りて来て使った。SGML では• チェックするツールがあるがあまり使われていなかったりする「どんなタグ」は規定しないので、段落、見出し、箇条書きなど Web ページに有用そうなタグを定義して• しかし正しくないと CSS や DOM(後述) の適用で問題→正しさを確認することは大切HTML と名付けた。

• SGML(Standard Generalized Markup Language)□ HTML では (HTML 4.0 以降)「構造」と「表現」を分離
は「さまざまな文書のマークアップに使うための標• 構造…「この範囲が段落」「この範囲が見出し」など、準形式」として制定されたが、ややこしくて使いに文章の意味に対応
くいので低迷していた→ HTML で一躍脚光を浴びた(しかし今では XML が主流に)• 表現…文字や地の色、大きさ、配置など「見え方」に関する指定すべて□ HTML の 変 遷 … HTML 0.9 → 1.0 → 2.0 → 3.2 →• font タグ (文字のサイズや色を変更)、b タグ (太字)

4.0/4.01などは「表現」であるため、HTML 4.0 以降では非推• 最初は img タグ (画像) とかもなかった→必要のつど奨になっている→ CSS の役割に機能を拡張

• 2.0 くらいで一応の形が整う (Mosaic 時代)• しかし現在でも CSS を覚えないで font タグを使っている人は多数• しかし Netscape ブラウザが「独自拡張」のタグを多• 質問:「HTML を書くときに font タグを使いますか?」

く追加→それを「後追い」して HTML 3.2 ができた

□ CSS(Cascading StyleSheet) … HTML において表現• 3.2 は「表機能」「font タグ」等により表現力が大きくなったを指定する記法• スタイルシートの基本的な考え方: 「段落はこう」「見出しはこう」のように HTML の要素ごとにその要• 質問:「ブラウザメーカが独自のタグを追加するのはいい?悪い?」□ HTMLの 標 準 化 … WWW

素をどういう見え方にするか指定できる→ 1 つのスタ

コ ン ソ ー シ ア ム

イルシートで多数のページを統一した見え方にでき(http://www.w3.org/) 主導る (いちいち表現指定のタグを書かなくてよくなる)• さらに必要なら「この ID を持つ HTML 要素」「このclass 指定を持つ HTML 要素」などの指定も可能だ• ブラウザ戦争 (Netscape vs MSIE) の時→「こっちのブラウザはこんなかっこいい機能がありますよ」とし、〜の内側の〜などの指定も可能→表現の指定対

独自拡張

象は柔軟に選択できる• 「ブラウザによって見え方が違う/見えない」などの問題が発生• 指定できるものも、色 (文字、背景)、柄、余白 (マージン、詰め物)、枠など非常に多様• 現在では「標準に準拠する」(標準外の機能は使わな• 質問:「HTML のフレーム機能を使いますか?」い) でほとんどの制作者が合意 (個人でも作れるのでそこは野放しだが)• 質問:「次の HTML は正しい?

□ Web ユーザビリティ…ページの「使いやすさ」という概念

正しくない?」• ヤコブ・ニールセンの「ウェブユーザビリティ」と<p>たとえば<ul><li>Netscape</li><li>IE</li><ul>などが代表的なブラウザです。</p>

いう本あたりから知られるようになった• 例:フレーム機能 (1 つのページを複数の枠に分ける)→ユーザビリティ上よくないとされる…特定の構成□ 「正しい HTML」の難しさ…

でブックマーク/リンクできない• p の中に ul は入れてはいけない (最初に定義したと• 現在では多くのサイトが CSS で表現指定したページ

きにそうした)を作っている (フレームは 2 ちゃんねるなど特殊な用途に限定されるようになっている)6□ 4.1 節まとめ<?xml version="1.0" encoding="iso-2022-jp"?><!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN""http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd"><html xmlns="http://www.w3.org/1999/xhtml" xml:lang="jp"><head><title>test</title></head><body><p>これはテストです。</p><p>たとえば MathML で<math xmlns="http://www.w3.org/1998/Math/MathML"
xmlns:html="http://www.w3.org/1999/xhtml" xml:lang="j<mfrac><mi><html:a href="../index.html">x</html:a></mi><mrow><msup><mi>x</mi><mn>2</mn></msup><mo>+</mo><mn>1</</mfrac></math>なんていうのも書けます。</p></body></html>• HTML は SGML を元にした言語 (記法) で、変遷してきている。現在の HTML 4.01 が最終版

• 標準からの逸脱がいつも問題に→検証ツールを使った正しい HTML が望まれる• HTML では構造と表現を分離→表現は CSS で指定する• Web ページのユーザビリティが重視されるようになっ
ている

4.2

HTML+CSS 以外のコンテンツ□ Web のコンテンツは HTML+CSS が基本だが、それ以外にも多様なものが存在している• マルチメディア…画像、音、動画。画像は GIF、JPEG、PNG のみブラウザが直接サポートしページ内に入れられる (IE だと BMP も)• MathML 自体は「形」だけでなく「計算式」の機能も持っている→式の変数に値を入れて計算してみる、グラフにするなどの用途も可能 (ブラウザには計算機能はないが)• ブラウザが直接サポートしないものは「ヘルパーア□ SVG (Scalable Vector Graphics)
プリケーション」(ダウンロード後自動的にソフトが起動) または「プラグイン」(同様だがブラウザの窓• グラフィクスにはピクセルグラフィクス (画像、細の中で実行される) による。例:音、動画、PDF

かい点の集まりで表現) とベクターグラフィクス (図• ヘルパー/プラグインは標準で入っていれば手間はいらないが、変わったものだとユーザが自前でインス

形、輪郭などの制御点とそれらを結ぶ曲線/直線の式

トール必要。Web 経由でできることが多いが、それ• ピクセルグラフィクス→通常の画像• ベクターグラフィクス→ SVG。図形は「無限に伸びる
針金の図形にスクリーントーンが貼られている」ものと思えばよい→個別に回転、移動などが自由にできる。

で表現) があるでも抵抗が大きい• 質問:「XHTMLって使っていますか? 使うとしたら
なぜ?」□ XHTML…HTML を XML の構文に合わせて定義し直したもの• 機能的には HTML と同様 (だったら何で使うの?)• XML のツールで扱うことができる• XML には namespace 機能があり、複数の XML ベースの言語を一緒に入れられる→ XHTML のページの中にそのようなものを埋め込めるというのも利点• Mozilla Filrefox などではいくつかの XML 言語もサポート→それらのコンテンツが埋め込める• MSIE も追従してくれれば普及するのだけど…
□ MathML (Mathematical Markup Language)• 数式を記述するためのマークアップ言語• HTML では数式は「画像」で埋め込むしかなかったが、それはあまり嬉しくない (サイズが固定など)• MathML で数式を記述しておけば、文字サイズ変更に
つれて大きさが変化する。

7<?xml version="1.0" encoding="iso-2022-jp"?><!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN""http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd"><html xmlns="http://www.w3.org/1999/xhtml" xml:lang="jp"><head><title>test</title></head><script type="text/javascript">
var s0, e0, x = 100, v = 3; r = 0, d = 3;function init() {s0 = document.getElementById(’s0’);s0.onclick = function() { v += 1; };e0 = document.getElementById(’e0’);e0.onclick = function() { d = -1.1*d; };setInterval(step, 50);}
function step() {x = (x+v)%450; s0.setAttribute(’x’, x);r += d; e0.setAttribute(’transform’, ’translate(300,75) r}</script><body onload="init()"><p>SVG の例題</p><svg width="400" height="150" xmlns="http://www.w3.org/2000/<g fill-opacity="0.3"><rect id="s0" x="100" y="20" width="50" height="50" fil• たどっていて「プログラム」があるとそのプログラ<ellipse id="e0" cx="0" cy="0" rx="70" ry="40" fill="red"/>ムを実行し、結果を返送する:</g></svg></body></html>http://www.ex.com/a/b/PGM/c/d□ CGI(Common Gateway Interface)• ブラウザが URL を提示しサーバに接続→ URL がプロ
グラムの場合、サーバがプログラムを呼び出す→プ• MSIE は独自拡張の「VML」言語をサポート (標準規格である SVG に合流して欲しいのだけど…)

ログラムが結果を返送→結果をサーバが読み取って□ 4.2 節のまとめ

クライアントに返送→ブラウザが結果を表示• HTML+CSS 以外のコンテンツとして、マルチメディアと XML 言語とがある• このとき、サーバとプログラムの間でデータをやりとりする約束ごとが CGI• ブラウザが直接サポートしないものはヘルパーアプ• しかし単に CGI といった場合、CGI に従って動作するプログラムのことを指すことが多い

リケーションやプラグインで対応

4.3• XML 言語は XHTML の中に埋め込んで活用可能。MathML□ ブラウザ/サーバ/CGI プログラム/間の情報のやりとり
や SVG など
• サーバからの情報伝達→環境変数 (プログラム内から getenv() で読み出せる)

サーバ側プログラミング• ブラウザからの情報伝達→ HTML のフォーム (入力部品) のデータ→ get または post で送信□ Web における「プログラムの出番」は「サーバ側」「クライアント側」に大別される• get の場合、URI の末尾に「?」に続けて指定→△見えてしまう、○ブックマークなどにそのまま登録可能• サーバ側 --- Web サーバの上でプログラムが動作するもの• post の場合、URI とは別に送信し、CGI では標準入力から読み込み→見えない、大量でも平気• クライアント側 --- Web クライアント (ブラウザ)• プログラムからの情報→標準出力に「ヘッダ+本体」

上でプログラムが動作するものの順に出力。ヘッダはサーバが受け取り処理、本体• 加えて、最近では両者を連携させるもの (Ajax) が流行し普及したがそれは少し後ではブラウザまで返送• サーバ側とクライアント側でできること (得意とす □ サーバ側プログラミングの得失ること)、できないこと (不得手なこと) が明確に決• 得意とすること…サーバ上のリソースにアクセス。たまっている
とえば DB やファイルに情報を格納することはサーバ• 質問:「Web サーバの仕事とは要するに何をするこ側でないとできない。
と? 」• たとえば複数のユーザ (ブラウザ) 間で情報を共有したいなら、それをサーバ上に格納しておく以外の選□ サーバ側プログラミングの原理…

択肢はない• Web サーバは「階層構造のディレクトリに HTML ファ
イルを格納していて URL で指定されたファイルを返• 不得手なこと…高頻度の応答。ブラウザとサーバの間にはインターネットがあり、また CGI などのオー送する」というイメージを持たれていることが多い

バヘッドもあるので短時間での応答は難しい (デー• しかし原理的には、「http://サーバ/パス…」のパス部分をどう解釈するかはサーバの勝手。サーバのタ量の大きさはネットの高速化でだいぶ問題にならなくなってきたが)仕事は「提示された URL に対して対応するコンテン• また、従来のパラダイムでは「送信ボタン→サーバへ伝達→ CGI プログラムの処理→結果返送→表示」

ツを返送する」こと• 実際には階層ディレクトリと URL のパス構造が対応となるため、沢山情報をセットしてまとめて送信し、していることが多いが、たとえば Apache の場合…

結果をゆっくり待つという「古典的」スタイルになっ• だとっていて「ファイル」があるとそのファイルを返送てしまう (Ajax はこれを緩和)

8□ CGI に使われる言語の変遷… C → shell script →• 共有データを扱うので、セキュリティ対策が重要

Perl → PHP• C で書くのはサーバが UNIX ベースだったから。しか4.4

し面倒なだけであまりいいことはない

クライアント側プログラミング□ クライアント側プログラミングの原理…

• shell の場合、中から他のプログラムを呼び出してデータを加工するのが便利だが、多数のプログラム• Web ではサーバ上にコンテンツが置かれている (アタの組み合わせでごちゃごちゃになりやすく、さらにリマエ)。この一部としてプログラム (ソース、バイパッケージしにくい (よそに持って行くと呼び出すナリ) を用意プログラムが無かったり動作が違ったりする)• Perl は文字列加工を得意とするので HTML を組み立てるのには向いており、それ単独で多様な作業ができるので普及した (今でも多く使われている)。ただし HTML を沢山生成するときそれを文字列リテラルやヒアドキュメントにしないといけないのが不便• このプログラムが他のコンテンツと同様にブラウザ側に転送されてきて、そこで動く• ということは、ブラウザ側に「そのプログラム言語の」言語処理系 (実行系) が存在している必要がある□ ブラウザ側に言語処理系がある→大きな制約

print <<EOF<tr><td>$i</td></tr>
EOF• ケース 1:

まれている…JavaScript と、MSIE の VBScript だけ• PHP は HTML の中に埋め込む形で書けることと、Web• ケース 2:のサーバ側プログラミングで使うような機能のライ「プラグイン」(HTML 画面の四角い一部

領域をその言語の表示用に割り当てて使わせる…ブブラリを充実させていて「便利で取り付きやすい」こ

ラウザ側で最初から用意しているのは Java(アプレッとで普及ト)、Flash にほぼ限定□ サーバ側プログラミングの注意点…セキュリティ• ケース 3:

プラグインの自動設置…ユーザに「これを設置してください」というのは結構な障壁• サーバ側プログラムは重要な共有リソース (DB 等)にアクセス…もともとそのためのものなので必須• ケース 4:

プラグインではなく別のコードとして独自実行…JSF など…処理系を設置してもらうのは非• しかし相手にする「データ」はブラウザ (他人の持常に困難ちもの) から送られて来る→その他人がどんな悪意を持っていても安全でなければならない• 例:

ブラウザに最初から言語処理系が組み込□ クライアント側プログラミング言語…

SQL インジェクション…フォーム入力値が送信• JavaScript:

されてきて、それを元に DB 問い合わせ SQL 文を「連広く普及。Ajax などでも使われる事実上の標準結」で組み立てるが、入力値に「問い合わせ以外の• VBScript:

悪意ある操作」が連結されていてそれを実行してしMS は普及させたかったと思うがジリ貧。

たまに JavaScript ではできないが VBScript だとまうできることがあるのでそういう時に使うかも (ただ• 対策→「;」など制御文字をエスケープ/削除する

し IE 専になるが)(△)、ストアドプロシジャ(SQL 文は予め SQL 処理
系に格納しておき、パラメタ文字列のみ渡す) の使用• Java Applet:Java ブームの立役者だが今日ではマイナーになっている。ただし Java はさまざまな( ○)ことができる汎用言語なので「インストールレスで□ 4.3 節のまとめ

動くアプリ」を提供するとためには使われることがある• Web プログラミングはサーバ側とクライアント側に
大別• Flash: 多様なグラフィクス表現が容易に実現可能なため、広く普及。
「Flash アニメーション」サイト• サーバ側プログラムは CGI インタフェースに従い動作

多数• サーバ上の共有データにアクセスできるが、細かい• 質問:「処理系の設置以外にも大きな制約がある。何応答には向いていないだか分かりますか? またそれはなぜ?」• 言語はざまざまに変遷してきているが、今日では PHPが多い。Perl も多く使われている□ 最大の制約:「セキュリティ制約」

9• ファイルは一切読み書きできない

4.5

JavaScript• ネットワーク接続は「そのコードが置かれていた元□ JavaScript はブラウザに直接組み込まれて実行されるのサーバとの間でだけ」行うことができるという点でプラグインベースの Flash、Java Applet と• ウィンドウを作る場合は「ブラウザの窓」であるかは違う「アプレットの窓」などと明示し、小さい窓は作れない• プラグインベースだと「四角い領域」が設定され、その中だけがその言語の「領分」になる• 質問:「なぜこれらの制約があるか分かりますか?」□ なぜこれらのセキュリティ制約があるか?

• JavaScript で は ブ ラ ウ ザ が や る こ と す べ て がJavaScript によって制御可能な領分 (ただしセキュ• クライアント側プログラミングのコードは「読み手がページを開くと」「自動的に手元のマシンに転送さリティ制約があることは前述の通り)• これにより、さまざまな応用の可能性 (Ajax を含む)

れてきて」「そこで動く」。この動いたプログラムがもしも…

• 「ユーザの機密情報を探って報告する」とか「ファイルを破壊しまくる」ものだったら? →ファイルア□ JavaScript コードは「いつ」実行されるか?

• script タグの内側に実行文を書く→そのタグが読み込まれつつある時点で実行される• その場合、その中に document.write() があるとそこで出力したものは script タグの位置に挿入される

クセスの禁止• 「あちこちにイタズラメールを送る」ものだったら?
→元サーバ以外へのアクセス禁止<script type=text/javascript>
document.write(Math.random());</script>• 「ログインウィンドウのふりをして ID とパスワードを盗む」「ずっと画面の隅に存在していてユーザの行動を記録する」ものだったら?

• マウスクリックなどイベントがあった時に実行される
ように HTML 側や JavaScript コード側で指定 (イベントハンドラ) →そのイベント生起時に実行される。

→特別な窓であることを明示、大きさも 1x1 みたいに小さくはできない• 質問:「そんなに制約が強いのにあえて使うのはな<span onmouseover="alert(Math.random())">Here</span>ぜ? 」• 普通は常時実行される部分で初期設定や関数定義を□ これらの制約にも関わらず使われる理由

行い、イベントハンドラで動作を開始させる• ユーザインタフェースの拡張/改善 … HTML の標準 □ フォーム部品 (GUI 部品) の読み/書きの機能だけでは受動的な入力部品しかない。それを入• 古くからある機能。今日でも、ユーザが入力したもれ換えたり動作を自動的にサポートしたりできる…
のをまずその場でチェックしてから CGI に送信する形でよく使われる (ただし JavaScript でチェックし
JavaScript(Ajax もこの延長)ても、CGI 側でも再度チェック必要)• 対話的グラフィクス … HTML+マルチメディアコン<script type=text/javascript>
function calc() {var x = parseFloat(
document.getElementById(’t0’).value);
var y = parseFloat(
document.getElementById(’t1’).value);
document.getElementById(’t2’).value = x+y;}</script><input id="t0" size="3" value="1">+<input id="t1" size="3" value="1">=<input id="t2" size="3" readonly><button onclick="calc()">Calc</button>

テンツでは単に絵や動画が見られるだけだが、それを自在に動かしたりユーザ入力に反応させたりできる…Flash• インストールしなくてもアプリケーションが動かせる…Java Applet(データの保存はサーバ側に通信して行う)□ 4.4 節のまとめ• クライアント側プログラミングはコードがサーバから
ブラウザ側に転送されてきて実行 (モバイルコード)□ DOM (Document Object Model) --- HTML や XML の• 従って強いセキュリティ制約が避けられない• その一方で静的な Web コンテンツを動的かつ対話的なものとできる可能性→広く使われるようになっている

10

ドキュメントをツリー構造に対応させ (モデル化)、そのツリー構造にアクセス (参照、改変) する API(呼び出しインタフェース) を規定

• W3C による標準。DOM level 2(DOM2) が主流。Core、 □ JavaScript のセキュリティ制約
HTML、CSS、Event、Range/Traversal などに分かれている (getElementById() は Core に含まれている)• たとえば DOM2 CSS を使うとスタイルを JavaScript
側で設定できる• 前述の「ファイルアクセス不可」「ネット接続は元サー
バだけ」以外にも固有のセキュリティ制約• history オブジェクト:

ブラウザのヒストリが格納されているが、その内容は JavaScript からは読めない。
「いくつ前へ戻る」という形でだけ利用できる<script type=text/javascript>
function f1() {document.body.style.backgroundColor =’rgb(255,200,’+ Math.floor(255*Math.random()) + ’)’;}
function f2() {document.body.margin =Math.floor(50*Math.random()) + ’px’;}</script><button onclick="f1()">F1</button><button onclick="f2()">F2</button>• location オブジェクト:

窓やフレームごとに存在し、そこに表示されているコンテンツの URI が格納されているが、JavaScript からは「同じサーバのコンテンツの時」だけ内容が読み出せる。設定する(指定した URI に表示を切替える) ことはいつでも可• DOM によるページ内容アクセスも別窓/フレームに対して実行できるがこれも「同じサーバのコンテンツの時」だけ• 質問:「なぜこれらの制約があるのでしょうか?」□ DOM2 HTML --- HTML の あ ら ゆ る 要 素 や そ の 属 性 をJavaScript 側から変更することができる。
□ JavaScript のセキュリティ制約の理由…
<ol id="o1"><li>リストです。</li></ol><button onclick="f1()">F1</button><button onclick="f2()">F2</button><script type="text/javascript">function f1() {var e = document.getElementById(’o1’);
var s = Math.random() + ’ です。’;
var t = document.createTextNode(s);var l = document.createElement(’li’);l.appendChild(t); e.appendChild(l);}function f2() {var b = document.body;var e = b.firstChild;b.removeChild(e); b.appendChild(e);}</script>• history が全部見えてしまうと、ページが表示された時に「過去の履歴を調べて収集」するようなページが作れてしまう→個人情報の漏出• location が見えてしまうと、定期的に別の窓の表示
URI を監視することで history と同様のことができてしまう• ページ内容が操作できてしまうとさらに恐ろしいことに (他サイトのページ内容の書き換え、ショッピングサ
イトに入力したクレジットカード情報の盗み見、…)• 実は「サーバが同じ」だけでなく「ディレクトリが同じ」まで必要 (レンタルサーバで複数人が使用することがあるから)。さらにディレクトリを短くできる。サーバも複数サーバで運用することがあるから□ innerHTML --- すべての HTML 要素オブジェクトについて、その内側にある HTML コードを参照/設定 (!!) 可能

ドメイン名を一定まで短くできる。これらのチェックにバグがあるとセキュリティホールに• DOM2 HTML でやるより簡単なのでよく使われる。
MSIE が始めたものだが便利なので Mozilla など他 □ クロスサイトスクリプティング (XSS)のブラウザも追従• これだけ厳重に制約で守ってもサイト設計によって<input id="t0"><input id="t1">
は台無しに…
<button onclick="f1()">F1</button><button onclick="f2()">F2</button><script type="text/javascript">function f1() { alert(document.body.innerHTML); }function f2() {var x = document.getElementById(’t0’).value;
var y = document.getElementById(’t1’).value;
document.body.innerHTML =document.body.innerHTML.replaceAll(
new RegExp(x, ’g’), y);}</script>11• 具体的には、掲示板など「読み手が内容が書き込める」サイトで「HTML 可」のときに script タグを書き込むことで自分の JavaScript コードを埋め込む• その書き込みを見た人は知らないうちに (サイト作
成者ではない) 他人が用意した JavaScirpt コードを実行してしまう→そのサイトに対して打ち込んだ情報なのに他人に漏れてしまう• 対策は scipt タグが埋められないように書き込み内• ページやその内容の追加/更新/削除はすべて Web 経

容をチェックすること (各サイトの対策であり読み手

由で (ブラウザ上で) 行える→特定の作業環境が不要には危ないサイトを使わないことくらいしかない)• HTML ではなくより簡単なマークアップ方式で書ける• 複数の人が共同で作成することも用意□ 4.5 節のまとめ• デザインは CMS が管理 (テンプレート) →すべての• JavaScript はクライアント側プログラミングの中ページの見え方が自動的に統一されるでもブラウザに密着しているという特別な立場• DOM2、innerHTML などによりページ内容を自由に操 □ さまざまな CMS のカテゴリ
作可能• 汎用 CMS --- Zoops など• 複数の窓/フレームにまたがった操作も可能だが、そ• Wiki --- 誰もが内容を書き込み修正するというコれに関連してセキュリティ制約があるンセプト。Wiki 名 (大文字小文字混じりの名前と• セキュリティホール、クロスサイトスクリプティン[[xxx]] の形のもの) は自動的にリンクになりそこ
グなどの問題もある (ことがある)をたどると「空っぽのページ」ができているので、そ• 質問:「Web 2.0って何ですか?」

れを書き換えてページを作成• Blog --- カレンダーに関連づけて記事を書ける。

4.6

掲示板が設置でき読み手にコメントをもらえる。ト

Web 2.0 とプログラミング技術

ラックバックにより Blog どうしが相互につながりを□ Web 2.0 とは…

持てる• LMS (Lecture Management System) --- 大 学 の授業などで資料、課題、質問、レポート収集などの• 明確な定義はない。主要な特性として次の 2 点が挙げられる機能を科目単位で統合的に提供• 集合知 --- 特定個人/集団がサイトを作って情報発信するのでなく、多くの参加者が持ち寄った情報が全体として価値を形成□ サーバ側/クライアント側プログラミングとの関連…

• CMS はデータ (ページ内容) を保管するため、基本的にすべてサーバ側プログラミング技術 (設置と管理• リッチな体験 --- 従来の「単なるサイト」と区別される使いやすいインタフェースが必要)• しかしそう言われても…「掲示板」とかは違うのか?
「2 ちゃんねる」は Web 2.0 ではないのか? 「2 ちゃ• リッチな体験の部分ではクライアント側技術が使われる→ Ajaxんねる」にかっこいいインタフェースをつければい
いのか?

(よく分からないところ)□ Ajax (Asynchronous JavaScript with XML)□ Web 2.0 を体現していると言われるサイト/サービスな• これまでの Web は「ページ」単位でできていて、新しい内容を見る時はそのページに「遷移」していた

ど。足跡により誰が見に来たかが分かりつながりが• Google Maps などは「1 つのページを表示したまま」• SNS (Social Networking Sites) --- mixi
生まれる

次々に地図の上を移動していける→スムーズで使いやすい• Wikipedia --- 多くの人が自分の詳しい分野について書くことにより市販の百科辞典に見劣りしない詳• このためには (1) 表示側:JavaScript でページ内容

しさ書き換え (DOM)、(2) データ側:フォーム送信ではな
く JavaScript 内から「任意の時点でページ遷移せ• Google Earth --- 地球全体について広い範囲で倍率を変えて上空からの写真を見ることができる。確かに体験はリッチだが集合知なのかどうか?

• Google (検索) もある意味そう。多くの人が参照するページはランクが上がるため「集合知」を構成ずにデータを送り結果を受け取る」□ XMLHttpRequest --- Ajax で使われる通信機能• HTTP プロトコルによる Web サーバとの通信を起動
し、結果が返送されてきたら受け取れる。結果を「待□ CMS (Contents Management System) --- 従 来 のつ」こともできるが、それだと処理が「止まって」し「HTML+CSS で作成して設置」に変わるモデル

12• その他、ものを作って動かすこと、それを使ってもまうので通常は結果が来たらイベントハンドラが呼らうこと、教育/技術移転への適用などのテーマ

ばれるように設定 (非同期:Asynchronous)• 返送される結果は文字列としても受け取れるが、XMLデータを受け取るのが基本になっている→構造を持っ□ GSSM は情報技術関係の教員が充実していることが大きたデータを受け渡しできるに受け入れています• たとえば地図であれば「マウスをドラグしてスクロー
ル」→「地図画像のないところが表示範囲に入って来そうになる」→「その地図を取り寄せる要求を発行しておく」という形で使用□ Ajax の適用範囲拡大• Office スーツなども作れる --- ブラウザ画面でワープロ、表計算などが実行可能 (作成した結果はサーバに保存) → 将来はブラウザだけあればあとは「サービスと契約」するだけで手元の PC にはソフトを買わなくなるかも?

• Ajax で呼び出す機能 (API) を公開するところも --手元側で JavaScript を使ってこれらの API を呼び出すことで「自分のページ」に「さまざまな機能」を入れられるようになる• SOA(Service Oriented Architecture) --- Web
経由で呼び出せる機能/サービスを組み合わせて必要なサービスを作り出し企業の情報システムなどを構成する --- も Ajax 化が進むかも?
□ 4.6 節のまとめ• Web 2.0 --- 集合知とリッチな体験• 要素技術 --- CMS(サーバ側)、Ajax(インタフェース)• 今後、インストールレスの Web アプリがさらに発展
かも…

5

な特徴の 1 つであり、この方面に興味を持つ方を積極的

さいごに□ 久野の専門→プログラミング言語、プログラミング技術の応用、情報教育など• 学生さんの主要な研究テーマ…
• 「自分が扱っているドメインの専用言語」を開発…
「ゲームスクリプト記述」「実時間グラフィクス処理」「教育用オブジェクト指向言語」• 「特定用途に役立つ情報システムの要素技術」…「Webページ閲覧履歴からの検索効率化」「教育コンテンツの枠組み」「プラント制御システムのインタフェース」

13