大阪、鳥取で業務効率化・DX化を手掛けている株式会社knowthyselfです。業務効率化・自動化は弊社にお任せください。
ExcelやスプレッドシートへのGAS組み込みによる簡単な自動化から各種API連携やRPA、業務アプリまでお気軽にお問合せください。また、製造業をはじめとしたCADや設計業務の自動化を強みとしております。
お問合せ頂くことも増えたため、chatgptを使用し、誰でも簡単にプログラムを組み、自動化する方法もお伝えしています。
人手不足の解消はもちろんのこと、残業時間の低減やクリエイティブな仕事に割ける時間を増やすお手伝いを致します。お気軽にお問合せください。
前回紹介したクラファン自動化システムのコードを公開
ホームページの更新は面倒ですよね。今回は、wixを使ってホームページを作成している人必見。スプレッドシートと連動させ、スプレッドシートのデータが変われば、wix内のテキストも自動で更新される方法を紹介します。chatgptも使用しながら、コードの作成、自動化を行っております。意外と簡単にできるため、ぜひ挑戦してみてください。
自動化の流れ
１．スプレッドシートの準備
２．スプレッドシート側にGASを組み込む
３．wixに任意のHTMLコードを作成
４．任意のテキストIDを変更
１．スプレッドシートの準備（業務効率化手順①）
まずは自動化したいシートを準備してください。下図は、前回記事で紹介したクラファン自動化にて使用したシートをサンプルとしています。
今回は、wixで自動更新したい情報を「現状金額」：C列、「達成率」D列、「支援人数」F列とします。
サンプルとして「現状金額」：C２セル、「達成率」D２セル、「支援人数」F２セルを連動させるコードを紹介します。
２．スプレッドシート側にGASを組み込む（業務効率化手順②）
GAS（appscript）の組み込み
スプレッドシートシートから「appscript」を開いてください。
「appscript」が開いたら、下図のような画面が表示されます。
function myFunction() { }
上図にあるコードを消して、下記コードを入力してください。
function doGet() {
var ss = SpreadsheetApp.getActiveSpreadsheet();
var sheet = ss.getSheetByName('シート名');
// 各セルの値を取得し、整数に丸める
var valueC2 = Math.round(sheet.getRange("C2").getValue());
var valueD2 = Math.round(sheet.getRange("D2").getValue());
var valueF2 = Math.round(sheet.getRange("F2").getValue());
// 値を配列に格納
var values = [valueC2, valueD2, valueF2];
var output = ContentService.createTextOutput();
output.setMimeType(ContentService.MimeType.JSON);
output.setContent(JSON.stringify({
text1: values[0],
text2: values[1],
text3: values[2],
}));
return output;
}
このコードは「現状金額」：C２セル、「達成率」D２セル、「支援人数」F２セルに対応しています。シート名部分の「進捗確認」は、あなたのスプレッドシートのシート名に変えてください。また、上記コードは、各C２、D２、F２の１セルに対応しているため、複数セルに適用する場合は、コードの改造してください。
スクリプトをデプロイする
下図のように「デプロイ」→「新しいデプロイ」の順番で選択してください。
新しいデプロイの画面にて、説明：任意の内容を入れてください。ウェブアプリ：「ユーザーとしての実行」は、今回は自分としていますが、任意で変更してください。
アクセスできるユーザー：今回は「全員」としていますが、任意の状態に変更ください。セキュリティ上の面からも注意して選択してください。
新しいデプロイが完了した後、デプロイIDをコピーしてください。このIDは、wixにhtmlコードを入力する際に使用しますので、どこかに保存しておいてください。
３．wixに任意のHTMLコードを作成（業務効率化手順③）
開発モードを有効にする
事前準備として、開発モードを有効にします。下図は、有効になっている状態です。
wix内でHTMLコードを追加する
左側にあるメニューより、パーツを追加→HTMLコードの順でHTMLパーツを追加してください。
wix HTMLコードを追加
HTMLコードのIDを確認する
追加されたHTMLコードを選択すると下図に示すような画面がでます。この時、開発モードが有効になっているため、IDの確認が可能となります。下図の赤枠部分が、このHTMLコードのIDになります。今回の記事では、このIDを「html１」としています。
※今回の記事ではID確認のためにのみ使用するため、開発モードで画面が占有されて邪魔な場合は、開発モードを無効としておいても大丈夫です。
HTMLコードを埋め込む
追加されたHTMLコードを選択し、「コードを入力」をクリックしてください。
下図のように内部へコードを追加してください。
下記コードより朱書きしてある部分をを任意の値に変更してください。
・スプレッドシートのappscriptにて設定した「デプロイID」
・wixで設定した「HTMLのID」
・GAS(app script)ないのテキスト番号（今回はtext1）
※上記GAS(app script)をご確認ください。
HTMLコード
<div id="htmlのID：" s
tyle="font-size: 45px; font-family: 'Arial', sans-serif; color: black;"></div>
<script>
function fetchData() {
fetch('https://script.google.com/macros/s/デプロイID：手順２にてデプロイしコピーしたコード/exec')
.then(response => response.json())
.then(data => {
document.querySelector('#htmlのID').innerHTML = data.textcの使用番号;
});
}
// サイトが読み込まれた時点で一度実行
fetchData();
// その後は24時間ごとに実行
setInterval(fetchData, 86400000);
</script>
wixの公開をして完了
最後にwixの「公開」を押して完了になります。これで、スプレッドシートとwixが連携されて、セルの内の値が自動でwixのHTML部分に表示されるようになります。今回は詳細の記載をしておりませんが、クラファン自動化ではECサイトとAPI連携しており購入情報の集計値を自動更新するようにしております。
Comments