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.

CAMPHOR- 土曜講座 2013/06/15

695 views

Published on

CAMPHOR- 土曜講座 2013/06/15
node.js + express の開発を簡単に解説します

Published in: Technology
  • Be the first to comment

  • Be the first to like this

CAMPHOR- 土曜講座 2013/06/15

  1. 1. Hello! Node.jsCAMPHOR- 土曜講座 2013 6/15廣瀬達也
  2. 2. 目標Hello Node.js ! - node.js を導入しよう!Hello Express ! - express を導入しよう!Hello Jade ! - jade を使ってみよう!Hello Socket.io - Socket.io を使ってみよう!
  3. 3. とにかく今日はHELLO!!
  4. 4. Hello Node.js !Node.js って何?Node.jsは高速でスケーラブルなネットワークアプリケーションを 簡単に構築するためにChrome の JavaScript 実行環境 上に構築されたプラットフォームです。 Node.jsはイベント駆動とノンブロッキング I/O モデルを使用することにより 軽量・効率的で、分散されたデバイスにまたがるデータ集約的なリアルタイム アプリケーションに最適です。(公式ドキュメントより)要するにNode.js を使えばJavascript でサーバーサイドの開発ができる!
  5. 5. Hello Node.js !nvm ~ node.js を入れるnode.js を入れるこの設定だけでは次ログイン時にパスが通っていないのでパスを通すには例えば .bash_profile などに以下のように追加します..テキスト
  6. 6. Hello Node.js !いよいよ Hello Node.js !!hello.js というファイル (名前は適当) を作り以下のように書いて保存してください保存したら以下のコマンドを入力して実行してください_人人人人人人人人人_> Hello Node.js !! < ̄Y^Y^Y^Y^Y^Y^Y^Y ̄
  7. 7. Hello Express !Express は Node.js でつかえるWebフレームワークExpress の導入は簡単!Express でひな形を生成するパッケージのインストールサーバーを起動するブラウザを開いて http://localhost:3000 に接続してみよう
  8. 8. Hello Express !Express で生成されたファイルapp.jspackage.jsonpublic/routes/view/ index.jadelayout.jadeindex.jsuser.jsjavascriptsimagesstylesheets style.css
  9. 9. Hello Jade !じゃあこんなサイトを作ってみよう!http://localhost:3000/chat
  10. 10. まずHTMLを書きますか?
  11. 11. いいえ
  12. 12. Jadeを書きます!
  13. 13. Hello Jade !Jade とは Node.js で使われるテンプレートエンジンですJade で書かれたコードは最終的にHTMLに出力されます実際にJadeで書かれたファイルをみてみようview/layout.jadeview/index.jade
  14. 14. Hello Jade !layout.jade変換したあと#{title}の値は外部から渡される[block content] の中身は別ファイル
  15. 15. Hello Jade !index.jade変換したあと!layout.jade の [block content]の中に挿入された形になる
  16. 16. Hello Jade !実際に書いてみようview/chat.jade
  17. 17. Hello Jade !app.js を修正するサーバーを起動この箇所を追加します!ブラウザを開いて http://localhost:3000/chat に接続してみよう
  18. 18. Hello Socket.io作ったページにチャット機能を実装してましょう!Socket.ioを導入しますpackage.json の編集パッケージのインストール
  19. 19. Hello Socket.ioapp.js を修正してソケット通信を実装!まずモジュールをインポートします
  20. 20. Hello Socket.ioapp.js を修正してソケット通信を実装!・ポート監視を開始・ソケット通信のイベントを設定
  21. 21. Hello Socket.ioapp.js を修正してソケット通信を実装!既にポートを監視しているのでコメントアウトする
  22. 22. app.js の修正おわり
  23. 23. Hello Socket.iochat.js でクライアント側のソケット通信を実装public/javascripts/chat.js
  24. 24. Hello Socket.iochat.jade を修正サーバーを起動view/chat.jadeこの部分を追加!_人人人人人人人人人人_> チャットが出来る < ̄Y^Y^Y^Y^Y^Y^Y^Y^ ̄
  25. 25. _人人人人人_> おわり < ̄Y^Y^Y^Y ̄
  26. 26. 参考文献第3回 Express.js を使ったWebアプリケーションを構築http://gihyo.jp/dev/serial/01/nodejs/0003Node + Socket.IO で簡単なチャットアプリの作成http://dev.classmethod.jp/server-side/language/node-socket-io/

×