はじめに

Vue.js で PeachScript/vue-infinite-loading を使った無限スクロール(Infinite Scroll)の実装方法。

TL;DR

  • npm i vue-infinite-loading でインストール
  • <infinite-loading @infinite="infiniteHandler" /> を記述
  • infinite イベントのハンドラ内でデータの追加や、読み込み完了などの処理を実施
続きを読む

はじめに

Twitter の埋め込みツイート(Embed tweet)を Lazy load させる方法

TL;DR

  • ApoorvSaxena/lozad.js を CDN などから読み込み
  • カスタムハンドラ内で埋め込みツイート作成に必要な要素(blockquote, script)を 作成/追加
  • いきなりイベントが大量発火しないように min-height などを設定しておく
続きを読む

はじめに

webpack & Babel を使って Chrome 拡張機能を良い感じに開発できるテンプレート(Hot Reload 付き)を作った。

TL;DR

続きを読む

はじめに

Vue.js で矢印キーや Enter キーによるキーボード操作が可能なコンテキストメニュー(右クリックメニュー)を表示する方法。

調査/検証 したところ rawilk/vue-context を使うのが一番楽だったので、基本的には vue-context の使い方についてのまとめ。

TL;DR

  • rawilk/vue-context だとキーボード操作にデフォルトで対応
  • ネストは li.v-context__subul.v-context を使う
    • , キーによる階層の移動が可能
  • スタイルは .v-context li, .v-context li a:hover, .v-context li a:focus あたりで変更
続きを読む

はじめに

Vue.js で入力フォーム フォーカス中に Enter キーで Submit させる方法について整理した。

ほぼ参考サイトの通り。

TL;DR

  • 単純に @keyup.enter を使うと、日本語変換での確定 Enter も対象になる
  • @keypress.enter だと、日本語変換での確定 Enter は発火しない
  • 組み合わせてフラグ管理することで実現
続きを読む

はじめに

Vue.js でキーボード操作で要素間を移動させる方法について整理した。

イメージとしてはツリービューみたいなやつとかを、 キーで移動するような感じ。

TL;DR

  • tabindex を移動させたい要素に設定
  • @keyup.up.exact, @keyup.down.exact でイベントハンドラを設定
  • ハンドラ内で次要素の tabindex を算出して focus
続きを読む

はじめに

特殊な要件だが、Tippy Instance を生成せずに隠す方法を調べた。

TL;DR

続きを読む

はじめに

NativeScript + Firebase でプッシュ通知を行う方法。

TL;DR

続きを読む

r17n


Softwear Engineer


Fukuoka