車載ディスプレイの選び方｜サイズ・解像度・取付方式の比較ポイントと2025年注目モデル

たった3分！車載ディスプレイ比較シート自動化ツールで選定時間90%削減

「どのカーナビが自分の車に合うの？」そんな悩み、ディーラーの友人もよく聞かれるそうです。私自身も過去にスペック表とにらめっこして、サイズや解像度が混乱…。手動で比較表を作ると30分は軽く消えます。このツールを使えば入力と一括比較が3分で終わる。時間、めちゃくちゃ浮きます。

1分コピペ！車載ディスプレイ比較＆自動レコメンドツール

スペックを入力すると、自動でGoogleシートに記録・比較・おすすめ候補を表示します。

// === 車載ディスプレイ比較＆レコメンドツール ===

function doGet(e) {
  var html = [];
  html.push('<div style="padding:24px;max-width:480px;'
    + 'margin:40px auto;background:#f5f5f5;border-radius:8px;">');
  html.push('<h2>車載ディスプレイ比較シート</h2>');
  html.push('<form id="displayForm">');
  html.push('モデル名: <input type="text" name="name" required><br>');
  html.push('サイズ(インチ): <input type="number" name="size" min="4" max="15" step="0.1" required><br>');
  html.push('解像度(例:1280x720): <input type="text" name="res" required><br>');
  html.push('取付方式: <select name="mount">');
  html.push('<option>一体型</option><option>セパレート型</option><option>その他</option>');
  html.push('</select><br>');
  html.push('発売年: <input type="number" name="year" min="2019" max="2025" required><br>');
  html.push('価格(万円): <input type="number" name="price" step="0.1"><br>');
  html.push('<button type="button" onclick="submitForm()">登録/比較更新</button>');
  html.push('</form>');
  html.push('<hr>');
  html.push('<div id="result"></div>');
  html.push('<script>');
  html.push('function submitForm() {');
  html.push('  var f=document.getElementById("displayForm");');
  html.push('  var fd=new FormData(f);var obj={};fd.forEach((v,k)=>obj[k]=v);');
  html.push('  fetch("?action=add", {method:"POST",body:JSON.stringify(obj)})');
  html.push('  .then(res=>res.text()).then(str=>{document.getElementById("result").innerHTML=str;});');
  html.push('}');
  html.push('window.onload=function(){');
  html.push('fetch("?action=view").then(res=>res.text())');
  html.push('.then(str=>{document.getElementById("result").innerHTML=str;});};');
  html.push('</script>');
  html.push('</div>');
  return HtmlService.createHtmlOutput(html.join(""));
}

function doPost(e) {
  var action = getAction(e);
  if(action == "add"){
    var data = JSON.parse(e.postData.contents);
    var sh = SpreadsheetApp.getActiveSpreadsheet().getSheetByName("display_data");
    if(!sh) sh = SpreadsheetApp.getActiveSpreadsheet().insertSheet("display_data");
    var idx = sh.getLastRow()+1;
    if(idx == 1) {
      sh.appendRow(["モデル名","サイズ","解像度","取付方式","発売年","価格"]);
    }
    sh.appendRow([data.name, data.size, data.res, data.mount, data.year, data.price]);
    return ContentService.createTextOutput(genResultHtml());
  }
  return ContentService.createTextOutput("NG");
}

function doGetView() {
  return ContentService.createTextOutput(genResultHtml());
}

