オフラインで動くアルバムつくってみた
勉強がてらFile APIとindexedDBとapplication-cache使ってオフラインで動くウェブアルバムつくってみました。
【主なAPI及び環境】
・File API
・indexedDB
・application-cache
・WebWorker
・Websocket(socket.io)
・node.js
・express
・ejs
・MongoDB
・bootstrap
【仕様】
①ファイルがアップされると、indexDB及びMongoDBに登録して、他のユーザにプッシュ。
②ファイルの削除はオンラインユーザの間で同期。
③indexDB及びMongoDBに格納されているファイルをすべて表示。
④オフライン時はindexDBのみを使用。
【実現したかったけどできていないこと】
・SharedWorkerを使用して、websocketの通信を一本化。
・ユーザ認証して共有範囲の制限とか。
->気力が尽きてしまった。。。
・ejsで使っているテンプレートファイルをapplication-cacheで指定できてない。
->オフライン用に内容が同じhtmlファイルを別に用意してるのでかなり微妙。
・indexedDBのファイルとMongoDBのファイルを完全同期。
->オフライン中に削除されたファイルの扱いとか考えるのが面倒になり断念。
・Drug & Drop APIを実装。
->使ったことあるので除外。
【感想】
・作成途中でChromeのindexDBの仕様が変わり一度動かなくなって心が折れかけた。そのせいでソースもちょっとカオスに。。。
・でかい画像をbase64の文字列にするとかなり重い。JSONの変換がやばいのでこの方式で通信するなら自前でJSONへの変換処理組むのが現実的。
・worker内でindexedDB使える(非同期だけど)のがChromeだけなのでChromeでしか動かない。しかもそのうち同期API提供されたら今回のコードも動かなくなるOrz
【結論】
indexedDBはworker内で使える同期APIが提供されるようになってから使った方がよさそう。
jQuery1.8 BETA 1を翻訳してみた
jQueryの1.8 Beta1がきていたので軽く翻訳してみました。
間違いあったら教えてください。
http://blog.jquery.com/2012/06/22/jquery-1-8-beta-1-see-whats-coming-and-going/
1.モジュール化
jQuery 1.8 では、必要のないモジュールを排除することができます。これはBen Alman氏の素晴らしいgrunt toolに基づいた新しいbuild systemで簡単に実現されています。カスタムバージョンをbuildするには、GithubからjQueryのcore repositoryをコピーしし、gruntオプションを使うことでモジュールを削除できます。(注：githubにサンプルが載ってるので見ればすぐわかります)
現在排除可能なモジュールは、ajax/css/dimensions/effects/offsetです。例えば、あなたのアプリケーションがページの項目のvisibilityやsizeを制御するために、classを用いてstylesheetやCSS Animationを使っているなら、css/dimensions/effects/offsetモジュールなしでbuildすることができます。取り外し可能なモジュールが全て必要ない場合は、そのcustom buildされたjQueryは21KB小さくなり、gzip化されます。
ただ、自分でcustom buildできるのは完全にオプションなので心配する必要はありません。jQueryは常に、そしてこれからも圧縮されたものと非圧縮のものの両方が一つのファイルとして提供され、CDNs上で利用できます。私たちはそれが多くのjQuery developerが進む道だと期待しています。それが一番単純で、害がないので。たとえば自分で作っていないjQueryプラグインを使うとき、完全な(モジュールを何も排除していない)jQueryを使うことは、プラグインに潜んでいるいくつかの依存関係で失敗しないようにします。
2.CSSのvender-prefix
W3Cは、まだ標準化されていないCSSの機能のためにvender-prefixを使うアイディアを思いついたとき、正しい考えを持っていたが、それはおとぎ話のような結果にはならなかった（注：くそ面倒になった）。Web debeloperはstylesheetに全てのvender-prefixを含めるという暗黒な作業に見舞われた。jQuery1.8はこれを楽にします。私たちは自動的にprefixのついていないプロパティを、現在のプラウザに合わせて適切なprefixに変換します。あなたがそれをする必要がないように。例えば、chromeで$(‘#myscroll’).css(‘marquee-direction’, ‘backwards’) とjQueryをcallすると、cssには webkit-marquee-direction: backwards と設定されます。
3.アニメーションについて
私たちのanimationのcodeは過去数年間で化け物になっていたが、jQuery1.8でその化け物を制御下におけると思っています。それはただきれいになっただけではなく、いくつかの拡張ポイントがある。animationを加えたり変更したりするための。もう少しで、この新しい機能のための予備のdocumentができるけど、この最初のbeta版での私たちの主な焦点は、全てのanimationのcodeを適切に動かすようにすることです。
今日では、ブラウザはずっと良い効果的なanimationを提供している、特にCSS transitionを使って。でも、まだCSSを使ったanimationを処理することができないブラウザ（IE絶滅しろ！）たくさんのユーザがいます。jQuery1.8では、あなたはIEのいる世界といない世界の両方で最善の方法をとることができます。もし、あなたがIE(CSS transitionが使えないくそブラウザ)をサポートする必要があるなら、 $.Animation は強固な基盤を提供し、以前のversionの多くのバグを修正することができます。もしあなたが最新のブラウザや、nativeにanimationがサポートされたブラウザだけをターゲットにするなら、それを行いanimation moduleを完全に排除することができます。
jQueryのセレクタエンジンは1.8で大きく変更されています。この変更の最も注目すべき利点は、多くの一般的なセレクタの広範な性能向上だけでなく、改善されたショートカットもあげられます。
加えて、この変更はより多くの例外ケースとバグを処理します。それは複合のコンビネータ（~ > +）の改善されたサポートと、querySelectorAllにおけるブラウザのバグを良く検出できることを含んでいます。完全なリストについては、セレクタモジュール内の下のバグのリストを参照してください。
5.クロスサイトスクリプティング対策
設計では、 $() メソッドはHTML elementをつくることができ、scriptタグが文字列に含まれていたりsrc属性が含まれているとscriptが動きます。開発者は時々これを忘れ、URLやユーザが入力したような信頼できないソースの文字列をjQueryに流すことがあります。このような場合には、誰かがページにscriptを挟みこんで、cookieを盗んだり、何らかの方法でページを危うくすることができる。
これらのXSS攻撃はjQueryを使っているかどうかに関わらず、多くのサイトで共通の問題ですが、私たちはjQueryをこの問題に貢献しないようにさせたい。jQuery1.9(1.8の次のバージョン)では、私たちは $() メソッドでHTMLとみなすルールを厳しくします。stringは最初の文字が”<”である場合のみHTMLとして考えられ、そうでなければCSSセレクタとして扱われます。
scriptの不注意なインジェクションに対する保護機能を強化するために、jQuery1.8では新しいメソッド $.parseHTML を紹介しています。これはあなたに文字列をHTMLとして指定させ、その文字列がHTMLとしてparseされることを認識させます。$()メソッドでは文字列をセレクタとして解析するので、 それはできません。これもまたHTMLからDOM fragmentにparseし、任意のscriptの実行処理が含まれている可能性のあるHTMLを制御する方法を提供します。これはCSPによって制御されたJavascript環境では特に重要です。挟まれたscriptはセキュリティ警告や、例外を発生される可能性があるので。
単一のelementをつくったり、文字列が外部のデータでつくられているような場合には、私たちは $.parseHTML を使うことを強く勧めます。jQuery1.9では、これらのより厳しいルールの結果として、いくつかのHTML文字列は$()メソッドではもはやHTMLとして認識されません。
6.大掃除
jQuery1.8では、非効率で望ましくないAPIと機能、つまり非推奨なものと危険なものが取り除かれます。将来のアップグレードパスを提供するために、私たちはそれらが取り除かれた後に、互換のプラグインで多くの非推奨機能を提供します。あなたはGithubのrepositoryで互換プラグインをフォローすることができます。
・$.browser -> userAgentの判定は問題あるのでjQuery1.9から互換プラグインに。
・$.sub ->core機能にいる必要ないのでjQuery1.9から互換プラグインに。
・Global ajax event ->今jQueryのajaxイベントでもglobalなajaxStartイベントが発火しちゃってるんだけど、どこにもそんなこと載ってないんだよね！だから1.8までは非推奨にするわ！1.9からはドキュメントに載るはず！
