backbonejs+scss+javaee(jax-rs) 今風のwebアプリをnetbeansで入門!
DESCRIPTION
第6回福岡市西区プログラム勉強会 2013/12/8(日) 発表資料TRANSCRIPT
![Page 1: BACKBONEJS+SCSS+JavaEE(JAX-RS) 今風のWebアプリをNetBeansで入門!](https://reader036.vdocuments.net/reader036/viewer/2022062313/557dc762d8b42ae4688b461e/html5/thumbnails/1.jpg)
BACKBONEJS+SCSS+JavaEE(JAX-RS) 今風のWebアプリをNetBeansで入門!
ねこび〜ん by カネウチカズコ is licensed under a Creative Commons 表示-継承 2.1 日本 License. Photo by Web制作向け無料写真素材/ぱくたそ http://www.pakutaso.com
2013/12/8(日) 第6回福岡市西区プログラム勉強会 発表資料
![Page 2: BACKBONEJS+SCSS+JavaEE(JAX-RS) 今風のWebアプリをNetBeansで入門!](https://reader036.vdocuments.net/reader036/viewer/2022062313/557dc762d8b42ae4688b461e/html5/thumbnails/2.jpg)
じこしょうかい
自己紹介です
========
江原と申します。(@itokami1123)
福岡で業務アプリをJavaScriptで作って暮らしてます。
来年からはJava屋に転職。必死に勉強中。(一緒に勉強する人募集中)
こんな野望が持ってます。
・業務系WebアプリのUIをモット使いやすくしたい!
・JavaとJavaScriptを仲良くさせたい!
・コミュニティの力で福岡を一つに!景気上昇↑雇用拡大↑
・生涯、ココ福岡でエンジニアしたい!
![Page 3: BACKBONEJS+SCSS+JavaEE(JAX-RS) 今風のWebアプリをNetBeansで入門!](https://reader036.vdocuments.net/reader036/viewer/2022062313/557dc762d8b42ae4688b461e/html5/thumbnails/3.jpg)
きょうのないよう
!
来年は、AngularJSとかBackbone.jsとか
JavaScriptでガリガリ作るWebアプリが
ますます流行りそうですね。
お相手のWebサーバは REST形式でJSONが一般的です。
そこで今日はNetBeansとJavaEE(JAX-RS)を使って
お気楽に入門する方法をご説明します!
参考になれば幸いです!!
![Page 5: BACKBONEJS+SCSS+JavaEE(JAX-RS) 今風のWebアプリをNetBeansで入門!](https://reader036.vdocuments.net/reader036/viewer/2022062313/557dc762d8b42ae4688b461e/html5/thumbnails/5.jpg)
かんせいイメージ
JPA永続性
エンティティDB
REST JSON Service
JavaEE 6
ModelView
Backbone.js JSON
( ∵
NetBeans 7.4
NetBeans Connector
on Chrome
GlassFish
![Page 6: BACKBONEJS+SCSS+JavaEE(JAX-RS) 今風のWebアプリをNetBeansで入門!](https://reader036.vdocuments.net/reader036/viewer/2022062313/557dc762d8b42ae4688b461e/html5/thumbnails/6.jpg)
まずは、プロジェクトの新規作成!
![Page 7: BACKBONEJS+SCSS+JavaEE(JAX-RS) 今風のWebアプリをNetBeansで入門!](https://reader036.vdocuments.net/reader036/viewer/2022062313/557dc762d8b42ae4688b461e/html5/thumbnails/7.jpg)
Webアプリケーションで次!
![Page 8: BACKBONEJS+SCSS+JavaEE(JAX-RS) 今風のWebアプリをNetBeansで入門!](https://reader036.vdocuments.net/reader036/viewer/2022062313/557dc762d8b42ae4688b461e/html5/thumbnails/8.jpg)
プロジェクト名をつけて次!
![Page 9: BACKBONEJS+SCSS+JavaEE(JAX-RS) 今風のWebアプリをNetBeansで入門!](https://reader036.vdocuments.net/reader036/viewer/2022062313/557dc762d8b42ae4688b461e/html5/thumbnails/9.jpg)
今回は JavaEE 6 Webを選択!(7は仕事で使うのはまだ早い?)
![Page 10: BACKBONEJS+SCSS+JavaEE(JAX-RS) 今風のWebアプリをNetBeansで入門!](https://reader036.vdocuments.net/reader036/viewer/2022062313/557dc762d8b42ae4688b461e/html5/thumbnails/10.jpg)
そのまま終了をクリック!
![Page 11: BACKBONEJS+SCSS+JavaEE(JAX-RS) 今風のWebアプリをNetBeansで入門!](https://reader036.vdocuments.net/reader036/viewer/2022062313/557dc762d8b42ae4688b461e/html5/thumbnails/11.jpg)
プロジェクト出来たけどDB作んのメンドイなぁ〜。( ∵
確かにね!でもNetBeansなら大丈夫!簡単にゃ!
![Page 12: BACKBONEJS+SCSS+JavaEE(JAX-RS) 今風のWebアプリをNetBeansで入門!](https://reader036.vdocuments.net/reader036/viewer/2022062313/557dc762d8b42ae4688b461e/html5/thumbnails/12.jpg)
最初からサンプルのDB(Java DB)が入ってます!
![Page 13: BACKBONEJS+SCSS+JavaEE(JAX-RS) 今風のWebアプリをNetBeansで入門!](https://reader036.vdocuments.net/reader036/viewer/2022062313/557dc762d8b42ae4688b461e/html5/thumbnails/13.jpg)
RESTServiceをコーディングすんのメンドイなぁ〜。( ∵
そうよね!でもNetBeansなら大丈夫!簡単にゃ!
![Page 14: BACKBONEJS+SCSS+JavaEE(JAX-RS) 今風のWebアプリをNetBeansで入門!](https://reader036.vdocuments.net/reader036/viewer/2022062313/557dc762d8b42ae4688b461e/html5/thumbnails/14.jpg)
DBの情報からRESTのWebサービスを自動生成できます!
![Page 15: BACKBONEJS+SCSS+JavaEE(JAX-RS) 今風のWebアプリをNetBeansで入門!](https://reader036.vdocuments.net/reader036/viewer/2022062313/557dc762d8b42ae4688b461e/html5/thumbnails/15.jpg)
「データベースからのRESTful Webサービス」を選択!
![Page 16: BACKBONEJS+SCSS+JavaEE(JAX-RS) 今風のWebアプリをNetBeansで入門!](https://reader036.vdocuments.net/reader036/viewer/2022062313/557dc762d8b42ae4688b461e/html5/thumbnails/16.jpg)
今回はサンプルの「CUSTOMER」テーブルを選択。
![Page 17: BACKBONEJS+SCSS+JavaEE(JAX-RS) 今風のWebアプリをNetBeansで入門!](https://reader036.vdocuments.net/reader036/viewer/2022062313/557dc762d8b42ae4688b461e/html5/thumbnails/17.jpg)
エンティティ・クラス名は「CUSTOMER」で指定。
![Page 18: BACKBONEJS+SCSS+JavaEE(JAX-RS) 今風のWebアプリをNetBeansで入門!](https://reader036.vdocuments.net/reader036/viewer/2022062313/557dc762d8b42ae4688b461e/html5/thumbnails/18.jpg)
自動でDBに合わせたRESTのコーディングが!
![Page 19: BACKBONEJS+SCSS+JavaEE(JAX-RS) 今風のWebアプリをNetBeansで入門!](https://reader036.vdocuments.net/reader036/viewer/2022062313/557dc762d8b42ae4688b461e/html5/thumbnails/19.jpg)
早速実行!
![Page 20: BACKBONEJS+SCSS+JavaEE(JAX-RS) 今風のWebアプリをNetBeansで入門!](https://reader036.vdocuments.net/reader036/viewer/2022062313/557dc762d8b42ae4688b461e/html5/thumbnails/20.jpg)
http://localhost:8080/backbone_test/webresources/com.example.customer/
demo
ヘッダのAccept:text/html,application/xhtml+xml,application/xml;時は XMLを返却します。
![Page 21: BACKBONEJS+SCSS+JavaEE(JAX-RS) 今風のWebアプリをNetBeansで入門!](https://reader036.vdocuments.net/reader036/viewer/2022062313/557dc762d8b42ae4688b461e/html5/thumbnails/21.jpg)
Chromeですと Dev HTTP Client拡張を使うと便利です!
GET/POST/PUT/DELETE/…
HTTPのリクエストヘッダの追加可能
Accept: application/jsonを追加。json形式で返却される事が確認できます。
demo
![Page 22: BACKBONEJS+SCSS+JavaEE(JAX-RS) 今風のWebアプリをNetBeansで入門!](https://reader036.vdocuments.net/reader036/viewer/2022062313/557dc762d8b42ae4688b461e/html5/thumbnails/22.jpg)
Backboneのライブラリ揃えるのメンドイなぁ〜。( ∵
Σ(^^;;でもNetBeansなら大丈夫!簡単にゃ!
![Page 23: BACKBONEJS+SCSS+JavaEE(JAX-RS) 今風のWebアプリをNetBeansで入門!](https://reader036.vdocuments.net/reader036/viewer/2022062313/557dc762d8b42ae4688b461e/html5/thumbnails/23.jpg)
Backbone.jsを使ったサンプルを新規ファイルから自動生成します!
![Page 24: BACKBONEJS+SCSS+JavaEE(JAX-RS) 今風のWebアプリをNetBeansで入門!](https://reader036.vdocuments.net/reader036/viewer/2022062313/557dc762d8b42ae4688b461e/html5/thumbnails/24.jpg)
[HTML5]→[RESTFul JavaScriptクライアント]で次!
![Page 25: BACKBONEJS+SCSS+JavaEE(JAX-RS) 今風のWebアプリをNetBeansで入門!](https://reader036.vdocuments.net/reader036/viewer/2022062313/557dc762d8b42ae4688b461e/html5/thumbnails/25.jpg)
[プロジェクト・ソースへのBackbone.jsの追加]にチェック!
先ほど作った RESTサービスを指定!
ココをチェックするだけで Backbone.jsのライブラリが!
![Page 26: BACKBONEJS+SCSS+JavaEE(JAX-RS) 今風のWebアプリをNetBeansで入門!](https://reader036.vdocuments.net/reader036/viewer/2022062313/557dc762d8b42ae4688b461e/html5/thumbnails/26.jpg)
終了を押すと…
![Page 27: BACKBONEJS+SCSS+JavaEE(JAX-RS) 今風のWebアプリをNetBeansで入門!](https://reader036.vdocuments.net/reader036/viewer/2022062313/557dc762d8b42ae4688b461e/html5/thumbnails/27.jpg)
必要なライブラリとサンプルソースが手に入ります!
Backbone.jsのライブラリ一式!
Backbone.jsのサンプルソースBackbone.jsのサンプルソース
![Page 28: BACKBONEJS+SCSS+JavaEE(JAX-RS) 今風のWebアプリをNetBeansで入門!](https://reader036.vdocuments.net/reader036/viewer/2022062313/557dc762d8b42ae4688b461e/html5/thumbnails/28.jpg)
JavaScript書き直す毎にブラウザ更新メンドイなぁ〜。( ∵
NetBeansなら大丈夫!簡単にゃ!
![Page 29: BACKBONEJS+SCSS+JavaEE(JAX-RS) 今風のWebアプリをNetBeansで入門!](https://reader036.vdocuments.net/reader036/viewer/2022062313/557dc762d8b42ae4688b461e/html5/thumbnails/29.jpg)
ChromeにNetBeans Connectorを入れておけば…
組み込みのChromeを選択!
![Page 30: BACKBONEJS+SCSS+JavaEE(JAX-RS) 今風のWebアプリをNetBeansで入門!](https://reader036.vdocuments.net/reader036/viewer/2022062313/557dc762d8b42ae4688b461e/html5/thumbnails/30.jpg)
[実行]でHTML/CSS/JavaScriptの更新時に ブラウザをリロード(更新)するようになります!
自動反映
![Page 31: BACKBONEJS+SCSS+JavaEE(JAX-RS) 今風のWebアプリをNetBeansで入門!](https://reader036.vdocuments.net/reader036/viewer/2022062313/557dc762d8b42ae4688b461e/html5/thumbnails/31.jpg)
CSSメンドイなぁ〜。Sass(SCSS)が使いたいなぁ…。( ∵
贅沢なヤツめ!でもNetBeansならやや簡単にゃ!
![Page 32: BACKBONEJS+SCSS+JavaEE(JAX-RS) 今風のWebアプリをNetBeansで入門!](https://reader036.vdocuments.net/reader036/viewer/2022062313/557dc762d8b42ae4688b461e/html5/thumbnails/32.jpg)
[Preferences]→[オプション]→[CSSプリプロセッサ]から Sassのインストールをクリック
![Page 33: BACKBONEJS+SCSS+JavaEE(JAX-RS) 今風のWebアプリをNetBeansで入門!](https://reader036.vdocuments.net/reader036/viewer/2022062313/557dc762d8b42ae4688b461e/html5/thumbnails/33.jpg)
Sassは自分でインストールするにゃ!
![Page 34: BACKBONEJS+SCSS+JavaEE(JAX-RS) 今風のWebアプリをNetBeansで入門!](https://reader036.vdocuments.net/reader036/viewer/2022062313/557dc762d8b42ae4688b461e/html5/thumbnails/34.jpg)
インストールしたSassパスを登録してOKをクリック
![Page 35: BACKBONEJS+SCSS+JavaEE(JAX-RS) 今風のWebアプリをNetBeansで入門!](https://reader036.vdocuments.net/reader036/viewer/2022062313/557dc762d8b42ae4688b461e/html5/thumbnails/35.jpg)
さっそくSCSSを書いてみましょう!scssというフォルダを作って
scssという名前で空フォルダ作成!
空のcssフォルダも作っておいてね!
![Page 36: BACKBONEJS+SCSS+JavaEE(JAX-RS) 今風のWebアプリをNetBeansで入門!](https://reader036.vdocuments.net/reader036/viewer/2022062313/557dc762d8b42ae4688b461e/html5/thumbnails/36.jpg)
Sassファイルを新規作成!
scssにSassファイルを新規作成!
自動コンパイルにチェック!
![Page 37: BACKBONEJS+SCSS+JavaEE(JAX-RS) 今風のWebアプリをNetBeansで入門!](https://reader036.vdocuments.net/reader036/viewer/2022062313/557dc762d8b42ae4688b461e/html5/thumbnails/37.jpg)
保存(ctl+s)時にcssが自動生成されブラウザに自動反映!
ブラウザにも自動反映されるよ!
自動変換
![Page 38: BACKBONEJS+SCSS+JavaEE(JAX-RS) 今風のWebアプリをNetBeansで入門!](https://reader036.vdocuments.net/reader036/viewer/2022062313/557dc762d8b42ae4688b461e/html5/thumbnails/38.jpg)
まとめ!
![Page 39: BACKBONEJS+SCSS+JavaEE(JAX-RS) 今風のWebアプリをNetBeansで入門!](https://reader036.vdocuments.net/reader036/viewer/2022062313/557dc762d8b42ae4688b461e/html5/thumbnails/39.jpg)
まとめ
!
NetBeansを使うと気軽に Backbone.js と SCSS の入門が
出来ておすすめです!
いますぐインストールするのにゃ
![Page 40: BACKBONEJS+SCSS+JavaEE(JAX-RS) 今風のWebアプリをNetBeansで入門!](https://reader036.vdocuments.net/reader036/viewer/2022062313/557dc762d8b42ae4688b461e/html5/thumbnails/40.jpg)
ご清聴ありがとうございました!