※スマホ対応はしてません。

タグ: 拙作

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も今はロックファイルあるし、普通にインストールしたら記録されるしなあ。

アプリの紹介

時計です。

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

おしまい

楽しかった。

propsのvalidationをさらっと書けるvue-props-templateを作りました。(Vue.js始めるおれおれアドベントカレンダー2016 – 18日目)

カテゴリー: JavaScript

Vue.js始めるおれおれアドベントカレンダー2016 – 18日目

作りましたというか、まだもうちょっといじろうと思ってるんだけど、動きはします。

ginpei/vue-props-template: Write vue’s props through template literal.

Reactもそうなんだけど、オブジェクトを入れ子にしてく書き方、なかなか面倒じゃないですか。そういうのをなんかこう装飾子みたいにさらってできねえかなーそういやテンプレート文字列は改行も含められるんだなーあれでやれたらいいなーと考えて作ってみました。

propsの検証

Vueの機能として、型等を指定することができます。

こんな感じ。

const MyComponent = {
  props: {
    simpleString: { type: String },
    requiredNumber: { type: Number, required: true },
    defaultBoolean: { type: Boolean, default: true },
    validatedObject: {
      validator: function (value) {
        return (value.flag1 && value.flag2)
      }
    }
  }
}

vue-props-template

さっきの指定を、だいたいこう書けるようになります。

const pt = require('vue-props-template')

const MyComponent = {
  props: pt`
    string simpleString
    required number requiredNumber
    boolean defaultBoolean = true
  `
}

どうでしょうか、こういうの。

あとは validatedObject をどうしようかなあというところです。現状こんなん。

const pt = require('vue-props-template')

const MyComponent = {
  props: pt.extend(pt`
    object validatedObject
    `, {
      validatedObject: {
        validator: function (value) {
          return (value.flag1 && value.flag2)
        }
      }
    }
  }
}

よくわからないこと

便利?

個人的にはあんな風に書けたら便利だと思ってるんだけど、他の人はどうなんだろ。まあ自分で使う用でも構わないんだけど。

既存でこういうのないか?

ちょっと探して見つからなかったけどありそうで怖い。

validator の扱い

埋め込み値 ${…} の中に関数を書くのってどうかなあ。別に良いかなあ。例えばこういうの。

props: pt`
  validatedObject as ${function (value) {
    return (value.flag1 && value.flag2)
  }}
`

あーこういうのも悪くないかなあ。どうかなあ。

この場合、他の「型 名前」の順の書き方と違ってきちゃうけど、んーまあ良いか。

最近のライブラリの作り方

Vue本体を参考に、ブラウザで読み込んでもNode.js(vueify)経由でも動くようにはした。でも今はそれを直接元コードに書いてて、なんかこう「ビルド」をしてそういうのを出力するやり方の方が良いだろうか。

あとバージョン管理も実はあんまりよくわかってない。semverは良いんだけど、なんか手動でぽちぽちやるんじゃなくてnpm scriptに更新コマンドも用意して、なんて話を前聞いた気がする。

他にやること

これ全部終わったらv1.0.0ということにしようかなと思ってます。

  • validator の扱い
  • バベる
  • ドキュメントの見直し
  • GitHub pagesの充実
  • npm登録

CSS3のtransformを素敵に扱えるjQueryプラグインを作った。

カテゴリー: JavaScript

ダウンロード

なにこれ?

CSSのtransformプロパティの値を素敵に扱うやつです。 .css()からtransformを扱う際に既存の値を完全に上書きしてしまう問題を解消します。

transform ?

transformはご存知CSS3で追加されたプロパティで、要素を変形(transform)させる事ができます。このプロパティ複数の値を取り得、例えば「小さめで傾ける」という指定の場合は

transform: scale(.8) rotate(-30deg);

のような指定になります。

詳しくはこのあたりとか。

jQuery + transformの問題点

(さらに…)