JavaScript – どんどん！ブログノウハウ紹介ブログ https://boonboonblog.com Be Fun Blog, Be Fantastic Blog Sun, 07 Jun 2026 16:42:07 +0000 ja hourly 1 https://wordpress.org/?v=7.0 https://boonboonblog.com/wp-content/uploads/cropped-2022012909-32x32.jpg JavaScript – どんどん！ブログノウハウ紹介ブログ https://boonboonblog.com 32 32 JavaScriptとWordPress(PHP)で通信して値を返すサンプル https://boonboonblog.com/entries/entry-55824.html Sat, 23 Aug 2025 06:02:36 +0000 https://boonboonblog.com/?p=55824

JavaScript だけでは処理が足りずサーバー側（PHP）で処理したい場合があります。しかし、どう作ればよいか、またセキュリティが満たされているか心配ですね。本記事では、JavaScript と WordPress(PHP)で通信して値を返す（表示する）方法を解説します。サンプルコードあります。]]>

広告：ページ内にてアフィリエイト広告を利用しています。

JavaScript から PHP に通信するサンプル

JavaScript だけでは処理が足りずサーバー側（PHP）で処理したい場合があります。しかし、どう作ればよいか、またセキュリティが満たされているか心配ですね。

ポイント

本記事では、

JavaScript と WordPress(PHP)で通信して値を返す（表示する）方法を解説します。

サンプルコードあります。

サンプルコードで実際に作ってみる！

サンプルコードです。こちらを後述の手順に沿って設置することで実際に動かすことができます。

実際のサンプルコードを紹介します。こちらは、赤と青のボタンを配置して、クリックしたらサーバー側（PHP）に通信して「赤を押したね」「青を押したね」のレスポンスを返して画面上に表示するサンプルです。

上記のようなボタンが出ます（上記はイメージなので動きません）

サンプルコード

サンプルコード

■ PHP 側（サーバー側）

PHP 側のサンプルコードです。WordPress では functions.php などに張り付けて利用します。一般的に必要なセキュリティ対策を入れています。

