takaiwa.net

Android、Java、Web系、Linux、マラソン等の備忘録

2011/07/28

jQueryのライブラリでIEでも動くアナログ時計を作成してみた

1 件のコメント
前回、Excelでゴリゴリ描いた文字盤(PNG画像)、
・Excelの図形を組み合わせて文字盤を作る方法 | たかいわ屋
http://takaiwa.net/archives/661
clock_face
をJavaScriptで動かしてみたいと思います。ちなみに、Excelで作成した図形は、全ての図形を選択してグループ化してコピーし、Firewoksを開いて、200px × 200pxで保存しました。文字盤以外にも、長針、短針、秒針も画像が必要なので、同様にExcelで作成し、これも200px × 200pxのサイズで、半径の位置に置いてPNG画像として保存しました。

clock_minutes_hand
図1:長針 

clock_hours_hand
図2:短針 

clock_seconds_hand
図3:秒針

秒針は、何も表示されていないように見えますが、白色なので背景色を変えればわかります。
で、参考させていただいたサイト
・アナログ時計をJavaScriptで作ってみた
http://www.onside.com/blog/archives/2010/11/01/2992.html
を基に、ライブラリであるjQueryRotateの
・jqueryrotate - jQuery plugin that rotate images (and animate them) by any angle - Google Project Hosting
http://code.google.com/p/jqueryrotate/
安定バージョンv.1.7をダウンロードしてコーディングしました。
<html>
<head>
    <script type="text/javascript" src="./jquery-1.6.2.js"></script>
 <script type="text/javascript" src="./jQueryRotate.1.7.js"></script>
 <style type="text/css">
 .clock_face {
  width: 200px;
  height: 200px;
  background-image: url("./clock_face.png");
  position: relative;
 }
  
 .clock_hours,
 .clock_minutes,
 .clock_seconds {
  width: 200px;
  height: 200px;
  position: absolute;
  top: 0;
  left: 0;
 }
 </style>
    <script type="text/javascript">
        $(function(){
         // 初期化処理
   analog_clock();
        });
        
        function analog_clock(){
   today = new Date();
   var hour = today.getHours();
   var minute = today.getMinutes();
   var second = today.getSeconds();
   $('#clock_hours_hand').rotate(hour*30+minute/2);
   $('#clock_minutes_hand').rotate(minute*6+second/10);
   $('#clock_seconds_hand').rotate(second*6);
   setTimeout("analog_clock()",1000);
  }
    </script>
</head>
<body>
 <!-- 時計の画像  -->
 <div class="clock_face">
 <div class="clock_hours"><img src="./clock_hours_hand.png" id="clock_hours_hand" /></div>
 <div class="clock_minutes"><img src="./clock_minutes_hand.png" id="clock_minutes_hand" /></div>
 <div class="clock_seconds"><img src="./clock_seconds_hand.png" id="clock_seconds_hand" /></div>
</div>
</body>
</html>



デモ







Excelの図形でも、なんとか時計っぽく見えますね。。



2011/07/27

Excelの図形を組み合わせて文字盤を作る方法

0 件のコメント

作成に使用した環境:Excel 2007 SP2

