roy > naoya > 基礎プログラミングII > (12)自由課題実施期間[2]&

(12) 12/20の授業内容:自由課題実施期間[2]

⇒複雑なCGIを作る上でのヒント

[1] グループの確定状況

現時点でのグループの確定状況について示す。間違いがある場合は報告すること（※昨年度のデータ）。

グループ名メンバーエントリ部門プログラム
つぶあん 三浦剛介、五十嵐千尋、遠藤太朗、嘉村爽太、佐藤和貴、鈴木美貴、森田咲季 未定 SPIクイズ
未定 未定
TWO班 佐藤明日香、小澤諒、齋藤尚実、佐藤綾香、菅原拓哉、大門卓矢、三浦拓己 役立ち情報部門 ジャニーズに関わるもの
役立ち情報部門 グルメマップ
Qn☆Qn 後友子、五十嵐隼人、菊地美香、齋藤和、鈴木愛里、林貴広、阿部祐輔 未定 理想のタイプを検索するプログラム
未定 福笑い
グループ4(仮) 金内恭子、津島千佳、菊地浩平、黒木康平、黒澤江莉奈、齋藤沙友希、佐藤峻 ビジュアル＆エンタ−テイメント部門 育成ゲーム
ビジュアル＆エンタ−テイメント部門 対戦ゲーム
カピバラ 阿部優人、五十嵐聡美、菊池桑、熊谷望、庄司京平、船越大輝、松坂佳美 シミュレーション部門 計算?
エンターテイメント部門 RPG
インド人 飯田達也、石山あゆみ、小川仁志、原田美乃、本間光之、村井しおり、山科雄介 未定 単位変換プログラム
未定 Web上でプログラムとお話をしたい
未定 スロットマシーン？
NO KILL 伊藤瑞希、太田開、小川健太、工藤哲仁、高橋千鶴、田中愛、松田悠平 未定 犯人推理当てゲーム
未定 時事問題クイズ

[2] プログラムの文字コードについて

プログラム作成者とWebページ作成者が異なる場合、作成したプログラムをメールで送ることになると思うが、この際、メールの本文にプログラムを貼り付けて送ると、文字コードがEUCからJISに変わってしまう。このままでは日本語が文字化けしてしまうので、文字コードの修正を行おう。

emacsでプログラムを開き、以下を入力すると文字コードをEUCに戻すことができる。

Ctrl+x Ctrl+m f euc-jp[Return]と入力してからCtrl+x Ctrl+s

上の図の○の部分が文字コードである。EであればEUCなので正常、Jの場合はJISになっているので、上記コマンドを入力しよう。正しく入力するとEに変わる。

[3] ロゴの作成（ペイント系ソフトGIMPの使い方）

GIMPはAdobe Photoshopと同じペイント系のソフトである。GIMPを使用すると簡単にロゴを作成することができる。

起動準備

GIMPを起動する前に、様々な英語フォント(書体)を追加する。これは必須ではないが、標準フォントのみではバリエーションに欠けてしまう。フォントの追加は addfont コマンドを使う(101/102教 室の場合)。

pan{C10xxxx}% addfont[Return]

GIMPの起動

ktermからgimpと入力して起動する。

pan{C10xxxx}% gimp &[Return]

& を付けないと、GIMPを終了するまでそのktermで作業ができなくなる。

起動後に表示される「GIMP今日の技」（以下参照）はいろいろなテクニックを紹介しているのみで、特にロゴを作るうえでは不要なので「閉じる」で閉じる。。

今日の技。すぐに閉じてよい

GIMPの終了

起動したGIMPの「道具箱」ウィンドウ（ウィンドウタイトルがThe GIMPとなっているもの）より

ファイル(F) → 終了で終了となる。

The GIMPと書いてあるウィンドウよりファイル→終了で終了

GIMPの強制終了

GIMPを使用していると時折固まることがある。この場合GIMPを起動したktermからkillコマンドを利用して強制終了する。

pan{C10xxxx}% kill -9 %gimp

これでもうまくいかない場合は、GIMPのどれかのウィンドウの左上のボタンを押し「Destroy」を選択する。この際、保存していないファイルがあり、なおかつ保存ができるようであれば事前に全てしておくこと。固まったままのGIMPを放置するとシステムの負荷が高くなり、他の利用者にも迷惑をかけるので必ず対処する。わからない場合は教員やTAを呼ぶこと。

ロゴの作成→フォントの選択

GIMPの道具箱ウィンドウで「拡張(X) → Script-Fu → ロゴ」と選ぶとロゴを作成するウィンドウが現れる。ロゴには「立体縁取り」や「エイリアン発光」など様々な種類があるが、ここではとりあえず「霜」（下の図では切れていて見えていないが）を選んだものとして説明を続ける。

ロゴを作る場合、拡張→Script-Fu→ロゴを選ぶ