/* --- [1] ショートコード： [color_press_inline] --- */
add_shortcode('color_press_inline', function () {
    $ajax_url = admin_url('admin-ajax.php');
    $nonce    = wp_create_nonce('color_press'); // CSRF対策

    // 同一ページに複数設置してもOK（個別のnonceとデータ属性を持たせる）
    if (function_exists('wp_unique_id')) {
        $id = wp_unique_id('color-press-');
    } else {
        $id = 'color-press-' . wp_rand();
    }

    ob_start(); ?>
    <div id="<?php echo esc_attr($id); ?>" class="color-press"
         data-ajax-url="<?php echo esc_url($ajax_url); ?>"
         data-nonce="<?php echo esc_attr($nonce); ?>">
      <button type="button" data-color="red"  aria-label="赤ボタン">赤</button>
      <button type="button" data-color="blue" aria-label="青ボタン">青</button>
      <p class="color-press__msg" aria-live="polite"></p>
    </div>

    <style>
      .color-press button{padding:.6rem 1rem;margin-right:.5rem;border:0;border-radius:.5rem;cursor:pointer}
      .color-press [data-color="red"]{background:#e11;color:#fff}
      .color-press [data-color="blue"]{background:#16f;color:#fff}
      .color-press__msg{margin-top:.5rem}
    </style>
    <?php
    return ob_get_clean();
});

/* --- [2] AJAXハンドラ（未ログインOK） --- */
add_action('wp_ajax_color_press',        'fumi_color_press_handle');
add_action('wp_ajax_nopriv_color_press', 'fumi_color_press_handle');

function fumi_color_press_handle(){
    // [a] メソッド制限
    if (($_SERVER['REQUEST_METHOD'] ?? '') !== 'POST') {
        wp_send_json_error(['message' => 'method not allowed'], 405);
    }

	// [a1] ペイロードサイズ上限（例：2KB）
    $clen = isset($_SERVER['CONTENT_LENGTH']) ? (int) $_SERVER['CONTENT_LENGTH'] : 0;
    if ($clen > 2048) {
        wp_send_json_error(['message' => 'payload too large'], 413); // 413 Payload Too Large
    }
	
    // [b] ノンス検証（CSRF）
    $nonce = $_POST['nonce'] ?? '';
    if (!wp_verify_nonce($nonce, 'color_press')) {
        wp_send_json_error(['message' => 'invalid nonce'], 403);
    }

    // [c] オリジン/リファラ確認（ヘッダがあれば検証）
    $site_host = wp_parse_url(home_url(), PHP_URL_HOST);
    if (!empty($_SERVER['HTTP_ORIGIN'])) {
        $origin_host = wp_parse_url($_SERVER['HTTP_ORIGIN'], PHP_URL_HOST);
        if ($origin_host !== $site_host) {
            wp_send_json_error(['message' => 'bad origin'], 403);
        }
    } else {
        $ref = wp_get_referer();
        if ($ref) {
            $ref_host = wp_parse_url($ref, PHP_URL_HOST);
            if ($ref_host !== $site_host) {
                wp_send_json_error(['message' => 'bad referer'], 403);
            }
        }
    }

    // [d] 簡易レート制限（IPごと）
    $ip  = $_SERVER['REMOTE_ADDR'] ?? '0.0.0.0';
    $key = 'color_press_rl_' . md5($ip);
    $cnt = (int) get_transient($key);
    if ($cnt > 30) { // 1分に31回超ならブロック
        wp_send_json_error(['message' => 'too many requests'], 429);
    }
    set_transient($key, $cnt + 1, 60);

    // [e] 入力ホワイトリスト
    $color = isset($_POST['color']) ? sanitize_key($_POST['color']) : '';
    if ($color === 'red') {
        $code = 1; $label = '赤';
    } elseif ($color === 'blue') {
        $code = 2; $label = '青';
    } else {
        wp_send_json_error(['message' => 'invalid color'], 400);
    }

    // [f] 応答
    wp_send_json_success([
        'code'  => $code,
        'label' => $label,
        'text'  => sprintf('%sを押したね', $label),
    ]);
}

■ JavaScript 側（画面側）

JavaScript 側のサンプルコードです。WordPress では固定ページや投稿ページに「カスタムHTML」ブロックで張り付けて利用できます。

<script>
(function(init){
  if (document.readyState === 'loading') {
    document.addEventListener('DOMContentLoaded', init);
  } else { init(); }
})(function(){
  document.querySelectorAll('.color-press').forEach(function(wrap){
    var msg     = wrap.querySelector('.color-press__msg');
    var ajaxUrl = wrap.getAttribute('data-ajax-url');
    var nonce   = wrap.getAttribute('data-nonce');

    wrap.addEventListener('click', function(e){
      var btn = e.target.closest('[data-color]');
      if (!btn || !wrap.contains(btn)) return;

      var color = btn.getAttribute('data-color');  // "red" | "blue"
      if (msg) msg.textContent = '送信中…';

      // 連打防止（任意）
      var prevDisabled = btn.disabled;
      btn.disabled = true;

      var body = new URLSearchParams();
      body.append('action', 'color_press');
      body.append('nonce',  nonce);
      body.append('color',  color);

      fetch(ajaxUrl, {
        method: 'POST',
        headers: {'Content-Type': 'application/x-www-form-urlencoded; charset=UTF-8'},
        body: body.toString(),
        credentials: 'same-origin',
        cache: 'no-store'
      })
      .then(function(r){ return r.ok ? r.json() : Promise.reject(new Error('HTTP ' + r.status)); })
      .then(function(json){
        if (json && json.success) {
          if (msg) msg.textContent = json.data.text; // 例：「赤/青を押したね」
          // 数値 (1/2) を使いたい場合: json.data.code
        } else {
          var m = json && json.data && (json.data.message || json.data.text);
          if (msg) msg.textContent = 'エラー：' + (m || 'unknown');
        }
      })
      .catch(function(err){
        if (msg) {
          // ノンス切れ等の案内
          var hint = (err.message.indexOf('403') !== -1) ? '（ページを再読み込みしてください）' : '';
          msg.textContent = '通信エラー：' + err.message + hint;
        }
      })
      .finally(function(){
        btn.disabled = prevDisabled;
      });
    });
  });
});
</script>

実装方法

実装方法

■ PHP 側（サーバー側）

functions.php などに張り付けて利用

WordPress の functions.php に PHP のコードをそのまま張り付けて保存します。

注意

PHP が古い場合、またはサーバー側の WAF の設定によっては保存時にエラーになる場合があります。

■ JavaScript 側（画面側）

投稿ページ（または固定ページ）側の実装です。

  • ショートコード（今回の場合は PHP 内で作成している「color_press_inline」を貼り付けます。
  • 「カスタムHTML」ブロックを用いて、JavaScript をすべて貼り付けます。

保存して実行すると、サンプルが動きます。

サンプルコードの解説

PHP 側（サーバー側）

PHP 側解説

ショートコード実装

/* --- [1] ショートコード： [color_press_inline] --- */
add_shortcode('color_press_inline', function () {
    $ajax_url = admin_url('admin-ajax.php');
    $nonce    = wp_create_nonce('color_press'); // CSRF対策

    // 同一ページに複数設置してもOK（個別のnonceとデータ属性を持たせる）
    if (function_exists('wp_unique_id')) {
        $id = wp_unique_id('color-press-');
    } else {
        $id = 'color-press-' . wp_rand();
    }

    ob_start(); ?>
    <div id="<?php echo esc_attr($id); ?>" class="color-press"
         data-ajax-url="<?php echo esc_url($ajax_url); ?>"
         data-nonce="<?php echo esc_attr($nonce); ?>">
      <button type="button" data-color="red"  aria-label="赤ボタン">赤</button>
      <button type="button" data-color="blue" aria-label="青ボタン">青</button>
      <p class="color-press__msg" aria-live="polite"></p>
    </div>

    <style>
      .color-press button{padding:.6rem 1rem;margin-right:.5rem;border:0;border-radius:.5rem;cursor:pointer}
      .color-press [data-color="red"]{background:#e11;color:#fff}
      .color-press [data-color="blue"]{background:#16f;color:#fff}
      .color-press__msg{margin-top:.5rem}
    </style>
    <?php
    return ob_get_clean();
});
  • admin-ajax.php の絶対URLを生成しクライアント側へ連携します
  • nonce は CSRF防止の今回限りの時限トークンの発行です。ページを開いたユーザーのブラウザに埋めこみ、送信時に一緒にPOSTすることで、サーバー側で wp_verify_nonce() で送信元の正誤を判定します。
  • wp_unique_id() を用いて、各ブロックをユニークIDで識別できるように実装します（同じページ内に何個でも置ける）
  • HTML（ボタン部分）とCSSもPHPから返しています。時限トークンと重複防止用のコードを埋め込むためPHP側でコードを実装しています（”<?php echo esc_url($ajax_url); ?>”、”<?php echo esc_attr($nonce); ?>”>）

fumi_color_press_handle() にルーティング

/* --- [2] AJAXハンドラ（未ログインOK） --- */
add_action('wp_ajax_color_press',        'fumi_color_press_handle');
add_action('wp_ajax_nopriv_color_press', 'fumi_color_press_handle');

WordPress のログインに関係なく（どちらでも）、admin-ajax に action=color_press で届いたリクエストを fumi_color_press_handle() にルーティングする設定です。

  • admin-ajax：フロント/管理画面からのAJAXを受けるためのWordPress標準エンドポイント（URLは …/wp-admin/admin-ajax.php だが、ログイン不要でも叩ける入口）です。
  • action=color_press：送信パラメータで「どの処理を呼ぶか」を指定する合図。WordPressはこれを見て wp_ajax_color_press（ログイン時）または wp_ajax_nopriv_color_press（未ログイン時）フックを発火し、登録した fumi_color_press_handle() を呼びだします。

リクエストのチェック

    // [a] メソッド制限
    if (($_SERVER['REQUEST_METHOD'] ?? '') !== 'POST') {
        wp_send_json_error(['message' => 'method not allowed'], 405);
    }

	// [a1] ペイロードサイズ上限（例：2KB）
    $clen = isset($_SERVER['CONTENT_LENGTH']) ? (int) $_SERVER['CONTENT_LENGTH'] : 0;
    if ($clen > 2048) {
        wp_send_json_error(['message' => 'payload too large'], 413); // 413 Payload Too Large
    }

「入口で不正リクエストを即切り」してガードしています。

  • $_SERVER[‘REQUEST_METHOD’] を見て POST以外（GET/HEAD/PUT 等）を 405 で拒否し、想定外の叩き方や余計な処理実行を防ぎます。
  • CONTENT_LENGTH から本文サイズを取得し、2KB超は 413（Payload Too Large） を返して遮断します。これにより、JavaScript やリクエストを改ざんして、長文のリクエストを送信する巨大POSTによるリソース消費（DoS）攻撃を防いでいます。

ノンスの検証

    // [b] ノンス検証（CSRF）
    $nonce = $_POST['nonce'] ?? '';
    if (!wp_verify_nonce($nonce, 'color_press')) {
        wp_send_json_error(['message' => 'invalid nonce'], 403);
    }

CSRF対策です。ページ表示時にサーバーが発行した時限トークン（nonce）を、POSTのnonceから取り出して検証しています。wp_verify_nonce($nonce, ‘color_press’)が失敗したら、実際のページ由来でない送信や期限切れと判断し、403 ForbiddenのJSONを返して処理を即終了します。

オリジン/リファラ確認

    // [c] オリジン/リファラ確認（ヘッダがあれば検証）
    $site_host = wp_parse_url(home_url(), PHP_URL_HOST);
    if (!empty($_SERVER['HTTP_ORIGIN'])) {
        $origin_host = wp_parse_url($_SERVER['HTTP_ORIGIN'], PHP_URL_HOST);
        if ($origin_host !== $site_host) {
            wp_send_json_error(['message' => 'bad origin'], 403);
        }
    } else {
        $ref = wp_get_referer();
        if ($ref) {
            $ref_host = wp_parse_url($ref, PHP_URL_HOST);
            if ($ref_host !== $site_host) {
                wp_send_json_error(['message' => 'bad referer'], 403);
            }
        }
    }

リクエストが自サイト（同一ホスト）から来たかをヘッダで確認する防御です。

  • home_url() から自サイトのホスト名を取得。Origin ヘッダがあればそのホストを取り出し、一致しなければ 403（bad origin）を返す。
  • Origin が無い場合は Referer を代替的に確認し、不一致なら 403（bad referer）を返す。

ここでクロスサイトからの不正POST（CSRFや外部ページ経由の叩き）を追加的にブロックします。

簡易レート制限（IPごと）

    // [d] 簡易レート制限（IPごと）
    $ip  = $_SERVER['REMOTE_ADDR'] ?? '0.0.0.0';
    $key = 'color_press_rl_' . md5($ip);
    $cnt = (int) get_transient($key);
    if ($cnt > 30) { // 1分に31回超ならブロック
        wp_send_json_error(['message' => 'too many requests'], 429);
    }
    set_transient($key, $cnt + 1, 60);

1分あたりの呼び出し回数をIP単位で制限している処理です。REMOTE_ADDR をキー（color_press_rl_…）にして Transient にカウントを60秒保持し、毎回+1。読み出し値が >30（=31回目）なら HTTP 429 (Too Many Requests) を返してブロックします。スパム連打やボット負荷を緩和する目的です。

入力ホワイトリスト

    // [e] 入力ホワイトリスト
    $color = isset($_POST['color']) ? sanitize_key($_POST['color']) : '';
    if ($color === 'red') {
        $code = 1; $label = '赤';
    } elseif ($color === 'blue') {
        $code = 2; $label = '青';
    } else {
        wp_send_json_error(['message' => 'invalid color'], 400);
    }

color パラメータを受け取り、まず sanitize_key() で英小文字・数字・-_以外を除去＆小文字化します。そのうえで red / blue のみ許可（ホワイトリスト）。一致したら内部用の数値 1 / 2 と表示ラベル（赤/青）を確定し、どれにも当たらなければ 400（invalid color）で即終了。期待しているリクエストのみ許容し、改ざん文字列やスクリプト混入をここで遮断します。

応答

    // [f] 応答
    wp_send_json_success([
        'code'  => $code,
        'label' => $label,
        'text'  => sprintf('%sを押したね', $label),
    ]);

wp_send_json_success() で HTTP 200 + JSON を返し、処理を終了します（Content-Type: application/json となる）。

返却データ

  • code：内部用数値（1 or 2）
  • label：表示ラベル（赤/青）
  • text：ユーザー表示文（例「赤を押したね」）

フロント側の JavaScript は json.success === true を確認し、この text を画面に出します。

JavaScript 側（画面側）

JS 側解説

※コードは上記サンプルを参照

JavaScript 側ではページ読込後に各 「.color-press」 ブロックを初期化し、ボタンクリックを検知しています。

クリック時、data-ajax-url（Ajax のURL） と data-nonce（時短トークン）、押下色(data-color)を取得し、「送信中…」表示した後、念のため連打防止で一時 disabled を入れています。URLSearchParams で action = color_press / nonce / color を組み、admin-ajax へ（同一オリジン Cookie送信・キャッシュ無効にしつつ） POST します。

成功時は返却されたテキストを表示します。失敗時はエラー文を表示し、403なら「再読み込み」ヒントを出しています。

実際に送信している場所

var body = new URLSearchParams();
body.append('action', 'color_press');
body.append('nonce',  nonce);
body.append('color',  color);

fetch(ajaxUrl, {
  method: 'POST',
  headers: {'Content-Type': 'application/x-www-form-urlencoded; charset=UTF-8'},
  body: body.toString(),
  credentials: 'same-origin',
  cache: 'no-store'
})

実際にパラメータを作成し送信している処理は、fetch(ajaxUrl……の部分です。

送信されるリクエスト例

POST https://boonboonblog.com/wp-admin/admin-ajax.php
Content-Type: application/x-www-form-urlencoded; charset=UTF-8
Cookie: (必要なら同一サイトのCookieが付与されます) // credentials:’same-origin’ のため

action=color_press&nonce=18ba35856a&color=red

サーバーからの成功レスポンス例（JSON）

{
“success”: true,
“data”: {
“code”: 1,
“label”: “赤”,
“text”: “赤を押したね”
}
}

まとめ：JavaScriptとWordPress(PHP)で通信して値を返すサンプル

WordPress で 赤 / 青ボタンを押すと、admin-ajax にフォーム POST し、PHPハンドラが色に応じて値（1 / 2）を返し、JavaScript 側がレスポンスを受け取って「○○を押したね」と表示するサンプルです。HTML/CSS＋nonce/URLはショートコードにて埋め込み、JavaScript はページに直貼りで動きます。サーバ側はPOST限定・サイズ上限・nonce検証・Origin/Referer 確認・値のホワイトリスト・レート制限で一般的なセキュリティ対策を実装しています。

サンプルの構成

  • ショートコード：UIと data-ajax-url / data-nonce を出力
  • インラインJS：fetch() で admin-ajax へPOSTし、結果を表示
  • PHPハンドラ：検証→数値(1/2)と文言をJSONで返却

導入手順

  • functions.php にショートコード＆ハンドラを追加
  • ページ本文にショートコード 「color_press_inline」 を挿入
  • 同ページにJSをべた貼りする

セキュリティ

  • POST以外は 405、サイズ上限(例2KB)で 413 を返す
  • wp_verify_nonce() によるCSRF対策 (403) を実施
  • Origin/Referer一致チェック (403) を実施
  • sanitize_key()＋red|blue ホワイトリスト(400) を実施
  • IPあたり1分で30回以内限定（429) を実施
  • 表示は textContent（反射XSS回避）を実施

実装のコツ

  • 対象ページはフルページキャッシュ除外（nonce期限切れ防止）にする必要があります
  • 同一ページ複数配置OK（ユニークID対応）にするほうが想定外のエラー（うっかり重複配置）を防げます

以上で、JavaScriptとWordPress(PHP)で通信して値を返すサンプル完成です。

40代・50代「会社員におすすめ」の在宅でできる副業５選

20代・30代「専業主婦におすすめ」の在宅でできる内職・副業３選

この副業
アフィリエイトスクール
ノートパソコン

ブログの作り方などについてココナラにて「支援作業」を販売しております。

よかったらご利用くださいませ。

ブログ運営（質問・相談お受けします）
詳しくはこちら
SWELL（ブログ開設します）
詳しくはこちら
AFFINGER（ブログ開設します）
詳しくはこちら

もっと WordPress のノウハウを知りたいときは
WordPress の情報、テクニック一覧はこちらをクリック！
クリックアイコン

どんどん情報局

本サイトは「どんどん情報局」が運営しています。

著作者：Boon ☆

どんどん情報局はメディア記事の執筆を通して世の中に有益な情報を発信することを心がけています。

「どんどん情報局」の紹介はこちら

PR

広告の設置・収入について

当サイトは Amazonのアソシエイトとして、適格販売により収入を得ています。

当サイトは Google アドセンスを利用し、広告により収入を得ています。

当サイトは ASP が提供するサービスを利用し、広告、適格販売により収入を得ています。

電気通信事業法改正に伴う表記

]]> 【WordPress】JavaScript でブラウザ（Edge、Chrome、Safari ）を判定する方法 https://boonboonblog.com/entries/entry-52444.html Mon, 03 Jun 2024 11:00:00 +0000 https://boonboonblog.com/?p=52444

ブラウザによっては特定の CSS の動きが違う（動かない）など特徴があります。ブラウザごとに表示や動作を分ける必要がある場合、利用しているブラウザを判定する必要がありますね。本記事では、JavaScript でブラウザを判定する方法を解説します。]]>

