Webプログラミング演習 ウェブアプリケーション 演習の進め方 ブログ

Webプログラミング演習
ウェブアプリケーション

ウェブ（World Wide Web）をプラットフォームとして
実装されたソフトウェアアプリケーション
–
STEP1
HTMLでUI設計（その１）
–
通信プロトコルにHTTPを利用したクライアント・サーバ
モデル
クライアントはウェブブラウザ


演習の進め方

具体的な事例システム（ブログ）の開発に沿って，
各プログラミング技術を体験する
–
–
–
–
–
–
–
HTMLによるユーザインタフェース設計
CSSを用いたページレイアウト
Perl/CGIを用いたページ遷移
PHPを用いたサーバサイドプログラミング
JavaScriptによるクライアント側のデータ管理
XML＋XSLTを用いたサーバ側のデータ管理
その他
ブログツール

ブログ(blog, web-log)とは




興味のある事柄に関して個人的な意見や批評，
解説を日記に近い形式で公開するWebサイト
読者からの反応，他ブログからの参照履歴など
を載せることができる
情報発信者が意見表明することが主たる目的で
ある点が，複数者間の意見交換を目的とする掲
示板とは異なる
エンドユーザ指向のCMS（Contents
Management System）
ブログの仕組み（単純な例）
エントリ情報
入力ページ
プロバイダサービス
–
–
–

標準化されたUIモジュール
ほとんどのPCでインストール済
インストール不要，無料が多い
Livedoor Blog（http://blog.livedoor.com/）など
ポータル化（複数ブログの新着・ランキングサービス）
市販ブログエンジン製品
–
–
–
サーバにインストールが必要
MovableType (制限付で無料)など
個人でカスタマイズ可能＝オリジナルサイトの作成
この演習では簡易なブログエンジンを作成する
格納
注：この演習ではブログ
の各記事のことをエ
ントリと呼ぶ
エントリ
データベース
自動生成
（動的・静的）
発信者
（サイト管理者）
〇〇ブログ
〇〇ブログ
〇〇ブログ
〇月×日
．．．．．．．．.．．．．．
〇〇ブログ
〇月×日
．．．．．．．．
〇月×日
．．．．．．．．
．．．．．．．．
．．．．．．．．
〇月△日
．．．．．．．．
．．．．．．．．
．．．．．．．．
〇月△日
．．．．．．．．
．．．．．．．．
〇〇ブログ
〇〇ブログ
〇月×日
．．．．．．．．
〇〇ブログ
〇月×日
．．．．．．．．
トップページ
公開ブログサイト
．．．．．．．．
〇月△日
〇月×日
．．．．．．．．
．．．．．．．．
．．．．．．．．
〇月△日
．．．．．．．．
．．．．．．．．
．．．．．．．．
〇月◇日
〇月△日
．．．．．．．．
．．．．．．．．
．．．．．．．．
〇月◇日
．．．．．．．．
．．．．．．．．
．．．．．．．．
〇月◇日
．．．．．．．．
．．．．．．．．
．．．．．．．．
．．．．．．．．.．．．．．
．．．．．．．．．．．．．．
〇月×日
．．．．．．．．
．．．．．．．．．．．．．．
．．．．．．．．.．．．．．
．．．．．．．．．．．．．．
．．．．．
．．．．．．．．
．．．．．．．．．．．．．．
トラックバック
．．．．．．．．．．．．．．
．．．．．
．．．．．．．．．．
．．．．．．．．．．．．．．
トラックバック
．．．．．．．．．．
．．．．．
．．．．．．．．．．
コメント
トラックバック
．．．．．．．．．．
．．．．．．．．．．
．．．．．．．．．．
コメント
．．．．．．．．．．
．．．．．．．．．．
コメント
．．．．．．．．．．
エントリページ
アーカイブページ
（月別，カテゴリー別など）
1
HTMLでユーザインタフェース設計


HTMLはWebページを記述する言語
Webアプリケーションは，Webページをユーザイン
タフェースとして利用する
準備

ブログエンジン開発用ディレクトリの作成＆移動
–
ターミナルを開いて...
% mkdir myblog
% cd myblog
入力
（HTMLフォーム）
（次からはmkdirは不要）
〇月×日
．．．．．．．．
．．．．．．．．
．．．．．．．．
〇月◇日
．．．．．．．．
．．．．．．．．
出力
（HTML生成）
ブラウザ
アプリケーション処理
Webサーバ
HTMLの書き方
課題

ブログのトップページをHTMLで記述する
–

表示する項目
–
–
–
–
サイト名
リンク付カレンダー
月別アーカイブへのリンク
最新のエントリ（複数（個数や内容は適当に））

–
–
–
–
タグ名，属性名は小文字
終了タグを省略しない
属性は必ず「属性名＝"属性値"」の形式
カテゴリ別アーカイブリンク，最新エントリリンク，サイト検索など
構造とスタイルの分離
–
–
日時，タイトル，本文
HTMLの書き方（その２）
–

ホームページ入門
http://www.tohoho-web.com/wwwbeg.htm
XHTML化を考慮する
http://www.tohoho-web.com/ex/xhtml.htm
その他適当に追加しても構わない



ファイル名：index.html
ローカル（開発用PC）で確認
作成したindex.htmlを，ローカルのブラウザ（firefox等）で開く
HTMLではページの構造のみを記述する
スタイル（色，レイアウト）はCSSで別途記述する
構造の要素








見出し（h1～h6）
段落（p）
リンク（a）
画像（img）
表（table）
列挙（ul, ol, dl）
ブロック要素（div）
インライン要素（span）
2
デプロイ

作成したブログ用ディレクトリを，ウェブサーバ上
にコピー
–
ウェブアプリケーションのデプロイ

作成したプログラムをサーバ
上に配備
ホームディレクトリ
別のターミナルを開いて...
myblog
ローカル（開発環境）
% scp -r myblog webdesign.center.
wakayama-u.ac.jp:public_html/
コピー
（改行せずに1行で入力）
パスワードが求められるので，演習室用を入力
A301
ホームディレクトリ
–
public_html
ブラウザ
myblog
ｈｔｔｐサーバ
※scpコマンド：ファイルやディレクトリをコンピュータ間で安全に（暗号化して）
コピーする．-r オプションを付けると，再帰的に(recursive)にディレクトリの中
身をコピーする
ブラウザで確認
http://webdesign.center.wakayama-u.ac.jp/~ユーザID/myblog/
ウェブサーバ（実行環境）
（webdesign.center.wakayama-u.ac.jp）
HTML-lint（HTMLの文法チェッカー）

lint = C言語プログラムの文法チェッカー

代表的なHTML-lint
–
–
–
語源： lint trap（乾燥機の糸屑取り装置）
W3C Markup Validation Service (http://validator.w3.org)
Another HTML-lint (http://openlab.ring.gr.jp/k16/htmllint/)
この授業用に用意したチェックサイト
–
–
http://www.wakayama-u.ac.jp/~manda/webprg/htmllint/
Another HTML-lintを利用
次回の予定

HTMLでエントリ入力ページのUIを設計
3