質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.48%
Webサーバー

Webサーバーとは、HTTPリクエストに応じて、クライアントに情報を提供するシステムです。

サーバ

サーバは、 クライアントサーバモデルにおいてクライアントからの要求に対し 何らかのサービスを提供するプログラムを指す言葉です。 また、サーバーソフトウェアを稼動させているコンピュータ機器そのもののことも、 サーバーと呼ぶ場合もあります。

Python

Pythonは、コードの読みやすさが特徴的なプログラミング言語の1つです。 強い型付け、動的型付けに対応しており、後方互換性がないバージョン2系とバージョン3系が使用されています。 商用製品の開発にも無料で使用でき、OSだけでなく仮想環境にも対応。Unicodeによる文字列操作をサポートしているため、日本語処理も標準で可能です。

HTML

HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

Q&A

解決済

1回答

18388閲覧

CGIで処理したデータをHTMLファイルに出力する方法

1996dai

総合スコア14

Webサーバー

Webサーバーとは、HTTPリクエストに応じて、クライアントに情報を提供するシステムです。

サーバ

サーバは、 クライアントサーバモデルにおいてクライアントからの要求に対し 何らかのサービスを提供するプログラムを指す言葉です。 また、サーバーソフトウェアを稼動させているコンピュータ機器そのもののことも、 サーバーと呼ぶ場合もあります。

Python

Pythonは、コードの読みやすさが特徴的なプログラミング言語の1つです。 強い型付け、動的型付けに対応しており、後方互換性がないバージョン2系とバージョン3系が使用されています。 商用製品の開発にも無料で使用でき、OSだけでなく仮想環境にも対応。Unicodeによる文字列操作をサポートしているため、日本語処理も標準で可能です。

HTML

HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

0グッド

2クリップ

投稿2017/10/09 14:48

編集2017/10/09 15:05

###前提・実現したいこと
cgi について質問です。
a.html で入力したテキストをもとに b.cgi で処理をしてまたもとの a.html に処理をした結果を
出力するにはどうすればよいのでしょうか??

省略した具体例としては、
a.html には aaa というテキストがあり、a という文字を <form> でテキスト入力した
文字に置き換える、というのを作ろうと思っています。

このとき、html と cgi はどのような構成?ですればよいのでしょうか。
cgi ファイルに全て html コードを書くのでしょうか?
方針がわからなく進まない状態です。

ズレたことを質問しているかもしれませんが、
ご教授お願いします。

###発生している問題・エラーメッセージ

html ファイルから cgi ファイルにデータを渡し、処理をして、もとの html ファイルに出力する方法がわからない。

###該当のソースコード(実現したいことの一部のコードですので参考までに載せて置く程度のものです)

html

1<html> 2<head> 3<meta http-equiv="Content-Type" content=\"text/html\"; charset="UTF-8\" /> 4</head> 5<body> 6<div align="center"> 7<form action="../cgi-bin/lec02.cgi" method="post"> 8<table border=2> 9 <tr><th>暗号</th> 10 <th>A</th> 11 <th>B</th> 12 <th>C</th><tr> 13 <tr><th>復号</th> 14 <td><input type="text" name="a" size="1" maxlength="1"></td> 15 <td><input type="text" name="b" size="1" maxlength="1"></td> 16 <td><input type="text" name="c" size="1" maxlength="1"></td> 17</tr> 18</table> 19<input type="submit" value="復号"> 20</div> 21</body> 22</html> 23 24

###試したこと
他サイト検索など

###補足情報(言語/FW/ツール等のバージョンなど)
cgi は Python で書くつもりです。

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

guest

回答1

0

ベストアンサー

cgiの作り方ですが、今回のご質問のケースでは、以下のように進めれば良いかと思います。

1.「b.cgi」で処理した結果となるはずの、「a.html」だけをデザインの為に最初に作り、chromeなどのブラウザーで見た目を確認する。

具体的には、htmlのinput要素にvalueが加わったのがそれになります。
例:

html

1<input type="text" name="a" size="1" maxlength="1" value="1"> 2<input type="text" name="b" size="1" maxlength="1" value="2"> 3<input type="text" name="c" size="1" maxlength="1" value="3">

2.で造ったhtmlを吐き出すcgiプログラムを作成する。

cgiはformタグで指定されたものが呼び出されるわけですから、
<form action="../cgi-bin/lec02.cgi" method="post">

