この記事は、先日ブログに投稿したものと同じ内容です。ぜひ、ブログの方もご覧ください。
今回からは、連載企画ということで Chrome の拡張機能を開発していきます。何回分に渡るかはわかりませんが、1回分のボリュームを抑えていくので、物足りなさを感じてしまう方もいらっしゃるかもしれませんが、お付き合いよろしくお願いします。
さて、今回は連載第1回目、ということで環境構築を行っていきます。といっても、普段からプログラミングをされている方は、やることがほぼないです！プログラミングをされていない方も、難易度はそこまで高くありませんので、身構えずに取り組んでみてください。
対象
- HTML、JavaScript、CSS の基礎が分かる方 (DOM操作とか...)
これらがわからないという方は、まずは Webアプリを作るところから始めてみましょう！
Chrome 拡張機能開発ではこれら３つの言語が必須になります。
※HTML、CSS はものによっては使わないかも
必要なもののインストール
Google Chrome
当たり前ですが、Google Chrome が必要です。開発した拡張機能をテストするのに用います。
普段から Google Chrome を使われている方は、再度インストールする必要はありません。そのままで OK です。
エディタ
プログラムを書いていくために必要なエディタをインストールします。これも、普段使われているもので結構です。
ただし、WIndows 標準の「メモ帳」を使われている方は、特にこだわりがないのであれば、今は無料で高機能なものがたくさんあるのでこれを機に是非インストールしましょう。
おすすめは「Visual Studio Code」です。
インストールしたら、デフォルトでは画面が英語なので日本語化します。以下のサイトを参考にすればすぐにできます。
Visual Studio Codeを日本語表示にする手順！変更方法も解説
(.NET Column)
これで環境構築は終了です！あっという間でしたね！
誰でも気軽に開発を始められるところが、Chrome 拡張機能開発の良い点の一つだと思います。
公開するなら...
開発したChrome 拡張機能をウェブストアで公開するには、上のものに加えて以下のものが必要になります。
- Google アカウント (できれば開発用のものを作ったほうが良い)
- 5ドル (ウェブストアにアカウントを登録する際に、１度だけ登録料を支払う必要がある)
- クレジットカード or デビットカード (どうしても用意できない場合は、本人確認を済ませたLINEプリペイドカードでも可)
開発の流れ
- 必要なファイルを用意する
- コードを書く
- テストする
- 2.3.を繰り返し、バグをなくしていく
- 公開！ (これは任意)
では、今回はこれくらいにします。次回からいよいよ本格的に開発を行っていきます！
【連載一覧】