>  > プロジェクトμ タイプHC-CS リア左右セット ブレーキパッド ムラーノ PNZ50 R209 取付セット プロジェクトミュー プロミュー プロμ TYPE HC-CS ブレーキパット【店頭受取対応商品】

17インチ サマータイヤ セット【適応車種:アコード(CR系)】WEDS レオニス グレイラ アルファ ハイパーシルバー/ミラーカット 7.0Jx17エナセーブ RV504 225/50R17

DIXCEL M-typeブレーキパッド フロント用AVC10レクサスRC300h Fスポーツ オプション2ピースローター用 14/10~

メニュー

現在、フロントエンドエンジニア / サーバサイドエンジニア / インフラエンジニアを募集中です。詳細はこちら

プロジェクトμ タイプHC-CS リア左右セット ブレーキパッド ムラーノ PNZ50 R209 取付セット プロジェクトミュー プロミュー プロμ TYPE HC-CS ブレーキパット【店頭受取対応商品】

ETCマイレージサービスで、ポイントの自動交換を設定していた・・・はずなのにできてなかった!!!と思ったら、カード情報を2年ほど更新し忘れていて レースチップ XLRコネクト スロットルコントローラ スバル レガシィ V (BM, BR) (ab 2009) エンジン2.5i【RaceChip XLR Connect】品番1110、900ポイントほど失効させていた kouraku です。おはこんばんちは。

さてさて今回は、久しぶりに Vue.js を触ろうかと思います。

コーディングするとき、諸々作業しやすくするために、各ページのリンクを貼って対象ページへ簡単に飛べるよう、ファイルリストのHTMLを作っています。

一方、進捗管理・チェック用としてまた別に、Googleスプレッドシート(以下スプレッドシート)でもファイルリストを作ったりしています。

ん・・・?なんだかちょっと無駄があるような気がしませんか?

スプレッドシートでファイルリストを作って、
その内容をHTML側でも表示できるようになれば良いんじゃない?

それができれば、確実に同期できるし、修正もスプレッドシートのみとなるし、作る労力も勿論減るでしょう。色々と無駄に感じていることを解決できるのではないかと思うんです。
ということで、早速調べて試してみることにしました!

プロジェクトμ タイプHC-CS 7J リア左右セット ブレーキパッド ムラーノ CH PNZ50 R209 取付セット プロジェクトミュー プロミュー プロμ TYPE HC-CS ブレーキパット【店頭受取対応商品】

スプレッドシートのデータを取ってくる、なんてやったことないので色々とググってみました。すると・・・ありました!ピンポイントな内容を発見。

上記参考サイトを元に ウェッズ WedsSports REVSPEC PRAIMES フロント用 トヨタ シエンタ NCP81G 03/9~04/10、流れとしては以下のとおりとなります(もはやそのまま)。

①スプレッドシートでファイルリストを作る
②スクリプト エディタで function を入力する
③ウェブアプリケーションとして公開する
④Vue.jsを使ってファイルリストを表示する

①スプレッドシートでファイルリストを作る

新規スプレッドシートで、ざっくりとこんな感じの表を作ります。
シート名は sitemap としておきます。

②スクリプト エディタで function を入力する

スプレッドシートのメニューから、「ツール > スクリプト エディタ」を選択します。

参考サイトに記述されている以下のコードを入力し、保存します。
(元々書いてある myFunction は削除してOKです)
保存の際に決めるプロジェクト名はなんでもOKです

function getData(id, sheetName) {
var sheet = SpreadsheetApp.openById(id).getSheetByName(sheetName);
var rows = sheet.getDataRange().getValues();
var keys = rows.splice(0, 1)[0];
return rows.map(function(row) {
var obj = {}
row.map(function(item, index) {
obj[keys[index]] = item;
});
return obj;
});
}
function doGet(e) {
var data = getData('xxxxxxxxxxxxxxxxxxxxxx(スプレッドシートのID)', 'sitemap(シート名)');
var output = ContentService.createTextOutput(JSON.stringify(data, null, 2));
output.setMimeType(ContentService.MimeType.TEXT);
return output;
}

ちなみにスプレッドシートのIDは、URLの以下のちょっと長い文字列となります。

https://docs.google.com/spreadsheets/d/ここのちょっと長い文字列がID/edit#gid=0

