はじめに

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

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

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


TL;DR

続きを読む

はじめに

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

TL;DR

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

はじめに

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 とかはまだ調べきれてない
続きを読む

はじめに

Vue.js を使って Chrome 拡張機能を開発できるテンプレートを探して、Kocal/vue-web-extension を見つけたので、簡単な使い方のメモ。

追記: 続編として Vue.js を使ってメインページ側で動作する Chrome 拡張機能を開発する方法 という記事も書いた。

TL;DR

  • vue init kocal/vue-web-extension my-extension で初期化
  • npm run builddist 配下にリリースファイル作成
  • npm run watch でファイル変更を検知してビルド
    • src 配下を編集して拡張機能を開発
続きを読む

r17n


Softwear Engineer


Fukuoka