広告：ページ内にてアフィリエイト広告を利用しています。

使っているブラウザを判定する方法

ブラウザによっては特定の CSS の動きが違う（動かない）など特徴があります。ブラウザごとに表示や動作を分ける必要がある場合、利用しているブラウザを判定する必要がありますね。

本記事では、JavaScript でブラウザを判定する方法を解説します。簡単です。

いま、利用しているブラウザを確認する

Point.
利用している
ブラウザ

インターネットでホームページにアクセスした際、ブラウザ（クライアント）は、ホームページ（サーバー）に対して自分が何者か（自分が使っているブラウザ）情報を送信しています。

送信している情報を ユーザーエージェント（UserAgent ：略して UA）と言います。

ユーザーエージェントは JavaScript で取得することが可能です。あなたのブラウザのユーザーエージェント情報を表示します。

今使っているブラウザから送信されているユーザーエージェントはこちら

今使っているブラウザはこちら

※実際は Edge でも Chrome と判断される場合があります。

ブラウザ判定方法

Point.
ブラウザ
判定方法

ブラウザを判定するには、ユーザーエージェントの中にある文字を比較します。

ただし、一つのブラウザに複数のキーワードが存在する場合があり（例：chrome は「chrome」と「safari」の２単語が同時に存在する）、順番に見ていく必要があります。

