Web開発の超重要用語『API』とは？【知識ゼロから理解】

目次

Web APIとは「Webサービス開発を効率化するツール」です

APIはApplication Programming Interfaceの頭文字をとった言葉です。

Wikipediaなどを見てみると

ソフトウェアコンポーネント同士が互いに情報を やりとりするのに使用するインタフェースの仕様である。

と書いてあります。

ja.wikipedia.org

なのでWeb APIの説明は

Webにつながっているソフトウェアコンポーネント同士が互いに 情報をやりとりするのに使用するインタフェースの仕様である。

と言えそうです。

ただし全く知識のない方からすると「は？」という感じですよね。

ものすごく簡単にWeb APIを説明すると、『公開されているWebアプリの機能の一部を使用できるツール」』です。 つまり開発を効率化するツールです。

ただしこれでは若干抽象的なので、折角ならきちんと理解したいですよね。

この記事では

• Web APIを使う理由
• 構成要素
• Web APIの具体例

を紹介します。 是非最後まで読んでWeb APIの理解を深めてください。

Web APIを使う理由

Webサービスを開発する際、「こんな機能が実装できたらいいな」 と思う時があります。

ただし自分達で全てを作るにはお金と時間がかかります。 一から全ての機能を開発していては効率が悪いです。

そこでもし使用可能な公開されているサービスがあれば、 使用することで開発期間を短縮できます。 既に稼働しているサービスは運用実績があるので、 セキュリティ面でも一から開発するよりも信頼できます。

そこでWeb APIが登場します。

Web APIを利用することで、他のプログラムが提供している サービス機能の一部を自分たちのサービスでも利用することができます。

結果としてその機能を開発する期間を省略することができます。

ここまで抽象的な話でしたので、もう少し具体的に説明しましょう。

【具体例】株価表示Webサービスを作る

例えば最新の株価を表示するWebアプリを作るとします。

この時、株価のデータをどうやって集めると効率的でしょうか？

例えば1分ごとに自分で全ての株価を調べて、データベースを更新するのでしょうか？

またはわざわざ株価が表示されるサイトをスクレイピングして情報を取得するのでしょうか？ その場合、参照しているサイトの構成が変更されたら情報を取得できなくなるリスクがあります。

この様に、自分たちで情報を取得するというのはあまり効率が良くないことが多いです。

そこで株価を取得できるWeb APIを使用します。 そうすればプログラムを定期的に実行するだけで、 Webアプリに表示される株価が更新できます。

株価を取得することのできるWeb APIですとYahoo Financeなどがあります。 ドキュメントに記載されている手順でリクエストを出すことで、株価の情報を取得できます。

この様にWeb APIを用いて他のサービスを利用することで、 処理の自動化・開発の効率化が実現できるのです。

ではWeb APIとは実際どの様な要素で構成されているのでしょうか？

Web APIの構成要素

ここでは簡単にWeb APIの構成要素について説明します。

基本的に登場する要素は以下の2つです。

• クライアント（Web APIを使用する側）
• サーバー（Web APIを提供する側）

クライアントはサーバーが決めた通信ルールに則ってリクエストを送ります。 この時使用したい機能や取得したい値を指定します。

リクエストを受けたサーバーは要求された情報を クライアントにレスポンスとして返します。

基本的なやりとりの流れは以上の様にシンプルです。

ただしセキュリティ面から、たいていのAPIはデータのやりとりの前に 認証作業等が入りますが、ここでは割愛します。

Web APIの「エンドポイント」とは

Web APIには必ずドキュメント（使い方が書いてある説明書の様なもの）が存在します。

そこでは度々エンドポイントという用語が登場します。

これはWeb APIを使用するためのURIです。

Web APIを使用する際には特定のコマンドを叩く必要があります。 その時にインターネット上ではサーバーを特定するためにURIを指定する必要があります。 Web APIではこのURIをエンドポイントと読んでいます。

ですのでエンドポイントという単語に出会ったら、 「このURIを使ってWeb APIを使うんだな」と思ってください。

Web APIの具体例

世の中には数え切れないほどのWeb APIが公開されています。

ここではそんなWeb APIの中でも日本で特に人気のAPIをいくつか紹介します。

Google Maps Geocoding

Google Maps Geocoding：ドキュメント (googlecloud) | Rakuten RapidAPI

地図を表示するアプリですと結構使われています。

地図表示機能を一から作成するというのはかなり大変ですので、まさにWeb APIを使うべき機能ですね。

ぐるなびレストラン検索

ぐるなびレストラン検索 API Documentation (gurunaviws) | Rakuten RapidAPI

