Submit Search
Upload
HTML5 開発環境の紹介
•
Download as ODP, PDF
•
1 like
•
4,351 views
T
tomo_masakura
Follow
html5jk 勉強会 #1 はじめての HTML5 アプリ開発 その三
Read less
Read more
Technology
Report
Share
Report
Share
1 of 64
Download now
Recommended
HTML5 アプリ開発
HTML5 アプリ開発
tomo_masakura
今流行りのウェブアプリ開発環境Yeoman
今流行りのウェブアプリ開発環境Yeoman
tomo_masakura
HTML5 のお話
HTML5 のお話
tomo_masakura
業務アプリケーションにおけるモダンWeb開発の現状ーHTML5開発って簡単なの?
業務アプリケーションにおけるモダンWeb開発の現状ーHTML5開発って簡単なの?
Fumio SAGAWA
Pinoco phptal-phpcon-kansai
Pinoco phptal-phpcon-kansai
Hisateru Tanaka
エンジニアの為のWordPress入門 〜WordPressはWebAppプラットフォームです〜
エンジニアの為のWordPress入門 〜WordPressはWebAppプラットフォームです〜
Yuji Nojima
【Camphor ×サイボウズ】selenium勉強会
【Camphor ×サイボウズ】selenium勉強会
Yuki Okada
HTML5 & The Web Platform
HTML5 & The Web Platform
Masataka Yakura
Recommended
HTML5 アプリ開発
HTML5 アプリ開発
tomo_masakura
今流行りのウェブアプリ開発環境Yeoman
今流行りのウェブアプリ開発環境Yeoman
tomo_masakura
HTML5 のお話
HTML5 のお話
tomo_masakura
業務アプリケーションにおけるモダンWeb開発の現状ーHTML5開発って簡単なの?
業務アプリケーションにおけるモダンWeb開発の現状ーHTML5開発って簡単なの?
Fumio SAGAWA
Pinoco phptal-phpcon-kansai
Pinoco phptal-phpcon-kansai
Hisateru Tanaka
エンジニアの為のWordPress入門 〜WordPressはWebAppプラットフォームです〜
エンジニアの為のWordPress入門 〜WordPressはWebAppプラットフォームです〜
Yuji Nojima
【Camphor ×サイボウズ】selenium勉強会
【Camphor ×サイボウズ】selenium勉強会
Yuki Okada
HTML5 & The Web Platform
HTML5 & The Web Platform
Masataka Yakura
SeleniumIDEとSelenium WebDriver × Node.js Seleniumで業務効率化する15分
SeleniumIDEとSelenium WebDriver × Node.js Seleniumで業務効率化する15分
松田 千尋
Web Platform -- Moving Forward!
Web Platform -- Moving Forward!
Masataka Yakura
がんばらなくても C# で Single Page Web アプリケーションが書けてしまう「Blazor」とは
がんばらなくても C# で Single Page Web アプリケーションが書けてしまう「Blazor」とは
Jun-ichi Sakamoto
いまさら聞けない!?Backbone.js 超入門
いまさら聞けない!?Backbone.js 超入門
Kohei Kadowaki
【B-1】kintoneでお手軽コールセンター!
【B-1】kintoneでお手軽コールセンター!
Sakae Saito
oEmbed と Text::Hatena
oEmbed と Text::Hatena
Yasuhiro Onishi
HTML5 入門
HTML5 入門
NOAN
C# で Single Page Web アプリが開発できるフレームワーク&開発環境 「Blazor」 ― その概要と Web アプリ開発者にもたらす利点
C# で Single Page Web アプリが開発できるフレームワーク&開発環境 「Blazor」 ― その概要と Web アプリ開発者にもたらす利点
Jun-ichi Sakamoto
HTML5開発最前線
HTML5開発最前線
yoshikawa_t
WebComponentsとPolymerを使ってみた
WebComponentsとPolymerを使ってみた
Nakazawa Yuichi
Web frontend performance tuning
Web frontend performance tuning
ssuser3c214d
オープンソースで始めるオフラインアプリケーション開発入門
オープンソースで始めるオフラインアプリケーション開発入門
Fumio SAGAWA
今からハジメるHTML5マークアップ
今からハジメるHTML5マークアップ
SwapSkills
Angular1&2
Angular1&2
Kenichi Kanai
イマドキのフロントエンドエンジニアの道具箱
イマドキのフロントエンドエンジニアの道具箱
Fumio SAGAWA
WordPress プラグイン Infinite Scroll を試してみた
WordPress プラグイン Infinite Scroll を試してみた
Yuji Nojima
Mojoliciousでつくる! Webアプリ入門
Mojoliciousでつくる! Webアプリ入門
Yusuke Wada
Hatena blogdevelopmentflow
Hatena blogdevelopmentflow
Yasuhiro Onishi
第4回concrete5京都勉強会 〜まだまだ遅くない!基礎からガッチリ使いこなそうconcrete5〜
第4回concrete5京都勉強会 〜まだまだ遅くない!基礎からガッチリ使いこなそうconcrete5〜
Yuzuru Sano
HTML5, きちんと。
HTML5, きちんと。
Masataka Yakura
Yeomanではじめる爆速webアプリ開発
Yeomanではじめる爆速webアプリ開発
Masakazu Muraoka
SPAに必要なJavaScriptFrameWork
SPAに必要なJavaScriptFrameWork
Mizuho Sakamaki
More Related Content
What's hot
SeleniumIDEとSelenium WebDriver × Node.js Seleniumで業務効率化する15分
SeleniumIDEとSelenium WebDriver × Node.js Seleniumで業務効率化する15分
松田 千尋
Web Platform -- Moving Forward!
Web Platform -- Moving Forward!
Masataka Yakura
がんばらなくても C# で Single Page Web アプリケーションが書けてしまう「Blazor」とは
がんばらなくても C# で Single Page Web アプリケーションが書けてしまう「Blazor」とは
Jun-ichi Sakamoto
いまさら聞けない!?Backbone.js 超入門
いまさら聞けない!?Backbone.js 超入門
Kohei Kadowaki
【B-1】kintoneでお手軽コールセンター!
【B-1】kintoneでお手軽コールセンター!
Sakae Saito
oEmbed と Text::Hatena
oEmbed と Text::Hatena
Yasuhiro Onishi
HTML5 入門
HTML5 入門
NOAN
C# で Single Page Web アプリが開発できるフレームワーク&開発環境 「Blazor」 ― その概要と Web アプリ開発者にもたらす利点
C# で Single Page Web アプリが開発できるフレームワーク&開発環境 「Blazor」 ― その概要と Web アプリ開発者にもたらす利点
Jun-ichi Sakamoto
HTML5開発最前線
HTML5開発最前線
yoshikawa_t
WebComponentsとPolymerを使ってみた
WebComponentsとPolymerを使ってみた
Nakazawa Yuichi
Web frontend performance tuning
Web frontend performance tuning
ssuser3c214d
オープンソースで始めるオフラインアプリケーション開発入門
オープンソースで始めるオフラインアプリケーション開発入門
Fumio SAGAWA
今からハジメるHTML5マークアップ
今からハジメるHTML5マークアップ
SwapSkills
Angular1&2
Angular1&2
Kenichi Kanai
イマドキのフロントエンドエンジニアの道具箱
イマドキのフロントエンドエンジニアの道具箱
Fumio SAGAWA
WordPress プラグイン Infinite Scroll を試してみた
WordPress プラグイン Infinite Scroll を試してみた
Yuji Nojima
Mojoliciousでつくる! Webアプリ入門
Mojoliciousでつくる! Webアプリ入門
Yusuke Wada
Hatena blogdevelopmentflow
Hatena blogdevelopmentflow
Yasuhiro Onishi
第4回concrete5京都勉強会 〜まだまだ遅くない!基礎からガッチリ使いこなそうconcrete5〜
第4回concrete5京都勉強会 〜まだまだ遅くない!基礎からガッチリ使いこなそうconcrete5〜
Yuzuru Sano
HTML5, きちんと。
HTML5, きちんと。
Masataka Yakura
What's hot
(20)
SeleniumIDEとSelenium WebDriver × Node.js Seleniumで業務効率化する15分
SeleniumIDEとSelenium WebDriver × Node.js Seleniumで業務効率化する15分
Web Platform -- Moving Forward!
Web Platform -- Moving Forward!
がんばらなくても C# で Single Page Web アプリケーションが書けてしまう「Blazor」とは
がんばらなくても C# で Single Page Web アプリケーションが書けてしまう「Blazor」とは
いまさら聞けない!?Backbone.js 超入門
いまさら聞けない!?Backbone.js 超入門
【B-1】kintoneでお手軽コールセンター!
【B-1】kintoneでお手軽コールセンター!
oEmbed と Text::Hatena
oEmbed と Text::Hatena
HTML5 入門
HTML5 入門
C# で Single Page Web アプリが開発できるフレームワーク&開発環境 「Blazor」 ― その概要と Web アプリ開発者にもたらす利点
C# で Single Page Web アプリが開発できるフレームワーク&開発環境 「Blazor」 ― その概要と Web アプリ開発者にもたらす利点
HTML5開発最前線
HTML5開発最前線
WebComponentsとPolymerを使ってみた
WebComponentsとPolymerを使ってみた
Web frontend performance tuning
Web frontend performance tuning
オープンソースで始めるオフラインアプリケーション開発入門
オープンソースで始めるオフラインアプリケーション開発入門
今からハジメるHTML5マークアップ
今からハジメるHTML5マークアップ
Angular1&2
Angular1&2
イマドキのフロントエンドエンジニアの道具箱
イマドキのフロントエンドエンジニアの道具箱
WordPress プラグイン Infinite Scroll を試してみた
WordPress プラグイン Infinite Scroll を試してみた
Mojoliciousでつくる! Webアプリ入門
Mojoliciousでつくる! Webアプリ入門
Hatena blogdevelopmentflow
Hatena blogdevelopmentflow
第4回concrete5京都勉強会 〜まだまだ遅くない!基礎からガッチリ使いこなそうconcrete5〜
第4回concrete5京都勉強会 〜まだまだ遅くない!基礎からガッチリ使いこなそうconcrete5〜
HTML5, きちんと。
HTML5, きちんと。
Viewers also liked
Yeomanではじめる爆速webアプリ開発
Yeomanではじめる爆速webアプリ開発
Masakazu Muraoka
SPAに必要なJavaScriptFrameWork
SPAに必要なJavaScriptFrameWork
Mizuho Sakamaki
Async awaitでの繰り返し処理についての小話
Async awaitでの繰り返し処理についての小話
Masakazu Muraoka
Yeoman RIAビルドツール超入門
Yeoman RIAビルドツール超入門
Masakazu Muraoka
ヨーマンおじさんと戯れる会
ヨーマンおじさんと戯れる会
Katsumi Honda
フロントエンドのツール Yeoman を勘違いしていた
フロントエンドのツール Yeoman を勘違いしていた
girigiribauer
Facebookページの投稿に、いいね!した友達やファンを集計するアプリbooshaka
Facebookページの投稿に、いいね!した友達やファンを集計するアプリbooshaka
新潟コンサルタント横田秀珠
Adobe Animate CCを触ってみた
Adobe Animate CCを触ってみた
Yusuke Kano
クリスマス直前!HTML5 で作る♥はじめての iOS & Android アプリ開発
クリスマス直前!HTML5 で作る♥はじめての iOS & Android アプリ開発
Osamu Monoe
動くサイトにプログラムが必要な時代は終わった。〜デザイナー歓喜のAnimate CCとSpineの紹介
動くサイトにプログラムが必要な時代は終わった。〜デザイナー歓喜のAnimate CCとSpineの紹介
utweb
RESTful開発フロントエンド編(SPA・AltJS・フレームワーク)
RESTful開発フロントエンド編(SPA・AltJS・フレームワーク)
K Tsukada
Visual Studio 2013 と HTML5 で実現するマルチデバイス/マルチプラットフォーム アプリの開発
Visual Studio 2013 と HTML5 で実現するマルチデバイス/マルチプラットフォーム アプリの開発
Osamu Monoe
はじめようGit
はじめようGit
techscore
15分でわかるGit入門
15分でわかるGit入門
to_ueda
Gitのよく使うコマンド
Gitのよく使うコマンド
YUKI Kaoru
Riot.jsに触れてみた話
Riot.jsに触れてみた話
エンジニア勉強会 エスキュービズム
はじめてのGit forデザイナー&コーダー
はじめてのGit forデザイナー&コーダー
Saeko Yamamoto
Riot.jsを用いたweb開発 takusuta tech conf #1
Riot.jsを用いたweb開発 takusuta tech conf #1
Keisuke Imai
CreateJS勉強会 (第8回)「Adobe Animate CCで制作する HTML5 Canvas入門編」
CreateJS勉強会 (第8回)「Adobe Animate CCで制作する HTML5 Canvas入門編」
Atsushi Kaga
いつやるの?Git入門 v1.1.0
いつやるの?Git入門 v1.1.0
Masakazu Matsushita
Viewers also liked
(20)
Yeomanではじめる爆速webアプリ開発
Yeomanではじめる爆速webアプリ開発
SPAに必要なJavaScriptFrameWork
SPAに必要なJavaScriptFrameWork
Async awaitでの繰り返し処理についての小話
Async awaitでの繰り返し処理についての小話
Yeoman RIAビルドツール超入門
Yeoman RIAビルドツール超入門
ヨーマンおじさんと戯れる会
ヨーマンおじさんと戯れる会
フロントエンドのツール Yeoman を勘違いしていた
フロントエンドのツール Yeoman を勘違いしていた
Facebookページの投稿に、いいね!した友達やファンを集計するアプリbooshaka
Facebookページの投稿に、いいね!した友達やファンを集計するアプリbooshaka
Adobe Animate CCを触ってみた
Adobe Animate CCを触ってみた
クリスマス直前!HTML5 で作る♥はじめての iOS & Android アプリ開発
クリスマス直前!HTML5 で作る♥はじめての iOS & Android アプリ開発
動くサイトにプログラムが必要な時代は終わった。〜デザイナー歓喜のAnimate CCとSpineの紹介
動くサイトにプログラムが必要な時代は終わった。〜デザイナー歓喜のAnimate CCとSpineの紹介
RESTful開発フロントエンド編(SPA・AltJS・フレームワーク)
RESTful開発フロントエンド編(SPA・AltJS・フレームワーク)
Visual Studio 2013 と HTML5 で実現するマルチデバイス/マルチプラットフォーム アプリの開発
Visual Studio 2013 と HTML5 で実現するマルチデバイス/マルチプラットフォーム アプリの開発
はじめようGit
はじめようGit
15分でわかるGit入門
15分でわかるGit入門
Gitのよく使うコマンド
Gitのよく使うコマンド
Riot.jsに触れてみた話
Riot.jsに触れてみた話
はじめてのGit forデザイナー&コーダー
はじめてのGit forデザイナー&コーダー
Riot.jsを用いたweb開発 takusuta tech conf #1
Riot.jsを用いたweb開発 takusuta tech conf #1
CreateJS勉強会 (第8回)「Adobe Animate CCで制作する HTML5 Canvas入門編」
CreateJS勉強会 (第8回)「Adobe Animate CCで制作する HTML5 Canvas入門編」
いつやるの?Git入門 v1.1.0
いつやるの?Git入門 v1.1.0
Similar to HTML5 開発環境の紹介
ネットワークエンジニアのための Puppet / Chef
ネットワークエンジニアのための Puppet / Chef
npsg
アプリ屋もDockerをドカドカ使おう ~ Docker入門
アプリ屋もDockerをドカドカ使おう ~ Docker入門
Hori Tasuku
20140523 jQuery基礎 (HTML5ビギナーズ)
20140523 jQuery基礎 (HTML5ビギナーズ)
Daisuke Yamazaki
多分モダンなWebアプリ開発
多分モダンなWebアプリ開発
tak-nakamura
WordPressとjQuery
WordPressとjQuery
Seto Takahiro
Windows Azure PHP Tips
Windows Azure PHP Tips
Microsoft Openness Japan
Bracketsを使おう
Bracketsを使おう
Yossy Taka
はてなにおける継続的デプロイメントの現状と Docker の導入
はてなにおける継続的デプロイメントの現状と Docker の導入
Yu Nobuoka
HTML5の前のJavaScript入門
HTML5の前のJavaScript入門
Hiroki Toyokawa
「html5 boilerplate」から考える、これからのマークアップ
「html5 boilerplate」から考える、これからのマークアップ
Yasuhito Yabe
Composer による依存管理 と Packagist によるライブラリの公開
Composer による依存管理 と Packagist によるライブラリの公開
Shogo Kawahara
Using Windows Azure
Using Windows Azure
Shinji Tanaka
はじめてのコンテナーDocker & Windows & Linux
はじめてのコンテナーDocker & Windows & Linux
Kazushi Kamegawa
JavaScript And Keywords
JavaScript And Keywords
uupaa
JavaScript on GitHub (#kyotojs)
JavaScript on GitHub (#kyotojs)
y_uuki
高速!Clojure Web 開発入門
高速!Clojure Web 開発入門
Kazuki Tsutsumi
はじめてのAzure Web App for Containers! -コンテナの基礎から DevOps 環境の構築まで-
はじめてのAzure Web App for Containers! -コンテナの基礎から DevOps 環境の構築まで-
Saki Homma
Dockerライフサイクルの基礎 地雷を踏み抜けろ!
Dockerライフサイクルの基礎 地雷を踏み抜けろ!
Masahito Zembutsu
Scala 初めての人が Heroku で Web アプリを公開するまで
Scala 初めての人が Heroku で Web アプリを公開するまで
Hideaki Miyake
リモートデバッグツール Weinerをつかってみた
リモートデバッグツール Weinerをつかってみた
Masakazu Muraoka
Similar to HTML5 開発環境の紹介
(20)
ネットワークエンジニアのための Puppet / Chef
ネットワークエンジニアのための Puppet / Chef
アプリ屋もDockerをドカドカ使おう ~ Docker入門
アプリ屋もDockerをドカドカ使おう ~ Docker入門
20140523 jQuery基礎 (HTML5ビギナーズ)
20140523 jQuery基礎 (HTML5ビギナーズ)
多分モダンなWebアプリ開発
多分モダンなWebアプリ開発
WordPressとjQuery
WordPressとjQuery
Windows Azure PHP Tips
Windows Azure PHP Tips
Bracketsを使おう
Bracketsを使おう
はてなにおける継続的デプロイメントの現状と Docker の導入
はてなにおける継続的デプロイメントの現状と Docker の導入
HTML5の前のJavaScript入門
HTML5の前のJavaScript入門
「html5 boilerplate」から考える、これからのマークアップ
「html5 boilerplate」から考える、これからのマークアップ
Composer による依存管理 と Packagist によるライブラリの公開
Composer による依存管理 と Packagist によるライブラリの公開
Using Windows Azure
Using Windows Azure
はじめてのコンテナーDocker & Windows & Linux
はじめてのコンテナーDocker & Windows & Linux
JavaScript And Keywords
JavaScript And Keywords
JavaScript on GitHub (#kyotojs)
JavaScript on GitHub (#kyotojs)
高速!Clojure Web 開発入門
高速!Clojure Web 開発入門
はじめてのAzure Web App for Containers! -コンテナの基礎から DevOps 環境の構築まで-
はじめてのAzure Web App for Containers! -コンテナの基礎から DevOps 環境の構築まで-
Dockerライフサイクルの基礎 地雷を踏み抜けろ!
Dockerライフサイクルの基礎 地雷を踏み抜けろ!
Scala 初めての人が Heroku で Web アプリを公開するまで
Scala 初めての人が Heroku で Web アプリを公開するまで
リモートデバッグツール Weinerをつかってみた
リモートデバッグツール Weinerをつかってみた
HTML5 開発環境の紹介
1.
HTML5 開発環境の紹介
2.
HTML5 アプリの開発環境なんて メモ帳とブラウザーだけで十分だと思ってません か?
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.
簡易ウェブサーバー ● インストールは簡単! – 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 を使う
28.
Yeoman 本日は簡単な紹介だけ! 別でやります
29.
もっと簡単なのないの?
30.
ブラウザーだけで完結するのがたくさんあります
31.
本日はその中の一つ Plunker を紹介します (第二部ではこれを使います)
32.
Plunker
33.
Plunker ● こんな感じでブラウザー一つあればアプリが作 れちゃいます
34.
Plunker 皆さん、一緒に使ってみましょう!
35.
Plunker ● http://plnkr.co/ にアクセスし、右上の
“Sign with Github” ボタンをクリック!
36.
Plunker ● GitHub のアカウント認証が使えるようにしま す
37.
Plunker ● 右上に自分のアカウント名が表示されれば OK!
38.
Plunker ● “Launch the
Editor” ボタンでアプリ作成を開始!
39.
Plunker ● 左側でファイルを選んで真ん中で編集する
40.
Plunker ● “private plunk”
を外すと公開できる – Private だと URL を知っている人だけがアクセスで きる
41.
Plunker ● “Run” か右の目アイコンでプレビューできる
42.
Plunker ● 本 (?)
のアイコンでライブラリを追加できる
43.
Plunker ● 検索のところに “jquery”
と入力すると... – 結果が!
44.
Plunker ● インストールしたいバージョンのボタンをク リック
45.
Plunker ● “Add” ボタンをクリック
46.
Plunker ● 追加できた!
47.
Plunker ● 左側で “scripts.js”
を選択して、JavaScript を書 く!(function () { 'use strict'; alert('Hello!'); })();
48.
Plunker ● “Run” ボタンをクリック!
49.
Plunker ● 動いた!
50.
Plunker 簡単でしょ!
51.
Plunker ちょこっとしたものを作って 人に見せたり
52.
Plunker 勉強用にちょうどいい!
53.
Plunker ● トップページに戻って “Browse
Plunks” をク リック!
54.
Plunker ● 他人の作品が見れる!
55.
Plunker ● 良さげなのを探して... 編集をクリック
56.
Plunker ● “Fork” ボタンをクリック
57.
Plunker ● フォークしたのであなたのものに
58.
Plunker ● フォークって何? – 食器の先が分かれているフォークです –
元になるものから分岐しているのでそう呼ばれます – 分岐したついでに自分のものにします! ● フォークすると? – 元に影響なく自由に修正できるようになります – おもしろそうなものがあったらフォークして、ソース コードをいじってみましょう! – かなり勉強になります!
59.
これ以外にも! ● これ以外にも色々あります – JSFiddle –
CodePen – jsdo.it
60.
JSFiddle ● https://jsfiddle.net/ – 軽い気がする...
61.
CodePen ● http://codepen.io/ – HTML/CSS/JavaScript
がいっぺんに表示できる
62.
jsdoit ● http://jsdo.it/ – 面白法人カヤックが作ったので... –
日本語!
63.
ブラウザーのみの開発環境 ● いろいろあるので、好のを見つけてください! ● 簡単に公開して人に見せられるのがいい! ●
作品を公開している人がたくさんいるので参考 になる (と思う...) ● 今日の第二部のハンズオンは Plunker を使いま す – ちょっと重たいです! ごめんなさい!
64.
ご清聴ありがとうございました!
Download now