簡単！車載ディスプレイ比較シート｜サイズ・解像度・取付方法を一発管理
車載ディスプレイって選ぶ時、情報がバラバラで迷子になりがちじゃない？僕も友達から「サイズってどれが正解？」とか「壁に付けられるやつってどれ？」ってよく相談されるんだよね。でも大丈夫！このツールを使えば、スペックを入力→自動でシート保存→一括で比較までぜーんぶできちゃう。これ一回作っておくと、後から「どれが一番よかったっけ？」って時にもすぐに一覧を確認できて超ラク！
コピペでOK！車載ディスプレイ比較ツール
サイズ・解像度・取付タイプなどをまとめて入力して、Googleスプレッドシートに一括保存！履歴も一目瞭然。
// === 車載ディスプレイ比較シート ===
function doGet(e) {
var ssId = getOrCreateSheet_();
var html = [];
html.push('<html><head><meta charset="utf-8">');
html.push('<style>body{font-family:sans-serif;background:#fafafa;padding:32px;}');
html.push('.main{max-width:500px;margin:0 auto;background:#fff;padding:24px;box-shadow:0 2px 8px #eee;}');
html.push('.inputRow{margin:14px 0;}label{display:block;margin-bottom:4px;font-size:13px;}');
html.push('table{margin-top:20px;width:100%;font-size:13px;border-collapse:collapse;}');
html.push('th,td{border:1px solid #ddd;padding:6px;text-align:center;}');
html.push('</style></head><body>');
html.push('<div class="main">');
html.push('<h2>車載ディスプレイ 比較入力フォーム</h2>');
html.push('<form id="displayForm">');
html.push(inputField_("メーカー名", "maker", "text"));
html.push(inputField_("モデル名", "model", "text"));
html.push(inputField_("サイズ（インチ）", "size", "number", "min=3 max=18 step=0.1"));
html.push(inputField_("解像度", "resolution", "text", "placeholder='例：1920x720'"));
html.push(dropdown_("取付タイプ", "mount", ["ダッシュボード", "ルーフ", "ヘッドレスト", "その他"]));
html.push(dropdown_("タッチ操作", "touch", ["あり", "なし"]));
html.push(inputField_("参考価格（円）", "price", "number", "min=0"));
html.push('<button type="button" onclick="submitData()">シートに追加</button>');
html.push('</form>');
html.push('<div id="msg" style="margin:8px 0;color:#218838;"></div>');
html.push('<hr>');
html.push('<h3>保存済みディスプレイ一覧</h3>');
html.push('<div id="tableDiv">' + getTableHtml_() + '</div>');
html.push('<button onclick="reloadTbl()" style="margin-top:10px;">最新に更新</button>');
html.push('</div>');
html.push('<script>');
html.push('function submitData(){');
html.push('var d=document, f=d.getElementById("displayForm");');
html.push('var fd={};["maker","model","size","resolution","mount","touch","price"].forEach(function(k){');
html.push('fd[k]=f[k].value; });');
html.push('if(!fd.maker || !fd.model){d.getElementById("msg").innerText="メーカー名とモデル名は必須です！";return;}');
html.push('google.script.run.withSuccessHandler(function(){');
html.push('d.getElementById("msg").innerText="追加完了！";reloadTbl();');
html.push('f.reset();}).saveDisplayData(fd);}');
html.push('function reloadTbl(){ google.script.run.withSuccessHandler(function(htm){');
html.push('document.getElementById("tableDiv").innerHTML=htm; }).getTableHtml_();}');
html.push('</script></body></html>');
return HtmlService.createHtmlOutput(html.join(""));
}
// 入力項目をまとめて生成
function inputField_(label, name, type, opt) {
var str = '<div class="inputRow"><label for="'+name+'">'+label+'</label>';
str += '<input name="'+name+'" type="'+type+'" ';
if(opt) str += opt + ' ';
str += 'required style="width:94%;"></div>';
return str;
}
function dropdown_(label, name, arr) {
var str = '<div class="inputRow"><label for="'+name+'">'+label+'</label>';
str += '<select name="'+name+'" style="width:99%;">';
arr.forEach(function(v){ str += '<option value="'+v+'">'+v+'</option>'; });
str += '</select></div>';
return str;
}
// シート取得or新規作成
function getOrCreateSheet_() {
var ss = SpreadsheetApp.getActiveSpreadsheet();
var s = ss.getSheetByName("ディスプレイ比較") || ss.insertSheet("ディスプレイ比較");
if(s.getLastRow() == 0) s.appendRow(["メーカー","モデル","サイズ","解像度","取付","タッチ","価格"]);
return ss.getId();
}
// データ保存
function saveDisplayData(data) {
var s = SpreadsheetApp.getActiveSpreadsheet().getSheetByName("ディスプレイ比較");
s.appendRow([data.maker, data.model, data.size, data.resolution, data.mount, data.touch, data.price]);
}
// 表示用テーブル
function getTableHtml_() {
var s = SpreadsheetApp.getActiveSpreadsheet().getSheetByName("ディスプレイ比較");
var vals = s.getDataRange().getValues();
if(vals.length <= 1) return "<div>まだデータなし。</div>";
var h = ['<table><tr>'];
vals[0].forEach(function(v){ h.push('<th>'+v+'</th>'); });
h.push('</tr>');
for(var i=1;i<vals.length;i++){
h.push('<tr>');
vals[i].forEach(function(v){ h.push('<td>'+v+'</td>'); });
h.push('</tr>');
}
h.push('</table>');
return h.join("");
}
はじめてでも安心！Google Apps Script 使い方ガイド
超初心者でも絶対できる！迷ったらこの順番で。
- Google スプレッドシートでスクリプト編集画面を開く
動作：シートを開いたら、画面上部メニューの「拡張機能」→「Apps Script」をクリック
位置：「拡張機能」はだいたい中央あたりにあるよ
結果：新しいタブで Apps Script の画面が開く
⚠️ 僕の職場では、会社アカウントだとここでブロックされることがあった。ポップアップブロックも要注意！
- コード全消去＆コピペ！
動作：真ん中の白いエリアでCtrl+Aして全部消す→上のコードをまるっと貼り付け
位置：エディタ中央の白い部分が作業エリア
結果：もともとのfunction myFunction()は消えてOK。全部このツールのコードだけに！
⚠️ 一度全部消さないと前のコードが邪魔してエラーになること、何回もやっちゃった…
- 保存！保存！これ大事
動作：上の方にあるフロッピーディスクのアイコン（もしくはCtrl+S）をポチッ
位置：画面左上寄りのボタン群の中
結果：最初はプロジェクト名の入力画面が出る。適当でOK
⚠️ 名前は後からでも変えられる。保存しないまま次に行くと本当に動かなくて焦る…
- ウェブアプリとして公開する
動作：右上の青い「デプロイ」→「新しいデプロイ」
位置：「デプロイ」はかなり右上！見逃しがちなので注意
結果：公開設定の画面が出てくる
子手順：
1. 歯車マークから「ウェブアプリ」選ぶ
2. 「自分として実行」を選ぶ
3. アクセス権は「全員」にする（誰でも使える！）
4. 「デプロイ」押すだけ
⚠️ 社内の人に共有したい場合は、権限設定を間違えると「開けません」って怒られるので、ここめちゃ大事！
- 警告画面でびっくりしない！
動作：承認画面が出るので順番に許可していく
結果：「Googleがこのアプリを確認してません」って赤い画面が出てくる
対策：「詳細」→「xxxx（安全でないページに進む）」→「許可」
⚠️ 毎回出るから心配になったけど、これ自分が作ったやつなら大丈夫。心配いらない！
- 使い始めよう！ウェブアプリURLをGET
動作：公開が終わると「ウェブアプリのURL」が表示されるのでコピー
位置：認証の後の画面、やや下の方に長いURLが出る
結果：そのままブラウザに貼ればこのツールが完成形で使える！
⚠️ コードを直した時はまた再デプロイしないと、反映されないことが何度もあった（ちょっと面倒だけど忘れずに！）
⚠️「Googleがこのアプリを確認してません」って何？
これね、初めてスクリプトを公開した時は絶対出てくるやつ！自分で作ったGAS（Google Apps Script）は、Googleの公式審査を通ってないだけで危険なものじゃない。だから「詳細」→「xxxx（安全でないページに進む）」→「許可」でOK。
万が一怖かったら、プロジェクト内のコードが全部自分で書いたものだけか、念のためダブルチェックしてから許可すれば安心！
こんな使い方で差がつく！具体例を紹介
例えば友達に「次の旅行で車載ディスプレイをつけたいんだけど、いろんなメーカーで迷ってる」って相談された時、このツールで各社のモデルやサイズ、取付方法を一覧入力してみる。すると、「やっぱりこの車には9インチでダッシュボードタイプがちょうどいいね！」なんて会話がすぐできる！
あと、職場の営業車の備品管理で「どの車にどのモデルが付いてる？」ってリストアップしたい時にも超便利だった。シートに履歴も残るから、後からメンテや交換時の確認も楽勝！
