2010年6月19日土曜日

ATNDから自分の参加するイベント一覧を取得してみた

私はATND というサービスをよく利用します。
このサイトは、イベントの参加登録ができるサイトで、よくIT系のイベントが登録されています。

ATNDはAPIが公開されており、APIを使って自由に検索ができるようになっています。
http://api.atnd.org/

そこで、私自身が参加しようとして登録してあるイベント一覧をこのブログに載せるガジェットを作ってみました。

とりあえず、自分自身が参加登録している一覧を取得するには下記のURLを使用します。
http://api.atnd.org/events/?user_id={個人のID}

私の場合はIDが21348なので
http://api.atnd.org/events/?user_id=21348
となります。

今回はjavascriptで全て実装したいので、jsonp形式でレスポンスをうけとります。
http://api.atnd.org/events/?user_id=21348&count=5&callback=atndCallback&format=jsonp


JSONPについては以前紹介した物がありますので、そちらを参照ください。
JSONPの使い方

作成したガジェット自体は、右の"参加予定のイベント"がそれになります!
javascriptだけで、これだけできるのでやっぱりjavascriptは便利です!
知っておいて損はないなー

・ガジェットのソース
var atndEdit = function() {
 //jsonp
 var url = 'http://api.atnd.org/events/?user_id=21348&count=5&callback=atndCallback&format=jsonp';
 var ele = document.createElement('script');
 ele.type = 'text/javascript';
 ele.src = url;
 document.body.appendChild(ele);
 //今日の日付作製
 var nowDate = new Date();
 var month = (nowDate.getMonth() + 1);
 month = month.length === 2 ? month : '0' + month;
 var day = nowDate.getDate();
 day = day.length === 2 ? day : '0' + day;
 var nowStrDate = nowDate.getFullYear() + month + day;
 //出力先
 var output = document.getElementById('atnd-div');
 var count = 0;
 return {
  disp : function(events) {
   var eventDate = events.ended_at.substring(0, 10).replace(/-/g, '');
   if(eventDate < nowStrDate) {
    if(count == 0) {
     output.innerHTML = '参加予定のイベントはありません';
    }
    return;
   }
   count++;
   var title = events.title;
   var url = 'http://atnd.org/events/' + events.event_id;
   var start = events.ended_at.substring(0, 10);

   var ele = document.createElement('a');
   ele.href = url;
   ele.target = '_blank';
   ele.innerHTML = title;

   var date = document.createElement('span');
   date.innerHTML = '・' + start + '';
   output.appendChild(date);
   output.appendChild(document.createElement('br'));
   output.appendChild(ele);
   output.appendChild(document.createElement('br'));
  }
 };
}();
function atndCallback(data) {
 var events = data.events;
 for(var i = 0; i < events.length; i++) {
  var eventDate = events[i].ended_at.substring(0, 10).replace(/-/g, '');
   atndEdit.disp(events[i]);
 }
}

2010年6月18日金曜日

phpMyAdminを使ってみた

MySQLは以前から使っていたが、基本的にターミナルベースで操作をしていた。

今回は、人が作ったモジュールのテーブルの中身を見たかったので、GUIが欲しくなりインストールしてみました。

といっても、設定は簡単でした。。。

■前提条件
OS: CentOS 5系
Apache: 2系(Apacheインストールを参照)
もちろん、PHPが動くことが必須(PHPが動かない人は、PHPインストールを参照して)

■インストール
とりあえずダウンロードして、解凍する。
今回は、MySQLのバージョンの都合でphpMyAdminが最新のが使えなかったので2系をダウンロードしました。
3系でも基本的に設定は同じなようです。

cd $APACHE_HOME/htdocs
> wget http://sourceforge.net/projects/phpmyadmin/files%2FphpMyAdmin%2F2.11.10%2FphpMyAdmin-2.11.10-all-languages.zip/download
> unzip phpMyAdmin-2.11.10-all-languages.zip
> mv phpMyAdmin-2.11.10-all-languages phpMyAdmin
> cd phpMyAdmin
> cp -ip config.sample.inc.php config.inc.php
> vi config.inc.php
//$cfg['blowfish_secret'] = ''; //ここに適当な文字を入れてあげてください
//$cfg['Servers'][$i]['host'] = 'localhost'; //という項目を見つけ、MySQLのあるサーバ名を記述してください!
以上で、インストールと設定が終わりです。

http://hogehoge/phpMyAdmin
というURLでアクセスすると下記画面が表示されます!
DBのユーザとパスワードをログイン画面に入力すると、ログインできます!
 あとは、直感にしたがって操作すれば、テーブルの中身が見れます!

2010年6月15日火曜日

Geolocation APIを使ってみた

HTML5では位置情報が取得出来るようなので、取得してみました!

緯度経度以外にも、標高も取得出来ます!


・プロパティーの一覧はこんな感じです

