WordPress Javascriptでバーコード入力処理

Javascriptでバーコード入力処理

バーコードリーダーの入力は、何もしなくても入力される(ほぼキーボードと同じ)のですが、とりあえず入力処理の所を作ってみました。

手入力にも対応できるように英文字のチェックも簡単にですが入れてあります。特殊文字とかもほんとうはチェックしないといけないんだけど、まぁ、良いかなと……

一番上のテキストボックスは本来はhiddenタイプにして隠しテキストにしてしまいますが、テストなので見えるようにしました。

それからJavascriptそのままの処理とjQueryによる処理に別けてみました。jQueryの方が楽に処理(コーディング)できるけど、好みも有るので。
jQueryの「$」が少し気を付ける必要があるので、参考にしてください。

//本来は隠し入力テキスト。半角数字のみ格納
<input type="text" id="hidden1" style="background-color:#aaa">

//javascriptで処理
<input type="text" id="text1" oninput="CheckInput()" onchange="setChange()">
<script>
  function CheckInput(){ 
    //全角英文字チェック
    if(document.getElementById("text1").value.match(/[A-Za-zA-Za-z]/g)){
      alert("英文字が入っています。");
      return;
    }
    if (document.getElementById("text1").value.length == 13){
    //全角英数字を対象に置き換え
document.getElementById("hidden1").value=document.getElementById("text1").value.replace(/[A-Za-z0-9]/g,function(s){
        return String.fromCharCode(s.charCodeAt(0)-0xFEE0);
      });
    }
  }
  function setChange(){
   //全角英数字を対象に置き換え
    if (document.getElementById("text1").value.length == 13){
document.getElementById("text1").value=document.getElementById("text1").value.replace(/[A-Za-z0-9]/g,function(s){
        return String.fromCharCode(s.charCodeAt(0)-0xFEE0);
      });
    }
  }
</script>

//jQueryで処理
<input type="text" id="text2" autofocus="">
<script type="text/javascript">
  jQuery(function($){
    $("#text2").on({
      "keyup": function(e){
//全角英文字チェック
        if($(this).val().match(/[A-Za-zA-Za-z]/g)){
          alert("英文字が入っています。");
          return;
        }
        if ($(this).val().length == 13){
        //全角英数字を対象に置き換え
         $("#hidden1").val($(this).val().replace(/[A-Za-z0-9]/g,function(s){
             return String.fromCharCode(s.charCodeAt(0)-0xFEE0);
           }));
        }
      },
      "change": function(e){
        if($(this).val().match(/[A-Za-z0-9]/g)){
         $(this).val($(this).val().replace(/[A-Za-z0-9]/g,function(s){
             return String.fromCharCode(s.charCodeAt(0)-0xFEE0);
           }));          
        }
      }
    });
  });
</script>

実際の動きは下で。

と、書きましたが、他のWordPressで確認したjQueryのコードが全く動きません。
keyupイベントもchangeイベントも取れていない状況です。なぜかな?
ちなみにそのままのJavascriptは正常に動作しています。

このWordPressの環境(プラグインかな?いろいろ入れてるので、チェックが面倒で……)ではjQueryが動かないので、上のコーディングからjQueryの部分をカットします。jQueryの方が楽にコーディングできるけど、動かないんじゃんダメですもんね……寂しい(;_;)


//本来は隠し入力テキスト。半角数字のみ格納 //javascriptで処理

バーコードリーダーは簡易システムでは使い勝手が良いので良く使われると思います。

ただデータがキー入力バッファに溜まって一度にやって来るようなイメージなので、後ろのイベント処理をキャンセルできるとキー入力バッファに溜まったデータを破棄できそうなんですが、私は上手くキャンセルできなかったので、全角でバーコードを読み込み、プログラムで半角に変換し、変換した文字列に置き換えるような処理にしても、半角バーコードの後ろに全角バーコードが付いてきてしまう不具合が出てしまいました。

Windowsプログラムだと綺麗に処理できた記憶が有るのですが、なかなか思ったような処理にならないものですね。
まぁ、ちょいちょいとコーディングしただけなので、きっと良いでが有ると思うので、どこかで見つけたら追記します。

