by sizuhiko
Sunday, June 09, 2019 02:43:00 PM
いつもと同様にLT枠へ申し込みましたが、今回はPolymerではありません。 とは言いつつ、WebComponentsに関してもとても重要な仕様となるimport mapsについて、最近Blogにまとめた内容について発表してきました。
さて、私のスライドは以下のとおりです。
イベントでは他にもとても楽しいセッションが多く、盛り上がりました。 また参加したいと思います。
Friday, May 31, 2019 02:43:00 PM
2019年4回目となる Polymer.co-edo ミートアップ を開催しました。
前回 edo-blogcard の作成に入りましたが、実際はWebサイトのデータを収集するためには、スクレイピングする必要があります。
ブラウザからはCORSになってしまうため、そういったOSSや、サーバー側のアーキテクチャの調査をしていました。
個人的には少しずつアイデアが固まってきたので、会社の合宿でまとめていきたいなぁと思っています。
引き続きEdoエレメントの開発ともくもくを進めていきます。 皆様の参加をお待ちしております。
Sunday, May 19, 2019 07:26:00 PM
前回の記事でも書いたI/O Extended 2019 Tokyo@GDGで話してきました。
Twitterでも、イベントサイトの資料でも共有しましたが、スライドを添付しておきます。
朝から夕方まで、とても幅広い話題がたくさんあり、勉強になりました。
Room1の様子は動画がありますので、こちらからどうぞ。 私はRoom2だったので、ありませんがw
Wednesday, May 15, 2019 06:57:00 PM
タイトルを見ると、現地に行ったみたいですが、実際は行ってなくて Youtube のビデオで Webの全セッションを見ました。 なんでかというと、今週末に I/O Extended 2019 Tokyo@GDGというイベントがあって、Polymer JapanはGDGのコミュニティなんで、何かWebで喋ることになったためです。
Web Componentsの発表とかがあるわけではなかったのですが、何かWebで…と思い、ひたすら3日分（実際Webは数少ないけど）見たので、発表しない内容も含め、メモをブログ記事にしておこうと思います。 ということで、長文です。
Web系の基調講演です。 ハイライトは以下のとうな感じ。
パフォーマンスの改善が重要なテーマで、以下のようなものに取り組んでいる。
機能面では以下のようなことがある。
Chromebook でPWAアプリが登録可能に
PROXX 、2019のマインスイーパー
アシスタント
ネイティブのような機能
新興国ではPWAアプリが重要（回線速度や端末スペックによる）。 目玉の機能としては、Web Share API。ネイティブに近い共有機能が使えるようになった。
Googleが各JavaScriptフレームワーク（おもにReact/Facebook）と協力してAPI開発を進めている
現時点の課題としては、npm/バンドルの重複がある。 これを防ぎたい。package.jsonへesmoduleが入れられないか。 現時点は情報が不足しているため、重複を防ぐことができない。何かしらの形で足りれば役に立つ。ということ ->import mapsにはふれなかった。
AMPの基調講演にあたる。
A string user-first open web forever
これまではHTMLとCSS。不自由だった。
WorkerDOMによってJSを利用可能にする。 amp-scriptを実行できるようになる。 ワシントンポストの例 bit.lt/amp-script-trial
OriginTrialで利用可能になる
NEXT.jsでAMP対応できるようになる bit.ly/next-js-amp
Webパッケージングで署名付きパッケージにすることで、google.comから独自のドメインに展開できる。 自前で用意するか、AMP Packagerで作る方法。 AMP Real URL（Cloudflare）
これまでは、HTMLにAMPページのリンクがあった。 これは2つのバージョンのコンテンツを常に2つ用意することになる。 余分なオーバーヘッドが生まれる。 AMP Firstアプローチを提案する。
AMPで作り始め、足りないところを amp-script でビジネスロジックに補完する。 それでも足りないこと、それを Bento AMP プロジェクトで助ける。
PWA <–> AMP
PWAでサービスワーカーを作るのはとても大変、でもAMPなら1行でできる。 bit.ly/amp-sw
amp.devではそれを利用している。
AMPでは、アクセシビリティ、パフォーマンスを達成できる。 そして、依存関係管理が楽になる。 AMPは常に最新です。
LTS（LTメンテナンス） 800以上のコントリビューターがあなたのメンテナンスコストを減らす。
amp-toolbox-optimizer go.amp.dev/optimize-amp
AMPHTML Ads
AMPページと、非AMPページのどちらにも適用できる。
とにかく速い。
ampifyme
amp-analytics 解析 amp-linker amp-recaptcha amp-readiness amp-tag-test amp-insight
A/Bテスト
amp-experiment optimizely + Oracle maxymiser で利用可能
Story Ads
フルスクリーンの広告を表示できる。
Google Ad Managerにあるので、AMPに配信できる。
Storiesを作るツール類
Google Discoverでストーリーを見つけることができる
検索結果にビジュアルストーリーを表示するブロックができると思う。
広告に関する大きな変化をもたらした。 Webサイトの収益化
ロードマップ
JavaScriptの新しい機能について。
コンストラクタなしで、プロパティの初期値が指定できるように
class hoge {
_foo = 0;
# をつけて privateにできる
class hoge {
#foo = 0;
get value() { return this.#foo }
継承すると
class Animal {
constructor(name) {
this.name = name;
}
}
class Cat extends Animal {
likeBath = false; // コンストラクタの呼び出しが必要ない。super呼び出し不要
meow() {
console.log("Meow");
}
}
String#matchAll でマッチした部分や、部分一致の部分など取得しやすくなった。
1000000000000 みたいな数字を 1000000000000 と区切り付きで書けるようになる。 読みやすい…らしい(Babelで使えるよ！
Bigints 新しい機能（ロケールつき）
nf = new Intl.NumberFormat('fr');
nf.format(12345678901234567890n)
12 345 678 901 234 567 890
12_345_678_901_234_567_890n.toLocaleString('fr') // 同じ
Firefox, Node.js で使える。Polyfillもあるよ
array = [1, [2, [3]]];
array.flat()
[1, 2, [3]]
array.flat(Infinity)
[1, 2, 3]
[2, 3, 4].flatMap(x => [x, x])
[2, 2, 3, 3, 4, 4]
どこでも使えるよ！
Object.entries したものを、オブジェクトに戻せるAPI
map = new Map(Object.entries(obj)); Object.fromEntries(map) もできるよ！
どこでも使えるよ！Polyfillもあるよ
どこでも使えるよ！
安全ソートがすべてのプラットフォームで使えるようになったよ
Safari以外で使えるよ
ChromeとNodeだけね。Polyfillはあるよ
Chromeだけで、flagが必要
ChromeとNodeだけね。Polyfillはあるよ
まだ使わないでね
画像をキャッシュしたいときなどにmapに入れるけど、それをGCで消すことができる
Chromeだけで、flagが必要
Project Fugu
ネイティブアプリにあって、Webアプリにはない差分をうめていきたい。 Webでできることを広げていきたい。
Permissionモデルで機能を利用できるようにする。
bit.ly/new-fugu-request
codelabs/web-capabilities developers.google.com/web/updates/capabilities
PROXX開発秘話！（発表だから秘話じゃないけどw
2019年のマインスイーパーをどのようにして作るか？という興味深いセッション。 実際にソースコード見れるし、feature phone（実際は低スペックのAndroidやKaiOSあたりが該当する）にも対応している。
以前にこさまりさんが、ガラケーの情報を集めていたのは、このあたりに関係しているのかなーと思って見ていた。
proxx.app でためそう！
どうやってECサイトをAMPで作るか、という事例をメインにしたセッション。 そのあたりに興味あればビデオを見ると役だちそうです。
snapchatで始まったストーリーは、InstagramやFacebook, whatsappなどで広まった。 アプリのストーリーは自然な感じで、スマートフォンユーザーのほとんどが使っている。 フルスクリーンなので、スクロールしたり回転したりせず、操作も簡単です。
ただし発見されるのは難しい。そこでAMPはオープンなWebプラットフォームで見つけることが可能で、リンクでき、共有できる仕組みを提供する。 自分でコントロールでき、Webサイトにリンクでき、検索にヒットする、Webページに埋め込むこともできる、そして一番重要なのは速い。 タップするか、スワイプする。
最初は英語のみをサポートしていた。 今は21の言語を利用できる。
<html ⚡️ lang="ja">
デフォルトはモバイルデザイン。 ワシントンポストと協力して、有用性を確認した。
<amp-story supports-landscape>
ランドスケープに最適な背景を用意し、そうでない場合は中心が表示される（object-position で調整可能)。
ハンバーガーメニューにサイドバーを追加できる
<amp-story>
<amp-sidebar>
<!-- サイドバーの内容 -->
</amp-sidebar>
</amp-story>
スワイプアップすると、添付ファイルにアクセスできる。
<amp-story>
<amp-story-page>
<amp-story-page-attachment>
<amp-video src="hoge.mp4"></amp-video>
</amp-story-page-attachment>
</amp-story-page>
</amp-story>
<amp-story>
<amp-story-page>
<amp-story-grid-layer>
<amp-twitter
layout="responsive"
width="400"
height="433"
data-tweetid="...">
</amp-twitter>
</amp-story-grid-layer>
</amp-story-page>
</amp-story>
Twetter以外にもいくつかある。
最初にやったのの詳細紹介
レンダリングがどのように行われるか、SSRとかクライアントレンダリングとか。 パフォーマンス話なので、パフォーマンス改善に取り組みたい、方法を知りたいというときに役立つ話なので、興味あるひとはタイトルでYoutubeをチェック！
DesktopとChromeOSでPWAが使えるようになるよ
PWAアプリの作りかた、とくにマニフェストの書き方を丁寧に説明している。 つづいてサービスワーカー。 Workboxを使って作る方法
インストール前のイベントをフックできるよ。
ファイルシステムへのアクセスは最後に残るピース。
DevToolとPuppeteerについて ブラウザ自動化ソリューションです。
Node.jsからChromeを操作（操り人形==puppeteer）するためのAPIを提供している。
npmでブラウザがインストールされるので、環境設定や構築の必要がない。
これまでChromeだけだったけど、 Puppeteer Firefox!!
現在90%のAPIをサポート
puppeteerには素晴らしいAPIが。 Browser Context. Chromeのシークレットモード。 分離できるので、実質新しいブラウザを起動するのと一緒 100倍高速！
非同期問題。
pupperteerには waitForX APIが。
DevToolでユーザーエージェントを変えられる。 puppeteerからデバイスをエミュレートできる。 100以上のデバイスをエミュレートできる。
puppeteerからオフラインモードにできる。
DevToolを開くより簡単に書ける サービスワーカーのテストを容易にする
通常にブラウザにアクセスすると、許可を与えてから、developer consoleとかで操作する。
puppeteerでも同じように制御できる。
DevToolネットワークモニター puppeteerではリクエストとレスポンスを取得でき、そこからいろいろな情報へリーチできるようになっている。
そして、リクエストをインターセプトできる。 つまり特定のAPIリクエストのレスポンスを偽造して、Webサイトにエラー表示をさせたりできる。
Dipatch Event APIというのがあったがな…
Shadow DOMやiframeも通過するよ
Page Metrics APIがオススメ DevToolsのパフォーマンスモニタの値が取得できる。
Record と Stop で記録するけど、puppeteerにもAPIがある。
CSSとJSのコードカバレッジを取れる。
自動化は難しかったが、 PageAccessibilitySnapShot APIで簡単にできる
Accessibility Visualizer というツールを作ったよ githubで公開中
Slackチャンネルあるよ
メールの中にAMPを入れられる。
いろいろある テストは必要
メーラー
ユースケース
配信/テストツール
一般的なメールクライアント
g.co/dev/ampemail で学ぼう
gmail プレイグラウンドを使う
amp.gmail.dev/playground
通常は表示できないので、Gmailの設定から、 - Dynamic Emailが有効になっているか？ - そこに Developer Setting というリンクがあるのでクリックすると、ホワイトリストにメールアドレスを入れることができる（開発用に） - amp@gmail.dev というプレイグラウンドのメールアドレスを設定
そうすると表示されているはず！
あとはHTMLを追加していくだけ。 プレイグラウンドでいろいろテストできる。
go.amp.dev/io-email でスライドの内容を試せます
プレイグラウンドではない、商用サービスの事例
プレイグラウンドと同じようにプレビューしながら確認できる。 AMPに対応していないときの表示など記述できる。 メールの送信分析できる。
TWA UIなしのChrome AndroidでPWAをプレイストアで配信するための方法。
WebView CCT より多くのことができる
事例
TWAはChromeであり、Chromeが更新されるたびに最新の機能を利用することができる。 将来的にはChrome以外でも
SEO
Googlebot is Chrome 41? No!
Googlebot is Chrome
React Vue Angular
サーチコンソールからテストしてね
youtube.com/GoogleWebmasters を見ると良いよ
セキュリティセッション XSSとかCSRFとか
どうやってセキュアなコードにするか（特にHTML中のJSとか） リファクタリング方法を解説
セキュリティに興味ある人は、タイトルでYoutubeをチェック！
WebGLが8年前に入った
多くのフレームワークやライブラリがある。
今何で使われている？
WebGL + HTML
事例をたくさん紹介
ReactThreeFiber 再利用可能になる
WebGL + Web Components これでよりWeb層に強力な影響をもたらす カスタムエレメントを使って、複雑なコードを隠蔽する
model-viewer エレメント アクセシビリティにも考慮している
GPUを操作するためのRawレベルAPI
例えば三角形を描くコード、Web GPUもWebGLも複雑さは変わらない でもフレームワークを使えば、それほどの問題にはならない
babylon.js はWebGPUに取り組み始めている
WebGLではGPU性能の前にJavaScriptの繰り返し性能に直面する
WebGPUではカクカクしないし、JavaScriptのCPU時間も使わない GPUが利用されるから
babylon.js の4.1では使えるようになる
WebGLとWebGPUのコードの違いを解説
クロスプラットフォーム
webgpu.io を見てね！
ということで、ながながとメモを貼っただけになりましたが、私のLTでは
について話すので、よろしくお願いします。
Monday, May 13, 2019 06:18:00 PM
前回 TRY import maps ということで、import maps を試してみる記事を書きました。 最後に
JSON定義を自動生成するスクリプトが出ないか期待したいですね（がんばって自作するのもあり）。
という記述をしたのですが、その後調べたら How to convert package-lock.json to import maps? #60 というissue が上がっているのを見て、いくつか yarn のサンプルが出ていたりして、これ自作できるのでは？と思い、作ってみました。
READMEのとおりで簡単に動きます。
とても小さいJavaScriptのコードです。以下のような手順で処理しています。
package-lock.json ファイルを読み込むpackage.json を読み取って、 main ファイルのパスを入手する前回と同じくPolymer-Japan/litelement-first-element のコードを使って実行してみます。
生成できたJSONは以下のとおりです。
{
"imports": {
"@polymer/font-roboto/": "/node_modules/@polymer/font-roboto/",
"@polymer/font-roboto": "/node_modules/@polymer/font-roboto/roboto.js",
"@polymer/iron-demo-helpers/": "/node_modules/@polymer/iron-demo-helpers/",
"@polymer/iron-flex-layout/": "/node_modules/@polymer/iron-flex-layout/",
"@polymer/iron-icon/": "/node_modules/@polymer/iron-icon/",
"@polymer/iron-icon": "/node_modules/@polymer/iron-icon/iron-icon.js",
"@polymer/iron-icons/": "/node_modules/@polymer/iron-icons/",
"@polymer/iron-icons": "/node_modules/@polymer/iron-icons/iron-icons.js",
"@polymer/iron-iconset-svg/": "/node_modules/@polymer/iron-iconset-svg/",
"@polymer/iron-iconset-svg": "/node_modules/@polymer/iron-iconset-svg/iron-iconset-svg.js",
"@polymer/iron-location/": "/node_modules/@polymer/iron-location/",
"@polymer/iron-meta/": "/node_modules/@polymer/iron-meta/",
"@polymer/iron-meta": "/node_modules/@polymer/iron-meta/iron-meta.js",
"@polymer/marked-element/": "/node_modules/@polymer/marked-element/",
"@polymer/marked-element": "/node_modules/@polymer/marked-element/marked-element.js",
"@polymer/polymer/": "/node_modules/@polymer/polymer/",
"@polymer/polymer": "/node_modules/@polymer/polymer/polymer-element.js",
"@polymer/prism-element/": "/node_modules/@polymer/prism-element/",
"@webcomponents/shadycss/": "/node_modules/@webcomponents/shadycss/",
"@webcomponents/shadycss": "/node_modules/@webcomponents/shadycss/shadycss.min.js",
"clipboard/": "/node_modules/clipboard/",
"clipboard": "/node_modules/clipboard/dist/clipboard.js",
"delegate/": "/node_modules/delegate/",
"delegate": "/node_modules/delegate/src/delegate.js",
"good-listener/": "/node_modules/good-listener/",
"good-listener": "/node_modules/good-listener/src/listen.js",
"lit-element/": "/node_modules/lit-element/",
"lit-element": "/node_modules/lit-element/lit-element.js",
"lit-html/": "/node_modules/lit-html/",
"lit-html": "/node_modules/lit-html/lit-html.js",
"marked/": "/node_modules/marked/",
"marked": "/node_modules/marked/lib/marked.js",
"prismjs/": "/node_modules/prismjs/",
"prismjs": "/node_modules/prismjs/prism.js",
"select/": "/node_modules/select/",
"select": "/node_modules/select/src/select.js",
"tiny-emitter/": "/node_modules/tiny-emitter/",
"tiny-emitter": "/node_modules/tiny-emitter/index.js"
}
}
前回のJSONは以下のとおりでした。
{
"imports": {
"@polymer/iron-demo-helpers/demo-pages-shared-styles": [
"/node_modules/@polymer/iron-demo-helpers/demo-pages-shared-styles.js"
],
"@polymer/iron-demo-helpers/demo-snippet": [
"/node_modules/@polymer/iron-demo-helpers/demo-snippet.js"
],
"@polymer/polymer/polymer-legacy.js": [
"/node_modules/@polymer/polymer/polymer-legacy.js"
],
"@polymer/iron-flex-layout/iron-flex-layout.js": [
"/node_modules/@polymer/iron-flex-layout/iron-flex-layout.js"
],
"@polymer/font-roboto/roboto.js": [
"/node_modules/@polymer/font-roboto/roboto.js"
],
"@polymer/polymer/lib/utils/html-tag.js": [
"/node_modules/@polymer/polymer/lib/utils/html-tag.js"
],
"@webcomponents/shadycss/entrypoints/apply-shim.js": [
"/node_modules/@webcomponents/shadycss/entrypoints/apply-shim.js"
],
"@webcomponents/shadycss/entrypoints/custom-style-interface.js": [
"/node_modules/@webcomponents/shadycss/entrypoints/custom-style-interface.js"
],
"@polymer/marked-element/marked-element.js": [
"/node_modules/@polymer/marked-element/marked-element.js"
],
"@polymer/prism-element/prism-highlighter.js": [
"/node_modules/@polymer/prism-element/prism-highlighter.js"
],
"@polymer/prism-element/prism-theme-default.js": [
"/node_modules/@polymer/prism-element/prism-theme-default.js"
],
"@polymer/polymer/lib/legacy/polymer-fn.js": [
"/node_modules/@polymer/polymer/lib/legacy/polymer-fn.js"
],
"@polymer/polymer/lib/legacy/polymer.dom.js": [
"/node_modules/@polymer/polymer/lib/legacy/polymer.dom.js"
],
"marked/lib/marked.js": [
"/node_modules/marked/lib/marked.js"
],
"prismjs/prism.js": [
"/node_modules/prismjs/prism.js"
],
"@polymer/polymer/lib/elements/dom-module.js": [
"/node_modules/@polymer/polymer/lib/elements/dom-module.js"
],
"lit-element": [
"/node_modules/lit-element/lit-element.js"
],
"lit-html": [
"/node_modules/lit-html/lit-html.js"
],
"lit-html/lib/shady-render": [
"/node_modules/lit-html/lib/shady-render.js"
],
"lit-html/lit-html": [
"/node_modules/lit-html/lit-html.js"
],
"@polymer/iron-icons/iron-icons.js": [
"/node_modules/@polymer/iron-icons/iron-icons.js"
],
"@polymer/iron-icon/iron-icon.js": [
"/node_modules/@polymer/iron-icon/iron-icon.js"
],
"@polymer/iron-iconset-svg/iron-iconset-svg.js": [
"/node_modules/@polymer/iron-iconset-svg/iron-iconset-svg.js"
],
"@polymer/iron-meta/iron-meta.js": [
"/node_modules/@polymer/iron-meta/iron-meta.js"
]
}
}
だいぶ違いますね！
このツールを作ることで、import maps の仕様理解が深まりました。
/ で終了すると他のファイルを参照できる。くわしくは “Packages” via trailing slashes を参照くださいこれで、定義ファイルを自動生成できます。
前回と同じくPHPのビルトインサーバーを利用します。 ツールで生成できた JSON をHTMLに追加しておきましょう。
$ php -S localhost:8080 -t .
前回と同じように、無事デモが動作しました。
いろいろとissueを見たりしているうちに、JSON記述は外部ファイルが使えるかも？と思ったので、import-mapsの定義をファイルに変更してみます。
ツールで出力されたJSONを import-maps.json というファイル名にして、以下のようにHTMLの記述を変更します。
<script type="importmap" src="import-maps.json"></script>
ページをリロードしてみると Dev Tool のコンソールに External import maps are not yet supported. と表示されました。 まだサポートされてなかった…
ということで、サポートを待ちましょう。
仕様は文面だけで読んでいると、わかっているつもりでも、実際のユースケースではわかっていないことも多いと実感しました。 ツールやデモプログラムを作って、実際に手に馴染ませることが重要ですね。
それと、polyfill の除外がWeb Components固定になっているので、今後の展望としては、ignoreするモジュールを定義ファイルで指定できるようにしたいなーと思っています。
今後も import maps の最新状況を追いかけていきたいと思っています。