Suche senden
Hochladen
Ember.js導入
•
Als PPTX, PDF herunterladen
•
0 gefällt mir
•
605 views
teamcpaw
Folgen
ember.jsの導入となるべく簡単に噛み砕いた大まかな概念の説明。
Weniger lesen
Mehr lesen
Design
Melden
Teilen
Melden
Teilen
1 von 45
Jetzt herunterladen
Empfohlen
サーバ構築実践入門
サーバ構築実践入門
優之 田中
modern X86 environment
modern X86 environment
Shougo
neobundle.vimについて+おまけ
neobundle.vimについて+おまけ
Shougo
かなりすごい発表(かなり) at VimConf2014
かなりすごい発表(かなり) at VimConf2014
Sugoi Kanari
我が evil-mode を嫌いな理由 〜evil-mode の闇〜
我が evil-mode を嫌いな理由 〜evil-mode の闇〜
Shougo
Vimはこわくない
Vimはこわくない
Yuichi Watanabe
Ultimate completion environment with neocomplcache in vim
Ultimate completion environment with neocomplcache in vim
Shougo
Unite vim
Unite vim
Shougo
Empfohlen
サーバ構築実践入門
サーバ構築実践入門
優之 田中
modern X86 environment
modern X86 environment
Shougo
neobundle.vimについて+おまけ
neobundle.vimについて+おまけ
Shougo
かなりすごい発表(かなり) at VimConf2014
かなりすごい発表(かなり) at VimConf2014
Sugoi Kanari
我が evil-mode を嫌いな理由 〜evil-mode の闇〜
我が evil-mode を嫌いな理由 〜evil-mode の闇〜
Shougo
Vimはこわくない
Vimはこわくない
Yuichi Watanabe
Ultimate completion environment with neocomplcache in vim
Ultimate completion environment with neocomplcache in vim
Shougo
Unite vim
Unite vim
Shougo
Vim = VM
Vim = VM
Shougo
neovim = VM
neovim = VM
Shougo
Shougoの開発環境
Shougoの開発環境
Shougo
Wiiuでも使える動画サイトを作るには
Wiiuでも使える動画サイトを作るには
yowasou
BuddyPressの導入からカスタマイズまでの日記5
BuddyPressの導入からカスタマイズまでの日記5
Shoichi Otomo
Vimの魔術
Vimの魔術
Shuntaro Nishizawa
ローカル開発環境の構築をしよう VirtualBox + Vagrant
ローカル開発環境の構築をしよう VirtualBox + Vagrant
Kazuma Kimura
「とても小さいVim」vim tiny
「とても小さいVim」vim tiny
gu4
Raspberry pi on java 20130514
Raspberry pi on java 20130514
Masafumi Ohta
ssmjp-wireless-hack-with-macbook
ssmjp-wireless-hack-with-macbook
Kenta Nakanishi
暗黒美夢王とEmacs
暗黒美夢王とEmacs
Shougo
初心者Vimmerによるvim+rails開発
初心者Vimmerによるvim+rails開発
Daisuke Kikuchi
勉強会0614 vagrant
勉強会0614 vagrant
Yu Ito
X window managerで遊んでみた
X window managerで遊んでみた
Masahiko Hashimoto
Vimから見たemacs
Vimから見たemacs
Shougo
Vim の開発環境
Vim の開発環境
eagletmt
サーバを作ってみた (1)
サーバを作ってみた (1)
SeungYong Yoon
究極のディストリビューションUbuntu
究極のディストリビューションUbuntu
Kenichi Takahashi
Gorilla.vim#6
Gorilla.vim#6
MasatakaHigashijima
Iemoto hatamotoハンズオン
Iemoto hatamotoハンズオン
西村 州平
Windows Home Server リモート接続 環境設定
Windows Home Server リモート接続 環境設定
hirookun
Aspnet mvc 6の今を紹介
Aspnet mvc 6の今を紹介
Makoto Nishimura
Weitere ähnliche Inhalte
Was ist angesagt?
Vim = VM
Vim = VM
Shougo
neovim = VM
neovim = VM
Shougo
Shougoの開発環境
Shougoの開発環境
Shougo
Wiiuでも使える動画サイトを作るには
Wiiuでも使える動画サイトを作るには
yowasou
BuddyPressの導入からカスタマイズまでの日記5
BuddyPressの導入からカスタマイズまでの日記5
Shoichi Otomo
Vimの魔術
Vimの魔術
Shuntaro Nishizawa
ローカル開発環境の構築をしよう VirtualBox + Vagrant
ローカル開発環境の構築をしよう VirtualBox + Vagrant
Kazuma Kimura
「とても小さいVim」vim tiny
「とても小さいVim」vim tiny
gu4
Raspberry pi on java 20130514
Raspberry pi on java 20130514
Masafumi Ohta
ssmjp-wireless-hack-with-macbook
ssmjp-wireless-hack-with-macbook
Kenta Nakanishi
暗黒美夢王とEmacs
暗黒美夢王とEmacs
Shougo
初心者Vimmerによるvim+rails開発
初心者Vimmerによるvim+rails開発
Daisuke Kikuchi
勉強会0614 vagrant
勉強会0614 vagrant
Yu Ito
X window managerで遊んでみた
X window managerで遊んでみた
Masahiko Hashimoto
Vimから見たemacs
Vimから見たemacs
Shougo
Vim の開発環境
Vim の開発環境
eagletmt
サーバを作ってみた (1)
サーバを作ってみた (1)
SeungYong Yoon
究極のディストリビューションUbuntu
究極のディストリビューションUbuntu
Kenichi Takahashi
Gorilla.vim#6
Gorilla.vim#6
MasatakaHigashijima
Iemoto hatamotoハンズオン
Iemoto hatamotoハンズオン
西村 州平
Was ist angesagt?
(20)
Vim = VM
Vim = VM
neovim = VM
neovim = VM
Shougoの開発環境
Shougoの開発環境
Wiiuでも使える動画サイトを作るには
Wiiuでも使える動画サイトを作るには
BuddyPressの導入からカスタマイズまでの日記5
BuddyPressの導入からカスタマイズまでの日記5
Vimの魔術
Vimの魔術
ローカル開発環境の構築をしよう VirtualBox + Vagrant
ローカル開発環境の構築をしよう VirtualBox + Vagrant
「とても小さいVim」vim tiny
「とても小さいVim」vim tiny
Raspberry pi on java 20130514
Raspberry pi on java 20130514
ssmjp-wireless-hack-with-macbook
ssmjp-wireless-hack-with-macbook
暗黒美夢王とEmacs
暗黒美夢王とEmacs
初心者Vimmerによるvim+rails開発
初心者Vimmerによるvim+rails開発
勉強会0614 vagrant
勉強会0614 vagrant
X window managerで遊んでみた
X window managerで遊んでみた
Vimから見たemacs
Vimから見たemacs
Vim の開発環境
Vim の開発環境
サーバを作ってみた (1)
サーバを作ってみた (1)
究極のディストリビューションUbuntu
究極のディストリビューションUbuntu
Gorilla.vim#6
Gorilla.vim#6
Iemoto hatamotoハンズオン
Iemoto hatamotoハンズオン
Ähnlich wie Ember.js導入
Windows Home Server リモート接続 環境設定
Windows Home Server リモート接続 環境設定
hirookun
Aspnet mvc 6の今を紹介
Aspnet mvc 6の今を紹介
Makoto Nishimura
Idea+groovy on ubuntu
Idea+groovy on ubuntu
kyon mm
Osoljp201204
Osoljp201204
Masataka Tsukamoto
Nseg20120825
Nseg20120825
hiro345
Ansibleを使ってローカル開発環境を作ろう ( #PyLadiesTokyo Meetup )
Ansibleを使ってローカル開発環境を作ろう ( #PyLadiesTokyo Meetup )
Ai Makabi
Slide osc2013tokyo spring
Slide osc2013tokyo spring
Takuma Nakajima
Infinite Debian - Platform for mass-producing system every second
Infinite Debian - Platform for mass-producing system every second
Taisuke Yamada
初心者がOpenIndianaで自宅サーバを作ったよって話
初心者がOpenIndianaで自宅サーバを作ったよって話
Masataka Tsukamoto
Mojolicious::Liteを使ってみよう
Mojolicious::Liteを使ってみよう
charsbar
密着!わたしのコンソールアプリ開発環境
密着!わたしのコンソールアプリ開発環境
Fumihito Yokoyama
ブラウザだけで学ぶWebアプリ開発
ブラウザだけで学ぶWebアプリ開発
schoowebcampus
Itcamp長崎2012 capistrano
Itcamp長崎2012 capistrano
kumachang_LL
Prefixから始めるgentoo生活
Prefixから始めるgentoo生活
bontakun
Kubuntu あれこれ
Kubuntu あれこれ
suzunx
ゼロからはじめるKVM超入門
ゼロからはじめるKVM超入門
VirtualTech Japan Inc.
今時のDev opsの取り組み事例集
今時のDev opsの取り組み事例集
Wataru NOGUCHI
Ubuntu なひととき
Ubuntu なひととき
Hiroshi Chonan
Ansible ではじめるインフラのコード化入門
Ansible ではじめるインフラのコード化入門
Sho A
DebianとWordPressでハッピーになろう!
DebianとWordPressでハッピーになろう!
Jun Nogata
Ähnlich wie Ember.js導入
(20)
Windows Home Server リモート接続 環境設定
Windows Home Server リモート接続 環境設定
Aspnet mvc 6の今を紹介
Aspnet mvc 6の今を紹介
Idea+groovy on ubuntu
Idea+groovy on ubuntu
Osoljp201204
Osoljp201204
Nseg20120825
Nseg20120825
Ansibleを使ってローカル開発環境を作ろう ( #PyLadiesTokyo Meetup )
Ansibleを使ってローカル開発環境を作ろう ( #PyLadiesTokyo Meetup )
Slide osc2013tokyo spring
Slide osc2013tokyo spring
Infinite Debian - Platform for mass-producing system every second
Infinite Debian - Platform for mass-producing system every second
初心者がOpenIndianaで自宅サーバを作ったよって話
初心者がOpenIndianaで自宅サーバを作ったよって話
Mojolicious::Liteを使ってみよう
Mojolicious::Liteを使ってみよう
密着!わたしのコンソールアプリ開発環境
密着!わたしのコンソールアプリ開発環境
ブラウザだけで学ぶWebアプリ開発
ブラウザだけで学ぶWebアプリ開発
Itcamp長崎2012 capistrano
Itcamp長崎2012 capistrano
Prefixから始めるgentoo生活
Prefixから始めるgentoo生活
Kubuntu あれこれ
Kubuntu あれこれ
ゼロからはじめるKVM超入門
ゼロからはじめるKVM超入門
今時のDev opsの取り組み事例集
今時のDev opsの取り組み事例集
Ubuntu なひととき
Ubuntu なひととき
Ansible ではじめるインフラのコード化入門
Ansible ではじめるインフラのコード化入門
DebianとWordPressでハッピーになろう!
DebianとWordPressでハッピーになろう!
Ember.js導入
1.
Ember.js導入 ぱろっく
2.
自己紹介 • ぱろっくです • 最近はWeb屋さんみたいなことしてます
3.
今日やること • Ember.js入門
4.
Ember.jsとは • JavascriptのWEBフレームワーク • RESTfulなページがつくれます
5.
とりあえずやってみよう • 環境はubuntu14.04を想定しています。 • Macの人はubuntu
の後に導入するので待っ ててください。
6.
手順 • パソコンを起動する。
7.
手順 • ubuntuを起動する。 • ターミナルを開く。
8.
手順 • ubuntuを起動する。 • ターミナルを開く。 •
sudo apt-get install git
9.
手順 • ubuntuを起動する。 • ターミナルを開く。 •
sudo apt-get install git • sudo apt-get install nodejs
10.
手順 • ubuntuを起動する。 • ターミナルを開く。 •
sudo apt-get install git • sudo apt-get install nodejs • sudo update-alternatives --install /usr/bin/node node /usr/bin/nodejs 10
11.
手順 • sudo apt-get
install npm
12.
手順 • sudo apt-get
install npm • npm install ember-cli
13.
手順 • sudo apt-get
install npm • npm install ember-cli • これでember.jsが使えるようになりました。
14.
手順 • 適当にtestとかいう作業用のディレクトリを作 成してください。
15.
手順 • 適当にtestとかいう作業用のディレクトリを作 成してください。 • そこのディレクトリに移動してください。
16.
手順 • 適当にtestとかいう作業用のディレクトリを作 成してください。 • そこのディレクトリに移動してください。 •
ember new test-app
17.
手順 • 適当にtestとかいう作業用のディレクトリを作 成してください。 • そこのディレクトリに移動してください。 •
ember new test-app • これでアプリケーションができました。
18.
手順 • ember server
(sでも可) • ブラウザでlocalhost:4200にアクセス • 無事起動できたことが確認できると思います
19.
手順(Mac用) • brew install
nodebrew
20.
手順(Mac用) • brew install
nodebrew • export PATH=$HOME/.nodebrew/current/bin:$PATH
21.
手順(Mac用) • brew install
nodebrew • export PATH=$HOME/.nodebrew/current/bin:$PATH • nodebrew install-binary v0.12.4
22.
手順(Mac用) • brew install
nodebrew • export PATH=$HOME/.nodebrew/current/bin:$PATH • nodebrew install-binary v0.12.4 • nodebrew use v0.12.4
23.
手順(Mac用) • brew install
nodebrew • export PATH=$HOME/.nodebrew/current/bin:$PATH • nodebrew install-binary v0.12.4 • nodebrew use v0.12.4 • npm install –g npm
24.
手順(Mac用) • brew install
nodebrew • export PATH=$HOME/.nodebrew/current/bin:$PATH • nodebrew install-binary v0.12.4 • nodebrew use v0.12.4 • npm install –g npm 以上でnode npmは入りました。
25.
手順(Mac用) • npm install
-g ember-cli • ディレクトリ適当に作って移動 • ember new test-app • ember server • ブラウザでlocalhost:4200にアクセス • 以上です
26.
ember.jsの仕組み
27.
ember.jsの仕組み • 日本語の文献がない! • あってもめっちゃくちゃ古い!
28.
ember.jsの仕組み • 日本語の文献がない! • あってもめっちゃくちゃ古い! •
ということで公式の英語ページから図をお借 りしてたぶんあっているだろうという説明をし ていく
29.
大まかな概念 1.要求されたアドレスに合ったページをrouter.js が探してきてくれる
30.
大まかな概念 1.要求されたアドレスに合ったページをrouterが 探してきてくれる 2.route handlerってやつが必要なデータとかを Modelとかからデータを持ってくる
31.
大まかな概念 1.要求されたアドレスに合ったページをrouterが 探してきてくれる 2.route handlerってやつが必要なデータとかを Modelとかからデータを持ってくる 3.templateで書かれたhbsファイル(htmlファイ ルみたいなもの)が表示される
32.
大まかな概念 1.要求されたアドレスに合ったページをrouterが 探してきてくれる 2.route handlerってやつが必要なデータとかを Modelとかからデータを持ってくる 3.templateで書かれたhbsファイル(htmlファイ ルみたいなもの)が表示される ※hbs(handlebars)は別の技術なので今日は詳 しくは解説しません。
33.
ディレクトリ |--app |--bower_components |--config |--dist |--node_modules |--public |--tests |--tmp |--vendor
34.
ディレクトリ |--app |--bower_components |--config |--dist |--node_modules |--public |--tests |--tmp |--vendor
35.
appの中のディレクトリ controllers/ index.html router.js styles/ components/ helpers/ models/ routes/ templates/
36.
templates • hbsファイルが置いてある。 • application.hbsがすべてのページに出力され るもので、ヘッダーとフッダーのような固定し たいものはここに書く。
37.
templates • hbsファイルが置いてある。 • application.hbsがすべてのページに出力され るもので、ヘッダーとフッダーのような固定し たいものはここに書く。 •
では複数のページを作ってみましょう。
38.
新しいページを作ろう • ember generate
route index • ↑でindexというページを勝手に作成してくれ るはず。 • lsなどでindex.hbsが増えているのを確認して みよう。
39.
新しいページを作ろう • ember generate
route index • ↑でindexというページを勝手に作成してくれ るはず。 • lsなどでindex.hbsが増えているのを確認して みよう。 • index.hbsになにか適当に書き加えよう。 (htmlと書き方全く一緒でok)
40.
余談 • hbsのリファレンス:http://handlebarsjs.com/
41.
新しいページを作ろう • ember generate
route about • ↑さっきのとは別のページをもう一つ作成す る。
42.
新しいページを作ろう • ember generate
route about • ↑さっきのとは別のページをもう一つ作成す る。 • ember serverで動かす。
43.
新しいページを作ろう • ember generate
route about • ↑さっきのとは別のページをもう一つ作成す る。 • ember serverで動かす。 • localhost:4200/aboutにアクセス
44.
あとは実演
45.
Ember.js便利ですね! • お疲れ様でした〜。
Jetzt herunterladen