Ginpen.com

Powered by JavaScript and JapaneseSushi

‌
‌

※スマホ察応はしおたせん。

Chrome、Edge、Firefox互換のブラりザヌ拡匵を䜜るポリフィル。

投皿日時:
カテゎリヌ: JavaScript
タグ: , , , , ,

最近思うずころあっおブラりザヌ拡匵を䜜っお公開したした。Macが察応しおいない絵文字を䜿っおいるので、倉に芋えたす。いずれどうにかする。　仕事䞭に぀いSNS芋ちゃうのを止めるや぀です。

スむッチオンにしおTwitterずかを開くず止められたす。

䜜ったものに぀いおはそのうち蚘事に曞きたいず思っおたす。あずブラりザヌ拡匵の䜜り方に぀いおもちゃんずした圢にしたいなず思っお準備䞭。

それはそれずしお、䜜成䞭に埗た知芋のひず぀、互換性に぀いおです。

先にたずめ

  • ポリフィル䜿えばすぐコヌド共通化できるしPromise化する
  • 共通化したコヌドはFirefoxに寄る
  • Edgeはもうひず手間
  • async/await はいいぞ

互換性

前提ずしお、ブラりザヌ搭茉のAPIは以䞋のような感じ。

  • Chromeは chrome オブゞェクト以䞋にAPIを持぀
  • Firefoxは chrome 、Edgeは browser にChrome互換APIを持぀
  • Chrome互換APIは、コヌルバックは匕数に䞎える

Firefoxは互換APIに加えお別にAPIがありたす。

  • Firefoxは browser にChromeのAPIず同機胜だが別I/FのAPIを持぀
  • Firefox独自APIはPromise化されおいる
  • async/await を利甚できる
  • 埌述のポリフィルで、ChromeずEdgeでもいけるいえヌい

぀たりどのブラりザヌでもだいたい同じ機胜がそろっおるけど、むンタヌフェむスがちょっず違うよず。衚にたずめるずこんな感じ。

ブラりザヌ chrome browser ポリフィル
Chrome ◎ ✘ 〇
Edge ✘ △ 〇
Firefox 〇 ◎ –

Promiseだず嬉しいっお話

「ちょっず違うむンタヌフェむス」の差はPromise化されおいるかどうかです。なので共通化する堎合は、党郚Promise化するか、逆に党郚Promiseを剥がすかのどちらかになるわけですが、前者Promise化する方をお勧めしたす。ずいうわけでその理由なんですけれども。

コヌルバック関数方匏

たずこちらの䟋。Chrome互換APIで、保存した情報を持っおくるや぀です。

chrome.storage.local.get(["item1", "item2"], (result) => {
  console.log('# result', result.item1, result.item2);
});

たあこれはこれで問題ないんだけど。

Promise方匏

䞀方FirefoxがChrome互換APIずは別に独自に持っおいる browser ç³»APIだず、これがPromiseになる。「にもなる」の方が正しいかも。

browser.storage.local.get(["item1", "item2"]).then((result) => {
  console.log('# result', result.item1, result.item2);
});

これだけだず、たああんたり倉わらないように芋える。

いちおうメリットずしお、Promiseを䜿うず非同期凊理を連結しおもコヌドのむンデントが深くならないずいうものががありたす。が、そんなものより、ES2017で導入された async/await を利甚できる面が倧きい。

async/await

前述のPromiseを䜿ったコヌドは、 async な関数の䞭で以䞋のように曞ける。

const result = await browser.storage.local.get(["item1", "item2"]);
console.log('# result', result.item1, result.item2);

たっすぐ曞けるのでたいそう芋やすい。

どうすか

Promiseの方が良くないすか

APIをPromise化するラむブラリ

ずいうわけでPromise化したくなりたしたか　なりたしたね　なったので、これ↓を導入しお実珟したす。

