Polymer.co-edo meetup #16 を開催しました
Sunday, July 29, 2018 11:31:00 AM
今年7回目となる Polymer.co-edo ミートアップ を開催しました。
今回の議題は
PWA Starter Kit でも使われていた lit-element を使って、カスタムエレメントを作る体験
ということで、codelabsにある、Polymer1系のエレメント作成では定番の Build your first Polymer element です。 当日は、上記チュートリアルの完成系のコード を見ながら lit-element で作ってみました。
このブログでは、当日やったことの履歴として、今後やってみたい人のために、手順を書いておきます。
Polymer CLI をインストールする
まず lit-element の README に書かれているように Polymer CLI をインストールします。 READMEではグローバルにインストールしていますが、今回はローカルに入れてみましょう。
icon-toggle
というディレクトリを作ってから、CLIをインストールします。
$ mkdir icon-toggle
$ cd icon-toggle
$ npm i polymer-cli@next
念のため、インストールできたか確認してみます。
help
コマンドが表示できていれば大丈夫です。
$ ./node_modules/.bin/polymer help
/\˜˜/ /\˜˜/\
/__\/ /__\/__\ Polymer-CLI
/\ / /\ /\ /\
/__\/ /__\/ \/__\ The multi-tool for Polymer projects
\ /\ /\ / /\ /
\/__\/__\/ /__\/ Usage: `polymer <command> [options ...]`
\ /\ / /\ /
\/__\/ /__\/
icon-toggle エレメントのスケルトンを作る
codelabs にあるコードは、すでにディレクトリ構造やファイルが準備されている状態から始まりますが、今回は CLI から作成します。
以下のコマンドを実行してみましょう。
$ ./node_modules/.bin/polymer init
何を作成するのか質問されるので、 polymer-3-element
を選択します。
? Which starter template would you like to use?
❯ polymer-3-element - A simple Polymer 3.0 element template
エレメント名はそのまま Enter
で進むと、 .gitignoreがないよ
というエラーになってしまいます。
info: [init] Running template polymer-3-element...
? Element name icon-toggle
? Brief description of the element
error: [cli.main] Uncaught exception: AssertionError [ERR_ASSERTION]: Trying to copy from a source that does not exist: xxx/icon-toggle/node_modules/polymer-cli/templates/element/polymer-3.x/.gitignore
e
これは、Polymer3のエレメントテンプレートがミスっているということで、ファイルを作ってからリトライします。
$ touch ./node_modules/polymer-cli/templates/element/polymer-3.x/.gitignore
$ ./node_modules/.bin/polymer init
質問には、上記と同じように回答してください。そうすると、以下のように表示されて完了します。
Setup Complete!
Check out your new project README for information about what to do next.
必要なパッケージをインストールする
まずインストールされている PolymerElement を削除します。
$ npm uninstall @polymer/polymer
つづいて、LitElement をインストールします。
$ npm i @polymer/lit-element
icon-toggle では iron-icon
と iron-icons
を利用する(codelabsでは最初からbower.jsonに入っている)ので、これらのCustomElementsもインストールします。
$ npm i @polymer/iron-icon
$ npm i @polymer/iron-icons
最後にもう一度 Polymer CLI をインストールしておきます。
$ npm i -D polymer-cli@next
LitElement で書き換えてみる
ソースコードを GitHub に置きました。 sizuhiko/lit-element-icon-toggle
Polymer CLIで作った Polymer3.0 element を LitElement に書き換える箇所は以下のとおりです。
import
をLitElement
に変更- 親クラスを
LitElement
に変更 static get template()
を_render({必要な引数})
に変更
codelabs は Polymer1 で書かれているので、Polymer3 形式に変更するときに気をつける箇所は以下のとおりです。
listeners
は使わずにaddEventListener
でクリックイベントを受け取る
あと、デモのコードのアップした内容を見て確認してください。 LitElementとは関係ないですが、Polyfillのインポートが以下のように変わっています。
<script src="../node_modules/@webcomponents/webcomponentsjs/webcomponents-bundle.js"></script>
LitElement と PolymerElement の違い
PolymerElementはHtmlElementに以下のような機能が追加されて構成されています。
公式ドキュメントのAPI docの polymer-element.js
を参照してください。
Base class that provides the core API for Polymer’s meta-programming features including template stamping, data-binding, attribute deserialization, and property change observation.
また、このドキュメントに書いてある様々な機能を利用できます(たとえば tap イベントを処理するための gesture-event-listeners.js
とか)。
対して、LitElementではPolymerElementのつもりでいると、以下のようなポイントで躓きます。
- プロパティで
reflectToAttribute
が使えない- LitElement の issue Adding reflectToAttribute to the demo doesn’t work #10 に解決するサンプルコードが書いてあります。lit-element-icon-toggleではそのまま利用しています。
- プロパティで2ウェイデータバインディングが使えない
- LitElement の issue 2 way data binding not working #14 や Implement property change notification events (notify) #81 が参考になります。
- プロパティで
observer
が使えない
ということで、codelabs のPolymer1版ではあった、データバインディングの箇所は実装されていません。
現時点は上記 issue を参考に、値に変更があったときにイベント pressed-changed
イベントを投げるところまでは実装しています。
受け取り側の demo/index.html
で以下のようなJavaScriptを書くと変更イベントを受け取れます。
document.querySelector('icon-toggle[toggleicon="favorite"]'). addEventListener('pressed-changed', e => console.log(e));
プロパティの値が変化したときには、データバインディングでなく redux などを使おう、というのは PWA-Starter-Kit のコードからも伝わってくるので、まぁそうなのかなーと思います。 ただ、アプリでなく、エレメントを作って公開したい場合は、 redux なのか?という気もするので、change イベントなどを投げるのが良いのだろうな、とは思っています。
次回は
8/20(月) の予定です。Doorkeeperのコミュニティページに今年の予定も書いてあるので参考にしてください。
そろそろ、edoエレメントの開発をしないとなー、なんて思っています…
CHIRIMEN Raspi setup
Saturday, July 28, 2018 01:27:00 PM
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 タグを予定しています。 近日コードは公開予定!
Polymer.co-edo meetup #15 を開催しました
Monday, July 02, 2018 03:22:00 PM
今年6回目となる Polymer.co-edo ミートアップ を開催しました。
今回の議題は
今回は Google I/O ‘18 で発表された PWA starter kit を使った、サンプルアプリを動かそう
ということで、Polymer3以降の技術で作り直されたサンプルアプリを動かしてみました。
PWA starter kit のURL
各自 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 の体験をしてみたいな、と思っています。
Brackets prettier 拡張を作ってみた
Monday, June 11, 2018 01:49:00 PM
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
が便利というか、それ見ないとわからないよ!
- 詳しいAPIの使い方が書いてある
どうやって作るか
公式サイトにも書いてあります
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-fabricate-adaptor を CakePHP3.6 対応しました
Sunday, June 10, 2018 12:51:00 PM
CakePHPのコア開発のメンバーでもある dakota が南アからPRをくれました。 最近は普段からCakePHP使っていないので、PRはとても助かります。 テストコードなかったので、たくさんビルドエラーになっていましたが、マージして、私の方で対応しておきました。
デフォルトのdevelopブランチから取得すると、CakePHP3.6の開発でも利用できます。
まだリリース切ってないけど、3.6以前と互換性なくなるので、バージョン番号の規則から言うと 0.x → 1.x にするしかないのかな。 もう少し見直してから(結果として何も変わらないかもしれないけど)1.0にしたいと思っていますので、しばらくお待ちください。
Recent Articles
- GAE gen1 で動いている PHP5.5 で作った個人開発サービスを gen2 PHP8.2 へ移行した1年記 〜 その 2 2024/03/20
- GAE gen1 で動いている PHP5.5 で作った個人開発サービスを gen2 PHP8.2 へ移行した1年記 〜 その 1 2024/03/20
- マルチプルレポをモノレポへコミットログを残しながら移行する 2023/09/27
- tsyringe を TypeScript 5 で使う方法 2023/05/02
- LocalStack を使って aws-sdk の Integration Test を実行する 2023/04/19
- AWS SDK v3 のモジュールと利用方法 2023/04/18
- ts-jest が esbuild/swc をトランスフォーマーに使って高速化していた 2023/04/13
- aws-sdk v3 を使うライブラリを作ったときは、なるべく peerDependencies に設定しよう 2023/04/11
- aws-sdk v2 が 2023 年中にメンテナンスモードになる 2023/04/06
- Node.js v18 / aws-sdk v3 の Lambda アプリが突然動かなくなる 2023/04/05