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

今回の議題は

今回は先日開催された Google I/O ‘18 から Polymer のセッション動画を見ながら Polymer3 のリリース記念パーティとして、食べ飲みしながら情報共有したいと思っています。

ということで、ピザとビールを片手に Polymer 談義が盛り上がりました。

Google I/O で発表された内容のリンク集

Polymer Japan の Facebook グループには、Google I/Oの翌日に貼りましたが、こちらにもまとめておきます。

セッション動画

• Web Components and the Polymer Project: Polymer 3.0 and beyond
• PWA starter kit: build fast, scalable, modern apps with Web Components

セッションで紹介されたサイトなど

Web Components and the Polymer Project: Polymer 3.0 and beyond

• CSS Shadow Parts
• Custom Element Registers
• Package name maps
• HTML Modules
  • https://github.com/w3c/webcomponents/issues/645
  • https://github.com/PolymerLabs/html-modules-toolkit
• HTML Template Instantiation

PWA starter kit: build fast, scalable, modern apps with Web Components

• PWA Starter Kit
• pwa-helpers
• Redux and state management
• Application testing
• Building & Deploying

Polymer の過去/現在

Polymer 3.0 のリリースに関して、Polymer がいつ発案されて、どうやって進んできたのか、という話から始まりました。 とても古いGoogle I/Oの写真を使ったりして、Web Components がどんな問題を解決しようとしていて、Chromeチームとしてどのように取り組んできたか、がわかります。

ブラウザ/JavaScriptを中心としたフロントエンドのトレンドは変化が大きく、最初にWeb Componentsを発案したころと、現在では細かいところに問題が多く残っていたのは事実です。 ただ一方でPWAに代表されるように、モバイルアプリでできることをブラウザでもできるようにする取り組みも、大きな進歩を遂げています。

PolymerがGoogle内部でどのような位置付けになっているのかを図るのは難しいのですが、少なくとも多くのプロジェクトで利用されていることは間違いないです。

そして「現在の最適解」がPolymer3であるわけです。 動画の中でも Too weird として紹介されていた、 polyfill/perceived silo/bower/HTML imports の解決に取り組んできたということです。

polyfill については、モバイルブラウザ（iPhoneならsafari/Androidならchrome）では、Polymer3.0の仕様であればpolyfillを必要としない対応状況です。 perceived silo （自己中心的、というかWeb Components == Polymer みたいに受け取られていた批判みたいなもの）については、 Custom Elements Everywhereでも公開されているとおり、AngularやVueなどPolymer以外のJavaScriptフレームワークでも利用できることがわかります。 bowerについては、発案当時はフロントエンドでは非常に流行っていた、けど今はということで npm に。 HTML importsの仕様化はあきらめ、多くのブラウザが実装する ES Module Import へと。

そう、Web Components は、今日ではメインストリームになるのです。

一部のツールはまだPreviewですが、フィードバックを待っているということで、特に何もなければ大きな変化はなく、リリースになるのではないでしょうか？

• lit-html
• polymer-modulizer

未来

PWA Starter Kitで作れるアプリのコードを見るとわかるのですが、 lit-html を使うことで Polymer 感？みたいなのは非常に薄まります。PolymerElementじゃなくなるし。 ただ lit-html は Polymer3 をベースに作られているし（互換性は少ないけど）、Polymerチームは多くの Web Components を公開しています。 Polymerは、Web Components を使って課題を解決するのに役立つ下回りを整備してくれるライブラリやフレームワークとしてまだまだ価値があると思っています。

あとは、Polyemrチームが取り組んでいる、上記で紹介した今後の仕様に期待しています。 特に HTML Modules について、ES Module Import によって HTML部分が HTML in JavaScript になるわけです。 「どうしてもHTMLで書けた方が良いじゃん！」というPolymerチームの意思というか（私もそうですが）HTML Importsはダメだったけど、これなら良いでしょ！私たちはHTMLで書きたいんですよ！愛が溢れています。

次回は

6/25(月) の予定です。Doorkeeperのコミュニティページに今年の予定も書いてあるので参考にしてください。

PWA starter kit のハンズオンをやって、Polymer3 や lit-html を体験してみたいな、と思っています。

5/19に開催されたJavaScript祭りに参加しました

今回もためになるセッションが多く、とても良いイベントでした。 いつもと同様にLT枠へ申し込み、この半年でおきたPolymerのアップデートを発表しました。