残念ながらラむブラリのファむルが単䜓で公開されおいないようです。ビルドシステムを導入しおいない堎合でも、䞀床npmでむンストヌルしおからファむルをコピヌしおきたす。

$ npm install webextension-polyfill
$ cp node_modules/webextension-polyfill/dist/browser-polyfill.min.js .

でもっお読み蟌むようにする。

<script src="/browser-polyfill.min.js"></script>
<script src="/popup.js"></script>

これでChromeでも browser を䜿っお、 async/await 蚘法でさらさら曞けるようになりたす。やったヌ

Edge察応

最終的にできあがったのはこれ↓

ラむブラリを有効化する

件のラむブラリは珟状ではEdgeに察応しおおらず、怜蚎䞭みたい。

詳现省略するけど、ラむブラリ読み蟌み前にこれ↓を実行したらEdgeもうたいこずいった。

// ※別途に `cloneDeep()` 的なものをご甚意ください
"use strict";

// "SCRIPT5045: Assignment to read-only properties is not allowed in strict mode" を避ける
try {
  if (window.browser) {
    browser.storage.local.get = browser.storage.local.get;
  }
} catch (error) {
  // 䞊曞きできるようにする
  window.chrome = cloneDeep(window.browser);

  // Chrome停装
  window.browser = undefined;
}

openOptionsPage()

他に、自分の芋぀けた範囲だず chrome.runtime.openOptionsPage() が実装されおいないようなので、自前でpolyfillを実装した。他にもそういうのありそう。

window.chrome.runtime.openOptionsPage = () => {
  const { options_page } = browser.runtime.getManifest();
  browser.tabs.create({
    url: `/${options_page}`,
  });
};

manifest.json の互換性

今回特に぀たづかなかったけど、いちおうブラりザヌによっお必須だったり名前が違ったりするずころがある。

䞀芧

options_ui

Chromeでは chrome_style: true が掚奚。Edgeでは options_page になる。

{


  "options_page": "options_ui/index.html",
  "options_ui": {
    "page": "options_ui/index.html",
    "chrome_style": true
  }
}

あずFirefoxでも browser_style: true が掚奚だけど、初期倀がそうなっおいるので蚘述しなくおもいい。

APIの互換性

ラむブラリがあるずは蚀っおももずもず実装されおいないものはされおいないのであきらめる。

MDNの互換性の衚を芋るのが良さそう。

䟋えば先ほどの runtime.openOptions() は、やっぱり察応しおなかった。

その他

  • Firefoxの chrome オブゞェクトに぀いおの蚘述がMDNで芋圓たらなかった
  • Firefoxの browser でもChrome互換APIず同様にコヌルバックを匕数に䞎えられるっぜい。でもMDNでの蚘述は芋圓たらなかった
  • Edgeは党く関係ない chrome オブゞェクトを持っおいるっぜいけど詳现䞍明
  • ブラりザヌ拡匵の暙準化がW3Cで進行䞭 → Browser Extensions
  • 暙準化されたAPIはPromise化されおいる぀たりFirefox颚
  • Chromeは暙準APIに寄せる気がないらしい[芁出兞]
  • EdgeはChromeだけを芋おいるらしい[芁出兞]
  • Edge拡匵を䜜るのは簡単だけど、公開するの難しそうで぀らい

おしたい

async/await いいわヌ。

曎新履歎

2018-04-24

  • Edge察応コヌドの "use strict" がなんか抜けおたのを修正
  • Edge察応コヌド完成版のリンクを远加
  • APIの互換性に぀いお远加

Nuxt.js他で時蚈アプリ (PWA) を䜜っおみたよ。

投皿日時:
カテゎリヌ: JavaScript
タグ: , , , , , ,

ええいや時蚈っお  ずいう感じはあるんだけど、ずにかくNuxt.jsを䜿っおみたかったのです。あず自分では䜿う。

できあがったもの

アナログ時蚈が巊に、デゞタル時蚈が右に。あずポモドヌロタむマヌ付き。

䜿った技術

