Technote

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

ためになるセッションが多く、とても良いイベントでした。 私は前回（秋のJavaScript祭　in mixi 〜秋のJavaScript収穫祭〜）と同様にLT枠へ申し込み、この半年でおきたPolymerのアップデートを発表しました。

前回のスライドは、2016年まとめ記事よりリンクがあります。

ちょうど、Google I/O 2017が終わった後だったということもあり、その発表をふまえた内容にできたのが良かったです。

これから、どんどん2.0も触っていきたいですね！

Polymer に興味がある人の参加をお待ちしております。

Polymer JAPAN Facebook Group

今年になって毎月 Polymer.co-edo というコミュニティ（勉強会）を開催しているのですが、 もう少し広がりがあると良いな、というのと、ここへ来て大きいニュースが2つ続いたのも背中を押してくれました（たかだかグループ作っただけですが）。

“Introducing GE’s data visualization framework for IoT” by @davcron https://t.co/d3CnAQJD8q

— しずひこ (@sizuhiko) 2017年4月27日

まずは GE の IoT プラットフォーム Predix のUI部分で Polymer 使われているという記事。そして続いて

“@YouTube’s redesign is official, and there’s a dark mode” - Congrats to our close friends on YT’s desktop team! https://t.co/KZmEn6I8n1

— Polymer (@polymer) 2017年5月2日

YouTubeの新しいデザイン（dark mode）はPolymerでrewriteされているという記事。

これまで Polymer でできている代表的なサイトは Google I/O 2016 ですよ！ということが多かったので、この2つのニュースは Polymer 何それいいの？ みたいなところを超えるのに有効な事例になるな、と思っています。 （古いIEのMSサポートが終わったのもあるかもと思っていますが…）

Polymer.co-edo では今月も勉強会を開催しますので、上記の記事で Polymer に興味を持った方もお待ちしております。 2月はGoogle Mapの使い方、3月/4月はFirebaseアプリを作ってみるハンズオンを開催しました。

仕事では Polymer を1年と8ヶ月ぐらい使っています。 昨年「秋のJavaScript祭り」でLTした内容

LTのスライドをupしました。「Web Componentsを1年使って」 https://t.co/fyot0LRPlo #jsfes

— しずひこ (@sizuhiko) 2016年10月16日

からPolymerやWeb Components周辺で起きたアップデートを加えて「初夏のJavaScript祭り」で再びLTをします。

LTやります! / 初夏のJavaScript祭 in mixiに申し込みました! #jsfes https://t.co/J8Dasnm2r7

— しずひこ (@sizuhiko) 2017年5月3日

2017年2月20日(月) 19:00 - 21:00 Polymer.co-edo #1 を開催します。

イベントページへ

参加者の方が Polymer を使ったフロントエンド開発に簡単に取り組めるよう、GoogleのCodelabs のチュートリアルを、ハンズオン形式で実施します。 今回は初回なので、1つ目か、早い人で2つ目ぐらいまでかなと思います。

前回の開催ブログでも書いたとおり、以下のコンテンツを予定しています。

具体的には以下のチュートリアルです。

• Build Google Maps Using Web Components & No Code!
  • コーディングなしでGoogleMapを作ってみよう
• Build a Mobile-First Google Drive Client
  • モバイルファーストなGoogleドライブクライアントを作ってみよう
• Build a Progressive Web App with Firebase, Polymerfire and Polymer Components
  • FirebaseとPolymerでプログレッシブWebアプリを作ってみよう
• Build an ES2015/ES6 app with the Polymer Starter Kit
  • PolymerでES2015/ES6アプリを作ってみよう
• Build an Offline Weather Web App with <platinum-sw>
  • platinum-sw タグを使ってオフライン天気アプリを作ってみよう
• Build your first Polymer element
  • Polymerエレメントを作ってみよう
• Building a Progressive Web App in Polymer from scratch
  • PoymerでプログレッシブWebアプリをゼロから作ってみよう
• Building an Image Carousel Element with Polymer 2.0
  • Polymer 2.0 で画像カルーセルエレメントを作ってみよう
• Chromecast elements
  • Chromecastエレメントを使ってみよう
• Data Visualization Using Polymer and WebGL
  • PolymerとWebGLを使ってデータを見える化する
• Easy Checkout Forms with Autofill & <gold-elements>
  • gold-elements とオートフィル機能を使って、チェックアウトフォームを簡単に作る
• Interact with Bluetooth devices on the Web with Polymer
  • Polymerを使ってWeb上でBluetoothデバイスを操作する
