2019年5回目となる Polymer.co-edo ミートアップ を開催しました。

まず最初に私から、先日の合宿に参加してKARAKURIを作ったについて共有しました。 edo-karakuriの仕組みやできることなど、edo-blogcardとの関連など。

lit-loaderのコンパイルがエラーになる？

で、そのあとはedo-blogcardとedo-karakuriをつないで、動かそうとしたところ、lit-loaderというかBabelでエラーになります。 どうもコンストラクターがダメらしい。lit-loaderの公式では以下のような例です。

  export default class CounterElement {
    static get properties() { return {
      clicks: Number,
      value: Number
    }};

    constructor() {
      super();
      this.clicks = 0;
      this.value = 0;
    }

これを見てパッとは気づかなかったのですが、よく考えると extends してない（親クラスない）のに、 constructor で super 呼んだらダメじゃね？と。 まぁ厳密には lit-loader を使ってコンパイルされると、以下のように LitElement を継承するので、コンパイル後であれば問題はないです。

  export default class CounterElement extends LitElement {
    static get properties() { return {
      clicks: Number,
      value: Number
    }};

    constructor() {
      super();
      this.clicks = 0;
      this.value = 0;
    }

あれ？でもこれ lit-loader-exampleでうまく動作していなかったっけ？と思ったわけです。 そして、確かにリポジトリをcloneしてから yarn install して yarn build してもエラーになりません。

そのときと現状

当時のパッケージバージョンと、現在のパッケージバージョンを比較してみました。

$ npm outdated
Package               Current      Wanted  Latest  Location
@babel/core             7.2.2       7.2.2   7.4.5  lit-loader-example
@babel/preset-env       7.3.0       7.3.0   7.4.5  lit-loader-example
babel-loader            7.1.5       7.1.5   8.0.6  lit-loader-example
lit-element        2.0.0-rc.3  2.0.0-rc.3   2.2.0  lit-loader-example
webpack                4.16.1      4.16.1  4.35.0  lit-loader-example
webpack-cli             3.0.8       3.0.8   3.3.5  lit-loader-example
xo                     0.21.1      0.21.1  0.24.0  lit-loader-example

babel新しくなってるな。確かに新しくするとES6のチェックが厳密になっている。 まぁあるべき姿なんですけどね。

どうするか？

ただしく解決するなら constructor が定義されている場合のみ、最初の行に super() を差し込むような lit-loader にすれば良いのかなと。 で、 lit-loader は jscodeshift を使っているので、JavaScriptのASTとか調べながら、jscodeshiftでどうやってソースコードを変換できるかを調べました。 で、修正コードは作れたので、PR出すかなーと思っています。 今のところ通過するようにするためには Babel のバージョンを 7.2.2 にしておくと良いです。

次回

Polymer Japanのイベントが同じ週に計画されているので、次回は8月の予定です。

引き続きEdoエレメントの開発ともくもくを進めていきます。 皆様の参加をお待ちしております。

Doorkeeperのコミュニティページ

Interopに今年も参加したのですが、何年か前と同じくCHIRIMENコミュニティで出展の説明員もしてきました。 それとW3Cブースで登壇も。。

今年は幕張メッセの開場をAWS Summitと同時開催ということで、とてもたくさんの人がいました。

InteropでのW3Cブースはだいぶ影薄めなのですが、なんと中央通り沿いという今までにない？！良い位置取りで、思ったより多くの方に興味を持ってもらえたような気がします。

私は昨年のMaker Faireで展示したCHIRIMEN PIANOを持って行きました。小さいキットなので、ポータビリティが良いです。

少しでもWebブラウザからIoT機器を操作することに興味を持ってくれる人が増えると嬉しいです。

会社の合宿に参加するため6/7と6/8で福井の鷹巣荘に行ってました。 海沿いの景色の良い温泉宿だったと思うのですが、生憎梅雨入り直後で雨でした。

まぁ開発に集中できるということで、 edo-blogcard で使うスクレイピングサーバーを作ってました。

名前は edo-karakuri です。

成果発表のスライドがあるので、こちらから。

スクレイピングしてCORSを回避するのってカラクリだし、なんか江戸っぽいな、ということで、こういうネーミングにしました。 これを実際にサービスにするには、Puppeteerが重いので、先頭で受けるサービスにするとお金もかかる、ということで手前にキャッシュから打ち返すサービスを作って、キャッシュにない場合はスクレイピングするようにしたいと思います。

現在 GitHub に上がっているコードは、まだGAEにデプロイするようになっていないので、次の Polymer.co-edoのmeetupでは、ここを作ろうと思っています。

6/1に開催されたJavaScript祭りに参加しました

いつもと同様にLT枠へ申し込みましたが、今回はPolymerではありません。 とは言いつつ、WebComponentsに関してもとても重要な仕様となるimport mapsについて、最近Blogにまとめた内容について発表してきました。

さて、私のスライドは以下のとおりです。

イベントでは他にもとても楽しいセッションが多く、盛り上がりました。 また参加したいと思います。

2019年4回目となる Polymer.co-edo ミートアップ を開催しました。

前回 edo-blogcard の作成に入りましたが、実際はWebサイトのデータを収集するためには、スクレイピングする必要があります。 ブラウザからはCORSになってしまうため、そういったOSSや、サーバー側のアーキテクチャの調査をしていました。 個人的には少しずつアイデアが固まってきたので、会社の合宿でまとめていきたいなぁと思っています。

次回

引き続きEdoエレメントの開発ともくもくを進めていきます。 皆様の参加をお待ちしております。

Doorkeeperのコミュニティページ