```html
【簡単比較!有機EL・液晶ディスプレイ選び懶人ツール】
ディスプレイ買うとき、毎回「有機ELと液晶って結局どっちがいいの?」って迷う人、結構多いよね。私も友達に質問されて、都度スペック調べて説明…地味に手間!スペック比較表を作ろうとしたけど、毎回手作業で面倒だったから、「これ自動でやってくれるシートあったら最強じゃん!」って思って作ったよ。これで比較のたびに迷子にならない!
コピペでOK!有機EL・液晶自動比較ツール
好きなモデルを入力して、画質・寿命・消費電力を自動で一覧保存&比較できるやつ!
// === 有機EL・液晶ディスプレイ自動比較ツール ===
function doGet(e) {
var html = [];
html.push('<html><head><meta charset="UTF-8">');
html.push('<title>有機ELと液晶 比較ツール</title>');
html.push('<style>body{font-family:sans-serif;}');
html.push('input,select{margin:8px;}th,td{padding:5px;}</style></head><body>');
html.push('<div style="max-width:500px;margin:30px auto;' +
'background:#f7f7f7;padding:24px;border-radius:8px;">');
html.push('<h2>ディスプレイ選びの懶人比較!</h2>');
// フォーム
html.push('<form id="myform">');
html.push('モデル名:<input type="text" name="model" required><br>');
html.push('タイプ:<select name="type">' +
'<option value="有機EL">有機EL</option>' +
'<option value="液晶">液晶</option></select><br>');
html.push('画質評価(1-5):<input type="number" name="quality" min="1" max="5" required><br>');
html.push('寿命(年):<input type="number" name="life" min="1" max="20" required><br>');
html.push('消費電力(W):<input type="number" name="power" min="1" max="1000" required><br>');
html.push('<button type="button" onclick="submitForm()">記録!</button>');
html.push('</form>');
// 更新ボタン
html.push('<button onclick="location.reload()" style="margin:15px 0;">最新の比較表を表示</button>');
// データ表示
var records = getRecords();
if (records.length > 1) {
html.push('<h3>記録一覧(最新順)</h3>');
html.push('<table border="1" style="width:100%;">');
html.push('<tr><th>モデル</th><th>タイプ</th>' +
'<th>画質</th><th>寿命</th><th>消費電力</th></tr>');
for (var i = records.length - 1; i > 0; i--) {
html.push('<tr><td>' + records[i][0] + '</td>' +
'<td>' + records[i][1] + '</td>' +
'<td>' + records[i][2] + '</td>' +
'<td>' + records[i][3] + '年</td>' +
'<td>' + records[i][4] + 'W</td></tr>');
}
html.push('</table>');
// 簡単集計
var ave_q = avg(records, 2);
var ave_l = avg(records, 3);
var ave_p = avg(records, 4);
html.push('<div style="margin-top:18px;">');
html.push('平均画質:' + ave_q + ' / 平均寿命:' + ave_l + '年 / 平均消費電力:' + ave_p + 'W');
html.push('</div>');
}
// 簡単な解説
html.push('<p style="margin-top:20px;">');
html.push('選んだモデルをどんどん記録して比較しよう!');
html.push('</p>');
// スクリプト
html.push('<script>function submitForm(){' +
'var f=document.getElementById("myform");' +
'var data={' +
'model:f.model.value,type:f.type.value,quality:f.quality.value,' +
'life:f.life.value,power:f.power.value' +
'};' +
'fetch("?action=save",{method:"POST",body:JSON.stringify(data)})' +
'.then(x=>x.text()).then(function(){location.reload();});' +
'}</script>');
html.push('</div></body></html>');
return HtmlService.createHtmlOutput(html.join(""));
}
// 保存と表示用
function doPost(e){
if (!e.postData || !e.postData.contents) return;
var data = JSON.parse(e.postData.contents);
var sheet = getSheet();
sheet.appendRow([
data.model, data.type, parseInt(data.quality,10),
parseInt(data.life,10), parseInt(data.power,10)
]);
return ContentService.createTextOutput("ok");
}
// シート取得(なければ作る)
function getSheet(){
var ss = SpreadsheetApp.getActiveSpreadsheet();
var sheet = ss.getSheetByName("比較データ");
if(!sheet){
sheet = ss.insertSheet("比較データ");
sheet.appendRow(["モデル名","タイプ","画質","寿命","消費電力"]);
}
return sheet;
}
// 過去データ取得
function getRecords(){
var sheet = getSheet();
var data = sheet.getDataRange().getValues();
return data;
}
// 平均計算(colidx:2=画質,3=寿命,4=消費電力)
function avg(arr,colidx){
if(arr.length <= 1) return '-';
var s = 0, n = 0;
for(var i=1;i<arr.length;i++){
var v = parseFloat(arr[i][colidx]);
if(!isNaN(v)){ s += v; n++; }
}
if(n==0)return '-';
return Math.round(s/n*10)/10;
}
【超簡単!設置ステップで迷子にならない懶人ガイド】
私も最初めっちゃ迷ったけど、手順通りでいける!失敗しても大丈夫、リロードでやり直せるから!
- Apps Script エディタを開く
Google スプレッドシートを用意して、上のメニュー「拡張機能」→「Apps Script」をクリック。
「拡張機能」は画面上部の中央〜右あたりにあるよ。
新しいタブでエディタが開くはず!
⚠️ 会社アカウントは権限制限で開けないことも。私はこれで最初ハマった!
- コードを全消し&コピペ!
真ん中の白い編集欄で全選択(Ctrl+A)→Deleteで一旦空っぽに。そのまま上のコードを丸ごと貼り付ける(Ctrl+V)!
最初の function myFunction() もぜんぶ消してOK!
⚠️ 一部だけ残すと動かない。全部入れ替えよう!
- プロジェクト保存!
左上のフロッピーディスク(保存アイコン)か Ctrl+S を押すだけ。
初回はプロジェクト名を聞かれるから適当に(例:比較ツール2024)。
⚠️ 保存しないまま進むと次でエラーになる…(体験談)
- ウェブアプリとして公開!
右上の青い「デプロイ」ボタンをクリック、「新しいデプロイ」を選択。
小さいウィンドウが出るよ。
1. 歯車ボタンから「ウェブアプリ」を選ぶ
2. 実行ユーザーは「自分」
3. アクセスできるユーザーは「全員」
4. 下の「デプロイ」を押す!
⚠️ アクセス権を「自分のみ」にしちゃうと他端末で見られないよ〜
- 警告画面でビビらない!
変な赤い画面「Google未確認アプリ」って出てくるはず。
「詳細」→「xxx(安全でないページへ)」→「許可」を順番にクリック!
⚠️ 私も最初これでビビったけど、自分で作ったスクリプトはぜんぶこうなる。
- アプリURLゲットして使い倒す!
デプロイ完了後、画面に出る「ウェブアプリURL」をコピー。
普通のブラウザで開けば、入力フォームと一覧が登場するよ!
⚠️ コード修正したら、もう一回「デプロイ」し直さないと更新されない!(これ毎回忘れがち)
⚠️ 赤い認証画面って何?怖くないの?
これはGoogleが「自分で作ったスクリプト」を一律に警告してくるだけ!公式な審査が終わってないってだけで、あなた自身が作ったものは何も問題なし。毎回「詳細」から進めばOK!
私も最初「ウイルスかな?」って思ったけど、ガチで全部こうなるから慣れると余裕。誰かに配る場合は、この流れを伝えてあげよう!
【実際どう使う?活用ストーリー】
たとえば電気屋で「A社の有機ELとB社の液晶、どっちにしよう…」って悩んだとき。スペックや店員さんの説明をこのフォームにどんどん記録していけば、画質・寿命・消費電力ぜんぶ一覧で見比べられる。友達に「どれ選んだ?」って聞かれても、「これ見れば一発!」と即答できて超ラクだった!あと、家電マニアの先輩も、試しにいろんなモデルで比較して「平均値でバランス見ると選びやすい!」って言ってた。もう迷わない、最強!
```