自由制作２：試作・公開

各自で設定した開発テーマに沿って，まず，基本プログラムを完成しよう．

そして，基本プログラムが完成したら，その開発プロジェクトの紹介のため， ウェブページを作成し，公開しよう．

開発プロジェクトのウェブページ

自分の開発プロジェクトを他者に紹介するため， ウェブページを作成する．

とりあえず， 基本作成例のような シンプルなウェブページを作っておこう． 今後，プログラムの発展と同時進行で， ウェブページの方も充実化して行くこと．

ウェブページの内容

最初は最低限，次のような事項を掲載：

• ゲームの概要（ゲームの目的・ルールやキャラクタの紹介などの文章）
• 基本プログラムのスクリーンショット（インライン画像，リンク，等）
• 基本プログラムのソースファイル（リンク）
• 基本プログラムの使用方法（コンパイル・実行・操作の方法などの文章）
• 今後の開発計画（文章）

スクリーンショットの作成作業

スクリーンショット（SS，実行画面の画像）を作るには，次のようにする：

• 端末ウィンドウを２枚開いておく．
• 一方の端末でゲームプログラムを実行する．
このとき，その端末ウィンドウが 完全に前面に出ている状態にすること． 他のウィンドウによって一部でも隠されている状態だと 不完全な SS になってしまう．
• 他方の端末で import コマンドを実行する．

$  import  画像.png

もし，端末（gnome-terminal）のメニューバーが邪魔な場合， 右クリック→ [メニューバーの表示] を off に．

ウィンドウフレームまでも画像化したい場合：

$  import  -frame  画像.png

• マウスでゲーム側のウィンドウをクリックすると， 画像ファイルが生成される．
• 画像の確認：

$  display  画像.png  &

ウェブページの編集作業

• 準備：

$  mkdir  -p  ~/public_html/game-2018		# 公開用ディレクトリを作成
$  chmod  a+x  ~/public_html/game-2018/		# ディレクトリのアクセス権を設定
$  cp  ソース.c  画像.png  ~/public_html/game-2018/	# ファイルをコピー

ソースファイルや画像ファイルについては自由に命名してよい． ただし，ファイル名の文字は半角英数字に限る． ファイル名に日本語などの全角文字を使わないこと．
• 作成：

$  cd  ~/public_html/game-2018/	# 作業ディレクトリを変更
$  vim  index.html		# ウェブページを編集
$  chmod  a+r  *		# ディレクトリ内のアクセス権を設定
	# これで，他人でも全員(all) が読める(readable) 状態になる．

ウェブページのテンプレート：index.html （右クリックでダウロード）

注意：

• ウェブページのファイル名を勝手に変えないこと．
• アクセス権の設定を忘れないこと．

アクセス権の設定は一個のファイルに対して一度だけで充分． （つまり，再編集の後では設定不要．） しかし，新しいファイルをディレクトリに追加した場合には， 当然，そのファイルについて改めて設定する必要がある．

なお，個人設定の状況次第では， アクセス権の設定なしでも公開状態になっている場合もある．

• JavaScript 等を使わないこと．
• URL：（ユーザ p16xxxx の場合）
http://jusco.infogr.kushiro-ct.ac.jp/home/p16xxxx/public_html/game-2018/
末尾のスラッシュ「/」も必要． 学外からはアクセスできません．

$  firefox  http://jusco.infogr.kushiro-ct.ac.jp/home/p16xxxx/public_html/game-2018/ &
	# 公開されているウェブページ（リモートファイル）を表示
	# この方法で閲覧できれば，アクセス権が適切に設定されていると判断できます．
	# 他人のウェブページも見れます．

$  firefox  index.html &	# 手元にあるウェブページ（ローカルファイル）を表示
	# この方法だと，基本的に，自分のウェブページだけしか見れません．
	# アクセス権の設定が適切であるかどうかは確認できません．

参考資料

• 2J Unix基礎 - HP作成方法
• とほほの WWW 入門 - HTML 等の解説

ソースコードの管理

今後，基本プログラムを元に，機能を拡張し， バージョンアップを続けて行く． このとき，すべてのバージョンのソースファイルを保管しておくこと． そして，ウェブページにも， プロジェクト HP の作成例のように， 開発履歴として掲載しておくこと．

これは，作業途中で問題が発生した場合や方針転換した場合などに， 前のバージョンに戻るだけで，簡単に作業を再開できるようにするためだ．

作業方法としては，ファイル名にバージョン番号を追加すればよいだろう：

• 基本プログラム game.c が完成したら， そのソースファイルをバックアップしておく．

$  cp  game.c  game-0.c

または，分割ソースで開発している場合， ディレクトリをバックアップするとよいだろう：

$  cp  -r  game/  game-0/

これで，game-0.c がバージョン 0 として残しておくべきプログラムとなる． 今後のバージョンアップの作業は， 作業用バージョン game.c だけを対象とすること． 決して，旧バージョン game-0.c の方を変更しないこと．

• ある程度の機能を追加できた時点で， 再度，ソースファイルをバックアップしておく．

$  cp  game.c  game-1.c

これ以降，game-1.c をバージョン 1 として残しておく．

• 以下同様に繰り返す．

本日の課題

課題完了後の作業