1Day works shop

942 views

Published on

1Dayワークショップで使用したスライド。

Published in: Technology
0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total views
942
On SlideShare
0
From Embeds
0
Number of Embeds
7
Actions
Shares
0
Downloads
4
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • 1Day works shop

    1. 1. プロが教えるHTML5 1Dayワークショップ
    2. 2. HTML5を使った実用型アプリ作成入門
    3. 3. • Web Storageを使って日記アプリを作る• File APIを使ってファイル情報を取得する• Drag & Drop APIで手軽にファイルアップロード• 日記アプリに画像アップ機能をつける
    4. 4. • Web Storageを使って日記アプリを作る• File APIを使ってファイル情報を取得する• Drag & Drop APIで手軽にファイルアップロード• 日記アプリに画像アップ機能をつける
    5. 5. Web Storage
    6. 6. Web Storage• ブラウザ上に持てるKey/Value型の簡易ストレージ• 容量は平均して数MB程度• cookieよりも大容量のデータを扱える• ほぼ永続的にPC上にデータを保存できる
    7. 7. 使い方
    8. 8. window.localStorage.setItem(name, value);window.localStorage.getItem(name);
    9. 9. window.localStorage.name = value; と書いてもOK。
    10. 10. よく見ると
    11. 11. var obj = {};obj.name = value;
    12. 12. ざっくりと言えば、localStorageもただのオブジェクト。
    13. 13. ページをリロードしたり、ブラウザを閉じても残り続けるオブジェクトと見ることもできる。
    14. 14. • Web Storageを使って日記アプリを作る• File APIを使ってファイル情報を取得する• Drag & Drop APIで手軽にファイルアップロード• 日記アプリに画像アップ機能をつける
    15. 15. File API
    16. 16. File API• ローカル(PC上)にあるファイルにアクセスするため のAPI• 選択されたファイルの呼び出し、その状況を監視で きる(ローディング)• FileReader, FileWriterのふたつがある。(今回やるの はFileReader)
    17. 17. 使い方
    18. 18. var reader = new FileReader();reader.readAsDataURL(file);reader.readAsArrayBuffer(file);reader.readAsBinaryString(file);reader.readAsText(file);
    19. 19. reader.onload = function (evt) { img.src = evt.target.result;};
    20. 20. • Web Storageを使って日記アプリを作る• File APIを使ってファイル情報を取得する• Drag & Drop APIで手軽にファイルアップロード• 日記アプリに画像アップ機能をつける
    21. 21. Drag & Drop API
    22. 22. Drag & Drop API• Webサイト上で、Drag & Dropを実現するAPI• Webサイト上のみではなく、ローカル(PC上)のファ イルのドロップも可能
    23. 23. 使い方
    24. 24. DOM.addEventListener(‘dragstart’, function () {}, false);DOM.addEventListener(‘dragenter’, function () {}, false);DOM.addEventListener(‘dragleave’, function () {}, false);DOM.addEventListener(‘dragover’, function () {}, false);DOM.addEventListener(‘drop’, function () {}, false);
    25. 25. • Web Storageを使って日記アプリを作る• File APIを使ってファイル情報を取得する• Drag & Drop APIで手軽にファイルアップロード• 日記アプリに画像アップ機能をつける
    26. 26. 日記アプリに画像アップ機能をつける
    27. 27. • FileReader• Drag & Drop• localStorage
    28. 28. DOM.addEventListener(  ‘drop’, function () {}, false);
    29. 29. var reader = new FileReader();reader.readAsDataURL(file);
    30. 30. window.localStorage.setItem(name, value);
    31. 31. 今までの組み合わせ
    32. 32. では実際に作ってみ ましょう
    33. 33. • Web Storageを使って日記アプリを作る• File APIを使ってファイル情報を取得する• Drag & Drop APIで手軽にファイルアップロード• 日記アプリに画像アップ機能をつける
    34. 34. • Web Storageを使って日記アプリを作る• File APIを使ってファイル情報を取得する• Drag & Drop APIで手軽にファイルアップロード• 日記アプリに画像アップ機能をつける +• CSS3とjQueryを使ってアプリを装飾してみよう
    35. 35. CSS3とjQueryを使ってアプリを装飾してみよう
    36. 36. • FileReader• Drag & Drop• localStorage
    37. 37. • FileReader• Drag & Drop• localStorage + jQuery + CSS3
    38. 38. CSS3とは
    39. 39. • CSS level3 (Version3ではない)• CSS2.1の次の仕様• CSS3の次はCSS4。すでにいくつか存在
    40. 40. • 細かなセレクタの追加• 多様な装飾的プロパティの追加• アニメーションなどの演出
    41. 41. .hoge:nth-child(2n) {...};.hoge:not(#main) {...};
    42. 42. .hoge { box-shadow: 0 0 5px black; border-radius: 4px;}
    43. 43. Webアプリととても 親和性が高い。
    44. 44. jQueryってなに?
    45. 45. CSSをいじったりHTMLをいじったりするのを 楽にしてくれるもの
    46. 46. 無くてもできるけど、あると楽
    47. 47. 無くてもできるけど、あると楽ある意味、デファクトスタンダード
    48. 48. jQueryを読み込む
    49. 49. ググる
    50. 50. 2番目くらい
    51. 51. jQueryのとこをクリック
    52. 52. パスをコピー
    53. 53. コピペ<!doctype html><html><head><meta charset="utf-8" /><title></title></head><body><script src="ここにコピペ"></script><script src="index.js"></script></body></html>
    54. 54. jQueryといえば… $
    55. 55. $(    ) CSSセレクタ
    56. 56. CSSセレクタbody { background-color: red;}
    57. 57. jQueryでCSSを変更する
    58. 58. $(body).css({ “background-color”: “red"});
    59. 59. $(“#hoge”).css({ “left”: 100});
    60. 60. イベントを追加する
    61. 61. $(document).click(function () {...});$(document).bind(‘click’, function (){...}); どちらも同じ

    ×