Archive for 10月, 2010

Ajaxで通信テスト

金曜日, 10月 29th, 2010
このエントリーを含むはてなブックマークはてなブックマーク - Ajaxで通信テスト

AjaxでHello, worldを作ってみました。このプログラムは、ブラウザからリクエストを出しサーバ側で発行されるメッセージを非同期で表示するものです。図示するとこんな感じ。

ajax1

まずは、HTMLファイルから見ていきます。

message.html

<html>
 <head>
  <title>HelloAjax</title>
  <script type="text/javascript" src="ajaxUtils.js"> </script>
 </head>

 <body>
  <h1>Message: <span id="message"></span></h1>

  <form method="GET">
    <input value="Get message" type="button"
           onClick="getMessage();" />
  </form>
 </body>
</html>

ボタンがクリックされたときにgetMessage()関数を呼び出しています。この関数はヘッダの中に書かれているajaxUtils.jsに記述されています。では次にajaxUtils.jsの中身を見ていきます。

ajaxUtils.js

var request = null;

function createRequest() {
	try {
		request = new XMLHttpRequest();
	} catch (trymicrosoft) {
		try {
			request = new ActiveXObject("Msxml2.XMLHTTP");
		} catch (othermicrosoft) {
			try {
				request = new ActiveXObject("Microsoft.XMLHTTP");
			} catch (failed) {
				request = null;
			}
		}
	}
	
	if (request == null)
		alert("Error creating request object!");
}

function getMessage() {
	createRequest();
	var url = "messenger.php";
	request.open("GET", url, true);
	request.onreadystatechange = updatePage;
	request.send(null);
}

function updatePage() {
    if (request.readyState == 4) {
		var ret = request.responseText;
		document.getElementById("message").innerHTML=ret;
	}
}

getMessage関数の中で、createRequest()関数を呼び出し、XMLHttpRequestのインスタンスを生成しています。次にそのインスタンスを使用してmessager.phpにリクエストを送信します。リクエストに対してリプライがあった時にはupdatePage()関数がコールされるようにonreadystatechangeを設定しています。

最後にサーバで動作するmessenger.phpの中身を見てみます。

messenger.php

<?php
	$message = 'Hello, world';
	echo $message;
?>

このデモをココに置いておきます。
参考にしてみてください。

Ajax通信テスト

iPhoneアプリ:Twitpicアップローダをつくる その2

水曜日, 10月 27th, 2010
このエントリーを含むはてなブックマークはてなブックマーク - iPhoneアプリ:Twitpicアップローダをつくる その2

前回は写真をTwitpicにアップロードするため、ライブラリの設定までを行ないました。今回は、実際にアップロードするプログラムを書いていきます。

コードを書くにあたって、以下のサイトのコードを利用させていただきました。感謝!
iPhoneアプリからTwitpicに画像をアップロードする方法

TwitterTestViewController

- (void) uploadPhotoUserName:(NSString*)name password:(NSString*)pass 
						text:(NSString*)text image:(UIImage*)img
{
    NSURL *url = [NSURL URLWithString:@"http://twitpic.com/api/uploadAndPost"];
    ASIFormDataRequest *request = [[[ASIFormDataRequest alloc] initWithURL:url] autorelease];
    
    NSData *twitpicImage = [[[NSData alloc] initWithData:UIImagePNGRepresentation(img)] autorelease];
	
    [request setPostValue:name forKey:@"username"];
    [request setPostValue:pass forKey:@"password"];
    [request setData:twitpicImage forKey:@"media"];
	[request setPostValue:text forKey:@"message"];
    [request start];
    

    NSData *response = [request responseData];
    NSArray *results = PerformXMLXPathQuery(response, @"/rsp/@stat");
    if ([results count] != 0) {
        NSString *stat = [[results objectAtIndex:0] objectForKey:@"nodeContent"];
        if (![stat isEqualToString:@"ok"]) {
			UIAlertView *alert = [[UIAlertView alloc] initWithTitle:@"Information" message:@"failed to upload" delegate:self cancelButtonTitle:@"OK" otherButtonTitles:nil];
			[alert show];
			[alert release];
        }
    }
}

- (void)viewDidLoad {
    [super viewDidLoad];
	[self uploadPhotoUserName:@"ユーザ名" password:@"パスワード" text:@"Test Message" image:[UIImage imageNamed:@"test.jpg"]];
}

アップロードに重要な動作は全てuploadPhotoUserNameメソッドの中に記述されています。このメソッドに、Twitterのユーザ名、パスワード、投稿する文章、画像を引数として渡すことで、自動的にTwitpicに画像、Twitterにメッセージを投稿してくれます。

uploadPhotoUserNameメソッドの内部では、ASIFormDataRequestクラスのインスタンスを作成し、そのインスタンスに必要情報を全て格納し、アップロードしています。

今回のプロジェクトをココに置いておきます。
参考にしてみてください。

TwitterTest.zip

次回は、アップローダのインタフェースを設計していきます。

iPad利用法

火曜日, 10月 26th, 2010
このエントリーを含むはてなブックマークはてなブックマーク - iPad利用法

思ったより使えるiPad。
いいぞ、iPad。

ipad1

言うまでもなく、デザインは天才的。
これはAppleの十八番ですからね。
他社のモバイルデバイスが到達できない領域なのです。

ipad2

そして、カバンにすっぽり収まるA4サイズ。
まぁ、これは鞄次第ですが(笑)

基本的に僕はプロテクタとか、保護カバーとかは付けません。
見栄えが悪くなるし、重くなるからねー。
カバーで+300gなら、
始めからMacBookAir使うしー。