ブラウザを判定する JavaScript サンプル

<script>
    function getBrowser() {
        const userAgent = window.navigator.userAgent.toLowerCase();
        let browserName = "不明なブラウザ";

        if (userAgent.indexOf("firefox") > -1) {
            browserName = "Firefox";
        } else if (userAgent.indexOf("opera") > -1 || userAgent.indexOf("opr") > -1) {
            browserName = "Opera";
        } else if (userAgent.indexOf("trident") > -1) {
            browserName = "Internet Explorer";
        } else if (userAgent.indexOf("edge") > -1) {
            browserName = "Microsoft Edge";
        } else if (userAgent.indexOf("chrome") > -1) {
            browserName = "Google Chrome";
        } else if (userAgent.indexOf("safari") > -1) {
            browserName = "Safari";
        }

        return browserName;
    }
</script>

なお、ユーザーエージェントはブラウザを作る会社が指定しているので将来にわたって保証されるものではありません。利用者がブラウザのユーザーエージェントを改ざんすることもできるため、必ずではないという点にはご注意ください。

WordPress もっと！お役立ちテクニック

WordPress のお役立ちテクニックはこちら

PR

アフィリエイトスクールのすすめ

まとめ：ブラウザ（Edge、Chrome、Safari ）を判定する方法

ブラウザを判定するためには、ユーザーエージェントの中にある文字を比較します。

  • ユーザーエージェントの中にある文字を比較する
  • JavaScript で比較するのが簡単である

