早稲田大学授業 - モバイルプログラミング

モバイルプログラミング
講師有田一平
Monday, September 16, 13

スケジュール
第１回：イントロダクション（授業の概要）
第２回：開発ツール
第３回：開発ツール（演習）
第４回： Mobile Web Applicationの基礎 1
第５回： Mobile Web Applicationの基礎 2
第６回： Mobile Web Applicationの基礎（演習）
第７回： JavaScriptでイベントハンドル
第８回： HTML5の応用（キャッシュなど）
第９回： Mobile Web Application Frameworks
第10回： Twitter Bootstrap 1
第11回： Twitter Bootstrap 2
第12回： Twitter Bootstrap（演習）
第13回：ミニプロジェクト
第14回：ミニプロジェクト
第15回：ミニプロジェクト発表

講師紹介有田一平
• 現職はArchitect@Cambridge Energy Data Lab,
Ltd
• 前職はエンジニア@グリー株式会社、JPモルガ
ン証券株式会社
• 名古屋出身
• 趣味はアウトドアスポーツ
• 2005年早稲田大学人間科学部卒業
• github: @peisan
• twitter: @ippeeeee

• 皆さんの事も教えて下さい :-)
• 名前
• 受講した理由
• 趣味
• 出身
などなんでも
生徒自己紹介

• どの程度経験があるか教えてください
• Web Application作った事ある？
• Web Server(Apache)とか使った事ある？
• どんなProgram書いた事ある？
• HTML / CSS / JavaScriptは？
質問

そもそもモバイルプログラミングって何？
• モバイルってなに？
• プログラミングってなに？
• 皆さん何を期待して受講しにきましたか？

モバイルとは
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
（英辞郎より）

モバイル端末の普及
• 3000 different devices
• 30 different browsers
• 6 billion mobile users (86% of population)

モバイルの種類
• Device
• Smart Phone
• Tablet
• Feature Phone
• Netbook
• Glass
• Makers
• Apple
• Google
• Samsung
• Nokia
• Amazon
• RIM
• HTC
• OS
• iOS
• Android
• Symbian
• BlackBerry
• Windows

プログラミングとは
• プログラミング（英:
programming）とは、プログ
ラムを作成することにより、
人間の意図した処理を行うよ
うにコンピュータに指示を与
える行為である
（Wikipediaより）

授業の目的
HTML5/CSS3/
JavaScriptを利用して
Smart PhoneのWeb
Browserで動く
Mobile Web
Applicationを実装する

HTML5
• 2014年に正式にFixする予定の
HTMLの新しいVersion
• マルチメディア機能やウェブ
アプリケーションのプラット
フォーム機能を搭載した今ま
でよりRichなHTML
• 既存のBrowserでも段階的に
対応済み

HTML5の応用技術
• SVG
• Canvas
• Application Cache
• Web Storage
• Web Workers
• Web Sockets

Native vs HTML5
HTML5 Native
開発言語 HTML5 & Javascript
Java(Android) /
Objective-c(iOS)
動作速度遅い早い
複数Platform対応簡単大変
アップデート簡単大変

Native vs HTML5

Smart Phoneとは

Smart Phoneの特徴
AndroidやiOSなどの高機能
OSを搭載した多機能端末
• Touch
• GPS
• Bluetooth
• Wiﬁ
• Camera
• Store(e.g. AppStore)

Web Browser
• ウェブブラウザ（インターネットブラウザ、WWWブラウザ）とは World Wide Web の利用に供するブ
ラウザであり、ユーザエージェント (UA) である。具体的には、ウェブページを画面や印刷機に出力した
り、ハイパーリンクをたどったりするなどの機能がある。単にブラウザ（ブラウザー）と呼んだ場合、
多くはウェブブラウザのことを指す。
• World Wide Web 上の情報リソースを扱うアプリケーションであり、ウェブページ・画像・動画・音声等
の情報リソースの識別には Uniform Resource Identiﬁer (URI) を使用する[1]。
• ウェブブラウザは World Wide Web への接続を第一の目的としているが、プライベートネットワーク内
の Web サーバやファイルシステム内のファイルが提供する情報への接続にも利用できる。主なウェブブ
ラウザとして、Mozilla Firefox, Google Chrome, Internet Explorer, Opera, Safari 等がある[2]。
• (Wikipediaより)

Browserの種類
• Safari
• Android Browser
• Google Chrome
• Internet Explore
• Opera
• Firefox

Browser Rendering Engine
WebKit (Safari / Chrome / Adobe AIR)
• AppleとGoogleが開発
• Mobileブラウザの主流
Gecko (FireFox)
Trident (IE)
• マイクロソフト様のエンジン
Blink
• Googleが新規採用したWebKitからのFork

JavaScript Engine
V8
• Googleが開発
• Google ChromとAndroid Browserで利用
Nitro
• Appleが開発
• Safari 4で利用

Key Words
• Smart Phone
• Android
• iOS
• Safari
• Chrome
• Web Application
• HTML5
• JavaScript
• CSS3
• Twitter Bootstrap

開発環境
Google Chrome
• Developer Toolsをガンガン使います
• https://developers.google.com/chrome-
developer-tools/?hl=ja
Editor
• Vimでもemacsでもお好きなものでどうぞ

Developer Toolsの使い方
• 右下のSettingから
User AgentをSPに
変更
• Device Metricsで端
末の画面サイズも変
更できる

Developer Toolsの機能
• HTML要素の確認
と編集
• HTTP Request確認
• JavascriptのDebug
• Console機能
• などなどたくさん

