Your SlideShare is downloading. ×
0
CAMPHOR- 土曜講座 2013/06/15
CAMPHOR- 土曜講座 2013/06/15
CAMPHOR- 土曜講座 2013/06/15
CAMPHOR- 土曜講座 2013/06/15
CAMPHOR- 土曜講座 2013/06/15
CAMPHOR- 土曜講座 2013/06/15
CAMPHOR- 土曜講座 2013/06/15
CAMPHOR- 土曜講座 2013/06/15
CAMPHOR- 土曜講座 2013/06/15
CAMPHOR- 土曜講座 2013/06/15
CAMPHOR- 土曜講座 2013/06/15
CAMPHOR- 土曜講座 2013/06/15
CAMPHOR- 土曜講座 2013/06/15
CAMPHOR- 土曜講座 2013/06/15
CAMPHOR- 土曜講座 2013/06/15
CAMPHOR- 土曜講座 2013/06/15
CAMPHOR- 土曜講座 2013/06/15
CAMPHOR- 土曜講座 2013/06/15
CAMPHOR- 土曜講座 2013/06/15
CAMPHOR- 土曜講座 2013/06/15
CAMPHOR- 土曜講座 2013/06/15
CAMPHOR- 土曜講座 2013/06/15
CAMPHOR- 土曜講座 2013/06/15
CAMPHOR- 土曜講座 2013/06/15
CAMPHOR- 土曜講座 2013/06/15
CAMPHOR- 土曜講座 2013/06/15
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×
Saving this for later? Get the SlideShare app to save on your phone or tablet. Read anywhere, anytime – even offline.
Text the download link to your phone
Standard text messaging rates apply

CAMPHOR- 土曜講座 2013/06/15

330

Published on

CAMPHOR- 土曜講座 2013/06/15 …

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

Published in: Technology
0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total Views
330
On Slideshare
0
From Embeds
0
Number of Embeds
3
Actions
Shares
0
Downloads
0
Comments
0
Likes
0
Embeds 0
No embeds

Report content
Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
No notes for slide

Transcript

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

×