Technote

Maker Faire Tokyo 2018にCHIRIMEコミュニティで参加するためのデモをセットアップしたときのメモ。

購入したもの

• Raspberry Pi 3 model B+
• Adafruit PiTFT Plus 480x320 3.5インチTFT
• Adafruit GPIOリボンケーブル - 26ピン
• TOSHIBA microSDHC 16GB

インストール

イメージファイルのダウンロード

CHIRIMEN公式サイトのダウンロードページから、CHIRIMENRaspberrypi320180716.zipをダウンロードします。 Raspberry Pi 3 model B+ で利用できる CHIRIMEN のイメージファイルは現時点では評価版です。

イメージファイルの書き込み

最近のRaspberry Piイメージ（Raspbian）をインストールするメモが参考になります。 Etcherを使って、ダウンロードしたイメージファイルをmicroSDカードに書き込みます。

SSHの有効化

Raspbianはセキュリティを考慮してデフォルトではSSHが無効になっているので、 SDカードをマウントして、以下のコマンドを実行しておきます。

$ touch /Volumes/boot/ssh

起動

microSDカードをRaspberry Pi 本体に挿して、起動します。 Raspberry Piにsshで入るため、有線LANをMacと接続しました。 MacとRaspberry piをインターネット共有でつないでみるが参考になります。

$ ssh pi@192.168.2.2

初期パスワードは rasp になっています。

3.5TFTを有効にするため、公式サイトのEASY INSTALLを参考に、ドライバーをインストールします。

cd ~
wget https://raw.githubusercontent.com/adafruit/Raspberry-Pi-Installer-Scripts/master/adafruit-pitft.sh
chmod +x adafruit-pitft.sh
sudo ./adafruit-pitft.sh

で、このままでは X を利用できないので Raspberry Pi Zero(W)でPiTFTを使う - X Windowsの描画を参考に、設定の変更とタッチスクリーンの調整を行います。

ソフトウェアキーボードのインストール

Raspberry Piでソフトウェアキーボードをインストール&起動する方法を参考に、Matchbox Keyboardをインストールします。

デモプログラムの作成

Web Components(Polymer) meets REAL WORLD ということで、2年連続 HTML のパーツを組み合わせることで WoT を体験できるようなデモを実施予定です。 昨年は WebGpio タグを作ったので、今年は WebI2c タグを予定しています。 近日コードは公開予定！

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

今回の議題は

今回は Google I/O ‘18 で発表された PWA starter kit を使った、サンプルアプリを動かそう

ということで、Polymer3以降の技術で作り直されたサンプルアプリを動かしてみました。

PWA starter kit のURL

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

各自 PWA Starter Kitをダウンロードして、ローカルで実行しました。 特にはまりどころもなく、READMEどおり進めていけば大丈夫です。 動きを確認したあとは、私からどうなっているのか、という技術的な解説をしました。

PolymerというかLitElementの話がメインになって、reduxの解説までは時間が足りなかったのですが、 それはインターネットにたくさん情報があるので、私の解説よりはわかりやすいかな、と。

PWA starter kit から見える Polymer/Web Componentsの未来

Polymerが生まれた時点で 複雑なWebアプリを作るのは大変だ と言われていた状況は、 Web ComponentsやReduxによって、わかりやすいものになっていると思います。

PolymerはLitElementの裏に隠れていて見えませんが、もちろんPolymer3がLitElementを支えています。 今後もPolymerチームの動きからは目が離せませんね。

次回は

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

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

JavaScriptでコードを書くときは JS Beautifier を使ってフォーマットしていたのですが、 mizchi’s blogの最近のフロントエンドのエディタ事情で

フォーマッタは当然のように prettier が入る。もう選択肢はなくて、猫も杓子もprettier。すでに勝負は決している。

と書かれていたので、じゃぁprettier入れようと思ったのがきっかけです。

prettier を使うには

私がメインで使っているエディタは Adobe Brackets です。 vs-code にも atom にも拡張があるので、Bracketsでも誰か作ってるだろう… と思ったらありませんでした。 ここで考えたのが、以下アイデアです。

• gulp-watch 使って、ファイルに変更があったら自動的に変換する
• git の commit フックに仕込む
• Bracketsの拡張作る
• vs-code にエディタを変える