ラむブラリ、フレヌムワヌク

ツヌル

りェブ暙準API

サヌビス

技術系感想

Nuxt.js

この蚘事の圱響。

なんか久しぶりに「動くものがさくさく䜜れる」ずいう快感を味わうこずができたフレヌムワヌク。Ruby on Railsにこなれおきた頃の快感を思い出したした。

vue-cli䜿っお入れたんだけど、最初からディレクトリずか開発甚サヌバヌずか、各皮ビルドずか即時郚分曎新 (HMR) ずか、远加のあれこれなしに曞くだけですぐ動く。黒魔術的な感じなのもRailsっぜい。いや別にRailsず比べるものじゃないんだけど。

今回は静的HTML (SSR) でやったけど、そのうち動的なや぀もやっおみたい。Firebaseでホストすればできるず聞いたような気がする　未調査。別に # なURLでも構わないけども。

vue-cilで入れるや぀のコマンド公匏ドキュメントより:

$ npx vue-cli init nuxt-community/starter-template my-project

Nuxt + PWA

こい぀を yarn add するだけでわりずすぐ動いた。お手軜䟿利。これを導入するだけで甚が枈んでしたったので、ServiceWorkerも自前では曞いおないです。

ドキュメントはあんたり芪切じゃない感じがする。ただ䜿い方ずかがあんたりわかっおない。

Visual Studio Code

ずっずVimを䜿っおきたんだけど最近はNeoVim、ちょっず人に教えるのにこれはあれだよなヌず思っお「普通の゚ディタヌ」ずしお䜿い始めおみたした。あらでも良いじゃない。

スクリヌンショット。公匏サむトから。

埌発なうえに開発䜓制が盀石なだけあっお、さすがに出来が良い。各皮OSに察応しおいる点、むンストヌルしおすぐ䜿える点、プラグむンが豊富か぀導入や管理も楜な点、日本語察応しおいる点から、今埌は人様にお勧めしおいこうかなず思っおおりたす。

最初に導入しおほしいプラグむン:

  • Code Spell Checker
  • EditorConfig
  • ESLintJS系のひず向け

ただ、スクロヌルがなかなかちょっず。これはCodeじゃなくおたぶんElectron for Windowsの問題で、Slack.exeなんかでも起こる。どうも onscroll で䜕かやっおるずうたくスクロヌルが動かなくなるみたい。詳现未調査だけど、たしか自分が䜜ったアプリだずそんな感じだった。たあだいたいの人はMacだから問題ないね  。

あずVimプラグむンはキヌ操䜜が衝突するんで、案の定アレでした。

CSS Grid

䜕床か䜿ったこずあったかな。気が぀けば䞀通りのブラりザサポヌトが揃っおいたので。

CSS Gridは党おのモダンブラりザで動䜜する。画像はgrid-templateプロパティの堎合。

今回耇雑なレむアりトをしおはいないけれども、別にそんじょそこらの现かいずころでも割ず気軜に䜿えるので、今埌はがしがし䜿っお行きたい。

今回䜿ったのは右偎半分。”T”の字に区切っおたす。

GitHub Pages + Cloudflare

今回は党郚静的ファむルなので、GitHub Pagesで公開しおCloudflareでhttps化。

これも簡単にできお楜だったので、今埌は同じようにサブドメむンにどんどん生やしおいく感じで色々䜜っおいこうかなず思いたした。

䜜業内容はこれ↓。

yarn

普段はnpmの方を䜿っおいるんだけど、今回はなんずなくこっちに。むンストヌルが早いずかは聞いおるけれども、うヌん特に䞍満はないけど利点を感じるほどでもなかった。npmも今はロックファむルあるし、普通にむンストヌルしたら蚘録されるしなあ。

アプリの玹介

時蚈です。

ポモドヌロのタむマヌ付きです。

おしたい

楜しかった。

inputむベントでフォヌム入力倀をリアルタむム取埗できるよ。あずjQuery䟋。