位置情報のプロパティcoordsのプロパティ説明
coordscoords緯度
longitude経度
altitude標高(利用できない場合はnull)
accuracy緯度・経度の正確さ(単位はメートル)
altitudeAccuracy標高の正確さ(単位はメートル)
headingデバイスの進行方向。真北に対する時計回りの角度。利用できない場合はnull
speedデバイスの進行速度。利用できない場合はnull
timestamp位置情報を取得した時間(1970/1/1からのミリ秒


-サンプル
GeolocationAPIを一通り使ってみました

緯度経度のみならず、標高も取得出来るのは驚いた。
標高がわかる携帯電話とかから使えば大丈夫なのかな?

2010年6月8日火曜日

HTML5 のWeb Storageを使ってみた

今回は、ローカルストレージと、セッションストレージを使ってみました!

■ローカルストレージ
下記のような 簡単なサンプルを作りました。
storeにて値の登録を行います。そうすると、store dateに登録されている一覧が表示されます。
さらに追加で登録を行うと、下記のようになります。


ローカルストレージのサンプル


・ソース
JavaのHashMapに値を格納するような感覚で使えます!
前回記述した通り、格納した値は消してあげないと消えません。
同一オリジン、同一ブラウザでなら、消されるまで値が保持されます。


■セッションストレージ
セッションストレージのサンプル
キャプチャ的には同じなので貼りません^_^;
基本的には、ローカルストレージのlocalstorageをsessionstorageに置換してあげれば使えます!
API的にも同じものが用意されています!

ただし!
前回説明した通り、別ウィンドウを開くと値はコピーされますが、
その瞬間だけ値が同じなだけでどちらかで更新してももう一方には反映されません!
上記のサンプルにて、試せるようにしてあるので実際に試してみてください。

こちらは、ウィンドウを閉じれば保持していた値は消えるので、特に気になるところはないな。
使い道は、、、別ウィンドウを開くときにパラメータとして渡したいってときぐらいしか使わないか?
渡せるけど、その画面から情報は受け取れないけどねw

■いちおうAPIを書いておきます
・メソッドについて

メソッド解説
lengthストレージ内に格納されているデータ数
key(index)指定されたインデックスのKeyを返す。存在しない場合はnullが返る
getItem(key)指定されたKeyに対応する値を返す
setItem(key, data)ストレージに指定したKey値で値を登録する
removeItem(key)ストレージから指定されたKey値に対応するデータを削除する
clear()すべてのデータをストレージから削除する

・storageイベントのプロパティについて

プロパティ解説
key変更されたKey。clear()メソッドが呼ばれた際にnull
oldValue変更前の値(のコピー)。新しいキーで値が登録された場合はnull。
newValue変更後の値(のコピー)。値が削除された場合にはnull。
urlイベント発生元のドキュメントURL。
storageArea変更されたストレージへの参照。
使い方
なぜか、イベントで処理をするとブラウザがクラッシュすることがありますので、気をつけてください。
使い方が悪いのか?それともブラウザがまだちゃんと対応されていないのか?

2010年6月7日月曜日

HTML5のWeb Storageを使ってみる前に軽くまとめてみた

■Web Storageとは
Web Storageとは、クライアントのディスクにデータを保存出来る仕組みです。
Web Storageは単純な”キー・バリュー”ストレージで、キーは文字列、バリューは任意のJavaScriptオブジェクトとなります。

■Web StorageとCookieの違い
Web Storageと似ている機能に、Cookieがあります。
違いをまとめておきます。

CookieWebStorage
サイズ制限1サイト4KBなし
HTTPリクエストHTTPリクエストに自動的に付加され送信される付加されない
有効期限指定できる指定できない
JavaScriptオブジェクト格納できない格納できる

■Web Storageの種類
Web Storageには、ローカルストレージセッションストレージが存在します。

-ローカルストレージ
Webサイト毎に使用できる、永続化領域の事で永続期間は無制限です。
同一ブラウザ、同一オリジン(プロトコル+ドメイン + ポート番号)にて、共有することができます。

-セッションストレージ
基本的にはローカルストレージと同じ。
ただし、有効範囲と生存期間がwindowオブジェクトと同じになっている。
ウィンドウを閉じられるとセッションストレージ内のデータは削除されます。(再読み込みなら削除されない)
ウィンドウから、別のウィンドウを開いた場合は、ストレージの内容がコピーされて渡されます。
コピーなので、別ウィンドウで書き換えても元のウィンドウには反映されません。逆も同じくコピーされません。

2010年6月1日火曜日

HTML5のWeb Workersを使ってみた

Web WorkersはJavaScriptをバックグラウンドで動かすことができる仕組みです!

バックグラウンドで動くことができるので、重たい処理をJavaScriptで処理させてもブラウザが固まらない!っていうメリットがあります。
使い方によっては、めちゃくちゃ便利だと思います。

ただし、WebWorkersからはDOMを操作ができないので注意!
やらないと思うが、alertも使えないので気をつけてください!

■サンプル1
バックグラウンドで、ひたすらカウントアップした結果を返し表示するだけ
サンプル

-index.html


-worker.js


■解説
①バックグラウンドで実行したいJavaScript(Worker)を指定する
②Workerからのメッセージが送信された際に実行されるイベントを登録する。
③Workerから受け取ったメッセージのデータを取得し、表示させる。
以上が簡単な使い方です!


■サンプル2
バックグラウンドで実行されるWorkerに引数を渡して、それに応じて値を返してもらう
一応、四則演算の結果を返すサンプルにしています。

-index.html


-worker.js
■解説 ①Workerに対して、データを送信する。 ②WorkerがpostMessageをした場合に呼ばれる。 Workerには無駄にカウントアップする処理が含まれている、 通常ならブラウザがロックされてしまい、スクロールができなくなる。 でも、今回はWorkerを使用しているのでDOM側がロックされる事がない。 試しにサンプル画面でスクロールをして見てください。