Technote

by sizuhiko

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

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

今回は、Polymer teamから新しいお知らせがありましたので、その内容を解説する会としました。

さらに先月の23日には、Web Components SF Meetupが行われたのですが、こちらはSalesForceの取り組みしか情報が得られなかったので、そこでリンクされていた情報について軽く共有しました。

参加者から今後のWeb Components動向なども聞かれましたが、基本的にもう仕様になっているし、モダンブラウザでは普通に使えるのでどんどん使うと良いよ!という感じですね。

次回

Web Components SF Meetupの動画が公開されたら、みんなで観る会をやりたいなーと思っています。 皆様の参加をお待ちしております。

Doorkeeperのコミュニティページ

PHPカンファレンス沖縄2019で、 標準インターフェースを使ったアプリケーション開発について発表してきました

沖縄久しぶりー。カンファレンスでは初めてです。 昔は年一で来ていた時期もあったのですがね。 今回は、CFPに応募した発表が通過したので 標準インターフェースを使ったアプリケーション開発 というタイトルで発表してきました。 同じセッションを福岡でもやったので、今年2回目の発表です。

福岡の記事はこちら PHPカンファレンス福岡2019で、 標準インターフェースを使ったアプリケーション開発について発表してきました

前日入り

今回は会社の経費で来たので、早めに到着して沖縄事務所に出社しました。

永和システムマネジメントでは、カンファレンスは回数に関係なく経費でますが、若手にたくさん参加して欲しいので、おじさんは自主規制(なるべく自費参加)してます。

沖縄事務所で発表のリハをしながら、スライドの最終調整をしてました。

ちゃんと定時まで事務所にいて、ホテルにチェックインしたあとは、軽く(といっても1時ぐらいまで)飲みに行きました。

当日

カンファレンス会場は、宜野湾のCODE BASE OKINAWAだったので、交通機関で移動です。 宿泊が那覇なのは、飲みに行くのに便利なオススメプランというのに沿って予約したためです。

PHPカンファレンス沖縄 全体のスケジュール(仮)というページをカンファレンス運営からアドバイスもらえるのは、県外からの参加者に優しくてとても良いですね。 で、このページに那覇からの移動方法も書いてあるので、そのとおりバスで移動します。

プロトソリューションさんのビルが2つあって、少し迷いましたがw 無事到着しました。

初回開催のPHPカンファレンス沖縄ですが、3トラックあってすごい。会場も広いです。

午前中はメインホールでセッションを見て過ごしました。

ランチセッションのお弁当も美味しかった!

午後からは私のセッションもあるTrack Cで過ごしました。 他のカンファレンスでもそうですが、自分の発表があるときは同じ部屋で他の人の発表を見てスライドの明るさ、マイクの調子などをチェックしています。

私のセッションのスライドは以下のとおりです。

セッションが始まる前にコード中心か、エモい話中心か、アンケートを取ったらコード中心ということだったので基本的な話をおさらいして作成したサンプルコードの解説をしました。 スライドの中にもURLありますが、こちらにも掲載しておきます。

福岡では間に合わなかった Protocol Buffers のPHPサンプルを追加しておきました。 Protocol Buffers はAPIのリクエスト/レスポンスの課題を解決する方法として最適だと思っているので、もっと流行ってほしいなと思っています。gRPCでも良いけど、サーバーやクラウドの対応状況も難しいので、まずはその中の技術を使うということです。

その後は充電コーナーにいたり、スポンサーブース回ったり、LT聞いたりして、懇親会へ。 懇親会も沖縄っぽい料理たくさんあって、楽しかったです。

OrionビールのSTRONG ZEROっぽいWATTA STRONG DRYというのを飲んだりしました。 これはやばいやつ

懇親会終わったらタクシーで那覇に移動して、二次会、三次会と移動してホテルに戻りました。

後日

ホテルの料理が沖縄料理充実していて、2日間とも満足しました。 ちょっと早いランチにはA&Wへ。沖縄来たら間違いないやつ(並んでましたが…)

国際通りでお祭りやっていて、お子様の琉球空手見たり、爆竹の香りを嗅ぎながら散策をしていました。 しかし今日は暑い!

帰京までの時間、 (非公式)PHPカンファレンス沖縄2019 After Hack!! に参加して、このブログ記事を書いています。

