💻

【TypeScript】chrome拡張機能をリリースしたので開発過程を振り返ってみた

2023/08/04に公開

Chrome拡張

自己紹介

大学を卒業して今年１年目のエンジニアです。情報系の学部ではないですが情報系のサークルで約１年ほどReactNativeを触っていました。現在は趣味でBlenderで3Dモデリングをしてみたり、フロントエンドをメインに触ってます。以前からTypeScriptでのモバイルアプリ開発に興味があったのでchrome拡張機能のリリースにチャレンジしてみました。今回の記事がZennで2記事目になります！よろしくお願いします！

chrome拡張機能の紹介

私が開発したのは「Sticker & MemoPad Tool」です。これはcanvas上に好きな文字の付箋を表示させ、マウスで絵を書けるメモツールです。付箋付きのメモとして活用でき、ブラウザ上でちょっとメモを取りたい、情報を書き出して整理したいときなどにオススメです。

付箋作成モード、お絵描きモードの2つのモードがあり、付箋はマウス操作でcanvas上の好きな場所に移動できます。お絵描きモードではマウス操作でcanvas上に線を記入でき、好きな色と選択し線の太さを調整できます。

キャンバス上に作成したメモは、ダウンロードボタンを押すことで画像としてダウンロードできます!

💻本拡張機能のストアリンク：Sticker & MemoPad Tool

chrome拡張機能開発のきっかけ

以前からchrome拡張機能の開発はwebサイトの制作やモバイルアプリの開発とは何が違うのだろう？と興味がありました。
また、chrome拡張機能を追加する事でchromeの機能を増やしより自分だけの便利なブラウザにカスタマイズする事ができます。JavaScript等を使用しcanvas上に図形を描画したり、絵をかいてみるのは自由度が高く便利なツールが作れるのではないかと考えたので、本chrome拡張機能のをアイデアとしました。
そして、フロントエンドにおける技術的な面でもTypeScriptとwebpackに関心があったので、これらを組み合わせてchrome拡張機能の開発を始めました。

開発期間

開発期間は約１か月です。先月に頭からちょうど手が空いたので本開発を始めました。
開発を始める前はどのくらいかかるかは想定していませんでしたが、大体1、2か月はかかるだろうと考えていました。🗓️
平日なかなか時間をとる事ができなかったので、土日メインで時間をとりながら開発を進めていきました！
以前にTypeScriptとwebpackには触れたことがあったので、なんとか1か月ほどでchrome拡張機能
のリリースまで行う事が出来ました。個人的にchromeウェブストアへのリリース作業はモバイルアプリの時よりは楽に感じました。

開発環境

WindowsノートPC
TypeScrtipt
webpack
Visual Studio Code（エディタ）
GitHub（branch作成・バージョン管理のため）

webpack

https://webpack.js.org/

TypeScrtiptを選んだ理由

JavaScriptと書き方が似ているから。
TypeScript→JavaScriptへのコンパイル時に型のエラーをチェックできるため。
その他にもJavaScirptに触れる事の方が多かったので、より触ったことのないTypeScriptでの開発にチャレンジしてみました。

開発で苦労した部分

開発で苦労した点は「ページ内切り替えタブの実装」についてです。
本拡張機能では付箋モードとお絵描きモードの２つのモードがあるのですが、このモードの切り替えをページ内切り替えタブとして実装しました。

タブの見出し部分については2つのチェックボックス（inputタグ）とそれぞれ対応したラベル（labelタグ）を作成しています。タブ部分は以下のサンプルHTMLのような書き方を参考にしました。

HTML

hoge.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>switchHtmlTab</title>
    <link rel="stylesheet" href="index.css">
</head>
<body>
    <!-- タブの見出し -->
    <div id="label-container">
        <input type="checkbox" class="checkBtn" id="hoge1" checked="true">
        <label id="hoge1Label" for="hoge1">hoge１タブ見出し</label>
        <input type="checkbox" class="checkBtn" id="hoge2">
        <label id="hoge2Label" for="hoge2">hoge2タブ見出し</label>
    </div>
    <!-- タブの内容部分 -->
    <div id="left-container">
        <h1>hoge１タブ</h1>
        <p>hoge1hoge1</p>
    </div>
    <div id="right-container">
        <h1>hoge2タブ</h1>
        <p>hoge2hoge2</p>
    </div>
    <!-- JavaScriptファイルの読み込み -->
    <script src="index.js"></script>
</body>
</html>

input
2つのチェックボックス（inputタグ）とそれぞれ対応したラベル（labelタグ）を作成しています。
inputタグのtpye属性をtype="checkbox"にすることによりチェックボックスを作成し、checked属性をchecked="true"に設定する事でデフォルトでチェックが入るようにしています。
label
for属性に対応するinputタグのidを指定する事でそれらをペアとし関連付けています。
（例： for="hoge1"）
このようにラベルとチェックボックスを関連付ける事で、ラベルをクリックしたときにチェックボックスに✓を入れる事ができます。

今後の改良（アップデート）予定

1つ前の操作に戻るボタンの追加：
現状では間違った操作をした際に全消去ボタンを押し、canvas上のUIを全て消すしかやり直す方法がありません。UXの事を考えるとcanvas上に作成したすべてのUIが消えるよりも1つ前の操作の段階に戻れる方が良いと思うのでこの機能を実装予定です。（時間がかかりそうです。。）

最後に

ここまで本記事をお読みいただきありがとうございます。ブラウザ上でちょっとメモを取りたい、情報を書き出して整理したいときなどにオススメの拡張機能ですので、ぜひ試していただければ嬉しいです^^。

💻本拡張機能のストアリンク：Sticker & MemoPad Tool