「情報処理III」話題メモ
これは、同時進行で3回の「情報処理III」があるために、なるべく
話題に不公平が無く同じような話をするために、主に最初に講議のある
水曜日1限目に話題とした事柄のメモを、個人的な備忘録として置いた
ものです。欠席した学生はあとから追いかけるために利用できるかも
しれませんが、そういう点はあまり考慮せずに書き付けていますので、
まぁ読み流す程度としておいて下さい。(^_^;)
初日(10/4)
- イントロ、講議ローカルルール、リテラシ
- TAは佐々木先生(^_^)
- 今日のセキュリティ「貴方の足跡はログで常に記録されている」
- 「SUAC内」(www.is.suac.ac.jp)と「SUAC外」(www.suac.ac.jp)の区別
- 今日のキーワード「URL」
- ホームページの発信→HTMLファイルをQドライブの「public_html」フォルダに置く
- ファイル名には「半角英数字」だけを使う。日本語厳禁
- ファイル名のピリオド以降を「拡張子」と言う
2日目(10/11)
- 情報演習室に来たらまず学外URLアクセスでプロキシのパスワードを入れよう
- 今日のキーワード「HTML」、DNS、プロキシ、キャッシュ
- 今日のセキュリティ「ワンタイムパスワード」、Secure IDカードの実物
- いよいよ「ホームページの作り方」
(http://www.suac.ac.jp/~nagasm/joho3/tutorial/index.html)
をゆっくり始めよう
- HPのHTMLソースはNetscapeの「ページのソース」で必ず見える(秘密にできない)
- 上手いHPテクニックは「ページのソース」でイタダキ(^_^)
- タイトルは単なる題名でなく、ブックマークのリストとなるので重要
- タイトルは「半角英数字」だけを使う、という習慣がお薦め
- HTMLでは「改行」「タブ」「(半角)スペース」は無視される
- BODYタグのオプション(1) 背景色とテキスト色、光の3原色、16進数表現
- 本日はtutorial005まで(^_^;)
3日目(10/18)
- パソコンの階層の話 - ハードの階層、OSの階層、アプリケーションソフトの階層
- OSには現在、大きく3種類ある。Windows、Mac、Unix。いずれ*******は消える。(^_^;)
- 今日のセキュリティ「セキュリティ・ポリシー」
- セキュリティに関して不正行為の実例デモ。「WinNukeによる攻撃」「キャッシュの
情報を抜き盗るページ」「NTのパスワードクラック」
- セキュリティ上もっとも危険なのはWindowsの人。不正者はメジャーな
Windowsを狙うし、ユーザの利便性を口実にMicrosoft社はセキュリティ上の
リスクをユーザの自己責任に押し付けるというポリシーであるため。
- 「Windows環境でパソコンを使う人は、いつ全てのデータが消えても
構わないという奇特な人」
- 画像データについて
- スクリーンショットは画素ごとにカラー値を持つ。BMP,PICT,RGB。
- これをインターネットでは圧縮されたJPG(JPEG)かGIFに変換して利用する。
- ホームページ上に見える画像は全てイタダキ可能。ただし著作権と肖像権を
十分に考えること。(^_^;)
- BODYタグのオプション(2) 背景画像
- 本日はtutorial006まで(^_^;)
4日目(10/25)
- 「今日のセキュリティ」は無し。どんどんぶっ飛ばす !
- "URL"再考(1) ファイルとディレクトリ(フォルダじゃなくて)
- "URL"再考(2) file://とhttp:// 他人の褌の活用
- 水平線<HR>
- センタリング<CENTER>
- 段落<P>
- 強制改行<BR>
- HTML破り(^_^;)の引用<PRE>
- 見出し<H1>-<H6>
- フォントサイズ<FONT SIZE="**">
- フォントカラー<FONT COLOR="******">
- ブリンク<BLINK>
- 強調文字<B>など
- 本日はtutorial015まで(^_^;)
5日目(11/1)
- 「今日のセキュリティ」は無し。どんどんぶっ飛ばす !
- デジカメがやってきた(^_^)
- デジカメ画像の扱い方「トリミング」「レタッチ」
- GIF画像とJPEG(JPG)画像の使い分け
- 箇条書き<OL><UL><LI>
- HTMLの箇条書きの概念の重要性「人間は知的な仕事をするべし」
- HTMLの発想の原点は「LaTeX」にあり!
- いよいよリンク。<A>タグの威力。(^_^)
- これぞホームページの王道・インラインイメージ<IMG>
- リンク+インラインイメージ=リンクボタン
- 本日はtutorial021まで(^_^;)
6日目(11/8)
- 「今日のセキュリティ」不正行為の実例デモ
- 本日でtutorialシリーズ(HTMLの基礎)はオシマイ(^_^)
- リンクカラー(BODYタグのオプション)
- ターゲットウインドウ(Aタグのオプション)
- ↑を悪用した悪戯セキュリティホールの作り方(^_^;)
- コメント
- ダイナミックドキュメント
- 強制改行の取り消し(^_^;)
- 配置、回り込み
- ページ内リンク(Aタグのオプション)
- メイルをいただく方法
- 画像表示のサイズ指定(IMGタグのオプション)
- テーブル(作表)
- フレーム(ブラウザ内の画面分割)
- そして、これらを使ったホームページ作成の課題(^_^;)
7日目(11/15)
- ファイル名について(重要)
- 手元のパソコンでは見えているのに、学内サーバに置いたページで、画像が
壊れて「見えない」ページが続出している(^_^;)
- この原因は、ファイル名に使用する文字(大文字・小文字)の不整合にある
- パソコン(Windows/Macintosh)は大文字・小文字を区別しないので、
考慮しないファイル名(画像ファイル名と、HTML内からURLで呼び出す
ファイル名とが、大文字小文字のレベルで一致していない)でも「見えて」しまう
- サーバは一般にUnixのシステムだが、Unixはファイル名の大文字小文字を
厳格に区別するので、対応したファイル名が存在しないと解釈して
「見えなく」なる
- 対策は、自分でファイル名に使用する文字を統一すること(長嶋の場合には、
全てのファイル名は小文字を使用し、HTML内の指定も必ず小文字としている)
- タグの文字は大文字小文字は区別ナシ。これと違うことを認識すべし
- ファイル名に日本語を使ったりスペースを使うのは論外(^_^;)(^_^;)
- サウンドについて(optional)
- ホームページにサウンドを盛り込む、という話題は「情報処理III」ではoptionalと
する。課題では必要条件としないので、今日の話は聞きたい人だけ聞くこと(^_^;)
- 技術造形学科の学生は専門科目(「サウンドデザイン」等)で、みっちりやります(^_^)
- 詳しい解説は図書館の「コンピュータサウンドの世界」(長嶋洋一)を参照のこと
- サウンドには大きく二つあり、「音響」「音楽」で扱いが異なる
- 「音響」は、パソコンに付いているサウンドレコーダ等で簡単に録音でき、フリーウェア
やシェアウェアで簡単に加工できる。WindowsのWAV形式データはインターネット
では使わないので、AIFFかAUかMP3に変換すると、リンクのHREF先として指定するだけで
ブラウザがサウンド再生システムをインストールしていれば、鳴る(^_^)
- 著作権のある音源(CDやラジオ放送など)をMP3とかにしてホームページに置くのは
JASRACの手入れを受ける違法行為であるので注意のこと
- 「音楽」は、いわゆる「打ち込み(DTM)」ソフト等で音楽データを並べた
MIDI形式のファイルとする。ただしこれには音楽的知識なりアレンジの
ノウハウなりが必要となり、「情報処理III」の内容を超える。興味のある人は
特別講座でみっちり伝授する予定(^_^)
- MID形式のファイルも、リンクのHREF先として指定するだけで
ブラウザがサウンド再生システムをインストールしていれば、鳴る(^_^)
- ページ内にMIDデータの自動演奏を組み込むには、EMBEDタグを用いる
- インターネットで公開されているMIDIデータは、元々の作曲家の死後50年が
経過して著作権が切れている曲であっても、打ち込みした人のアレンジという
著作物なので無断で使用することは違法行為である
- 海外では著作権が切れているクラシックの場合にも、日本は第2次大戦の
敗戦国で戦時加算規定(戦争中は著作権のカウントが停止していた(^_^;))により
著作権が残っている場合があるので注意
- 結局、自分のオリジナル作品でなければサウンド関係は著作権の問題が
根強く関係してくるので、ホームページでは注意が必要である
8日目(11/21,22)
- 今回は、課題締め切り期限まであと1週間ということで、「演習のみ」とする
- 火曜日5限クラスは、上記「7日目」をちらっと読んでおくこと。
サウンドの実例は省略して、水曜日3/5限に追い付いて、今後は先行する予定
- デジカメ撮影、画像編集などを積極的に進めること、これまでの内容で未消化な部分を
納得するまで聞いて身に付けることを主眼とする
9日目(11/28)
- 今日は「クリッカブルマップ」について(^_^)
- このページを参考にして、自分なりの画像で
クリッカブルマップ(クライアントサイドイメージマップ)を作ってみよう(^_^)
- クリッカブルマップを実現する方法としては、歴史的には大きく3種類ある。「情報処理III」では
もっとも歴史的には新しい手法であるクライアントサイドイメージマップ
しか扱わないが、他の手法も重要なので、作り方はともかく、参考に知っておくこと
- Webサーバ側にCGI(Common Gateway Interface)という機構を設定して、サーバ内の
プログラムに情報を引き渡して処理を行い、その結果をHTMLファイルと同じ形式の情報と
して返す手法。HTMLの歴史のスタートとともにあった手法。実例としては、
このページ
の、占いの項目を選ぶ部分がCGIによるクリッカブルマップである。マップ画像内で
クリックしたマウスの座標が、ブラウザからサーバのCGIに渡される。
これはサーバ内のイメージマップ処理プログラムに引き渡され、
あらかじめ座標領域ごとに定義したオリジナルの「占い」プログラムを起動する。この
占いプログラムの出力はHTMLファイルの先頭から読み出したような文字列になって
いるので、これが返ってきたブラウザは、普通のHTMLファイルだと騙されて(^_^;)、
その内容を「占い結果」として表示する
- CGIを使わずに、新しく登場してきたJavaを使う手法。Javaはホームページ上(ブラウザ内)で
走るプログラムを任意に作れる環境なので、画像(マップ)を表示して、その画像内でクリック
されたマウスの座標を取得すれば、リンクだろうがサウンドだろうが自由自在である。
このページの例(ブラウザの「詳細」の設定で
「Javaを有効にする」としていないと何も見えない(^_^;))では、マウスが指定領域にかかると
その部分がハイライト表示され、さらにサウンドが鳴るようになっている。このような動的な
クリッカブルマップとなると、JavaかShockwave(Director)でないと実現できない。
JavaとShockwave(Director)については、後日、解説の予定(^_^)
- CGIもJavaも使わないクライアントサイドイメージマップ。これは
HTML規格が拡張され、ブラウザが対応するようになって初めて実現された。今となっては、簡単な
クリッカブルマップには、これが一番(^_^)
- 画像処理ソフトでいちいち座標領域を調べてメモしてHTMLに書いていく、というのは面倒なことで、
実際には「ホームページ制作・お手軽ソフト」ではAREAタグのパラメータを自動生成してくれるが、
そのHTML規約に従ったメカニズムを知っておくことは、あらゆるホームページの仕掛けを「ソースを
見る」で理解できるためには重要なので、「テキストエディタで、素のHTMLとして作れる」ように
なってから、ツールを活用するようにしよう
10日目(12/5)
- 前回の「クリッカブルマップ」の補足として、片山さんのアイデアに刺激されて、
「HTMLの自動生成」というページを作ってみた(^_^)。
興味のある人は解析して勉強してみて欲しい。このジャングル内に皆んなのページから
リンクするのは自由。青木ヶ原の樹海みたいなもの(^_^;)として活用しては?
- 情報処理IIIでは、JavaScriptはまったく
扱わない。それには理由がある。これを、千葉クンの作品をサンプルと
してJavaScriptを紹介しつつ
このページで述べてみた。
興味のある人は解析して勉強してみて欲しい
- 今日のテーマは、アニメーション(^_^)
- アニメーションを実現する方法には、現在では以下のようにたくさんの手法がある。
アニメーションを実現するためには、時間的に複数の画像表示を管理実行する
「エンジン」と呼ばれるソフトウェアが必要であり、それぞれの手法ごとに、
どのようにアニメーションが実現しているかを理解することも重要である。
今回は、その中で「アニメーションGIF」を紹介して実際に制作する
- 複数の同一サイズGIF画像を、時間情報とともにコマ送りの原理で格納した、拡張された
形式のGIFファイルによる「アニメーションGIF」。もっとも簡単にアニメーションが
実現されるので、よく使われる。アニメーションのエンジンはブラウザ自体が内蔵
- Javaを使えば、任意のGIF画像を時間的情報とともに画面内の任意の位置に表示
できるので、サウンドやマウスクリックに対応したゲームのようなものまで制作する
ことができる。そのサンプルとしては
このページとか
このページとか
を参照のこと。エンジンは内部的プラグインであるJava仮想マシン(いずれ解説の予定)
- Shockwave(Director)を使えば、アニメGIFやJavaでできないような高度な
アニメーション(ムービー)を実現できる。そのサンプルとしては
このページとか
このページとか
を参照のこと。アニメーションのエンジンは、Shockwave(Flush)プラグイン(いずれ解説の予定)
- QuickTimeやAviファイルという、完全にムービーとなった形式もアニメーションの
一種となる。制作には専用のソフトを使い、再生のエンジンとしては、外部アプリケーション
として専用のプレーヤを起動したり、プレーヤ用のプラグインを必要とする
- ネットワークが太い場合には、アニメーション/ムービーのデータをいったんダウンロード
(蓄積)してから「再生」するのでなく、インターネットから刻々とリアルタイムに動画情報
を受け取って表示する、ストリーム方式も可能となる。これはいわばインターネット・テレビ
のようなもので、送り手の側ではストリーム情報を送るサーバが必要となるが、受け手の
側のエンジンとしては、ストリーム再生アプリケーション等で対応できる
11日目(12/12)
- アルゴリズム、プログラミングについて(重要)
- エミュレーションについて(重要)
- Javaについて(optional)
- Javaの話題は「情報処理III」ではoptionalとする。課題では必要条件としないが、
ソフトウェアの概念の理解やセキュリティにも関係する重要な内容なので、
話としては聞いて理解を目指そう
- 技術造形学科の学生は専門科目(「ソフトウェア論」等)で、みっちりやります(^_^)
- 詳しい解説は図書館の「Java & AKI-80」(長嶋洋一)等を参照のこと
- SUACのWebに置いた解説としては、以下を参照のこと(ブラウザの設定で
「Javaを有効にする」としていないと何も起きないので注意)
- Java入門(1) Javaとは何ジャワ(^_^;)
- Java入門(2) 初めてのJavaプログラミング
- Java入門(3) プログラミングしないJava活用
- ホワイトボードに描く「図」は、Web資料では置かないので、自分で写して理解
して欲しい。それほど重要なことを説明の予定(^_^)
12日目(12/19)
- 「SUACプロキシ人災障害」について
- 「輻輳」について
- 「他人の褌」Java活用法について
- Javaソースが公開・提供されているページからソースを入手して、改造しつつ
コンパイルする
- Javaアプレットが公開・提供されているページからダウンロードする
- 「著作権フリーJavaアプレット素材集」のサイトやCDROM製品の利用
- Webに置いてあるJavaアプレットをURLとして指定する
13日目(1/16)
- 情報システムの脆弱さについて
- 「未来のコンピュータ」レポートについて
- LaTeXについて(トラブル続きだったので本年度やれませんでした(^_^;))
- Shockwave/Directorについて
14日目(1/23)
(この日は最終課題 の
制作日として出席を取りませんので、質問や「ヘルプ!(^_^;)」のある人だけ出てきて下さい)