cmujp21_node-webkit
DESCRIPTION
http://www.youtube.com/watch?v=SYAt6MTDS5M 内容 ・romo ・node-weblit ・milkcocoa の紹介とデモ ※p13のphonegapの件を修正してあります。TRANSCRIPT
![Page 1: Cmujp21_node-webkit](https://reader033.vdocuments.pub/reader033/viewer/2022060121/559376b11a28ab3f668b4619/html5/thumbnails/1.jpg)
web技術で作る ネイティブ(チャット)アプリ
#CMUJP 21 のびすけ
![Page 2: Cmujp21_node-webkit](https://reader033.vdocuments.pub/reader033/viewer/2022060121/559376b11a28ab3f668b4619/html5/thumbnails/2.jpg)
自己紹介• のびすけ @n0bisuke
• 所属: LIG inc エンジニア
• 今年4月に岩手から上京 新卒1年目
• ギークハウス、家賃0円クラスタ、
• フットサルやってます
![Page 3: Cmujp21_node-webkit](https://reader033.vdocuments.pub/reader033/viewer/2022060121/559376b11a28ab3f668b4619/html5/thumbnails/3.jpg)
http://tenkatoitsu.github.io/disco_lp/
インタラクティブな• • • • • • • •
モノが好きです。
自己紹介
![Page 5: Cmujp21_node-webkit](https://reader033.vdocuments.pub/reader033/viewer/2022060121/559376b11a28ab3f668b4619/html5/thumbnails/5.jpg)
ROMO De 接客社内チャットへ通知
iPadアプリ
hello!!!
![Page 6: Cmujp21_node-webkit](https://reader033.vdocuments.pub/reader033/viewer/2022060121/559376b11a28ab3f668b4619/html5/thumbnails/6.jpg)
今日の内容
• web技術だけでネイティブなアプリを作れてしまう話の紹介
• Node-Webkit(と時間があればmilkcocoa)の紹介
• 私自身も最近触ってみました
![Page 7: Cmujp21_node-webkit](https://reader033.vdocuments.pub/reader033/viewer/2022060121/559376b11a28ab3f668b4619/html5/thumbnails/7.jpg)
Node-webkit
![Page 8: Cmujp21_node-webkit](https://reader033.vdocuments.pub/reader033/viewer/2022060121/559376b11a28ab3f668b4619/html5/thumbnails/8.jpg)
Node-webkit
• HTML/CSS/JSでネイティブアプリを作れる!
![Page 9: Cmujp21_node-webkit](https://reader033.vdocuments.pub/reader033/viewer/2022060121/559376b11a28ab3f668b4619/html5/thumbnails/9.jpg)
Node-webkit• HTML/JS/CSS + Chromium + Node.js
![Page 10: Cmujp21_node-webkit](https://reader033.vdocuments.pub/reader033/viewer/2022060121/559376b11a28ab3f668b4619/html5/thumbnails/10.jpg)
HTML
たぶん皆さん使ってるはず。
![Page 11: Cmujp21_node-webkit](https://reader033.vdocuments.pub/reader033/viewer/2022060121/559376b11a28ab3f668b4619/html5/thumbnails/11.jpg)
Chromium
• Google Chromeの親分的
• ネイティブ機能にアクセス出来る
![Page 12: Cmujp21_node-webkit](https://reader033.vdocuments.pub/reader033/viewer/2022060121/559376b11a28ab3f668b4619/html5/thumbnails/12.jpg)
Node.js
• サーバーサイドJavascriptの最大勢力
• Javascriptで色々できちゃう
![Page 13: Cmujp21_node-webkit](https://reader033.vdocuments.pub/reader033/viewer/2022060121/559376b11a28ab3f668b4619/html5/thumbnails/13.jpg)
何が凄いか• Webのフロント側を作る技術で形ができちゃう
• PhonegapなどのHTMLラッパーとは違いネイティブ機能にアクセスできる(Phonegapの仕様理解してないので要確認)
• Win,Mac,Linux向けのネイティブアプリ書き出し
と同じく
![Page 14: Cmujp21_node-webkit](https://reader033.vdocuments.pub/reader033/viewer/2022060121/559376b11a28ab3f668b4619/html5/thumbnails/14.jpg)
![Page 15: Cmujp21_node-webkit](https://reader033.vdocuments.pub/reader033/viewer/2022060121/559376b11a28ab3f668b4619/html5/thumbnails/15.jpg)
参考: HTML5+CSS3+JSでネイティブGUIアプリが作れる、 node-webkitを触ってみる / アシアルブログ http://blog.asial.co.jp/1305
例: iTunesアプリ的なもの
![Page 16: Cmujp21_node-webkit](https://reader033.vdocuments.pub/reader033/viewer/2022060121/559376b11a28ab3f668b4619/html5/thumbnails/16.jpg)
実際に作ってみます。
![Page 17: Cmujp21_node-webkit](https://reader033.vdocuments.pub/reader033/viewer/2022060121/559376b11a28ab3f668b4619/html5/thumbnails/17.jpg)
ネイティブ機能も使おう
![Page 18: Cmujp21_node-webkit](https://reader033.vdocuments.pub/reader033/viewer/2022060121/559376b11a28ab3f668b4619/html5/thumbnails/18.jpg)
[応用] チャットアプリを作ってみます
![Page 19: Cmujp21_node-webkit](https://reader033.vdocuments.pub/reader033/viewer/2022060121/559376b11a28ab3f668b4619/html5/thumbnails/19.jpg)
milkcocoaを使うと爆速です。
[応用] チャットアプリを作ってみます
JavaScript1行に詰め込まれたバックエンド
![Page 20: Cmujp21_node-webkit](https://reader033.vdocuments.pub/reader033/viewer/2022060121/559376b11a28ab3f668b4619/html5/thumbnails/20.jpg)
技術活用ポイント
node-webkit ・デジタルサイネージ ・社内ツール ・etc (割となんでもアリ?)
![Page 21: Cmujp21_node-webkit](https://reader033.vdocuments.pub/reader033/viewer/2022060121/559376b11a28ab3f668b4619/html5/thumbnails/21.jpg)
技術活用ポイント
milkcocoa ・IoT (ラズパイetc) ・サーバー持てない案件
![Page 22: Cmujp21_node-webkit](https://reader033.vdocuments.pub/reader033/viewer/2022060121/559376b11a28ab3f668b4619/html5/thumbnails/22.jpg)
まとめ• ROMO楽しそう
• Node-webkit便利そう
• milkcocoaアツい
• インタラクティブな案件やりたいのでお待ちしております!!