Featured image of post 第3回-入力を受け取ろう — URL短縮サポーターを作ってみよう

第3回-入力を受け取ろう — URL短縮サポーターを作ってみよう

フォームから送信されたURLを受け取る方法を学びます。POSTルーティングとparamメソッドでフォームデータを取得し、送信されたURLを画面に表示してみましょう。

@nqounetです。

連載「URL短縮サポーターを作ってみよう」の第3回です。

前回の振り返り

第2回では、タカシさんがURLを入力できるフォームを作成しました。

第2回-まずは入口を作ろう — URL短縮サポーターを作ってみよう
第2回-まずは入口を作ろう — URL短縮サポーターを作ってみよう
URL短縮サービスの入口となるフォームを作成します。Mojolicious::LiteのGETルーティングとEPテンプレートで、URLを入力できる画面を表示しましょう。
nqou.net

前回学んだ内容を簡単に振り返ります。

  • get '/' => 'index';でGETルーティングを定義した
  • __DATA__セクションにEPテンプレートを埋め込んだ
  • <form method="post" action="/shorten">でPOST送信するフォームを作成した

今回は、タカシさんがフォームで「短縮！」ボタンを押したときに、入力されたURLをサーバー側で受け取る処理を実装します。

今回のゴール

第3回では、以下を達成することを目標とします。

  • POSTルーティングの仕組みを理解する
  • $c->param()でフォームから送信されたデータを取得する
  • 受け取ったURLを画面に表示して動作確認する

送信ボタンを押したらどうなる？

フォーム送信の仕組み

前回作成したフォームには、method="post"とaction="/shorten"という属性を設定しました。この設定により、「短縮！」ボタンを押すとブラウザは以下の動作をします。

  • 入力されたデータ（URLテキスト）をリクエストボディに含める
  • /shortenというパスにPOSTリクエストを送信する

GETリクエストがURLにパラメータを含める（クエリ文字列）のに対し、POSTリクエストはリクエストボディにデータを含めて送信します。そのため、URLが長くなったり、ブラウザの履歴にデータが残ったりすることがありません。

POSTルーティングを定義する

前回、フォームを送信すると「Page not found」エラーが表示されました。これは/shortenへのPOSTリクエストを受け取るルートがまだ定義されていないためです。

Mojolicious::Liteでは、post関数を使ってPOSTルーティングを定義します。GETルーティングのgetと同様に、パスとハンドラを指定するだけで定義できます。

POSTルーティングの実装

コードを追加する

前回作成したapp.plに、POSTルーティングを追加します。get '/' => 'index';の下に以下のコードを追加してください。

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33

#!/usr/bin/env perl
# app.pl
# Perl: 5.20以上（サブルーチンシグネチャ使用）
# 依存: Mojolicious
use Mojolicious::Lite -signatures;

get '/' => 'index';

post '/shorten' => sub ($c) {
    my $url = $c->param('url');
    $c->render(text => "受け取ったURL: $url");
};

app->start;

__DATA__

@@ index.html.ep
<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <title>URL短縮サポーター</title>
</head>
<body>
    <h1>URL短縮サポーター</h1>
    <p>短縮したいURLを入力してください。</p>
    <form method="post" action="/shorten">
        <input type="url" name="url" placeholder="https://example.com/very-long-url..." required>
        <button type="submit">短縮！</button>
    </form>
</body>
</html>

コードの各部分を解説します。

POSTルーティングの定義

1
2
3
4

post '/shorten' => sub ($c) {
    my $url = $c->param('url');
    $c->render(text => "受け取ったURL: $url");
};

この部分がPOSTルーティングの定義です。

  • post '/shorten': /shortenへのPOSTリクエストを処理するルートを定義する
  • sub ($c) { ... }: リクエストを処理する無名サブルーチン。$cはコントローラーオブジェクト
  • $c->param('url'): フォームから送信されたurlという名前のパラメータを取得する
  • $c->render(text => ...): 取得したURLをそのままテキストとして画面に表示する

paramメソッドは、フォームのinput要素に設定したname属性の値をキーとして、送信されたデータを取得します。前回のフォームでは<input name="url" ...>と定義していたので、$c->param('url')で入力値を取得できます。

paramメソッドについて

$c->param()は、Mojoliciousでフォームデータやクエリパラメータを取得する最も基本的なメソッドです。

1

my $url = $c->param('url');

この1行で、フォームから送信されたURLを変数に格納できます。シンプルですが、非常に強力なメソッドです。

paramメソッドは以下の場所からパラメータを取得できます。

  • POSTリクエストのボディ（フォームデータ）
  • GETリクエストのクエリ文字列（?key=value形式）
  • ルート定義のプレースホルダ（/:codeのような動的パス）

今回はPOSTリクエストのフォームデータから取得していますが、同じメソッドで様々な入力ソースからデータを取得できることを覚えておいてください。

動作確認

morboで起動する

ファイルを保存したら、morboで起動しているサーバーが自動的にリロードされます。もしサーバーを停止していた場合は、再度以下のコマンドを実行してください。

1

morbo app.pl

ブラウザで確認する

  1. http://localhost:3000にアクセスします
  2. テキストボックスに適当なURL（例: https://example.com/very-long-url）を入力します
  3. 「短縮！」ボタンをクリックします

画面に「受け取ったURL: https://example.com/very-long-url」と表示されれば成功です。

前回はエラーになっていた「短縮！」ボタンが、今回は正しく動作するようになりました。フォームからサーバーにデータを送信し、サーバー側でそのデータを受け取って表示する――Webアプリケーションの基本的なデータの流れが実現できました。

まとめ

今回学んだこと

第3回では、以下のことを学びました。

  • post '/shorten' => sub ($c) { ... };でPOSTルーティングを定義する方法
  • $c->param('url')でフォームから送信されたデータを取得する方法
  • GETとPOSTの違い（パラメータの送信方法）

次回予告

次回は「短くするには？ — ハッシュで一意のコードを作る」をテーマに、送信されたURLから短縮コードを生成する方法を学びます。Digest::SHAを使ったハッシュ生成で、長いURLから短い識別子を作り出します。お楽しみに。

comments powered by Disqus
© 2000 - 2026 nqou.net
Hugo で構築されています。
テーマ Stack は Jimmy によって設計されています。