HTML フォームデータの処理

HTTP POST を使用する基本的なフォームを作成して、ユーザーが送信したコンテンツを HTML テンプレートに表示します。

このページとサンプルは、ユーザーが投稿をアップロードできる簡単なブログ アプリケーションの学習用サンプルを拡張したものの一部です。Go プログラミング言語と基本的なウェブ開発に精通している方を対象として説明します。最初から開始するには、Go を使用したアプリのビルドをご覧ください。

料金

このチュートリアルの実行に伴う費用はありません。このサンプルアプリを実行するだけなら、無料の割り当てを超過することはありません。

始める前に

Go を使用したアプリのビルドから開始した場合、このセクションはスキップしてください。それ以外の場合は、次の手順を実行します。

  1. プロジェクトとアプリケーションの設定の「始める前に」に記載されている作業を実行します。

  2. この例では、静的ファイルの提供からの最終成果物である gophers-2 サンプルにコードを追加します。

    gophers-2 サンプルとその依存関係をローカルマシンにダウンロードします。

    go get -u -d github.com/GoogleCloudPlatform/golang-samples/appengine/gophers/gophers-2/...
    
  3. gophers-2 ディレクトリに移動します。

    cd $GOPATH/src/github.com/GoogleCloudPlatform/golang-samples/appengine/gophers/gophers-2
    

アプリケーションを構造化する

このサンプル プロジェクトの構造は次のとおりです。

  • go-app/: プロジェクトのルート ディレクトリ。

    • app.yaml: App Engine アプリケーションの構成設定。
    • main.go: アプリケーション コード。
    • index.html: ホームページを表示するための HTML テンプレート。
    • static/: 静的ファイルを格納するディレクトリ。
      • style.css: HTML ファイルの外観をフォーマットするスタイルシート。
      • gcp-gopher.svg: Gopher イメージ。

HTML テンプレート上にフォームを作成する

コードに埋め込まれた HTML を維持することが困難な場合は、テンプレート システムを使用する必要があります。二重括弧で囲まれた部分({{...}})を含む文字列またはファイルは、ダイナミック HTML を生成します。ダイナミック HTML はアプリケーション操作の結果として変化するコンテンツです。

  1. index.html のタイトルと画像の下に、ユーザーに送信のフィードバックを提供するセクションと、名前およびメッセージ入力フィールドのあるフォームを作成します。

    {{with .Notice}}<div id="notice">{{.}}</div>{{end}}
    
    <form action="/" method="post">
      <div>Name: <input name="name" value="{{.Name}}"></div>
      <div>Message: <input name="message"></div>
      <input type="submit">
    </form>

    ユーザーがフォームを送信すると、POST リクエストによってダイナミック HTML が更新され、ユーザーの送信に関する通知が生成されます。

  2. コードサンプル gophers-2 は、静的ファイルの提供で説明する手順の結果として生成されますが、このページではこれを変更し、index.html を静的でなく動的にします。そのため、app.yaml から次の行を削除します。

    - url: /
      static_files: index.html
      upload: index.html
    

HTML テンプレートを統合する

Go の html/template パッケージを使用して、index.html を解析し、それをテンプレートとして関連付けます。

  1. main.go のインポート リストに、パッケージ html/templatefmt を追加します。

    "fmt"
    "html/template"

    fmt パッケージでは、ユーザー名を含むメッセージを返すため Sprintf 関数を使用します。

  2. main.go のテンプレート変数を初期化します。

    var (
    	indexTemplate = template.Must(template.ParseFiles("index.html"))
    )
    

    template.Must() 関数は、テンプレートへのポインタおよびエラーを返す別の関数をラップします。

  3. main.go で、テンプレート パラメータを、NoticeName の 2 つのフィールドを含むデータ構造として定義します。

    type templateParams struct {
    	Notice string
    	Name   string
    }
    

フォームデータの処理

