Technote

by sizuhiko

PHPer Kaigi 2019に参加しました

初めてのPHPerKaigi参加です。 これまで予定が重なっていて参加できなかったのですが、今年は年度末開催ということで、他の予定もなく参加することができました。

どうせなら何か話さないと、ということで

他はセッションを聞いていました。

CI/CDとは…

CI/CD相談会で受けた印象は、CI == 自動テストやってます、CD == ツール使ってデプロイしてます(完全手動ではない)という雰囲気の人が多く、ほんとうのCI/CDにはまだまだ遠いなぁという感じ。それでも私がテストやろうね、といってほとんどの人が書いてない時代からは大きな変化で、いつかほんとうの意味に近づいてくれることを期待しています。

import maps と HTML Template Instantiation について

アンカンファレンスではWeb Componentsの周辺仕様の動きについて、話しました。

このうちCSS Shadow PartsはCSSWGのドラフトになっていることもあり、概要をさらっと説明。 Custom Element RegisterHTML Modulesは、Web Components色が強いので、これも概要をさらっと。 で、import mapsHTML Template Instantiationについて、少し深く話しました。

import maps

これは過去のブログ記事でも登場した Package name maps の最新の名前です。過去のリンクからは自動的にリダイレクトされます。 bower によるJavaScript依存ライブラリのインストールが、npm中心のエコシステムに変わり、ブラウザからそのモジュールを利用するには Webpack のようなもので依存解決をする必要がありました。 しかし今日では ESModule Import がブラウザでもサポートされているので、以下のようなコードでライブラリを利用したくなります。

import moment from "moment";
import { partition } from "lodash";

しかしブラウザは from から読み取るときURIとして識別するので、当然サーバーからJavaScriptファイルを取れないし、Node.jsと違って package.json から main のスクリプトファイルをロードすることもできません。 そこで import maps では以下のようなマッピング定義を使います。

{
  "imports": {
    "moment": "/node_modules/moment/src/moment.js",
    "lodash": "/node_modules/lodash-es/lodash.js"
  }
}

するとブラウザはマッピングファイルから以下のように記述されたものとして解釈します。

import moment from "/node_modules/moment/src/moment.js";
import { partition } from "/node_modules/lodash-es/lodash.js";

これはWeb Componentsに関係なく、普通にHTMLからjQueryを使おうとしていた人にとってもわかりやすくなるし、Webpackからも解放されるので、はやくブラウザ実装になってほしいなぁと思っています。

HTML Template Instantiation

「テンプレートエンジンをブラウザ自体に」というのがこの仕様なわけですが、様々なフレームワークや handlebars のようなライブラリまで、テンプレートエンジンは数多くあります。ブラウザでやることは車輪の再開発なのか?という点については、RawレベルのAPIが利用可能になることでDOMの書き換えをブラウザがやってくれることはスピードアップにつながるし、ぜひとも進んでほしい仕様の一つです。 PolymerチームのJustinなど、各ブラウザベンダーの人も議論に参加しているので、期待できます。

フロントエンド相談会

Reactを使う人、Vueを使う人、Web Componetsを推進したい人(私)など、様々なお悩み、SSRの話しなども出ました。 技術ワードに踊らされるのではなく、それぞれの課題に対して議論できたのがとても良かったです。 IRT楽しかったですね。

出張版PHP勉強会@東京で話しました。

「PHPを学ぶということ」というタイトルで初心者セッションをやりました。

最近PHP勉強会で初心者の人多いなーと感じることが多いのと、開発チームでもプログラミングこれから!みたいな人にどうしたら良いのかなーと思うことがあって、まずは勉強の入り口にどうしたら良いかというキッカケを作ることができれば良いと思いました。

PHPコミュニティのSlackへの参加者が、このセッションをきっかけに結構増えたので、良かった!

さいごに

PHPerKaigi とても楽しかった。 交流がメインのカンファレンスらしく、多くの人と、様々な話題について議論できました。 さぁ、次は福岡に行きますよ!

Polymer.co-edo meetup #23を開催しました

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

今回、私はいよいよEdoエレメントの作成に入りました。 名前は edo-blogcard です(まだリポジトリをPUSHしてないので、upしたら別の記事にします)。 これは、はてな等でブログにリンク先のサムネ、タイトル、概要の部品が入っているのを見たことがあると思うのですが、あれです。 これを LitLoader を使って作り始めました。

次回

