今月のミニセミナーでは、「PHPでWebアプリケーションを構築するのに必要な基礎知識」について学びました。簡単なWebアプリケーションを構築する例として、HTMLフォームを使ってデータを送信する方法が紹介されました。この記事では、HTMLフォームを通じてHTTPのGETメソッドを利用する方法を詳しく解説し、WordPressでの応用例も紹介します。
フォームデータの送信方法
Webアプリケーションでは、クライアント（ユーザーのブラウザー）からサーバーにHTTPプロトコルを使用してリクエストを送信します。HTTPリクエストには複数のメソッドがあり、サーバーに「どのような処理をしてほしいか」を指示し、リクエストの目的を明確に伝えます。HTMLフォームを利用すると、ブラウザーから簡単にHTTPリクエストを作成してサーバーに送信できます。
GETとは
GETは「サーバーからデータを取得する」ためのHTTPメソッドです。このメソッドでは、送信するデータをURLに追加してサーバーに送ります。データはURLの「?」以降に表示され、この部分を「クエリパラメータ」と呼びます。クエリパラメータは「key=value」という形式で記述し、複数ある場合は「&」で区切ります。
GETを使ったHTMLフォームの作り方
次のコードは、Google検索を例にしたフォームのサンプルです。Google検索では、検索クエリを指定するためのパラメータ名として「q」が使われます。このパラメータに検索ワードを設定してサーバーに送信します。
<form action="https://www.google.com/search" method="get">
<label>Google検索
<input type="search" name="q" placeholder="検索ワードを入力">
</label>
<input type="submit" value="検索">
</form>
フォームの仕組み
formタグのaction属性
データを送信するURLを指定します。この例ではGoogleの検索エンジンのURLを指定しています。
action="https://www.google.com/search"formタグのmethod属性
使用するHTTPメソッドを指定します。ここでは「get」を指定しています。
method="get"inputタグのname属性
送信するデータの「キー」として使用されます。このフォームでは「q」が指定されており、Googleの検索システムで認識されるキーになっています。
name="q"フォームの動作
フォームに「gundam」と入力して検索ボタンを押すと、次のようなURLが生成されます。
https://www.google.com/search?q=gundam「q」は、Google検索クエリを表すパラメータ名であり、inputタグのname属性に指定されています。「gundam」は、ユーザーが入力した検索ワードです。ブラウザーは、このデータを含むURLをサーバーに送信します。サーバーは「q=gundam」というデータを受け取り、それに基づいた検索結果を返します。この一連の流れが、GETメソッドを使ったHTMLフォームの基本的な動作です。
GETメソッドを使う際の注意点
- GETはデータをURLに付加して送信するため、個人情報や機密データの送信には適していません
- 一部のブラウザーやサーバーでURLの長さに制限があるため、大量のデータ送信には不向きです
WordPressでの使用例
WordPressでは、GETメソッドを使用したHTMLフォームを利用して、データをクエリパラメータとして渡すことができます。以下は、WordPressでサポートされているクエリパラメータの一部です。
| パラメータ | 説明 | 例 |
|---|---|---|
author_name | ユーザー名で検索 | ?author_name=johndoe |
category_name | カテゴリスラッグで検索 | ?category_name=technology |
tag | タグスラッグで検索 | ?tag=wordpress |
s | キーワードで検索 | ?s=SEO |
WordPress.orgの公式ドキュメントで、クエリパラメータ／クエリ変数の詳細を確認することができます。
WordPressでは、デフォルトのクエリパラメータに加えて、独自のクエリ変数を追加することも可能です。この場合、query_varsフィルターを使用します。
著者アーカイブページを表示するフォームの作成
ブログの著者を選択して、その投稿一覧ページを新しいウィンドウで表示するフォームの作成例を紹介します。
GETメソッドを使用したフォームでは、inputタグで設定したname属性とvalue属性の組み合わせが「key=value」の形式でURLに付加されます。
たとえば、name="author_name"でvalue="johndoe"と指定した場合、URLは次のようになります。
https://example.com?author_name=johndoeフォームを正しく動作させるためには、以下の点に注意が必要です。
name属性の値は、WordPressで許可されているクエリパラメータか、独自に登録したクエリ変数でなければなりませんvalue属性には、name属性で指定したパラメータが受け入れる形式の値を設定する必要があります
これらの設定が誤っていると、「404 Not Found」エラーが返されます。WordPressが正しくリクエストを処理できるよう、有効な値を設定することが重要です。
それでは、具体的なコードを見ていきましょう。
HTMLコード
<form action="https://example.com" method="get" target="_blank">
<fieldset>
<legend>ブログの著者を選択してください</legend>
<label>
<input type="radio" name="author_name" value="user_nicename1">
著者１の表示名
</label>
<br>
<label>
<input type="radio" name="author_name" value="user_nicename2">
著者２の表示名
</label>
<br>
<label>
<input type="radio" name="author_name" value="user_nicename3">
著者３の表示名
</label>
</fieldset>
<input type="submit" value="表示">
</form>このように静的なHTMLでコードを書くと、著者情報が変更された場合、手動での更新が必要です。PHPを使用すれば、著者リストを動的に取得できるので、ぜひ挑戦してみてください。
フォーム
まとめ
HTMLフォームでGETメソッドを使用する基本的な方法を学びながら、WordPressでの応用例として著者アーカイブページを表示するフォームの作成方法を紹介しました。GETメソッドを指定することで、フォームに入力されたデータが「key=value」の形式でURLに追加される仕組みを理解できたかと思います。
