Embed Size (px)
DESCRIPTION
第6回福岡市西区プログラム勉強会 2013/12/8(日) 発表資料
Citation preview
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回福岡市西区プログラム勉強会 発表資料
じこしょうかい
自己紹介です
========
江原と申します。(@itokami1123)
福岡で業務アプリをJavaScriptで作って暮らしてます。
来年からはJava屋に転職。必死に勉強中。(一緒に勉強する人募集中)
こんな野望が持ってます。
・業務系WebアプリのUIをモット使いやすくしたい！
・JavaとJavaScriptを仲良くさせたい！
・コミュニティの力で福岡を一つに！景気上昇↑雇用拡大↑
・生涯、ココ福岡でエンジニアしたい！
きょうのないよう
!
来年は、AngularJSとかBackbone.jsとか
JavaScriptでガリガリ作るWebアプリが
ますます流行りそうですね。
お相手のWebサーバは REST形式でJSONが一般的です。
そこで今日はNetBeansとJavaEE(JAX-RS)を使って
お気楽に入門する方法をご説明します！
参考になれば幸いです！！
かんせいイメージ
JPA永続性
エンティティDB
REST JSON Service
JavaEE 6
ModelView
Backbone.js JSON
( ∵
NetBeans 7.4
NetBeans Connector
on Chrome
GlassFish
まずは、プロジェクトの新規作成！
Webアプリケーションで次！
プロジェクト名をつけて次！
今回は JavaEE 6 Webを選択！(7は仕事で使うのはまだ早い？）
そのまま終了をクリック！
プロジェクト出来たけどDB作んのメンドイなぁ〜。( ∵
確かにね！でもNetBeansなら大丈夫！簡単にゃ！
最初からサンプルのDB(Java DB)が入ってます！
RESTServiceをコーディングすんのメンドイなぁ〜。( ∵
そうよね！でもNetBeansなら大丈夫！簡単にゃ！
DBの情報からRESTのWebサービスを自動生成できます！
「データベースからのRESTful Webサービス」を選択！
今回はサンプルの「CUSTOMER」テーブルを選択。
エンティティ・クラス名は「CUSTOMER」で指定。
自動でDBに合わせたRESTのコーディングが！
早速実行！
http://localhost:8080/backbone_test/webresources/com.example.customer/
demo
ヘッダのAccept:text/html,application/xhtml+xml,application/xml;時は XMLを返却します。
Chromeですと Dev HTTP Client拡張を使うと便利です！
GET/POST/PUT/DELETE/…
HTTPのリクエストヘッダの追加可能
Accept: application/jsonを追加。json形式で返却される事が確認できます。
demo
Backboneのライブラリ揃えるのメンドイなぁ〜。( ∵
Σ(^^;;でもNetBeansなら大丈夫！簡単にゃ！
Backbone.jsを使ったサンプルを新規ファイルから自動生成します！
[HTML5]→[RESTFul JavaScriptクライアント]で次！
[プロジェクト・ソースへのBackbone.jsの追加]にチェック！
先ほど作った RESTサービスを指定！
ココをチェックするだけで Backbone.jsのライブラリが！
終了を押すと…
必要なライブラリとサンプルソースが手に入ります！
Backbone.jsのライブラリ一式！
Backbone.jsのサンプルソースBackbone.jsのサンプルソース
JavaScript書き直す毎にブラウザ更新メンドイなぁ〜。( ∵
NetBeansなら大丈夫！簡単にゃ！
ChromeにNetBeans Connectorを入れておけば…
組み込みのChromeを選択！
[実行]でHTML/CSS/JavaScriptの更新時に ブラウザをリロード（更新）するようになります！
自動反映
CSSメンドイなぁ〜。Sass(SCSS)が使いたいなぁ…。( ∵
贅沢なヤツめ！でもNetBeansならやや簡単にゃ！
[Preferences]→[オプション]→[CSSプリプロセッサ]から Sassのインストールをクリック
Sassは自分でインストールするにゃ！
インストールしたSassパスを登録してOKをクリック
さっそくSCSSを書いてみましょう！scssというフォルダを作って
scssという名前で空フォルダ作成！
空のcssフォルダも作っておいてね！
Sassファイルを新規作成！
scssにSassファイルを新規作成！
自動コンパイルにチェック！
保存(ctl+s)時にcssが自動生成されブラウザに自動反映！
ブラウザにも自動反映されるよ！
自動変換
まとめ！
まとめ
!
NetBeansを使うと気軽に Backbone.js と SCSS の入門が
出来ておすすめです！
いますぐインストールするのにゃ
ご清聴ありがとうございました！