2019年のGWに Polymer.co-edo day として開催予定を公開しています。 私が1日 co-edo で作業しているので、一緒にもくもくしたり、Web Components関連の質問を受け付けたり、 好きな時間に来て、帰ってもらっても大丈夫な1日になります。 皆様の参加をお待ちしております。

Doorkeeperのコミュニティページ

Web×IoT メイカーズチャレンジ 2018-19 in 東京【ハッカソン】にチューター参加してきました

1ヶ月前に始まった東京ステージ、Web×IoT メイカーズチャレンジ 2018-19 in 東京【ハンズオン講習】にチューター参加してきましたの続きです。

チューターも、デモに向けて各チームの完成を全力で応援します。 工作からプログラムまで、その道の凄腕が揃っています。

最後はバタバタとしましたが、みんな何かしらデモできる状態になって、デモからの審査。 最優秀作品(と予定になかった優秀賞3つ)も決まりました。

最優秀作品は今週末に開催されるスマートIoT推進フォーラムに展示されますので、興味がある人はぜひ見学にいってみてください。 (それまでに完成度が上がっていると良いなー)

Polymer Japan Cafe #4 もくもく会が開催されました

今月のPolymer/Web Components のもくもく会は、Polymer Japan との共催になったので、Co-Edoではなく渋谷にて開催となりました。

Lit Elementが2.0リリースになったので、 はじめての LitElement エレメントの作り方のバージョンを最新に更新しました。

Lit Elementではスタイル定義を以下のように、記述することが推奨されています。

class MyElement extends LitElement {
  static get styles() {
    return css`
    :host {
        display: block;
    }`;
  }
}

これはConstructable Stylesheetsとして2019/1/24にGoogleから提出されたアイデアで、 エレメントのスタイルを static getter で返すことで、ページ内に同一エレメントが複数回あるとき1回だけスタイルを評価するようになるというものです。 高速化には役立ちそうですが、現時点サポートしているブラウザあるのか?(Chromeはもうサポートしてるかも)という状況です。

なので前述のCodeLabとか、私の好きなLitLoaderとかは、まだConstructable Stylesheetsの記法には対応していません (もちろん従来の書き方でも動きます)。 でも注目していきたい仕様の1つではあるので、今後組み込むこともあるかもな、とは思っています。

詳しくはLitElementの公式ドキュメントのStylesを参照ください。

Web×IoT メイカーズチャレンジ 2018-19 in 東京【ハンズオン講習】にチューター参加してきました

Web×IoT メイカーズチャレンジは全国各地で実施されていて、今年度の最後は東京で実施されます。 まず最初の2日間は、ほとんどの参加者はふれたことがないCHIRIMEN for Raspberry Pi 3 について、ハンズオン講習会とアイデアワークショップが行われます。

なんでチューター参加したか

私はCHIRIMENコミュニティの一員なので、中の人としてハンズオン講習会のサポート役をしてきました。 Maker Faire Tokyo 2018 に CHIRIMENコミュニティで参加しましたといった記事も書いています。

どんな雰囲気だったか

以下に列挙します。

  • 最初に総務省のテキストをベースにした IoT や電波や無線通信に関する基礎知識の座学講習 があるが、これがとても面白くタメになった
  • 高校生から社会人まで幅広い年齢層の参加者がいる(学生と社会人は半々ぐらいだったかな?
  • チュートリアルの雰囲気からハード/Webアプリそれぞれに強い人はいるけど、両方に強い人は少ない(CHIRIMENは両方とも必要になる
  • みんな初対面で運営側が決めたチーム構成だけど、アイデアワークショップ盛り上がった
  • KDDI DIGITAL DATEがキレイ!

CHIRIMENとは?

さて、今回のハッカソンで利用するCHIRIMENですが、紆余曲折あって現在ではCHIRIMEN for Raspberry Pi 3がアクティブな活動になっています。 ベースはブラウザから物理デバイスを操作するためのAPIであるWeb GPIOWeb I2Cといった仕様を進めてことにあるのですが、 フィードバックを受ける手段としてハードを作ったり、Polyfillやドライバーを実装したりしています。

もっと多くの人がコミュニティに参加してもらえるとうれしいです(公式ページからSlackにアクセスできます)。

本番は1ヶ月後

ハッカソン本番は3/2と3/3の2日間。 アイデアソンの内容がどのぐらい実装されてきて、デモに向けて完成度をあげていくのかが、楽しみです。 参加者の皆様、1ヶ月後にまた会いましょう!