以上、「WordPress Javascriptでバーコード入力処理」でした。

WordPress で Javascript を使ってみる

WordPressを登録プログラム(エントリープログラム)として利用するためには、Javascript を利用するのも手軽で良いです。今回は、試しで Javascript を使ってみました。

WordPress で Javascript

今回のお試しプログラムは簡単なもので、ボタンと入力テキストと出力領域の3つをHTMLで作り、ボタンがクリックされたら入力テキストの内容を出力領域に表示すると言う単純なものです。

早速下にHTMLとJavascriptで書いてみました。動くか試しにボタン1をクリックしてください。入力テキストを変更なども試してみてください。


ボタン1をクリックすると、テキスト1の内容が下の領域に書き込まれます。




ボタン1をクリックすると、ここが書き換わります

どうでしたか?ちゃんとJavascriptは動作しましたか?

WordPress で HTML を書くには

フォーマットの カスタムHTLM を利用して HTML を書きます。

WordPressでカスタムHTLM を利用して HTML を記述する
カスタムHTLM を利用して HTML を記述します

HTML の知識が有れば、少しのことならいろいろ出来ると思います。
一応、今回のHTML・Javascriptのコードを下に示しておきます。

<input type="test" id="t1" style="width:500px;" value="テキスト1:書き換えてからボタン1をクリックすると・・・">
<br>
<input type="button" id="b1" value="ボタン1" onclick="test1()">
<br><br>
<div id="d1" style="background-color:#EDF7FF">ボタン1をクリックすると、ここが書き換わります</div>
<script type="text/javascript">
function test1(){
  //alert("");
 document.getElementById( "d1" ).innerText= document.getElementById( "t1" ).value ;
}
</script>

PHP HTML Javascript の組み合わせでプログラム

PHP、HTML、Javascript の組み合わせで簡単なエントリーシートのようなもの、エントリーされた一覧表示と詳細表示、可能ならログインや返信、ステータス管理を持ったシステムを学習の一環として書いてみたいと思っています。

細かな画面制御やセキュリティ管理をするつもりがないのですが、始めてWordPressでシステムを構築する人の取り掛かりになればと思います。

以上、「WordPress で Javascript を使ってみる」でした。

WordPress mysqli の 手続き型 と オブジェクト型

mysqli のコーディング方法は2通りあります。
手続き型とオブジェクト型です。

私も初めて知りましたので、どのような違いが有るかを確認して行きたいと思います。 

WordPress mysqli 手続き型

従来とよく似た mysqli_***() という書き方のようです。
インスタンス生成不要と説明されています。

こちらの接続は「MySQLと接続」で書いた通りです。

ちょっと進めて、最新の記事のタイトル10件を取得するPHPコードを書いてみたいと思います。

mysqliの手続き型で最新記事10件を取得するショートコード

//mysqli手続き型で最新記事10件を表示
function shortcode_GetNewPosts10(){
  global $wpdb;
  $db_host = $wpdb->dbhost;       //データベースホストの取得
  $db_dbname = $wpdb->dbname;      //データベース名
  $db_user = $wpdb->dbuser;       //データベース接続ユーザーの取得
  $db_passwd = $wpdb->dbpassword; //データベース接続用パスワードの取得
	
  $link = mysqli_connect($db_host, $db_user, $db_passwd, $db_dbname);
  if (!$link) {
    return '接続失敗です : ' . mysqli_connect_error() . ' | ' . mysqli_connect_errno();
  }

  // データ取得
  //プリペアドステートメントを作成します
  $stmt = mysqli_prepare($link, "SELECT DISTINCT post_title ,guid FROM {$wpdb->posts} where post_status='publish' and post_type='post' order by post_date DESC LIMIT ?");
  if($stmt){

    //パラメータをバインドします
	$ln = 10;
    mysqli_stmt_bind_param($stmt, "d", $ln);

    //クエリを実行します
    mysqli_stmt_execute($stmt);

    //結果変数をバインドします
    mysqli_stmt_bind_result($stmt, $post_title, $guid);

    //値を読み表を作成します  
$returnTable = "<table style='width:500px'><th'><td style='text-align:left;'>タイトル</td></th>";
    while (mysqli_stmt_fetch($stmt)) {
      $a = '<a href=""'. $guid .'" target="_blank">' .$post_title . '</a>';
      $returnTable = $returnTable . '<tr><td>' . $a . '</td></tr>';
    }
	
    //ステートメントを閉じます
    mysqli_stmt_close($stmt);
    $returnTable .= '</table>';
  } else {
	$error = mysqli_error($link);
    $errno = mysqli_errno($link);
	$returnTable = 'データ取得に失敗しました : ' . $error . ' | ' . $errno;
  }

  mysqli_close($link);
  return $returnTable;
}
add_shortcode('call_GetNewPosts10', 'shortcode_GetNewPosts10');

