GettingOUT

GettingOUT

ロングボーダー社長のブログ

FaceBookの使いにくさ・・・何とかシチクレー。

FaceBook、流行ってるんで活用するのはOKなんだけど、正直結構、使いにくい・・・。メニューやリンクが今までのインターフェースと一線を画するぞ的な雰囲気バリバリで、年寄りにはついていけないところがある。

さらに20代・30代と違い、40代はネットでの発言にはかなり気を使う。若者は、普通におしゃべりする感覚で抵抗はないのだろうが、気軽に書き込みすることができない。

早く、ネットの時代終わらないかなー。次の新しいインフラが出てこないかなー。

WordPress プラグイン制作　その３

(1) form内に、編集しpostするためのinputタグを作ります。

<form method="post" action="<?php echo str_replace('%7E', '~', $_SERVER['REQUEST_URI']); ?>">
  <ul>
    <li>行番号：<input disabled type="text" id="disp_id" size="3" />
        <input type="hidden" id="id" name="id" /></li>
    <li>氏名：<input type="text" id="name" name="name" /></li>
    <li>年令：<input type="text" id="age" name="age" size="3" /></li>
    <li>社員番号：<input type="text" id="employee_no" name="employee_no" /></li>
  </ul>
  <div>
    <input type="radio" id="edit" value="1" name="radio" />
    <Label for="edit">更新</Label>
     
    <input type="radio" id="add" value="2" name="radio" />
    <Label for="add">追加</Label>
     
    <input type="radio" id="delete" value="3" name="radio" />
    <Label for="delete">削除</Label>
     
    <input type="submit" name="submit" value="実行" />
    <input type="button" value="クリア" onclick="clear_field();" />
  </div>
</form>

・field_copy() javascirtで、form内のinputにそれぞれコピーし適宜変更します。
・ラジオボタンで、更新、追加、削除をつけて、テーブル操作を指定します。
・post先は、この関数自身です。
m20110420-2

(2) postで呼ばれた時の処理を作ります。

<?php
$data = array();
 
//POSTデータの設定
foreach($_POST as $key => $val) {
  if(strcmp($key,'submit') && strcmp($key,'radio')) {
    $data += empty($val) ? array() : array($key=>$val);
  }
}
//実行ボタンを押した場合
if(!empty($data)) {
  〜実行ボタンを押してデータが渡されたときの処理〜
} ?>
<table>
  〜WordPress プラグイン制作　その２ (3)省略〜
</table>
<form>
  〜上記(1)省略〜
</form>

・postで渡されたデータ（$_POST）を配列にして $dataにまとめます。（submitとradioは除く）
・$dataがある場合は、渡されたデータによりテーブルを更新します。

(3) テーブルを更新します

//実行ボタンを押した場合
if(!empty($data)) {  
  switch($_POST['radio']) {
    case 1: //更新
      $wpdb->update($table, $data, array('id'=>$data['id']));
      $message = "更新しました。";
      break;
    case 2: //追加
      unset($data['id']);
      $wpdb->insert($table, $data);
      $message = "追加しました。";
      break;
    case 3: //削除
      $wpdb->query($wpdb->prepare("DELETE FROM ". $table. " WHERE id = ". $data['id']));
      $message = "削除しました。";
      break;
    default:
      $message = "操作を指定して下さい。";
  }
}

・radioボタンの状態により、更新・追加・削除を行います。

※これまでのコードは、細かいところは省略して書いてますので、そのままでは動作しないです。大体こんな感じということで、理解して下さい。

WordPress プラグイン制作　その２

前回までは、ダッシュボードに管理画面メニューを表示してみました。メニューをクリックすると真っ白でしたが、今回はその中身を作ってみます。

(1) 処理を記述するファイルを作って読み込みます。

function moripower_table_manager() {
include('moripower-table-manager-admin.php');
}

読み込むファイル（moripower-table-manager-admin.php）には、表示するHTMLを記述します。

<p style="font-size:200p">あ</p>

めっちゃ、でかい「あ」を表示する。これはこれで面白いプラグインかも・・・。
m20110419-11

(2) テーブルを作成します
・「あ」ではやっぱり悲しいので、テーブルの内容を表示してみましょう。早速、テーブルを作ります。
・WordPressでWP-phpMyAdminというプラグインを入れるとダッシュボードから直接テーブル操作できるから便利です。下記のようなテーブルを作ってください。
・ちょと CakePHPを意識して、主キーは「id」でauto-incrementで。

field type null etc
id int(11) no unsigned auto-increment

(3) 適当にデータを入れて下さい。次に、テーブルを読み込みます。
・$wpdbオブジェクトを使うと、接続処理とか既にWordPressがやっているので、簡単にデータを持ってこれます。

<h2>モリパワー社員一覧</h2>
<?php
global $wpdb;
$table = "test_table";
$results = get_results("SELECT * FROM ". $table, "ARRAY_A");
print_r($results);
?>