Web APIを使うことで、ぐるなびに掲載されている飲食店の情報を取得できます。

ぐるなびは割と古くからあるサービスですので、掲載されている飲食店舗数も多く、利用価値の高いWeb APIと言えます。

またこういった情報を公開することで、飲食店の宣伝にも繋がりますね。

amazon-price

amazon-price API Documentation (ebappa1971) | Rakuten RapidAPI

国内で訳5000万人が使用していると言われるAmazonに掲載されている商品の価格などの商品情報を取得できます。

Google Translate

Google Translate：ドキュメント (googlecloud) | Rakuten RapidAPI

翻訳は現在Googleの一人勝ちという印象の分野ですが、そのGoogleの翻訳機能を使用できるのはすばらしいです。

翻訳などの機械学習で実装される機能は情報量が多くないと中々精度が上げられず、また実装難度もかなり高いと思いますので、翻訳機能を実装する際には積極的に使用したいWeb APIです。

Yahoo Finance

Yahoo Finance API Documentation (apidojo) | Rakuten RapidAPI

前述の説明でもチラッと出てきたWeb APIです。

株価や相場などを取得することができます。

この様にWeb APIには様々なものが公開されており、 サービスを実装する際には「公開されているAPIで使用できるものはないか？」 と考えることで開発効率を上げることができます。

まとめ

最後にこの記事で紹介した情報をまとめます。

• Web APIとは？
  • Webサービス開発を効率化するツール
• Web APIを使う理由
  • Webサービスの開発を効率化できる
• Web APIの構成
  • クライアントとサーバー
• エンドポイントとは？
  • Web APIを使用するためのURI
• Web APIの具体例
  • Google Maps Geocoding
  • ぐるなびレストラン検索
  • amazon-price
  • Google Translate
  • Yahoo Finance
  • ...

Web APIについて理解は深まりましたでしょうか？

実際にWebサービスを開発する上でWeb APIの知識は必ずと言っていいほど必要になりますので、早い段階で身に付けて、開発を効率的に進めましょう！

【入門】Google Chrome Extension (拡張機能)でデータを保存する

はじめに

データの保存ができる様になると機能の幅がグッと広がります。

そこで今回はGoogle Chrome拡張機能のStorage APIを使用してデータを保存する方法をシェアします。

データ保存をするために使用するStorage APIとは

developer.chrome.com

Storage APIはGoogle Chromeブラウザにデータを保存するためのAPIです。

Storageには

• Sync
• Local

の2種類の利用方法があります。

Sync

Syncは公式サイトの説明によりますと、

When using storage.sync, the stored data will automatically be synced to any Chrome browser that the user is logged into, provided the user has sync enabled.

When Chrome is offline, Chrome stores the data locally. The next time the browser is online, Chrome syncs the data. Even if a user disables syncing, storage.sync will still work. In this case, it will behave identically to storage.local.

と説明されています。

Syncとは「同期」という意味でして、その名の通りユーザーアカウントに紐付けてデータを保存します。ですので別のデバイスでChromeブラウザにログインしていればデータは同期され利用することができます。

またオフラインの場合一旦データはLocalに保存されますが、他のブラウザからはデータにアクセスできません。 次回オンラインになった時、ユーザーに紐づいてデータが保存されます。

Local

Localは単純にブラウザ内の保存スペースにデータが格納されます。 ですので他のブラウザで同じユーザーを使用してもデータは同期できません。

「じゃあSyncの方がいいじゃん」と思うかもしれませんが Syncは容量が512バイトと結構小さいです。 一方Localは5メガバイト程度保存できます。

まとめると次の表の様な感じ。

	Sync	Local
他のブラウザでデータ利用	○	×
オフラインでのデータ保存	○	○
保存上限サイズ(byte)	512	5 M

ご自身の用途に合わせて、保存形式を使い分けていきましょう。

完成品

機能としてはtextareaに文章を入力してもらい、 「SAVE」で文章をブラウザのLocal Storageに保存、 「LOAD」でその値を読み出すというものです。

ソースコード

manifest.json

{
  "name": "one click copy memo",
  "version": "1.0",
  "manifest_version": 2,
  "permissions":[
    "storage"
  ],
  "browser_action":{
    "default_popup": "index.html"
  },
  "icons": {
    "128": "memo.png"
  }
}

index.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">
  <link rel="stylesheet" href="css/bootstrap.min.css">