MYSQLIの手続き型で最新記事10件を取得するショートコードを呼び出す

タイトル
WordPress Javascriptでバーコード入力処理
WordPress で Javascript を使ってみる
WordPress mysqli の 手続き型 と オブジェクト型
WordPress PHP で文字列を表示する
WordPress MySQLと接続
WordPress の functions.phpについて
WordPress 始めてのPHPコード実行
PHPを始める前に
MySQL データ保存(データバックアップ)
SyntaxHighlighter Evolved

上手く表示されていますか?
ちょっと複雑になってしまいましたが、WordPressのthe_title()関数を使わないとこんな感じになります。まぁ、あくまでも学習なので……

WordPress mysqli オブジェクト型

オブジェクト指向的な新しい書き方
インスタンス生成必要と説明されています。

こちらは始めてなのですが、とりあえず手続き型と同じことをやってみます。

MYSQLIのオブジェクト型で最新記事10件を取得するショートコード

//mysqliオブジェクト型で最新記事10件を表示
function shortcode_GetNewPosts10_2(){
  global $wpdb;
  $db_host = $wpdb->dbhost;       //データベースホストの取得
  $db_dbname = $wpdb->dbname;      //データベース名
  $db_user = $wpdb->dbuser;       //データベース接続ユーザーの取得
  $db_passwd = $wpdb->dbpassword; //データベース接続用パスワードの取得
	
  $link = new mysqli($db_host, $db_user, $db_passwd, $db_dbname);

  if (!$link) {
    return '接続失敗です : ' . mysqli_connect_error() . ' | ' . mysqli_connect_errno();
  }

  // データ取得
  //プリペアドステートメントを作成します
  $stmt = $link->prepare("SELECT DISTINCT post_title ,guid FROM {$wpdb->posts} where post_status='publish' and post_type='post' order by post_date DESC LIMIT ?");
  if($stmt){

    //パラメータをバインドします
    $ln = 10;
    $stmt->bind_param("d", $ln);

    //クエリを実行します
    $stmt->execute();

    //結果変数をバインドします
    $stmt->bind_result($post_title, $guid);

    //値を読み表を作成します
$returnTable = "<table style='width:500px'><th'><td style='text-align:left;'>タイトル</td></th>";
    while ($stmt->fetch()) {
      $a = '<a href=""'. $guid .'" target="_blank">' .$post_title . '</a>';
      $returnTable = $returnTable . '<tr><td>' . $a . '</td></tr>';
    }
	
    //ステートメントを閉じます
    $stmt->close();
    $returnTable .= '</table>';
  } else {
    $error = mysqli_error($link);
    $errno = mysqli_errno($link);
    $returnTable = 'データ取得に失敗しました : ' . $error . ' | ' . $errno;
  }

  $link->close();
  return $returnTable;
}
add_shortcode('call_GetNewPosts10_2', 'shortcode_GetNewPosts10_2');
タイトル
WordPress Javascriptでバーコード入力処理
WordPress で Javascript を使ってみる
WordPress mysqli の 手続き型 と オブジェクト型
WordPress PHP で文字列を表示する
WordPress MySQLと接続
WordPress の functions.phpについて
WordPress 始めてのPHPコード実行
PHPを始める前に
MySQL データ保存(データバックアップ)
SyntaxHighlighter Evolved

