Comments
Description
Transcript
Webページの開発について
Webページの開発について 特別支援教育部会 Ⅰ はじめに 昨年度より教材・教具のデータベースをWebページで公開できる方法を開発部会の技術的なテーマとし て取り組んできた。一番簡単な方法としては、Microsoft Accessでデータアクセスページを作成して公開 すればよいのだが、次の点でMicrosoft Access以外の方法で開発することにした。 ・ Microsoft Accessでデータアクセスページを作成するためには高度な知識が必要であり、開発部会の 全部員が知識を習得するのに時間がかかりすぎる。また、完成させたとしても一般的ではなく、それ 以後の発展が望めない。 ・ データアクセスページ自体が重く、校内のイントラネット上ならば可能ではあるが、インターネット 上では使用に耐えられるレベルを保証できない。 Microsoft Access以外の方法で教材・教具のデータベースをWebページで公開できる方法を開発する際、 次の点にポイントを置いた。 ・ 開発部会の部員で作業を分担できる。 ・ 数多くの教材・教具のデータベースを短時間で作成することができる。 ・ 技術的に難しくなく、誰でもWebページを作り替えたり、別のWebページを作成したりすることができ る。 以上の点に絞って使用するソフトを厳選した結果、IBMホームページ・ビルダー10以降に標準で付いてい る「データページ」を使用することにした。 Ⅱ IBMホームページ・ビルダーのデータページについて このソフトとAccessを比較すると次の表のようになる。 IBMホームページ・ビルダーのデータページ エクセルのシート Microsoft Access テーブル Microsoft Accessのテーブル IBMホームページ・ビルダー（10以降） クエリー マクロ Webページ フォーム 簡単な言い方をすれば、通常のWebページでは、１ページの中にフレームを作り、その中に文字を書き 入れたり写真を入れたりしてレイアウトを整える。 それに対してデータページはWebページと文字を２つに 分けて作ることになる。テンプレートになるWebページを一つだけ作り、文字をエクセルのシートから流し 込むのである。この方法ならば、数多くの教材・教具のデータをエクセルに書き込むだけで、一瞬でWeb ページが完成することになる。 実際のWebページで説明すると次のようになる。 （Ａ） （ＡＡ） （Ｂ） （ＢＢ） （Ａ）は一覧ページでどんな教材・教具があるのかを紹介している。 （Ｂ）は詳細ページで教材・教具 の詳しい説明を行っている。 （Ａ）から（Ｂ）へはリンクを貼っており、 （Ａ）の教材・教具名をクリック すると（Ｂ）が別ページで開くようになっている。 エクセルとの関係は、 （Ａ） 、 （Ｂ）がWebページのテンプレートで、 「ねらい」を例にとって説明すると エクセルの「ねらい（１） 」を（Ａ） 、 （Ｂ）の「$HPB_DB_nerai1$」に流し込むように関係づけを行ってい る。流し込んだ結果は、 （ＡＡ） 、 （ＢＢ）である。 Ⅲ 平成18年度 Webページ開発の結果と課題 IBMホームページ・ビルダーのデータページを使ってWebページを開発した結果と課題は次の通りである。 １ 開発部会の部員で作業を分担できる。 ・ ネット上の共有フォルダーにエクセルを置いたため各部員がデータを書き込むことができ効率よ く作業を進めることができた。 ２ 数多くの教材・教具のデータベースを短時間で作成することができる。 ・ Webページのテンプレートは１週間で完成できた。各部員が書き込んだエクセルをWebページに流 し込む作業は、データページの制限で１台で行わなければならないため作業の負担は大きかったが、 予定通り短時間で完成することができた。ただし、写真のリンク付けはエクセル、Webページ、写 真フォルダーの3点を関連づけなければならないため予想以上に作業時間がかかってしまった。 ・ IBMホームページ・ビルダー10では、基盤となるWebページのテンプレートが書き換えられてしま いテンプレートを作り替えるたびにすべてのデータを消してWebペーを作り替えなければならなか った。この問題はIBMホームページ・ビルダー11で解消されて、テンプレートの作り替えも自由に できるようになった。 ・ Microsoft PowerPointやPDFファイルにリンクを付けることができなかったため、Webページが完 成した後に、必要なページにリンクを貼らなければならなかった。手動でリンクを付けた場合、自 動更新を行うとすべて消えてしまうので、自動更新を行う際に他のフォルダーに避難をさせなけれ ばならず手間がかかってしまった。 ３ 技術的に難しくなく、誰でもWebページを作り替えたり、別のWebページを作成したりすることができ る。 ・ 文字のみでWebページのデータベースを作ることは簡単にできるようになった。しかしリンクが付 けられないことがネックになって別のWebページを作成するまでには至らなかった。 Ⅳ 平成19年度 Webページ開発 昨年度の結果と課題により、今年度の課題を「リンクを付けることができるWebページの開発」に絞り 開発に取り組んだ。この課題は12月に発売されたIBMホームページ・ビルダー12でリンクが付けられるよう になった。ただしリンクを付ける機能が限定されており、別ページでリンク先を表示したり、他のWebペー ジにリンクを付けたりすることは依然できないため、今回のWebページではIBMホームページ・ビルダー12 のリンク機能は取り入れないことにした。 １ 自動更新できるリンクの開発 エクセルのセルにWebページのHTMLを直接書き込むことによりリンク付けも自動で行うことができる ようになった。詳細な方法は次の通りである。 ① エクセルからWebページに流し込む仕組み 先ほど説明した「$HPB_DB_nerai1$」への流し込みのHTMLは、代入する前は（Ａ）の構文で、代入 した後は（Ｂ）の構文に変化する。このように「$HPB_DB_nerai1$」が文字に置き換えられたことに より流し込みが成立している。 （Ａ） <TD bgcolor="White" colspan="3" width="590"><FONT size="+1">$HPB_DB_nerai1$$HPB_DB_nerai2$</FONT></TD> （Ｂ） <TD bgcolor="White" colspan="3" width="590"><FONT size="+1">・ひらがなを習得する。・筆記の代替手段とし て使用し、自分の思いを文字で表すことができる。 </FONT></TD> ② リンクの書き込み エクセルのセルの文字をHTMLにして流し込んだ場合は次のようになる。まずエクセルのセルへの書 き込みは（Ａ）である。これをWebページに代入すると（Ｂ）になる。 （Ａ） <a href='./pdf/hmy59.pdf' target='_blank'>PDFファイル（２）</a> （Ｂ） <TD><FONT size="+1"><a href='./pdf/hmy59.pdf' target='_blank'>PDF フ ァ イ ル （ ２ ） </a></FONT></TD> 文字と同じように代入ができているが、これをWeb上で見ると次のようになってしまう。 このように表示されてしまう理由は、構文の「<」と「>」に原因がある。エクセルからWeb ページに流し込んだ際、「＜」が「<」に「＞」が「>」になってしまったためHTMLの構文とし て成立せず、ただの文字列と認識してしまい上記のような表示になってしまうのである。これをクリ アーするためには、「<」を「＜」に、「>」を「＞」に置き換えればよいことになる。（Ｃ）が 置き換えたあとである。 （Ｃ） <TD><FONT size="+1"><a href='./pdf/hmy59.pdf' target='_blank'>PDFファイル（２）</a></FONT></TD> このようになれば、「PDFファイル（２）」の文字を表示し、PDFフォルダーの「hmy59.pdf」にリン クを付けろと言う命令文が成立する。これでリンクが完成するのである。 「<」を「＜」に、 「>」 を「＞」に置き換える方法は、置き換えを使ってもできるが手間なので「SFIN.vbs」というソフトを 作成した。すべてのWebページを作った後、同じフォルダー内で「SFIN.vbs」ソフトを起動させれば すべてのページの置き換えが完了する。写真の表示、他のWebページへのリンクなども、すべてこの 方法でエクセルのセルに書き込むHTMLの構文を工夫すれば可能になる。 Ⅴ まとめ ２年間、 「教材・教具のデータベースをWebページで公開できる方法」を開発してきたが、予想以上の結 果で完成品を作ることができた。最近では、ネットコモンズのように簡単にWebページをつくる技術が確立 されてきているが、今回取り入れた「データページ」も同じように簡単にホームページが制作でき、いろ いろな場面での活用が期待できる。今までは、ある程度の知識を持った教員がすべてのホームページを制 作するのが常識であった。これからは作業分担により、知識を持った教員がWebページのテンプレートを作 り、一般の教員がエクセルに書き込んで更新するという方法が見えてくる。いろいろな活用方法を今後も 現場で開発していきたい。