ずっと家でアプリ作っていたい

業務効率化小ネタなど

【用語】JavaScriptのListener(リスナー)を分かりやすく説明

f:id:chang_app_dev:20210127202544j:plain:h540

はじめに

プログラミングを始めたての頃は、その用語の多さに圧倒される人が多いと思います。

初めて聞く単語や、独特な言い回し...。

その結果、何か調べごとをしても「結局何を言っているのかわからない」 と言う状態になることが少なくありません。(僕はそうでした)

特に僕が引っかかったのは、JavaScriptaddEventListener」と言う単語。

developer.mozilla.org

リスナーといえば音楽を聞く人、と言うイメージだったので 「なぜイベントを実行する際のメソッドはaddEventListenerと言う名前なんだ?」 とずっと思っていました。

自分の中のリスナーと、使われている意味合いがどうにも一致しなかったのです。 今はもう慣れてしまったのでなんとも感じませんが、最初は違和感しかありませんでした。

ですので、僕と同じような疑問や違和感を感じている方に向けて、 なぜListenerと言う単語が使われるのかを説明したいと思います。

Listener(リスナー)とは

Listenerと言う単語の意味を調べてみます。

www.dictionary.com

to pay attention; heed; obey (often followed by to): Children don't always listen to their parents.

「注意を向ける」とあります。 僕は「何かを聞く」と言うイメージでしたが、意味合いの中心は 「何かに対して意識を向ける」のようです。

そう考えると、なんとなくイメージができる気がします。

つまり、プログラミングにおけるListenerは 「何かしらのイベントに対して注意を向ける」 と言う意味合いなのです。

イベントとは

  • マウスをクリック
  • 特定の時刻になる
  • 通信が開始する
  • 電源が落ちる

などなど。

なので最初のイメージが本来の言葉の意味とずれていたのが 僕が違和感を感じていた原因だと思います。

終わりに

なんとも些細な内容ですが、誰かの違和感がちょっとでも少なくなったら嬉しいです。

【入門】Google Chrome Extension (拡張機能)でJavaScriptを使用する①ボタンがクリックされた時にイベントを実行する

f:id:chang_app_dev:20210119003231p:plain

はじめに

Webの技術はHTML/CSSJavaScriptを中心に構成されており、 Google Chrome拡張機能でも、「使える」レベルの拡張機能には JavaScriptが欠かせません。

本格的な拡張機能を作成するため、JavaScriptを使って、拡張機能に「ボタンがクリックされたときにイベントを実行する」という機能のの作り方を説明します。

JavaScriptの役割

JavaScriptの役割は「Webサイトに動きをつける」ことです。

HTMLとCSSのみで構成されるサイトは静的サイトと呼ばれ、 一度表示したら、以降の表示は基本的に変化しません。

JavaScriptを使用すると、静的なサイトに動きをつけることができます。 このようなサイトを動的なサイトと表現します。 動き、と言うのは例えば以下のサイトをみるとよくわかります。

www.histography.io

マウスを動かしたり、ホイールを動かしたりすると それに合わせて表示が変化します。 これはHTML/CSSでは実現できないものです。

このように、JavaScriptはWebサイトに動きをつけてくれるプログラミング言語です。

※ Node.jsというサーバーサイドのJavaScript環境もありますが、今回は説明は割愛します

JavaScriptの実装方法

では拡張機能JavaScriptを実装する方法を説明します。

実装する機能は、冒頭にも書いた通り「ボタンをクリックされたときにイベントを実行する」というものです。

コード

{
  "manifest_version": 2,
  "name": "test app",
  "version": "1.0",
  "description": "test app",
  "icons": {
    "128": "icon.png"
  },
  "browser_action": {
    "default_title": "test app",
    "default_popup": "popup.html"
  }
}

  • popup.html
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <link rel="stylesheet" href="style.css">
</head>
  <body id="body">
    <div class="container">
        <h1>The Time is...</h1>
        <h2 id="timearea">?</h2>
        <button id="btn">Show the time now!</button>
        <script src="/popup.js"></script>
    </div>
  </body>
</html>

body {
  width: 300px;
}

.container {
  text-align: center;
}
  • popup.js
document.getElementById('btn').addEventListener("click", function(){
  var time = new Date().toTimeString();

  document.getElementById('timearea').innerHTML = time;
  })

解説