しかし マナレイ ユーロスピードC-07 1本販売 ホイール スイフト【17×6.5J 4-100 INSET45】ZC13S ZC/ZD 53S/83S MANARAY SPORT EuroSpeed C07 マナレイスポーツ MiD アルミホイール 1枚 単品【店頭受取対応商品】、いろんなプロジェクトでファイルリストを作っていくことを考えた場合、毎回スプレッドシートのIDをURLからコピーして入れて・・・というのは、ちょっと面倒ですよね(変更し忘れ・・・なんかも起こりそうですし)。
なので、自動的にスプレッドシートのIDを取得してくれるように、ちょっと追加・変更してみます。

 :
function doGet(e) {
var ass = SpreadsheetApp.getActiveSpreadsheet(); // ←追加
var ssid = ass.getId(); // ←追加
var data = getData(ssid, 'sitemap(シート名)'); // ←変更(シート名は sitemap で固定)
var output = ContentService.createTextOutput(JSON.stringify(data, null, 2));
output.setMimeType(ContentService.MimeType.TEXT);
return output;
}

これだけでも手間が省けて良いかと思います。

③ウェブアプリケーションとして公開する

スクリプト エディタのメニューから、「公開 > ウェブアプリケーションとして導入」を選択します。

「アプリケーションとして導入」の画面が表示されたら 、「アプリケーションにアクセスできるユーザー」を「全員(匿名ユーザーを含む)」に変更します。なお、この時念のため、「次のユーザーとしてアプリケーションを実行」が「自分」になっていることも確認しておいてください。

変更したら「導入」ボタンをクリックします。

続いて、「ウェブアプリケーションとして導入」の画面が表示されたら、「現在のウェブアプリケーションのURL」をコピーしておきましょう。

これで準備できました。試しにコピーしたURLを、ブラウザで開いてみましょう。

上記の様なJSON形式のデータが表示されたらOKです。

④Vue.jsを使ってファイルリストを表示する

さて、JSON形式のデータが取れましたので、これを元にVue.jsを使ってファイルリストを表示させたいと思います。構造は以下の通りです。

. 
├── css 
│ └── style.css 
├── index.html 
└── js 
 └── script.js

今回、CSSはBootstrapを入れますが、statusによって背景色を変えたいと思うので、

、その定義だけstyle.cssに記述します。

Vue.js で扱うデータは以下の3種です。

  • title: h1で表示させるだけ
  • lists: スプレッドシートのデータ
  • keys: スプレッドシートのデータ項目

上記を考慮して作成したものが以下のものになります。

まとめ

無事 [KYB] カヤバ ショック ローファースポーツ リア 1本 スクラム DG17W 15/03~ 2WD/4WD ワゴン 送料1000円(税別) ※北海道・沖縄・離島は送料別途、スプレッドシートで作成したファイルリストをVue.jsで表示させることができました!

これで、スプレッドシートのデータの取得方法はなんとかわかりましたが 245/40R17 95Y XL FALKEN ファルケン AZENIS FK510 アゼニス FK510 weds LEONIS NAVIA 02 ウエッズ レオニス ナヴィア 02 サマータイヤホイール4本セット、別のプロジェクトで改めてファイルリストを作成する場合、再度スクリプト エディタを開いてコードをコピペして、・・・と、もう少し省力化できれば嬉しいですよねー。できないのかなぁ・・・?

リア左右セット プロμ PNZ50 ムラーノ プロジェクトμ タイプHC-CS 取付セット ムラーノ タイプHC-CS プロミュー ブレーキパット【店頭受取対応商品】 HC-CS R209 TYPE ブレーキパッド プロジェクトミュー

この記事を読んだ人にオススメ

Vue.jsでCSSスタイルガイド作成に挑戦!!残課題解決編2

  • Vue.js

kouraku

  • はてブ
  • Facebook

Vue.jsでCSSスタイルガイド作成に挑戦!!残課題解決編1

  • Vue.js

kouraku

  • はてブ
  • Facebook

Googleスプレッドシートで作成したファイルリストをVue.jsで表示する:IE11対応編

  • Vue.js

kouraku

  • はてブ
  • Facebook

Vue.jsでCSSスタイルガイド作成に挑戦!(4)

  • Vue.js

kouraku

  • はてブ
  • Facebook
{yahoojp}jpprem01-zenjp40-wl-zd-72323