モバイルプログラミング講師　有田一平

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回： ミニプロジェクト発表

Monday, September 16, 13

講師紹介　有田一平• 現職はArchitect@Cambridge Energy Data Lab,

Ltd

• 前職はエンジニア@グリー株式会社、JPモルガン証券株式会社

• 名古屋出身

• 趣味はアウトドアスポーツ

• 2005年早稲田大学人間科学部卒業

• github: @peisan

• twitter: @ippeeeee

Monday, September 16, 13

• 皆さんの事も教えて下さい :-)

• 名前

• 受講した理由

• 趣味

• 出身

などなんでも

生徒自己紹介

Monday, September 16, 13

• どの程度経験があるか教えてください

• Web Application作った事ある？

• Web Server(Apache)とか使った事ある？

• どんなProgram書いた事ある？

• HTML / CSS / JavaScriptは？

質問

Monday, September 16, 13

そもそもモバイルプログラミングって何？

• モバイルってなに？

• プログラミングってなに？

• 皆さん何を期待して受講しにきましたか？

Monday, September 16, 13

モバイルとは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

モバイル端末の普及

• 3000 different devices

• 30 different browsers

• 6 billion mobile users (86% of population)

Monday, September 16, 13

モバイルの種類• 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

プログラミングとは

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

（Wikipediaより）

Monday, September 16, 13

授業の目的HTML5/CSS3/JavaScriptを利用して

Smart PhoneのWeb

Browserで動く

Mobile Web Applicationを実装する

Monday, September 16, 13

HTML5

• 2014年に正式にFixする予定のHTMLの新しいVersion

• マルチメディア機能やウェブアプリケーションのプラットフォーム機能を搭載した今までよりRichなHTML

• 既存のBrowserでも段階的に対応済み

Monday, September 16, 13

HTML5の応用技術• SVG

• Canvas

• Application Cache

• Web Storage

• Web Workers

• Web Sockets

Monday, September 16, 13

Native vs HTML5

HTML5 Native

開発言語 HTML5 & Javascript Java(Android) / Objective-c(iOS)

動作速度 遅い 早い

複数Platform対応 簡単 大変

アップデート 簡単 大変

Monday, September 16, 13

Native vs HTML5

Monday, September 16, 13

Native vs HTML5

Monday, September 16, 13

Native vs HTML5

Monday, September 16, 13

Smart Phoneとは

Monday, September 16, 13

Smart Phoneの特徴AndroidやiOSなどの高機能OSを搭載した多機能端末

• Touch• GPS• Bluetooth• Wifi• Camera• Store(e.g. AppStore)

Monday, September 16, 13

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

Browserの種類• Safari

• Android Browser

• Google Chrome

• Internet Explore

• Opera

• Firefox

Monday, September 16, 13

Browser Rendering EngineWebKit (Safari / Chrome / Adobe AIR)

• AppleとGoogleが開発

• Mobileブラウザの主流

Gecko (FireFox)

Trident (IE)• マイクロソフト様のエンジン

Blink• Googleが新規採用したWebKitからのFork

Monday, September 16, 13

JavaScript EngineV8

• Googleが開発

• Google ChromとAndroid Browserで利用

Nitro• Appleが開発

• Safari 4で利用

Monday, September 16, 13

Key Words• Smart Phone

• Android

• iOS

• Safari

• Chrome

• Web Application

• HTML5

• JavaScript

• CSS3

• Twitter Bootstrap

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回： ミニプロジェクト発表

Monday, September 16, 13

開発環境Google Chrome

• Developer Toolsをガンガン使います

• https://developers.google.com/chrome-developer-tools/?hl=ja

Editor

• Vimでもemacsでもお好きなものでどうぞ

Monday, September 16, 13

Developer Toolsの使い方• 右下のSettingから

User AgentをSPに変更

• Device Metricsで端末の画面サイズも変更できる

Monday, September 16, 13

Developer Toolsの機能• HTML要素の確認と編集

• HTTP Request確認

• JavascriptのDebug

• Console機能

• などなどたくさん

Monday, September 16, 13

Chrome Developer Tools基礎• ドットインストール - Chrome Developer Tools

入門 (全12回)

• http://dotinstall.com/lessons/basic_chrome_dev

Monday, September 16, 13

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

Monday, September 16, 13

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

Monday, September 16, 13

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

GitHubの設定• GitHubとは

• gitという分散バージョン管理システムのWebでのコラボレーションツール

• My Account

• https://github.com/peisan

• 授業のRepository

• https://github.com/peisan/WasedaMobileProgrammingClass

Monday, September 16, 13