• Interacting with data using the <firebase-element>
  • firebase-element を使ってTODOアプリを作ってみる

idobata にチャットルームも作りましたので、交流用にご利用ください。

この投稿は2016年参加したり、運営に携わったイベントなどについてのふりかえりと、2017年の抱負を綴るポストです。

1月

• 1/8 : UX JAM -NEW YEAR UX RESOLUTION-
• 1/27 : 第98回 PHP勉強会＠東京

1月は意外とイベント少なめだったなぁ。というのも新年会がたくさんあって、というのもありますが…. 1/15には、お仕事でもお世話になっているクリエーションラインさんの10thパーティにも参加しました。

2月

• 2/20 : 俺聞け12 in Tokyo（発表）
• 2/24 : 第99回 PHP勉強会＠東京
• 2/25 : 第2回CakePHP3もくもく会x翻訳会

俺聞け12では「Web技術だけでできるかもしれないIoT」ということで、勝手に（俺聞けはセルフ申し込み）2枠使ってCHIRIMENの発表をしました。 当日は実機を持ち込んでデモもやりました。

2/26は永和システムマネジメント恒例(?)のカニの会でした。すごい久しぶりのカニ会だったけど、今年もあるのかなぁー

3月

• 3/30 : 【祝100回記念】第100回 PHP勉強会＠東京（発表）

PHP勉強会では「第50回(2010/2/2)から100回へ〜 第50回の時にやったLTを振り返って考える今」というタイトルでLTしました。 50回のときにブログを書いていました。第50回PHP勉強会@関東に参加してきた。 あれから6年という歳月と50回という勉強会の時間を超えて、私たちは自動テストをやるようになったのか、というオジさんLTでした。 また区切りの時に、同じテーマでやりたいなーと思っています。

4月

• 4/16 : PHPカンファレンス北海道2016（発表）
• 4/25 : Vivaldi 1.0 リリース記念！ユーザミートアップ

PHPカンファレンス北海道では「まだ正規表現で消耗しているの？」というLTをしました。PHPカンファレンス北海道2016に参加してLTをしました。 またテッちゃんが来日したVivaldiリリース記念ミートアップでは、Operaユーザー会の頃に見た懐かしい顔ぶれに再会し、とても楽しかった。

5月

• 5/13 : IoT/M2M展
• 5/14 : 初夏のJavaScript祭（発表）
• 5/21 : PHPカンファレンス福岡（発表）
• 5/24 : de:code 2016
• 5/25 : de:code 2016
• 5/25 : 第102回 PHP勉強会＠東京（お手伝い）

初夏のJavaScript祭では、俺聞け12と同じ「Web技術だけでできるかもしれないIoT」のLT版でCHIRIMENの発表をしました。 LTで時間もないので、デモは動画で。

PHPカンファレンス福岡では北海道と同じ「まだ正規表現で消耗しているの？」のLTをしました。PHPカンファレンス福岡2016に参加してLTをしました。 これはスピーカー申し込み時期が重複していたので、同じネタを両方とも申し込んだところ、両方ともLTがとおったという理由です。

月末は de:code に参加し、MSのOSS方面へのアプローチに関心しました。 2日目は会場担当だったので、最後のセッションをスキップしてPHP勉強会の会場準備で帰社。イベントのはしごは大変でした…

6月

• 6/9 : Interop（お手伝い）
• 6/10 : Interop（お手伝い）
• 6/22 : CakeFest2016報告会（運営）
• 6/29 : 第103回 PHP勉強会＠東京

6月のInteropではCHIRIMENコミュニティとしてW3Cブースに参加することができ、2日間出展員としてお手伝いに行ってきました。 Interopは毎年参加しているのですが、中の人としては初めてだったので、貴重な経験ができました。W3Cブースでのスタッフとかもうこの先ないだろうなー（まぁ人生何があるかわかりませんが）

CakeFest2016の報告会はとても良かったです。2016年は国内のカンファレンス参加を優先していたため、海外は控えることになりました。今年はまたNYらしいので、行きたいなー。

7月

• 7/7 : Recruit Technologies Open Lab #03
• 7/16 : PHPカンファレンス関西（発表）
• 7/22 : PHP勉強会＠東京〜番外編〜
• 7/23 : CakePHP Meetup（お手伝い）
• 7/27 : モリサワ×さくらインターネット Webフォントの夕べ in 東京
• 7/30 : International NodeBots Day in Tokyo（お手伝い）