このケースの "../cgi-bin/lec02.cgi" が動いたときにname属性の各"a", "b", "c"の値を取り出して処理し、更にHTTPレスポンスのコンテントボディとして返すhtml中のvalue属性にセットして、printで出力すれば良い、と言うことになります。

要は、a.htmlをテンプレートとして、valueの部分のみを差し替えてhtmlとして出力するプログラムにすれば良いわけです。

実例として、lec02.cgiをサンプルとして作ってみましたので参考になさってください。htmlは「実現したいことの一部...」をほぼそのままテンプレートとして使います。cgiとして動いていることが分かりやすいよう、フォームをサブミットすると現在日時の表示と、フォームのinput部分に数字を入れれば+1, そうでなければそのまま出力するようにしています。Python3で作成しています。

Python

1#!/usr/bin/python3 2# -*- coding: utf-8 -*- 3# 4# cgi-bin/lec02.cgi 5 6import cgi 7import datetime 8 9html_format = """ 10<html> 11 <head> 12 <meta http-equiv="Content-Type" content=\"text/html\"; charset="UTF-8\" /> 13 </head> 14 15 <body> 16 <div align="center"> 17 <form action="../cgi-bin/lec02.cgi" method="post"> 18 <table border=2> 19 <tr>{0}</tr> 20 <tr> 21 <th>暗号</th> 22 <th>A</th> 23 <th>B</th> 24 <th>C</th> 25 <tr> 26 <tr><th>復号</th> 27 <td><input type="text" name="a" size="1" maxlength="1" value="{1}"></td> 28 <td><input type="text" name="b" size="1" maxlength="1" value="{2}"></td> 29 <td><input type="text" name="c" size="1" maxlength="1" value="{3}"></td> 30 </tr> 31 </table> 32 <input type="submit" value="復号"> 33 </form> 34 </div> 35 </body> 36</html> 37""" 38 39# formにセットされた値を取得 40form = cgi.FieldStorage() 41 42# 値が数字なら+1, 文字列ならそのまま 43v1 = form.getvalue('a') 44if v1: 45 if v1.isdigit(): 46 v1 = int(v1) + 1 47else: 48 v1 = "" 49 50v2 = form.getvalue('b') 51if v2: 52 if v2.isdigit(): 53 v2 = int(v2) + 1 54else: 55 v2 = "" 56 57v3 = form.getvalue('c') 58if v3: 59 if v3.isdigit(): 60 v3 = int(v3) + 1 61else: 62 v3 = "" 63 64# 現在日時を取得 65now = datetime.datetime.now() 66print("Content-Type: text/html") 67print() 68 69# 現在日時、v1,v2,v3をhtmlにセット 70html = html_format.format(now, v1, v2, v3) 71print(html)

動作確認の一例ですが、lec02.cgi を cgi-bin/ディレクトリ下に置き、「実現したいことの一部...」のhtmlをdoc/top.html として配置します。

Bash

1$ find ./ 2./ 3./cgi-bin 4./cgi-bin/lec02.cgi 5./doc 6./doc/top.html 7 8$ python3 -m http.server --cgi 9Serving HTTP on 0.0.0.0 port 8000 (http://0.0.0.0:8000/) ...

上記のように動かした場合、ブラウザーからは以下のどちらのURLからでもアクセスできます。
http://localhost:8000/doc/top.html (トップページとして表示)
http://localhost:8000/cgi-bin/lec02.cgi

chromeブラウザーで見ると、以下のように表示されます。
イメージ説明
python3でのcgiですが、サンプルのlec02.cgiは「formの値を取り出して、htmlで返せば良い」と言うことを示す為に、分かり易くあえて冗長に造ったところもありますので、公式の文書を読んでみてください。

21.2. cgi — CGI (ゲートウェイインタフェース規格) のサポート

投稿2017/10/09 17:34

編集2017/10/10 01:09
dodox86

総合スコア9183

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

1996dai

2017/10/10 05:44

htmlファイルはtopページだけで使えばいいのですね。 cgiで処理したらhtmlファイルに出力し直すのがいいと思っていました。 回答ありがとうございました
dodox86

2017/10/10 05:50

あ、いえ、topページで最初の空のページとして使うこともできますし、topページすら使わず、cgiを最初に読んで、空のhtmlを直接printすることで、1つだけで完結することもできます。(サンプルはそうなっている)htmlファイルにいったん書き出して、それを改めてprintするのもありですが、冗長過ぎます。pythonのcgiモジュールを使えば色々できます。徐々に作り込んでいけば良いと思います。
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.48%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問