# 今日使うサービス - HackMD（ https://hackmd.io/s/S1JT9dxaf ） - sli.do （ https://app2.sli.do/event/2gwflwww ） HackMDはパソコンで開いて、Sli.doはスマホでやるのがいいかも。 # 最新のウェブ技術を体験しよう（堀さん）チェック フロントエンドエンジニア [@steelydylan‬](https://twitter.com/steelydylanhttps://twitter.com/steelydylan) ## 大きくなるWebの役割 - SPA (Single Page Application) - 例）Twitter - 例）Netflix - PWA (Progressive Web App) ### PWA ### [pwa.rocks](https://pwa.rocks/) ホーム画面に追加してみよう! ## Webで今どんなことができるのか？ [https://whatwebcando.today/](https://whatwebcando.today/) ### ビデオチャット [https://appear.in/](https://appear.in/) [https://appear.in/appleple](https://appear.in/appleple) ### 音声認識 [https://www.speechrec.jp/](https://www.speechrec.jp/) ### 作曲ツール [https://www.soundtrap.com/studio/](https://www.soundtrap.com/studio/) ### ゲーム - [http://9leap.net/](http://9leap.net/) - [https://jerseyshorefistpump.com](https://jerseyshorefistpump.com) - http://9leap.net/games/2374 ### Web GL - [PlayCanvas](https://playcanvas.com/) - [Three.js](https://threejs.org/) ### Web RTC - [https://github.com/webrtc/samples](https://github.com/webrtc/samples) さっきのSkypeみたいなサービスではWebRTCが使われている ### Canvas - [enchant.js](http://enchantjs.com/) - パフォーマンスがあまりよくない。。。 - [phina.js](http://phinajs.com/) ### Web Audio API - [HOWLER.js](https://howlerjs.com/) ### Speech Recognition API - [https://cloud.google.com/speech-to-text/](https://cloud.google.com/speech-to-text/) ### Web VR - [A-FRAME](https://aframe.io/) - Mozillaが開発している ### デジタルサイネージ - [https://www.youtube.com/watch?v=vBFZOSLlYcc](https://www.youtube.com/watch?v=vBFZOSLlYcc) - - Kiosk モード http://uber.github.io/deck.gl/#/ ## 求人 - [Wantedly](https://www.wantedly.com/projects/206866) # 変化し続けるウェブ技術を追うためには〜ウェブ業界で生き残るための情報収集のしかた〜（森田） ### 配信されているものを聴く~~~~ ### Podcast - [Rebuild.fm](https://rebuild.fm/) - [Automagic Podcast](http://automagic.fm/) - [Takram Cast](https://itunes.apple.com/jp/podcast/takram/id1161310459?mt=2) ### 勉強会 - [CSS Nite](http://cssnite.jp/) - [Inside Frontend ](https://inside-frontend.com/) - [Frontrend](https://frontrend.connpass.com/) - [UI Crunch](https://ui-crunch.connpass.com/) ## メールマガジン * Frontend Weekly * Code Grid * Web Tool Weekly * Frontend Focus * Web Design Weekly 〇〇Weeklyで探せばだいたいあります ## Facebook Group * [webクリエイターのための情報交換所](https://www.facebook.com/groups/241838242545737/) * [HCD-Net 東海](https://www.facebook.com/groups/1853168224919554/) * [UI Crunch](https://www.facebook.com/groups/1483413475241684/) ## 作品を見る * [Drrrible](https://dribbble.com/) * [Bechance](https://www.behance.net/) * [Pinterest](https://www.pinterest.jp/) * [Codepen](https://codepen.io/) * [Product Hunt](https://www.producthunt.com/) * [GitHub](https://github.com/) * [makepost](https://www.makepost.net/) ## 技術書 * Oreilly * BNN社 * ボーンデジタル * ノンデザイナーズブック * リーダブルコード * MdN * [その本、図書館にあります](https://chrome.google.com/webstore/detail/%E3%81%9D%E3%81%AE%E6%9C%AC%E3%80%81%E5%9B%B3%E6%9B%B8%E9%A4%A8%E3%81%AB%E3%81%82%E3%82%8A%E3%81%BE%E3%81%99%E3%80%82/ldidobiipljjgfaglokcehmiljadanle?hl=ja) ### ウェブメディア * [WPJ](https://www.webprofessional.jp/) * [コリス](https://coliss.com/) * [Web担当者フォーラム](https://webtan.impress.co.jp/) * [UX Milk](http://uxmilk.jp/) * [CSS Tricks](https://css-tricks.com/) * [Smashing Magazine](https://www.smashingmagazine.com/) * [大阪手作り結婚指輪口コミ](https://yubiwa.net/) * [Sitepoint](https://www.sitepoint.com/) ... など。好きなメディアを見つけよう！ - [Feedly](https://feedly.com/) ## セミナーに参加登録する ### 名古屋の勉強会 - [WCAN](https://wcan.jp/) - [contents.nagoya](https://contents.nagoya/) - [UX 名古屋](https://peatix.com/group/22462) - [HCD-Net](https://peatix.com/group/50276) - [Startup Weekend](https://swnagoya.doorkeeper.jp/) - [Ateam Tech Meet Up #エンジニアLT＆交流会](https://ateam.connpass.com/event/82837/) - [Mobile Act NAGOYA](https://mobileactnagoya.connpass.com/) - [Frontend Nagoya](https://frontend758.doorkeeper.jp//) - [DTPの勉強部屋](https://study-room.info/dtp/) - [Nagoya.js](https://nagoya-js.doorkeeper.jp/) - [名古屋勉強会ラムダ](https://nagoya-benkyokai.com/) ## 似た分野を勉強している仲間やライバルを見つける（その2） - [NEXT COMMUNICATION FORUM](https://www.nttdocomo.co.jp/campaign_event/tokai/ncf_award/) - [技能五輪](http://www.javada.or.jp/jigyou/gino/zenkoku/) ## 発信の場を持つ - [OthoEvent#30](https://othlotech.connpass.com/event/85753/) - [note](https://note.mu/) - [Qiita](https://qiita.com/) - OthloTechの次回イベントはこちら💁[https://othlotech.connpass.com/event/85753/](https://othlotech.connpass.com/event/85753/) ## アイディアを吸収できる場を把握しておく - [OthloEvent](https://othlotech.connpass.com/) - [Drrrible](https://dribbble.com/) # これから変化し続けるウェブ技術を追う　仕組みをつくるワークショップ 今日の帰りに実践できるように、情報収集の仕組みをつくってみよう。 ## RSSリーダー - [Feedly](https://feedly.com/) ### Webメディア * [CSS Tricks](https://css-tricks.com/) * [Smashing Magazine](https://www.smashingmagazine.com/) * [WPJ](https://www.webprofessional.jp/) * [コリス](https://coliss.com/) * [UX Milk](http://uxmilk.jp/) ... など。好きなメディアを見つけよう！ ## リマインダー - iOSのリマインダー - Google Todo（4月25日リリース！）[iPhone](https://itunes.apple.com/jp/app/id1353634006)/[Android](https://play.google.com/store/apps/details?id=com.google.android.apps.tasks) ## 記事を保存しておく - [はてなブックマーク](http://b.hatena.ne.jp/) ## 参加したい勉強会を探して登録する ### 名古屋の勉強会 - [WCAN](https://wcan.jp/) - [contents.nagoya](https://contents.nagoya/) - [UX 名古屋](https://peatix.com/group/22462) - [HCD-Net](https://peatix.com/group/50276) - [Startup Weekend](https://swnagoya.doorkeeper.jp/) - [Ateam Tech Meet Up #エンジニアLT＆交流会](https://ateam.connpass.com/event/82837/) - [Mobile Act NAGOYA](https://mobileactnagoya.connpass.com/) - [Frontend Nagoya](https://frontend758.doorkeeper.jp//) - [DTPの勉強部屋](https://study-room.info/dtp/) - [Nagoya.js](https://nagoya-js.doorkeeper.jp/) - [名古屋勉強会ラムダ](https://nagoya-benkyokai.com/) ## 配信されているもの ### Podcast - [Rebuild.fm](https://rebuild.fm/) - [Automagic Podcast](http://automagic.fm/) - [Takram Cast](https://itunes.apple.com/jp/podcast/takram/id1161310459?mt=2) ### 勉強会 - [CSS Nite](http://cssnite.jp/) - [Inside Frontend ](https://inside-frontend.com/) - [Frontrend](https://frontrend.connpass.com/) - [UI Crunch](https://ui-crunch.connpass.com/) ## 好きなサービス連携して自動化してみよう - [IFTTT](https://ifttt.com/discover) 例）Twitterで特定のハッシュタグをつけてツイートしたらSlackに流す 例）TwitterでいいねしたらEvernoteのノートに保存する