Technote

7/26にGoogleで開催されたChrome Tech Talk Night #14に参加しました。

#chromejp 着席 (at @GoogleJapan in 港区, 東京都) https://t.co/Pf8K08b7b7 pic.twitter.com/CUOQ4sOY8N

— しずひこ (@sizuhiko) July 26, 2019

今回のイベントにはWPSGのメンバーとして。

WPSGとは？

Web Platform Study Group設立のお知らせ

簡単に言うと、今までPolymer Japanというコミュニティでやってきたメンバーで、新しいコミュニティを設立したという流れです。

AMP

AMPはWeb Componentsをベースにしたフレームワークで、I/O Extended 2019 Tokyo@GDG で、Web技術に関するLTを話してきましたでも紹介しています。

Polymer JapanのころにAMPでイベントやりたいね！、と思っていたところ、ちょうどGoogleさんでも今回のイベントを企画していたということで、コミュニティから数名のスピーカーを出して一緒にやることができました。

AMPはほんとうに良くできていて、BentoプロジェクトでAMPファーストなサイトが作れるようになってきたら、本格的に使うのもアリだなーと思っています。 そんな仕事ないかなぁー（笑

6月はCakeFestがあったり、山形行っていたりでなかなか参加できないPHPカンファレンス福岡、今年は何の予定も重複していなかったので、参加することができました。 また、CFPに応募した発表が通過したので 標準インターフェースを使ったアプリケーション開発 というタイトルで発表してきました。

前回参加したのは2016年だった。PHPカンファレンス福岡2016に参加してLTをしました

ということで、3年ぶり2回目のPHPカンファレンス福岡です。

前日入り

スポンサー/スピーカー/スタッフの公式前夜祭があったので、前日入り。

木曜日はずっとリハをやっていたので、ごはん食べ損ねたのと、遅くまでやってしまって旅支度できてなかったので、朝支度した都合上朝食も取れず。

カレーうどん、ハーフ&ハーフ。昨日のお昼以来の食事 (@ cuud in 東京, 東京都) https://t.co/ZG0LxX1w8j pic.twitter.com/p67jDyoIco

— しずひこ (@sizuhiko) 28 June 2019

で、前夜祭終わって、福岡来たらかならず行く Bar Rummy へ。 気持ちよくラムを味わって、エールズ祭り（金曜版）が終わる頃に、3次回行く人を探しに。

@kaz_29 と @koyhoge でやまちゃんへ。

1時過ぎに解散となりました。

当日

心配された雨も問題なかったので、 メルチャリにチャレンジしました。ホテルの近くにポートがあったのと、会場の隣にもあったので便利。

初のメルチャリでしたが、なかなかに苦戦しました。 まず自分のインターネット回線がギガ制限を食らっていたので、おそらくタイムアウトしちゃうんだろうなー。以下のようなエラーが出続けます。

• サポート外のエリアです
• サーバーとの通信ができませんでした
• QRコードの読み込み後、通信エラー

あたり。まぁギガ制限食らってる私が悪いので、来月（今日まで制限）またどこかで試したいなぁ。 そして、会場まで自転車で移動。シェアサイクル東京でも使ってるけど、土地勘あるのでずっと困ってなかった。 ただ出先で使うと、スマホの台欲しい。Googleマップとかのナビで移動したいけど、スマホおける場所ないのつらいなーと。

#phpconfuk に参加してます。午後一にHASHIGOホールで登壇します。 (@ FFBホール in 福岡市, 福岡県) https://t.co/xxjfbpDynQ pic.twitter.com/UXczIMVbho

— しずひこ (@sizuhiko) 29 June 2019

午前中は普通にセッションを聞いて、ランチはもちろんウェスト。

午後一で私のセッションでしたが、メインホールが @soudai1025 だったのに、参加していただいた皆様に感謝です。

自分のセッションのあとは Ask The Speaker にいたり、交流スペースで参加者同士話していたりして、ほとんどセッションに出てませんでしたが、おもしろい技術話しで盛り上がりました。これぞカンファレンスな感じです。

夜は懇親会→Rummy→エールズ→ビール→やまちゃん みたいな流れで3時ごろにホテルへ。

後日

朝一で、またウェスト。 よく考えると、金曜日から、うどん→前夜祭/ラーメン→うどん→懇親会/ラーメン→うどん の流れですわw。

帰京までの時間、 (非公式)PHP Conference Fukuoka 2019 After Hack!! に参加して、このブログ記事を書いています。

PHPカンファレンス福岡、来年も参加できると良いなー。でも6月は厳しい….

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では、ここを作ろうと思っています。