Download as ODP, PPTX
HTML5 開発環境の紹介
- 1.
- 2.
- 3. 流石に何もなしはきついです ● file:// スキームだと動かないものもあります ●ライブラリのインストールが意外と大変です – HTML5 アプリなのでライブラリをたくさん使いま す
- 4.
- 5. アジェンダ ● 簡易ウェブサーバー http-serverを使う – ついでにライブラリ管理の Bower も紹介 ● Yeoman を使って本格開発 ● ブラウザーだけで完結する Plunker を使う
- 6. アジェンダ ● 簡易ウェブサーバー http-serverを使う – ついでにライブラリ管理の Bower も紹介 ● Yeoman を使って本格開発 ● ブラウザーだけで完結する Plunker を使う
- 7. 簡易ウェブサーバー ● ウェブサーバーは別にレンタルサーバーやクラウド を借りなくても立ち上げられます! ● 昔はApache を立ち上げたりしてたけど、結構大変 ● 最近は簡易ウェブサーバーとかいう、開発時に便利 なウェブサーバーが増えた! ● 大体各言語ごとにあるけど、今日は Node.js 用の http-server を使ってみる – HTML5 アプリ開発に重要なツールは Node.js 用が多いの でちょうどよい
- 8. 簡易ウェブサーバー ● 特徴 – 使いたい時だけ立ち上げる –細かい設定はほとんどいらない
- 9. 簡易ウェブサーバー ● インストールは簡単! – npminstall -g http-server – Mac で公式サイトからインストールした人は sudo つけないといけないかも
- 10. 簡易ウェブサーバー ● 使い方も簡単 – mkdirwebapp1 ← webapp1 ディレクトリを作成 – cd webapp1 ← webapp1 ディレクトリへ移動 – echo test > index.html ← test と書いてあるファイルを 作成 – http-server ← 起動する – ブラウザーで http://localhost:8080 にアクセス! $ http-server Starting up http-server, serving ./ on: http://0.0.0.0:8080 Hit CTRL-C to stop the server
- 11. 簡易ウェブサーバー ● “test” って表示されたらOK! ● 試しに index.html に何か書いたり、他のページ を作ってみてリンク貼ってみたり、画像を置い てみたりしてみて!
- 12. 簡易ウェブサーバー ● 一応、他の人にも見えるようになるから注意し てね! ● http-server-a 127.0.0.1 -p 9001 – こうすると、自分の端末からしか繋がらなくなる – ポート番号も 9001 に変更している
- 13. 簡易ウェブサーバー Ruby や PHPや Python にもあるので、 そちらに慣れていれば そっち使うのがいいかも
- 14. アジェンダ ● 簡易ウェブサーバー http-serverを使う – ついでにライブラリ管理の Bower も紹介 ● Yeoman を使って本格開発 ● ブラウザーだけで完結する Plunker を使う
- 15. Bower ● Bower はHTML5 アプリのためのパッケージマ ネージャー – アプリに必要なライブラリ・フレームワークなどを インターネットからダウンロードしてくれる – Backbone.js は Underscore.js も必要だけど、まとめ て一緒にダウンロードしてくれる ● 最近、チュートリアルで Bower を使ってライ ブラリをダウンロードするように書いてあるも のも多いので、使い方に慣れておくといいかも
- 16. Bower ● Bower はGit を使うのでまずは Git のインス トールをします – git --version でバージョン番号が表示されれば OK! $ git --version git version 2.1.4
- 17. Bower ● Windows の人は“Git for Windows” をインストー ル – https://git-for-windows.github.io/からダウンロード – インストールオプションを一ヶ所変更してください
- 18. Bower ● Mac の方はXcode をインストールします – git --version と入力したらよしなにしてくれたと思 います
- 19. Bower ● git --versionが OK ならインストールに入ります ● インストールは簡単! – npm install -g bower
- 20. Bower ● 使い方もそんなに難しくない ● bowerinit でプロジェクトを作成する – いろいろと聞かれるけど、今日は適当で – さっきの簡易ウェブサーバーのディレクトリで試す $ bower init ? name: project1 ? version: 0.0.0 ? description: ? main file: ? what types of modules does this package expose? ? keywords: ...
- 21. Bower ● 試しに jQueryをインストール – bower install --save jquery ● bower_components ディレクトリにインストール されるので、見てみよう! $ bower install --save jquery bower cached git://github.com/jquery/jquery.git#2.1.4 bower validate 2.1.4 against git://github.com/jquery/jquery.git#* bower install jquery#2.1.4 jquery#2.1.4 bower_components/jquery
- 22. Bower ● 使うためには、index.html にscript 要素を書く <!doctype html> <html lang="ja"> <head> <meta charset="UTF-8"/> <title>Document</title> <script src="bower_components/jquery/dist/jquery.min.js"> </script> </head> <body> <h1>Bower のデモ</h1> <script> alert($('h1').text()); </script> </body> </html>
- 23. Bower ● Bower はインストールされたライブラリの復元 もできる ●bower.json ファイルを見ると、jquery の名前が あるので覚えておいて! { "name": "project1", "version": "0.0.0", … "dependencies": { "jquery": "~2.1.4" } }
- 24. Bower ● おもむろに bower_coomponentsディレクトリを 消してください! ● そしてライブラリを再インストールします – bower install ● bower.json ファイルに書かれているものがイン ストールされる $ bower install bower cached git://github.com/jquery/jquery.git#2.1.4 bower validate 2.1.4 against git://github.com/jquery/jquery.git#~2.1.4 bower install jquery#2.1.4 jquery#2.1.4 bower_components/jquery
- 25. Bower ● なんに使うの? と言われそうだけど... ●バージョン管理システムのリポジトリには bower.json だけ追加しておい て、bower_components は除外するという使い方 をします!
- 26. Bower ● Bower を使うと好きなライブラリ・フレームワーク を同じ方法でダウンロードできます ●index.html に組み込むのが面倒だけど、そういうと きは次に紹介する Yeoman 使うと良いです ● あんちょこ – bower list ← 現在インストールされている一覧 – bower search underscore ← パッケージを検索する – bower cache clean ← トラブったらとりあえずキャッシュ クリア!
- 27. アジェンダ ● 簡易ウェブサーバー http-serverを使う – ついでにライブラリ管理の Bower も紹介 ● Yeoman を使って本格開発 ● ブラウザーだけで完結する Plunker を使う
- 28.
- 29.
- 30.
- 31.
- 32.
- 33.
- 34.
- 35. Plunker ● http://plnkr.co/ にアクセスし、右上の“Sign with Github” ボタンをクリック!
- 36.
- 37.
- 38. Plunker ● “Launch theEditor” ボタンでアプリ作成を開始!
- 39.
- 40. Plunker ● “private plunk”を外すと公開できる – Private だと URL を知っている人だけがアクセスで きる
- 41.
- 42. Plunker ● 本 (?)のアイコンでライブラリを追加できる
- 43. Plunker ● 検索のところに “jquery”と入力すると... – 結果が!
- 44.
- 45.
- 46.
- 47. Plunker ● 左側で “scripts.js”を選択して、JavaScript を書 く!(function () { 'use strict'; alert('Hello!'); })();
- 48.
- 49.
- 50.
- 51.
- 52.
- 53. Plunker ● トップページに戻って “BrowsePlunks” をク リック!
- 54.
- 55.
- 56.
- 57.
- 58. Plunker ● フォークって何? – 食器の先が分かれているフォークです –元になるものから分岐しているのでそう呼ばれます – 分岐したついでに自分のものにします! ● フォークすると? – 元に影響なく自由に修正できるようになります – おもしろそうなものがあったらフォークして、ソース コードをいじってみましょう! – かなり勉強になります!
- 59. これ以外にも! ● これ以外にも色々あります – JSFiddle –CodePen – jsdo.it
- 60.
- 61.
- 62.
- 63. ブラウザーのみの開発環境 ● いろいろあるので、好のを見つけてください! ● 簡単に公開して人に見せられるのがいい! ●作品を公開している人がたくさんいるので参考 になる (と思う...) ● 今日の第二部のハンズオンは Plunker を使いま す – ちょっと重たいです! ごめんなさい!
- 64.