</head>
<body>
  <div class="container p-0 bg-light">
    <div class="form-group ps-4 pe-4 pt-4 pb-4">
      <textarea class="form-control" id="textarea" rows="8" placeholder="input here"></textarea>
    </div>
    <div class="ps-4 pe-4 pb-4">
      <!-- <div class="btn btn-outline-primary" id="copy-button">COPY</div>
      <div class="btn btn-outline-danger" id="clear-button">CLEAR</div> -->
      <div class="btn btn-outline-danger" id="save-button">SAVE</div>
      <!-- <div class="btn btn-outline-secondary" id="add-button">ADD</div> -->
      <div class="btn btn-outline-secondary" id="load-button">LOAD</div>
    </div>
    <div>
      <p class="h-1" id="input-text"></p>
    </div>
    
  </div>
  <script src="main.js"></script>
</body>
</html>

main.js

document.getElementById("save-button").addEventListener("click", ()=>{

  var inputValue = document.getElementById("textarea").value;

  chrome.storage.local.set({"memo1": inputValue}, function(){ });

});

document.getElementById("load-button").addEventListener("click", ()=>{

  chrome.storage.local.get("memo1", function(result){

    document.getElementById("textarea").value = result.memo1;

  });

});

アイコンはお好きな物を使用してください。 僕は以下のサイトでメモっぽい奴を適当に選びました。

icooon-mono.com

コード解説

今回はSyncではなくLocalを使用しての実装になります。 ですのでSyncを使用してのデータ保存に関しては他の記事等を 参考にしてください。（基本的にはあまり変わりませんが）

データを永続化して保存する上で必要なのは manifest.json内のpermissionsです。

Storage APIなどのAPIは、使用する際にはAPIサーバーに クライアントが使用する旨を伝える必要があります。 そこでpermissionsにstorageと記述することで APIが使用できる様になります。

また実際の保存・読み出し処理は以下の様に行います。

データ保存

chrome.storage.local.set({"memo1": inputValue}, function(){ });

setメソッドを使用します。第一引数には保存するデータを オブジェクト形式で渡します。

今回ですと、キーがmemo1で値がinputValueになります。 inputValueは前述したtextareaで入力された値になります。 呼び出す際にはキー名で値を呼び出すので、データの中身が判別しやすい 名前だといいですね。

第二引数には保存の際に行う処理をコールバックで渡します。 今回は特に行う処理がないので空です。

データ読み出し

  chrome.storage.local.get("memo1", function(result){

    document.getElementById("textarea").value = result.memo1;

  });

getメソッドを使用します。第一引数には読み出すデータのキーを渡し、 第二引数には読み出した際に実行する処理をコールバック関数で記載します。

今回読み出す値のキーはmemo1です。

また第二引数のコールバックには、Storage APIの仕様として 引数に読み出したデータが渡されます。 読み出した値はオブジェクト形式で渡されますので、 キー名を指定して上げることで値を受け取ることができます。 今回ですと、result.memo1ですね。

最後に受け取った値をtextareaのvalueに渡すことで表示できる様になります。

まとめ

以上がStorage APIを使用してのデータ永続化方法です。 個人的な感想としては思ったよりも簡単に実装できたと感じてます。

重要なポイントはAPIを使用するためにpermissionsにstorageを記載し、 仕様書の通りに実装することです。 この実装の流れはStorageだけに限らずあらゆるAPIで同じですので、 是非APIを使い方に慣れていきましょう。

本記事がお役に立てたら嬉しいです。

【実践】Google Chrome Extension (拡張機能)で電卓を作成する

はじめに

現在Googleに公開申請中なのですが、電卓拡張機能を作成しました。 便利な機能（結果を１クリックでコピーできる）を実装でき、 初めてのプロダクトとしては中々良い物ができたと思っています。 公開され次第、Twitterとブログで紹介したいと思います。

さて、今回は電卓拡張機能を作成するにあたって僕が学んだことをシェアしたいと思います。 主に以下の内容について書きます。

• 拡張機能を作る際の手順
• 基本的な電卓の実装方法
• 便利な機能（結果を１クリックでコピーできる）の実装方法

完成品

画像の様な見た目の電卓です。名称は「Answer Copy Calculator」です。 無料で公開しています。 小数計算も可能で、基本的な機能は網羅できていると思っています。

特徴としては「Copy Answer」ボタンで計算結果をコピーすることができることです。

計算結果をコピーすることって意外と多い気がしたのですが、 既存のストアに公開されている電卓拡張機能では、コピー機能を持っている物が 見当たらなかったので作成しました。

作成にかかった時間は大体5〜6時間位でした。 一度ほぼ作りかけたのですが、デザインが納得できずに作り直したので結構時間がかかりました。

使っている技術としては

• HTML/CSS
• JavaScript
• Bootstrap

です。特にChrome APIは使用しておらず、シンプルな構成です。

学んだこと

