Your SlideShare is downloading. ×
早稲田大学授業 - モバイルプログラミング
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×

Introducing the official SlideShare app

Stunning, full-screen experience for iPhone and Android

Text the download link to your phone

Standard text messaging rates apply

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

1,720
views

Published on


0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total Views
1,720
On Slideshare
0
From Embeds
0
Number of Embeds
11
Actions
Shares
0
Downloads
5
Comments
0
Likes
0
Embeds 0
No embeds

Report content
Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
No notes for slide

Transcript

  • 1. モバイルプログラミング 講師 有田一平 Monday, September 16, 13
  • 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
  • 3. 講師紹介 有田一平 • 現職はArchitect@Cambridge Energy Data Lab, Ltd • 前職はエンジニア@グリー株式会社、JPモルガ ン証券株式会社 • 名古屋出身 • 趣味はアウトドアスポーツ • 2005年早稲田大学人間科学部卒業 • github: @peisan • twitter: @ippeeeee Monday, September 16, 13
  • 4. • 皆さんの事も教えて下さい :-) • 名前 • 受講した理由 • 趣味 • 出身 などなんでも 生徒自己紹介 Monday, September 16, 13
  • 5. • どの程度経験があるか教えてください • Web Application作った事ある? • Web Server(Apache)とか使った事ある? • どんなProgram書いた事ある? • HTML / CSS / JavaScriptは? 質問 Monday, September 16, 13
  • 6. そもそもモバイルプログラミングって何? • モバイルってなに? • プログラミングってなに? • 皆さん何を期待して受講しにきましたか? 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
  • 10. プログラミングとは • プログラミング(英: programming)とは、プログ ラムを作成することにより、 人間の意図した処理を行うよ うにコンピュータに指示を与 える行為である (Wikipediaより) Monday, September 16, 13
  • 11. 授業の目的 HTML5/CSS3/ JavaScriptを利用して Smart PhoneのWeb Browserで動く Mobile Web Applicationを実装する Monday, September 16, 13
  • 12. HTML5 • 2014年に正式にFixする予定の HTMLの新しいVersion • マルチメディア機能やウェブ アプリケーションのプラット フォーム機能を搭載した今ま でよりRichなHTML • 既存のBrowserでも段階的に 対応済み Monday, September 16, 13
  • 13. HTML5の応用技術 • SVG • Canvas • Application Cache • Web Storage • Web Workers • Web Sockets Monday, September 16, 13
  • 14. Native vs HTML5 HTML5 Native 開発言語 HTML5 & Javascript Java(Android) / Objective-c(iOS) 動作速度 遅い 早い 複数Platform対応 簡単 大変 アップデート 簡単 大変 Monday, September 16, 13
  • 15. Native vs HTML5 Monday, September 16, 13
  • 16. Native vs HTML5 Monday, September 16, 13
  • 17. Native vs HTML5 Monday, September 16, 13
  • 18. Smart Phoneとは Monday, September 16, 13
  • 19. Smart Phoneの特徴 AndroidやiOSなどの高機能 OSを搭載した多機能端末 • Touch • GPS • Bluetooth • Wifi • Camera • Store(e.g. AppStore) 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
  • 21. Browserの種類 • Safari • Android Browser • Google Chrome • Internet Explore • Opera • Firefox 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
  • 23. JavaScript Engine V8 • Googleが開発 • Google ChromとAndroid Browserで利用 Nitro • Appleが開発 • Safari 4で利用 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
  • 27. Developer Toolsの使い方 • 右下のSettingから User AgentをSPに 変更 • Device Metricsで端 末の画面サイズも変 更できる Monday, September 16, 13
  • 28. Developer Toolsの機能 • HTML要素の確認 と編集 • HTTP Request確認 • JavascriptのDebug • Console機能 • などなどたくさん Monday, September 16, 13
  • 29. Chrome Developer Tools基礎 • ドットインストール - Chrome Developer Tools 入門 (全12回) • http://dotinstall.com/lessons/ basic_chrome_dev Monday, September 16, 13
  • 30. iOS Simulator • iPhoneのシミュレータ • XcodeからInstall&起動できます Monday, September 16, 13
  • 31. Android SDK • Androidのエミュレータを含む開発キット • http://developer.android.com/sdk/index.html 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
  • 33. GitHubの設定 • GitHubとは • gitという分散バージョン管 理システムのWebでのコラボ レーションツール • My Account • https://github.com/peisan • 授業のRepository • https://github.com/peisan/ WasedaMobileProgramming Class Monday, September 16, 13
  • 34. 演習:開発ツール • Local環境のApacheのサーバでHello World と表示するHTMLページを表示 • Chromeのインスペクタで確認 • ElementタグでHTMLのブラウズと編集 • NetworkタブでHTTPリクエストの確認 • ConsoleタブでJavaScriptの実行 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
  • 38. HTML - グリーの例 • sns.gree.net 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
  • 40. Header • Title • Icon • Viewport • CSS • JavaScript Monday, September 16, 13
  • 41. Viewport • Deviceと等倍サイズで表示 • Zoomできなくする Monday, September 16, 13
  • 42. Media Queries • PC / SPでCSSの使い分け Monday, September 16, 13
  • 43. Body Main Structure • Header • Main Navigation • Content • Footer Monday, September 16, 13
  • 44. Body Tips • URLのバーを隠す 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
  • 46. Form Functions • Place Holder • Auto Focus • Auto Complete • Validations 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
  • 48. CSS - グリーの例 • sns.gree.net Monday, September 16, 13
  • 49. CSS Tips • Reset default CSS settings 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
  • 53. 演習: FizzBuzz関数を作る • 以下の条件で数値を引数として受け取って、結果を文字列と して返すFizzBuzz関数を定義する • 3で割り切れる数の場合は”Fizz” • 5で割り切れる数の場合は”Buzz” • 3でも5でも割り切れる数の場合は”FizzBuzz” • それ以外は受け取った数値を文字列として返す • 1から100までの数値の結果をConsoleに出力 • 1から100までの数値の結果を配列に格納する Monday, September 16, 13
  • 54. 演習: 素数判定関数 • 以下の条件で数値を引数として受け取って、そ の数が素数であるかどうかの結果を真偽値とし て返すisPrime関数を定義する • 1から100,000までの数にいくつ素数が存在する かカウントする 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
  • 58. レスポンシブデザイン • 端末に合わせてデザインを表示する (スターバックスの例 :http://www.starbucks.com/) Monday, September 16, 13
  • 59. レスポンシブデザイン 利点 • 複数サイトの管理をしなくてよい • PCとSPでの一貫性が保てる 欠点 • CSSが若干複雑になる • PCに合わせるとリソースの読み込みが遅い セオリー • Mobile First(まずはモバイル端末に合わせる) 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
  • 61. Twitter Bootstrap Monday, September 16, 13
  • 62. Bootstrap入門 • Twitter LikeのUIを手軽に使えるライブラリ • Mobile Firstなレスポンシブデザイン • CSS • Navigation, Table, Form, Dropdown, Icon, Badge, Alert, Progress Barなど 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
  • 65. Google Charts • Googleの開発したJavaScriptのChartライブラリ • https://developers.google.com/chart/ • (特徴)あまり複雑な事はできないが非常に簡単に使える 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
  • 67. Code Playground • https://code.google.com/apis/ajax/playground/ 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