霜を選ぶと以下のウィンドウが出現する。他を選んでも同じようなウィンドウが出現する。ここで文字とフォントサイズとフォント、背景色を変更する。文字は自分で作りたいロゴに使用する言葉とする。フォントサイズは一度作成してから適宜変更してみると良い。フォントの変更は複雑なので以下で詳細に説明する。

文字とフォントサイズとフォントを指定する

フォントを変更するためには上のウィンドウでフォントの右のボタンを押す。すると以下のようなフォント選択ウィンドウが出現するので左側のフォントのリストから自由にフォントを選ぶ。日本語の場合は101/102教室で利用できるのはricoh, kochi, aqua, yozの4種類となる。フォントを選ぶと右側のフォントスタイルでさらに斜体や太字を選ぶことができる場合がある。必要に応じてこれもいずれかを選択する。設定したら「了解」を押す。

フォント設定方法

元のウィンドウに戻るので、さらに「了解」を押すとロゴが生成される。

ロゴの例

保存の方法

作成したロゴを右クリックするとメニューが出現する。そこから「ファイル」→「保存」を選ぶ。保存をするときの形式はPNGを選ぶ。ファイル名をつけ、保存する場所を適宜選択して「了解」を押す。すると、エクスポートするかなど幾つかの質問が行われるが、全てYesに相当するボタンをクリックすると保存が完了する。

GIMPでの画像の大きさの変え方

全体の大きさを変えることができる。画像の上で右クリック、「画像」→「拡大縮小」を選ぶ。幅と高さがXとYで表示されているので、適宜比率を変化させればよい。

その他、「GIMPの使い方」というキーワードでgoogle検索するとたくさん参考となるページが出てくるのでこれを読めばほとんどの説明は得られるだろう。

[4] ロゴのサンプル

>>More

[5] 作成したロゴの貼り方

>>More

[6] CGIで次の次のページにデータを引き渡す

1ページ目の入力フォームでキャラクターの名前を入力し、その後 

<p><img src="ファイル名" width="横幅" 
height="縦幅" alt="ファイルの説明"></p>

作成した画像ファイルのpublic_html/への保存（移動）は状況によっていくつかの方法がある。

Webページ作成者＝ロゴ作成者の場合

  • GIMPで保存する際にpublic_html/に保存：GIMPで作成したロゴを右クリックしメニューから「保存」を選ぶ。ここで保存先として~/public_html/を選ぶ。
  • ホームディレクトリに保存してから移動：GIMPで保存するディレクトリを変更する方法がわからない場合、とりあえず初期設定のままファイル名をつけて保存すると、ホームディレクトリに保存される。その後、ktermでホームディレクトリに移動してから
    pan{c10xxxx}% mv ファイル名 public_html[Return]
    で、public_html/に移動される。

Webページ作成者≠ロゴ作成者の場合

  • メールの添付ファイルで送ってもらう：ロゴ作成者よりメールの添付ファイルとしてWeb作成者に作成したロゴを送ってもらう。送ってもらったロゴは以下の手続きでpublic_html/に保存する。
    • 受信：通常通り受信をすると、添付ファイルのあるメールは、メール一覧画面の左端にMもしくはTが表示される。Tはファイルのサイズが大きく、添付ファイルはあるが受信はしていない状態を指す。 
        M06/12 To:naoya@e.koe Re: C104000-kadai128
   06/12 To:naoya@e.koe Re: C105000-kadai23
  T06/12 To:naoya@e.koe Re: C108000-kadai235
    • 添付ファイルの取り込み：Tの表示がある場合にこの添付ファイルを受信したい時は、Tの行でIと入力。さらにパスワードを入力すると受信されTがMになる。
    • 添付ファイルの保存：Mの行で.（ピリオド）を押すと添付されたファイルのリストが表示される。カーソルキーで添付ファイルの行に進み、yを押すと下部に保存先を示すFile:~/hoge.pngが表示される。ここでFile:~/public_html/hoge.pngのようにpublic_html/を追加する。保存先が決まったら[Return]で保存完了。
      •   M06/12 To:naoya@e.koe Re: C104000-kadai128
    1 Image/Png                         hoge.png
  • ロゴ作成者のpublic_htmlに画像を保存しておき、直接ハイパーリンクする：ロゴ作成者が、自分のpublic_htmlに作成したロゴを保存する（GIMPで保存する際にpublic_htmlを指定するか、保存後にmvコマンドで移動）。すると、ロゴ作成者の学籍番号がc107000aでファイル名がhoge.pngの場合 
    <p><img src="http://roy.e.koeki-u.ac.jp/~c107000/hoge.png" 
width="横幅" height="縦幅" alt="ファイルの説明"></p>
    で、画像を表示することが出来る。

[7] 出席課題

自分の担当業務の進捗状況を報告する。Webページ作成担当者は併せてグループ課題用WebページのURLを報告すること。

  • 提出先：課題提出用メールアドレス
  • メールのSubject：attend12
  • 本文の構成：1行目で学籍番号、氏名を記載する。