backbonejs+scss+javaee(jax-rs) 今風のwebアプリをnetbeansで入門!
Post on 15-Jun-2015
6.276 Views
Preview:
DESCRIPTION
TRANSCRIPT
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 の入門が
出来ておすすめです!
いますぐインストールするのにゃ
ご清聴ありがとうございました!
top related