はじめに

Twitter には以前「全ツイート履歴」という、自分の過去のツイート情報をまとめた CSV ファイルや index.html をダウンロードできる機能があったが、2019年8月頃の UI 刷新を契機にその機能が無くなってしまった模様。

代わりに Twitterデータ というページから、過去のツイートに関する情報(画像ファイルなど)をダウンロードはできるが、肝心のツイート履歴そのものは tweet.js という JS ファイルに記録されているという謎仕様。

扱いづらかったので、tweet.js を読み込ませることで全ツイート履歴を表示できる tweet.js loader というページを作ったので簡単に紹介。


TL;DR

続きを読む

はじめに

OSS の CSS Framework Bulma を使って、メルカリ風のレスポンシブなデザインを構築する方法について整理した。

「メルカリ風のレスポンシブなデザイン」というのは、

  • デスクトップなどでは「サイドバー」+「コンテンツ」
  • モバイルでは「サイドバー」が非表示になり、クリック(タップ)で表示される

というような構成を意味している。

TL;DR

  • モバイル表示時には隠したい部分に is-hidden-mobile クラスを付与する
  • モバイル表示時に隠した要素を表示するためのボタンなどに is-hidden-tablet クラスを付与する
  • 上記ボタンをクリックした時に is-hidden-mobile をトグル(On/Off)する
  • 全体のデザインは columns + column + is-<n>-<device> で調整する
続きを読む

はじめに

Node.js でミリ秒よりも高精度のタイマーやタイムスタンプを利用する方法について整理した。

TL;DR

  • マイクロ秒オーダーでの Unix Timestamp を使いたい場合は microtime (node-microtime) を使う
  • Performance Timing APIperformance.now()perfomance.timeOrigin を組み合わせてもマイクロ秒オーダーで Unix Timestamp が取得できる
  • process.hrtime() でナノ秒オーダで計測が可能
続きを読む

はじめに

Vue.js プロジェクトで vue-svg-loader を使って SVG ファイルを描画する方法について整理した。

TL;DR

  • npm i -D vue-svg-loadervue-svg-loader をインストール
  • vue.config.js に設定を追加
  • xxxx.vueimport して components に登録して <YourSvgIcon /> で描画
続きを読む

はじめに

GitHub で公開されているソースコードをベースにして、プライベートリポジトリで何かを作りたい時にクローンする方法を調べた。

※書いた後に「clone して、remote set-url で変更するだけで良いのでは?」と思ったが検証してない。

TL;DR

  • Create a New Repository でプライベートリポジトリを作る
  • git clone --bare <src repo> でクローン
  • git push --mirror <dest repo> でプライベートリポジトリにプッシュ
続きを読む

はじめに

Vue.js を使って Chrome 拡張機能を開発する方法について簡単に整理した。

前回の記事 では、Kocal/vue-web-extension を使った Chrome 拡張機能の開発方法について調べた。が、「Kocal/vue-web-extension では Popup Page や Options Page で Vue.js を使うもの」、つまり「メインページ(メインコンテンツ?)側では使えないもの」という結論に至った。(※自分の中では、の話)

冷静に考えて「メインページ側に使えないわけがない」と思って、どのようにすれば実現できるかについて調査した。

実際に拡張機能を作ってリリースした話 : Vue.js を使ってChrome 拡張機能を作った話(はてなブックマークのコメントを Qiita 記事内に表示) - Qiita

TL;DR

  • vue.config.js を用意して vue-cli-service でビルドすれば動作することを確認
  • manifest.json では chunk-vendors.js を先に読み込む
  • minify とか css preprocessor とかはまだ調べきれてない
続きを読む

はじめに

和室にテーブルやらテレビ台やら置いているので、畳を保護(凹みの防止・対策)することのできる商品をダイソーや CanDo などの100均で探していたがなかなか見つからなかった。

先日、大きめの Seria で見つけたので同じような商品を探している誰かのためにメモしておく。

続きを読む

はじめに

Chrome 拡張機能の開発をしていて、ファイルの変更後に毎回 chrome://extensions を開いて手動で更新するのがダルかったので、ファイルの変更を検知して自動で更新してくれる方法を調べた。

ほぼほぼ元記事通りの内容だけど、忘れないようにメモしておく。

TL;DR

  • xpl/crx-hotreloadhot-reload.js をローカルに保存
  • manifest.json"background": { "scripts": ["hot-reload.js"] } を追加
  • 開発中の拡張機能を chrome://extensions で読み込み(更新)
続きを読む

r17n


Softwear Engineer


Fukuoka