Your SlideShare is downloading. ×
  • Like
1Day works shop
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×

Now you can save presentations on your phone or tablet

Available for both IPhone and Android

Text the download link to your phone

Standard text messaging rates apply

1Day works shop

  • 713 views
Published

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

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

Published in Technology
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Be the first to comment
    Be the first to like this
No Downloads

Views

Total Views
713
On SlideShare
0
From Embeds
0
Number of Embeds
0

Actions

Shares
Downloads
1
Comments
0
Likes
0

Embeds 0

No embeds

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
    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

Transcript

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