今月のミニセミナー「PHPでWebアプリケーションを構築するのに必要な基礎知識」では、簡単なWebアプリケーションを構築する例として、HTMLフォームを使ってデータを送信する方法が紹介されました。そこで今回は、HTTPのGETメソッドをHTMLフォームで活用できるよう、具体的な使い方やWordPressでの応用について学んでいきましょう。
フォームデータの送信方法
Webアプリケーションでは、クライアント（ユーザーのブラウザー）からサーバーにHTTPプロトコルを使用してリクエストを送信します。HTTPリクエストには複数のメソッドがあり、サーバーに対して「どのような処理をしてほしいか」を指示し、リクエストの目的を明確にします。HTMLフォームを利用すると、ブラウザーから簡単にHTTPリクエストを作成してサーバーに送信できます。
GETとは
GETは「サーバーからデータを取得する」ためのHTTPメソッドです。このメソッドでは、送信するデータをURLに追加してサーバーに送ります。
データは「key=value」という形式で記述され、URLの「?」以降に付加されます。データが複数ある場合は「&」で区切られます。この「?」以降の文字列を「クエリパラメータ」と呼びます。
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属性
送信するデータの「key」として使用されます。このフォームでは「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でも、データをクエリパラメータとして渡すことができます。以下は、利用可能なパラメータの一部です。
| パラメータ | 説明 | 例 |
|---|---|---|
author_name | 著者名で検索 | ?author_name=johndoe |
category_name | カテゴリスラッグで検索 | ?category_name=technology |
tag | タグスラッグで検索 | ?tag=wordpress |
s | キーワードで検索 | ?s=SEO |
WordPress.orgの公式ドキュメントで、クエリパラメータ／クエリ変数の詳細を確認できます。
デフォルトのクエリパラメータに加えて、独自のクエリ変数を追加することも可能です。その場合は、query_varsフィルターを使用します。
著者アーカイブページを表示するフォームの作成
ブログの著者を選択し、選択された著者の投稿一覧を新しいウィンドウで表示するフォームの作成例を紹介します。
GETメソッドを使用したフォームでは、inputタグで設定したname属性とvalue属性の組み合わせが「name=value」の形式でURLに付加されます。
たとえば、name="author_name"でvalue="johndoe"と指定した場合、URLは次のようになります。
https://example.com?author_name=johndoeフォームを正しく動作させるためには、以下の点に注意が必要です。
- name属性は、WordPressで許可されているクエリパラメータか、独自に登録したクエリ変数でなければなりません
- value属性は、name属性で指定したパラメータ／変数が受け入れる値にする必要があります
これらの設定が誤っていると、「404 Not Found」エラーが返されます。WordPressが正しくリクエストを処理できるよう、有効な値を設定することが重要です。
それでは、具体的なコードを見ていきましょう。
HTMLコード
このように静的なコードを書くと、著者情報が変更された際に、手動で更新しなければなりません。PHPを使用すれば、著者リストを動的に取得できます。
<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>フォーム
GETメソッドを使ったフォームの完成です！
まとめ
HTMLフォームでGETメソッドを使用する基本的な方法を学びながら、WordPressでの応用例として著者アーカイブページを表示するフォームの作成方法を紹介しました。GETメソッドを指定することで、フォームに入力されたデータが「key=value」の形式でURLに追加される仕組みを理解できたかと思います。
