--- title: Chrome拡張機能でオートコンプリート付き検索でスプレッドシートから情報を引っ張る方法① tags: chrome-extension spreadsheet スプレットシート JavaScript author: plumfield56 slide: false --- # 背景 スプレッドシートをデータベースとして簡易的なデータベースを作成したい、 さらにデータを引っ張るときに手間をかけずにサクッとデータを取得したいと思い作成しました。 # 完成イメージ ![2020-10-04_10h01_15.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/428239/73340e08-6f16-f2b4-3f68-f008b8f8c3c9.gif) # スプレッドシートの準備 今回の作成した内容だとスプレッドシートのA列が オートコンプリートの対象となる列で、それ以降で 引っ張りたいデータとなります。 ![2020-10-04_09h48_30.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/428239/113176fc-4697-24ca-6679-cd0ded811501.png) 取得したいデータを作成したら下記のコードを作成します。 ```javascript:GASのコード function doGet(e) { const values = SpreadsheetApp.getActiveSheet().getDataRange().getValues(); const columns = values.shift(); const json = {}; for(let i=0; i `ウェブアプリケーションとして公開` から公開範囲を `Anyone, even anonymous` にして、更新し、 発行されるURLを取得します。 # テキストエディタで実装 拡張機能にいきなり実装するより、テキストエディタで試した方が簡単なので、動作確認しましょう。 今回はJQuery UIにあるAutocompleteを使用して実装しています。 https://jqueryui.com/autocomplete/ ```html:HTMLファイル Document
``` ## JQueryをCDNで取得 JQueryとJQuery UIのCDNはそれぞれ下記から取得しました。 ▼JQuery https://developers.google.com/speed/libraries#jquery ▼JQuery UI https://code.jquery.com/ui/ これでHTMLファイルでの動きは作成できました。 # Chrome拡張機能での実装 ## 必要なデータのダウンロード Chrome拡張機能で実装する場合はCDNは使えないみたいなので、 JQuery, JQuery UIが使用できるようにダウンロードして読み込む必要があります。 ▼JQuery https://jquery.com/download/ 下記画像箇所を右クリックして`名前をつけてリンク先を保存`でファイル取得します。 ![2020-10-04_10h44_03.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/428239/092fca2b-1903-ea71-bcbb-559eee2f1718.png) `jquery-3.5.1.min.js` というファイル名が取得できると思います。 ▼JQuery UI https://jqueryui.com/ 下記画像箇所をクリックしてダウンロードします。 本当は上にあるCustom Downloadから必要な箇所のみダウンロードしたかったのですが、 途中でサイトエラーになり断念しました。 ![2020-10-04_10h46_28.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/428239/2216c8c0-c932-0f54-3008-b44e6b437956.png) `jquery-ui-1.12.1.zip` が取得できるので解凍しておきましょう。 # フォルダの準備 manifest.jsonは下記の構造になるように用意します。 ```:フォルダ フォルダ ├ manifest.json ├ popup.html ├ picture.png ├ js(フォルダ) │ ├ jquery-3.5.1.min.js ※JQuery │ ├ jquery-ui.min.js ※JQuery UI │ └ popup.js │ └ css(フォルダ) ├ jquery-ui.theme.min.css ※JQuery UI └ style.css ``` 上記の内※で補足しているファイルは先ほどダウンロード中にあるので、 そこからデータを移動させてください。 # manifest.jsonの作成 ``` { "name": "スプレッドシートからの情報取得", "version": "1.0", "manifest_version": 2, "description": "スプレッドシートからの情報取得ための拡張機能", "browser_action":{ "default_icon": "picture.png", "defalt_title": "title", "default_popup": "popup.html" } } ``` # html, jsファイルの用意 ```html:popup.html
▼検索したい名前を入力
``` htmlでは用意したcss, jsファイルの読み込みを行っています。 bodyのスタイルを変えることによって表示の幅を変更することが可能です。 ```javascript:popup.js const url = '{スプレッドシートの公開で取得したURL}'; const json = fetch(url) .then(res => res.json()); $(document).ready(() => { json.then(res => { $('#input').autocomplete({ source: Object.keys(res) }) }) }); $('#btn').click(() => { json.then(res => { const obj = res[$('#input').val()]; let html = '▼情報'; for(let key of Object.keys(obj)){ html += `
${key}:${obj[key]}`; } $('#displayText').html(html); }); }); ``` 以上です。 開いてすぐだと反応しないこともあるので、スプレッドシートのデータ量が多くなったら、 あまりつかえないかもしれないなと思っています。 こちらだとスプレッドシートが公開状態になっているので、OAuthを使って認証して、 同じことができる方法を記載した記事も作成しました。 https://qiita.com/plumfield56/items/e620aab520cd47d96bc1