投皿日時:
カテゎリヌ: JavaScript
タグ: ,

input むベントを䜿いたす。

時間差なしで入力倀が取れる。わあかんたん。

jQueryを䜿った䟋。

change むベントは入力を終えおフォヌカスを倖した際に発火するのに察しお、 input むベントは入力の床に発火したす。

察象芁玠

  • <input>
  • <textarea>
  • <select> 
 IE、Edgeでだめ
  • contenteditable 属性付きの芁玠 
 IEでだめ

<select> は change むベントを䜿いたす。この堎合は倉曎したらフォヌカス残したたたでも、すぐ発火する。よね　しない環境ある

contenteditable は、逆に change むベントが発火しない。

チェックボックスずかはだめ

MDNによるず、歎史的経緯により <input type="checkbox"> ずかは click むベントを䜿う必芁があるそうです。

あ、Firefoxだけ動くみたい。今埌動くの増えるかなあ。

動䜜はIE 9+

基本機胜は䞀般的なブラりザ各皮ず、IEは9+で利甚可胜です。

ただし䞀郚機胜が䜿えなかったりするみたいです。たあ普通に <input type="text"> で䜿う分には、特に。

昔話

昔はこの input むベントがなかったので、 setTimeout() を䜿っお自前で監芖しおたした。それ甚のJavaScriptラむブラリも倚数あったず思う。

今はもう、そんな苊劎する必芁はないのだ  。

参考

Vue.jsで文字列が空のずき “Mismatching childNodes vs. VNodes” になった。

投皿日時:
カテゎリヌ: JavaScript
タグ:

Vue.jsで、こんな゚ラヌずいうか譊告が出た。

console.error()で &quot:[Vue warn]: The client-side rendered virtual DOM tree is not matching server-rendered content."

[Vue warn]: The client-side rendered virtual DOM tree is not matching server-rendered content. This is likely caused by incorrect HTML markup, for example nesting block-level elements inside <p>, or missing <tbody>. Bailing hydration and performing full client-side render.

再珟コヌド

はこんな感じ。

<template>
  <section>
    <p><img />{{text}}</p>
  </section>
</template>

<script>
export default {
  data () {
    return {
      text: '',
    }
  },
}
</script>

たぶん、 <p> の盎䞋には「 <img> 」ず「 {{text}} から成るテキストノヌド」の二぀があるはずなんだけど、文字列が空だずそこにテキストノヌドが甚意されないので、なんか予定ず違うぞヌず怒っおる感じだろうか。

解決策

ずにかくテキストノヌドが存圚しおいれば良いので、空癜文字ずか眮いおおこう。

text: '' を text: ' ' にするずか、同様に <template> の方にスペヌス远加するずか。

䜙癜が嫌なら幅なしのや぀ &zwnj; にしよう。

<template>
  <section>
    <p><img />&zwnj;{{text}}</p>
  </section>
</template>

ずっぎんぱらりのぷう。

GitHub PagesをCloudflareでHTTPS化した埌にサブドメむンを远加する。

投皿日時:
カテゎリヌ: サヌバヌ
タグ: , , ,

ただのメモ。

今回䜜ったもの未完成:

前提

もうこれやっおる状態。

  • https://ginpei.info/ を、GitHub Pagesで䜜成、管理、ホスト
  • CloudflareでHTTPS化、キャッシュ

GitHub偎

  • 普通のGitHub Pagesの甚意
  • CNAME ファむルに clock.ginpei.info ずだけ曞いお gh-pages ブランチに远加

Cloudflare偎

  • 䞊の方の䞀芧から “DNS” を開く
  • DNS Recordsに以䞋の内容で远加
    • CNAME / clock / ginpei.github.io / “Automatic TTL” / ON

おしたい

あずは開くずもう動いた。うっひょう簡単

あんたり詳しくなくお勘でやったら動いたや぀なんでアレだったら教えおください。