ハイパーキューブでWeb（ホームページ）
が作れる！！
ハイパーキューブ
の 講習会版の起動画 面
このバージョンからhtml
ファイルを作成できるよう
になった。
形式は *.htm となる。
追加されたホームページの書き出し機能
学校で使われている教育用アプリケーションにはいろいろな種類があります。ワードプロセッサ、表計算、データベース、図形処理やインターネット閲覧ソフトなどいろいろなものがあります。
本日は、ハイパーキューブでＷｅｂ（ホームページ）を作成する授業の構成を考えて見ようと思います。
ｈｔｍｌ形式のファイルはパソコンの機種やＯＳに依存せずネットスケープなどのブラウザソフトで見ることができます。ネットワーク環境のあるパソコン教室があれば生徒の作品やレポートを授業で見たり発表する事が可能になります。
またサーバによってはＷＷＷサーバ機能を使えるものもあり、先生が作成したｈｔｍｌ形式のデータベースや教材などや生徒の作成した作品などを、教室内のイントラ環境で各端末から簡単に見たり利用したりできるようになります。回線で外部に接続できなくても授業に活用ができるのです。
１・１ファイル管理とファイル構造
現在、稼働しているWindows-OSを使うパーソナルコンピュータ（以下ＰＣ）は大きく分けて下の２種類に分類されます。（このほかにMac-OSを利用するＰＣもある）。
現在広く普及したDOS/V機をはじめ、過去、学校に導入されていたPC98シリーズなど様々なメーカーのＰＣが教育用に利用されています。
この２種類のＰＣはWindowsが動くという点では共通部分がありますが、内部処理やディスクドライブの割り当てなどに違いがあります。今後、PC-AT・互換機系の仕様になっていくことが予想されますが、本日の講座では９８系のＰＣを利用しますので、こちらのドライブ割り当てに従って話を進めますが、基本的にドライブの割り当ては次のようになります。
PC-ATまたはPC-AT互換機など Ａ：Ｂ： フロッピー Ｃ：ハードディスク Ｄ：その他
NEC・PC9821など（ＮＸは除く）Ａ：ハードディスク Ｃ：フロッピー Ｑ：ＣＤ−ＲＯＭ
基本的にハードディスクから起動しアプリケーションソフトなどを実行しますが、現在大容量のハードディスクを利用することが多いのでファイル管理とファイル構造を理解しておく必要があります。
またネットワークで接続されたＰＣ環境がコンピュータ教室では標準なのでファイルを共有したりプリンタを共有するという概念についても理解すると良いでしょう。
エクスプローラで見た階層化されたファイル
前ページの画像はVaioノートのＣドライブです。ｄｏｃというフォルダ（ディレクトリ）に書類関
係のデータがすべて入っています。
さらに、そのフォルダの下に階層化した文書フォルダを作って分類しています。さらに必要に応じて更に階層化したフォルダを作成する場合もあります。
いろいろな考え方がありますが、ハードディスクを分割しプログラムファイルなどを一方にデータ関係をもう一方においたりする事もあります。このあたりは好みの問題もあるのですが。整理されたディスクづくりを目指したほうが良いと思います。
フロッピーディスクは過去には利用していましたが、現在大きなデータが増えてきてハードディスクやその他の記憶装置（ＭＯ、ＺＩＰ、ＣＤ−ＲＷなど）を使うようになってきました。
ただし、データのバックアップをとっていないとあとで大変な状態になります。
整理された道具箱が使いやすいのと同じようにディスクの中身も整理できるといいですね。
ＦＤを使ってフォルダを作ってみよう
今回は作成したデータ
をもちかえるので、ＦＤ
を使ってフォルダを作っ
てみましょう。
エクスプローラまたは
マイコンピュータでＦＤ
ドライブを開き
マウスの右ボタンを押
します。
すると右の画面になり
ます。
そこで
＜新規作成＞→
＜フォルダ＞
を選び名前を付けます。
これで新規フォルダが
作成できます。
今回は画像を入れるフォルダとして
imagesというフォルダを作成します。
このほかにあとで必要に応じて、
フォルダを作ってみましょう。
しかし、ＦＤでは１．４ＭＢのデータ
しか保存できません。
圧縮していない画像ファイルなどは
多く保存できないことを頭に入れてお
いてください。
２・１ Ｗｅｂ（ホームページ）の設計
どんな情報を発信したいのか考えて見よう！！
・ハイパーキューブで絵を描いて文書を書いて自己紹介文を作成する。
今まで → ファイルに保存して、印刷しておしまい。
これから → ファイルに保存して、htmlファイルに書き出して、Ｗｅｂサーバに保存。 必要に応じて印刷をする。
ブラウザソフトを使っていつでも誰でも見ることができる。（イントラ環境でもＯＫ）
Ｗｉｎｄｏｗｓ９５にも簡易ＷＥＢサーバ機能やフリーなメールサーバーソフトがある。
index.htm Ｗｅｂの表紙 ○○.htm
＋−−−−−−−−−−−−−−−＋ ＋−−−−−−−−−−−−−−＋
｜１ ｜ ｜２ −−−−−−−−−− ｜
｜ ○○のホームページ ｜ ｜ ＋−−−−−−−−−−＋ ｜
｜ ｜ ｜ ｜ ｜ ｜
｜ ＋−−−−−−−−−−＋ ｜ ｜ ｜ ｜ ｜
｜ ｜ ｜ ｜ ｜ ｜ ｜ ｜
｜ ｜ ｜ ｜ ｜ ＋−−−−−−−−−−＋ ｜
｜ ｜ ｜ ｜ ｜ −−−−−−−−−− ｜
｜ ＋−−−−−−−−−−＋ ｜ ｜ ＋−−−−−−−−−−＋ ｜
｜ ハイパーリンク｜ ｜ ｜ ｜ ｜
｜ ｜ ｜ ｜ ｜ ｜ ｜
｜ ・○○へ ｜ ｜ ｜ ｜ ｜ ｜
｜ ・××へ −−−＋ ｜ ｜ ＋−−−−−−−−−−＋ ｜
｜ ・△△へ ｜ ｜ ｜
｜ ｜ ｜ ｜
｜ ｜ ｜ ・ホームページへ戻る ｜
＋−−−−−−−−−−−−−−−＋ ＋−−−−−−−−−−−−−−＋
××.htm △△.htm
＋−−−−−−−−−−−−−−−＋ ＋−−−−−−−−−−−−−−＋
｜３ ｜ ｜４ ｜
｜ ＋−−−−−−＋ ｜ ｜ ＋−−−−−−＋ ｜
｜ ｜ ｜ ｜ ｜ ｜ ｜−−−−−｜
｜−−−−− ｜ ｜ ｜ ｜ ｜ ｜−−−−−｜
｜−−−−− ｜ ｜ ｜ ｜ ｜ ｜−−−−−｜
｜−−−−− ｜ ｜ ｜ ｜ ＋−−−−−−＋ ｜
｜ ＋−−−−−−＋ ｜ ｜ −−−−−−− ｜
｜ ｜ ｜ ＋−−−−−＋ ｜
｜ −−−−−−−−− ｜ ｜−−−｜ ｜−−−−｜
｜ ＋−−−−−−−−＋ ｜ ｜−−−｜ ｜−−−−｜
｜ ｜ ｜ ｜ ｜−−−＋−−−−−＋ ｜
｜ ｜ ｜ ｜ ｜＋−−−−−−−−−−−＋ ｜
｜ ｜ ｜ ｜ ｜｜ ｜ ｜
｜ ｜ ｜ ｜ ｜｜ ｜ ｜
｜ ＋−−−−−−−−＋ ｜ ｜＋−−−−−−−−−−−＋ ｜
｜ ・ホームページへ戻る ｜ ｜ ・ホームページへ戻る ｜
＋−−−−−−−−−−−−−−−＋ ＋−−−−−−−−−−−−−−＋
Ｗｅｂのコンテンツ（内容）を作って行く前に紙に書いてみると全体が見えてきます。最終的にどのようなものになるのかを考えて設計してください。（今日は３ページ程度を目標にしましょう）
２・２ フリー素材やデジカメ・スキャナを使ってみよう
Ｗｅｂで使うことが可能な画像ファイルは ｊｐｅｇもしくはＧｉｆファイルです。この説明は略しますが、写真はjpeg、イラスト系はgifを使うことが多いようです。どちらのファイルも圧縮していますが、ブラウズ環境がそれぞれ異なるのでなるべく見る人の負担にならない大きさのファイルを使うようにします。今回はＦＤにあるsozlink.htmlというファイルをブラウザソフトで開いて見ることにしましょう。下のようなページが表示されたら、リンク先を開いて色々探して見てください。
この他に本日はデジタルカメラやスキャナを使っておかず＝素材＝（画像ファイル）を作ることができます。
設計にあった素材パーツを作って見てください。
２・３ 集めた画像ファイルを整理し保管する
この他にキューブペイントを使って画像データを作成することもできます。
このようにインターネット上や自分で作成したファイルの保存はＦＤの中のimagesフォルダに行ってください。
自分の考えるＷｅｂデザインに必要な画像がそろったら、ファイル名を確認しながらどこにどの画像を配置するのか考えて見てください。
この時に、設計用紙を使うとわかりやすいと思います。生徒には、ファイル名や配置がわかるような用紙を渡して授業をすすめています。
３・１ キューブワードで画像と文字を配置する
自己紹介
・ポテト君のページ
・玉ねぎ君のページ
・カボチャ君のページ
＋−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−＋
｜リンク先を指定すると上のように指定するファイルを表示するようなる。この時｜
｜注意することはパスの指定がこのソフトではファイルを参照し絶対パスになるの｜
｜でプロバイダのサーバにＦＴＰ（ファイル転送）をかけてそれを見ようとしても｜
｜fail not found のエラーが帰ってくるはずです。 ｜
｜プロバイダのサーバーのＯＳはUnixが多いのでファイル構造とファイル名の大文｜
｜字小文字の区別もきちんとされるので注意が必要です。 ｜
＋−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−＋
３・２ html形式のファイルに出力しよう
キューブワードで作成したイメージをＦＤに書き出しす作業は下の通りです。
ファイル の ホームページ書き出し で FDドライブに指定し、index.htmで保存します。
この時index.htmというファイル名にしておくと、ディレクトリを指定したとき自動的にこのファイルは実行されます。
この後、ブラウザソフトを使って閲覧実行しますが、うまくいきましたか？
イメージしたものと実際に出てきたものが違う場合があると思います。この時は修正を加えます。
３・３メモ帳を使った修正
windows９５ではアクセサリの中に「メモ帳」というテキストエディタや、「ペイント」という簡単な画像ツールがついてきます。
ソフトを買う予算がない場合、これらのものを使うことによって必要な作業を進めることが可能です。昨年まで本校には、Mac３台、windows９５３台の環境でしたが、エディターとして一太郎4.3をそしてDos版のハイパーキューブで作成した画像をWindows版のハイパーキューブでgifファイルに変換し（注Dos版は８色しか使えない）htmlファイルを製作しておりました。
よく教師は、○○がないからこんなことできないという発言をするのを見かけますが、自分がいかに工夫したのか、考えたのかと思ってしまいます。
また高スペックで新しいマシンを購入する方も多いと思いますが、本当に必要なのか吟味する必要があります。
メモ帳を使ってタグの修正やハイパーリンク先の修正を行います。
ハイパーキューブでは、文章中に作成した罫線はTDタグには置換されずテキストデータとして取り残されるようです。単純には表の組み込みができないようです。
この場合、参考書を何冊か用意しておくと良いでしょう。
何度か繰り返し納得がいけば本日の作業は終わりです。最後にインターネットの世界を覗いてみましょう。