>  > 17インチ サマータイヤ セット【適応車種:ランディ(C26系)】WORK MCOレーシング タイプCS ブラッディーレッド 7.0Jx17エナセーブ RV504 205/50R17

サマータイヤ BFグッドリッチ 37x13.50R18LT 128Q マッドテレーン T/A KM3

●送料無料●(離島等除く)●エスペリア●ホンダ バモスホビオ 純正ローダウン車 スーパーダウンサス HM3 E07Z H15/4~ 2WD NA専用 / リアはリーフスプリング形状です。 リア

メニュー

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

17インチ サマータイヤ セット【適応車種:ランディ(C26系)】WORK MCOレーシング タイプCS ブラッディーレッド 7.0Jx17エナセーブ RV504 205/50R17

ETCマイレージサービスで、ポイントの自動交換を設定していた・・・はずなのにできてなかった!!!と思ったら、カード情報を2年ほど更新し忘れていて アイシン クラッチカバー CTX-066 サクシード スターレット スプリンター スプリンターカリブ スプリンタートレノ ターセル ターセル/コルサ/カローラII、900ポイントほど失効させていた kouraku です。おはこんばんちは。

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

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

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

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

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

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

17インチ サマータイヤ 99-00) セット【適応車種:ランディ(C26系)】WORK MCOレーシング タイプCS ブラッディーレッド 7.0Jx17エナセーブ リア RV504 205/50R17

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

上記参考サイトを元に 【USA在庫あり】 ムース MOOSE Utility Division バッテリー充電器 オプティメイト3 12V-3A 3807-0257 HD店、流れとしては以下のとおりとなります(もはやそのまま)。

①スプレッドシートでファイルリストを作る
②スクリプト エディタで 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

しかし レクサス RC 10系 フロアマット ラゲッジマット (クロス)、いろんなプロジェクトでファイルリストを作っていくことを考えた場合、毎回スプレッドシートの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によって背景色を変えたいと思うので、

17インチ サマータイヤ セット【適応車種:ランディ(C26系)】WORK MCOレーシング タイプCS ブラッディーレッド 7.0Jx17エナセーブ RV504 205/50R17

SEV セブ ルーパーブレスレット パープル 17サイズ, 【送料無料】ケアセット (フェイス&バスト) TB-77C-60, 【全商品ポイント10倍 1/10(木)11:00~1/10(木)23:59】花王 ピュオーラハブラシ コンパクト やわらかめ 1本×144個【送料無料】【オーラル】【歯磨き】【歯ブラシ】, 【ポイント10倍!要エントリー】クリニコビフィズス菌末BB536 2g×30本×6箱(発送までに7~10日かかります・ご注文後のキャンセルは出来ません), フェラガモ アッティモ ローフロラーレ EDT/30mL フレグランス 香水 [レディース メンズ ユニセックス 男性用 女性用 ランキング 大人気 コロン お買い得 バーゲン セール 激安 特価 SALE アウトレット]【RCP】05P30May15 『スイフト』 純正 ZC72S クッションボックス パーツ スズキ純正部品 収納 小物入れ 便利用品 swift オプション アクセサリー 用品, バサラ/ルーフレール無車のみ[U30][H11.11~H15.6]TUFREQルーフキャリア【Pシリーズショートモデル】代引注文不可, 【純正】HONDA N-WGN ホンダ エヌワゴン【JH1 JH2】  リアワイパーカバー【ホワイト】[08F52-E7P-070C], 【送料無料】 JBパワー ケイヒンキャブレター FCR35 ゼファー750, フィット用 リンクCOMP.フロントワイパーフィットフィットハイブリッド 76530-TF0-004 【★直送便】データシステム テレビ&ナビキット(スマートタイプ) トヨタ用 TTN-10S

17インチ サマータイヤ セット【適応車種:ランディ(C26系)】WORK MCOレーシング タイプCS ブラッディーレッド 7.0Jx17エナセーブ RV504 205/50R17:15インチステラ カスタムLA100系ENKEI オール オールワン マシニングキャンディーレッド 5.0Jx15エナセーブ RV504 165/55R15 【送料無料】 【エスペリア Espelir】プレミオ 等にお勧め ダウンサス / 1台分セット 型式等:NZT260 品番:EST-2581

17インチ サマータイヤ セット【適応車種:ランディ(C26系)】WORK MCOレーシング タイプCS ブラッディーレッド 7.0Jx17エナセーブ RV504 205/50R17.【ゼログラビティ】 (受注発注品) スクリーン SRタイプ スモーク(CBR900RR 00-01 (CBR929RR)) 【2046302】 【エントリーでポイント5倍】165/60R15 77Q YOKOHAMA ヨコハマ IG60 IG60 AZ sports YL-10 AZスポーツ YL-10 スタッドレスタイヤホイール4本セット

ディクセル ECタイプ フロント左右セット ブレーキパッド ロゴ GA5 331146 取付セット DIXCEL エクストラクルーズ ブレーキパット【店頭受取対応商品】 【マラソン!全品2倍以上&特別クーポン!】ENDLESS/エンドレス SSY ティーノ HV10 V10 H13.1~H15.3 リア 商品番号:EP399

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

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

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

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

まとめ

無事 アドヴィックス パデスト フロント左右セット ブレーキパッド ムーヴ/ムーヴカスタム L175S/L185S HSN910P 取付セット ADVICS アドヴィクス SEI 補修用パッド ブレーキパット【店頭受取対応商品】、スプレッドシートで作成したファイルリストをVue.jsで表示させることができました!

これで、スプレッドシートのデータの取得方法はなんとかわかりましたが Artina アルティナ フロアマット プレミアム ベージュ プレサージュ U30 H10.06~ 7人乗車/8人乗車、別のプロジェクトで改めてファイルリストを作成する場合、再度スクリプト エディタを開いてコードをコピペして、・・・と、もう少し省力化できれば嬉しいですよねー。できないのかなぁ・・・?

サマータイヤ RV504 MCOレーシング サマータイヤ 17インチ 7.0Jx17エナセーブ ブラッディーレッド セット【適応車種:ランディ(C26系)】WORK 7.0Jx17エナセーブ タイプCS 205/50R17

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

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