力業で誰得な方法です。 が、Excelなのでカラーバリエーションやサイズを変更しやすいかな・・?と思います。文字盤と言いながら、文字は入ってません。
Excelで文字盤の目盛の入れ方というのが正しいです(;^_^A

image
図1 完成図

JavaScriptを使って、アナログ時計を作りたかったのですが、文字盤は画像を使うというこで、ネットで文字盤の画像や文字盤を作成するフリーソフトを探しても良かったのですが、適当なのが無かったのと、背景色と合わせたかったので、自作することにしました。単純な構成の図でありながら、お絵かきソフトを使い慣れていない僕は、Excelの図形を組み合わせて作成してみたいと思います。

image
図2 基本の円

まず、挿入から図形を選択し、「円/楕円」という図形をシート上に描きます。楕円にならないよう、高さと幅を同じ値にしておきます。

1.文字盤と角度の関係

文字盤を描く前に、秒針の角度について触れておきます。当たり前の事ですが、0秒から60秒進むのに、秒針は360°回転します。なので、1秒進むと、6°傾いているということが言えます。Excelで描く文字盤には、6°ずつ傾けて線を描きます。


image
表1-1 秒と角度の対応(30秒まで)


また、図1にあるように、細かく目盛が振ってあるアナログ時計の文字盤の目盛の大きさは、

  • [大] 0秒、15秒、30秒、45秒の位置
  • [中] 5秒、10秒、20秒、25秒、35秒、40秒、50秒、55秒の位置
  • [小] それ以外の位置

となっていることが多いと思います。表1-1では、大:オレンジ、中:黄色、小:白色で色分けしてみました。それぞれの部分で違う目盛を描く必要があります。

これらを踏まえて、小サイズの目盛から描き始めていきます。

2.小サイズの目盛を描く

挿入から図形を選択し、「直線」で、円を真っ二つにするように線を引きます。
image
図2-1 直径に線を引く

Excel 2007だとちょうど直径になるように、線が引けます。この線を、書式リボンから、回転→その他の回転オプションを選びます。

image
図2-2 回転オプション

サイズタブの回転欄に、既に90°もしくは270°と値が入っているはずです。表1-1になあるように、1秒は6°なので、ここから6°回転させます。

image
図2-3 1秒分回転

次に、再び図2-1のように、縦線を入れます。今度は、2秒目を表すために、12°回転させます。同じ手順で、18°回転と、最後に回転させない線追加します。

 image
図2-4 0秒~3秒まで

これで、0秒、1秒、2秒、3秒の所に線が入ったことになります。この線をグループ化して、コピーして、以下の角度へ回転させた位置へ配置します。

  • 36°
  • 66°
  • 96°
  • 126°
  • 156°

image 
表2-1 コピー後に必要な回転(赤枠)

グループ化しているので、6個分の作業です。コツとしては、Excelのシートの表示倍率を200%程度に拡大し、図2-4のグループ化した線をコピーしたら、コピー元はそのままにしておいて、全く同じ位置へ貼り付けます。微調整はキーボードの矢印キーなどで行い、図2-2やった回転オプションで、上記の角度へ回転させます。なので、36°→66°→96°→126°→156°という順番で、最後に、コピー元を6°回転ということになるかと思います。

image 
図2-5 文字盤の小サイズの目盛

このままだと、目盛とは言いがたいので、背景の円をコピーして縮小させます。ここでは、縦横共に0.5cm縮小させました。

image

これを、かぶせます。

image 

3.中サイズの目盛を描く

要領は、先ほどの小サイズの目盛と同じです。

image 

縦に線を入れて、今度は表1-1の黄色い部分の値で回転させます。

image 

また、これを先ほどの要領と同じで、ふたをします。ただし先ほどより、縮小はほんの少しにします。かぶせるにあたり、色が同化して中心が分からなくなるので、重ね合わせるまで、一時的に後ろの円の色を変えておくと良いかも知れません。

image

image

こんな重なり方をすると、非常に選択し辛く、元の色に戻せないという自体が発生しますが、書式リボンで、「オブジェクトの選択と表示」をクリックすると、

image

サイドにオブジェクト一覧が表示されるので、円/楕円を選択して、塗りつぶしの色を変更すると、元の色に戻せます。

image

アナログ時計の文字盤っぽくなってきましたね。

4.大サイズの目盛を描く


中サイズと同じ手順で、表1-1のオレンジ色の角度に、貼り付けていきます。というか、線をクロスさせればいいだけです。

image

で、同じように、縮小した円でふたをします。

 image

で、このままでも良いのですが、目盛の外側に余白が欲しいので、ほんの少し大きめの円を作成して、最背面で貼り付けます。

image

これで、文字盤の完成です!
後は、グループ化して、お絵かきソフトでJPGやPNG保存をするか、Excel背景の枠線を消して画面キャプチャするかで、画像として使えます。



 

 

 
Officeで描ける!!クリップイラストテクニック Word/Excel/PowerPoint対応
狩野 祐東
技術評論社
売り上げランキング: 181375

2011/07/25

UMLについて

0 件のコメント

UML(Unified Modeling Language)
ソフトウェア工学におけるオブジェクトモデリング用の標準化されたビジュアル言語。

僕的には、コーディングに入る前に、頭に描いてる設計をUMLの図を用いて見える化して、レビューワーと設計の認識を合わせたり、指摘受けたりしてました。

レビューワーが居なくても、全体像を確認する設計の地図のような役割で作成するもいいかもしれません。インプット/アアウトプットがどうなってるのか?ちゃんとカプセル化されてるのか?処理の順序は正しいか?とか・・・要は、メモ用紙に描いて実装方法を検討したりする図と変らないのですが、それが国際標準規格された図なので、インターネットにアップして、何の図なのか?というが共通認識できる図(モデリング言語)だと解釈しています。

UML以外でよく使われるもの

  • ER(Entity Relation)図:データベースの設計
  • DFD(Data Flow Diagram):構造化分析の設計

ER図はリレーショナルデータベースの設計に広く使用されています。
DFDはプログラムというよりは、経営に必要なビジネスプロセスを整理する、システム設計よりも上流の工程に利用され、処理手順と処理モジュールを一つの図にします。それに対して、UMLのアクティビティ図または、シーケンス図、クラス図、オブジェクト図など、目的に特化して図を定義します。その為、保守が煩雑になるデメリットを持っています。

上記でも述べたように、現在のソフトウェア開発において事実上の標準なので、最も普及しています。UML2.0以降では、13種類も図が存在します。この中でよく使われる図を赤字にしています。

構造図

  • クラス図
    image 

  • 複合構造図
  • コンポーネント図
  • 配置図
  • オブジェクト図
  • パッケージ図

振る舞い図

 

  • アクティビティ図
  • ユースケース図
    image

  • ステートチャート図(状態遷移図)
    image

相互作用図

  • シーケンス図
    image

  • コミュニケーション図
  • 相互作用概要図
  • タイミング図


2011/07/21

PHP上で扱う時間の覚え書き

0 件のコメント

文字列時間を連想配列として取得

$arry = strptime("2011-07-13 01:41:43", "%Y-%m-%d %H:%M:%S");
echo "<pre>";
print_r($arry);
echo "</pre>";


出力結果



Array
(
[tm_sec] => 43
[tm_min] => 41
[tm_hour] => 1
[tm_mday] => 13
[tm_mon] => 6
[tm_year] => 111
[tm_wday] => 3
[tm_yday] => 193
[unparsed] =>
)


ただし、そのまま連想配列として表示しているのではなく、tm_monは-1ヶ月、tm_yearは-1900年されて表示されている。





指定した時間をUNIXタイムとして取得



//2011-07-13 01:41:43
$unixtime = mktime(
1, // 時間
41, // 分
43, // 秒
7, // 月
13, // 日
2011); // 年

echo $unixtime;


もしくは、



$unixtime = strtotime("2011-07-13 01:41:43");


出力結果



1310488903




UNIXタイムを指定の書式で取得



echo strftime("%Y/%m/%d", $unixtime)."<BR>";
echo strftime("%H:%M:%S", $unixtime);


出力結果



2011/07/13
01:41:43




UNIXタイムで現在時刻との差分



$dif = time() - $unixtime;
// 基準は1970-01-01 00:00:00からの経過時刻
echo gmdate('Y年m月d日 H:i:s', $dif);
echo "<BR>";
// 別に24時間以内であれば、そのままストップウォッチのような
// 経過時間としてカウントできる
echo gmdate('H:i:s', $dif);


出力結果



1970年01月09日 08:44:11
08:44:11

【Ajax】jQuery + PHP のJSON連携サンプルの覚え書き

0 件のコメント

動作確認の環境

  • サーバ:CentOS Apache/2.2.3
  • クライアント:Windos XP Opera 11.50
  • PHP:5.1.6
  • jQuery:1.6.2 Uncompressed Code
  • JSON.php :1.31

処理の流れは、

  1. [クライアント] テキストエリアに文字列を入力
  2. [クライアント] 送信ボタン押下でテキストをサーバへ送信
  3. [サーバ] 取得したテキストと時刻でJSONデータを作成
  4. [クライアント] サーバからのJSONデータを処理して、画面に表示

Screenshot_1
画面スクリーンショット





クライアント側のサンプル

jQueryのサイトへアクセスしてDonwloadボタンでjsファイルをダウンロードします。ソースを見やすいようにUncompressed版にしました。

 http://jquery.com/

現在最新は1.6.2でした。これをサーバへアップロード。上図の画面を表示すべくサンプルソースは、

<html>
<head>
<script type="text/javascript" src="./jquery-1.6.2.js">
</script>

<script type="text/javascript">
$(function(){
// 初期化処理
$("#frmSend").submit(function(){
send($("#keyword").val());
return false;
});

});

function send(keyword) {
// 送信処理
$.ajax({
type:"POST",
url:"http://takaiwa.net/"
+"works/public/samplepg/20110721/server.php",
data: { // 付加する情報
"keyword":keyword
},
success: function(ret) {
// サーバからのレスポンス処理
var jsonObj = eval(ret);
var str = "";
if(jsonObj[0].timestamp) {
str = jsonObj[0].timestamp + ":";
}
if(jsonObj[0].keyword) {
str += jsonObj[0].keyword;
}
str += "<br>";
$("#disp").append(str);
}
});
}

</script>
</head>
<body>
<form id="frmSend">
<textarea type="text" id="keyword" rows="6" cols="40"></textarea>
<BR>
<input type="submit" value="送信">
</form>
<br>
<div id="disp"></div>
</body>
</html>


初期化処理で、送信ボタンを押したら、send関数を実行するようにしています。send関数への引数は、textarea内のデータ。



また、send関数内のsuccessはサーバの処理が成功して返ってきたら実行する関数です。引数retにJSONデータが格納されています。


[JSONデータ例]



[
{
"timestamp":"2011-07-21 09:11:32",
"keyword":"hogehoge"
}
]


※見やすく改行等を入れてる



jsonデータはeval関数を使って、JavaScriptオブジェクトに変換しています。この時、JSONデータの書式に誤りがあ場合は、JavaScriptエラーになります。Operaの場合は、Operaボタン → ページ → 開発者用ツール → エラーコンソールでエラーを確認できます。




WS000168





サーバ側のサンプル


JSONデータを作成するにあたり、PEARのJSON.phpライブラリを使用します。




http://mike.teczno.com/JSON.tar.gz




これをコマンドで、



# wget http://mike.teczno.com/JSON.tar.gz


でサンプルファイルと同じディレクトリへダウンロードし、





# tar xzvf JSON.tar.gz


コマンドで解凍すると、JSON.phpファイルが出現します。これを利用して、



<?php
require_once "./JSON.php";

// 一旦、配列として格納
$arr = array();
$data["timestamp"] = date("Y-m-d H:i:s");
$data["keyword"] = $_POST["keyword"];

array_push($arr, $data);

// 配列をJSONデータに変更
$json = new Services_JSON;
$encode = $json->encode($arr);

echo $encode;

?>

連想配列を作成してから、エンコードしてJSONデータを作成します。これにより作成されるJSONデータは上記に示したような形式です。

デモ


デモページへのリンク






jQueryで作る Ajaxアプリケーション
沖林 正紀
技術評論社
売り上げランキング: 144718

2011/07/11

【PHP】Postgresqlのselectやupdateメモ

0 件のコメント

ちょっと、PHPからPostgresqlのテーブルへアクセスしたいなって時に、使い回し出来そうなサンプルプログラム。

<?php
/**
* ConnnectDBクラス
*/
class ConnnectDB {
// データベース設定
private $server = "localhost";
private $user = "username";
private $password = "password";
private $dbname = "database";
private $count = 0;

/**
* コンストラクタ
*
* @return void
*/
function ConnnectDB()
{
$cnstr="host=".$this->server
." port=5432 dbname=".$this->dbname
." user=".$this->user
." password=".$this->password;
pg_connect($cnstr);
}

/**
* テーブルからレコード取得
*
* @return objects
*/
function getRecord()
{
if(!($result = pg_exec("select * from table")) ){
return "-1";
}

$this->count = pg_numrows($result);

return $this->_convertObject($result, $this->count);
}

/**
* レコードの件数取得
*
* @return レコード件数
*/
  function getCount() {
return $this->count;
  }

/**
* update
*
* @param $updates アップデートさせたいカラム名の配列
* @return bool
*/
function update($updates)
{
$sets = array();
foreach ($updates as $key=>$value) {
$value = $this->_escape($value);
$tmp = "$key = '$value'";
array_push($sets, $tmp);
}
$set = join(",", $sets);

$sql = "update table set $set";
// echo $sql;
$result = pg_exec($sql);

return $result;
}

/**
* パラメータのエスケープ
*
* @param $str
* @return エスケープされたデータ
*/
function _escape($str)
{
$escaped = pg_escape_string($str);
return $escaped;
}

/**
* 結果セットをオブジェクトの配列で返却
*
* @param &$result
* @return objects
*/
function _convertObject($result, $ct)
{
$ret = array();
for ($i = 0; $i < $ct; $i++) {
$obj = pg_fetch_array($result,$i);
array_push($ret, $obj);
}
return $ret;
}

}

?>


updateメソッドには、where句で更新対象レコードを絞れるようにしておきたい。このクラスの使い方は、こんな感じで。insert文は今回は作成せず・・・(;^_^A





<?php
require_once 'ConnnectDB.php';

$db = new ConnnectDB();

// テーブルデータ取得
$record = $db->getRecord();

echo "<pre>";
print_r($record);
echo "</pre>";

// テーブルデータの更新
$update["title"] = "test title";
$update["timerecorder"] = date("Y-m-d H:i:s");

$result = $db->update($update);
?>

2011/07/10

PHPからGoogleカレンダー操作2:Event(予定)を投稿する

1 件のコメント

前回はPHPの環境を整えてカレンダーリストを取得するもの↓でしたが、

・PHPからGoogleカレンダー操作1:Zend Framework(Zend Gdata)の環境を整える | たかいわ屋
http://takaiwa.net/archives/545

今回はカレンダーへ予定を追加してみたいと思います。前回同様、

・Data API Developer's Guide: PHP - Google Calendar APIs and Tools - Google Code
http://code.google.com/intl/ja/apis/calendar/data/1.0/developers_guide_php.html

こちらを参考にします。
Event(予定)に設定する項目は、「Creating Events」辺りに説明があります。

  • Title:イベントの見出し
  • When :イベントの期間。省略するととりあえず現在時刻に追加されるようです
  • Author:イベントを作成したユーザ
  • Content:イベントの詳細(説明)
  • EventStatus:そのイベントが確認済み (confirmed) なのか仮の予定 (tentative) なのか、 あるいは取り消された (canceled) を表す
  • Hidden:カレンダー上で非公開にする
  • Transparency:イベントをユーザの予定表に反映させるかどうかを指定
  • WebContent:イベント内で外部のコンテンツへのリンクを指定
  • Where:イベントの場所を指定し
  • Visibility:イベントを公開リスト上で非表示


WS000152 

とりあえず、赤字の部分だけ設定してEventを投稿してみたいと思います。





サンプルコード




<?php
require_once 'Zend/Loader.php';

Zend_Loader::loadClass('Zend_Gdata');
Zend_Loader::loadClass('Zend_Gdata_ClientLogin');
Zend_Loader::loadClass('Zend_Gdata_Calendar');

echo "hello create Event<br>";

$user = 'hogehoge@gmail.com'; // ユーザ名
$pass = 'password'; // パスワード
$service = Zend_Gdata_Calendar::AUTH_SERVICE_NAME;
// ログイン
$client = Zend_Gdata_ClientLogin::getHttpClient($user,$pass,$service);
$gdataCal = new Zend_Gdata_Calendar($client);
// 新規イベントの作成
$newEvent = $gdataCal->newEventEntry();
// イベントの見出し
$newEvent->title = $gdataCal->newTitle("test5 event タイトル");
// イベントの期間
$startDate = '2011-07-09'; // 開始日時
$startTime = '08:16'; // 開始時刻
$endDate = '2011-07-09'; // 終了日時
$endTime = '09:16'; // 終了時刻
$tzOffset = '+09'; // タイムゾーンを日本に設定

$when = $gdataCal->newWhen();
$when->startTime = "{$startDate}T{$startTime}:00.000{$tzOffset}:00";
$when->endTime = "{$endDate}T{$endTime}:00.000{$tzOffset}:00";
$newEvent->when = array($when);
// イベントの説明
$newEvent->content = $gdataCal->newContent("test 説明");
// イベントの場所
$newEvent->where = array($gdataCal->newWhere("test 場所"));
// イベントをカレンダーへ反映
$createdEvent = $gdataCal->insertEvent($newEvent);
// 追加したイベントのID
echo $createdEvent->id->text;
?>








実行結果




このPHPを実行すると、




[実行結果]


WS000156


 
イベントのIDがhttp://www.google.com/calendar~と返ってきます。




このソースで注意する点というか、引っかかった点はイベントの期間のところで、午前だったので8:16と設定してたらエラーが出ました。上記ソースのように0埋めが必要です→ 08:16


で、Googleカレンダーの方は、




[ブラウザで見たGoogleカレンダー]


WS000157



のように反映されてます。







別のカレンダーへEventを投稿








上記のサンプルソースでは、特にカレンダーを指定していないので、デフォルトのhogehogeカレンダー追加されます。insertEventの引数に、POST先URIを指定すればfugafugaカレンダーへの投稿も可能です。そのURIは




http://www.google.com/calendar/feeds/○○○○○/private/full


○○○○の部分へ、カレンダーIDを記述します。カレンダーIDは、上図のブラウザ画面で、マイカレンダーの[設定] – [fugafugaカレンダー] のカレンダーのアドレスの所へ記述されています。



WS000158




先ほどのソースへ直打ちするとこんな感じの修正になりますが、



$uri = "http://www.google.com/calendar/feeds/".
"fugafugaid@group.calendar.google.com".
"/private/full";
$createdEvent = $gdataCal->insertEvent($newEvent, $uri);


こういったシーンは、あまりないと思いますので、「fugafugaカレンダー」という名前だけ分かっているという前提で直打ちのソースを書き換えると。



$postCalName ="fugafugaカレンダー";

$calListFeed = $gdataCal->getCalendarListFeed();

foreach ($calListFeed as $calendar) {
// if文で止めても良いけど、とりあえず連想配列として格納
$calList[$calendar->title->text] = $calendar->content->src;
}

$uri = $calList[$postCalName];

$createdEvent = $gdataCal->insertEvent($newEvent, $uri);


これで、「fugafugaカレンダー」という値を与えるだけで、fugafugaカレンダーへの投稿が可能となります。



[ブラウザで見たGoogleカレンダー]


WS000159 
※10:16~11:16にfugafugaカレンダーへ追加

2011/07/09

自宅サーバのWebページをお名前.comでドメインを取得

0 件のコメント

次回、ドメインを新たに取得した時用にメモがてら・・

旧ドメイン:http://takaiwa.orz.hm/
新ドメイン:http://takaiwa.net/

Operaブラウザでこのサイトをググって、旧ドメインを踏もうすると、むむ怪しいサイト・・?と警告が出てしまうので、←何かの勘違いだった・・
お名前.comで980円/年のnetドメインを取得しました。

ちなみに、旧ドメインの方は、

・ドメイン名取得(ieServer.Net編) - CentOSで自宅サーバー構築
http://centossrv.com/domain-ieserver.shtml

を参考に、無料で運営しておりました。

お名前.comでドメインが取得できたら、ログインして、レンタルDNSレコードの設定をいじります。

Screenshot_3 

サイト中程にある、入力欄に

  • ホスト名:(未入力)
  • TYPE: A
  • VALUE : (グローバルIPアドレス)

を入力して、追加ボタンを押下します。ちなみに、グローバルIPアドレスは、

・確認くん(VIA the UGTOP)
http://www.ugtop.com/spill.shtml

の「現在接続している場所(現IP)」で確認します。追加ボタンを押下すると、入力欄の下に追加されます。僕はこれで追加されてると思ったのですが、サイト下の方の「確認画面へ進む」へ行ってなかったので、なかなか反映されないなぁ・・とバカやってました。「確認画面へ進む」ボタンを押下して、追加した内容を反映させると、24時間~72時間でドメインに反映されるそうですが、実際はもっと早いです。時間は計ってませんが、半日もかかってないかと・・

ドメインにグローバルIPが反映されてるかどうかは、

・IPひろば:メイン
http://www.iphiroba.jp/index.php

で、takaiwa.netと打ち込めばグローバルIPが割当たってるかどうかわかります。IPが割当たってれば、サイトを移行作業ですが、Apacheの設定等は割愛します。wordpressの移行に関しては、以前書いた記事が参考になるかと・・

・wordpressを手動でバックアップして、新しいドメインへ移行してみる
http://takaiwa.net/archives/463

バックアップを含めての話なので、ドメインを移行させるだけなら、圧縮/解凍作業は必要ありません。

2011/07/04

PHPからGoogleカレンダー操作1:Zend Framework(Zend Gdata)の環境を整える

1 件のコメント
GoogleカレンダーをAPIで操作するには、

・Google カレンダーの API とツール - Google Code
http://code.google.com/intl/ja/apis/calendar/

Google データ プロトコルを活用すれば、Google カレンダーのすべての機能にアクセスできるアプリケーションを作成できます。

Google Maps APIのようにサービス個別にAPIがあるのではなくて、Google Data APIプロトコルでGoogleカレンダーとやりとりができるとのこと。もちろん、Googleカレンダーへログインできるアカウントがある前提です。で、プログラミングを行うにあたり、どの言語を使おうか迷いましたが、とりあえず激しい動きをさせる予定も無いのでPHPというこで話を進めたいと思います。

開発環境の導入


僕の現状の開発環境は、

  • OS:CentOS 5
  • PHP:5.1.6

Googleカレンダーの開発者ガイドによると、

・Data API Developer's Guide: PHP - Google Calendar APIs and Tools - Google Code
http://code.google.com/intl/ja/apis/calendar/data/1.0/developers_guide_php.html

PHPからZend Frameworkのライブラリを利用してGoogle Data APIへアクセスする方法が解説されています。必要な環境は、

  • PHP 5.1.4以降
  • Zend Framework 1.0.0 RC2a以降

とりあえずPHPは現状のものを利用します。Zend Frameworkは入れてませんが、フレームワークその物でなくても、Google Data APIならZend Gdataを利用すれば良いとのことで、こちらだけをダウンロードしてみます。

・Zend Framework: Downloads: Downloads
http://framework.zend.com/download/gdata

※2011/07/04現在で、Zend Gdata 1.11.7が最新

これをダウンロードし、

$ wget http://framework.zend.com/releases/ZendGdata-1.11.7/ZendGdata-1.11.7.tar.gz



展開。



$ tar zxvf ZendGdata-1.11.7.tar.gz

 


開発環境の設定:ライブラリを認識させる







先ほどの開発者ガイドのサンプルプログラムを、今環境のまま実行させようとすると、Apacheのエラーログに以下のようなのが吐かれました。



[Mon Jul 04 00:13:13 2011] [error] [client 192.168.1.1] PHP Fatal error:  
Zend_Loader::require_once() [<a href='function.require'>function.require</a>]: Failed opening
required 'Zend/Exception.php' (include_path='.:/usr/share/pear:/usr/share/php') in
/var/www/html/ZendGdata-1.11.7/library/Zend/Loader.php on line 98



・Getting Started with the Google Data PHP Client Library - Google Data Protocol - Google Code
http://code.google.com/intl/ja/apis/gdata/articles/php_client_lib.html



によれば、Zend GDataのライブラリをPHPに認識させろ!とのことで、ライブラリを認識させるには、以下の3つの方法があるようです。




  • php.iniファイルでパスを通す


  • Apache環境なら、.htaccessファイルを作成してパスを通す


  • プログラミングするPHPファイルから動的に呼び出す



まあ一応、自宅サーバの管理者なので、php.iniを編集してパスを通したいと思います。Zend GDataを展開したパスが、



/usr/lib/php/ZendGdata-1.11.7


なので、php.iniファイルを開き、include_pathの所に、



include_path = ".:/php/includes:/usr/share/pear:/usr/lib/php/ZendGdata-1.11.7/library"


と追記してやればOK。ちなみに、php.iniファイルの場所は、



# php -r 'phpinfo();'


というコマンドで調べることが可能です。これでApacheをリスタートさせてやれば、Zend GDataライブラリを認識してくれます。


 

スクリプトでPHP環境の確認



Zend Frameworkが使える状態にあるかどうかは、以下のファイルを実行環境に落として実行してみるとわかります。



http://framework.zend.com/svn/framework/standard/trunk/demos/Zend/Gdata/InstallationChecker.php




[実行結果:正常]


Image [5] 


[実行結果:エラー]


Image [2] 



# yum install php-xml


でDOMの拡張機能をインストールした後、Apacheをリスタートで解決



[実行結果:エラー]


Image [4] 


上記の開発環境の設定作業で解決




このチェックはあくまでもZend Frameworkを動かす用のチェックだと思うので、Googleカレンダーを操作するのに、必ずしも正常状態にする必要はないかもしれませんが、まぁ、一つの目安ということで。





 

サンプルコード



 



<?php
require_once 'Zend/Loader.php';

Zend_Loader::loadClass('Zend_Gdata');
Zend_Loader::loadClass('Zend_Gdata_AuthSub');
Zend_Loader::loadClass('Zend_Gdata_ClientLogin');
Zend_Loader::loadClass('Zend_Gdata_Calendar');

echo "hello Zend Framework!";

$user = 'hogehoge@gmail.com'; // ログインアドレス
$pass = 'password'; // ログインパスワード
$service = Zend_Gdata_Calendar::AUTH_SERVICE_NAME; // predefined service name for calendar

$client = Zend_Gdata_ClientLogin::getHttpClient($user,$pass,$service);

$gdataCal = new Zend_Gdata_Calendar($client);
$calFeed = $gdataCal->getCalendarListFeed();
echo '<h1>' . $calFeed->title->text . '</h1>';
echo '<ul>';

foreach ($calFeed as $calendar) {
echo '<li>' . $calendar->title->text . '</li>';
}

echo '</ul>';
?>



このPHPファイルをWebサーバへアップロードして、問題無く実行されれば、登録しているカレンダーの一覧が表示されます。




Image [7]