通常のセッションで 実践ES Modules というのがあったのですが、予想外に Web Components の話をたくさんしてもらえたので、LTでは基本的な話には触れずにスムーズにできたのは助かりました。

今年もGoogle I/O 2018が終わった後（昨年もGoogle I/Oの直後）だったということもあり、その発表をふまえた内容にできました。 Polymerとはどうなるのか？Polymer3.0はどういった課題を解決するのか？ということを中心に話しました。

Polymer はどこへ向かうのか、5/28 には Polymer.co-edo で、Google I/O の動画を見ながら語る会をやります（予定）ので、ぜひ参加ください！

会場の サーキュレーションビル ForPro は、BEAMS のオフィスを射抜きで使わせてもらったということで、オシャレ感が半端なかったのですが、 原宿駅からの移動が竹下通りを抜けていくので、ライフが半端なく削られました。 おっさんに原宿はつらい…

4月に予定していた今年4回目(通算で13回目)となるMeetupは、Polymer Japan主催の Web Components Cafe by Polymer Japan と重なってしまったため中止となり、このG/Wに Polymer.co-edo day 2018 春として開催することになりました。

Web Components Cafeでは「PolymerによるWeb Componentsの開発」というタイトルで発表もしましたので、スライドをリンクしておきますね。

Polymer.co-edo day 春って付くと、秋もやりそうじゃないですか！？（もしかしてやるかもね）

Polymer.co-edo day とは

私が1日 Co-Edoにいるので、Polymerのことについて話したり、質問受け付けたり、ワークショップやったり、一緒にお酒飲んだりw、Polymer/Web Componentsについて、何でもやるよ！の1日です。気軽に参加ください。

お好きな時間に来て、帰って も大丈夫です。 GW予定ないけど、もくもくしたい、Web Componentsさわってみたいなど、私と一緒に作業をしませんか？

ということで、連休にもかかわらず2名の方が参加してくれました。ありがたい！

非エンジニアの方ですが、コミュニティにもJOINしてもらった午前中の参加者と、Polymer.co-edoの常連さんが午後に来てくれて、ぼっちの時間も少なく楽しい1日でした。

やった/話した内容は以下のようなことです

• Polymerとは？のプレゼン
• どのように現在のビジネスにマッチさせるか
• Wordpress の Polymer プラグインがあるらしい？！
• どこから学んでいけば良いか？
  • Google Mapとか Codelabs にあるのが良いね！
• Polymer 3がリリースされるってよ
• CMS構想
• 次回Polymer.co-edoはリリース記念イベント！？
  • Google I/O 終わったあとだし、動画見ながらのイベントになるかも
• そろそろハンズオンやりたい（3系でやる？）

次回の Polymer.co-edo は

5/21(月)を予定しています。

Polymer 3のリリースはGoogle I/O の翌週と告知されているので、ナイスタイミングだと思っています。 みなさまの参加をお待ちしております。

昨年に続き 明日の開発カンファレンス を1週間後の 4/17(火) に開催します。

明日の開発カンファレンスとは？

公式サイトの開催趣旨を引用します。

「明日の開発カンファレンス」では、開発の効率化に取り組むエキスパートの生の声を伝えます。そして、一歩、二歩、三歩先にどのような事ができるか、実際の現場にどのように導入するか。開発リーダのみなさまや開発リーダを目指すエンジニアのみなさまに、実現可能な情報を共有できる場を提供したいと考えています。

プログラムも、各分野に精通した運営メンバーが「今現場に求められているもの」の中で もっとも聞きたい話 を、各分野のエキスパートに登壇を快諾いただきました。 昨年に続き、参加したみなさまが 明日からのヒント を持ち帰って、現場の改善に役立つようなイベントになると信じています。

なお、名前が長いので、通称は アスカン という名前になっています。みなさまも愛着をもって「アスカン」と読んでもらえると嬉しいです。

2018年のみどころ

ものづくりを変える開発者ファーストの４つのカイゼン

デンソーさんのアジャイル開発事例は、今年のデブサミ2018や、他のイベント、Webの記事などで見たり聞いたりしたことがあるのではないかと思います。

ですが、ここはアスカンです。より現場の声が聞きたいんです。