Chrome Developer Tools基礎
• ドットインストール - Chrome Developer Tools
入門 (全12回)
• http://dotinstall.com/lessons/
basic_chrome_dev

iOS Simulator
• iPhoneのシミュレータ
• XcodeからInstall&起動できます

Android SDK
• Androidのエミュレータを含む開発キット
• http://developer.android.com/sdk/index.html

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

GitHubの設定
• GitHubとは
• gitという分散バージョン管
理システムのWebでのコラボ
レーションツール
• My Account
• https://github.com/peisan
• 授業のRepository
• https://github.com/peisan/
WasedaMobileProgramming
Class

演習:開発ツール
• Local環境のApacheのサーバでHello World
と表示するHTMLページを表示
• Chromeのインスペクタで確認
• ElementタグでHTMLのブラウズと編集
• NetworkタブでHTTPリクエストの確認
• ConsoleタブでJavaScriptの実行

HTTP / HTTPS
• HTTPは
HTML等の送
受信に使う通
信プロトコル
• HTTPSは暗号
化された
HTTP通信

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

HTML - グリーの例
• sns.gree.net

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

Header
• Title
• Icon
• Viewport
• CSS
• JavaScript

Viewport
• Deviceと等倍サイズで表示
• Zoomできなくする

Media Queries
• PC / SPでCSSの使い分け

Body Main Structure
• Header
• Main Navigation
• Content
• Footer

Body Tips
• URLのバーを隠す

Form Elements
• Select List
• Radio Button
• Checkbox
• Button
• Text(keyboard optimization for each type)
• Range Slider
• Date and Time Selectors

Form Functions
• Place Holder
• Auto Focus
• Auto Complete
• Validations

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

CSS - グリーの例
• sns.gree.net

CSS Tips
• Reset default CSS settings

演習: HTML / CSS基礎
• HTML/CSSを利用して簡単な自己紹介ページを
作ってみましょう
• 様々なHTMLの要素を使ってみる
• classや要素名の指定をしてCSSでスタイルを
適用する
• PCとSPでCSSを切り替えてみる

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

演習: FizzBuzz関数を作る
• 以下の条件で数値を引数として受け取って、結果を文字列と
して返すFizzBuzz関数を定義する
• 3で割り切れる数の場合は”Fizz”
• 5で割り切れる数の場合は”Buzz”
• 3でも5でも割り切れる数の場合は”FizzBuzz”
• それ以外は受け取った数値を文字列として返す
• 1から100までの数値の結果をConsoleに出力
• 1から100までの数値の結果を配列に格納する

演習: 素数判定関数
• 以下の条件で数値を引数として受け取って、そ
の数が素数であるかどうかの結果を真偽値とし
て返すisPrime関数を定義する
• 1から100,000までの数にいくつ素数が存在する
かカウントする

演習: DOM書き換え
• 自分の名前を表示するHTMLをつくる
• ボタンを表示する
• ボタンをクリックすると、自分の名前を英語に書き換えるDOMの操
作を行う
• （ヒント）
• 名前のElementにIDをつける
• ボタンオブジェクトのonclickに関数としてイベントを追加する
• documentGetElementByIDで名前のElementを取得、
innerHTMLで書き換えをする

JavaScript Libraries
• jQuery
• http://jquery.com/
• Zepto
• http://zeptojs.com/
• App Framework
• http://app-framework-
software.intel.com/

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/

レスポンシブデザイン
• 端末に合わせてデザインを表示する
（スターバックスの例 :http://www.starbucks.com/）

レスポンシブデザイン
利点
• 複数サイトの管理をしなくてよい
• PCとSPでの一貫性が保てる
欠点
• CSSが若干複雑になる
• PCに合わせるとリソースの読み込みが遅い
セオリー
• Mobile First（まずはモバイル端末に合わせる）

Twitter Bootstrap

Bootstrap入門
• Twitter LikeのUIを手軽に使えるライブラリ
• Mobile Firstなレスポンシブデザイン
• CSS
• Navigation, Table, Form, Dropdown,
Icon, Badge, Alert, Progress Barなど

Bootstrap入門
• ドットインストール - Bootstrap 3.0入門 (全
17回)
• http://dotinstall.com/lessons/
basic_twitter_bootstrap_v4

演習: Twitter Bootstrap
• 前回作った自己紹介ペー
ジにTwitter Bootstrapを
適用してみましょう
• できる限り多くのパーツ
を使ってみましょう
（ Navbar、Grid、
Table、Icon、Modal、
Alert、Tooltipなど）

Google Charts
• Googleの開発したJavaScriptのChartライブラリ
• https://developers.google.com/chart/
• （特徴）あまり複雑な事はできないが非常に簡単に使える

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

Code Playground
• https://code.google.com/apis/ajax/playground/

演習: 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から友達などの情報を取得して表示

演習: Mobile Web Application
(課題発表と提出)
• 発表
• 9/13(Fri)の4限に5分間でiOS Simulator上での動作を見せながら発
表を行う
• 提出
• PublicなWeb Siteとして提出
• GitHub上のレポジトリから提出
• Zipでアーカイブしたapplicationのディレクトリをmailで提出
（1p.arita@aoni.waseda.jp）

早稲田大学授業 - モバイルプログラミング

More Related Content

What's hot (15)

Similar to 早稲田大学授業 - モバイルプログラミング (20)

早稲田大学授業 - モバイルプログラミング