簡単ですね。

40代・50代「会社員におすすめ」の在宅でできる副業５選

20代・30代「専業主婦におすすめ」の在宅でできる内職・副業３選

おすすめ始め方
アフィリエイトスクール
ノートパソコン

もっと WordPress のノウハウを知りたいときは
WordPress の情報、テクニック一覧はこちらをクリック！
クリックアイコン

アフィリエイトスクールのすすめ

どんどん情報局

本サイトは「どんどん情報局」が運営しています。

著作者：Boon ☆

どんどん情報局はメディア記事の執筆を通して世の中に有益な情報を発信することを心がけています。

「どんどん情報局」の紹介はこちら

PR

広告の設置・収入について

当サイトは Amazonのアソシエイトとして、適格販売により収入を得ています。

当サイトは Google アドセンスを利用し、広告により収入を得ています。

当サイトは ASP が提供するサービスを利用し、広告、適格販売により収入を得ています。

電気通信事業法改正に伴う表記

]]> 【超簡単】JavaScript で URL パラメーターを取得する方法（WordPress でも使える） https://boonboonblog.com/entries/entry-40454.html Mon, 03 Apr 2023 11:00:00 +0000 https://boonboonblog.com/?p=40454

本記事では、JavaScript で URL パラメーターを取得する方法と、不正攻撃に対する注意点を紹介します。URL パラメーターはアクセス元の条件により簡単に動作を変えられる有効な方法の一つであり、JavaScript で簡単に取り扱えます。一方、利用時の注意点もありますので、適切に処理を記載し利用するようにしていきましょう。]]>

