知らなかったことも色々とあって、とてもよい勉強会でした。新しく知ったキーワードはちゃんと調べなければ！
| p5.jsによるサウンドパフォーマンス Processing的に書いたコードを実行できるJavaScriptライブラリ「p5.js」は、グラフィカルな表現を簡単に表現できるだけでなく、p5.soundライブラリを使うことで、音楽的な表現も手軽に実現できます。 JavaScriptでの表現では、音が扱われることはあまり多くないように思いますが、p5.jsを使ったサウンドパフォーマンスを通じて、楽しみながら、音のプログラミングへのきっかけになればと思います。 | Webサイト 佐藤 好彦 |
演奏は次のサイトで試せる！
| Nuxt.jsで変わる開発フローとUniversal JavaScriptのイマ Vue.js で作られたフロントエンド開発のフレームワーク Nuxt.js の正式版がいよいよ公開されようとしています。 ここ1年ほど、徐々に実例が増えてきたサーバーサイドレンダリング。そのサーバーサイドレンダリングを簡単に行うことができ、かつフロントエンドとサーバーサイドレンダリングを共通のコードで動かすことが可能な「Universal」なSPAを開発する第一歩となればと思います。 | 花谷 拓磨 |
HTML5Experts.jpでNuxt.jsの基本を紹介。今日は概念的な話。Isomorphicと呼ばれていた概念が、Universalに形を変えた。今はSSR(Server Side Rendering)は自作しないことが多い。React向けのSSRエンジンとしNEXT.jsが、Vue向けのSSRエンジンとしてNuxt.jsがでた。これらを使うと、コマンド一発でSSRできる。SSRは作るモノから自然とついてくるモノに。
Nuxt.jsはSSRのためだけのものではない。Babel、webpackなんかの面倒な作業をまとめてやってくれる。starter-templateも充実。SPAを静的サイトとして書き出しすこともできる。SPAのヤクの毛刈り、SEO対策などの面倒な問題を解決してくれる。
Vueの開発パターンの統一、静的サイトジェネレータの必要性、SEO対策を解決。Nuxtによって、コーダー的なWeb屋もSPAエンジニアもどちらもハッピーになる。
| three.js基礎 ブラウザだけで本格的な3D表現ができる、threejsについて話します。はじめにthree.js公式のhello worldを教材として、必要となる基本的な考え方を説明します。次に自作モデル読み込み方法、テクスチャアニメーション、HUDレイヤ作成等のthree.jsのTIPSを紹介します。 | 株式会社オープンストリーム 竹内 佑介 |
立体がくるくる回るHello World的なコードでさえ複雑。しかし、難しく見えるのは3D特有の概念を知らないから。Render、Camera、Scene、Mesh、Geometry、Materialの6つの概念。
これがわかると、難しくみえたコードも、6つの概念を初期化とrequestAnimationFrameを使った無限ループだけ。
キャラクターのアニメーション、画面を動かしても固定にするゲージなど、各種Tipsは以下のサンプルで。
| ゼロから始める? Service Worker Webkit の Indevelop 事件以来、Service Worker に希望が持てるようになりました。Service Worker で何ができるのか、基本的な機能や挙動から導入の際の注意などをお話します。 | 株式会社 Nagisa 宮崎優太郎 |
Service Workerはブラウザとサーバーの間に位置する。主にCacheやWeb Pushで使われる。同一オリジンのスクリプト、HTTPSが必要がある。
ライフサイクル。Resister, Installed, Activatedで一度止まる。2回目のアクセスから有効になる。初回から有効にするには、clients.claim()を使う。アプリを使っている途中でふるまいが変わるおそれがあるので、なるべくならclients.claim()を使わない方がよい。
バージョンを上げるなどの条件で、Updateが走る。そこで一度止まる。理由は同じ。skip.waiting()を使うとこれもスキップできる。
Pre CacheはSWインストール時にキャッシュ。Runtime CacheはFetchイベント時にキャッシュ。これらのコードは単調なので、GoogleChrome/workboxなどのツールを使うとよい。webpackだったら、workbox-webpack-pluginなどを使うとよい。
Web Pushは、通知の送信者、受信者に加えて、Push ServerやブラウザベンダーごとのGatewayがあり、なかなか難しいので、PushWooshなどのサービスを使うことが多い。
| Polymer の update に見る Web Components の過去/現在、そして未来 Polymer Summit 2017 にて Polymer 3.0 の tech プレビュー版が発表/公開されました。そこで見えてきたのはブラウザサポートにおける Web Components 仕様の変化でした。 本セッションではそれらを含めたWeb Componentsの過去から未来まで解説します。 | 永和システムマネジメント ブログ@sizuhiko 岸田 健一郎 |
スライド「Polymer の update に見る Web Components の過去/現在、そして未来 / jsfes-2017-autumn」
Web ComponentsはCustom Elements, Shadow DOM, HTML Templete, HTML Importsの4つの仕様からなる。これらを簡単に使えるのがPolymer。仕様が変わったりしても、Polymerを使っていれば吸収できるメリットもある。
今や8割がアプリからのアクセスでWebからのアクセスは2割のみ。それをなんとかしようとWebの人がPWAなどでがんばっている。日本では、Polymer Japanというコミュニティができた。
PolymerはHTML Importsではなく、JS Modulesを採用した。これによって、ほぼ全てのブラウザで動くことに。
最新のPolymerでは、BowerからYarn + npmに変更された。Yarnは使わなくなるかもしれない。
Polymerは他のフレームワークからも使える。Angular, Vueは問題なし。Reactは少しうまくいかないことも。
Web ComponentsはCustom Elements, Shadow DOM, HTML Templete, HTML Importsの4つの仕様からなる。これらを簡単に使えるのがPolymer。仕様が変わったりしても、Polymerを使っていれば吸収できるメリットもある。
今や8割がアプリからのアクセスでWebからのアクセスは2割のみ。それをなんとかしようとWebの人がPWAなどでがんばっている。日本では、Polymer Japanというコミュニティができた。
PolymerはHTML Importsではなく、JS Modulesを採用した。これによって、ほぼ全てのブラウザで動くことに。
最新のPolymerでは、BowerからYarn + npmに変更された。Yarnは使わなくなるかもしれない。
Polymerは他のフレームワークからも使える。Angular, Vueは問題なし。Reactは少しうまくいかないことも。
| MongooseOSでJavaScript IoT事始め MongooseOSは、マイコンに直接書き込むことのできるIoT特化型OSです。ブラウザ上でJavaScriptを使ってIoTプログラミングをすることができます。 今回はMongooseOSを使ったJavaScript IoTの紹介と、その技術を応用した実際のモノづくり事例をお話します。 | オイシックスドット大地株式会社 Engineer 篠原弘光 |
スライド「Mongoose OSとIFTTTでJavaScript IoT事始め / IoT with Mongoose OS and IFTTT」
IoTはハードウェア、組み込みといったイメージがある。フロントエンドの技術で手軽にIoT開発ができる。
Wi-FiとBluetoothを搭載した開発ボード(ESP32など)が3000円くらいで手に入る。また、Grove Systemというものがあり、差すだけで簡単につなげられるセンサーがたくさんある。
MongooseOSはコマンド一発で開発ボードにOSを書き込める。MongooseOSエディタでを起動すると、すぐにJavaScriptで開発ができる。
IFTTTのWebhooksをたたいて、イベントをおこす。例えば、Push Bulletというサービスにつなげば、Push通知がだせる。
IoTはハードウェア、組み込みといったイメージがある。フロントエンドの技術で手軽にIoT開発ができる。
Wi-FiとBluetoothを搭載した開発ボード(ESP32など)が3000円くらいで手に入る。また、Grove Systemというものがあり、差すだけで簡単につなげられるセンサーがたくさんある。
MongooseOSはコマンド一発で開発ボードにOSを書き込める。MongooseOSエディタでを起動すると、すぐにJavaScriptで開発ができる。
IFTTTのWebhooksをたたいて、イベントをおこす。例えば、Push Bulletというサービスにつなげば、Push通知がだせる。
| RxJSで始めるリアクティブプログラミング Angularが正式採用したことから注目を浴びている「RxJS」。RxJSは多機能で色々な事ができる反面、慣れるまで使い所が難しかったりします。今回はそんなRxJSの基本と学び方、そして使い方などのお話をいたします。 | 株式会社トゥーアール to-R 西畑 一馬 |
RxJSは敷居が高い。サンプルコードをみると、jQueryだと簡単なものもたくさん書かなければならないので、面倒そう。100種類位の関数があるのでそれを使いこなす必要がある。Lean RxJSというページが便利。
RxJSの利点はある程度使いこなさないとみえてこない。ただし、そこまでいくのは大変。理解するポイントは3つ。非同期、リアクティブ、データストア。
非同期は、forkJoin、concatAllなどを使う。JSでもできるが、非同期処理をうまくさばける。
リアクティブは、ストリームの値に応じて処理を実行するということ。一つのイベントで複数の処理をできるのも特徴。SPAでは1つの情報変更で多くの処理が発生。
データストアは、Angularでデータストアのために使える。
RxJSの利点はある程度使いこなさないとみえてこない。ただし、そこまでいくのは大変。理解するポイントは3つ。非同期、リアクティブ、データストア。
非同期は、forkJoin、concatAllなどを使う。JSでもできるが、非同期処理をうまくさばける。
リアクティブは、ストリームの値に応じて処理を実行するということ。一つのイベントで複数の処理をできるのも特徴。SPAでは1つの情報変更で多くの処理が発生。
データストアは、Angularでデータストアのために使える。
| GAS（Google Apps Script）がつくりだすJavaScriptとIoTハードウェアの禁断の関係 JSでIoTというと、Johnny-Fiveが有名です。しかし、安価なマイコンボードでは、Johnny-Fiveをその上だけで動かすことは困難で、必ず母艦となるPCなどのデバイスが必要になってきます。 そこでGASのWebAPI機能を使って、母艦のPC不要を不要にしつつ、マイコンボードへのプログラミングを最小限にして、メインのロジックをGAS上で書く手法を紹介します。 | ブログ ポキオ |
今、WiFiが使える安価なマイコンボードがいっぱいある。Rasbrry Pi, ESpr, Nefry, ESP32など。
マイコンボードによっては母艦PCが必須に。ラズパイとJonny-FiveがあればOK。非力なマイコンボードでどうするか？
例えば、外部のサーバーからAPIでデータをとると、認証とかパースとかが大変。それを、GAS (Google Apps Script)でやるとマイコンボードはハードに関する処理だけに。GASはWeb APIを簡単につくれるのでいろいろとできる。
サンプルコード
https://github.com/pokiiio/2017-11-19_JSFES
マイコンボードによっては母艦PCが必須に。ラズパイとJonny-FiveがあればOK。非力なマイコンボードでどうするか？
例えば、外部のサーバーからAPIでデータをとると、認証とかパースとかが大変。それを、GAS (Google Apps Script)でやるとマイコンボードはハードに関する処理だけに。GASはWeb APIを簡単につくれるのでいろいろとできる。
サンプルコード
https://github.com/pokiiio/2017-11-19_JSFES
