jQueryでイベント処理～AjaxでPOST～PHP側のPOST受け取り

の部分を説明したいと思います。
前回の図で言うと、赤で囲んだところですね。

　jQueryでイベントを処理
[show]ボタンを押すとテーブルが表示されるようにjQueryで操作するのですが、その前にまずボタンが無いことにはどうしようもないですわ。
何でもいいのでこんなの。

<input type="button" id="showbutton" value="show">

普通だったらname=”showbutton”みたいにname属性にしがちですが、jQueryだと面倒なのでID属性で定義しておきます。

このボタンがクリックされたら、いよいよAjax通信の始まり。
javascript側（jQuery）は、こんな風になります。

$('#showbutton').click(function(){
  $.ajax({
  type: "POST",
  url: "AccessData.php",
  data: "user=" + user + "&code=show",
  dataType: 'json',
  async:false,
  success: ShowTable
});

パラメータの説明
　type: “POST”　POST形式でPHPに通信データを渡す。別にGETでもOK。
　url: “AccessData.php”　PHPのお名前。
　data: “user=” + user + “&code=show”　PHP側で使うパラメータ。ユーザの指定とかあれば。
　dataType: ‘json’　今回はJSONで受け取るのでこのように。
　async:false　同期通信です。ちゃんと返事が来てから下の関数でテーブルを表示しましょう。
　success: ShowTable　通信が帰って来たあとに行う関数名です。

　PHP側の処理

jQueryでAjaxパラメータとして投げた

　data: “user=” + user + “&code=show”・・・

のようなパラメータがあれば、それなりに処理します。
PHPで受け取るのはこういう風に。

$user=$_POST['user'];	//ユーザ名
$code=$_POST['code']; //コード名

そのあと、上のパラメータに応じた動きでデータアクセスすればいいですね。
例えば、対象ユーザ($user)をキーとしてデータベースにアクセスするとか。色々な手段でPHP上でデータを得てください。

参考まで。
$codeは、テーブル上で様々な処理（編集とか削除とか）など行うので、処理分岐のためのパラメータです。
(話の確信じゃないので、読み飛ばし推奨）

//PHPでの処理分岐
switch ($code){
　case 'show' :
　　　//テーブル表示のためのデータアクセス処理
　　　break;
　case 'delete' :
　　　//テーブル行削除処理
　　　break;
　case 'edit' :
　　　//テーブル編集処理
　　　break;
　default :
　　　break;
}

//JSON変換＆出力処理
OutputJSON(); //次回の予告関数ｗ
　

テーブルを表示するだけなら、こういう分岐は必要ないです。
あくまでご参考まで。

あああ、忘れてました。近いうちにちゃんと動くサンプルを公開する予定。
実際にテーブル＠完成品を動かしてみないと、イメージ掴めないもんにゃぁ・・・

　ﾊﾞｲﾊﾞｲ

こんな仕様です。

・PHPでデータにアクセスしてjQueryでテーブル表示する。
・テーブルそのものを編集できるようにする（データも同時に編集）
・ソート機能付き。
・テーブル内検索機能付き。

ソートとか検索とか表示部分の細かいところは後回しにして、とにかくデータへアクセスして表示できないとどうにもなりません。
頭の中を整理するために簡単な図にしてみました。

1.[show]ボタンを押すと、jQueryのAjax通信でPHPへPOSTされる。
2.PHPでDBにアクセスして、各種のdetaを収拾→JSON形式へ変換。
3.JSON形式のデータをjQuery側へ返す。
4.受け取ったデータをテーブルへと編集→表示。

通信データの形式でJSONを採用したのは、理由があります。
・テーブルの列数が多い。
・データの格納してある部分が複数。形式だってプレーンなファイルだったりDBだったりXMLだったり様々。

そんな風に複雑なものほど通信データの形式をJSONに統一しておけば、後々楽になります。テーブルを拡張しようが減らそうが、結局は連想配列（＝JSON）なので、どうにでも弄れるのだ。
その上、今流行ってるし（おいおい）

次回は、
jQueryでイベント発生～AjaxでPOST～PHP側のPOST受け取り

の部分を簡単に。今日は力尽きた・・・

ということで、シッカリ日本製のプラグイン「WP Social Bookmarking Light」。Twitter、Facebook、tumblerみたいな有名どころはもちろんのこと、はてなやmixi、livedoor,fc2みたいな日本のサイトもカバーしています。

管理画面はDrug&Dropを採用。PHPが分からない人でも優しい仕様です。うん、私のような極力手抜きしたい人(笑)にも嬉しいです。作者さんに大大感謝です。

では細かい設定など。

1. WP Social Bookmarking Lightをインストールしたら、ダッシュボードの「設定→ Social Bookmarking Light」で管理画面を開く。
   サービスのところで、お好きなブックマークをD&Dで追加する。
   
   
2. 追加したブックマークを個別に設定。例えばTwitter。
   Twitterアカウント、ツイートされた数を表示するかしないか、表示枠の幅・高さを細かく設定できる。
   
   
3. Facebookはこんな感じ。「Facebook-like」だと「いいね！」ボタンになりますヨ。
   
4. 出来上がりはこんな感じ　↓　になります。
   mixiは事前にチェック・キーが必要なので、mixi内でまず登録してください。
   （今は面倒なんでやってませんが）

   あああ、もう楽すぎる

で、選んだのはFusionというテーマです。決め手はこれです。

・シンプルだけどスタイリッシュ
・ウィジェットにFlickerとTwitterが元々ある
・日本語化がしやすい（多言語対応）
・背景色やカラム幅などのCSSの設定が管理画面からできる
・１カラム～３カラムまで選べる

シンプルなテーマを選んでも、今はプラグインがとても充実しているので、見た目はどうにでもなりますしね。

さて本題。テーマの日本語化。日本語化というと、WordPress特有のmo, poという変換ファイルをいじらないと。
poファイルを直接編集してもいいんだけど、今回はCodeStyling Localizationというプラグインを使って楽しちゃおう。

　プラグインをインストールしたら、ダッシュボードの[ツール]→[Localization]で作業開始!

1. Fusionテーマは元々多言語に対応していますが、日本語がない！ので、まずは「Add New Language」でFusinテーマ配下に日本語のファイルを新規に作ります。
   
2. Editをポチると、翻訳可能な言葉の一覧が。ここでまたEditすれば、いかようにも変換できます。決まりきった言葉じゃなくて、自分らしさ漂う？オリジナルな言葉にしちゃうのも面白いですよ。
   （例）No Comments →　誰かコメントしてくれへんか～(aho)

   

3. ひととおり翻訳が済んだら、上の方にある「generate mo-file」ボタンを押して、変換ファイルを生成。
   
4. 
   それだけじゃ表示されないので、/wp-content/themes/fusion/lang/ja_JP.moを「ja.mo」にリネームする。ja_JP.poは関係ないのでそのままでOK。
   今後Localizationで何か変更したら、この４．の手順を必ずすること。

個人のパソコン内だけのフォントじゃなくて、自分のブログ上でお気に入りのフォントを使えるって面白いですよね。
wp-tegakiプラグインでは、フォントの色と大きさが固定になってしまうので、大小のタイポグラフィを駆使したサイトには不向きかもしれないですね。でも、個人のブログ程度なら充分でしょう。

設定方法

wp-tegakiプラグインをインストールしたら、/wp-content/plugins/wp-tegaki/ディレクトリに、ttfファイルを直接アップロードします。
ダウンロードしたままだと「07やさしさゴシック.ttf」というファイル名なので、「Yasashisa.ttf」にリネーム。

ダッシュボードの[設定]→[Tegaki]で、フォントの大きさや色、背景色を設定。
ちゃんと設定できると、表示イメージが表示されます。

あとは、投稿するときに［tegaki］手書きにしたい文字［/tegaki］で囲むということで。

ォントの大きさや高さ設定を工夫すると、よくある「先頭一文字だけ目立たせる」なんてことも可能。

縦読みもこのとおり（笑）
らった獲物は逃さない！
のネコ、襲ってくるよ～
人になっても、動くものがあればやります。
きなネズミや虫のおもちゃだと
っと大喜びするよ。