第 9 回 CGI ことえらび レポート課題 氏名:伊藤詩野 学籍番号:c1110186 語学クラス:中国語3 コース:社会福祉コース 1.筆記問題 A.ラジオボタンのしくみ ラジオボタンとは、複数の選択肢から1つを選択する場合に使用するもの。 プログラムとして、 選択肢1 選択肢2 といった形式で作成できる。 # type="radio" は、ラジオボタン設置の明記 # name="ラジオボタンの名" は、使用するラジオボタンを区別するため、 複数のラジオボタンを作る場合は全て同じ名前になる。 # value="変数の値"は、ユーザーが選択するとこの値がプログラムに送られる。 B.チェックボックスのしくみ チェックボックスとは、複数の選択肢から複数を選択する場合に使用する。 複数の選択肢それぞれにinput要素を用意する。 プログラムとして 選択肢1 選択肢2 といった形式で作成できる。 # type="checkbox" は、チェックボックス設置の明記 # name="ラジオボタンの名前" は、使用するチェックボックスを区別するため、 複数のラジオボタンを作る場合は全て異なる名前になる。 # value="CGI 変数の値" は、ユーザーが選択するとこの値がプログラムに送られる。 C.基礎プログラミングキャラクタ画像: char_r2_c111018.png << 題名 >> みのりちゃん << 解説 >> 後期になり、レポートの成績が前期よりも良いので、努力が実を結んできたの かなと思ったのがこのキャラクターのきっかけである。そうだとしたら、残りの 授業も頑張って花を咲かせたいという願いもこもっている。また、花びらの色 を統一しなかったのは、これから行うグループワークをイメージした。前期の ようにグループメンバー全員で協力して1つの作品を作れたら良いなという希望 の意味がある。 << 作った方法 >> コマンドラインから tgif & と入力し、Tgif を起動させる。各ツールバーを 利用してキャラクターを作成。今回は、花びらを書くときに円をたくさん用いた。 署名を入力するときに『T』をクリックし、日本語入力は Ctrl-o で切り替える。 左上の出力形式を選ぶアイコンで、PNG 形式を選び、Ctrl-pを押す。 Ctrl-sで保存。 << 工夫した点 >> 花びらに、たくさんの色を用いたところと、署名がキャラクターの邪魔をしな いように、植木鉢に書いたところ。チャームポイントは、まつげ。 2.プログラム問題 ★作成したホームページについて << リンクのアドレス >> URL:http://roy/~c111018/rubycgi/fork_c111018.html << fork_c111018.html >> いとうのプログラム 第3プログラム開発所

CGI作品

後期基礎プログラミング における、いとうの『CGI作品』 を紹介します

◆色彩職人 ◆

cssを自動生成するプログラムです

----- 免責事項 -----

プログラムは　東北公益文科大学 伊藤詩野(C1110186)が著作権を保有しています。

プログラムを取り扱うことで生じた結果に対し、著作者は責任を負いません。

↓ 意見・感想はこちらまで ↓

c111018@g.koeki-u.ac.jp

----- 関連リンク -----

いとうの部屋

いとうのプログラム開発所

いとうの第2プログラム開発所

選択した問題【 D 】 ★ 作成したCGI プログラムについて その1 [.rb] << CGIの題名 >> 色彩職人 << 設定 >> ユーザーが色を選択するとCSSファイルを読みこみ、その色のページが表示され るプログラム。前回の課題で作成したCGIスクリプトにcssを活用できなかったの で、再チャレンジした。 << プログラムの解説 >> フォームを用いて、データを処理した。ラジオボタンはいずれか1つしか選択す ることができないようにするため、name属性を3つともcolorに指定した。選択し た色をvalue、colorをkeyとしてcss_c111018.rbに引き渡される。 これにより、 指定した外部のcssファイルに記載したスタイルを呼び出し、htmlファイルに適 用させた。また、if 文でくくり、条件に応じて色を変更している。 << リンクのアドレス >> URL:http://roy/~c111018/rubycgi/css_c111018.rb << css_c111018.rb >> #!/usr/bin/env ruby #coding: euc-jp require 'cgi' # cgi が使えるようにする cgi = CGI.new(:accept_charset => "EUC-JP") # HTMLで入力されたものが cgi に代入される print("Content-type: text/html; charset=EUC-JP\n\n") # 日本語コードにする color = cgi["color"] # 受け取ったデータをcolorに代入 print("\n") # html の始め print("\n") # タイトル、文章へヘッド情報を記述する print("色彩職人\n") #タイトル print("\n") # head の終わり print("\n") # body の始め if color == "red" # もし赤だったら print("\n") # color1.css というスタイルシートを利用し、赤に変える print("

RED

\n") print("

★情熱と孤独の赤★

\n") print("
\n") # 指定したcss_c111018.rbがデータを受け取って処理 print("
\n") elsif color == "orange" # もしオレンジだったら print("\n") # color2.css というスタイルシートを利用し、オレンジに変える print("

ORANGE

\n") print("

★絆のオレンジ★

\n") print("
\n") # 指定したcss_c111018.rbがデータを受け取って処理 print("
\n") elsif color == "yellow" # もし黄色だったら print("\n") # color3.css というスタイルシートを利用し、黄色に変える print("

YELLOW

\n") print("

輝く星の黄色

\n") print("
\n") # 指定したcss_c111018.rbがデータを受け取って処理 print("
\n") elsif color == "blue" # もし青だったら print("\n") # color4.css というスタイルシートを利用し、青に変える print("

BLUE

\n") print("

★地球の青★

\n") print("
\n") # 指定したcss_c111018.rbががデータを受け取って処理 print("
\n") else color == "violet" # もし紫だったら print("\n") # color5.css というスタイルシートを利用し、紫に変える print("

VIOLET

\n") print("

★魅惑のバイオレット★

\n") print("
\n") # 指定したcss_c111018.rbがデータを受け取って処理 print("
\n") end # ifのend print("\n") # body の終わり print("\n") # html の終わり ○参考文献○ ・2012年度用授業用ページ 11/26の授業内容:CGI[2]神田直弥 URL:http://roy/~naoya/cgi-bin/9.html [1] 入力フォームの構成部品について [13] CSSを切り替える ★作成したCGI プログラムについて その2 [.html] << リンクのアドレス >> URL: http://roy/~c111018/rubycgi/r2_css_c111018.html << プログラムの解説 >> 最初の html の画面では、プログラムに背景色をつけ加えた。 また、チェックボタンを用いて、色を選択できるようにした。 << r2_css_c111018.html >> 色彩職人プログラム

色彩職人


----------- COLOR CHANGE ----------

好きな色を選んでね