拡張機能を作る際の手順

何かを作る際には共通することですが、作る際の手順によって 効率が大きく変わります。

気をつけていたのは「行き当たりばったりにコーディングしない」こと。 きちんと作成する物のイメージを作ってから実際にコーディングする様に心がけました。

具体的には以下の様な感じで作業を進めました。

1. 公開されている既存の電卓をチェックして、「どんな機能があれば付加価値を付けられるか」を考える
2. 実装する機能を決める（基本的に最低限で良い） 3. デザインを決める（極力シンプルに）
3. 実装する機能のロジックを決定する（可能であればフローチャートなどを作っても良いかも）
4. デザインをまず完成させる（classとidは無闇に増やさない）
5. JavaScriptで動的処理を実装する
6. デバッグ
7. 公開手続き←今ここ

JavaScriptを早くいじりたくなりますが、まずはデザインをしっかり固めてからにしました。 その方が作業の切り分け（デザインと機能）ができるので個人的な感覚としては効率がよかったです。 またデザインをまず作り上げちゃうことで、安心感も出るのでストレスも少ないです。

基本的な電卓の実装方法

電卓の主な機能

まず電卓の機能を考えます。ざっと以下の様な感じでしょうか。

• 数値ボタンを押すと、押した数値が表示される
• 小数点を使うことで小数が表現できる
• 四則演算ができる
• 「＝」を押して計算結果が求まる
• 計算結果を引き継げる

詳細は割愛しますが、それぞれ以下の様に実装しました。

数値ボタンを押すと、押した数値が表示される

これはボタンのElementにaddEventListenerで実行処理を渡すことで実現します。

// 0を入力した場合
document.getElementById("0").addEventListener("click", ()=>{
  repeatFlag = false;
  addInput("0");
});

そして入力された値をレンダリングします。 このレンダリングですが、僕はまず表示する文字列を格納する配列を用意し、 そこにpushしていき、レンダリングのタイミングで[文字列を格納する配列].join(""); を行い1つの文字列に変換して画面に表示しました。 こうすることで数値と演算子（+ - × ÷）や小数点などの切り分けが簡単になります。

表示はupdateFomula()という関数を用意し、画面更新処理を一元化することで DRYなコードを目指しました。

// 画面更新
function updateFomula(){
  document.getElementById("fomula-text").innerHTML = fomula_list.join("");
}

小数点を使うことで小数が表現できる

配列に格納した文字列を数値にする際には、parseFloat()を使用。 基本的に数値は浮動小数点で扱いました。

実は今回作成した電卓は1未満の小数を作成する際には以下の表記両方OKにしています。

• 0.5
• .5

parseFloatの仕様で、どちらの文字列を渡しても正しく読み取ってくれるので この様な実装にしました。

ですので配列に小数点を追加する際には「一つの数値で小数点が2つ以上入力されない」 というバリデーションを実装すればOKです。 このバリデーションはフラグbanInputDotFlagで管理する様にしました。 小数点が入力されるとtrueになり、再度小数点は入力されない仕組みです。 （実際のコードではもっと細かいジャッジを入れていますが、長くなるので割愛）

// dot
document.getElementById("dot").addEventListener("click", ()=>{
  repeatFlag = false;
  if(!banInputDotFlag){
    banInputDotFlag = true;
    addInput(".");
  }
});

四則演算ができる

四則演算の演算子も上記の配列に追加する形にしました。 配列をforEachでループさせて、演算子が現れたらそれ以前の文字列を数値にキャストして 計算を行っています。

developer.mozilla.org

配列を扱う際には、forよりもforEach()やmap()を使用した方が シンプルに記述できる場合が多いです。

「＝」を押して計算結果が求まる

「＝」ボタンを押すことで計算結果を求めます。

実はこの処理の実装に一番時間がかかりました。判定する要素がかなり多いからです。 式は正しく入力されているか、再度「＝」を押された際の挙動はどの様にするか... など考慮すべき点がかなり多いです。

こういった複雑になりがちな処理は、極力実装する前にフローチャートなりで 処理を確認してからコーディングを行う方が良いと思います。泥沼になるので...。

計算結果を引き継げる

実は電卓には、以下の様な機能が実装されている場合があります。

例

• 「1 + 1」 と入力
• 「＝」を押す
• 「2」が表示される
• 再度「＝」を押す
• 2 + 1が内部的に行われ、「3」が表示される

上記例の機能を実装したかったので、計算結果を退避させ 連続で「＝」が押された場合に対応できる様にしました。 こういった細かい仕様が電卓には意外とあります。

便利な機能（結果を１クリックでコピーできる）の実装方法