上手く表示されていますか?
どちらでもあまり変わりなくできそうです。
この他に、$wpdb 上でも接続情報を貰っているクラスを利用した方法があります。どれが良いかは私にはまだわかりませんが、$wpdb は単純なデータ操作であれば、一番簡単なようなことが書かれていました。
やってみないと分かりませんが、基礎がわかれば単純なデータ操作であれば、どれでもなんとかなるかと思います。

以上、「mysqli の 手続き型 と オブジェクト型」の違い?説明?でした。

WordPress PHP で文字列を表示する

ここでは簡単な任意の文字列を出力してみます。

WordPress に PHP で単純な文字列を表示する

「これはPHPで文字列を出す学習をしています」と表示させてみましょう。

手順:
1)PHPショートコードを作成
2)ここからPHPショートコードを呼び出す

PHPショートコードですが、次のように書きます。

//単純な文字列を表示するショートコード
function shortcode_simpleText(){
  return 'これはPHPで文字列を出す学習をしています';
}
add_shortcode('call_simpleText', 'shortcode_simpleText');

↓↓↓↓↓ショートコード呼び出し↓↓↓↓↓

これはPHPで文字列を出す学習をしています

↑↑↑↑↑ショートコード呼び出し↑↑↑↑↑

文字を表示するだけならこれだけなのですが。。。
ちなみに、ショートコード呼び出しは下の図のように記述しています。

WordPress にPHPで表を出力してみる

文字列だけではあまりに単純なので、もう少し。
と言うことで、表を表示してみたいと思います。

1 2 3
11 12 13
21 22 23

上のようなテーブルを表示させてみます。

functions.php にショートコードを追加

//単純な表を表示するショートコード
function shortcode_simpleTable(){
  $rturnString = '';
  $count1 = 0;

  $rturnString = "<table border='1' style='width:300px;'>";
  while ($count1 < 30){
    $count2 = 1;
    $rturnString .= "<tr>";
    while ($count2 < 4){
	  $val = $count1 + $count2;
      $rturnString = $rturnString . '<td>' . $val . '</td>';
      $count2++;
    }
    $rturnString .="</tr>";
    $count1 += 10;
  }
  $rturnString .="</table>";
  return $rturnString;
}
add_shortcode('call_simpleTable', 'shortcode_simpleTable');

ショートコード呼び出し

123
111213
212223

上手く表示されているでしょうか?

WordPress MySQLと接続

PHPを使ってMySQLと接続してデータベースを使えるようにします。

今回ここでは正常に接続できるかのみを確認します。

接続のPHPコードは以下の通りです。

//mysql_connectでMySQLに接続
function shortcode_MySQLConnect(){
  global $wpdb;
  $db_user = $wpdb->dbuser;       //データベース接続ユーザーの取得
  $db_passwd = $wpdb->dbpassword; //データベース接続用パスワードの取得
  $db_host = $wpdb->dbhost;       //データベースホストの取得
  $db_dbname = $wpdb->dbname;     //データベース名の取得
	
  $link = mysqli_connect($db_host, $db_user, $db_passwd, $db_dbname);
  if (!$link) {
    return '接続失敗です。'.mysqli_error();
  }

  // データ処理

  mysqli_close($link);
  return '接続成功です ';
}
add_shortcode('call_MySQLConnect', 'shortcode_MySQLConnect');

その前に!

mysqli と mysql

PHPのバージョンで mysqli と mysql ・・・i 付きか付きじゃないか決まります。
PHPのバージョンの人(ver4,5)は mysql を(PHP5.5以降では非推奨)
PHPのバージョンの人(ver5,7)は mysqli を(PHP5以降の人はこちらを)
もし、古いバージョンを使っている人がそのまま学習したい時は気を付けてください。

WordPress MySQL と接続コードの解説

ショートコードの作成方法は前の記事で「始めてのPHPコード実行」で学習しているのでもし不明なら参考にしてください。
MySQLと接続するPHPコードの説明です。

MySQLへの接続情報を取得する