ページを初めてロードすると、GET リクエストが送信されます。ユーザーがコンテンツを送信すると、ページがリロードされ、POST リクエストが送信されます。この POST リクエストによってフォーム送信が処理され、テンプレート変数が更新されます(下のコードを参照)。

main.go で、indexHandler 関数に以下の行を追加します。

params := templateParams{}

if r.Method == "GET" {
	indexTemplate.Execute(w, params)
	return
}

// It's a POST request, so handle the form submission.

name := r.FormValue("name")
params.Name = name // Preserve the name field.
if name == "" {
	name = "Anonymous Gopher"
}

if r.FormValue("message") == "" {
	w.WriteHeader(http.StatusBadRequest)

	params.Notice = "No message provided"
	indexTemplate.Execute(w, params)
	return
}

// TODO: save the message into a database.

params.Notice = fmt.Sprintf("Thank you for your submission, %s!", name)

r.FormValue を呼び出すことで、フォームからデータが取得されます。

テンプレートにデータを渡す

indexHandler 関数の最後に Execute 関数を使用して、ユーザーが送信したコンテンツをインジェクション対応の index.html テンプレートに表示します。

indexTemplate.Execute(w, params)

アプリケーションをローカルで実行する

Cloud SDK に含まれているローカル開発用サーバー(dev_appserver.py)でアプリケーションを実行し、テストします。

  1. 次のコマンドを使用して、アプリケーションの app.yaml が配置されているプロジェクトのルート ディレクトリから、ローカルの開発用サーバーを起動します。

    dev_appserver.py app.yaml
    

    ローカルの開発用サーバーが起動し、ポート 8080 でリクエストを待機します。問題が発生する場合は、ここをクリックしてください。

  2. ウェブブラウザで http://localhost:8080/ にアクセスしてアプリを表示します。

    完成版

ローカル開発サーバー(dev_appserver.py)の実行

ローカルの開発用サーバーを実行するには、ディレクトリをフルパスで指定して dev_appserver.py を実行するか、PATH 環境変数に dev_appserver.py を追加します。

  • 元の App Engine SDK をインストールした場合、ツールは次の場所に配置されています。

    [PATH_TO_APP_ENGINE_SDK]/dev_appserver.py
    
  • Google Cloud SDK をインストールした場合、ツールは次の場所に配置されています。

    [PATH_TO_CLOUD_SDK]/google-cloud-sdk/bin/dev_appserver.py
    

    ヒント: Google Cloud SDK ツールを PATH 環境変数に追加し、シェルでコマンドの補完を有効にするには、次のコマンドを実行します。

    [PATH_TO_CLOUD_SDK]/google-cloud-sdk/install.sh
    

ポート番号の変更方法など、ローカルの開発用サーバーの実行について詳しくは、ローカルの開発用サーバーのリファレンスをご覧ください。

コードを変更する

ローカルの開発用サーバーはプロジェクト ファイルの変更を監視しており、コードに変更が加えられると、アプリケーションを再コンパイルして再起動します。

  1. では試してみましょう。開発用サーバーを起動したまま、index.html を編集して、「The Gopher Network」を別の語句に変更してみます。

  2. http://localhost:8080/ を再読み込みして変更を確認します。

アプリケーションをデプロイする

app.yaml が配置されているプロジェクトのルート ディレクトリから以下のコマンドを実行して、App Engine にアプリケーションをデプロイします。

gcloud app deploy

アプリケーションを表示する

ブラウザを起動して http://[YOUR_PROJECT_ID].appspot.com でアプリケーションを表示するには、次のコマンドを実行します。

gcloud app browse

次のステップ

これで、バックエンドとフロントエンドが HTTP POST リクエストを介して対話するアプリケーションを構築できました。

次に、ユーザーがアップロードしたコンテンツを Cloud Datastore に保存する方法を見ていきます。Cloud Datastore は自動スケーリングと高性能を実現し、アプリケーション開発を簡素化するように構築された非リレーショナル(NoSQL)データベースです。

このページは役立ちましたか?評価をお願いいたします。

フィードバックを送信...

Go の App Engine スタンダード環境