そこで、今回は現場のチーフエンジニアである、佐藤 義永さんに登壇いただき 開発者の視点から具体的な取り組みとその効果 を紹介していだたけることになりました。 楽しみですね。

クラウド労務サービス「SmartHR」を支える開発チームの作り方

急成長中のクラウド労務サービス「SmartHR」。 プログラム選定をした神戸さん曰く まだ他で話を聞いたことがないが、絶対に話を聞きたい人 芹澤 雅人さんに登壇いただきます。

成長するサービスの中で、どのように対応してきたか、また、今後どのような開発チームを作っていきたいか について発表していただきます。 自社サービスを作っている人にとって、とても参考になる話、見逃せないですね。

新卒3年目のぼくが、でぶおぷす???なオジサンだらけのエンプラ金融PJにAnsibleを導入してみた

フューチャー株式会社の齋場 俊太朗さんには、エンタープライズ開発の現場で 先進的なツール と 今までのやり方や文化 をうまく結びつけるために、どのような工夫をしたかを発表していただきます。 これから開発リーダーを目指すエンジニアがとおる現場の改善。 エンタープライズの現場の、こういった発表は他ではなかなか聞くことができない内容になっています。

カイゼン・ジャーニー 〜たった一人からはじめて、「越境」するチームをつくるまで〜

午後最初のセッションは カイゼン・ジャーニー の著者である 市谷 聡啓さん に、 どのようにして自分の場所（開発現場）を変えていくのか について発表していただきます。 会社のトップダウンでアジャイルを導入できるケース、スタートアップで改善を続けていけるケース、などありますが、 一人から 改善をはじめなくてはいけないケースが多いのではないか？と思っています。 このセッションのテーマは そう、変化は「たった一人から」でも始められます です。

こちらも、今年のデブサミ2018や他のイベントなどで、見たり聞いたりしたことがあるのではないかと思います。 アスカンでは他のイベントよりも発表時間をドーンと拡大して80分枠で、ジャーニーを語ってもらいます。

サーバーレスいいとこどり

サーバーレス という言葉で最初に思いつくことは何でしょうか？ 多くの現場で導入が進められていたり、導入が検討されているのではないかと思います。

AWSのコミュニティでは知らない人はいない、株式会社セクションナイン 吉田 真吾さん を中心に、 サーバーレスの現場で活躍する 中山 桂一さんと(サーバーレス薄い本でも有名な)仲山 昌宏さんに登壇いただき、 サーバーレスを現場に導入するにあたり直面する課題について、対策のアイデアや視座 を紹介していただきます。 ここだけの話が聴けるチャンスです！

リアルストーリー：「うちのカイハツ、セキュリティやばい」からの脱却シナリオ

最後のセッションは、セキュリティです。 OWASP Japanチャプターリーダーでもある岡田 良太郎さん、 サイボウズ株式会社 伊藤 彰嗣さん、 Vulsの開発者でもある神戸 康多さんが、 ゲストを迎えて 現場の生々しい話を根掘り葉掘り聞きまくる トークセッションです。 どうすればセキュア開発・運用など実現しうるのか について、アスカンでしか聞けない深イイ話、見逃せません。

最後に

もうすでに 119名(4/10 23:00現在) の方に申し込みをいただいていますが、まだ残席あります。 イベント後には懇親会 アスカンナイト も開催されますので、登壇者／参加者でイベントの感想や、明日からどうやっていくかを議論するのも良いと思います。

Peatixイベントサイト よりイベントチケットを購入できます。

アスカンまであと一週間。 よろしくお願いします。

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

今回の議題は

日本発！？のWeb Componentsを作ろう！ということで、一度ブレストした内容を詰めていきたい

ということでPolymer.co-edo meetup ＃10 を開催しましたで、一度上がった案をベースに議論をしました。

本題の前に

ちょうど少し前、Polymerの公式ブログにPolymer 3.0: Latest previewという記事がアップされました。 こちらの記事は英語ですが、Chromeで開いて日本語に自動翻訳すれば、英語が苦手な方でも問題なく理解できるようになっていますので、ぜひご覧ください（最近の自動翻訳すごい！）。

ちょうど1つ前の記事が preview-12 では、こうなるよ、という話だったのを前回の #11 で話していたので「Polymer.co-edo の開催に合わせて記事がアップされるなんて、なんて親切なんだ」と勝手に妄想してますw

