🐷

Chrome拡張作成はハードルが低いので良いという話

3 min read

そうだ、Chrome拡張を作ろう

昨年度は学習&成果物といえるものが全くなかったので、今年はなんでもいいから作ってみたいなという気持ちがありました
そんな折、友人がChromeの拡張を作ったと聞きました(良記事&良拡張機能なので是非読んでみてください)
スプレッドシートで行ハイライトする拡張機能を公開したので、やったことをまとめてみる
絵文字からZennの記事をみつける拡張機能「Zenn Feel Lucky」を作った
で、何となく話を聞いた感じChromeの拡張はそんなに気張らなくても作れそうということだったので、三連休だしちょろっと触ってみるか、、、という感じでいじってみることにしました

成果物について

Redmineを使っていて、テーブルを作るのがとにかく面倒だったので、テーブルが簡単に作れる拡張をひとまず作ってみることにしました
スクリーンショット 2021-01-10 23 53 06
拡張機能ボタンを押下するとボタンやら数値を入力するフォームが出てきて、テーブルをクリップボードにコピーできるようにしました
(当初はテキストを入力→そこから自動で表を作ろうと思ったが、GoogleSpreadSheetで表的に作成、GASで連結させるなどの方法の方がいい気がして、拡張としては作るのをやめた、決して面倒だったからやらなかったわけではないことにする)
成果物については特にこれ以上言うことなし!!!

学び(コード)

とにかく完成を目指してとにかく雑にコードを書きました(とりあえず作ったという成果を出そうとしてた)ので、特にコード面で語れることはないです
とはいえ、何も学習していないとよろしくないのでちょっと勉強になったとこを自分のためのメモとして書いておきます

学び① クリップボードコピーについて

1つめはクリップボードへのコピーについてです
以前個人的な開発でテキストのクリップボードへのコピーを行おうとして

// textareaを取得
const text = document.getElementByTagName('textarea')[0];
// テキスト選択
text.select();
// コピー実行
document.exeCommand('copy');

とやっていたのですが、単純にtextareaの文字を選択してcopyをするとちょっと気持ち悪い感じ(textareaが残り、かつ文字列が選択されている状態)になってました
で、今回も同じ感じにするかぁとしていたところで、下記の記事を発見しました
JavaScript でテキストをクリップボードへコピーする方法
簡単にこの記事を要約すると、textareaを一時的に作って削除しようぜということです
単純といえば単純ですが、自分の中では考えとして出なかったので学びになりました

学び② setTimeout

2つめはコピー結果のメッセージを表示させ、その後一定時間で表示をオフにしたいなと思ったときの処理です
実際のコードが下記です

// 結果表示要素を取得
const resultArea = document.getElementById('result');
// コピー結果の表示
resultArea.textContent = copyResult? 'コピーに成功しました' : 'コピーに失敗しました'
// 3秒後メッセージを非表示にする
window.setTimeout(function() {
  resultArea.textContent = ''
}, 3000)

setTimeoutはあんまり使う機会がなかったので、ちょっと何かしら表示させて消したいときに使えるという知見が得られて良かったです

学び(コード以外について)

今回コード外での学びが多かった(コードは頭使わずに書いたので)ので、そちらについてを書いていきます

学び① Chrome拡張はハードルがめちゃめちゃ低い

1つめにして最大の学びはChrome拡張はハードルがめちゃめちゃ低くてさっくり作れるということです
必要な知識は今回作ったものであればJSとHTMLがわかれば作れるので、ハードルがはちゃめちゃに低い印象です(APIとか使ったり、複雑にすれば多少難しくはなるが、簡単なものであればそうでない)
書くのもほぼほぼJSとHTMLなので、制作時間がかからないのも素敵(今回作ったものでいうと、自分の中で欲しい機能などを落として完成まで1時間ないくらいでした)

学び② 機能の絞りこみ

2つめは機能の話です
昨年何度か開発を行おうとして挫折を数回しました(PCに死んだプロジェクトがいっぱいある、、、)
これらが死んだプロジェクトになったのは、やたら機能を詰め込もうとしすぎたのが問題だったなとわかりました
今回単純な機能(欲しいヘッダーの数と表要素の数を入力してコピーするだけ)に絞って作ったので、すぐ手を動かしてさっくり作れました
変に機能を盛り込みすぎたり、最初に風呂敷を広げすぎると収集が付かなくなるというのを身をもって感じました(個人で作っているとモチベにも関わるので大事かなと思います)

学び③ 雑なコードも許容する

3つめはいいことではないと思うんですが、一応個人的な学び(というか意見?)としてです
自分の中でインプットとして何が入ってきて、アウトプットとして何が欲しいかのフローが落とせているのであれば、内側は雑に書いてもいいかなと今回思えました(とはいえ趣味の範囲ではあるけど)
仕事ではよくない(後々の保守などで死ぬ可能性があるので)ですが、個人レベルではやっぱりハードルを下げるだけ下げられた方がての進みが違うなと思いました
(まぁ本当はきちんとしたコードをかけた方がいいんですが!!!)

総括:Chrome拡張作成は良いぞ

とにかくハードルが低い、そしてさっくり作れるのでChrome拡張作成は個人的に良いと思います(機能を複雑にしにくいところも良いと思います)
なかなか手が動かない方にぜひお勧めしたいです(実際自分は手が動きづらいですが、ちゃんと動けたので)
Chrome拡張は簡単なのでまだいろいろ雑なアプリが作れる気がしているので、今度は完全なネタアプリなんかを作りたいなぁと思います(実用性のない拡張機能作りたい)