本拡張機能の目玉である「１クリックコピー」機能です。 実は仕組みとしては単純でして、以下の記事に掲載されているロジックを使っています。

qiita.com

意外とコピーという処理は素直に実装できないので、若干の面倒臭さは感じましたが 先人の知恵を利用しました。

終わりに

今回はソースコードはあまり載せず、実装における僕の考えなどを書きました。 今後も便利な拡張機能を公開していきたいと思います。

【入門】Google Chrome Extension (拡張機能)でJavaScriptを使用する②バックグラウンドで処理を実行する

[: h400]

はじめに

Google Chrome拡張機能には、Background Scriptという機能があります。

これを使うことで、ポップアップを表示しなくてもいろいろな処理を行うことができます。

今回はそんなBackground Scriptを使った拡張機能の作り方をシェアします。

Background Scriptとは

Google Chromeブラウザを起動している間、裏で動作しているスクリプト（JavaScriptプログラム）です。

裏で動作することでユーザーの操作などのイベントを監視して、必要なときには処理を実行してくれます。

ポップアップ用HTMLファイルで読み込むJavaScriptとの違い

処理を実行するのにポップアップを表示させる必要があるかどうかです。

Background Scriptはポップアップを表示させる必要がありません。

なのでmanifest.jsonを記述する際に、ポップアップ用のファイルがなくてもOKです。

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

www.stay-home-build-app.com

完成品について

今回作る拡張機能の仕様は、右クリックで表示されるメニューに「test-item」 という項目を追加して、test-itemがクリックされると「clicked!」というアラートを表示するものです。

右クリックでメニューが表示され...

test-itemをクリックするとアラートが出る、

と仕様です。 それではまずファイル構成を見ていきます。

ファイル構成

ファイル構成は以下です。

backgroundというフォルダ内に、「manifest.json」と「background.js」ファイルのみです。

次にソースコードを見ていきます。

ソースコード

manifest.json

{
  "name": "my background app",
  "description": "test background script",
  "version": "1.0",
  "manifest_version": 2,
  "background": {
    "scripts": ["background.js"],
    "persistent": false
  },
  "permissions":[
    "contextMenus"
  ]
}

background.js

chrome.runtime.onInstalled.addListener(()=>{
  chrome.contextMenus.create({
    "id": "test",
    "title": "test-menu"
  });
});

chrome.contextMenus.onClicked.addListener(()=>{
  window.alert("clicked!");
})

解説

今回Background Scriptを実装するにあたり、重要な部分は manifest.jsonの"background"の設定です。このキーに値を渡すことによって、 拡張機能がBackground Scriptの存在を認識することができます。

"background" 内の "scripts"には、配列でBackground Script用の JavaScriptファイルを渡します。これはファイルが一つでも配列型式で渡します。 今回はbackground.jsというファイル名を渡しているので、 この拡張機能がインストールされたらこのbackground.jsが裏で待機している状態になります。

また"background"内の"persistent"ですが、このキーにfalseを渡すことで Background Script が必要なときにのみ実行されて、メモリを効率的に使うことができます。 用途にもよりますが、基本的にはfalseにした方がお得です。

また"permission"という見慣れないキーがあります。 これはGoogle Chrome APIを使用するのに必要な記述です。 今回は説明は省きますが、簡単に説明するとcontextMenusを使用することで、 右クリックをした際のメニューを管理することができます。

developer.chrome.com

background.jsではcontextMenusを使って「test-item」というメニューを作成しています。 "title"が右クリックした際の表示名になります。

今回は追加したメニューが一つなので、シンプルにonClickedでイベントを実行しています。 複数になるとユニークなidで処理を分ける必要があります。それはまた別の記事で紹介します。

test-itemがクリックされると、 window.alert でアラート用の表示を出します。

処理の流れは以上です。

終わりに

途中説明を端折った箇所もありますが、 Background Scriptの大まかな説明は以上になります。

最も重要なのは、manifest.jsonで"background"にてファイルを明記することです。

Background Scriptは拡張機能を作成する上で非常によく使用する機能ですので、 しっかり身に付ける様にしましょう！

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

はじめに

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

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

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

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

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を使用する①ボタンがクリックされた時にイベントを実行する

はじめに

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

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

JavaScriptの役割

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

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

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

www.histography.io

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

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

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

JavaScriptの実装方法

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

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

コード

• manifest.json

{
  "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>

• style.css

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

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

クリックすると...

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

まとめ

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

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

はじめに

せっかく作るならデザインが整った拡張機能を作りたいですよね。 そこでデザインを簡単・綺麗・シンプルに作ることができる 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を利用するためのリンクを設置することです。

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