PHPカンファレンス関西では、立ち見や座り見まで出るほど聴講いただきました。WebComponentsとPolymerについて2016年最初の発表。PHPカンファレンス関西2016に参加して講演をしました

PHP勉強会番外編ではComposerの作者が来日するということで開催されました。 そこで実際にComposerを動かして「アジア圏での遅さ」を体験してもらったのも大きかったし、光の速さを超えるPHPerこと@hirakuさんとの共演も素晴らしかった。@hirakuさんのブログ記事。

モリサワのWebフォントの話しも面白かった。NodeBots DayではCHIRIMENコミュニティとしてお手伝いに行ってました。

8月

• 8/6 : Maker Faire（お手伝い）
• 8/7 : Maker Faire（お手伝い）
• 8/21 : Docker勉強会＆ハンズオン（お手伝い）
• 8/31 : 第105回 PHP勉強会＠東京（発表）

夏のMakersの祭典Maker FaireにCHIRIMENコミュニティとして参加しました。これも本当に貴重な経験になりましたが、あまり他のブースを見に行けなかった…（ずっとROM焼きしていたという…）

PHP勉強会ではトイレIoTの取り組みについて、初めて外向けに発表した記憶が。

9月

• 9/3 : HTML5カンファレンス（お手伝い）
• 9/17 : CHIRIMEN Board ハンズオン（運営）
• 9/24 : XP祭り
• 9/28 : 第106回 PHP勉強会＠東京（発表）
• 9/29 : VCLとAMP〜Frontend Meetup Tokyo vol.4

HTML5カンファレンスでは2016年も誘導員としてボランティアスタッフをやっていました。

CHIRIMENハンズオンでは永和がアキバにあるという利点を活かし「買い物にいける勉強会」を実践できました。IoT系の勉強会では秋月や千石など買い物に行けるアキバの勉強会会場として永和は便利です！

PHP勉強会では、PHPカンファレンス関西のセッションをLT版に縮小して発表しました。Web Componentsで実現するPHPerのための、次世代Webアプリケーション開発への道。(LT版)

10月

• 10/2 : TOCfE半熟ゼミ 第6回（お手伝い）
• 10/7 : ESM LT（発表）
• 10/15 : 秋のJavaScript祭　in mixi 〜秋のJavaScript収穫祭〜（発表）
• 10/22 : Docker勉強会＆ハンズオン（お手伝い）
• 10/26 : 第107回 PHP勉強会＠東京〜PHPカンファレンス2016開催直前スペシャル〜
• 10/29 : 世界中のMozillaの仲間と繋がろう！ Mozilla Festivalパブリックビューイング

TOCfE半熟ゼミはXP祭りの参加者同士、懇親会で会場を探しているところから、永和でいかがですか？で決まった会場担当のお手伝い。このような形でも気軽に勉強会会場希望の声をかけてもらえるのはいいことですね。

秋のJavaScript祭では、Web Componentsを1年使ってというタイトルでLTしました。2016年4回目のWeb ComponentsとPolymerの発表です。

11月

• 11/3 : PHPカンファレンス（発表）
• 11/9 : Serverless Meetup Tokyo
• 11/13 : 東京Node学園祭2016
• 11/30 : スマートファクトリーとRobotics API & CNTK（html5jロボット部 第7回勉強会）

PHPカンファレンスではToilet Evolutionの成果を発表しました。PHPカンファレンス2016に参加してLTをしました。 LTなので、盛り上がったところで時間切れという（個人的に）一番美味しいパターンで終了できたのですが、懇親会LTで続きをやるという機会もいただき、すべて話すことができました。その後Toilet Evolution設置してみたいという話や、設置って難しいよねーという話で盛り上がることができ、とても楽しかったです。

12月

• 12/18 : Polymer.co-edo #0（運営）

12月は毎年忘年会などでイベント少なめです。主催としてPolymerの勉強会を企画したのですが、参加者がなく（詳しくはPolymer.co-edo 第0回を開催しました）

まとめ

仕事ではずっとIoTに関することをやっていました。 実は上記以外にも毎月第一と第三の水曜日夜に永和システムマネジメントでIoT勉強会を主催していました。こちらは無事1年継続することができ、今年も頑張りどころです。 これの（私の分の）成果がToiletEvolutionです。

コミュニティとしてはPHP、JavaScript、CHIRIMEN、HTML5jについて参加＆お手伝いできていた一方、UX JAMなどは人気コンテンツになってしまい、なかなか参加できないもどかしさもありました。

