コンテンツ

  1. ホーム
  2. 提供サービス
  3. ホスティングサービス
  4. マニュアル・ガイドブック類
  5. コンテンツ作成ガイド
  6. Webコンテンツの作成

Webコンテンツの作成

コンテンツ作成ガイドTOPに戻る

1.WebページとHTML

本節ではWebコンテンツがブラウザに表示される仕組みとHTML(Hyper Text Markup Language)について説明します.なお,実務的なHTML作成については,本コンテンツの範囲を超えているため記載しておりません.後述する参考図書などをご覧ください.

Web画面が表示される仕組み

Internet ExplorerやFireFoxといったインターネットでWebページを閲覧するためのアプリケーションソフトを「Webブラウザ(以下ブラウザと略記)」といいます.ブラウザはユーザからURLアドレス(以下URLと略記)を入力されるとインターネットに接続し,URLで指定されたWebサーバからHTMLというファイルと素材となる画像や映像・音楽といったデータをダウンロードしてくれます.

しかし,このままの状態では文章と素材のデータがバラバラに存在しているため,そのまま表示したのではこの情報はとても見にくいです.場合によっては文章が文字化けしてしまい,そのWebページに記載された情報が何を伝えているのかすら理解できない事もあります.

そこでブラウザはHTMLに記載されたWebページに関する様々な情報を解析し,人が見やすいようにダウンロードした素材をレイアウトして画面に表示してくれます.

Webのしくみ

HTMLとは

ほとんどのブラウザには,閲覧しているWebページのHTMLの中身を表示する機能があります.

もし,今このページを見ているブラウザのメニューバーの「表示」の中に「ソース」という項目があれば,それをクリックしてみてください.すると別のウィンドウが出てきて,記号と文字がたくさん入ったテキストデータが表示されるはずです.これがHTMLです.

HTMLのソース

もし,今使用中のOSがWindowsであれば意味不明な文字がたくさん混じっているかもしれません.なぜならば,このWebページはEUCというUNIX系のOSで使用される文字コードで記載されているからです.Windowsは標準でShift JISという文字コードを使っているため,EUCで書かれたこの文字コードをそのまま読めば文字化けを起こしてしまうのです.

幸運にもHTMLを記載している文字コードと一致し,HTML内の日本語文章を読む事ができた人でも,HTML内に記載された文字列から発信された情報をそのままくみ取るのは不自由に感じるはずです.もちろん一緒にダウンロードされた画像や映像などは再生されません.

HTMLにはブラウザでWebページを表示するために必要な,文章・文字コード・書体・画像データの表示位置・リンク等々の全て情報が記載されています.このHTMLと素材データがブラウザに読み込まれる事によって,初めて人が見るためのWebページが表示されます.

つまり,HTMLはWebページにとっての設計図や骨組みといった位置づけになります.ですからWebコンテンツを作成しインターネット上に情報を発信するためには,HTMLでコンテンツを作成する必要があるのです.

HTML作成のルール

HTMLでは,発信する情報を「タグ」と呼ばれる命令で挟む事で,ブラウザに対しWebページの構成を伝えます.HTMLタグは以下のように書きます. <命令>内容</命令> 例えばブラウザに表示されるタイトル名を指定する場合は以下のように書きます. <title>タイトル名</title> ここで,<title>の部分を「開始タグ」,/の入っている</title>の部分を「終了タグ」と呼び,このタイトル名を指定する命令titleを「要素」と呼びます.HTML内の構造はあらかじめ決められており,適切な位置に適切な情報をタグを使って書き込む必要があります.基本構造は以下の通りです.

HTML基本構造

HTMLではまず初めにドキュメントタイプを宣言し,このファイルがどの規格で書かれているかを示します.

ファイルの中でHTMLとして認識される部分は<HTML>~</HTML>に挟まれた部分です.ここにWebページの内容を書き込みます.<head>~</head>に挟まれた部分には,Webページの設定内容を書き込みます.先ほど例に挙げたtitle要素を挿入するのもこの部分です.他には,文字コードや使用言語等の文書情報を定義するmeta要素等を挿入します.head内に記載された内容はブラウザの画面上には表示されません.

Webページの内容は<body>~</body>に挟まれた部分に書き込みます.ブラウザの画面上ではここに記載されている内容がWebページとして表示されます.つまりほとんどのタグは<body>内で使用します.以下に簡単なHTMLファイルの記述例を示します.

HTMLサンプル

HTMLではファイル名の付け方にも決まりがあります.HTMLで記載されたファイルは「***.html(もしくは***.htm)」という拡張子で保存しなければなりません.そしてWebページにアクセスした時に最初に表示されるトップページのファイル名は「index.html(もしくはindex.htm)」に固定されます.

画像の貼り付けやリンクなどで別のファイルを指定する方法は,絶対アドレスと相対アドレスの2つがあります.絶対アドレスは目的のファイルの場所をhttp://から始まるアドレス全体を書いて指定する方法です.

逆に相対アドレスは,現在表示しているファイルの位置を基準にして目的のファイルの位置を示します.相対アドレスでは現在位置を「./」で表し,一つ上のディレクトリは「../」2つ上のディレクトリは「../../」の様に表します.