global $wpdb;
$db_user = $wpdb->dbuser; //データベース接続ユーザーの取得
$db_passwd = $wpdb->dbpassword; //データベース接続用パスワードの取得
$db_host = $wpdb->dbhost; //データベースホストの取得
$db_dbname = $wpdb->dbname; //データベース名の取得

wpdbと言うクラスから接続情報を入手しています。
データベースを作成する際に事前に設定する項目ですのでその時に覚えておいても良いですし、設定ファイル wp-config.php で確認しても良いのですが、上の方法が便利です。

まずはMySQLに接続に接続

$link = mysqli_connect('localhost', 'username', 'password', 'dbname');

これは、mysql_connect()と言うMySQLと接続してくれる関数に必要な引数(接続情報)を与えて、MySQLに接続を依頼します。
接続に成功した場合は リンクIDを、失敗した場合にFALSE を返してきます。

引数:host
MySQLサーバーを指定します。
レンタルサーバの場合、MySQLを同じサーバーに立てたり他のサーバーに立てたり、レンタルサーバ会社の自由なので、予めMySQL データベースを作った時に接続サーバーの情報も表示されるはずなので確認しておきましょう。
レンタルサーバのデータベース情報を確認すれば出てきます。

上の方法で良いと思いますが、もしどうしても知りたい場合は、レンタルサーバのWordPressの入れたディレクトリにwp-config.phpと言う名のファイルが有るのでそこでも確認できます。

MySQL 接続情報をwp-config.php から確認する
MySQL 接続情報をwp-config.php から確認する

上の画像の /** MySQL のホスト名 (ほとんどの場合変更する必要はありません。) */ の下の行の define(‘DB_HOST’, ‘*************’);が host 名になります。

引数:username
MySQL の接続可能なユーザー名
これもレンタルサーバでデータベースを作成する際に入力したものを覚えておきましょう。上の wp-config.php ファイルで確認しても良いです。

引数:password
MySQL のユーザー名に設定したパスワード
これもレンタルサーバでデータベースを作成する際に入力したものを覚えておきましょう。上の wp-config.php ファイルで確認しても良いです。

引数:dabname
MySQL に作成したデータベースの名前
これもレンタルサーバでデータベースを作成する際に入力したものを覚えておきましょう。上の wp-config.php ファイルで確認しても良いです。

mysqli_connect(‘localhost’, ‘username’, ‘password’, ‘dbname’) 関数でMySQLに接続するとMySQLからリンク IDと言うデータが返ってきます。PHPプログラムとMySQLが接続されてその識別コードがリンク ID になります。その識別コードのリンク ID を $link と言う変数に格納して、MySQLへのアクセス時に利用します。

次に接続できたか確認

if (!$link) {
    return '接続失敗です。'.mysqli_error();
}

この処理は、ちゃんと接続されたかの判定を行います。正常に接続できなかった場合はメッセージを出力して終了します。

$link(リンクID)には、接続に成功した場合は リンクIDを、失敗した場合にFALSE が格納されているので。if 構文を使って判定しています。この場合、False が入っている時にエラーメッセージを返したいのでif (!$link) としています。「!」が必要ですよ。

良くPHPのプログラムのページで、接続失敗時にdie()関数を使用しています。die()関数は、「メッセージを出力し、現在のスクリプトを終了する」とマニュアルには出ています。WordPressに組み込む際は、その後の処理も考えられるので、私の場合はreturnでエラーメッセージを返しています。実際にはもっと丁寧にエラーメッセージを書く必要があると思いますが、学習用なので問題ないと思います。

接続に成功したら

接続に成功したら、データベースにアクセスして必要な情報を取得して、表示する処理を行います。
今回は接続までの確認ですので、

// データ処理

mysqli_close($link);
return '接続成功です';

で終わりにしています。

WordPress ショートコード呼び出して接続実行

接続成功です

上のようにWordPressの中には call_MySQLConnect とショートコード呼び出しを書いていますが、表示はどのようになっているでしょうか?「接続成功です」と表示されていると良いのですが。

あっ!ショートコードよ呼び出し……になってる。修正は面倒なので直さずに^^;