昨日の発表時間でできなかった 標準インターフェースを使ったアプリケーション開発 のエモ話をしました。

標準とフレームワークのライフサイクルや進め方ってやっぱり違っていて、これはそういうコミュニティだったり関わりをしてないとわからないことなんです。どちらが良いとかではなく、最適な選択をした方が良いんですが、ライフサイクルが長くなるアプリケーションを作るなら標準には寄り添っておきたいなという話です。

今年はフレームワーク乗り換えネタや、バージョンアップネタが少なかった(昨年多かったので、今年の私の発表につながる訳ですが)ので、みんな少し落ち着いている状況なのかな?と思います。 こういう落ち着いているときこそ、次にやるべきことや、自分たちが進んでいく方向性みたいなのを考えるキッカケになるようなことは考えていきたいですね。

PHPカンファレンス沖縄楽しかったし、またあれば是非参加したいなーと思います。

休みを付けて伊良部大橋渡に行きたい…

PHPカンファレンス北海道 2019で「PHPを学ぶということ」について発表してきました

昨年9/8に開催が予定されていたプレPHPカンファレンス北海道は、9/6未明に地震があったため中止となりました。 【中止】プレPHPカンファレンス北海道【中止】

今年は直前に台風が関東地方を直撃し、千葉県などで大きな被害が出ました。

そうか、あれから1年、だいぶ前のことに思ったけど、まだ1年かと、出発前にはふりかえりました。

前回カンファレンスとして開催されたのは2016年だった。PHPカンファレンス北海道2016に参加してLTをしました あのときのLTはバズったな…

2日前入り

はい、普通に夏休みを使って木曜日に函館入りしました。

北海道の中では密かに函館が一番好きです

金曜日の午前中はそれっぽい観光をして、午後は高速バスで札幌に移動しました。

前夜祭で恒例の石鍋亭に行き、ジンギスカンとニラタワーを満喫しました。

当日

なぜか懇親会のイベントページ見て、PHP Matsuriのときと同じ会場かー、と思って間違って行ってしまったけど、受付には間に合った…

カンファレンス会場は、新しい施設で木の香りがする素敵な場所でした。

私の登壇は唯一の午前セッションで、トップバッターでした。

「PHPを学ぶということ」はPHPer KaigiのPHP勉強会枠で発表した内容を、少し見直した版になっています。

参考:PHPer Kaigi 2019に参加しましたの記事

アップデートした内容としては、以下のあたりです。

  • ラスマス・ラードフ氏のインタビュー記事を紹介
  • アルゴリズム図鑑のアプリ版も紹介
  • ビアバーの店員を参考にアプリの流れを解説

Webアプリは難しい、だからこそ楽しんで迷わず進んでいくことが大事!というところを話したかったのですが、 Twitterでの反応をセッション終わってから確認したら、それなりにメッセージが届いてもらったかな、と感じられました。

PHPカンファレンス北海道2019 ツイートまとめ

自分のセッションが終わったら、

  • ランチセッション
  • ブラウザテスト
  • CI/CD
  • PSR
  • Swoole
  • LT

を聞きました。

気になった事は Twitter に投げたので、ブログでは割愛します。

で、そのあと懇親会、公式二次会、三次会と流れホテルに戻りました。

今回はラグビーW杯とオータムフェストという2大イベントに囲まれ、ホテルの高騰と満室に悩まされましたが、 GARDENS CABINという7月にオープンしたばかりのオシャレカプセルに泊まりました。 新しくてきれいだったので、とても良くくつろげました。

後日

朝一で、ドーミインの朝食を食べようと思ったのですが、休日は前日予約が必要ということで断念してPHPカンファレンス北海道2019 アフターハック in ゆめみに参加して、このブログ記事を書いています。

PHPカンファレンス北海道は、2012, 2016, 2019(2013にはPHP Matsuri)と開催されているので、次は2012あたりかなぁ(期待)。

遅い便の飛行機で帰るので、このあとはさっぽろオータムフェストで美味しいもの食べたり飲んだりして北海道を満喫して帰りたいと思います。

Maker Faire Tokyo 2019にCHIRIMENコミュニティで参加しました

今年もMakers夏の祭典Maker Faire Tokyoに出展してきました。