身も蓋もない解説ですが、今回のようなJavaScriptを使用する際には 通常通りaddEventListenerを使えば大丈夫です。

developer.mozilla.org

今回の例ではボタンをクリックすると現在時刻が表示されます。

f:id:chang_app_dev:20210126211516p:plain

クリックすると...

f:id:chang_app_dev:20210126211554p:plain

のように表示ができます。

まとめ

今回はとても基本的なJavaScriptの内容でした。 次回からはBackgroundで動作するJavaScriptの処理を紹介したいと思います。

【入門】Google Chrome Extension (拡張機能)でBootstrapを使用する

f:id:chang_app_dev:20210119003858p:plain

はじめに

せっかく作るならデザインが整った拡張機能を作りたいですよね。 そこでデザインを簡単・綺麗・シンプルに作ることができる Bootstrapと言うツールを拡張機能で使用する方法をシェアします。

Bootstrap

getbootstrap.jp

BootstrapとはCSSを簡単に整えるフレームワークです。

フレームワークとは

フレームワークとは「何かしらのプロダクトを開発する上で必要な機能が予め用意された骨組み」のことです。

このフレームワークを使うことでCSSを、より簡潔に整えることができます。

メリット

開発効率の向上

前述したとおり、開発の効率を上げることができます。 拡張機能程度の規模ではそこまでデザインで時間をかけて作成するシーンは あまりないと思いますが、より大規模のアプリだったりすると効率化をすることで、 より早くプロダクトを納品できます。

技術習得が容易

Bootstrapはとてもシンプルな構文で記述ができるので、習得もすぐにできます。

日本語ドキュメントが充実

日本でも広く使用されているので、日本語のドキュメントが充実しています。 またQiitaなどでもBootstrapに関する記事は豊富にアップされています。

今回はこのように簡単に綺麗なUIを作れるBootstrapを導入して、 Google Chrome拡張機能を作ります。

完成品

まず完成品をお見せします。

こちらはBootstrap ExamplesのFloating Labelsを参考に作成しました。 作業時間は大体20分程度です。 普段HTMLやCSSに慣れていない私でこの速さで作成できるので、 慣れている方でしたら5分程度で完成できると思います。

ソースコード

ソースコードを紹介します。

manifest.json

{
  "name": "bootstrap",
  "version": "1.0",
  "description": "build with bootstrap extension",
  "browser_action": {
    "default_popup": "popup.html",
    "default_icon": "icon.png"
  },
  "manifest_version": 2
}

style.css

body {
  width: 400px;
  height: 400px;
}

popup.html

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css" integrity="sha384-9aIt2nRpC12Uk9gS9baDl411NQApFmC26EwAOH8WgZl5MYYxFfc+NcPb1dKGj7Sk" crossorigin="anonymous">
  <link rel="stylesheet" href="style.css">
</head>
<body>
  <div class="container">
    <div class="text-center mt-4 mb-4">
      <img src="bootstrap-icon.svg" alt="icon" width="60" height="60" class="mb-4">
      <p class="h2">Hello, Bootstrap!</p>
      <p>This is the sample chrome extension. <br>Bootstrap is so easy to learn!</p>
    </div>
    <div>
      <div class="form-label-group mb-2">
        <input type="text" id="email" placeholder="e-mail" class="form-control">
      </div>
      <div class="form-label-group mb-2">
        <input type="text" id="email" placeholder="password" class="form-control">
      </div>
      <div class="checkbox-area pl-2">
        <input type="checkbox" value="check" id="confirm">
        <label for="confirm">Remember me</label>
      </div>
      <div class="button-area text-center">
        <input type="submin" class="btn btn-primary" value="LOGIN">
      </div>
    </div>
  </div>
</body>
</html>

