2017年11月18日土曜日

「秋のJavaScript祭 in mixi 2017」に参加しました


知らなかったことも色々とあって、とてもよい勉強会でした。新しく知ったキーワードはちゃんと調べなければ!

p5.jsによるサウンドパフォーマンス
Processing的に書いたコードを実行できるJavaScriptライブラリ「p5.js」は、グラフィカルな表現を簡単に表現できるだけでなく、p5.soundライブラリを使うことで、音楽的な表現も手軽に実現できます。
JavaScriptでの表現では、音が扱われることはあまり多くないように思いますが、p5.jsを使ったサウンドパフォーマンスを通じて、楽しみながら、音のプログラミングへのきっかけになればと思います。
Webサイト 佐藤 好彦
iPadを動かしならが音の高低などを変えるデモからはじまって、ノイズなMIDIなど様々な演奏をキーボードで。もはや、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は少しうまくいかないことも。

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通知がだせる。

RxJSで始めるリアクティブプログラミング
Angularが正式採用したことから注目を浴びている「RxJS」。RxJSは多機能で色々な事ができる反面、慣れるまで使い所が難しかったりします。今回はそんなRxJSの基本と学び方、そして使い方などのお話をいたします。
株式会社トゥーアール 
to-R
西畑 一馬
RxJSは敷居が高い。サンプルコードをみると、jQueryだと簡単なものもたくさん書かなければならないので、面倒そう。100種類位の関数があるのでそれを使いこなす必要がある。Lean RxJSというページが便利。

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上で書く手法を紹介します。
ブログ 
Twitter
ポキオ
今、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

2017年5月30日火曜日

「Mesos Meetup Tokyo #1」に参加しました


「Mesosってなに」からデモもあって初心者にとってはとてもわかりやすいMeetupで、非常に勉強になりました。資料だけでなく動画もイベントページで公開とのこと。すばらしい!

Opening、会場説明


Mesos User Groupsは世界で25都市が登録。Mesos Conなどが開催されている。
Mesos User Group Tokyoは、2ヶ月に1回位勉強会を実施予定。

Mesosは、2009年の論文からスタートし、2016年頃にコンテナ技術の発展とともに盛り上がり始めた。今、最も注目されている技術の1つ。

Mesosってなに



質問「Mesos使ったことある人?」 => 半分くらい

Apache Mesosの概要


仮想化環境のシステム管理では、クラスタのリソースを効率的に管理するのが難しい。今までは、クラスタは組めても、クラスタ個別の最適化まで。
データセンターのリソース全てを管理するのがMesos。Lunuxカーネルのリソーススケジュールと同じ原理でデータセンター全体を管理する。

Apache Mesosのメリット


これまではクラスタ個別の管理のため、リソースの有効活用に限界があったが、Mesosを使うと、データセンター全体でリソース配分ができ、データセンター全体で最適なリソース配分ができる。

Apache Mesosの生い立ち


2009年の論文がスタート。
2010年にはTwitterが使い始める。
2011年にMesosという名称になり、データセンターのリソース最適化というコンセプトになる。
2013年にMesosphereという会社が立ち上がる。
2016年にコンテナオーケストレーションが盛り上がり、その1つとしてMesosも盛り上がりはじめる。

Apache Mesosの主な特徴


http://mesos.apache.org/


  • LINEAR SCALABILITY
  • HIGH AVAILABILITY
  • CONTAINERS
  • PLUGGABLE ISOLATION
  • TWO LEVEL SCHEDULING
  • APIS
  • WEB UI
  • CROSS PLATFORM


Mesosの導入企業


airbnb, NETFLIX, UBER, Twitter, yelpなどモダンなサービスの多くでは既に採用されている。

Apache Mesosのアーキテクチャー