広告：ページ内にてアフィリエイト広告を利用しています。

URLのパラメーターをJavaScriptで取得する

（ページにアクセスする）URL にはパラメータを付けることができます。以下のように URL の後ろに「？」を追加して名前と値を指定します。

https://ドメイン/ページ.html?name=value

アクセスするときに名前と値を指定することでページ表示時に JavaScript で動作・表示を分ける場合などに使えます。本記事では、JavaScript で URL パラメーターを取得する方法を解説します。

JavaScript で URL パラメーターを取得する方法

実際に URL パラメータを取得するコードです。

※ ”testname” 名のパラメータ値を取得しています。

var varUrlParamater = window.location.search;
var varParamaters = new URLSearchParams(varUrlParamater);
var varValue1 = varParamaters.get('testname');

// パラメーターを表示する
alert(varValue1);

「window.location.search」と「URLSearchParams」でオブジェクトを作成し、get メソッドで（名前に一致する）値を取得します。

JavaScript で URL パラメーターの値で表示を切り替えるサンプル

実際に URL パラメータで表示を切り替えるサンプルです。WordPress で使う場合は、「カスタム HTML」ブロックを使って、以下のコードを張り付けてください。

<div>
   <span style="font-size : 26px">パラメーター testname の値は</span>
   <span id="myIdDisplayValue" style="font-size : 26px; color : red; font-weight : bold"></span>
   <span style="font-size : 26px"> です。</span>
</div>

<script>
    var varUrlParamater = window.location.search;
    var varParamaters = new URLSearchParams(varUrlParamater);
    var varValue1 = varParamaters.get('testname');

    var varDisplayText;

    if ( varValue1 == "1" ) {
        varDisplayText = "[1]";
    } else {
        varDisplayText = "[1] 以外";
    }

    document.getElementById("myIdDisplayValue").innerText = varDisplayText; 
</script>

URL の末尾に「?testname=1」を付けると 「1」を、それ以外では、「1 以外」と画面上に表示します。

脆弱性（HTTPパラメータによる攻撃）に注意する・対策する

URL パラメータはとても便利な反面、他者がURLを書き換えてリクエストできるため、思わぬ不正な動作（攻撃）を受ける場合があるので注意が必要です。

「testname=1」について判定する場合、他者が「testname=xxxxxx」のように意図せぬ値に書き換えてURLを作成し、リクエストすることができます。xxxxxx の部分に全く別の不正な値を指定したり、時には HTML や JavaScript のコードを埋め込んで全く別の表示・動作をさせることも考えられます。

不正攻撃の例

http://(ドメイン)/?testname=<script>不正動作を目的とした JavaScript を書く</script>

不正攻撃の最も基本的な対策例です。

  • 指定されたパラメーター値に対して、動作に必要な値のみ判定して処理を記載する。
  • パラメーター値をそのまま無条件で利用する・表示するコードにはしない
  • ウェブページの表示に影響する特別な記号文字（「<」、「>」、「&」等）を値として扱う場合（表示する場合）は表示可能なコード（”&#xx”）に変換する

脆弱性対策は日々進化しているので、最新の情報を確認し適切に処理するようにしてください。

WordPress もっと！お役立ちテクニック

WordPress のお役立ちテクニックはこちら

PR

【自宅で出来る・一人で出来る】ブログ・アフィリエイトで始める副業

ブログ

比較的安定した収入がある会社員が、月々プラスアルファの収入を得たいと思った時に最もおすすめしたい副業は「ブログ・アフィリエイト」です。

「ブログ・アフィリエイト」とは、自分のブログを開設し企業の広告を貼ることで、読者が広告をクリックして商品を購入した場合に紹介報酬が手に入る副業です。

アフィリエイトの仕組み

人気の出るサイトであれば、大きな収益が期待できることも。ストック型の収益モデルのため、作業時間以上に収益をあげられる可能性がある副業です。定年して会社を退職した後も、収入を確保し続けることができます。

ブログ・アフィリエイトの始め方がわからない場合でも手順通りやれば大丈夫、具体的な手順は こちらを参照 してください。