また情報発信のブログも極端に減ってしまい、もっと発信していかないと。 そんな想いがある中、年末にブログも書けずCo-Edoに元旦から来ました。

おみくじが引けるということで、ひいてみると「大吉」。今年は良いことがある予感

一番嬉しかったのは「Co-Edo」枠です。「主催した勉強会が評判になる」は、Polymer.co-edoにとって直近のマイルストーンでもあります。第0回開催ブログでも書いたとおり今年はハンズオンを中心にやっていきたい、その中で仲間を増やしていきたいと思っているので、おみくじの通りになるよう頑張ります。

今年もイロイロなイベントに参加したり、橋見に行ったり、また機会に恵まれれば執筆したりと変わらず活動していきたいと思いますので、皆様よろしくお願いいたします。

祝：Polymer.co-edo #0 ！

どうもボッチです。集客は難しいですね。

この勉強会をやってみようと思った「きっかけ」は「Polymer 仲間を増やしたい」という思いだったのですが なかなか難しいです。

隣の島では、React初心者もくもく会が行われていて、参加者が3人なので、現時点のフロントエンドの人気（パワー）バランスからするとそんなものでしょうか…

私の仮説では

• Polymer なんて知らない
• Polymer 聞いたことある
• Polymer 昔さわったことある
• Polymer 使ったことある
• Polymer 業務で使っている

の中で「聞いたことある」「昔さわったことある」ぐらいが勉強会を始めると想定される参加者の中間層でした。 そこで、今後（来年）どのように進めていけば仲間が増えるかなーと思って意見交換会を開催してみようと思ったのが 始まりだったのですが、そこまで想定スキルを上げるのはちょっと無理があったのかもしれません（＝参加者0）。

来年の抱負

そこで「Polymerなんて知らない」もしくは「聞いたことがある」というPolymer初心者を中心として、ハンズオンをやってみる方向で進めてみることにしました。 もちろん積極的に日本語情報も出していかないといけないのかな… （先ほど、隣のReactの方々にPolymerやってるんですよー、と言ったら日本語情報無いですね…と言われたので）

テーマはGoogleのCodelabsに登録されているチュートリアルのうち、 Polymerに関連したものをハンズオン形式で進めていこうと思います。

具体的には以下のチュートリアルです。

• Build Google Maps Using Web Components & No Code!
  • コーディングなしでGoogleMapを作ってみよう
• Build a Mobile-First Google Drive Client
  • モバイルファーストなGoogleドライブクライアントを作ってみよう
• Build a Progressive Web App with Firebase, Polymerfire and Polymer Components
  • FirebaseとPolymerでプログレッシブWebアプリを作ってみよう
• Build an ES2015/ES6 app with the Polymer Starter Kit
  • PolymerでES2015/ES6アプリを作ってみよう
• Build an Offline Weather Web App with <platinum-sw>
  • platinum-sw タグを使ってオフライン天気アプリを作ってみよう
• Build your first Polymer element
  • Polymerエレメントを作ってみよう
• Building a Progressive Web App in Polymer from scratch
  • PoymerでプログレッシブWebアプリをゼロから作ってみよう
• Building an Image Carousel Element with Polymer 2.0
  • Polymer 2.0 で画像カルーセルエレメントを作ってみよう
• Chromecast elements
  • Chromecastエレメントを使ってみよう
• Data Visualization Using Polymer and WebGL
  • PolymerとWebGLを使ってデータを見える化する
• Easy Checkout Forms with Autofill & <gold-elements>
  • gold-elements とオートフィル機能を使って、チェックアウトフォームを簡単に作る
• Interact with Bluetooth devices on the Web with Polymer
  • Polymerを使ってWeb上でBluetoothデバイスを操作する
• Interacting with data using the <firebase-element>
  • firebase-element を使ってTODOアプリを作ってみる

あらためてみると、Polymer関連の公式チュートリアル充実してるな。2.0のもすでにあるし。

ハンズオンでチュートリアルやりつつ、そのページを日本語化していくと、みんなPolymer触ってみようと思うのかな、と新しい仮説を立ててみました。

あと平日希望もあるのですが、さすがに平日だと初心者は難しいかな。 平日は自分である程度進められる人や、そういった人のやり方を見たい人、週末は初心者向けに1日かけてやってみるコースを検討しています。

さいごに

Polymerに興味がある人は Doorkeeper の Polymer.co-edo のコミュニティに参加ください。 そして勉強会の参加＆協力をお待ちしております。