Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Blob URL Scheme

Blob URL Scheme

Tsukiji.front #1 での発表資料です。
デモリンク1: http://goo.gl/vWp1yN
デモリンク2: http://goo.gl/5TH7Lc

28cb8e73f08ad17ef0370b6b6a51630c?s=128

mex-ichikawa

August 28, 2014
Tweet

Transcript

  1. Blob URL Scheme 使ってみたよ 2014/08/28 mex-ichikawa / Tsukiji.front

  2. 自己紹介 • mex-ichikawa • プログラマ • Hubot飼いはじめました • 主にエオルゼアに居ます

  3. はじめに 今回は、 Blob URL Scheme というモノのハナシ

  4. まず、URLスキームとは リソースに到達するための 手段を記述したもの

  5. 具体的には? http://〜 ftp://〜 itms-apps://〜 ↑な感じでURLの頭に付いてる奴がスキーム

  6. じゃあ、Blob URL Scheme とは URL表記で Blobにアクセスする 手段

  7. …もうちょっと詳しく • スキームは blob: • Blobに対して一時的にURLを発行する • URLを発行したBlobはメモリに常駐する • URLは完全ランダム

    • ブラウザ対応はwindow.URLをチェック (対応ブラウザ:http://goo.gl/09LIIL)
  8. Blob URL Scheme の作成 window.URL.createObjectURL({blob,file})

  9. 実際に作ってみる DEMO URL発行デモ

  10. で、何に使うの? わからん。 …けど、動的に生成したリソースに 静的リソースと同じ手段でアクセスできる

  11. 利用ケースを模索(1) DEMO アップロード画像のプレビュー

  12. 利用ケースを模索(2) DEMO Workerスクリプトの動的生成

  13. Blob URL Schemeの使いドコロ • 動的に生成したリソースやローカルファイルを簡 単に扱えるようにできる • サーバに依存しないWebツールとか • Data

    URL Schemeより効率いい場面があるの で使い分けて • 派手さはないけど、地味に便利なのでたまに思 い出して下さい。。。
  14. 終わり! ありがとうございました