そのせいでiPhone4Gの液晶割りましたが何か?
デザインに犠牲はつきものですw

さて、最大の特徴。
電子書籍としてのiPad。
これが、素晴らしい。

ipad3

勿論、紙と区別がつかないほどの解像度があるかといえばNOですし、
紙に比べて遥かに重い。
でも、それを吹っ飛ばすだけの魅力があります。

僕の場合は、電子書籍というより
PDFビュアーとしての役割の方が大きいです。
論文をiPadに転送して読んでいます。

ipad4

ビュアー&論文管理にはGoodReaderを使用しています。
とにかくサクサク動いて、しかもメモまで書き込める。
ワンクリックでMacとのシンクロもとれますし、検索も早い。
もはや、今後論文を印刷することは無くなった!
といっても言い過ぎではないはず。

そして、人の論文を読む以上に、自分の論文のリバイスに使える。
少し直しては印刷、修正、また印刷、
を繰り返していたので本当にこれは便利。

O’reillyの書籍の大半が600円で提供されているみたいなので、
さてさて、俄然iPadを買った意味が出てきましたよ。
(iPhoneアプリなので、iPadで使うにはエクスポートが必要らしい
ここらへんの話題についてはココが詳しい)

こういうデジタルガジェットは、
買ってから使い方を考えればいいんです(笑)

iPadを購入してみた

月曜日, 10月 25th, 2010
このエントリーを含むはてなブックマークはてなブックマーク - iPadを購入してみた

さっき、新型MacBookAirを触りに、
京都駅のビックカメラまで行ってきた。

んで、なぜか買ってきたのがiPad。
あはは、衝動買い。

裏Hokusonが、
開発者のくせにiPadも持ってへんのはまずいやろ
とか囁くから仕方なく買ってあげましたよ(笑)

家に帰ってから気がついた衝撃の事実。
無線LANがナイト、ネットに繋がらナイト。

なんという、罠!
なんという、トラップ!

衝撃的だったので2回言ってみました。

オフラインやと、これ、ただの板やんけ。
よく言えば2001年宇宙の旅のモノリスかな(笑)

猿がさわった途端、ピカーンみたいな?
ピカーンの前に指紋で光沢消えましたがなにか?

さて、困った君のiPad。
どうやって楽しも。
とりあえずEmobileにでも加入してみるか?

ただ、ちょっと触った感じだと、
大きいだけのiPhoneとは少し違うな、と思う。
iPhoneとは根本的に異なったuser experienceを提供してくれそうな、
そんな予感がします。

そして、アプリを開発する側からすると、
画面の自由度が非常に大きいため、設計が難しい(笑)

特にドローツールの場合、更新する領域が広いので
これまでiPhone用に開発したアプリを移植するだけでは
動かないかもー。

もちろん、ドロー領域のみの更新はしてるんですけど、
オフスクリーンバッファを転送するのがなぁ・・・
OpenCVを使ってると、こういう所でしんどくなってくるなぁ。うげ。

ぼちぼち、調べていきます。

ちなみにMacBook Airは
開発には非力過ぎ。
モバイルには重すぎ。
ということで、見送りです。

iPhoneアプリ:Twitpicアップローダをつくる

日曜日, 10月 24th, 2010
このエントリーを含むはてなブックマークはてなブックマーク - iPhoneアプリ:Twitpicアップローダをつくる

急激にユーザ数を増やしつつあるTwitter。そのTwitterで画像を添付するのによく使われるのがTwitpic。最近のカメラアプリを見てもTwitpicへの投稿機能がついたものが増えてきましたね。2010年の8月まではTwitterもTwitpicもBasic認証で簡単にログインすることが出来たのですが、9月からはxAuth系の認証に変更されたため、実装が大変になりました。

そこで、今回はTwitpicアップローダのiPhoneアプリを作成してみたいと思います。
ユーザインタフェースはこんな感じにしてみました。

twitpic

いきなり上のインタフェースを持ったアップローダを作るのは大変そうなので、ファーストステップとして起動したら勝手にTweetする迷惑アプリから作っていきましょう。

さて、実際にどのようにしてアップローダを作るのか?ですが、実際にコツコツとプログラムを組むと日が暮れます。しかも最近は日が落ちるのが非常に早いです。秋ですから。ということで(?)今回はライブラリを利用していきたいと思います。

必要なライブラリはHTTPRequest用のものとXMLパース用の2種類です。それぞれASIHTTPRequest documentationUsing libxml2 for XML parsing and XPath queries in Cocoaに置いてあるのですが、見つけにくいので

TwitpicPac.zip

にまとめてパッケージ化したものを置いておきます。解凍して出来たASIとxmlフォルダをプロジェクトのclassフォルダの中に配置&プロジェクトに追加してください。(プロジェクトは毎度のことながらViewBasedApplicationで作成しています)

あとは、フレームワーク関連の追加を行ないます。Xcode左カラムのFrameworksフォルダを右クリック →「追加」→「既存のフレームワーク」の順に選択し、下記のフレームワーク&ダイナミックライブラリ(CFNetwork.framework, MobileCoreServices.framework, SystemConfiguration.framework, libxml2.dylib, libz.1.2.3.dylib)を追加します。

twitpic2

最後にヘッダ検索パスの設定を行ないます。メニューバーから「プロジェクト」→「アクティブなターゲットの編集」を選択、「ヘッダ検索パス」の欄に「/usr/include/libxml2」を設定します。

twitpic3

これで、Twitpicアップロード環境の設定は整いました。次回はアップローダのプログラムを記述します。

iPhoneアプリ:Twitpicアップローダをつくる その2