More Related Content Similar to 早稲田大学授業 - モバイルプログラミング Similar to 早稲田大学授業 - モバイルプログラミング (20) 早稲田大学授業 - モバイルプログラミング2. スケジュール
第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
5. • どの程度経験があるか教えてください
• Web Application作った事ある?
• Web Server(Apache)とか使った事ある?
• どんなProgram書いた事ある?
• HTML / CSS / JavaScriptは?
質問
Monday, September 16, 13
7. モバイルとは
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
8. モバイル端末の普及
• 3000 different devices
• 30 different browsers
• 6 billion mobile users (86% of population)
Monday, September 16, 13
9. モバイルの種類
• 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
14. Native vs HTML5
HTML5 Native
開発言語 HTML5 & Javascript
Java(Android) /
Objective-c(iOS)
動作速度 遅い 早い
複数Platform対応 簡単 大変
アップデート 簡単 大変
Monday, September 16, 13
20. 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
22. Browser Rendering Engine
WebKit (Safari / Chrome / Adobe AIR)
• AppleとGoogleが開発
• Mobileブラウザの主流
Gecko (FireFox)
Trident (IE)
• マイクロソフト様のエンジン
Blink
• Googleが新規採用したWebKitからのFork
Monday, September 16, 13
24. Key Words
• Smart Phone
• Android
• iOS
• Safari
• Chrome
• Web Application
• HTML5
• JavaScript
• CSS3
• Twitter Bootstrap
Monday, September 16, 13
25. スケジュール
第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
26. 開発環境
Google Chrome
• Developer Toolsをガンガン使います
• https://developers.google.com/chrome-
developer-tools/?hl=ja
Editor
• Vimでもemacsでもお好きなものでどうぞ
Monday, September 16, 13
29. Chrome Developer Tools基礎
• ドットインストール - Chrome Developer Tools
入門 (全12回)
• http://dotinstall.com/lessons/
basic_chrome_dev
Monday, September 16, 13
32. 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
35. スケジュール
第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
36. HTTP / HTTPS
• HTTPは
HTML等の送
受信に使う通
信プロトコル
• HTTPSは暗号
化された
HTTP通信
Monday, September 16, 13
37. 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
39. 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, canvas
Monday, September 16, 13
45. Form Elements
• Select List
• Radio Button
• Checkbox
• Button
• Text(keyboard optimization for each type)
• Range Slider
• Date and Time Selectors
Monday, September 16, 13
47. 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
50. 演習: HTML / CSS基礎
• HTML/CSSを利用して簡単な自己紹介ページを
作ってみましょう
• 様々なHTMLの要素を使ってみる
• classや要素名の指定をしてCSSでスタイルを
適用する
• PCとSPでCSSを切り替えてみる
Monday, September 16, 13
51. スケジュール
第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
52. 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
55. 演習: DOM書き換え
• 自分の名前を表示するHTMLをつくる
• ボタンを表示する
• ボタンをクリックすると、自分の名前を英語に書き換えるDOMの操
作を行う
• (ヒント)
• 名前のElementにIDをつける
• ボタンオブジェクトのonclickに関数としてイベントを追加する
• documentGetElementByIDで名前のElementを取得、
innerHTMLで書き換えをする
Monday, September 16, 13
56. JavaScript Libraries
• jQuery
• http://jquery.com/
• Zepto
• http://zeptojs.com/
• App Framework
• http://app-framework-
software.intel.com/
Monday, September 16, 13
57. 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
60. スケジュール
第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
63. Bootstrap入門
• ドットインストール - Bootstrap 3.0入門 (全
17回)
• http://dotinstall.com/lessons/
basic_twitter_bootstrap_v4
Monday, September 16, 13
64. 演習: Twitter Bootstrap
• 前回作った自己紹介ペー
ジにTwitter Bootstrapを
適用してみましょう
• できる限り多くのパーツ
を使ってみましょう
( Navbar、Grid、
Table、Icon、Modal、
Alert、Tooltipなど)
Monday, September 16, 13
66. 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
68. スケジュール
第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
69. 演習: 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
70. 演習: Mobile Web Application
(課題発表と提出)
• 発表
• 9/13(Fri)の4限に5分間でiOS Simulator上での動作を見せながら発
表を行う
• 提出
• PublicなWeb Siteとして提出
• GitHub上のレポジトリから提出
• Zipでアーカイブしたapplicationのディレクトリをmailで提出
(1p.arita@aoni.waseda.jp)
Monday, September 16, 13