まとめ：JavaScript で URL パラメーターを取得する方法

本記事では、JavaScript で URL パラメーターを取得する方法と、不正攻撃に対する注意点を紹介しました。

URL パラメーターはアクセス元の条件により簡単に動作を変えられる有効な方法の一つです。WordPress で作ったサイトでも JavaScript を追加して使えるため弁です。一方、JavaScript でパラメーターを取り扱う上での注意点もありますので適切に利用していきましょう。

40代・50代「会社員におすすめ」の在宅でできる副業５選

20代・30代「専業主婦におすすめ」の在宅でできる内職・副業３選

もっと WordPress のノウハウを知りたいときは
WordPress の情報、テクニック一覧はこちらをクリック！
クリックアイコン

アフィリエイトスクールのすすめ

どんどん情報局

本サイトは「どんどん情報局」が運営しています。

著作者：Boon ☆

どんどん情報局はメディア記事の執筆を通して世の中に有益な情報を発信することを心がけています。

「どんどん情報局」の紹介はこちら

PR

広告の設置・収入について

当サイトは Amazonのアソシエイトとして、適格販売により収入を得ています。

当サイトは Google アドセンスを利用し、広告により収入を得ています。

当サイトは ASP が提供するサービスを利用し、広告、適格販売により収入を得ています。

電気通信事業法改正に伴う表記

]]> 【WordPress】JavaScript で指定したURLを開くサンプル（window-open） https://boonboonblog.com/entries/entry-21615.html Thu, 26 Aug 2021 11:00:00 +0000 http://boonboonblog.com/?p=21615

WordPress ご利用者向け、JavaScript で 指定した URL を開く方法と、コードのサンプルです。JavaScript で開くことで、サイズや状態を指定してブラウザを開くことができますので、サイトの表現の幅を広げることが可能です。]]>

広告：ページ内にてアフィリエイト広告を利用しています。

JavaScript で URL を開く

WordPress ご利用者向け、JavaScript で 指定した URL を開く方法と、コードのサンプルです。

おすすめ副業

＼ブログ副業を詳しく見たい方は こちら をクリックしてください／

JavaScript で指定のURLを開く例

JavaScript で指定の URL を開く場合は、window.open() を使います。

ボタン押下で、サイトを開きます。


サンプルの実装コードです。WordPress で利用する場合は、「カスタムHTMLブロック」の中に記述してください。

<form>
    <input style="width:300px" type="button" value="boonboonblog.com を開く" id="mybtn1" onclick="functionOpenWindow()"><br>
</form>

<script>
function functionOpenWindow() {
    window.open("https://boonboonblog.com/",null,"noopener=yes,noreferrer=yes")
}
</script>

Window.open( “開く対象の URL”, “名前”, “オプション” ) を指定します。

オプションで指定できる主な項目は次の通りです。

left
ウィンドウの表示位置（横）（画面左上からの座標）
top
ウィンドウの表示位置（縦）（画面左上からの座標）
width
ウィンドウの横幅
height
ウィンドウの縦幅
menubar
メニューバーの有無（ yes / no ）
toolbar
ツールバーの有無 （ yes / no ）
status
ステータスバーの有無 （ yes / no ）
location
アドレスバーの有無 （ yes / no ）
scrollbars
スクロールバーの有無 （ yes / no ）
resizable
サイズの変更の許可 （ yes / no ）
noopener
新しいウィンドウから、元のウィンドウにアクセスできなくする （ yes / no ）
noreferrer
新しいウィンドウのページに、リンク元の情報を提供しない （ yes / no ）

windows.open（）の自動生成

利用用途に合った Windows.open() スクリプトを自動生成します。

条件を設定してください。

URL
Left 利用する
Right 利用する
Width 利用する
Height 利用する
Menubar 利用する
Toolbar 利用する
Statusbar 利用する
Location 利用する
Scrollbars 利用する
Resizable 利用する

Window.open() のコードを生成します。ボタンを押してください。


コピーしてご利用ください。

WordPress もっと！お役立ちテクニック

WordPress のお役立ちテクニックはこちら

PR

【自宅で出来る・一人で出来る】ブログ・アフィリエイトで始める副業

ブログ

比較的安定した収入がある会社員が、月々プラスアルファの収入を得たいと思った時に最もおすすめしたい副業は「ブログ・アフィリエイト」です。

「ブログ・アフィリエイト」とは、自分のブログを開設し企業の広告を貼ることで、読者が広告をクリックして商品を購入した場合に紹介報酬が手に入る副業です。

アフィリエイトの仕組み

人気の出るサイトであれば、大きな収益が期待できることも。ストック型の収益モデルのため、作業時間以上に収益をあげられる可能性がある副業です。定年して会社を退職した後も、収入を確保し続けることができます。

ブログ・アフィリエイトの始め方がわからない場合でも手順通りやれば大丈夫、具体的な手順は こちらを参照 してください。

まとめ

JavaScript で指定した URL を開く場合は、windows.open() を利用します。

WordPress で利用する場合は、「カスタムHTMLブロック」を用いてコードを埋め込みます。

40代・50代「会社員におすすめ」の在宅でできる副業５選