基本はこの3つ。

  • Mesos Masters
    マスターはスレーブのタスク調整と管理を行う。スレーブ、フレームワークを管理し、リソースの割り当てと最適配置を行う。冗長化構成が基本で、ZooKeeperを用いて冗長化を実現している。
  • Mesos Slaves
    スレーブはどれだけタスクを処理できるかをマスタに報告し、マスタからの要求に応じてタスクを実行する。タスクの1つ1つをコンテナ化して実行するため、コンテナオーケストレーションの技術と言われることがある。
  • Framework
    ユーザーが利用するインターフェイス。SchedulerとExecutorで構成される。SchedulerはMesosマスターへのJobの登録を担当し、オファーを処理。Executorはタスクをs実行するスレーブ上のプログラム、コマンドなど。DevOps tooling, Long Running Services, Mechine Learning, Big Data Processing, Batch Scheduling, Data Storageなどの分野で多くのツールがMesosに対応しており、Mesosのフレームワークとして用いることができる。


重要なフレームワーク



  • Marathon
    長期実行アプリを起動するよう設計されたフレームワークの1つ。Mesosを使うならMarathonも使うというくらい定番。コンテナオーケストレーションには必須。


  • Chronos
    バッチアプリを起動するように設計されたフレームワークの1つ。Airbnbによってcronの代わりに開発されたフレームワーク。

Mesosphere DCOS


Mesosをカーネルとするならば、MesosphereはデータセンターOS。Mesosの上にMesos SDK, Marathon, Chronosが乗っている。MEsosphere Enterprise DCOSは、Enterprise製品としてのMesosのディストリビューション。
Mesos単体ではカーネルレベルなので活用が難しい。MesosphereにはOSS版もある。

MesosとDCOSで実現できるあんなことこんなこと


Mesosのデモ。
MesosはThoughtWorks Tech Radar Vol.16でも紹介されている。

AWSからDC/OSをインストール


https://dcos.io/install から。
入力項目はほとんどない。お金がかかるので注意。

クラスタ環境へのアクセス方法いろいろ


ブラウザからのアクセスが簡単。慣れてくるとCLIが便利。

サービスの起動方法いろいろ

  • App JSON
    JSONでサービスを定義してコマンド1発で起動できる。
  • Universe
    GUIでパッケージを選択して簡単に起動できる。

コマンド1発でAzure上にDC/OS環境を作る方法


https://www.slideshare.net/ToruMakabe/1azuredcos

Azure上にDC/OS環境を作るデモ。
先程のプレゼンでAWSは15分だったけど、Azureはコマンド1発でいける。10分以内でできる。 => 今回は7分41秒で成功!

Azure Container ServiceはIaaS+。Managed PaaSではない。インフラとDC/OSの環境構築を楽に早く作る仕組み。DC/OS、Kubermetes、Docker Swarmを選択可能。




Mesos・DCOS Deepdive(English)


データセンターは、ハード、OS、アプリという単純な構造から変化している。マイクロサービスによって柔軟で、効率的で、頑強で、個別にスケールできるより複雑な構造になっている。アプリの言語の種類もバージョンも違う。全てがコンテナの上で動く。

データ処理は、バッチ、マイクロバッチ、イベントプロセッシングと変化している。イベントプロセッシングはマイクロ秒のレベルの高速処理。

Apache MesosはTwitterが採用し、今ではApacheのトッププロジェクトで、多くの先端企業が採用している。

DC/OSはモダン分散アプリケーションを可能にする。コンテナ上のマイクロサービスとビッグデータ分析を実現する。

ユースケースの1つ。esriはScalaでイベントソーシング、Kafkaでメッセージブローカー、Spark、Elasticsearch、JavaScriptの地図アプリというスタックで処理をしている。=> デモ

設定変更、バイナリの変更、クラスターのメンテナンス(バックアップ、リストア、再起動)などを管理することができる。

多くのコンテナで動くサービスにおける、モニタリング、ログ分析、アップグレード、障害対応、トラブルシューティングなどの課題に対処できる。

DC/OSの中のクラスターは他のクラスターからアクセス可能な仮想IPを持つ。DNSが仮想IPを指し示すことでServieに名前でアクセスできる 。

LT: おぷすた開発者がDC/OS on OpenSUSEでMesosに入門してみた的ななにか