演習:開発ツール• Local環境のApacheのサーバでHello Worldと表示するHTMLページを表示

• Chromeのインスペクタで確認

• ElementタグでHTMLのブラウズと編集

• NetworkタブでHTTPリクエストの確認

• ConsoleタブでJavaScriptの実行

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回： ミニプロジェクト発表

Monday, September 16, 13

HTTP / HTTPS• HTTPは

HTML等の送受信に使う通信プロトコル

• HTTPSは暗号化されたHTTP通信

Monday, September 16, 13

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

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

Monday, September 16, 13

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

Header

• Title

• Icon

• Viewport

• CSS

• JavaScript

Monday, September 16, 13

Viewport• Deviceと等倍サイズで表示

• Zoomできなくする

Monday, September 16, 13

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

Monday, September 16, 13

Body Main Structure

• Header

• Main Navigation

• Content

• Footer

Monday, September 16, 13

Body Tips• URLのバーを隠す

Monday, September 16, 13

Form Elements• Select List

• Radio Button

• Checkbox

• Button

• Text(keyboard optimization for each type)

• Range Slider

• Date and Time Selectors

Monday, September 16, 13

Form Functions• Place Holder

• Auto Focus

• Auto Complete

• Validations

Monday, September 16, 13

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

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

Monday, September 16, 13

CSS Tips

• Reset default CSS settings

Monday, September 16, 13

演習: HTML / CSS基礎• HTML/CSSを利用して簡単な自己紹介ページを作ってみましょう

• 様々なHTMLの要素を使ってみる

• classや要素名の指定をしてCSSでスタイルを適用する

• PCとSPでCSSを切り替えてみる

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回： ミニプロジェクト発表

Monday, September 16, 13

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

演習: FizzBuzz関数を作る• 以下の条件で数値を引数として受け取って、結果を文字列として返すFizzBuzz関数を定義する

• 3で割り切れる数の場合は”Fizz”

• 5で割り切れる数の場合は”Buzz”

• 3でも5でも割り切れる数の場合は”FizzBuzz”

• それ以外は受け取った数値を文字列として返す

• 1から100までの数値の結果をConsoleに出力

• 1から100までの数値の結果を配列に格納するMonday, September 16, 13

演習: 素数判定関数• 以下の条件で数値を引数として受け取って、その数が素数であるかどうかの結果を真偽値として返すisPrime関数を定義する

• 1から100,000までの数にいくつ素数が存在するかカウントする

Monday, September 16, 13

演習: DOM書き換え• 自分の名前を表示するHTMLをつくる

• ボタンを表示する

• ボタンをクリックすると、自分の名前を英語に書き換えるDOMの操作を行う

• （ヒント）

• 名前のElementにIDをつける

• ボタンオブジェクトのonclickに関数としてイベントを追加する

• documentGetElementByIDで名前のElementを取得、innerHTMLで書き換えをする

Monday, September 16, 13

JavaScript Libraries• jQuery

• http://jquery.com/

• Zepto

• http://zeptojs.com/

• App Framework

• http://app-framework-software.intel.com/

Monday, September 16, 13

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

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

Monday, September 16, 13

レスポンシブデザイン利点

• 複数サイトの管理をしなくてよい

• PCとSPでの一貫性が保てる

欠点

• CSSが若干複雑になる

• PCに合わせるとリソースの読み込みが遅い

セオリー

• Mobile First（まずはモバイル端末に合わせる）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回： ミニプロジェクト発表

Monday, September 16, 13

Twitter Bootstrap

Monday, September 16, 13

Bootstrap入門

• Twitter LikeのUIを手軽に使えるライブラリ

• Mobile Firstなレスポンシブデザイン

• CSS

• Navigation, Table, Form, Dropdown, Icon, Badge, Alert, Progress Barなど

Monday, September 16, 13

Bootstrap入門

• ドットインストール - Bootstrap 3.0入門 (全17回)

• http://dotinstall.com/lessons/basic_twitter_bootstrap_v4

Monday, September 16, 13

演習: Twitter Bootstrap• 前回作った自己紹介ページにTwitter Bootstrapを適用してみましょう

• できる限り多くのパーツを使ってみましょう（ Navbar、Grid、Table、Icon、Modal、Alert、Tooltipなど）

Monday, September 16, 13

Google Charts• Googleの開発したJavaScriptのChartライブラリ

• https://developers.google.com/chart/

• （特徴）あまり複雑な事はできないが非常に簡単に使える

Monday, September 16, 13

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

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

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回： ミニプロジェクト発表

Monday, September 16, 13

演習: 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

演習: 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