BACKBONEJS+SCSS+JavaEE(JAX-RS) 今風のWebアプリをNetBeansで入門!

7,904 views

Published on

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

Published in: Technology
  • Be the first to comment

BACKBONEJS+SCSS+JavaEE(JAX-RS) 今風のWebアプリをNetBeansで入門!

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

×