bootstrap-icon.svg

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 612 612" focusable="false" role="img">
  <title>Bootstrap</title>
  <path fill="#563d7c" d="M612 510c0 56.1-45.9 102-102 102H102C45.9 612 0 566.1 0 510V102C0 45.9 45.9 0 102 0h408c56.1 0 102 45.9 102 102v408z"/>
  <path fill="#fff" d="M166.3 133h173.5c32 0 57.7 7.3 77 22s29 36.8 29 66.5c0 18-4.4 33.4-13.2 46.2-8.8 12.8-21.4 22.8-37.8 29.8v1c22 4.7 38.7 15.1 50 31.2 11.3 16.2 17 36.4 17 60.8 0 14-2.5 27.1-7.5 39.2-5 12.2-12.8 22.7-23.5 31.5s-24.3 15.8-41 21-36.5 7.8-59.5 7.8h-164V133zm62.5 149.5h102c15 0 27.5-4.2 37.5-12.8s15-20.8 15-36.8c0-18-4.5-30.7-13.5-38s-22-11-39-11h-102v98.6zm0 156.5h110.5c19 0 33.8-4.9 44.2-14.8 10.5-9.8 15.8-23.8 15.8-41.8 0-17.7-5.2-31.2-15.8-40.8s-25.2-14.2-44.2-14.2H228.8V439z"/>
</svg>

icon.pngはなんでもOKです。 今回はbootstrapのロゴを拝借しました。

上記のファイルを同一フォルダに配置します。 フォルダ名は今回は「bootstrap」にしました。

解説

今回のポイントはpopup.htmlファイルのタグ内の記述です。 なんとタグ内にBootstrapのCDNを利用するタグを設置するだけでGoogle Chrome拡張機能でBootstrapが使用できます! 設置するタグはBootstrapのサイトからコピーします。

getbootstrap.com

CDNについては説明を割愛させてもらいますが、簡単に言うとネットワークを通じてBootstrapを利用するためのファイルを取得しています。 興味のある方は以下のリンクなどを覗いてみてください。

www.wafcharm.com

<head>
...


  <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css" integrity="sha384-9aIt2nRpC12Uk9gS9baDl411NQApFmC26EwAOH8WgZl5MYYxFfc+NcPb1dKGj7Sk" crossorigin="anonymous">

...
</head>

またmanifest.jsonの記載方法については以下の記事を参照してください。

www.stay-home-build-app.com

まとめ

今回Google Chrome拡張機能でBootstrapを使用する方法を説明しました。 ポイントはタグ内にCDNを利用するためのリンクを設置することです。

本内容が参考になったら嬉しいです。

【入門】超シンプルなGoogle Chrome Extension (拡張機能)を作って仕組みを学ぶ

はじめに

会社で何か作業をしている時、「あーこんな拡張機能Chromeについていたら助かるんだけどな...」と思う時があります。 探してみても無さそうな時は諦めていたのですが、ふと「自分でも作れるんじゃないか?」と思い調べてみると、どうやら簡単に作れるらしい。 そしてシンプルな機能を持つ拡張機能だったら自分で作れるようになったので、その情報をシェアしたいと思います。

拡張機能 (Extension)とは

まず拡張機能 (Extension)とは何かについて説明します。公式サイトによると

Extensions are small software programs that customize the browsing experience. They enable users to tailor Chrome functionality and behavior to individual needs or preferences. They are built on web technologies such as HTML, JavaScript, and CSS. An extension must fulfill a single purpose that is narrowly defined and easy to understand. A single extension can include multiple components and a range of functionality, as long as everything contributes towards a common purpose.

拡張機能はブラウザをカスタマイズするための小規模のプログラムです。拡張機能を実装することでユーザーは好みに合わせた機能をブラウザへ追加できます。プログラムはHTML、CSSJavaScriptで記述されます。拡張機能は(あくまで"拡張"なので)一つの目的のみの為に開発されなければなりません。その目的を達成するために、さまざまさスクリプトファイルを含むことができます。

つまりWebの技術を使って、何かシンプルな機能を持たせたプログラムです。

拡張機能はブラウザでの使用が大前提なので、WebAPIだったりの技術を簡単に使用できるところを大きなメリットであり、最近流行っているWeb系エンジニアの方々は恐らく簡単に本格的な機能を実装できます。

また拡張機能はシェアが簡単なので、社内で配ると喜ばれたりする場合もあります。

具体例

拡張機能の具体例だとGoogle翻訳なんかは皆さん使用しているんじゃないでしょうか?

f:id:chang_app_dev:20210118231018p:plain

文章を選択するだけで翻訳してくれるので、外国語のドキュメントを読む方なんかは結構インストールしている気がします。

こんな感じで、通常のブラウジングをちょっと便利にしてくれるのが拡張機能です。

Hello, Chrome Extension

今回作るのは、ブラウザ上部のアイコンをクリックすると「Hello, Chrome Extension」という文字が出るだけの簡単なものです。

シンプルな拡張機能ですが、開発を行う上で重要なコンセプトが学べます。

