はじめに

Vue.js + TypeScript で CDN からスクリプトを読み込んで、xxxx.tswindow.hoge にアクセスするコードをビルドすると Property 'hoge' does not exist on type 'Window'. のビルドエラーが出たので、解決方法を調べて整理した。

TL;DR

  • declare global を使う
    • declare global { interface Window { hoge: any } }
  • ↑ の後に window.hoge = window.hoge || {};
続きを読む

はじめに

Vue CLI + Vue Router で作成したプロジェクトを GitHub Pages で公開する方法についてまとめた。

TL;DR

  • vue create 時点で Vue Router を使う設定にしておくと楽
  • vue.config.js でビルドファイルの出力先などを設定
  • ビルド&プッシュしてリポジトリの設定を変更すれば OK
続きを読む

はじめに

Twitterデータの tweet.js を読み込んで全ツイート履歴を表示するツール「tweet.js loader」の紹介 で作った tweet.js loader の技術面について整理した。

TL;DR

  • 主に埋め込み用ツイートの表示で苦労した話をまとめた
  • Vue + GitHub Pages の設定例についても少しまとめた
続きを読む

はじめに

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

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

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

技術的な面: Twitterデータの tweet.js を読み込んで全ツイート履歴を表示するツール「tweet.js loader」の技術面

類似ツールの紹介: ここ にまとめた

TL;DR

  • Twitterデータ からデータをダウンロードして、
  • tweet.js loadertweet.js を読み込ませると、
  • 過去のツイート(全ツイート履歴の index.html みたいなもの)が見れるよ
  • 類似ツール の紹介もあるよ
続きを読む

はじめに

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