はじめに

Vue.js で画像プレビューする方法を整理した。

基本的に たった2ステップ!Vue.js で選択画像をプレビューする方法(サンプルDL可) – console dot log の通り。

TL;DR

  • <input type="file">@change でイベントハンドラを設定
  • イベントハンドラ内で FileReaderreadAsDataURLdata: url として読み込み
  • 読み込み完了したら Vue の datadata: url を設定
  • <img :src="dataUrl>` のようにバインドして表示
続きを読む

はじめに

Vue + Cordova + Firebase でプッシュ通知を利用する方法を整理した。

※Firebase やプッシュ通知の細かい仕様については詳しくないため、最新/最適 でない方法の可能性があることに注意。
※試行錯誤を経て成功した後に情報を整理しているので、手順漏れや実施タイミングが異なるものなどがあるかもしれないことに注意。

関連: Node.js で firebase-admin を使ってサーバからプッシュ通知

TL;DR

続きを読む

はじめに

Vue + Cordova の iOS アプリを Xcode v11 でビルドすると Cannot read property 'toLowerCase' of undefined のエラーが出たので、解決方法について整理した。

TL;DR

  • Xcode v11 と cordova-ios v4 系は互換性がない
    • vue add cordova でインストールされるのは cordova-ios v4.5.5 (2019/11/21 現在)
  • cordova platform rm ioscordova platform add ios@latest で解決
続きを読む

はじめに

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 の設定例についても少しまとめた
続きを読む

r17n


Softwear Engineer


Fukuoka