base要素を用いて相対アドレスの基準となる位置をあらかじめ絶対アドレスで固定しておく事も可能です.下記に要素で一つ上の階層にあるsampleディレクトリ内のtest.htmlへリンクを張る例を示します. <a href="../sample/test.html">test.htmlへ移動</a> HTML作成方法についての詳細は,参考図書などをご覧ください.

HTMLタグの一例

代表的なHTMLタグの要素を紹介します.

  • 他のページへ移動するリンクを張る(a要素)
  • 見出し文字(h1~h6要素)
  • 段落(p要素)
  • 改行する(br要素)
  • 箇条書きにする(li要素)
  • 画像を貼り付ける(img要素)
  • 表を作成する(table要素)
  • 入力フォームを作成する(form要素)

Webページを簡単に作成する方法

VMホスティングサービス並びにWEBホスティングサービスのCGI/PHPパッケージとWordPressパッケージではCMS(コンテンツマネージメントシステム)によるWebコンテンツ作成・管理環境をサポートしています.

CMSを利用するとWebページ内で公開するドキュメントや画像等のコンテンツの追加・更新・削除といった一連の作業をWebブラウザから簡単に行う事ができます.CMSを用いれば管理者のアカウントを複数発行する事で,複数人でのコンテンツの更新も可能です.CMSについてはコンテンツ作成ガイドの「CMSの利用」で詳しく説明しています.

また,市販・フリーソフトのコンピュータソフトウェアには入力したデザインからHTMLを自動的に作成してくれるWebページ作成ソフトが多数あります.その他にも,ワードプロセッサ・表計算ソフト・プレゼンテーションソフト・CADソフトの中には,作成したデータをHTMLに変換して保存する機能を持った物もあります.

これらのソフトを利用すれば,HTMLタグがわからなくても手軽にWebページを作成し情報を発信する事ができます.ただし使用するソフトウェアによっては,HTMLタグを直接入力するのに比べて,レイアウトの自由度など表現の幅に制約が出てくる事があります.

アクセスカウンタの利用

VMホスティングサービス並びにWEBホスティングサービスのCGI/PHPパッケージとWordPressパッケージではCGIプログラムによるWebアプリケーションの実行をサポートしています.これらのサービスでは,学術情報基盤担当で用意しているCGIアクセスカウンタプログラムをWebサーバにアップロードする事により,Webページにアクセスカウンタを設置する事ができます.
下記のZIPファイルをダウンロードしてご利用下さい.

アクセスカウンタのダウンロード

設置方法・利用方法については,ZIPファイル解凍後に作成される,counterフォルダの下のREADME.txtファイルに記載されていますので,テキストエディタ等でご参照ください.
また,デフォルトでご利用になれるカウンタデザインの種類は,以下のページでご確認いただけます.

アクセスカウンタのデザイン一覧

※独自に作成したGIF画像を使いカウンタのデザインをカスタマイズする事も可能です.詳しくは,README.txtファイルをご参照ください.

参考図書紹介

HTML作成

  • 実践Web Standards Design Web標準の基本とCSSレイアウト&Tips
    著者:市瀬裕哉/福島英児/望月真琴 発行:九天社
  • Web標準デザインテクニック即戦ワークブック XHTML+CSSを正しく賢く書くための15問
    著者:Dan Cederholm 訳:森本眞吾 発行:毎日コミュニケーションズ

HTMLタグのリファレンス本

  • 詳解 HTML&XHTML&CSS辞典 第三版
    著者:大藤幹 発行:秀和システム

コンテンツ作成ガイドTOPに戻る

2.PHPによるWebアプリケーション

VMホスティングサービス並びにWEBホスティングサービスのCGI/PHPパッケージとWordPressパッケージではWebアプリケーションを作成する手段としてPHP並びにCGIの言語の使用をサポートしています.本節ではHTMLにPHP言語のスクリプトを書き込む事で実現できるWebアプリケーションについて説明します.なお,実務的なPHPのプログラミングについては,本コンテンツの範囲を超えているため記載しておりません.後述する参考図書などをご覧ください.

サーバサイドスクリプト

Web画面上での入力に対して何らかの処理を実施し,動的にサービス等を提供するコンテンツをWebアプリケーションと呼びます.私たちが日常でよく利用する,銀行のネットバンキングや新幹線・飛行機のチケットWeb予約,オンラインショッピングなどといったこれらのサービスは全てWebアプリケーションです.

Webアプリケーションは,前節で説明したHTMLに実施する処理内容を記載したプログラムが加えられており,PerlやPHP,JAVAといったプログラミング言語で書かれています.

例えばPHPを使ったWebアプリケーションは,Webを閲覧するクライアントからリクエスト時に送られてきたデータを元に,WebサーバがPHP言語で記載されたプログラムを実行し,実行結果をクライアントに返します.このようにクライアント側ではなくサーバ側でプログラムが実行されるスクリプトをサーバサイドスクリプトと呼びます.

逆にWebサーバからプログラムを含んだWebページをダウンロードし,クライアント側で実行されるスクリプトをクライアントサイドスクリプトと呼び,代表的な物としてJavaスクリプトが挙げられます.

