firefox osを盛り上げてみなイカ？ (130ﾚｽ)
上下前次1-新
抽出解除 必死ﾁｪｯｶｰ(本家) (べ) 自ID ﾚｽ栞 あぼーん
ﾘﾛｰﾄﾞ規制です｡10分ほどで解除するので､他のﾌﾞﾗｳｻﾞへ避難してください｡
45: 2014/09/15(月)00:00 ID:3BeNRCFz(1/9) AAS
ご存知の通り、Firefox 19以降にはPDFビューアが付属しています。
FxOS 1.3はFx28のGeckoを使っているのでPDFを見れるのでは?と
思って試してみました。
Fxに付属のPDFビューアは「pdf.js」というWebアプリで、
下記からデモを試せます。
外部ﾘﾝｸ:mozilla.github.io
FxOS 1.3のシミュレータでBrowserを立ち上げ、
上記のデモを試してみたところ、見事、PDFの表示ができました。
ところが、他のサイトのPDFを表示しようとするとFxで見慣れた、
ファイルの処理方法を選択するダイアログが表示されます。
しかも、シミュレータのウインドウの外側で。
1.4のシミュレータではダイアログこそ出てこないものの、
PDFがBrowser内で表示されず、ダウンロードされてしまいます。
まだ上手く動かないのかなぁと思っていたところに、
WebActivityの紹介記事を目にしました。
外部ﾘﾝｸ:dev.mozilla.jp
46: 2014/09/15(月)00:17 ID:3BeNRCFz(2/9) AAS
紹介記事を見る限り、WebActivityというのはWindowsの関連付けとか、
DDEに似た何かっぽい感じです。
紹介記事ではWebActivityの仕組みを使ってCameraアプリを呼び出し、
カメラで撮影された画像を取得する例が示されています。
キーになるのはMozActivityというインタフェース。
こいつのコンストラクタに下記のようなオブジェクトを渡してやると
対応するハンドラが起動するようです。
{
name: 'pick',
data: {
type: ['image/png', 'image/jpg', 'image/jpeg']
}
}
ここで、nameが「何をしたいか」を意味している模様。
Windowの関連付けだとopenとかeditとかのアレ。
そしてdata.typeはあからさまにMIMEタイプ。
つまり、とあるタイプのデータに、とある操作をしたいよと
FxOSにお願いすると、しかるべきアプリを呼んで頂ける、と。
ということは、WebActivityを使ってpdf.jsを呼べばいいんじゃね
と思いついちゃったわけです。
思いついたら止まらない。
47: 2014/09/15(月)00:29 ID:3BeNRCFz(3/9) AAS
FxOS先生にお願いする前に、まずはGoogle先生に聞いてみます。
キーワードは「WebActivity」。
公式のAPIリファレンス的なページが引っかかりました。
外部ﾘﾝｸ:developer.mozilla.org
うぁ、英語だ・・・
とりあえず、ページ内を「PDF」で検索。
あった。
どうやら nameにview、data.typeにapplication/pdfを
指定してやればよさげ。まんまですな。
でも、表示するPDFを指定する方法が書いてない。
紹介記事では、「URLを開く」の場合、data.urlに対象のURLを
文字列で指定してる。たぶん、これでBrowerが呼ばれるんだろう。
Videoもurlを指定するっぽいし、とりあえずurlで試してみよう。
ということで、Fx33(beta)のWebIDEを起動し、
新規作成ウィザードでアプリのスケルトンを作る。楽だ。
48: 2014/09/15(月)00:51 ID:3BeNRCFz(4/9) AAS
WebIDEが生成するスケルトンはprivilegedなアプリになります。
特権アプリって奴です。
本来はマーケットの登録審査をパスし、
マーケットからインスコすると特権がもらえるらしいですが、
今回はシミュレータを使うので、その辺はスルーっぽいです。
(正確には、マーケットの審査＋ユーザの許可で特権付与)
FxOSでアプリを起動したときに読み込まれるHTMLは
manifest.webappのlaunch_pathに書いてあります。
デフォルトでは /index.html です。まんまです。
WebIDEでプロジェクトを開くと、ファイルの一式が
ツリー表示されますが、そのルートにあります。
特権アプリはHTMLの中にスクリプトを書いちゃダメらしく、
スケルトンではエントリポイントになるjsが用意されています。
/js/app.js
大外にはjs使いにはおなじみのおまじないが付いてます。
start()がエントリポイントになってるっぽいので、
ここに追記していくことにしました。
49: 2014/09/15(月)01:02 ID:3BeNRCFz(5/9) AAS
いきなり冷水に飛び込むと心臓麻痺を起こすので、
まずは温め(と思われる)Browserからいってみました。
紹介記事のまんまです。
というか、紹介記事より簡単だった。
紹介記事ではカメラを起動した後、撮影した画像を取得するために
イベントハンドラを使っています。XHR風味です。
一方、Browserの場合、起動しておしまいなのでハンドラの登録とか、
多分不要です。一応、つけときましたが。
ぶっちゃけ、MozActivityをnewするだけ。
さて、いよいよ、本題です。
といっても、違いはdata.typeをapplication/pdfにして、
data.urlをPDFのURLに変えるだけ。
どきどきしつつ、アプリを起動・・・、おお、表示された。
ていうか、字がちっちぇｗｗｗ (拡大できます)
なんだ簡単じゃん。＜びびってたくせに
50: 2014/09/15(月)01:15 ID:3BeNRCFz(6/9) AAS
とりあえず、当初の目的は達成されたわけですが、
人間の欲望には限りがありません。
これでウェブのPDFは見れるけど、SDカードとかに保存したPDFも
見れたらいいよねとふと思ってしまいました。
ちら見した感じでは、SDカードに保存したファイルは
DeviceStorage APIという奴でFileの形で取れるっぽいです。
FileというのはHTMLのinput要素で指定されるあれです。
Fileの中身を読むのに使うのがFileReaderです。まんまです。
FileReaderにはreadAsDataURL()なるメソッドがあります。
data URLはデータをまるっとbase64してURI形式にした文字列。
曲がりなりにもURLなら、こいつを渡して表示させられるかも。
思いついたら止まりません。
51: 2014/09/15(月)01:50 ID:3BeNRCFz(7/9) AAS
とはいえ、DeviceStorage APIの勉強をするのもメンドイので、
馴染み深いXHRで代用してしまいます。
XHRことXMLHttpRequestはAjaxの中核コンポーネントっていうか、
そのものなもので、XMLとかJSONとかHTTPで取得するのに使います。
歴史的経緯で頭にXMLがついていますが、HTTPなら何でも取れます。
単純にHTTPのクライアントです。XMLとか無視しておｋです。
XHRは便利なんですが、jsのダウンロード元と同じドメインとしか
通信できません。サーバが応答を返してもGeckoがブロックしやがります。
サーバー側でCORSに対応してくれれば良いんですが、そんなん無理。
2ちゃんのdatが採りたかったら、ひろゆきに頼むのかよって感じです。
使えねーす。これが Same Origin Policy という奴です。
ちなみにこれ、クライアント側のセキュリティとはほぼ無関係と思われ。
攻撃側のサーバを開いておけば通信できちゃうので。
たぶん、サービス提供者側の勝手に使うなという主張に沿った感じの
何かではないかと思われます。ああ、不自由。
ここまでが普通のWebアプリの話。
FxOSではアプリにsystemXHRという特権を与えてやれば
ドメインの壁を抜けられます。
アプリ側ではXHRのコンストラクタに{ mozSystem : true }を渡します。
これでどこでもアクセスし放題。2ちゃんのdatも取れます。
ユーザーの立場の時は、アプリにsystemXHRを要求されたら、
それ本当に必要？とちょっと考えた方が無難です。多分。
52: 2014/09/15(月)02:00 ID:3BeNRCFz(8/9) AAS
XHRは超有名なので使い方は端折りますが、
今回は、send()の前に responseType = 'blob' とやって、
onsuccess で受け取る response をBlobにします。
BlobはFileの汎化で、FileReaderはBlobもFileと同じように読めます。
処理の流れは、XHR→FileReader→MozActivityです。
やってみたら上手くいきました。さくっと。
これら3つが3つともXHR風味なのが素敵なところですが、
それ即ちコールバック使いまくりということなので、
jsに慣れてない人が見るとうんざりかもしれません。
ここまできてなんですが、この方法ではウェブのPDFしかみれません。
XHRの部分をDeviceStorage APIに置き換える必要があります。
あと一歩ですが、眠いのでここまでにします。ごめんね。
53: 2014/09/15(月)02:06 ID:3BeNRCFz(9/9) AAS
サンプルアプリを上げておきます。
Browserを呼ぶ
外部ﾘﾝｸ:fast-uploader.com
pdf.jsを呼ぶ
外部ﾘﾝｸ:fast-uploader.com
data URLでpdf.jsを呼ぶ
外部ﾘﾝｸ:fast-uploader.com
上下前次1-新書関写板覧索設栞歴
ｽﾚ情報 赤ﾚｽ抽出 画像ﾚｽ抽出 歴の未読ｽﾚ
ぬこの手 ぬこTOP 0.010s