Marketechlabo

URLの指定の仕方

calendar Jun 17, 2019 / · 1 分で読了 · URLGTM計測  ·
共有する: linkedin copy

概要

JavaScriptでURLを表すlocationオブジェクト

URLとそのパーツはJavaScriptの変数として取得できる。

タグマネージャなどでJavaScriptの変数を使ってURL（の一部）を指定する場合や、直接Javascriptを書いてURLを指定する場合にこれらを使うことがある。

URLの構造についてはURLと向き合う必要性を参照。

変数名意味例
window.location.hrefURL全体https://example.com/audio/detail.php?id=123#rev
window.location.protocolプロトコルhttps:
window.location.hostnameホスト名example.com
window.location.portポート番号（デフォルトポートの場合は空文字）
window.location.pathnameパス名/audio/detail.php
window.location.searchクエリ文字列?id=123
window.location.hashハッシュ#rev

（「window.」は省略可）

たとえば

if (location.hostname.indexOf('example.com') > -1 && /\/detail\.html$/.test(location.pathname)) {
  // マッチしたときの処理。以下は外部スクリプトファイルを読み込む例
  var t = document.createElement('script'); t.async = true; t.src = '//js/lib.js';
  var s = document.getElementsByTagName('script')[0];
  s.parentNode.insertBefore(t, s);
}
  • location.hostname.indexOf('example.com') > -1でホスト名に「example.com」を含み、
  • /\/detail\.html$/.test(location.pathname)でパス名が「/detail.html」で終わる

URLを指定している。

（参考）正規表現

いろいろなパターンの文字列をまとめて指定するものである。

正規表現の使い道

正規表現を使う処理には

  • マッチするかどうか判定（match）
  • マッチした部分の抽出（extract）: URLからディレクトリ名の抽出などに使う
  • 置換（replace）

がある。

どんなプログラミング言語でもSQLでもBIツールでもこの3種類の処理は備わっている。

レベル別正規表現

正規表現の学習の詳細は他の教材に任せるが、学ぶ際のコツとして難易度別に段階的に学ぶことが挙げられる。

レベル1: 特殊文字：1文字を表すもの

  • . 何でも1文字（改行以外）
  • ^ 行頭
  • $ 行末
  • \n ラインフィード（LF）
  • \r キャリッジリターン（CR）

レベル1: 特定の種類の文字を表すもの

  • \d: 任意の数字
  • \w: 任意の英数字かアンダースコア_
  • \s: 空白文字（ホワイトスペース、タブ、改行文字）

\Dなどの大文字は否定（数字以外の文字）を表す。

レベル1: 文字クラス

  • [abc]: abcのいずれか1文字
  • [0-9]は\dと同じ

文字クラス内でエスケープ（その文字の前にバックスラッシュを付ける）が必要なのは^-]\の4文字だけである。それ以外は不要である。

否定

  • [^abc]: abc以外の任意の1文字

レベル2: グループ

(tokyo|fukuoka|kagoshima)

  1. どれか
  2. マッチした部分の抽出で使う
    • 正規表現全体を抽出する場合もあれば
    • 一部を指定して抽出することもある。その「一部」を複数個設定することも可能

レベル2: 量指定子

  • + 直前に指定した文字1文字以上で最長マッチ（\d+で数字列）
  • * 直前に指定した文字0文字以上で最長マッチ（直前に指定した文字があってもなくてもいい、\d*は数字がなくてもマッチする）

\d*は「12」にも「ab」にもマッチするため、こういう使い方はしない。

\d+（任意の数字列）または.*（何にでもマッチする→正規表現抽出で使う）のように使う。

これらは最長マッチである。最短マッチにするには?を付ける。

レベル3: 最長マッチと最短マッチ

任意の正規表現に?を付けると最短マッチになる。

<abc>123>

  • <.*>だと<abc>123>にマッチする
  • <.*?>だと<abc>にマッチする

レベル4: 否定先読みなど

特定の文字列を含まない条件である。

URLパラメータとHTTPメソッド

ブラウザからサーバのプログラムに対してデータを送る必要がある際、通信の仕方に大きく2種類ある。

GET

リクエスト時に、データをURL内のパラメータとしてもたせるもの。これまでの話はすべてGETのものである。

使うケース

  • パラメータの数が少ないとき、パラメータの値の文字列が短いとき
  • パラメータによって表示内容を出し分けたいとき（URLとコンテンツを対応させたいとき）

URLを見ればパラメータの内容、つまり送信したデータがすべてわかってしまうので、秘匿性の高いデータを送るには不適である。

URLはブラウザの履歴やサーバのアクセスログ、リファラなどに記録されるため、機密情報が含まれる場合は注意が必要である。

POST

パラメータをURLに含めず、違うやり方でサーバに送るものである。

使うケース

  • パラメータの数が多い場合、パラメータの値の文字列が長いとき
  • サーバに対して情報を送ることが主目的（送った情報に対してどんなコンテンツが表示されるかは意識しない）
  • 送るデータの内容を人の目から隠したいとき（httpsであれば通信経路上も暗号化され秘匿可能）