サーバサイドスクリプトとクライアントサイドスクリプト

サーバサイドスクリプトには次のような特徴があります

  • クライアントの性能や使用しているブラウザなどの環境に依存しない
  • クライアントから送られてきた情報に応じて異なるページを出力できる
  • Webサーバのあるネットワーク内の他のリソース(データベース・メールなど)にアクセスできる
  • サーバに負荷がかかる

ただしPHPでWebアプリケーションを作成するにはWebサーバがPHPをサポートしていなければなりません.

PHP言語とは

PHP(PHP Hypertext Preprocessorが正式名称)言語は,HTMLの中にプログラムを埋め込んでWebサーバ上で処理を実行することが可能なスクリプト言語であり,Webアプリケーションの作成・コマンドラインプログラムの作成・GUIアプリケーションの作成といった用途に使用できます.

PHPは元々Webアプリケーション開発専用言語として開発されたため,多くのWebページで利用されている難易度の高くない馴染みやすい言語です.また,データベースへのアクセスを可能にするインタフェースなど拡張モジュールも充実しています.VMホスティングサービス並びにWEBホスティングサービスではPHP5をサポートしています.

PHPの基本構文ではHTML内に実行したい処理内容を書き込み<?phpと?>で挟みます.例えばブラウザに「Hello world!!」と表示する場合は次のように書きます.

PHPサンプルソース1

PHPのスクリプトを含んでいるHTMLは通常のHTMLと拡張子が異なります.PHPを含むHTMLファイルは「***.php」という拡張子で保存しなければなりません.他のプログラミング言語と同様にPHPでも変数や関数,条件式・ループといった様々な処理ができ,PHP5ではオブジェクト指向もサポートされています.PHPプログラミングについての詳細は,参考図書などをご覧ください.

Cookie情報・セッション情報の利用

Webページにアクセスする時,サーバとクライアント間で通信を行うルールとしてHTTPプロトコルが利用されます.このHTTPプロトコルは情報のやりとりを行っている時だけ通信を行い,完了すれば通信を切断する仕組みになっています.

すなわち,WebブラウザによるWebページのリクエストにWebサーバがレスポンスを返すという1つのプロセスが実施されるたびにサーバとクライアントは通信の接続と切断を繰り返すのです.するとサーバの視点からは,リクエストしてきたクライアントとこのリクエスト以前にやりとりをした経過がわかりません.サーバにとってレスポンスを返し,通信を終えた時点で処理は完結しているからです.クライアントが次のリクエストしても,それは全く新規の処理として扱われます.

HTTPプロトコル動作

これがサーバ側で処理を行わない普通のWebページならば特に問題ありませんが,Webアプリケーションとなると少し事情が違ってきます.

クライアントとのやりとりの経過がわからなければスクリプトを処理できない場合があるのです.例えば認証を必要とするページを作成した場合,Webページ間を移動し表示するたびにIDとパスワードを入力して認証し直す必要がでてきます.そこで,以前の情報を簡単に橋渡しするための手段として,Cookieやセッションを利用する方法があります.PHPではCookie・セッション共に利用可能です

Cookieはサーバが必要な情報をクライアント側に送信しておき,ブラウザに保存されたCookieを情報が必要な時に再度受け取る事で処理を行います.それに対しセッションはサーバに必要な情報を保存しておき,その情報にアクセスするためのセッションIDのみをクライアント側に送信します.そして必要なときにクライアントのセッションIDを読み込みサーバに保存された情報を引き出して処理を行います.

このようにして,あたかもサーバクライアント間でやりとりが継続されているように見せかけてWebアプリケーションを続行し,目的のサービスの機能を実現する事ができます.

Cookie・セッションを利用した動作

Cookieやセッションを用いる具体的な実装に関しては参考図書等をご覧ください.なおCookieの使用はクライアント側のブラウザがCookie対応であり,かつCookieの使用が許可されていなければなりません.そしてCookieの内容はクライアント側のユーザの手で改ざんされる危険性もあるためセキュリティホールに注意する必要もあります.

また,Cookieやセッションではなくリクエスト時にGETやPOSTによってクライアントからサーバに必要なデータを直接渡す事もできますが,この方法はセキュリティ上あまり好ましくありません.

PHPを使ったアプリケーション例

PHPを使ってWebアプリケーションを作成する事で様々なサービスを提供するコンテンツを作成する事ができます.以下はアプリケーションの一例です.

  • 電子申請・電子投票システム
  • 掲示板(BBS)
  • チャットシステム
  • ブログやWikiの登録・公開システム
  • 情報検索システム

参考図書紹介

  • はじめてのPHP言語プログラミング入門
    著者:大垣靖男 発行:技術評論社
  • PHP5徹底攻略
    著者:堀田倫英 桑村潤 発行:ソフトバンククリエイティブ
  • PHPによるWebアプリケーションスーパーサンプル 第2版
    著者:西沢直木 発行:ソフトバンククリエイティブ

コンテンツ作成ガイドTOPに戻る

 

Copyright © Institute for Information Management and Communication, Kyoto University, all rights reserved.