Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

Ember.js導入

521 views

Published on

ember.jsの導入となるべく簡単に噛み砕いた大まかな概念の説明。

Published in: Design
  • Hello! Who wants to chat with me? Nu photos with me here http://bit.ly/helenswee
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here
  • Be the first to like this

Ember.js導入

  1. 1. Ember.js導入 ぱろっく
  2. 2. 自己紹介 • ぱろっくです • 最近はWeb屋さんみたいなことしてます
  3. 3. 今日やること • Ember.js入門
  4. 4. Ember.jsとは • JavascriptのWEBフレームワーク • RESTfulなページがつくれます
  5. 5. とりあえずやってみよう • 環境はubuntu14.04を想定しています。 • Macの人はubuntu の後に導入するので待っ ててください。
  6. 6. 手順 • パソコンを起動する。
  7. 7. 手順 • ubuntuを起動する。 • ターミナルを開く。
  8. 8. 手順 • ubuntuを起動する。 • ターミナルを開く。 • sudo apt-get install git
  9. 9. 手順 • ubuntuを起動する。 • ターミナルを開く。 • sudo apt-get install git • sudo apt-get install nodejs
  10. 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. 11. 手順 • sudo apt-get install npm
  12. 12. 手順 • sudo apt-get install npm • npm install ember-cli
  13. 13. 手順 • sudo apt-get install npm • npm install ember-cli • これでember.jsが使えるようになりました。
  14. 14. 手順 • 適当にtestとかいう作業用のディレクトリを作 成してください。
  15. 15. 手順 • 適当にtestとかいう作業用のディレクトリを作 成してください。 • そこのディレクトリに移動してください。
  16. 16. 手順 • 適当にtestとかいう作業用のディレクトリを作 成してください。 • そこのディレクトリに移動してください。 • ember new test-app
  17. 17. 手順 • 適当にtestとかいう作業用のディレクトリを作 成してください。 • そこのディレクトリに移動してください。 • ember new test-app • これでアプリケーションができました。
  18. 18. 手順 • ember server (sでも可) • ブラウザでlocalhost:4200にアクセス • 無事起動できたことが確認できると思います
  19. 19. 手順(Mac用) • brew install nodebrew
  20. 20. 手順(Mac用) • brew install nodebrew • export PATH=$HOME/.nodebrew/current/bin:$PATH
  21. 21. 手順(Mac用) • brew install nodebrew • export PATH=$HOME/.nodebrew/current/bin:$PATH • nodebrew install-binary v0.12.4
  22. 22. 手順(Mac用) • brew install nodebrew • export PATH=$HOME/.nodebrew/current/bin:$PATH • nodebrew install-binary v0.12.4 • nodebrew use v0.12.4
  23. 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. 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. 25. 手順(Mac用) • npm install -g ember-cli • ディレクトリ適当に作って移動 • ember new test-app • ember server • ブラウザでlocalhost:4200にアクセス • 以上です
  26. 26. ember.jsの仕組み
  27. 27. ember.jsの仕組み • 日本語の文献がない! • あってもめっちゃくちゃ古い!
  28. 28. ember.jsの仕組み • 日本語の文献がない! • あってもめっちゃくちゃ古い! • ということで公式の英語ページから図をお借 りしてたぶんあっているだろうという説明をし ていく
  29. 29. 大まかな概念 1.要求されたアドレスに合ったページをrouter.js が探してきてくれる
  30. 30. 大まかな概念 1.要求されたアドレスに合ったページをrouterが 探してきてくれる 2.route handlerってやつが必要なデータとかを Modelとかからデータを持ってくる
  31. 31. 大まかな概念 1.要求されたアドレスに合ったページをrouterが 探してきてくれる 2.route handlerってやつが必要なデータとかを Modelとかからデータを持ってくる 3.templateで書かれたhbsファイル(htmlファイ ルみたいなもの)が表示される
  32. 32. 大まかな概念 1.要求されたアドレスに合ったページをrouterが 探してきてくれる 2.route handlerってやつが必要なデータとかを Modelとかからデータを持ってくる 3.templateで書かれたhbsファイル(htmlファイ ルみたいなもの)が表示される ※hbs(handlebars)は別の技術なので今日は詳 しくは解説しません。
  33. 33. ディレクトリ |--app |--bower_components |--config |--dist |--node_modules |--public |--tests |--tmp |--vendor
  34. 34. ディレクトリ |--app |--bower_components |--config |--dist |--node_modules |--public |--tests |--tmp |--vendor
  35. 35. appの中のディレクトリ controllers/ index.html router.js styles/ components/ helpers/ models/ routes/ templates/
  36. 36. templates • hbsファイルが置いてある。 • application.hbsがすべてのページに出力され るもので、ヘッダーとフッダーのような固定し たいものはここに書く。
  37. 37. templates • hbsファイルが置いてある。 • application.hbsがすべてのページに出力され るもので、ヘッダーとフッダーのような固定し たいものはここに書く。 • では複数のページを作ってみましょう。
  38. 38. 新しいページを作ろう • ember generate route index • ↑でindexというページを勝手に作成してくれ るはず。 • lsなどでindex.hbsが増えているのを確認して みよう。
  39. 39. 新しいページを作ろう • ember generate route index • ↑でindexというページを勝手に作成してくれ るはず。 • lsなどでindex.hbsが増えているのを確認して みよう。 • index.hbsになにか適当に書き加えよう。 (htmlと書き方全く一緒でok)
  40. 40. 余談 • hbsのリファレンス:http://handlebarsjs.com/
  41. 41. 新しいページを作ろう • ember generate route about • ↑さっきのとは別のページをもう一つ作成す る。
  42. 42. 新しいページを作ろう • ember generate route about • ↑さっきのとは別のページをもう一つ作成す る。 • ember serverで動かす。
  43. 43. 新しいページを作ろう • ember generate route about • ↑さっきのとは別のページをもう一つ作成す る。 • ember serverで動かす。 • localhost:4200/aboutにアクセス
  44. 44. あとは実演
  45. 45. Ember.js便利ですね! • お疲れ様でした〜。

×