SlideShare a Scribd company logo
Web屋という仕事のこれから
2015.5.16

FutureSyncVol. 5
Bathtimefish 村岡 正和
∼Web動向からWeb屋に必要な技術を考えてみる∼
HTML5-WEST.jp代表 / html5j マークアップ部 部長 / HTML5 Experts.jp メンバー
GDG京都 / CSS Nite in OSAKA / 神戸ITフェスティバル実行委員など
むらおか まさかず
村岡正和
HTML5-WEST.jp
Webアプリケーション開発 IT業務システム設計/開発
Webサービス導入/事業戦略コンサルティング
@bathtimefish
Firefox OSの
薄い本書きました。
http://goo.gl/mA8ebW
好評発売中!
開発に、「もえあがる」のはつきものだ
第一話 がいあハックス
(Gaia開発環境の構築とデバッグ)
著
また書きました。
C86
第一話 WebIDEを使いこなす
(WebIDEを使ったアプリ開発法)
著
http://goo.gl/IzkT5m
FirefoxOSアプリ開発のやり方書きました
http://codezine.jp/article/detail/8476
監修しました。
実例ごとの実装例がたくさん書いてあ
ります。ウェブサイト制作やCMSの運
用時に便利です。
好評販売中!!
HTMLマークアップの勉強会を主催
https://html5experts.jp/bathtimefish/6644/
http://kobekokaku.jp/  #kobekokaku
神戸市公安9課、起動。
Web屋という仕事のこれから Web動向からWeb屋に必要な技術を考えてみる
日本ウェアラブルデバイスユーザー会
w-ug.jp
w-ug.jp
いますぐ登録!
ウェアラブルデバイスを着けるとカッコイイ!!
素材次第!?
WEB of Things
WoT
JSでクラウドセンサー作ったら取材された
http://special.nikkeibp.co.jp/ts/article/ad0h/172223/
日経エレクトロニクス
にも載った。
日経エレクトロニクス
2014.6.23 号
Arduino
Espruino
Tessel
http://cylonjs.com/
https://github.com/rwaldron/johnny-five
http://www.espruino.com/
https://tessel.io/
BeagleBone Black
http://beagleboard.org/Products/
BeagleBone+Black
http://au-fx.kddi.com/
Open Web Board
Sperk core
https://www.spark.io/
http://www.we-io.net/
WEIO
勉強会やってます。
記事書きました。
http://html5experts.jp/bathtimefish/13109/
まとめ
画面の中だけの仕事は安くなる一方。
ハードウェアとか画面の外の技術を
身につけて、Web技術と組み合わせて
新しい仕事をつくっていこう!
ありがとうございました!
所要時間: 10分
。。。時間があまったので、
Web技術で開発できる
デバイスを紹介します。
(コレクション自慢)
現在、Web技術で開発できる
ハードウェアなんて少ねんじゃね?
JS Board
Arduino
Espruino
Tessel
http://cylonjs.com/
https://github.com/rwaldron/johnny-five
http://www.espruino.com/
https://tessel.io/
BeagleBone Black
http://beagleboard.org/Products/
BeagleBone+Black
http://au-fx.kddi.com/
Open Web Board
Sperk core
https://www.spark.io/
http://www.we-io.net/
WEIO
https://www.kickstarter.com/projects/gfw/espruino-javascript-for-things
http://www.espruino.com/
https://gist.github.com/bathtimefish/d29319dc87c6d046480c
電子工作できなくてもできる解説書きました
http://bathtimefish.hatenablog.com/entry/2014/12/14/161305
秋月とかで買える
センサーがふつうに
付けられる
Arduinoでよく使われるセンサー
を意識してる感じ
ビルトインライブラリが豊富で
プログラミングが手軽にできる
http://www.espruino.com/Tutorials
日本語のチュートリアルも豊富
http://qiita.com/advent-calendar/2014/espruino
https://html5experts.jp/rockymanobi/13648/
ウチの猫トイレで稼働中
先日、さらに
すごいのが来た!
http://www.espruino.com/Pico
USBメモリ基盤サイズで
超小型組み込みデバイス
がJSで開発可能に
Tessel
https://tessel.io/
別売りのモジュールをつけるだけ
配線の知識不要
現時点で唯一国内販売されているJS Board
https://www.switch-science.com/catalog/list/563/
https://gist.github.com/bathtimefish/55cc8ef0998d44cc0fb3
node.js互換のAPI
モジュールライブラリは npm でインストールできる
さらにすごいのが
プレオーダー中!
https://tessel.io/
Tessel2
小型化 + Ethernet + USBx2
https://www.spark.io/
Spark Core
http://docs.spark.io/api/
デバイス側はArduinoライクな言語で開発
クラウドでコンパイル、Wifiでファーム書き換え&実行
Rest APIでデバイスのI/Oを制御する
https://github.com/spark/sparkjs
https://github.com/spark/spark-server/
https://github.com/spark/spark-protocol
http://blog.particle.io/2015/05/13/spark-is-now-particle/
Web屋という仕事のこれから Web動向からWeb屋に必要な技術を考えてみる
猫トイレセンサー2号機を開発中。
https://store.spark.io/
廉価版のPhoton, SIM版のElectronがプレオーダー中
http://www.we-io.net/
http://www.we-io.net/doc/examples.html
HTML, JS, CSSで開
発したプログラムを
実行できるIoTデバ
イス
OpenWRT(Linux)
ベース
さすがにやりすぎ
じゃないかと思った 
w
https://www.indiegogo.com/projects/pocketduino-innovation-from-your-pocket
Androidに装着するためのArduino mini
Androidデバイスを様々なセンサー等で拡張可能
Android SDKで開発。つまりJavaなのが気に入らなかった
https://github.com/bathtimefish/cordova-plugin-pocketduino
Cordova Plugin書きました。
Cordovaでアルコールセンサーのデータを受信
CSS Transitionでビールのメーターを制御してる
https://www.mozilla.org/ja/firefox/os/devices/tv/
https://www.kickstarter.com/projects/matchstick/matchstick-the-streaming-stick-built-on-firefox-os
https://github.com/fxosorg/firefoxos-stb-appjam
Web屋という仕事のこれから Web動向からWeb屋に必要な技術を考えてみる
https://github.com/fxosorg/firefoxos-stb-appjam/blob/master/sample/stb-hands-on-sample/js/tv_api.js
WebIDEから起動してみた
まだ足りない?
Wearable Device
Android WearでHTML5
http://blog.ludei.com/cocoonjs-enables-android-wear-html5-app-development/
http://bathtimefish.hatenablog.com/entry/2015/02/10/151129
やりかた書きました。
http://www.reconinstruments.com/products/jet/
先週 Recon Jetが届いたので、
Mobile Chrome App (Cordova + Crosswalk)
をつくってインストールしてみたら動いた。
https://gist.github.com/bathtimefish/c32f94c09a062f3d7c05
スマートグラスもHTML5でいける。
https://www.thalmic.com/en/myo/
3軸 加速度センサー
3軸 ジャイロセンサー
3軸 磁気センサー
筋電位センサー
腕の動きと筋電位による指の動きを検知することができる
BluetoothでPC、モバイルなどのデバイスと連携できる
https://github.com/logotype/MyoJS
https://github.com/logotype/myodaemon
WebSocketでリアルタイム通信が可能。
https://www.kickstarter.com/projects/597507018/pebble-time-awesome-smartwatch-no-compromises
http://developer.getpebble.com/guides/js-apps/pebblekit-js/
ウェアラブルデバイスの普及はアプリ開発の加速がカギ。
開発者が容易&開発者の多いJavaScriptを採用する
デバイスが今後も増加する可能性は高いと思う。
ウェアラブルでHTML5 いつやるの?
次はコイツをどうにかしたい
日本ウェアラブルデバイスユーザー会
w-ug.jp
w-ug.jp
いますぐ登録!
まとめ
FlashをHTML5に書きなおす仕事は価格競争
ソシャゲは賞味期限短くてデスマループ
RWDも当たり前になって価格競争
SEO(笑)
ReactとかAngular言うけどまじみんな
仕事でつかってんの?
そろそろWeb屋は、
いま、Webの専門技術を渇望しているのは画面の外の業界。
組み込み系、デバイスメーカー等と組んでWebを中心とした
サービスの企画・開発が将来の仕事につながると思うから。
画面の外に出るべき。
HTMLやJavaScriptがWeb屋の本質
ではありません。
日常的にWebに携わっている中での経験や知見、
そこから独自の発想ができることがWeb屋の強み。
これからは、Web屋の強みを他の業界で
発揮することが新しいビジネスチャンス、
スキルアップにつながると思います。
マジで新しくて
面白いこと
やりましょう!
Thanks !

More Related Content

Web屋という仕事のこれから Web動向からWeb屋に必要な技術を考えてみる