Recommended
More Related Content
What's hot
What's hot (20)
Viewers also liked
Viewers also liked (20)
Similar to HTML5 開発環境の紹介
Similar to HTML5 開発環境の紹介 (20)
HTML5 開発環境の紹介
- 3. 流石に何もなしはきついです ● file:// スキームだと動かないものもあります ● ライブラリのインストールが意外と大変です – HTML5 アプリなのでライブラリをたくさん使いま す
- 5. アジェンダ ● 簡易ウェブサーバー http-server を使う – ついでにライブラリ管理の Bower も紹介 ● Yeoman を使って本格開発 ● ブラウザーだけで完結する Plunker を使う
- 6. アジェンダ ● 簡易ウェブサーバー http-server を使う – ついでにライブラリ管理の Bower も紹介 ● Yeoman を使って本格開発 ● ブラウザーだけで完結する Plunker を使う
- 7. 簡易ウェブサーバー ● ウェブサーバーは別にレンタルサーバーやクラウド を借りなくても立ち上げられます! ● 昔は Apache を立ち上げたりしてたけど、結構大変 ● 最近は簡易ウェブサーバーとかいう、開発時に便利 なウェブサーバーが増えた! ● 大体各言語ごとにあるけど、今日は Node.js 用の http-server を使ってみる – HTML5 アプリ開発に重要なツールは Node.js 用が多いの でちょうどよい
- 8. 簡易ウェブサーバー ● 特徴 – 使いたい時だけ立ち上げる – 細かい設定はほとんどいらない
- 9. 簡易ウェブサーバー ● インストールは簡単! – npm install -g http-server – Mac で公式サイトからインストールした人は sudo つけないといけないかも
- 10. 簡易ウェブサーバー ● 使い方も簡単 – mkdir webapp1 ← 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 ● 使い方もそんなに難しくない ● bower init でプロジェクトを作成する – いろいろと聞かれるけど、今日は適当で – さっきの簡易ウェブサーバーのディレクトリで試す $ 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 を使う
- 29. もっと簡単なのないの?
- 32. Plunker
- 35. Plunker ● http://plnkr.co/ にアクセスし、右上の “Sign with Github” ボタンをクリック!
- 38. Plunker ● “Launch the Editor” ボタンでアプリ作成を開始!
- 40. Plunker ● “private plunk” を外すと公開できる – Private だと URL を知っている人だけがアクセスで きる
- 42. Plunker ● 本 (?) のアイコンでライブラリを追加できる
- 43. Plunker ● 検索のところに “jquery” と入力すると... – 結果が!
- 46. Plunker ● 追加できた!
- 47. Plunker ● 左側で “scripts.js” を選択して、JavaScript を書 く!(function () { 'use strict'; alert('Hello!'); })();
- 49. Plunker ● 動いた!
- 50. Plunker 簡単でしょ!
- 53. Plunker ● トップページに戻って “Browse Plunks” をク リック!
- 58. Plunker ● フォークって何? – 食器の先が分かれているフォークです – 元になるものから分岐しているのでそう呼ばれます – 分岐したついでに自分のものにします! ● フォークすると? – 元に影響なく自由に修正できるようになります – おもしろそうなものがあったらフォークして、ソース コードをいじってみましょう! – かなり勉強になります!
- 59. これ以外にも! ● これ以外にも色々あります – JSFiddle – CodePen – jsdo.it
- 61. CodePen ● http://codepen.io/ – HTML/CSS/JavaScript がいっぺんに表示できる
- 63. ブラウザーのみの開発環境 ● いろいろあるので、好のを見つけてください! ● 簡単に公開して人に見せられるのがいい! ● 作品を公開している人がたくさんいるので参考 になる (と思う...) ● 今日の第二部のハンズオンは Plunker を使いま す – ちょっと重たいです! ごめんなさい!
- 64. ご清聴ありがとうございました!