// 表示・比較用HTMLを生成
function genResultHtml() {
  var sh = SpreadsheetApp.getActiveSpreadsheet().getSheetByName("display_data");
  if(!sh) return "登録データはありません。";
  var vals = sh.getDataRange().getValues();
  if(vals.length <=1) return "まだデータがありません。";
  var html = [];
  html.push('<h3>登録ディスプレイ一覧</h3>');
  html.push('<table border="1" cellpadding="4" style="font-size:13px;">');
  html.push('<tr>');
  vals[0].forEach(function(h){html.push('<th>'+h+'</th>');});
  html.push('</tr>');
  var best = selectRecommend(vals.slice(1));
  vals.slice(1).forEach(function(row,i){
    html.push('<tr' + (best.idx == i ? ' style="background:#dff0d8;"':'') + '>');
    row.forEach(function(cell){ html.push('<td>'+cell+'</td>'); });
    html.push('</tr>');
  });
  html.push('</table>');
  if(best) {
    html.push('<div style="margin-top:12px;padding:10px;'
      +'background:#e0f7fa;"><b>おすすめモデル:</b> '
      +best.name+'（'+best.size+'インチ/'+best.res+'）'
      +'</div>');
  }
  return html.join("");
}

// 一番新しくて大きい推奨モデル自動抽出
function selectRecommend(arr) {
  var res = null; var idx = -1;
  arr.forEach(function(row, i){
    var sz = Number(row[1]);
    var yr = Number(row[4]);
    if(!res || (yr > Number(res[4]))
      || (yr == Number(res[4]) && sz > Number(res[1]))) {
      res = row; idx = i;
    }
  });
  if(!res) return {};
  return {name:res[0], size:res[1], res:res[2], idx:idx};
}

// POST用アクション判定
function getAction(e){
  var q = (e.parameter||{}).action;
  if(q) return q;
  if(e.postData && e.postData.type=="application/json") return "add";
  return "";
}

コピペで始める6ステップ導入ガイド

新しいことでも1つずつやればOK。サポートします。

1. Googleスプレッドシートを開いてApps Script編集画面へ
   画面上部メニューの「拡張機能」→「Apps Script」を選択。
   位置は画面のやや右寄りにある。「Apps Script」で新しいタブが開く。
   ⚠️ 会社アカウントだと制限されるケース、私も最初よく躓きました。ポップアップブロックにも注意。
2. コードを全部消してコピペ貼り付け
   編集エリアでCtrl+A→Delete→上記コードをCtrl+V。
   画面中央の白い領域がコードエリアです。
   ⚠️ 以前、myFunctionだけ残っていて動かないことが…全部消してから貼ってください。
3. 「保存」ボタンでプロジェクトをセーブ
   左上のフロッピーディスクアイコン（またはCtrl+S）。
   初回だけプロジェクト名を入力するダイアログが出ます。
   ⚠️ どんな名前でもOK。保存せずに次に進むと失敗するので忘れずに。
4. Webアプリとして公開する（デプロイ）
   右上の青い「デプロイ」→「新しいデプロイ」。
   デプロイ設定のウィンドウが出てくる。
   1. 歯車アイコンから「ウェブアプリ」を選択
   2. 「自分」を選ぶ（実行ユーザー）
   3. 「全員」にアクセス許可
   4. 「デプロイ」を押す
   ⚠️ 社内共有のつもりで「全員（社内）」にしたら他人が開けないことがあります。
5. Googleからの警告に従い認証（承認）する
   指示通り進んで赤い警告画面へ。
   「詳細」→「xxxに移動（安全ではない）」→「許可」で完了。
   ⚠️ 私も最初は驚きました。これは自作スクリプトにGoogle審査が通っていないだけ、心配無用。
6. URLをコピーして使い始める
   「WebアプリURL」をコピー。
   ブラウザで開けば車載ディスプレイ比較ツールの画面が出ます。
   ⚠️ コード修正後は「再デプロイ」しないと変更が反映されません。ここが地味に大事です。

現場で役立つ具体的な使い方ストーリー

新車選びに迷う友人から、いくつか候補モデルのスペックURLが飛んでくる…。すぐにこのツールを開いてモデル名・サイズ・解像度をサクッと入力。登録ボタン一発で自動比較表ができるので、「一番新しくて大きい画面」も一目瞭然。グループでディスカッションする時にもシートを共有すれば、全員が編集・比較できて超効率的。車好きのサークルで集計を取る時にも重宝しています。