操作方法

この資料の主な部分の初出：技術評論社刊『WEB+DB PRESS Vol.56, 57, 58』（http://wdpress.gihyo.jp）

FiciaとUIにまつわるエトセトラ (Takana.PM)

Yappo: yappo あっと shibuya.pl
Shibuya Perl Mongers

自己紹介

住吉から飛行機で
来ました

今日のテーマは
YAPCらしいので

このスライドは
YAPCのJSTAPdの発表の
お蔵入りになった
オマケです

最近は

現在Web+DB PRESSにて
WebUIの連載をやっています

そのほか会社で
Ficiaというフォトストレージ
サービスをやっています

今回のテーマ

LDRやPhotoshop Express等のように、デスクトップアプリケーションをWeb上で提供するサービスが増えていますが、それらのアプリケーションはどう作ったら良いかという話をします。

今回のテーマ

具体的にはFiciaをどんな感じで作っているのかと言うのを話します。

目次

目指す方向

解決すべき問題を見つける

回線やサーバ処理速度につい
ては基本すぎなので触れない

Ficiaでは...

専用クライアントを
PCにインストールして
意識せずデータを
Webにあげられる

Webサービスだからといって全部ブラウザの中だけで完結せずに、必要ならば専用クライアントを作るくらいの柔軟さも重要

これが達成できれば何でもいい

ここまでは、全てのデータを
Webに上げる良い方法の話

ここからは、上がったデータ
をキビキビ見るという話

ふつうのWeb

はたして毎回HTMLを作って
送る必要があるのか？

例えば写真サイト

例えばこうする

サーバ側にModelとController
を置いて、ブラウザ側で
Viewを実装するイメージ

予め次の写真を先読みする
事で、さらに早く表示できる

Pros :)

Cons ;(

目次

サムネイル一覧

一般的な写真サイトでは、上がっている写真を一覧で見る機能がついています。
Ficiaの物を見てみましょう。

画面遷移の無い一覧表示

Ficiaでも、Ajaxを駆使して画面遷移無く写真の閲覧が出来るようになっていますが、1万件も写真があると普通に実装してしまうと困った事になる

ハマりどころ

どうするべきか

必要な所だけを表示すべき

Ficiaでは...

もうひと工夫

Ajaxリクエストにページングを

さらに。。。

Pros :)

Cons ;(

キャッシュを忘れずに

目次

ここまでのまとめ

ここまでの流れで基本的に画面遷移が発生しないようなアプリケーションの話ですね

画面遷移ないと

画面遷移ないと

画面遷移ないと

なぜ通知するのか

実現手段

定期的にserverを叩く

定期的にserverを叩く Pros/Cons

long pollする

long pollする Pros/Cons

イベントが来たら

目次

本編として
Perlの小ネタを

Ficiaで使ってる主なCPAN

BTW

例えば一般的なストレージサービスでは
Client - ApplicationServer - StorageServer
といった構造で、ユーザのデータはストレージ用のサーバに保存する

写真とか動画を取り扱う時にSlurp的に一気にロードすると、データの量だけアプリケーションのメモリ消費量が増える

しかも何も考えないでコード書くと、もっと消費メモリ食う

open my $fh, '<', $filename;
my $data = do { local $/; <$fh> };
$foo->bar($data);
...
package Foo;
sub bar {
  my($self, $data) = @; # ここでメモリコピー
  $self->baz($data);
}
sub baz {
  my($self, $data) = @; # ここでメモリコピー
}

デカイデータを扱う時は、チビチビI/Oの読み書きをすると良い

client から App
HTTP::Engine::Request だと
$req->builder_options->{disable_raw_body} = 1
とかとかして、 request body の全読み込みを抑止する

Plack でのやり方はどうするんだっけか

App から Storage
例えば HTTP::Request::StreamingUpload を使う
open my $fh, '<', '/your/upload/requestbody' or die $!;
my $req = HTTP::Request::StreamingUpload->new(
  PUT     => 'http://example.com/foo.cgi',
  fh      => $fh,
  headers => HTTP::Headers->new(
    'Content-Length' => -s $fh,
  ),
);
my $res = LWP::UserAgent->new->request($req);

Furl でどうやるか知らない

Storage から App
LWP::UserAgent だけで出来るよ

my $ua = LWP::UserAgent->new;
$ua->get($url, ':content_file' => $save_filename);

Furl でどうやるか知らない

App から Client
Plack::Response の body に
io handle 渡せばできるよ

open my $fh, '<', $save_filename;
$res->body( $fh );
return $res;

一般的には、このように簡単に省メモリに実装できる

レスポンスはすぐ返す

FiciaだとFacebookとかへのアップロード処理もqueueでやってて、失敗したら右上で失敗を通知してる

まとめ 1/2

まとめ 2/2

最後に宣伝

JPerl Advent Calendar
2010　やります

参加者募集中

関連情報は
#jpac2010@twitter
に流しときました

有り難うございました！