・こんな感じで、テーブルの内容が表示されるはず。

モリパワー社員
Array ( [0] => Array ( [id] => 4 [name] => モリパワー社員あいう
　　　　　　　　 [age] => 50 [employee_no] => 192000 ) )

・表示されるのは分かったので、もっと表らしくtableタグで表示します。

  <table class="widefat">
    <thead>
    <tr>
      <th><?php _e('ID','mtm_poedit'); ?></th>
      <th><?php _e('氏名','mtm_poedit'); ?></th>
      <th><?php _e('年令','mtm_poedit'); ?></th>   
      <th><?php _e('社員番号','mtm_poedit'); ?></th>
      <th><?php _e('操作','mtm_poedit'); ?></th>
    </tr>  
    </thead>
   
    <?php foreach ($results as $i=>$row): ?>
    <tr>
      <td id="<?php echo "id".$i; ?>"><?php echo $row['id']; ?></td>
      <td id="<?php echo "name".$i; ?>"><?php echo $row['name']; ?></td>
      <td id="<?php echo "age".$i; ?>"><?php echo $row['age']; ?></td>   
      <td id="<?php echo "employee_no".$i; ?>"><?php echo $row['employee_no']; ?></td>
      <td><input type="button" value="<?php _e('copy','mtm_poedit');?>" onclick="copy_field(<?php echo $i; ?>)" /></td>
    </tr>  
    <?php endforeach; ?>

・こんな感じで表示されるはず。
m20110420-1
・class を widefat とするとダッシュボードでよく見る表デザインになるみたい。
・ループさせて行を表示して、id名に $i をつけて判別できるようにしました。javascriptのfield_copyという関数で、formのinputにコピーさせようと思います。

＝＞ WordPress プラグイン制作　その３

WordPress プラグイン制作　その１

WordPressのプラグイン機能でダッシュボードに管理画面を作成します。第１回目は、ダッシュボードにプラグインの枠を作るところまでです。

(1) プラグインの基本的なフォルダーとファイルを作ります

・プラグインフォルダは、wp-content/plugins/　配下に作ります。
　　　⇒　例えば、moripower-table-manager フォルダとします。
・ここに、phpファイルを作りましょう。
　　　⇒　例えば、moripower-table-manager.php とします。

<?php
/*
  Plugin Name: MoriPower Table Manager
  Plugin URI: http://www.moripower.jp
  Description: Plugin for Database Table CRUD
  Author: Tsukasa Morinaga
  Version: 0.1
  Author URI: http://www.moripower.jp
*/
?>

これだけでプラグインの一覧に、題のみですが表示されます。
m20100419

(2) ダッシュボードのメニューに、項目を表示させまます

先ほどの、moripower-table-manager.php に下記のコードを記述しましょう。
・add_actionの説明は、WordPress プラグイン作成前の基礎知識が理解しやすいです。
・フックの種類を調べるには、WordPress Hooks Database が非常に便利です。
・フックってVBとかAccessのイベントプローシジャみたいなものかな？ まさに引っ掛けるって感じがぴったり！

//　管理パネルにメニュー項目を追加する
add_action('admin_menu', 'moripower_table_manager_addmenu');

//　メニュー項目を追加
function moripower_table_manager_addmenu() {
$name = 'モリパワー社員管理';
add_management_page(__($name), __($name), 10, basename(__FILE__),
             'moripower_table_manager');
}

早速、プラグインを有効化してみましょう！
m20100419-1

ダッシュボードのメニューに、表示されたはずです。

m20100419-2
管理画面に自分のメニュー項目が表示されて何だかうれしい・・・。

「モリパワー社員管理」をクリックしてみます。当然、まだ何も作ってないので、真っ白！
m20100419-3

※次回は、中身を作ってみます。予定としては、データベースにテーブルを作って、それを更新する感じの管理画面です・・・。

＝＞ WordPress プラグイン制作　その２

久しぶりの感動！　ScreenGrab

いやー、久しぶりに感動したソフトに出会いました。
ScreenGrab　FireFox用ですが。

スクリーンショットのソフトで、使い勝手が良くて思わずパソコン触るのが楽しくなります。
（っていうか、これ結構、前からあるみたい・・・。なんか悔しいです。）

他の方には同じ悔しさ味わってほしくないので、早速、ご紹介します。

・FireFoxのアドオン
m20110414-1

・ScreenGrabで検索し、インストール
m20110414-2

・FireFox再起動で、右下に「ひかえめ」に出てきます。この控え目さがイイ。
・Saveでファイルに保存、Copyでクリップボードに。ウィンドウや範囲を指定して取り込みも可。
m20110414-3

・クリップボードにコピーして、WordやPowerPointにも直ぐに貼り付けできる。
・これでマニュアル作りもストレスなく、らくらくに。

・ところで、IEにはないのかな？