digital matter » JavaScript

html5uploaderで複数アップロード時のバグ修正

hotpi — Sat, 05 Mar 2011 08:05:20 +0000

Gmailのようなドラッグアンドドロップでファイルをアップロードする機能が使いたかったので探していたところ、見つけたのがhtml5uploaderです。JSと、サーバーサイドのPHPが付いてます。

デモ
http://www.weeby.pl/blog/html5uploader/uploader.html

比較的簡単な構造で最低限のアップロード機能を実装しているので、elFinderと組み合わせて使うことにしました。

で、表題のバグですが、複数のファイルを同時にアップロードすることはできるのですが、時々サーバからNo file to uploadというメッセージが返ってくることがあります。リクエストを見ると、送るはずのContent-Lengthが0バイトで、データを送信していないようです。

原因はonloadendイベントの関数でreaderオブジェクトを直接呼び出して使ってるからですね。というわけで修正。

// Once the process of reading file
this.loadEnd = function() {
	bin = reader.result;

を

// Once the process of reading file
this.loadEnd = function() {
	bin = event.target.result;

に修正して完了です。

Pluploadの方が高性能かつソースもきれいでよく出来てるのですが、GPLなんですよね。コマーシャルライセンスは10ユーロなんで良心的で安いんですが。今回はファイルマネージャーに統合しちゃいたかったので、小型のhtml5uploaderにしてみました。

elFinderがDnDのアップロードに対応しないかなぁ。

リバースProxy環境でのmixiアプリのOAuth

hotpi — Sun, 01 Nov 2009 15:32:11 +0000

CakePHPでmixiアプリのOAuthを処理させる方法は以下のサイト参照。ホントにシンプルでわかりやすい解説。

[cakephp] mixiアプリのOAuthのリクエストを受け取る – 「のーぶるじゃすぱー」略して「のぶじゃす」のBLOG

通常の環境ではこのまま実装すればOK。

で、このあとロードバランサーの入ったサーバに持ってきたらOAuthが正しく認証されない。

OAuthRequestのhttp_urlを見てみると、

http://192.168.0.2:8001:80//api/hoge/hoge/…

という悲しいことになっていて、これがどうも問題のようだと。というか、ホスト：ポート：ポートってどういうことだ…

本来ならもちろん、

http://mixiapp.sample.com:80/api/hoge/hoge/…

みたいなアドレスになっていないといけない。

ちなみに送信側はmixiアプリのサンプルそのまんまな感じのJavaScript

var params = {};
params[gadgets.io.RequestParameters.REFRESH_INTERVAL] = 0;
params[gadgets.io.RequestParameters.AUTHORIZATION] = gadgets.io.AuthorizationType.SIGNED;
params[gadgets.io.RequestParameters.CONTENT_TYPE] = gadgets.io.ContentType.TEXT;
var url = "http://mixiapp.sample.com/api/hoge/hoge/";
gadgets.io.makeRequest(url, func, params);

解決策は

function validateOAuth () {

    $get = $_GET;
    unset($get['url']);
    $http_url = 'http://mixiapp.sample.com:80/' . ltrim($_SERVER['REQUEST_URI'],'/');
    $request = OAuthRequest::from_request(null, $http_url, array_merge($get, $_POST));
    if ($_GET['oauth_consumer_key'] == 'mixi.jp') {
        @$signature_valid = $this->MixiAppliOauth->check_signature($request, null, null, $get["oauth_signature"]);
    }

    if ($signature_valid == true || Configure::read('debug')) {

        $this->oauth_valid = true;
        $this->viewer_id   = $get['opensocial_viewer_id'];
        $this->owner_id    = $get['opensocial_owner_id'];

        return $get;

    }

    return false;

}

というように、from_requestの第二引数にURLを指定してやればOK。なぜかスラッシュが２つ付いていたので削って付けなおしてます。

iPhoneのSafariでtouchendイベントを使うときの注意

hotpi — Fri, 23 Oct 2009 04:45:22 +0000

iPhone用のドラッグアンドドロップで操作できるWebアプリを作っていて、うっかりはまったtouchendの挙動についてのメモ。

最初に書いたコードはこんな感じでした。

function touchhandler(e) {
    var x = e.touches[0].pageX;
    switch (e.type) {
        case 'touchstart':
            break;
        case 'touchmove':
            break;
        case 'touchend':
            break;
    }
}

document.getElementById('sample').addEventListener("touchend", touchhandler, false);

このプログラムではtouchendの処理が実行されません。

というのもまぁ、気づけば簡単なことなんですが、最後の指をスクリーンから離してtouchendのイベントが発生するときは、もうスクリーンに触ってないのでe.touches[0]がundefinedになるんですね…

なので、touchendのときは、引数で受け取ったe.touchesは注意しましょうという話。

今回参考にさせていただいたのは以下のサイト。

flashcast：フリーで働くITエンジニア集団のブログ: ipod touch用のWeb Applicationを作成してみる（canvasでお絵かき編）

SitePen

Web開発参考サイト – iPhone 3G DevWiki

Pythonのwin32comからSilverlightを使おうと試みる

hotpi — Wed, 21 Oct 2009 06:56:25 +0000

最終的にはPythonで書かれたWindowsアプリケーションで、Silverlightのコンテンツをロードしたいという目的なのですが、とりあえずSilverlightのActiveXコントロールを読み込んで動作を確認してみたいので色々実験。

まず、インストールされているSilverlightのバージョンを調べてみる。

Javascriptで書かれたコードがいくつか見つかったのでそれを書き直す。

以下はJS版。

var control = new ActiveXObject('AgControl.AgControl');
alert(control.IsVersionSupported('3.0'));

これをPythonで書いてみる。

import win32com.client
control = win32com.client.Dispatch("AgControl.AgControl")
print control.IsVersionSupported('3.0')

Silverlight 3がインストールされていればTrueが表示されます。

他にどんなメソッドが定義されているのかを調べるために、Visual StudioからAgControlを参照して、オブジェクトブラウザで調査。

というか、Silverlightのプラグインのリファレンスがあった。

Silverlight プラグインのオブジェクトリファレンス

が…Sourceを指定してもIsLoadedプロパティがTrueにならない…うーん…もう少し調べてみる。