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

PDF
JavaScriptで ごく普通にhttp通信をする 〜esp8266+espruinoでhttp getリクエストをするテスト〜
PDF
Espruinoの紹介
PDF
Swaggerのさわりだけ
PPTX
Thing.jsについて
PPTX
Mozapps installがなくなったことへの不平不満
PDF
JS非同期処理のいま
PPTX
react-jsonschema-formについて
PPTX
Fetch apiについて
JavaScriptで ごく普通にhttp通信をする 〜esp8266+espruinoでhttp getリクエストをするテスト〜
Espruinoの紹介
Swaggerのさわりだけ
Thing.jsについて
Mozapps installがなくなったことへの不平不満
JS非同期処理のいま
react-jsonschema-formについて
Fetch apiについて

What's hot (20)

PDF
業務系WebアプリケーションがStrutsから旅立つ日
PDF
Htmlのコトバ
PDF
Yeomanではじめる爆速webアプリ開発
PDF
次世代Web業務アプリケーション
PDF
HTML5でOpen Dataをやってみた
PDF
Gaiaのソースコードに見るちょっと未来のweb app開発
PDF
オープンソースで始めるオフラインアプリケーション開発入門
PDF
【Web TECH FORUM 2017 in大阪】グレープシティのJavaScriptライブラリ
PDF
【Web TECH FORUM 2017 in大阪】Webシステム開発とJavaScript UIコンポーネント
PDF
【Web TECH FORUM 2017 in大阪】JavaScript UIコンポーネント の選定と活用ポイント
PDF
LIGでのDocker活用
PDF
業務アプリケーションにおけるモダンWeb開発の現状ーHTML5開発って簡単なの?
KEY
JavaScript on GitHub (#kyotojs)
PDF
PhoneGapで作るハイブリッドアプリケーション
PDF
つかってみよう!Yeoman 〜riaビルドツール超入門+α〜
PDF
いい感じのフロントエンド開発環境を作ってみた
PDF
Front-end package managers
PDF
Html5 and Graphics
PDF
これからのモバイルWebと最新動向
KEY
Ie6をさっさとやめよう その2
業務系WebアプリケーションがStrutsから旅立つ日
Htmlのコトバ
Yeomanではじめる爆速webアプリ開発
次世代Web業務アプリケーション
HTML5でOpen Dataをやってみた
Gaiaのソースコードに見るちょっと未来のweb app開発
オープンソースで始めるオフラインアプリケーション開発入門
【Web TECH FORUM 2017 in大阪】グレープシティのJavaScriptライブラリ
【Web TECH FORUM 2017 in大阪】Webシステム開発とJavaScript UIコンポーネント
【Web TECH FORUM 2017 in大阪】JavaScript UIコンポーネント の選定と活用ポイント
LIGでのDocker活用
業務アプリケーションにおけるモダンWeb開発の現状ーHTML5開発って簡単なの?
JavaScript on GitHub (#kyotojs)
PhoneGapで作るハイブリッドアプリケーション
つかってみよう!Yeoman 〜riaビルドツール超入門+α〜
いい感じのフロントエンド開発環境を作ってみた
Front-end package managers
Html5 and Graphics
これからのモバイルWebと最新動向
Ie6をさっさとやめよう その2
Ad

Viewers also liked (18)

PDF
今日だけで出来るiframeのFacebookページ 告健士郎
PDF
第59回 HTML5とか勉強会 ーIoT/WoT発表資料「Web Controller for V-Sido CONNECT:WebRTCとWebGLで作...
PDF
Dico du futur de l'amour
PPS
Evolucion De La Ead
PDF
Artificial Intelligence 06.2 More on Causality Bayesian Networks
PDF
testimonial
DOCX
Peter LaBrash resume
PPTX
Digimon leonardo zec & ivan đopar 7.d
PDF
Getting Started With INBOUND Marketing
PPTX
Presentación Iriana Colina Seguridad industrial 2 semestre
PPTX
The evolution of body image *
PPSX
A mulher tarcísio costa
PPT
Cake Phpで簡単問い合わせフォームの作り方
PPT
Introducción a la computacón
PPTX
Leveraging social media for admins
PDF
How FreeeUp Works
PPTX
Mapa conceptual 26 de julio milena villamizar power point
PDF
今日だけで出来るiframeのFacebookページ 告健士郎
第59回 HTML5とか勉強会 ーIoT/WoT発表資料「Web Controller for V-Sido CONNECT:WebRTCとWebGLで作...
Dico du futur de l'amour
Evolucion De La Ead
Artificial Intelligence 06.2 More on Causality Bayesian Networks
testimonial
Peter LaBrash resume
Digimon leonardo zec & ivan đopar 7.d
Getting Started With INBOUND Marketing
Presentación Iriana Colina Seguridad industrial 2 semestre
The evolution of body image *
A mulher tarcísio costa
Cake Phpで簡単問い合わせフォームの作り方
Introducción a la computacón
Leveraging social media for admins
How FreeeUp Works
Mapa conceptual 26 de julio milena villamizar power point
Ad

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

PDF
FxOSはウェアラブルデバイスの夢を見るか?
PDF
HTML5が最近どうなっていて何があぶなっかしいのか?
PDF
Html5でOpen Dataをやってみる
PDF
ボクたちのWWW Webクリエイターのこれからを考える
PDF
HTML5 and Graphics
KEY
みなさんがHtml5をやらなくていい3つの理由
KEY
Platform.html5
KEY
HTML5時代のwebクリエイターに必要なこと
KEY
Html5時代のクリエイターのあり方
KEY
ON HTML5 FIELD で書き尽くせなかったこと
KEY
リモートデバッグツール Weinerをつかってみた
PDF
AMD basic and practice
PDF
Visual Studio Code のこれまでとこれから at OSC 2021 Online/Spring
PPTX
Kerasで可視化いろいろ
ODP
HTML5 のお話
PDF
2014年を振り返る 今年の技術トレンドとDockerについて
KEY
非同期処理をちょっとはラクに。Promises:aほか
PDF
カヤックHTMLファイ部のUI・UX (第57回 HTML5とか勉強会 / 2015.5.19)
PPTX
[okaweb × HTML5 fun] HTML5で人気のAPIを使って 未来価値を創造しよう
PDF
KeycloakのCNCF incubating project入りまでのアップストリーム活動の歩み
FxOSはウェアラブルデバイスの夢を見るか?
HTML5が最近どうなっていて何があぶなっかしいのか?
Html5でOpen Dataをやってみる
ボクたちのWWW Webクリエイターのこれからを考える
HTML5 and Graphics
みなさんがHtml5をやらなくていい3つの理由
Platform.html5
HTML5時代のwebクリエイターに必要なこと
Html5時代のクリエイターのあり方
ON HTML5 FIELD で書き尽くせなかったこと
リモートデバッグツール Weinerをつかってみた
AMD basic and practice
Visual Studio Code のこれまでとこれから at OSC 2021 Online/Spring
Kerasで可視化いろいろ
HTML5 のお話
2014年を振り返る 今年の技術トレンドとDockerについて
非同期処理をちょっとはラクに。Promises:aほか
カヤックHTMLファイ部のUI・UX (第57回 HTML5とか勉強会 / 2015.5.19)
[okaweb × HTML5 fun] HTML5で人気のAPIを使って 未来価値を創造しよう
KeycloakのCNCF incubating project入りまでのアップストリーム活動の歩み

More from Masakazu Muraoka (9)

PPTX
Async awaitでの繰り返し処理についての小話
PDF
実はとれました。System xhrでcsv形式のopen dataを取得する
PDF
Async flow controll basic and practice
PDF
JAWS-UGにゴマをすろうと思ってAWSでHTML5してみた
PDF
MarkupCafe - html5j Markup group
PDF
つかってみよう!Yeoman 〜HTML5 Webアプリ開発を効率化するツールの紹介〜
PDF
Yeoman RIAビルドツール超入門
PDF
Webセキュリティ 3つの視点から考えるサイバー攻撃と自分
PDF
IE6をやめようと思ってももう手遅れ
Async awaitでの繰り返し処理についての小話
実はとれました。System xhrでcsv形式のopen dataを取得する
Async flow controll basic and practice
JAWS-UGにゴマをすろうと思ってAWSでHTML5してみた
MarkupCafe - html5j Markup group
つかってみよう!Yeoman 〜HTML5 Webアプリ開発を効率化するツールの紹介〜
Yeoman RIAビルドツール超入門
Webセキュリティ 3つの視点から考えるサイバー攻撃と自分
IE6をやめようと思ってももう手遅れ

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