早稲田大学授業 - モバイルプログラミング
DESCRIPTION
TRANSCRIPT
![Page 1: 早稲田大学授業 - モバイルプログラミング](https://reader033.vdocuments.net/reader033/viewer/2022050722/54bd87424a7959913b8b45d8/html5/thumbnails/1.jpg)
モバイルプログラミング講師 有田一平
Monday, September 16, 13
![Page 2: 早稲田大学授業 - モバイルプログラミング](https://reader033.vdocuments.net/reader033/viewer/2022050722/54bd87424a7959913b8b45d8/html5/thumbnails/2.jpg)
スケジュール第1回: イントロダクション(授業の概要)第2回: 開発ツール第3回: 開発ツール(演習)第4回: Mobile Web Applicationの基礎 1第5回: Mobile Web Applicationの基礎 2
第6回: Mobile Web Applicationの基礎 (演習)第7回: JavaScriptでイベントハンドル第8回: HTML5の応用(キャッシュなど)第9回: Mobile Web Application Frameworks
第10回: Twitter Bootstrap 1第11回: Twitter Bootstrap 2
第12回: Twitter Bootstrap(演習)第13回: ミニプロジェクト第14回: ミニプロジェクト第15回: ミニプロジェクト発表
Monday, September 16, 13
![Page 3: 早稲田大学授業 - モバイルプログラミング](https://reader033.vdocuments.net/reader033/viewer/2022050722/54bd87424a7959913b8b45d8/html5/thumbnails/3.jpg)
講師紹介 有田一平• 現職はArchitect@Cambridge Energy Data Lab,
Ltd
• 前職はエンジニア@グリー株式会社、JPモルガン証券株式会社
• 名古屋出身
• 趣味はアウトドアスポーツ
• 2005年早稲田大学人間科学部卒業
• github: @peisan
• twitter: @ippeeeee
Monday, September 16, 13
![Page 4: 早稲田大学授業 - モバイルプログラミング](https://reader033.vdocuments.net/reader033/viewer/2022050722/54bd87424a7959913b8b45d8/html5/thumbnails/4.jpg)
• 皆さんの事も教えて下さい :-)
• 名前
• 受講した理由
• 趣味
• 出身
などなんでも
生徒自己紹介
Monday, September 16, 13
![Page 5: 早稲田大学授業 - モバイルプログラミング](https://reader033.vdocuments.net/reader033/viewer/2022050722/54bd87424a7959913b8b45d8/html5/thumbnails/5.jpg)
• どの程度経験があるか教えてください
• Web Application作った事ある?
• Web Server(Apache)とか使った事ある?
• どんなProgram書いた事ある?
• HTML / CSS / JavaScriptは?
質問
Monday, September 16, 13
![Page 6: 早稲田大学授業 - モバイルプログラミング](https://reader033.vdocuments.net/reader033/viewer/2022050722/54bd87424a7959913b8b45d8/html5/thumbnails/6.jpg)
そもそもモバイルプログラミングって何?
• モバイルってなに?
• プログラミングってなに?
• 皆さん何を期待して受講しにきましたか?
Monday, September 16, 13
![Page 7: 早稲田大学授業 - モバイルプログラミング](https://reader033.vdocuments.net/reader033/viewer/2022050722/54bd87424a7959913b8b45d8/html5/thumbnails/7.jpg)
モバイルとはmobile【名】1. 携帯電話(機)◆【略】mob
2. モビール◆【同】mobile sculpture ; kinetic sculpture
• 【形】1. 動きやすい、移動できる、可動性の、可動式の、移動性の
2. 《軍事》機動性のある3. 〔人が〕移り気な、気の変わりやすい4. 流動的な
• レベル8、発音《名》móubiːl 《形》[US] móubl
[UK] móubail、カナモウビール、[US]モウブル、[UK]モウバイル、変化《複》mobiles、分節mo・bile
( 英辞郎より)
Monday, September 16, 13
![Page 8: 早稲田大学授業 - モバイルプログラミング](https://reader033.vdocuments.net/reader033/viewer/2022050722/54bd87424a7959913b8b45d8/html5/thumbnails/8.jpg)
モバイル端末の普及
• 3000 different devices
• 30 different browsers
• 6 billion mobile users (86% of population)
Monday, September 16, 13
![Page 9: 早稲田大学授業 - モバイルプログラミング](https://reader033.vdocuments.net/reader033/viewer/2022050722/54bd87424a7959913b8b45d8/html5/thumbnails/9.jpg)
モバイルの種類• Device
• Smart Phone• Tablet• Feature Phone• Netbook• Glass
• Makers• Apple• Google• Samsung• Nokia• Amazon• RIM• HTC
• OS• iOS• Android• Symbian• BlackBerry• Windows
Monday, September 16, 13
![Page 10: 早稲田大学授業 - モバイルプログラミング](https://reader033.vdocuments.net/reader033/viewer/2022050722/54bd87424a7959913b8b45d8/html5/thumbnails/10.jpg)
プログラミングとは
• プログラミング(英: programming)とは、プログラムを作成することにより、人間の意図した処理を行うようにコンピュータに指示を与える行為である
(Wikipediaより)
Monday, September 16, 13
![Page 11: 早稲田大学授業 - モバイルプログラミング](https://reader033.vdocuments.net/reader033/viewer/2022050722/54bd87424a7959913b8b45d8/html5/thumbnails/11.jpg)
授業の目的HTML5/CSS3/JavaScriptを利用して
Smart PhoneのWeb
Browserで動く
Mobile Web Applicationを実装する
Monday, September 16, 13
![Page 12: 早稲田大学授業 - モバイルプログラミング](https://reader033.vdocuments.net/reader033/viewer/2022050722/54bd87424a7959913b8b45d8/html5/thumbnails/12.jpg)
HTML5
• 2014年に正式にFixする予定のHTMLの新しいVersion
• マルチメディア機能やウェブアプリケーションのプラットフォーム機能を搭載した今までよりRichなHTML
• 既存のBrowserでも段階的に対応済み
Monday, September 16, 13
![Page 13: 早稲田大学授業 - モバイルプログラミング](https://reader033.vdocuments.net/reader033/viewer/2022050722/54bd87424a7959913b8b45d8/html5/thumbnails/13.jpg)
HTML5の応用技術• SVG
• Canvas
• Application Cache
• Web Storage
• Web Workers
• Web Sockets
Monday, September 16, 13
![Page 14: 早稲田大学授業 - モバイルプログラミング](https://reader033.vdocuments.net/reader033/viewer/2022050722/54bd87424a7959913b8b45d8/html5/thumbnails/14.jpg)
Native vs HTML5
HTML5 Native
開発言語 HTML5 & Javascript Java(Android) / Objective-c(iOS)
動作速度 遅い 早い
複数Platform対応 簡単 大変
アップデート 簡単 大変
Monday, September 16, 13
![Page 15: 早稲田大学授業 - モバイルプログラミング](https://reader033.vdocuments.net/reader033/viewer/2022050722/54bd87424a7959913b8b45d8/html5/thumbnails/15.jpg)
Native vs HTML5
Monday, September 16, 13
![Page 16: 早稲田大学授業 - モバイルプログラミング](https://reader033.vdocuments.net/reader033/viewer/2022050722/54bd87424a7959913b8b45d8/html5/thumbnails/16.jpg)
Native vs HTML5
Monday, September 16, 13
![Page 17: 早稲田大学授業 - モバイルプログラミング](https://reader033.vdocuments.net/reader033/viewer/2022050722/54bd87424a7959913b8b45d8/html5/thumbnails/17.jpg)
Native vs HTML5
Monday, September 16, 13
![Page 18: 早稲田大学授業 - モバイルプログラミング](https://reader033.vdocuments.net/reader033/viewer/2022050722/54bd87424a7959913b8b45d8/html5/thumbnails/18.jpg)
Smart Phoneとは
Monday, September 16, 13
![Page 19: 早稲田大学授業 - モバイルプログラミング](https://reader033.vdocuments.net/reader033/viewer/2022050722/54bd87424a7959913b8b45d8/html5/thumbnails/19.jpg)
Smart Phoneの特徴AndroidやiOSなどの高機能OSを搭載した多機能端末
• Touch• GPS• Bluetooth• Wifi• Camera• Store(e.g. AppStore)
Monday, September 16, 13
![Page 20: 早稲田大学授業 - モバイルプログラミング](https://reader033.vdocuments.net/reader033/viewer/2022050722/54bd87424a7959913b8b45d8/html5/thumbnails/20.jpg)
Web Browser
• ウェブブラウザ(インターネットブラウザ、WWWブラウザ)とは World Wide Web の利用に供するブラウザであり、ユーザエージェント (UA) である。具体的には、ウェブページを画面や印刷機に出力したり、ハイパーリンクをたどったりするなどの機能がある。単にブラウザ(ブラウザー)と呼んだ場合、多くはウェブブラウザのことを指す。
• World Wide Web 上の情報リソースを扱うアプリケーションであり、ウェブページ・画像・動画・音声等の情報リソースの識別には Uniform Resource Identifier (URI) を使用する[1]。
• ウェブブラウザは World Wide Web への接続を第一の目的としているが、プライベートネットワーク内の Web サーバやファイルシステム内のファイルが提供する情報への接続にも利用できる。主なウェブブラウザとして、Mozilla Firefox, Google Chrome, Internet Explorer, Opera, Safari 等がある[2]。
• (Wikipediaより)
Monday, September 16, 13
![Page 21: 早稲田大学授業 - モバイルプログラミング](https://reader033.vdocuments.net/reader033/viewer/2022050722/54bd87424a7959913b8b45d8/html5/thumbnails/21.jpg)
Browserの種類• Safari
• Android Browser
• Google Chrome
• Internet Explore
• Opera
• Firefox
Monday, September 16, 13
![Page 22: 早稲田大学授業 - モバイルプログラミング](https://reader033.vdocuments.net/reader033/viewer/2022050722/54bd87424a7959913b8b45d8/html5/thumbnails/22.jpg)
Browser Rendering EngineWebKit (Safari / Chrome / Adobe AIR)
• AppleとGoogleが開発
• Mobileブラウザの主流
Gecko (FireFox)
Trident (IE)• マイクロソフト様のエンジン
Blink• Googleが新規採用したWebKitからのFork
Monday, September 16, 13
![Page 23: 早稲田大学授業 - モバイルプログラミング](https://reader033.vdocuments.net/reader033/viewer/2022050722/54bd87424a7959913b8b45d8/html5/thumbnails/23.jpg)
JavaScript EngineV8
• Googleが開発
• Google ChromとAndroid Browserで利用
Nitro• Appleが開発
• Safari 4で利用
Monday, September 16, 13
![Page 24: 早稲田大学授業 - モバイルプログラミング](https://reader033.vdocuments.net/reader033/viewer/2022050722/54bd87424a7959913b8b45d8/html5/thumbnails/24.jpg)
Key Words• Smart Phone
• Android
• iOS
• Safari
• Chrome
• Web Application
• HTML5
• JavaScript
• CSS3
• Twitter Bootstrap
Monday, September 16, 13
![Page 25: 早稲田大学授業 - モバイルプログラミング](https://reader033.vdocuments.net/reader033/viewer/2022050722/54bd87424a7959913b8b45d8/html5/thumbnails/25.jpg)
スケジュール第1回: イントロダクション(授業の概要)
第2回: 開発ツール第3回: 開発ツール(演習)第4回: Mobile Web Applicationの基礎 1
第5回: Mobile Web Applicationの基礎 2
第6回: Mobile Web Applicationの基礎 (演習)
第7回: JavaScriptでイベントハンドル第8回: HTML5の応用(キャッシュなど)
第9回: Mobile Web Application Frameworks
第10回: Twitter Bootstrap 1
第11回: Twitter Bootstrap 2
第12回: Twitter Bootstrap(演習)
第13回: ミニプロジェクト
第14回: ミニプロジェクト
第15回: ミニプロジェクト発表
Monday, September 16, 13
![Page 26: 早稲田大学授業 - モバイルプログラミング](https://reader033.vdocuments.net/reader033/viewer/2022050722/54bd87424a7959913b8b45d8/html5/thumbnails/26.jpg)
開発環境Google Chrome
• Developer Toolsをガンガン使います
• https://developers.google.com/chrome-developer-tools/?hl=ja
Editor
• Vimでもemacsでもお好きなものでどうぞ
Monday, September 16, 13
![Page 27: 早稲田大学授業 - モバイルプログラミング](https://reader033.vdocuments.net/reader033/viewer/2022050722/54bd87424a7959913b8b45d8/html5/thumbnails/27.jpg)
Developer Toolsの使い方• 右下のSettingから
User AgentをSPに変更
• Device Metricsで端末の画面サイズも変更できる
Monday, September 16, 13
![Page 28: 早稲田大学授業 - モバイルプログラミング](https://reader033.vdocuments.net/reader033/viewer/2022050722/54bd87424a7959913b8b45d8/html5/thumbnails/28.jpg)
Developer Toolsの機能• HTML要素の確認と編集
• HTTP Request確認
• JavascriptのDebug
• Console機能
• などなどたくさん
Monday, September 16, 13
![Page 29: 早稲田大学授業 - モバイルプログラミング](https://reader033.vdocuments.net/reader033/viewer/2022050722/54bd87424a7959913b8b45d8/html5/thumbnails/29.jpg)
Chrome Developer Tools基礎• ドットインストール - Chrome Developer Tools
入門 (全12回)
• http://dotinstall.com/lessons/basic_chrome_dev
Monday, September 16, 13
![Page 30: 早稲田大学授業 - モバイルプログラミング](https://reader033.vdocuments.net/reader033/viewer/2022050722/54bd87424a7959913b8b45d8/html5/thumbnails/30.jpg)
iOS Simulator• iPhoneのシミュレータ• XcodeからInstall&起動できます
Monday, September 16, 13
![Page 31: 早稲田大学授業 - モバイルプログラミング](https://reader033.vdocuments.net/reader033/viewer/2022050722/54bd87424a7959913b8b45d8/html5/thumbnails/31.jpg)
Android SDK• Androidのエミュレータを含む開発キット• http://developer.android.com/sdk/index.html
Monday, September 16, 13
![Page 32: 早稲田大学授業 - モバイルプログラミング](https://reader033.vdocuments.net/reader033/viewer/2022050722/54bd87424a7959913b8b45d8/html5/thumbnails/32.jpg)
Apache• Server Start
• #sudo apachectl start
• Document Rootにディレクトリを準備
• #mkdir /Users/ippei/www/waseda_mobile_programing/
• #echo “Hello World” > /Users/ippei/www/waseda_mobile_programing/index.html
• #sudo ln -s /Users/ippei/www/waseda_mobile_programing/ /Library/WebServer/Documents/waseda_mobile_programing
• Server Stop• #sudo apachectl stop
Monday, September 16, 13
![Page 33: 早稲田大学授業 - モバイルプログラミング](https://reader033.vdocuments.net/reader033/viewer/2022050722/54bd87424a7959913b8b45d8/html5/thumbnails/33.jpg)
GitHubの設定• GitHubとは
• gitという分散バージョン管理システムのWebでのコラボレーションツール
• My Account
• https://github.com/peisan
• 授業のRepository
• https://github.com/peisan/WasedaMobileProgrammingClass
Monday, September 16, 13
![Page 34: 早稲田大学授業 - モバイルプログラミング](https://reader033.vdocuments.net/reader033/viewer/2022050722/54bd87424a7959913b8b45d8/html5/thumbnails/34.jpg)
演習:開発ツール• Local環境のApacheのサーバでHello Worldと表示するHTMLページを表示
• Chromeのインスペクタで確認
• ElementタグでHTMLのブラウズと編集
• NetworkタブでHTTPリクエストの確認
• ConsoleタブでJavaScriptの実行
Monday, September 16, 13
![Page 35: 早稲田大学授業 - モバイルプログラミング](https://reader033.vdocuments.net/reader033/viewer/2022050722/54bd87424a7959913b8b45d8/html5/thumbnails/35.jpg)
スケジュール第1回: イントロダクション(授業の概要)第2回: 開発ツール第3回: 開発ツール(演習)
第4回: Mobile Web Applicationの基礎 1第5回: Mobile Web Applicationの基礎 2第6回: Mobile Web Applicationの基礎 (演習)第7回: JavaScriptでイベントハンドル第8回: HTML5の応用(キャッシュなど)第9回: Mobile Web Application Frameworks
第10回: Twitter Bootstrap 1
第11回: Twitter Bootstrap 2
第12回: Twitter Bootstrap(演習)第13回: ミニプロジェクト第14回: ミニプロジェクト第15回: ミニプロジェクト発表
Monday, September 16, 13
![Page 36: 早稲田大学授業 - モバイルプログラミング](https://reader033.vdocuments.net/reader033/viewer/2022050722/54bd87424a7959913b8b45d8/html5/thumbnails/36.jpg)
HTTP / HTTPS• HTTPは
HTML等の送受信に使う通信プロトコル
• HTTPSは暗号化されたHTTP通信
Monday, September 16, 13
![Page 37: 早稲田大学授業 - モバイルプログラミング](https://reader033.vdocuments.net/reader033/viewer/2022050722/54bd87424a7959913b8b45d8/html5/thumbnails/37.jpg)
HTMLの基礎• 自信がない方はこれとかで復習してください
• ドットインストール - HTML入門 (全22回)
• http://dotinstall.com/lessons/basic_html
• w3schools.com - HTML Tutorial
• http://www.w3schools.com/html/default.asp
• http://www.w3schools.com/html/html5_intro.asp
Monday, September 16, 13
![Page 38: 早稲田大学授業 - モバイルプログラミング](https://reader033.vdocuments.net/reader033/viewer/2022050722/54bd87424a7959913b8b45d8/html5/thumbnails/38.jpg)
HTML - グリーの例• sns.gree.net
Monday, September 16, 13
![Page 39: 早稲田大学授業 - モバイルプログラミング](https://reader033.vdocuments.net/reader033/viewer/2022050722/54bd87424a7959913b8b45d8/html5/thumbnails/39.jpg)
HTML5 New Elements• new block elements
• header, footer, nav, article, section, line
• new inline elements
• time, progress, output, mark
• new text elements
• wbr, rubi
• new multimedia elements
• video, audio, canvasMonday, September 16, 13
![Page 40: 早稲田大学授業 - モバイルプログラミング](https://reader033.vdocuments.net/reader033/viewer/2022050722/54bd87424a7959913b8b45d8/html5/thumbnails/40.jpg)
Header
• Title
• Icon
• Viewport
• CSS
• JavaScript
Monday, September 16, 13
![Page 41: 早稲田大学授業 - モバイルプログラミング](https://reader033.vdocuments.net/reader033/viewer/2022050722/54bd87424a7959913b8b45d8/html5/thumbnails/41.jpg)
Viewport• Deviceと等倍サイズで表示
• Zoomできなくする
Monday, September 16, 13
![Page 42: 早稲田大学授業 - モバイルプログラミング](https://reader033.vdocuments.net/reader033/viewer/2022050722/54bd87424a7959913b8b45d8/html5/thumbnails/42.jpg)
Media Queries• PC / SPでCSSの使い分け
Monday, September 16, 13
![Page 43: 早稲田大学授業 - モバイルプログラミング](https://reader033.vdocuments.net/reader033/viewer/2022050722/54bd87424a7959913b8b45d8/html5/thumbnails/43.jpg)
Body Main Structure
• Header
• Main Navigation
• Content
• Footer
Monday, September 16, 13
![Page 44: 早稲田大学授業 - モバイルプログラミング](https://reader033.vdocuments.net/reader033/viewer/2022050722/54bd87424a7959913b8b45d8/html5/thumbnails/44.jpg)
Body Tips• URLのバーを隠す
Monday, September 16, 13
![Page 45: 早稲田大学授業 - モバイルプログラミング](https://reader033.vdocuments.net/reader033/viewer/2022050722/54bd87424a7959913b8b45d8/html5/thumbnails/45.jpg)
Form Elements• Select List
• Radio Button
• Checkbox
• Button
• Text(keyboard optimization for each type)
• Range Slider
• Date and Time Selectors
Monday, September 16, 13
![Page 46: 早稲田大学授業 - モバイルプログラミング](https://reader033.vdocuments.net/reader033/viewer/2022050722/54bd87424a7959913b8b45d8/html5/thumbnails/46.jpg)
Form Functions• Place Holder
• Auto Focus
• Auto Complete
• Validations
Monday, September 16, 13
![Page 47: 早稲田大学授業 - モバイルプログラミング](https://reader033.vdocuments.net/reader033/viewer/2022050722/54bd87424a7959913b8b45d8/html5/thumbnails/47.jpg)
CSSの基礎• 自信がない方はこれとかで復習してください
• ドットインストール - CSS入門 (全22回)
• http://dotinstall.com/lessons/basic_css
• w3schools.com - CSS Tutorial
• http://www.w3schools.com/css/default.asp
• http://www.w3schools.com/css3/default.asp
Monday, September 16, 13
![Page 48: 早稲田大学授業 - モバイルプログラミング](https://reader033.vdocuments.net/reader033/viewer/2022050722/54bd87424a7959913b8b45d8/html5/thumbnails/48.jpg)
CSS - グリーの例• sns.gree.net
Monday, September 16, 13
![Page 49: 早稲田大学授業 - モバイルプログラミング](https://reader033.vdocuments.net/reader033/viewer/2022050722/54bd87424a7959913b8b45d8/html5/thumbnails/49.jpg)
CSS Tips
• Reset default CSS settings
Monday, September 16, 13
![Page 50: 早稲田大学授業 - モバイルプログラミング](https://reader033.vdocuments.net/reader033/viewer/2022050722/54bd87424a7959913b8b45d8/html5/thumbnails/50.jpg)
演習: HTML / CSS基礎• HTML/CSSを利用して簡単な自己紹介ページを作ってみましょう
• 様々なHTMLの要素を使ってみる
• classや要素名の指定をしてCSSでスタイルを適用する
• PCとSPでCSSを切り替えてみる
Monday, September 16, 13
![Page 51: 早稲田大学授業 - モバイルプログラミング](https://reader033.vdocuments.net/reader033/viewer/2022050722/54bd87424a7959913b8b45d8/html5/thumbnails/51.jpg)
スケジュール第1回: イントロダクション(授業の概要)第2回: 開発ツール第3回: 開発ツール(演習)第4回: Mobile Web Applicationの基礎 1
第5回: Mobile Web Applicationの基礎 2
第6回: Mobile Web Applicationの基礎 (演習)
第7回: JavaScriptでイベントハンドル第8回: HTML5の応用(キャッシュなど)第9回: Mobile Web Application Frameworks第10回: Twitter Bootstrap 1
第11回: Twitter Bootstrap 2
第12回: Twitter Bootstrap(演習)第13回: ミニプロジェクト第14回: ミニプロジェクト第15回: ミニプロジェクト発表
Monday, September 16, 13
![Page 52: 早稲田大学授業 - モバイルプログラミング](https://reader033.vdocuments.net/reader033/viewer/2022050722/54bd87424a7959913b8b45d8/html5/thumbnails/52.jpg)
JavaScript / jQueryの基礎• 自信がない方はこれとかで復習してください
• ドットインストール - JavaScript入門 (全25回)
• http://dotinstall.com/lessons/basic_javascript
• ドットインストール -jQuery入門 (全22回)
• http://dotinstall.com/lessons/basic_jquery
• w3cshools.com - JavaScript Tutorial
• http://www.w3schools.com/js/default.asp
• http://www.w3schools.com/jquery/default.asp
Monday, September 16, 13
![Page 53: 早稲田大学授業 - モバイルプログラミング](https://reader033.vdocuments.net/reader033/viewer/2022050722/54bd87424a7959913b8b45d8/html5/thumbnails/53.jpg)
演習: FizzBuzz関数を作る• 以下の条件で数値を引数として受け取って、結果を文字列として返すFizzBuzz関数を定義する
• 3で割り切れる数の場合は”Fizz”
• 5で割り切れる数の場合は”Buzz”
• 3でも5でも割り切れる数の場合は”FizzBuzz”
• それ以外は受け取った数値を文字列として返す
• 1から100までの数値の結果をConsoleに出力
• 1から100までの数値の結果を配列に格納するMonday, September 16, 13
![Page 54: 早稲田大学授業 - モバイルプログラミング](https://reader033.vdocuments.net/reader033/viewer/2022050722/54bd87424a7959913b8b45d8/html5/thumbnails/54.jpg)
演習: 素数判定関数• 以下の条件で数値を引数として受け取って、その数が素数であるかどうかの結果を真偽値として返すisPrime関数を定義する
• 1から100,000までの数にいくつ素数が存在するかカウントする
Monday, September 16, 13
![Page 55: 早稲田大学授業 - モバイルプログラミング](https://reader033.vdocuments.net/reader033/viewer/2022050722/54bd87424a7959913b8b45d8/html5/thumbnails/55.jpg)
演習: DOM書き換え• 自分の名前を表示するHTMLをつくる
• ボタンを表示する
• ボタンをクリックすると、自分の名前を英語に書き換えるDOMの操作を行う
• (ヒント)
• 名前のElementにIDをつける
• ボタンオブジェクトのonclickに関数としてイベントを追加する
• documentGetElementByIDで名前のElementを取得、innerHTMLで書き換えをする
Monday, September 16, 13
![Page 56: 早稲田大学授業 - モバイルプログラミング](https://reader033.vdocuments.net/reader033/viewer/2022050722/54bd87424a7959913b8b45d8/html5/thumbnails/56.jpg)
JavaScript Libraries• jQuery
• http://jquery.com/
• Zepto
• http://zeptojs.com/
• App Framework
• http://app-framework-software.intel.com/
Monday, September 16, 13
![Page 57: 早稲田大学授業 - モバイルプログラミング](https://reader033.vdocuments.net/reader033/viewer/2022050722/54bd87424a7959913b8b45d8/html5/thumbnails/57.jpg)
Mobile Frameworks• jQuery Mobile
• http://jquerymobile.com/
• Sencha Touch
• http://www.sencha.com/products/touch
• iUI
• https://code.google.com/p/iui/
• Twitter Bootstrap (Mobile First)
• http://getbootstrap.com/
Monday, September 16, 13
![Page 58: 早稲田大学授業 - モバイルプログラミング](https://reader033.vdocuments.net/reader033/viewer/2022050722/54bd87424a7959913b8b45d8/html5/thumbnails/58.jpg)
レスポンシブデザイン• 端末に合わせてデザインを表示する(スターバックスの例 :http://www.starbucks.com/)
Monday, September 16, 13
![Page 59: 早稲田大学授業 - モバイルプログラミング](https://reader033.vdocuments.net/reader033/viewer/2022050722/54bd87424a7959913b8b45d8/html5/thumbnails/59.jpg)
レスポンシブデザイン利点
• 複数サイトの管理をしなくてよい
• PCとSPでの一貫性が保てる
欠点
• CSSが若干複雑になる
• PCに合わせるとリソースの読み込みが遅い
セオリー
• Mobile First(まずはモバイル端末に合わせる)Monday, September 16, 13
![Page 60: 早稲田大学授業 - モバイルプログラミング](https://reader033.vdocuments.net/reader033/viewer/2022050722/54bd87424a7959913b8b45d8/html5/thumbnails/60.jpg)
スケジュール第1回: イントロダクション(授業の概要)第2回: 開発ツール第3回: 開発ツール(演習)第4回: Mobile Web Applicationの基礎 1
第5回: Mobile Web Applicationの基礎 2
第6回: Mobile Web Applicationの基礎 (演習)第7回: JavaScriptでイベントハンドル第8回: HTML5の応用(キャッシュなど)第9回: Mobile Web Application Frameworks
第10回: Twitter Bootstrap 1第11回: Twitter Bootstrap 2第12回: Twitter Bootstrap(演習)第13回: ミニプロジェクト第14回: ミニプロジェクト第15回: ミニプロジェクト発表
Monday, September 16, 13
![Page 61: 早稲田大学授業 - モバイルプログラミング](https://reader033.vdocuments.net/reader033/viewer/2022050722/54bd87424a7959913b8b45d8/html5/thumbnails/61.jpg)
Twitter Bootstrap
Monday, September 16, 13
![Page 62: 早稲田大学授業 - モバイルプログラミング](https://reader033.vdocuments.net/reader033/viewer/2022050722/54bd87424a7959913b8b45d8/html5/thumbnails/62.jpg)
Bootstrap入門
• Twitter LikeのUIを手軽に使えるライブラリ
• Mobile Firstなレスポンシブデザイン
• CSS
• Navigation, Table, Form, Dropdown, Icon, Badge, Alert, Progress Barなど
Monday, September 16, 13
![Page 63: 早稲田大学授業 - モバイルプログラミング](https://reader033.vdocuments.net/reader033/viewer/2022050722/54bd87424a7959913b8b45d8/html5/thumbnails/63.jpg)
Bootstrap入門
• ドットインストール - Bootstrap 3.0入門 (全17回)
• http://dotinstall.com/lessons/basic_twitter_bootstrap_v4
Monday, September 16, 13
![Page 64: 早稲田大学授業 - モバイルプログラミング](https://reader033.vdocuments.net/reader033/viewer/2022050722/54bd87424a7959913b8b45d8/html5/thumbnails/64.jpg)
演習: Twitter Bootstrap• 前回作った自己紹介ページにTwitter Bootstrapを適用してみましょう
• できる限り多くのパーツを使ってみましょう( Navbar、Grid、Table、Icon、Modal、Alert、Tooltipなど)
Monday, September 16, 13
![Page 65: 早稲田大学授業 - モバイルプログラミング](https://reader033.vdocuments.net/reader033/viewer/2022050722/54bd87424a7959913b8b45d8/html5/thumbnails/65.jpg)
Google Charts• Googleの開発したJavaScriptのChartライブラリ
• https://developers.google.com/chart/
• (特徴)あまり複雑な事はできないが非常に簡単に使える
Monday, September 16, 13
![Page 66: 早稲田大学授業 - モバイルプログラミング](https://reader033.vdocuments.net/reader033/viewer/2022050722/54bd87424a7959913b8b45d8/html5/thumbnails/66.jpg)
Supported Charts• Area Charts
• Bar Charts
• Bubble Charts
• Candlestick Charts
• Column Charts
• Combo Charts
• Gauge Charts
• Geo Charts
• Line Charts
• Maps
• Org Charts
• Pie Charts
• Scatter Charts
• Stepped Area Charts
• Table Charts
• Timelines
• Tree Map Charts
• Trendlines
Monday, September 16, 13
![Page 67: 早稲田大学授業 - モバイルプログラミング](https://reader033.vdocuments.net/reader033/viewer/2022050722/54bd87424a7959913b8b45d8/html5/thumbnails/67.jpg)
Code Playground• https://code.google.com/apis/ajax/playground/
Monday, September 16, 13
![Page 68: 早稲田大学授業 - モバイルプログラミング](https://reader033.vdocuments.net/reader033/viewer/2022050722/54bd87424a7959913b8b45d8/html5/thumbnails/68.jpg)
スケジュール第1回: イントロダクション(授業の概要)第2回: 開発ツール第3回: 開発ツール(演習)第4回: Mobile Web Applicationの基礎 1
第5回: Mobile Web Applicationの基礎 2
第6回: Mobile Web Applicationの基礎 (演習)第7回: JavaScriptでイベントハンドル第8回: HTML5の応用(キャッシュなど)第9回: Mobile Web Application Frameworks
第10回: Twitter Bootstrap 1
第11回: Twitter Bootstrap 2
第12回: Twitter Bootstrap(演習)
第13回: ミニプロジェクト第14回: ミニプロジェクト第15回: ミニプロジェクト発表
Monday, September 16, 13
![Page 69: 早稲田大学授業 - モバイルプログラミング](https://reader033.vdocuments.net/reader033/viewer/2022050722/54bd87424a7959913b8b45d8/html5/thumbnails/69.jpg)
演習: Mobile Web Application授業で学んだHTML、CSS、JavaScript、jQuery、Bootstrapの機能を使って好きなMobile Web Applicationを作る
(基本編)
• 基本的なHTML/CSS、Bootstrapのコンポーネント、jQueryのセレクタやイベントを利用してMobile FirstでResponsiveなWeb Applicationを作る
(応用編)
• コメント機能などの投稿機能追加(Server連携がないのでDOMの書き換えなどを利用)
• Google Chart Toolsを利用してグラフを作ってみる
• Twitter REST API (https://dev.twitter.com/docs/api)を使って最近のTweetを取得、FormからTwitterに書き込み
• Graph API (https://developers.facebook.com/docs/getting-started/graphapi/)を使ってFacebookから友達などの情報を取得して表示
Monday, September 16, 13
![Page 70: 早稲田大学授業 - モバイルプログラミング](https://reader033.vdocuments.net/reader033/viewer/2022050722/54bd87424a7959913b8b45d8/html5/thumbnails/70.jpg)
演習: Mobile Web Application(課題発表と提出)
• 発表
• 9/13(Fri)の4限に5分間でiOS Simulator上での動作を見せながら発表を行う
• 提出
• PublicなWeb Siteとして提出
• GitHub上のレポジトリから提出
• Zipでアーカイブしたapplicationのディレクトリをmailで提出([email protected])
Monday, September 16, 13