• Share
  • Email
  • Embed
  • Like
  • Save
  • Private Content
1Day works shop
 

1Day works shop

on

  • 724 views

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

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

Statistics

Views

Total Views
724
Views on SlideShare
719
Embed Views
5

Actions

Likes
0
Downloads
1
Comments
0

1 Embed 5

http://localhost 5

Accessibility

Categories

Upload Details

Uploaded via as Apple Keynote

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment
  • \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 1Day works shop Presentation Transcript

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