20代・30代「専業主婦におすすめ」の在宅でできる内職・副業３選

アフィリエイトスクールのすすめ

もっと WordPress のノウハウを知りたいときは
WordPress の情報、テクニック一覧はこちらをクリック！
クリックアイコン

どんどん情報局

本サイトは「どんどん情報局」が運営しています。

著作者：Boon ☆

どんどん情報局はメディア記事の執筆を通して世の中に有益な情報を発信することを心がけています。

「どんどん情報局」の紹介はこちら

PR

広告の設置・収入について

当サイトは Amazonのアソシエイトとして、適格販売により収入を得ています。

当サイトは Google アドセンスを利用し、広告により収入を得ています。

当サイトは ASP が提供するサービスを利用し、広告、適格販売により収入を得ています。

電気通信事業法改正に伴う表記

]]> WordPressで不正な記事コピペを防止！コピー＆右クリックを禁止する方法とは？ https://boonboonblog.com/entries/entry-21021.html Wed, 11 Aug 2021 11:00:00 +0000 http://boonboonblog.com/?p=21021

あなたのウェブサイトの記事の不正コピーの防止に役立つ右クリックを抑制する方法を紹介します。本記事では、WirdPressユーザのために、簡単な JavaScript を使用して実現できるコピー＆右クリック禁止の方法について解説します。ウェブサイトの不正コピー防止を強化したい方は必見です。]]>

広告：ページ内にてアフィリエイト広告を利用しています。

不正なコピペを抑止、右クリック禁止

あなたのウェブサイトの記事の不正コピーの防止に役立つ右クリックを抑制する方法を紹介します。

本記事では、WirdPressユーザのために、簡単な JavaScript を使用して実現できるコピー＆右クリック禁止の方法について解説します。ウェブサイトの不正コピー防止を強化したい方は必見です。

アフィリエイトスクールのすすめ

簡単な JavaScript でのコピー禁止の例

簡単な JavaScript と CSS にて 、文書のコピーを禁止することができます。

  • メインコンテンツエリアの 「右クリックメニュー」 を表示させません
  • 「Ctrl」 ＋ 「C」 などのコピーを禁止します
ポイント

文章をコピーする方法は多数あり、コピーを 100% 防げるわけではありません。

JavaScript で文書のコピー（右クリック）を禁止する方法

■ （１） ヘッダに記載するコード

次のスクリプトを利用します。（通常は head タグ内に記載します）

<script>
    document.oncontextmenu = function () {return false;};
    document.oncopy = function () {return false;};
</script>
  • oncontextmenu が、コンテキストメニューを表示する際に呼び出されるアクションです。return false で無効化しています
  • oncopy がコピーに関する操作で呼び出されるアクションです。retuan false で無効化しています

■ （２）Head タグに書く方法

  1. WordPress の管理画面から 「外観」 → 「テーマエディタ」 をクリックします
  2. テーマヘッダー（header.php）を表示します
  3. <head> ～ </head> 内にスクリプトを記載します

完成です。

WordPress もっと！お役立ちテクニック

WordPress のお役立ちテクニックはこちら

PR

【自宅で出来る・一人で出来る】ブログ・アフィリエイトで始める副業

ブログ

比較的安定した収入がある会社員が、月々プラスアルファの収入を得たいと思った時に最もおすすめしたい副業は「ブログ・アフィリエイト」です。

「ブログ・アフィリエイト」とは、自分のブログを開設し企業の広告を貼ることで、読者が広告をクリックして商品を購入した場合に紹介報酬が手に入る副業です。

アフィリエイトの仕組み

人気の出るサイトであれば、大きな収益が期待できることも。ストック型の収益モデルのため、作業時間以上に収益をあげられる可能性がある副業です。定年して会社を退職した後も、収入を確保し続けることができます。

ブログ・アフィリエイトの始め方がわからない場合でも手順通りやれば大丈夫、具体的な手順は こちらを参照 してください。

まとめ：コピー＆右クリックを禁止する方法とは

WordPress で作成したサイトの文章のコピー禁止（右クリックの禁止）は、簡単な JavaScript （コンテキストメニューの表示の禁止）で実現できます。

40代・50代「会社員におすすめ」の在宅でできる副業５選

20代・30代「専業主婦におすすめ」の在宅でできる内職・副業３選

この副業
アフィリエイトスクール
ノートパソコン

もっと WordPress のノウハウを知りたいときは
WordPress の情報、テクニック一覧はこちらをクリック！
クリックアイコン

アフィリエイトスクールのすすめ

どんどん情報局

本サイトは「どんどん情報局」が運営しています。

著作者：Boon ☆

どんどん情報局はメディア記事の執筆を通して世の中に有益な情報を発信することを心がけています。

「どんどん情報局」の紹介はこちら

PR

広告の設置・収入について

当サイトは Amazonのアソシエイトとして、適格販売により収入を得ています。

当サイトは Google アドセンスを利用し、広告により収入を得ています。

当サイトは ASP が提供するサービスを利用し、広告、適格販売により収入を得ています。

電気通信事業法改正に伴う表記

]]>