Meoss, DC/OSをOpenSUSE(Linux)上で動かす。OpenSUSE, VirtualBox, Vagrant, DC/OSとインストール。 いろいろ大変だけど、なんとか動くよ。

LT: RancherでMesosクラスタをデプロイしてみる的ななにか


Rancherを使ってMesosを簡単に立ち上げるデモ。Rancherはコンテナ環境を管理するためのOSS。RancherでGUIでコンテナを立ち上げて、監視もできる。
Rancher ♡ Mesos

LT: サービスカタログと夏フェスにまつわるなにか


https://www.slideshare.net/cyberblackvoom/ranchermesosmarathon?next_slideshow=1

初心者が、Mesosを学ぶための情報紹介。

  1. Mesosってなに?のリンク集。
  2. RancherとMesos。Rancherにはオーケストレーション環境を簡単に構築できる環境テンプレートがある。Mesosも。本家のカタログもコミュニティのカタログもある。
  3. Rancher, Mesos, Marathonをつくる手順。



2017年2月23日木曜日

「Polymer.co-edo meetup #1」に参加しました


Reactでアプリつくって、最初はよかったんだけど段々と「うーん」となって、Vue.jsやRiotがいいと聞いてさわってみても「うーん」で、Angular2はTypeScriptが苦手なので「うーん」で、そういえば、昔Polymerさわったなぁと思っていたらちょうど勉強会があったので参加してみました。
結果、とても好きになりました。なんでPolymer0.5のときイマイチと思ったのかなぁ。


Extensible Web


Polymerの説明の前に主催者の岸田さんからExtensible Webの話がありました。
その詳細はオリジナルをみてもらうとして、私は次のムーブメントだと理解しています。

Web 標準化団体がWebをつくるのではなく、全てのエンジニアでWebをつくっていこう

これまでも、jQueryなど外部のライブラリで実現されていたことが標準仕様に取り込まれてきた歴史はあるけれど、はっきりと変えていこうという意思表示に美しさを感じます。


Web Components / コンポーネント指向


Extensible Webの次はWeb Components。
Web Componentsが何かというのはW3Cの仕様のとおりということになります。
Web Componentsはコンポーネント指向の仕様で、Webのコンポーネント指向について、私は次のように理解しています。

開発者が(HTMLとCSSとJSを使って)新しいコンポーネント(タグ)を定義して再利用できるようにする

この考えにあてはめると、ReactもVue.jsもRiotもコンポーネント指向です。
でも、これらはW3CのWeb Components仕様に準拠しているわけではなく、準拠しているものには、MozillaのX-TagsやGoogleのPolymerなどがあります。
X-TagsとPolymerを比べると、Polymerの方はGoogleらしく、Material Design、Google API、Progressive Web Appsを取り入れたものがすぐ使えるという特徴があります。


Progressive Web Apps


Progressive Web Appsは、Googleが提唱しているWebアプリです。
仕様がある訳ではないようですが、私は次のとおり理解しています。

ネイティブアプリと同じように、インストールできて、ホームから素早く起動できて、オフラインでも使えて、プッシュ通知もできるなどの特徴を兼ね備えたWebアプリ

Googleのサイトに従ってやれば、できなくないですが、Polymerを使うとPWAが簡単にできるとのこと。


Polymerを使ってみる


岸田さんがGoogleのCodelabsに登録されているチュートリアルのうち、 Polymerに関連したものピックアップしてくれています。
今回は「コーディングなしでGoogleMapを作ってみよう」をやってみました。

Polymerには、すぐに使えるWeb Componentsが用意されているので、HTMLとCSSがわかれば、JSを使わなくてもある程度のことができてしまいます。
その他のWeb Componentsも使えて、WEBCOMPONENTS.orgでは開発者が自作のweb componentsを公開できるそう。


Polymer.co-edo meetupは定期的に開催するそうだし、Polymer 2.0は2017年の第1クオーターのリリースを目指しているそうなので、今年中に何かアプリをつくってみようと思います。