伝票番号から荷物の追跡ページのURLを作る | 動かして学ぶ PHP・jQuery 入門サンプル帳

解説コードを読んでみよう

このサンプルでわかること

セレクトボックス・入力欄の値を .val() で読み取る方法
JavaScript のオブジェクトを「対応表」として使う方法
正規表現で、入力から数字以外を取り除く方法
入力された文字を安全にリンクとして表示する方法

使っているファイル

index.phpデモのページ（HTML と JavaScript）。サーバー側の処理はありません

1. HTML：会社を選ぶ欄と、番号を入れる欄

option の value には、画面に出る会社名ではなく、プログラムで使う短い名前（yamato など）を書いておきます。

index.php（13〜25行目） PHP

<div class="well trace-form">
  <select id="company">
    <option value="">（運送会社を選択）</option>
    <option value="yamato">ヤマト運輸</option>
    <option value="japanpost">日本郵便</option>
    <option value="sagawa">佐川急便</option>
    <option value="fukutsu">福山通運</option>
  </select>
  <input type="text" id="number" placeholder="伝票番号（例: 1234-5678-9012）">
  <button type="button" class="btn btn-primary" id="make">URLを作る</button>
</div>

<div id="result"></div>

2. 会社ごとのURLを「対応表」にする

追跡ページのURLは、会社ごとに決まった部分のあとに伝票番号をつなげた形になっています。そこで、value の名前をキー、「番号の手前までのURL」を値にしたオブジェクトを作ります。

index.php（37〜43行目） PHP

    // 運送会社ごとの「追跡ページのURL（番号の手前まで）」
    var urls = {
        yamato:    'https://jizen.kuronekoyamato.co.jp/jizen/servlet/crjz.b.NQ0010?id=',
        japanpost: 'https://trackings.post.japanpost.jp/services/srv/search/direct?locale=ja&reqCodeNo1=',
        sagawa:    'https://k2k.sagawa-exp.co.jp/p/web/okurijosearch.do?okurijoNo=',
        fukutsu:   'https://corp.fukutsu.co.jp/situation/tracking_no_hunt/'
    };

urls['yamato'] と書くと、ヤマト運輸のURLが取り出せます。if 文を会社の数だけ並べるより短く書け、会社を増やすときも1行足すだけで済みます。

3. ボタンを押したときの処理

選ばれた会社と番号を読み取り、空ならエラーを出して終了します。番号は replace(/[^0-9]/g, '') で数字以外を取り除いておくので、「1234-5678-9012」のようにハイフン付きで入力しても大丈夫です。

index.php（45〜59行目） PHP

    $('#make').on('click', function() {
        var company = $('#company').val();                  // 選ばれた会社
        var number  = $('#number').val().replace(/[^0-9]/g, '');  // 数字以外（ハイフンなど）を取り除く

        if (company === '' || number === '') {
            $('#result').html('<div class="alert alert-danger">運送会社と伝票番号を入力してください。</div>');
            return;
        }

        var url = urls[company] + number;                   // URL = 会社ごとのURL + 番号

        // リンクを作って表示する
        var link = $('<a target="_blank" rel="noopener">').attr('href', url).text(url);
        $('#result').empty().append(link);
    });

正規表現	意味
`[0-9]`	数字1文字
`[^0-9]`	数字以外の1文字（`^` は「〜以外」）
`/…/g`	見つかったものをすべて置き換える（g = global）

4. リンクを安全に作る

リンクは $('<a>') で部品を作り、.attr('href', url) と .text(url) で中身を入れています。

$('#result').html('<a href="' + url + '">' …) のように文字をつなげて HTML を作ると、入力にタグが混ざっていた場合、そのままページに埋め込まれてしまいます（XSS という攻撃の原因になります）。.text() と .attr() を使えば、文字は文字として安全に扱われます。

西濃運輸など、ほかの運送会社の追跡ページのURLを調べて、urls と option に1行ずつ追加してみましょう。