事前に必要な知識

必要な知識はJSONとHTMLのみ。ツールはGoogle Chromeだけです。

ただ、必要と言ってもとても基礎的な部分でOKですので以下の記事を眺めておけば全然問題ないと思います。

saruwakakun.com

products.sint.co.jp

エディターはなんでもOKです。私はVSCodeを使用しています。

準備

では早速作っていきましょう。

まずは拡張機能ソースコードを保存するための場所を用意します。 ローカルに「hello-chrome-extension」と言うフォルダを作成します。場所はどこでも良いです。

その中に以下のファイルを作成します。まだ中身は空でOKです。

  • manifest.json
  • popup.html

特にmanifest.jsonが重要で、これがGoogle Chrome拡張機能に必須の唯一のファイルになります。

また拡張機能のアイコン画像も入れておきましょう。 今回私は以下のサイトからダウンロードして「icon.png」と言うファイル名で保存しました。お好みの画像を選んでpng形式で保存してください。

するとファイル構成は以下のような状態になります。

f:id:chang_app_dev:20210118231233p:plain

ではファイルの中身を作っていきましょう。

manifest.json

このファイルは「拡張機能の説明書」と言う役割があり、Google Chromeはこのファイルを参照して拡張機能の中身を認識します。

今回はmanifest.jsonの中身を以下のように記述します。

{
  "name": "Hello-Chrome-Extensiton",
  "version": "1.0",
  "description": "my first extenstion",
  "browser_action": {
    "default_popup": "popup.html",
    "default_icon": "icon.png"
  },
  "manifest_version": 2
}

各コードの意味を説明します。

name:拡張機能の名称 version:拡張機能のバージョン、更新するたびにバージョンを上げる description:アプリの簡単な説明 browser_action:ブラウザのツールバーにてボタンが押されたときの表示やボタンのアイコンなどを設定する default_popup:ボタンが押されたときに表示するポップアップ画面のhtmlファイル default_icon:ボタンのアイコン画像 manifest_version:manifestファイルのバージョン、これは2で固定

popup.html

次にpopup.htmlファイルの中身を以下のように記述します。

<!DOCTYPE html>
<html>
  <head>
    <style>
      
    </style>
  </head>
  <body>
    <h1>Hello Chrome Extension!</h1>
  </body>
</html>

シンプルにh1タグでHello Chrome Extension!と表示するようにします。

このpopup.htmlファイルのファイル名は任意で、index.htmlとかmain.htmlとかでも大丈夫です。ただしmanifest.jsonのdefault_popupの値と揃えるようにしてください。

Google Chromeに読み込み

Google Chromeに作成したフォルダhello-chrome-extensionを読み込みます。 こうすることで拡張機能がブラウザで使用できるようになります。

読み込む準備

chrome://extensions/ を開いてください。そして画像の「デベロッパーモード」と言うトグルをONにしてください。

f:id:chang_app_dev:20210118231342p:plain

このトグルを...

f:id:chang_app_dev:20210118231401p:plain

ONにしましょう。これで準備はOKです。

読み込み

「パッケージ化されていない拡張機能を読み込む」と言うボタンを押してください。

f:id:chang_app_dev:20210118231419p:plain

するとフォルダの選択画面が出るので、hello-chrome-extensionを選択しましょう。

f:id:chang_app_dev:20210118231432p:plain

すると chrome://extensions/ にhello-chrome-extensionが追加されます。

ただしこのままでは拡張機能を実行できないので、ブラウザのツールバー右の拡張機能管理エリアの設定を行います。

名前がわからないのですが、画像のようなパズルのペースみたいなアイコンを押します。 すると拡張機能の一覧が表示されますので、hello-chrome-extensionの安全ピンマークを押して青色にします。

するとツールバーにicon.pngの画像が表示されるようになり、実行する準備ができました。

f:id:chang_app_dev:20210118231453p:plain

実行

最後にicon.pngの画像をクリックします。 すると以下のようにポップアップが表示されるようになります!

f:id:chang_app_dev:20210118231511p:plain

お疲れ様でした!これで拡張機能をブラウザに読み込ませて実行することができました。

まとめ

今回シンプルな拡張機能を作ることができました。ただしこれだと用途はかなり限られていますので、今後はJavaScriptを使用し更に本格的な拡張機能の作り方をシェアしていきたいと思います。