ええいや時計って……という感じはあるんだけど、とにかくNuxt.jsを使ってみたかったのです。あと自分では使う。

できあがったもの

• アプリ https://clock.ginpei.info/
• コード https://github.com/ginpei/giclock/

使った技術

ライブラリ、フレームワーク

• Vue.js + Nuxt.js (new)
• Nuxt.js’ PWA Module (new) + Workbox (new)
• Pug
• Sass

ツール

• ESLint + JavaScript Standard Style
• EditorConfig
• Mocha + Chai + SinonJS
• push-dir (new)
• yarn
• vue-cli (new)
• Visual Studio Code (new)

ウェブ標準API

• Web App Manifest in order for PWA
• localStorage
• CSS Grid Layout (new)

サービス

• Travis CI
• Greenkeeper
• Git + GitHub
• GitHub Pages
• Cloudflare

技術系感想

Nuxt.js

• Nuxt.js

この記事の影響。

• Nuxt.jsとFirebaseを組み合わせて爆速でWebアプリケーションを構築する – Qiita

なんか久しぶりに「動くものがさくさく作れる」という快感を味わうことができたフレームワーク。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

• PWA Module

こいつを yarn add するだけでわりとすぐ動いた。お手軽便利。これを導入するだけで用が済んでしまったので、ServiceWorkerも自前では書いてないです。

ドキュメントはあんまり親切じゃない感じがする。まだ使い方とかがあんまりわかってない。

Visual Studio Code

• 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 Layout

何度か使ったことあったかな。気がつけば一通りのブラウザサポートが揃っていたので。

今回複雑なレイアウトをしてはいないけれども、別にそんじょそこらの細かいところでも割と気軽に使えるので、今後はがしがし使って行きたい。

今回使ったのは右側半分。”T”の字に区切ってます。

GitHub Pages + Cloudflare

• GitHub Pages
• CloudFlare

今回は全部静的ファイルなので、GitHub Pagesで公開してCloudflareでhttps化。

これも簡単にできて楽だったので、今後は同じようにサブドメインにどんどん生やしていく感じで色々作っていこうかなと思いました。

作業内容はこれ↓。

• GitHub PagesをCloudflareでHTTPS化した後にサブドメインを追加する。 | Ginpen.com

yarn

• yarn

普段はnpmの方を使っているんだけど、今回はなんとなくこっちに。インストールが早いとかは聞いてるけれども、うーん特に不満はないけど利点を感じるほどでもなかった。npmも今はロックファイルあるし、普通にインストールしたら記録されるしなあ。

アプリの紹介

時計です。

ポモドーロのタイマー付きです。

おしまい

楽しかった。

input イベントを使います。

jQueryを使った例。

change イベントは入力を終えてフォーカスを外した際に発火するのに対して、 input イベントは入力の度に発火します。

対象要素

• <input>
• <textarea>
• <select> … IE、Edgeでだめ
• contenteditable 属性付きの要素 … IEでだめ

<select> は change イベントを使います。この場合は変更したらフォーカス残したままでも、すぐ発火する。（よね？　しない環境ある？）

• <select> のデモ

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

• contenteditable のデモ

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

MDNによると、歴史的経緯により <input type="checkbox"> とかは click イベントを使う必要があるそうです。

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

動作はIE 9+

基本機能は一般的なブラウザ各種と、IEは9+で利用可能です。

ただし一部機能が使えなかったりするみたいです。まあ普通に <input type="text"> で使う分には、特に。

昔話

昔はこの input イベントがなかったので、 setTimeout() を使って自前で監視してました。それ用のJavaScriptライブラリも多数あったと思う。

今はもう、そんな苦労する必要はないのだ……。

参考

• input – Event reference | MDN … 日本語版なし

Vue.jsで、こんなエラー（というか警告）が出た。

[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> の方にスペース追加するとか。

余白が嫌なら幅なしのやつ ‌ にしよう。

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

とっぴんぱらりのぷう。

ただのメモ。

今回作ったもの（未完成）:

• https://github.com/ginpei/giclock/

前提

もうこれやってる状態。

• 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

おしまい

あとは開くともう動いた。うっひょう簡単！

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

というわけで、いまさら初めて使いました。

実は生まれて初めて `position: sticky` 使ったんだけど、「……いいじゃん！」となった。 pic.twitter.com/bzm6q0vY2T

— 高梨ギンペイ (@ginpei_jp) January 11, 2018

デモ

フッターも追加したよ。

使い方

.sticky-header {
  background-color: #fff;
  position: sticky;
  top: 0;
}

position: sticky にして、位置と背景色の指定も併せて行う。背景色がないと見えちゃうから。

position: fixed と違ってサイズ分の余白を自前で用意する必要がないのがらくちん。

利用可能状況

IE以外で使える。大丈夫そうだ。

table 関係が現行版だとちょっとまだアレっぽいけど、今回の目的には関係ない。

と思いました

思いつきなので細かいとこ調べてないや許して。スタック文脈とか絡んでくるときっと面倒くさそうな予感がする。

本来は長いコンテンツにたくさんの見出しがあって、みたいな場合に使うものだと思うんだけど、単純に上下端に固定する目的で使うのも悪くないんではないだろうか。だめです？

参考

• position – CSS | MDN
• Can I use… Support tables for HTML5, CSS3, etc