昨年の記事はこちら:Maker Faire Tokyo 2018 に CHIRIMENコミュニティで参加しました

もうこの準備のため、2ヶ月ぐらい時間を使った(構想から実装まで)ので、長文になります。

昨年の反省と今年の想い

昨年はCHIRIMEN PIANOを作って、展示したのですが、地味だなーと。 ちゃんとしたピアノ風の見た目を作れば良かったとか、いろいろ思うところがありました。

展示の想いとしては、CHIRIMENコニュニティのアピールではあるわけで、とにかく足をとめて興味を持ってもらうことが大切です。 昨年はバスがあって、LEDラッピングを光らせるデモがあって、かなりの人が足をとめてくれたのですが、今年はバス無しということがわかっていたのです。

鳴り物と光り物は、足をとめてもらえる要素が多いので、今年も楽器でいこうとは決めていました。 自分でデモプレイできる楽器といえばギターとサックス…. サックスはさすがに作れないなーということで、ギターを選択しました。

昨年の技術を応用して、今年はこんなのかな?みたいなのを初期は想定していました。

いわゆるスティールギターです。 ただ構想を重ねていく中で、やっぱり人の興味を引くのには地味かなーと思い始め、どうせならガイコツおじさんのように、 より参加者に近い形でコミュニケーションできないかな?と考え普通のギタースタイルへと変えていきました。

いざ準備開始

いつももっと早く始めてればなぁ、と思うのですが、だいたい6月からです。春のカンファレンス時期なんですよね… といっても6月は、上記の構想や設計と実際に必要になりそうなセンサー類などの発注作業を行ってました。

PHPカンファレンス福岡2019で、 標準インターフェースを使ったアプリケーション開発について発表してきましたにも書いたとおり6月末は福岡での発表がありましたが、 それも終わり7月から本格始動です。

まずセンサー類などが届くまでにWebアプリの作成から。 昨年のCHIRIMEN PIANOと同様に、PCでもスマホでも、もちろんCHIRIMENでもプレイ可能なギターアプリを作ります。 もちろん Web Components 技術を使って。

WebI2Cエレメント自体の昨年からのアップデートは少なくて <chirimen-ads1015> というタグを追加しただけに終わりました。 ADS1015搭載 12BitADC 4CH 可変ゲインアンプ付きを使うためですが、これをどのように使ったかは後で解説します。

CHIRIMEN-GUITER

CHIRIMENぎたー

PCやスマホでのプレイ方法:

PCの場合は、フレットがキーボードにアサインされています。 F3, E2などの音階の下にアサインされているキーを表示しています。 たとえばC3の場合は q キーを、F2の場合は c キーを押します(同時に複数のキーを押してコードにすることも可能です)。 音を鳴らすには、右側の黒い部分をマウスホバーして上下すると音が鳴ります。

スマホの場合は、タッチ(マルチタッチ)に対応しています。 回転固定アプリなどを使って、横向き、上下反転すると、通常のギターを操作するのと同じようにフレットをおさえることができます。 ピックアップが右の黒い部分なのはPC版と同じですが、スマホ版ではここを擦る(スワイプする)ことで音が鳴ります。

CHIRIMENでのプレイ方法:

普通のギターっぽく演奏できます!

ハード制作

ギターを作るために利用したものは以下のとおりです。

フレット

ギターのフレットには、どこが押されたかを調べるため、 SoftPot接触位置センサ を利用することにしました。 このセンサーは曲げセンサーなどと同じで、押した箇所の抵抗が上がることでアナログ値として、起点からの距離を知ることができます。 このセンサーを弦の代わりに6本はれば良いわけですが、センサーの幅が両端をギリギリまでカットしても1cmあります。 ギターのフレットボードは一番幅が狭い箇所が4cmぐらいなので、6本はどうみても無理。 ということで、スクリーンショットなどでもわかるとおり、4弦ギターになっています(それはベースなのでは?とかウクレレで良かったのでは?という話はありますが、私がデモプレイできないので… ry)

まずはCHIRIMENとADS1015を使って、SoftPot接触位置センサから値が取得できるかを調べます。 ADS1015のオンラインサンプルはRaspi3版のADS1015オンラインサンプルがあるので、センサーを接続してCHIRIMEN for Raspi3のブラウザで動作確認します。 ちょっとわかりずらいですが、Raspi上のTFTモニタにサンプル画面が表示され、押した場所の値が表示されています。