また、先日行われた templateinstantiationstudy のハイライトや感想も話しました。

Polymer.co-edo では何をやっていきたいか

ということで、本題に戻るのですが、始めて参加される方がいたので、コミュニティ/勉強会として何をやっていきたいか、というのをおさらい。

• 日本発の Web Components を開発/発信したい
• Web Components の開発フレームワークとして Polymer を推したい
• Polymer を学ぶ人が気軽に来て学習/相談できるコミュニティにしたい（ハンズオンするとかも）

Polymer で Web Components を作る意味として、個人的な想いを少し話しました。

Webサイトを作るとき、昔からフレームワークやライブラリは、どんどん変わってきました。 その中でライブラリの中心にいたのが jQuery だと思っています。もちろん今でも使われているし、 サイトに簡単な部品を設置するには jQuery だったり、それをベースとした Bootstrap ライブラリを使ったりします。 しかし、それらはモバイル端末で見ると十分なパフォーマンスを得られなかったり、他のフレームワークと衝突してしまう、といったことがおきたりします。

Web Components は、ブラウザの低レベルのAPIを使うことで、フレームワークを超えて部品を共通化することが可能だと思っています。 もちろん部品を組み合わせることでアプリケーションになることも可能です。 今日 Shadow DOMなどのWeb Componentsの要素単位で見れば、主要フレームワークで利用可能な（標準サポートされている）ものもあります。 ですので、そこでPolymerがという話ではなく、同じ会社でもプロジェクトによっては使うフレームワークが違っていたりすることはあるし、 OSSでUI部品を公開するとき多くの人に使ってもらうには、特定のフレームワークに依存した形でなく webcomponents.org で共有するエコシステムみたいなのができたら良いなと思っています。

このような視点で考えると、作るもののアイデアが jQueryやBootstrap であったものを置き換えたり、どこかのサイトで表示されているものを模したものだったりするなぁというのは、自然な流れに感じています。

#10で出たアイデアのおさらいと、新しいタグのブレスト

#10 で出たアイデア以外に何かないか、新しい人も来ていたので、もう一度ブレストしました。 まずあたりをつけたのが、日本のサービスでAPIを公開しているところはないか？それを使ってタグが作れないか？というところです。

そうすると意外とAPIって開いてなかったり、開いていてもサイト上で使うものだったりして、利用規約が Web Components に向いていない（サイトにバナーなどを埋め込んでくださいなど）ことがありました。 こういった利用規約は、Web Components 自体に入ってなくても良いような気がしますが、カスタムタグを利用する人に、どうやって守ってもらうかとか難しいなぁと。

で、LINEの共有ボタンとかないねーとか、有り体な話題で終わるかと思っていたころ、1つの発想転換がありました。

今回採用した新しいアイデア

埋め込みタグ です。昔 jQuery とかでリンクにホバーすると、サイトの概要がポップアップされるようなものがあったのは覚えています。 また、hatena とか使うとき、他の hatena 記事へリンクを貼ると、埋め込みタグ表示にできたりするじゃないですか。 埋め込みタグがあるサービス、例えばTwitterやSlide系のサイトは良いのですが、自分のブログなどに埋め込みタグがないサイトのリンクとして 埋め込みタグをつけれたら便利 というものです。

旅行に行ったブログを書くとき、レストラン行ったら食べログサイトの埋め込みタグを入れたいかもしれないし、ホテルや観光スポットの公式サイトの埋め込みタグを入れたいかもしれないです。 単なるリンクよりも良いですよね！

まずはじめにプロトタイプとしては、直接サイトのHTMLをもってきて meta タグの OGP を埋め込みタグ風に表示する（つまり自分のサイトに Facebook の共有表示を埋め込む感じ）のを目指します。 HTMLだけならテキストでそれほど容量もないし、画像ほど重くはないと思っていますが、サービスとして探して見たら意外となかったりしたので、OGP情報だけをキャッシュするサービスを併せて作っても良いかなーとも思っています。

これ自分のブログにも埋め込みたいし、早く使いたいですw

次回は

4/23(月) の予定です。Doorkeeperのコミュニティページに今年の予定も書いてあるので参考にしてください。

また、春と秋に1回ずつハンズオンもやりたいと思っています。 Doorkeeperのコミュニティページ のメールか、Facebookグループ Polymer Japan などでのアナウンスをお待ちください。