Contents
はじめに
どうも、bzbot（ビジボット）です。
今回作成するのは、絶対に使う事はないんだけどそこにボタンがあるから人は押したくなる電卓？！を作ってみようと思います。
最初から宣言しておきますが、コード自体は相当イケてない無理やり書いたコードになってます。
でも、この綺麗に書くことよりまずは泥臭く処理を一つ一つ書いていくってことにも初心者として通るべき道だと思ってますので、ぜひ泥臭くコードを書いてもらえればと思います！（笑）
書いててほんとに気持ち悪いコードすぎて泣きそうでした。。。（笑）
それでは早速始めていきます！
1.絶対に使わない電卓を作成
まず電卓のベースを作成します。
セルB2は計算結果が表示されるよう大きめにします。
その後、『挿入』 > 『図形描画』にて好きな図形を組み込みます。
今回は10個の番号を作るとかなりのイケてないコードが増えちゃうので、一旦3までとさせてください！（笑）
それぞれ作ったらシート名は「電卓」とします。
次に何もデータが入ってないシート「電卓DB」を用意します。合計2シートですね。
2.数字を押したら動く関数を追加
それではまず簡単なコードから追加していきます。
グローバル変数とローカル変数
今回記述している変数で、グローバル変数とローカル変数の違いを簡単に説明します！ローカル変数は関数の中で宣言した変数であり、その関数内でしか参照できません。しかし、グローバル変数は関数の外で宣言した変数であり、どの関数でも参照することができるメリットがあります。
その為、シート名はまずグローバル変数に入れて各関数から呼び出す形で記述します。
|
1 2 3 4 5 |
var sheet = SpreadsheetApp.getActiveSpreadsheet(); //「電卓DB」のシートをアクティブにして、シート情報をcalDBに取得 var calDB = sheet.setActiveSheet(sheet.getSheetByName("電卓DB")); //「電卓」のシートをアクティブにして、シート情報をcalに取得 var cal = sheet.setActiveSheet(sheet.getSheetByName("電卓")); |
さらに今回ボタンの数だけ最低数の関数を作る必要がある為、関数の呼び出しについても記述しておきます。
作成した関数の呼び出し
このタイミングでは2つの関数を用意します。
– function myFunction()
→電卓に結果を表示する為の関数
– function b1()
→ボタン1が押された時に実行される関数
今回はボタン1が押されたときに1がしっかりと電卓上に表示されることが目標なので、関数b1→myFunctionに値を渡す必要があります。
関数の呼び出し方法は呼び出したい関数名『myFunction();』を記載すれば呼び出せます。さらに、『myFunction(joinDate);』と引数を入れることで、該当の関数に渡したい値を渡すことができます！
|
1 2 3 4 5 6 7 |
//Button「1」を押した時の挙動 function b1(){ //joinデータに文字列で1という値をセットする var joinDate = "1" ; myFunction(joinDate); Logger.log("joinDateに入っている値は『" + joinDate + "』です！"); } |
引数で値の受け渡しについてLogger.log()関数を入れているので結果をみてみましょう！
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 |
var sheet = SpreadsheetApp.getActiveSpreadsheet(); //「電卓DB」のシートをアクティブにして、シート情報をcalDBに取得 var calDB = sheet.setActiveSheet(sheet.getSheetByName("電卓DB")); //「電卓」のシートをアクティブにして、シート情報をcalに取得 var cal = sheet.setActiveSheet(sheet.getSheetByName("電卓")); //--↑をグローバル変数といい、以下どの関数で実行しようとした時も呼び出せる便利な変数です！--- //電卓に表示させる関数 function myFunction(date) { Logger.log("引数で渡されたDateに入っている値は『" + date + "』です！"); cal.getRange('B2').setValue(date); } //Button「1」を押した時の挙動 function b1(){ //joinデータに文字列で1という値をセットする var joinDate = "1" ; myFunction(joinDate); Logger.log("joinDateに入っている値は『" + joinDate + "』です！"); } |
以下のように、関数b1で生成されたデータを別関数に引数と一緒に渡した場合、与えたデータがしっかりと渡されていることが確認できます。
|
1 2 |
[19-02-13 02:48:34:299 JST] 引数で渡されたDateに入っている値は『1』です！ [19-02-13 02:48:34:301 JST] joinDateに入っている値は『1』です！ |
3.スクリプトの割り当て
作成したスクリプトをボタン1を押した時の挙動にしたいので、ボタンにスクリプトをセットします。
スクリプト名は関数名と同じ意味なので、作成した『b1』を入力して完了です。
これでボタン1を押すと2…3…と、数字を表示する第一段階を作成できました。
しかし、次は10の桁を表示することができません。
1を押したら1のままです。。その為11と表示したり、12と表示したりする仕掛けが必要です。
4.文字列結合
数値でデータを取り扱う場合には、意図しない計算が先に行われてしまう場合がある為、必要な部分は文字列として扱う必要があります。
さらに、事前に入力した値を保持した形で表示をしないと行けない為、直前で入力した値を別で保持する必要がある。そこで別途用意した『電卓DB』という大層なシートを使っていく。
【やりたいこと】『1』を押した次に『1』を押すと『11』になる
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 |
var sheet = SpreadsheetApp.getActiveSpreadsheet(); //「電卓DB」のシートをアクティブにして、シート情報をcalDBに取得 var calDB = sheet.setActiveSheet(sheet.getSheetByName("電卓DB")); //「電卓」のシートをアクティブにして、シート情報をcalに取得 var cal = sheet.setActiveSheet(sheet.getSheetByName("電卓")); //電卓に表示させる関数 function myFunction(date) { Logger.log(date); cal.getRange('B2').setValue(date); } //Button「1」を押した時の挙動 function b1(){ //事前に登録したデータをセットする var setDate = calDB.getRange('A1').getValue(); //事前に登録したデータの後ろに今回実行するデータを繋げる var joinDate = setDate + "1"; //繋げた値を数値型としてcalDBシートに保存する calDB.getRange('A1').setValue(Number(joinDate)); //引数に文字列データをセットする myFunction(joinDate); Logger.log(joinDate); } |
上記を2回実行してみた結果が以下しっかりと11という値になっていることがわかる。
|
1 2 |
[19-02-13 03:11:37:072 JST] 11 [19-02-13 03:11:37:074 JST] 11 |
5.演算を追加
今回はシンプルに『+』を押したときの動作とその処理について追加していく。
『+』ボタンを押した際に、変数 joinDate には文字列の+マークがセットされ、myFunction()の引数に指定されて『電卓に表示させる関数』が表示されます。
|
1 2 3 4 5 6 |
//Button「+」を押した時の挙動 function plus(){ var joinDate = "+"; myFunction(joinDate); Logger.log(joinDate); } |
上記実行した場合、電卓DBシートはプラスを処理する前の数値的データが入っており、電卓の画面上は『+』マークが表示される。
※DBシートをプラスで上書きしてしまうと、そのあと計算する値がなくなってしまうので注意
6.if文追加
ボタン1を押した時の挙動を改めてカスタムする必要が出てきました。先ほどまでは前提として値が入っている、もしくは値が入っていないことが想定されてましたが、今回は『+』マークが入っている前提も考慮する必要があるのでif文を使って処理を分岐させていきます。
if文は『if(ここの式がTRUEだったら処理を実行)』の部分に条件式を記載します。
elseはTRUE以外の全てFALSEに該当する処理が以下です。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 |
var sheet = SpreadsheetApp.getActiveSpreadsheet(); //「電卓DB」のシートをアクティブにして、シート情報をcalDBに取得 var calDB = sheet.setActiveSheet(sheet.getSheetByName("電卓DB")); //「電卓」のシートをアクティブにして、シート情報をcalに取得 var cal = sheet.setActiveSheet(sheet.getSheetByName("電卓")); //電卓に表示させる関数 function myFunction(date) { Logger.log(date); cal.getRange('B2').setValue(date); } //Button「1」を押した時の挙動 function b1(){ //電卓のデータにセットされている値をチェック var getDate = cal.getRange('B2').getValue(); //値が『+』だったら if(getDate == "+"){ //calDBに登録されている値をsetDateにセットする var setDate = calDB.getRange('A1').getValue(); //setDateは数値型にしてボタン1で追加されるべき値が追加される var joinDate = Number(setDate) + 1; //calDBに今計算した値をセルA1にセットする calDB.getRange('A1').setValue(joinDate); //calDBにセットする値をログで確認する Logger.log("calDBに登録された値は" + joinDate + "です！123"); //引数に数値型のデータを渡す myFunction(joinDate); }else{ //事前に登録したデータをセットする var setDate = calDB.getRange('A1').getValue(); //事前に登録したデータの後ろに今回実行するデータを繋げる var joinDate = setDate + "1"; //繋げた値を数値型としてcalDBシートに保存する calDB.getRange('A1').setValue(Number(joinDate)); Logger.log("calDBに登録された値は" + joinDate + "です！234"); //引数に文字列データをセットする myFunction(joinDate); } Logger.log(joinDate); } //Button「+」を押した時の挙動 function plus(){ var joinDate = "+"; myFunction(joinDate); Logger.log(joinDate); } |
上記追加したコードで『1』を押した時の挙動は以下です。
|
1 2 3 |
[19-02-13 03:33:39:427 JST] calDBに登録された値は1です！234 [19-02-13 03:33:39:428 JST] 1 [19-02-13 03:33:39:430 JST] 1 |
上記追加したコードで『+』を押した時の挙動は以下です。
|
1 2 3 |
[19-02-13 03:33:54:083 JST] calDBに登録された値は2です！123 [19-02-13 03:33:54:083 JST] 2.0 [19-02-13 03:33:54:086 JST] 2.0 |
それぞれ合計した結果が電卓DBシートにセットされたりと、デバックしながらみていくとすごく楽です。
7.最後に
クリアボタンと、2と3のボタンについても増やしてみます！
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 |
var sheet = SpreadsheetApp.getActiveSpreadsheet(); //「電卓DB」のシートをアクティブにして、シート情報をcalDBに取得 var calDB = sheet.setActiveSheet(sheet.getSheetByName("電卓DB")); //「電卓」のシートをアクティブにして、シート情報をcalに取得 var cal = sheet.setActiveSheet(sheet.getSheetByName("電卓")); const TEST = 2; //電卓に表示させる関数 function myFunction(date) { Logger.log(date); cal.getRange('B2').setValue(date); } //Button「1」を押した時の挙動 function b1(){ //電卓のデータにセットされている値をチェック var getDate = cal.getRange('B2').getValue(); //値が『+』だったら if(getDate == "+"){ //calDBに登録されている値をsetDateにセットする var setDate = calDB.getRange('A1').getValue(); //setDateは数値型にしてボタン1で追加されるべき値が追加される var joinDate = Number(setDate) + 1; //calDBに今計算した値をセルA1にセットする calDB.getRange('A1').setValue(joinDate); //calDBにセットする値をログで確認する Logger.log("calDBに登録された値は" + joinDate + "です！123"); //引数に数値型のデータを渡す myFunction(joinDate); }else{ //事前に登録したデータをセットする var setDate = calDB.getRange('A1').getValue(); //事前に登録したデータの後ろに今回実行するデータを繋げる var joinDate = setDate + "1"; //繋げた値を数値型としてcalDBシートに保存する calDB.getRange('A1').setValue(Number(joinDate)); Logger.log("calDBに登録された値は" + joinDate + "です！234"); //引数に文字列データをセットする myFunction(joinDate); } Logger.log(joinDate); } //Button「2」を押した時の挙動 function b2(){ var getDate = cal.getRange('B2').getValue(); if(getDate == "+"){ var setDate = calDB.getRange('A1').getValue(); var joinDate = Number(setDate) + 2; calDB.getRange('A1').setValue(joinDate); myFunction(joinDate); }else{ var setDate = calDB.getRange('A1').getValue(); var joinDate = setDate + "2"; calDB.getRange('A1').setValue(Number(joinDate)); myFunction(joinDate); } Logger.log(joinDate); } //Button「3」を押した時の挙動 function b3(){ var getDate = cal.getRange('B2').getValue(); if(getDate == "+"){ var setDate = calDB.getRange('A1').getValue(); var joinDate = Number(setDate) + 3; calDB.getRange('A1').setValue(joinDate); myFunction(joinDate); }else{ var setDate = calDB.getRange('A1').getValue(); var joinDate = setDate + "3"; calDB.getRange('A1').setValue(Number(joinDate)); myFunction(joinDate); } Logger.log(joinDate); } //Button「+」を押した時の挙動 function plus(){ var joinDate = "+"; myFunction(joinDate); Logger.log(joinDate); } //Button「C」を押した時の挙動 function cxl(){ calDB.getRange('A1').setValue(""); var setDate = cal.getRange('B2').setValue(""); } |
以上で終了です！
やって気づきましたが、『+』を押して2回目の桁を入力するとき2桁以上の数字を入力することができないので『=』とか追加しないとな。。と少し反省。
まぁ、私だったら絶対電卓として使わないですが、。。。（笑）
プログラムの書き方やあり方については相当イケてないコードですが、ぜひプログラムの勉強としてやってみてはいかがでしょうか？（笑）
最後までお付き合いいただき、ありがとうございました！
