第6回福岡市西区プログラム勉強会 2013/12/8(日) 発表資料

1. BACKBONEJS+SCSS+JavaEE(JAX-RS)
今風のWebアプリをNetBeansで入門！
2013/12/8(日) 第6回福岡市西区プログラム勉強会 発表資料
ねこび〜ん by カネウチカズコ is licensed under a Creative Commons 表示-継承 2.1 日本 License.
Photo by Web制作向け無料写真素材／ぱくたそ http://www.pakutaso.com

2. じこしょうかい
自己紹介です
========
江原と申します。(@itokami1123)
福岡で業務アプリをJavaScriptで作って暮らしてます。
来年からはJava屋に転職。必死に勉強中。(一緒に勉強する人募集中)
こんな野望が持ってます。
・業務系WebアプリのUIをモット使いやすくしたい！
・JavaとJavaScriptを仲良くさせたい！
・コミュニティの力で福岡を一つに！景気上昇↑雇用拡大↑
・生涯、ココ福岡でエンジニアしたい！

3. きょうのないよう
!
来年は、AngularJSとかBackbone.jsとか
JavaScriptでガリガリ作るWebアプリが
ますます流行りそうですね。
お相手のWebサーバは REST形式でJSONが一般的です。
そこで今日はNetBeansとJavaEE(JAX-RS)を使って
お気楽に入門する方法をご説明します！
参考になれば幸いです！！

4. ではNetBeansをインストールしましょう！
https://ja.netbeans.org/

5. かんせいイメージ
(
View
REST
Model
Backbone.js
JSON
Service
JSON
JPA
永続性
エンティティ
JavaEE 6
GlassFish
NetBeans
Connector
on
Chrome
NetBeans 7.4
DB

6. まずは、プロジェクトの新規作成！

7. Webアプリケーションで次！

8. プロジェクト名をつけて次！

9. 今回は JavaEE 6 Webを選択！(7は仕事で使うのはまだ早い？）

10. そのまま終了をクリック！

11. (
プロジェクト出来たけどDB作んのメンドイなぁ〜。
確かにね！でもNetBeansなら大丈夫！簡単にゃ！

12. 最初からサンプルのDB(Java DB)が入ってます！

13. (
RESTServiceをコーディングすんのメンドイなぁ〜。
そうよね！でもNetBeansなら大丈夫！簡単にゃ！

14. DBの情報からRESTのWebサービスを自動生成できます！

15. 「データベースからのRESTful Webサービス」を選択！

16. 今回はサンプルの「CUSTOMER」テーブルを選択。

17. エンティティ・クラス名は「CUSTOMER」で指定。

18. 自動でDBに合わせたRESTのコーディングが！

19. 早速実行！

20. o
m
de
http://localhost:8080/backbone_test/webresources/com.example.customer/
ヘッダのAccept:text/html,application/xhtml+xml,application/xml;時は
XMLを返却します。

21. o
m
de
Chromeですと Dev HTTP Client拡張を使うと便利です！
GET/POST/PUT/DELETE/…
HTTPのリクエストヘッダの追加可能
Accept: application/jsonを追加。json形式で返却される事が確認できます。

22. (
Backboneのライブラリ揃えるのメンドイなぁ〜。
Σ(^^;;でもNetBeansなら大丈夫！簡単にゃ！

23. Backbone.jsを使ったサンプルを新規ファイルから自動生成します！

24. [HTML5]→[RESTFul JavaScriptクライアント]で次！

25. [プロジェクト・ソースへのBackbone.jsの追加]にチェック！
先ほど作った
RESTサービスを指定！
ココをチェックするだけで
Backbone.jsのライブラリが！

26. 終了を押すと…

27. 必要なライブラリとサンプルソースが手に入ります！
Backbone.jsのライブラリ一式！
Backbone.jsのサンプルソース

28. (
JavaScript書き直す毎にブラウザ更新メンドイなぁ〜。
NetBeansなら大丈夫！簡単にゃ！

29. ChromeにNetBeans Connectorを入れておけば…
組み込みのChromeを選択！

30. [実行]でHTML/CSS/JavaScriptの更新時に
ブラウザをリロード（更新）するようになります！
自動反映

31. (
CSSメンドイなぁ〜。Sass(SCSS)が使いたいなぁ…。
贅沢なヤツめ！でもNetBeansならやや簡単にゃ！

32. [Preferences]→[オプション]→[CSSプリプロセッサ]から
Sassのインストールをクリック

33. Sassは自分でインストールするにゃ！

34. インストールしたSassパスを登録してOKをクリック

35. さっそくSCSSを書いてみましょう！scssというフォルダを作って
scssという名前で空フォルダ作成！
空のcssフォルダも作っておいてね！

36. scssにSassファイルを新規作成！
Sassファイルを新規作成！
自動コンパイルにチェック！

37. 保存(ctl+s)時にcssが自動生成されブラウザに自動反映！
自動変換
ブラウザにも自動反映されるよ！

38. まとめ！

39. まとめ
!
NetBeansを使うと気軽に Backbone.js と SCSS の入門が
出来ておすすめです！
いますぐインストールするのにゃ

40. ご清聴ありがとうございました！