次に4本接続して値が取得できるかを確認します。 この段階では <chirimen-ads1015> タグの仮実装までして、WebI2Cタグで値が取得できるかを確認しています。

SoftPot接触位置センサからは、 JST to Breadboard Jumper (厳密には少し違うものなのですが、せんごくオンラインにはなかったので同等のものをリンクしています)を使って、 ジャンパー経由でブレッドボードに落としています。JSTコネクタは2.5mm幅でハンダ付けの必要がなく接触位置センサーと接続できそうだったので、導入しました。 接触位置センサーのはんだ端子が結構微妙なので、この方式が良いと思います(実際にはコネクタ端子の製品もあるらしいけど、店舗やスイッチサイエンスにはないようです)。

あとはセンサー左右の耳の部分をカッターで切り落とし、ギターフレットに貼り付けてみます。 なんとか4本を敷きつめられました。 耳のカットは、まず1本やって、値がちゃんと取れることを確認してから4本実施。 もしカットして値が取れなくなっていたら、戦略の見直しが必要なところでしたが、良かったです。 (実はスリムタイプという製品が販売元のページにあるのを知っていて、カットしたら同じなんじゃない?という感覚があったのも良かったと思います)

最後の仕上げです。

  • クリアケースとフレットボードを取り付け
  • ブレッドボードでAD変換してGrove端子にするような回路を作成
  • フレットボードの裏側に接触位置センサーのケーブルを取り回すように穴あけ

その他

クリアケースにCHIRIMENとI2Cハブを取り付けます。 そこからchirimen-pianoでも利用したタッチセンサーとジェスチャーセンサーをクリアケースの外側に取り付けます。

この2つのセンサーはプレイ方法に関係します。 フレットに利用した接触位置センサーの値は、PC/スマホ版のキーボードやタッチと同じで、音階を指定するだけです。 タッチとジェスチャーは、PC/スマホ版の黒い部分と連動していて、ジェスチャーは何か動きがあったときにストロークプレイ、 タッチは4弦と連動してアルペジオプレイができるように、アプリケーションを実装しています。

見た目とプレイしやすさから チップスターの缶 をいい感じにカットしてフレット裏の湾曲を作りました。 これでFコードなどを抑えるのも用意になります。

接触位置センサーは木目調シートで隠して、ちゃんとしたフレット位置にシルバーラッカーで目印を書いておきます。

当日

土曜日

日曜日

Cloud Next Tokyoが終わって直前の2日間ぐらい、制作したギターで練習して当日に挑みました。 ちゃんとギターアンプまで持ち込み。

結果として、たくさんの方の目に留まり、コミュニティの説明をすることができました(パンフレットなくなったし!) 実際に今後どのぐらいの人が

  • CHIRIMENをさわってくれたり
  • Webとリアルをつなぐアプリを作ってくれたり
  • プログラミングを学んでくれたり
  • Webの標準化に興味を持ってくれたり

するかはわかりませんが、何かのキッカケを作れたんじゃないかなーと思います。 ギターはまだ分解してませんw ので、ご要望があればどこかに持っていて遊びたいなーと思っています。

来年のMFTokyoは10月開催予定ということで真夏の祭典じゃなくなるけど、また面白い展示を考えて、CHIRIMENを広める活動をしたいなーと思っています。 CHIRIMENコニュニティは皆様の参加を待っています!

Google Cloud Next Tokyo'19 に出展しました

Google Cloud Next Tokyoに出展してきました。 今回は会社がプラチナスポンサーになっていたので、主にブース内でデモ担当をやっていました。

デモしたのはdakokuという、IoT技術を使った勤怠システム打刻の仕組みで、会社のIoT勉強会で作ったものです。 インフラでGCPを使っているので、今回デモ用の事例として展示することになりました。

上記リポジトリに構成が添付されていますが、結構マジメに(セキュリティとか可用性とか)考えています。 すべてOSSで公開しているので、もし勤怠の打刻をやってみたいという方の参考になればなと思っています。

あと、会社の勉強会は社外の方も参加可能らしいので、IoTに興味がある方はお声がけください。 電子工作のための機材とか、GCPの環境などは準備がありますので、どうぞー