Brackets 愛が強すぎて拡張を作ってみることにした

まぁアレですよ。エディタの機能拡張といえば古くは（これはものすごく古い話）Emacsの拡張作ったり、Sublime使っていたころはpython使って拡張書いたりしていたので「エディタ拡張を作るとは」みたいな流儀はわかっていたつもり、でした。 そもそもBracketsの拡張ってatomやvs-codeとどう違うのか？と思って、atom版とvs-code版のコードを見比べましたが「お・おぅ」となって、断念しました。 まぁBracketsってCEFベースだからなー（electronベースではない）、そもそもコードを流用とか考えない方が良さそうだ。

Brackets 拡張を作るのに参考になるサイト

とりあえず調べられた範囲が以下のとおり

• 初めてのBRACKETS拡張機能の作成
  • 記事が2012年で大丈夫かぁ？と思ったが、終わってみれば何も変わっていなかった
• How to write extensions
  • こちらは2015年に更新されていて、情報のメンテはされているようだ
• Brackets API
  • 詳しいAPIの使い方が書いてある Show code が便利というか、それ見ないとわからないよ！

どうやって作るか

公式サイトにも書いてあります

For a quick start, you can paste in the Simple “Hello World” extension or the code from an existing extension that is similar to what you want to do.

「既存の機能が似ている拡張のコードを参考にすると良いよ！」（おまえドキュメントを書くということを放棄しているんじゃないだろうな…

参考にするもの

Brackets Beautifyという、最初にも紹介した JS Beautifier を使えるようにする Brackets拡張です。 普段この拡張を使っているので、参考にするにはもってこいです（機能もコードフォーマットという部分では似ている）。

いくつかの壁

Brackets Beautifyのコードは難しくなく、簡単に読めたのですが

• これテストコードとか書けないの？（まぁ書けないに近い
• ES6とか使えないの？
• ファイル分割するベストプラクティスとかないの？

という部分が気になりました。 他の拡張のコードをいくつかみたりしましたが、まぁエディタの拡張って、ちょこっとした機能だから分割するまでもないんですよね、「わかる」みたいな感じ。

結果として

• テストコードは諦めた（モックのテストになりそうだったので
• ES6というとアレですが、 const let あたりは使えた。allow functionはエラーになってしまった
• ファイル分割してみた！（ベストではないかもしれないが!!

Brackets Prettier 作ったよ！

そんなこんなで、Brackets Beautifyのコードを パクって 参考に、Brackets Prettier を作りました。

Brackets 拡張を作ったらやること

Brackets Extension Registryというところに登録しておくと、エディタの 拡張機能マネージャ からインストールできるので、世界中のBracketsユーザーが prettier と検索したら出てくるようになります。 で、レジストリへの登録方法は、公式WikiのExtension Registry Helpに書いてあるので、そのとおり作業を進めます。

で、登録するとBrackets拡張のBotアカウントがツイートしてくるんですね。知らなかった。

Brackets Prettier - 1.0.0 (NEW) https://t.co/axTV7nu5xB https://t.co/3KQ31k1dED @brackets

— Brackets Extensions (@brktsextensions) 7 June 2018

今後は

Brackets拡張の作り方わかったので、これからは俺得な拡張をもっと作っていこうと思います！ とりあえずPolymer関係を作ろうかなー

CakePHPのコア開発のメンバーでもある dakota が南アからPRをくれました。 最近は普段からCakePHP使っていないので、PRはとても助かります。 テストコードなかったので、たくさんビルドエラーになっていましたが、マージして、私の方で対応しておきました。

デフォルトのdevelopブランチから取得すると、CakePHP3.6の開発でも利用できます。

まだリリース切ってないけど、3.6以前と互換性なくなるので、バージョン番号の規則から言うと 0.x → 1.x にするしかないのかな。 もう少し見直してから（結果として何も変わらないかもしれないけど）1.0にしたいと思っていますので、しばらくお待ちください。

Polymerそのものと、Polumer.co-edoでの活動（取り組み）について、LTをしました。

co-edoに集う人の中から参加者が増えると良いなーと思っています。

今月は6/25に PWA starter kit のハンズオンを予定しています。