タイトル長っ。
こんにちは、@24guchiaです。
タイトルのとおりです。
Twilioの管理コンソールは下記を指しています。
https://jp.twilio.com/console/
目次
作った拡張機能
こちらからダウンロードできます。
Twilio Account Switcher
ダウンロードすると、使い方を書いたMarkdownを表示します。
Githubはこちら
なんで作ったか
管理コンソール上で、サブアカウントという概念があり、
アカウント内に複数のサブアカウントを作成できます。
いいところは、一つのアカウント内で
複数事業部の番号を持てたり、プロジェクトを分けたり、請求書が分かれたりといろいろあります。
ただ、このサブアカウントが増えれば増えるほど、
アカウント間の行き来がめんどくさいです。
たとえば、開発アカウントで作業中に、本番アカウントの通話ログ見てみようとしたら、
サブアカウント一覧ページに遷移して、本番アカウントを選択。
そうすると、またダッシュボードに戻されるので、元いた通話ログを探す必要があります。
特に会社では4つのサブアカウントを切り替えながら作業するので、
なかなかなストレスでした。
拡張機能で解決した
今回作った拡張機能を入れて、アカウント情報を登録すると、
いつでも拡張機能からアカウントを変更できます。
そのため、通話ログ画面を開いてみたら、
アカウントが違ったので、サブアカウント一覧に遷移し、別アカウントに切り替えて、
再度通話ログ画面を開き直したり、更新したりというようなひと手間を省けます。
技術的な話
Twilio管理コンソールのアカウントの切り替えは
Cookieに保存しているcurrent-accountにAccount Sidを設定しているだけです。
そのため、拡張機能からCookieを変更するようにしています。
拡張機能で保持している情報はAccount Sidだけ、
変更しているのはCookieの値だけなので、セキュリティ的にも安心です。
採用した技術
下記です。
- Vue.js v2.6系
- nano.js
- Bootstrap4
- webpack v4.20系
- webpack-chrome-extension-reloader
- ESLint
- Prettier
会社で作っている拡張機能はjQueryでゴリゴリして、
webpackでdistディレクトリに環境変数以外はほぼそのままコピーしているだけです。
それに比べると、かなりモダンにしました。
アカウント切り替えをすばやくするだけであれば、
jQueryでゴリっと書いたほうが早いです。
ただ、せっかくなので技術的に新しいものに挑戦しようと思い、
このような技術を採用しました。
webpack-chrome-extension-reloader は最高だぞ、拡張機能開発するならみんな入れてくれ
https://www.npmjs.com/package/webpack-chrome-extension-reloader
拡張機能開発のめんどくさいところは開発中のパッケージを都度都度手動更新が必要なところです。
ざっくりな流れはこんな感じで、
変更する→拡張機能一覧ページで無効化して再度有効化する→デバッグする
超めんどくさいんですよ。
ただ、このリローダーを入れて、watchさせておくと、
更新を検知し、自動で再読込してくれるすぐれものです。
僕は下記ボイラープレートを使いました。
こちら使うと、リローダーも設定してくれます。
https://github.com/Kocal/vue-web-extension
初めて動かしてみたとき、感動しました。
ボイラープレートの存在や、実際のソースコードは
下記ブログ記事を参考にさせてもらいました。
ありがとうございます。
Vue.jsだいたいわかった
改修でちょろっと触ったことありますが、
今回はじめて本格的にスクラッチでVue.js書きました。
jQueryで書くとめんどくさいだろうなーっていうところが、
スムーズに書けるのが魅力的です。
この手の初回アウトプットはローカルで保持するTODOリストが多いですが、
それをちょっと拡張して実装できたのはいい経験になったと感じました。
Linterめんどくさい → いややっぱ、これがないと開発しづらい
何回がめんどうだなーって思いました。
ESLintとPrettierの組み合わせで、毎回わあわあエラーが出てたので、
rcファイル直してみたり、Stormの設定見直したりしてだいたい静かになりました。
最初の印象とは変わり、やはりアウトプットのソースコードはきれい書けるので
導入してみてよかったです。
本番稼働しているプロダクトに途中からは入れづらいなーと感じますが、
入ってないとソース荒れるし、コードレビューで指摘するの精神的につらいので、
いずれ導入したい。
やってみた感想
GWの10連休で挑戦して、半分くらいはこれの開発してました。
残り半分は走り込みしたり、ジム行ったり、友達と飯食ったりと
男子高校生みたいな生活してます。
今回のは技術選定がうまく行ったなと感じていて、
普段やっていることからちょっとだけ範囲を広げて、
使ったことがない技術を使えました。
とはいえ、完全に新しい技術ってわけではないので、
jQueryで書くならこうだけど、Vue.jsならどう書く？とか、
distにコピーしてるだけの会社のwebpackをもうちょいマシにするには
どうしたらいいか？とか発展で考えられたので、めちゃくちゃなハマりはなかったです。
Vue.js,webpack,ESLintやPrettierはググると、
こうやれば良いっぽい？っていう回答が出るのがすばらしいですね。
課題
日本の管理コンソールでしか使えない
URLは現在jpで固定しちゃってるのですが、
観測範囲ではwww形式のもあり、海外Twilioユーザにも使えるよう
拡張したいと考えてます。
海外で使えるようにってことはi18n対応も必要そう
国際化のために、改修しないといけなさそうです。
ターゲットがめちゃくちゃ狭い
これ、必要な人この世にどれだけいるんでしょうね・・・
もう少しターゲットが多そうな開発アイデアを考えてます。
フィードバックください
TwitterメンションでもDMでもいいし、
GithubでなんかIssue作ったりしてくれてもいいです。
Twitterが一番反応速いです。
めっちゃ便利じゃんってなったら、なんか買ってください。