最終日:実生活に生かしてみよう。 – 1週間でプログラマーになろう。(30分のプログラミング学習、入門講座)

アイキャッチ画像 プログラミング講座
cattle
cattle

この講座もいよいよ最終日となりました。これまでの学習成果として、実際に役に立つアプリケーションを開発してみましょう。

途中からご覧になった方は、全体のロードマップをご確認頂けます。

わからない所があれば、ページ下部のコメント欄、又はtwitterからご相談頂けます。

最終日:実生活に生かしてみよう。 – 1週間でプログラマーになろう。(30分のプログラミング学習、入門講座)

最終回は、「アイディア段階からアプリケーションが完成するまでの流れ」を30分で実践体験して行きます。

準備体操 (2分) – オリジナルの収支表アプリを作ろう。

開発経験が全く無い状態ですと、何をどうしたら良いか分からず、手を動かすことが出来ません。(私がそうでした。実体験)

そこで、まずは私と一緒に、スプレッドシートで収支表アプリを作り始め、完成させましょう。

収支アプリの画像

スマホアプリでこういった物がよくありますが、スプレッドシートでは複数人で同時に使える強みがあります。開発コストも非常に少ないので、初めの一歩目に最適です。個人的な小遣い帳、家庭の家計簿、趣味のゲームや賭け事、仕事にも活用出来ます。

– 段階的に進んで行きましょう!
細かいプログラムコードの中身は、深く気にし過ぎない様にご注意下さい。他人が書いたコードを理解するのは大変な労力が伴います。後日、一行ずつわからない所をgoogle検索等で調べながら、じっくりと理解を深めて下さい。実務レベルのプログラミング能力が必ず身に付きます。「自分で調べて解決する能力」は、プログラマーにとって最も頼りになる武器です。

アプリケーション開発の流れ(3分)

良いアイディアを思いついたら、そのアプリケーションの画面を具体的に想像していきます。主要な機能も、出来る限り洗い出して置くと良いでしょう。

アプリケーション開発フローチャート画像

アプリケーションの具体的なイメージが固まったら、実際に開発を始めます。

アプリケーション開発フローチャート画像

収支アプリ開発に当てはめてみよう

このフローチャートに沿って、今回の収支アプリ開発に当てはめて考えてみましょう。

1.私達には今、収支アプリを作るというふわふわしたアイディアがあります。
2.今回は、画面が一つで済みそうですから、画面遷移(がめんせんい)を考える必要はありません。

画面遷移とは、画面が切り替わる事を意味します。どの画面からどの画面へ切り替わるのか、またどうやったら切り替わるのか、具体的に整理しておくと、スムーズに開発を行えます。

3.主要な機能は以下です。
・収入を登録する機能、支出を登録する機能
・登録済みの収支情報(年月日、品目名、金額)を表示する機能
・全ての収支情報の金額を元に、累計収支として表示する機能

4.画面の絵、5.ボタン配置に関しては、最初にご覧頂いた完成イメージの通りです。

収支アプリの画像

ふわふわだったアイディアが、カチカチに固まってきました。この段階になったら、自信を持って開発に挑んで行きましょう。

前半(10分)- 収支表アプリのレイアウトを完成させよう。

これから実際に、シートのレイアウトを作って行きます。手順に従う単調な作業が続きますが、アプリ開発は本来とても地道な作業です。完成のイメージを実現させる為に、一緒に頑張りましょう。

累計収支、収支情報の見出しを作る(8分)

まず初めに、まっさらなシートを用意します。これまで通りのシートでも大丈夫ですが、不安な方はプロジェクトごと新しく作り直しましょう。

・シート画面の左上、ファイル → 新規作成 → スプレッドシートをクリックします。

シートレイアウト解説画像

・以下のように、データが何も入っていなければOKです。

シートレイアウト解説画像

・AからCをドラックで複数選択します。※ または、Aセルをクリックした後に、Shiftキーを押し続けながら、Bセル、Cセルとクリックして、複数選択します。

シートレイアウト解説画像

・複数選択された状態で、上記の赤い枠の中を更に右クリックしてメニューを表示します。

シートレイアウト解説画像

※ 列A – C のサイズを変更、をクリックします。

・ダイアログが表示されるので、200に修正し、OKをクリックします。

シートレイアウト解説画像

・A – C列が複数選択された状態になっていなければ、再びA – C列を複数選択した状態にします。その状態で、フォントサイズを18に一括修正します。

シートレイアウト解説画像

※ A – C列の全てを複数選択した状態で、赤い枠の所にある数字を、18に修正しましょう。

・A1セルを選択した後に、Ctrlキーを押しながらA3セル、B3セル、C3セルを続けて選択します。

シートレイアウト解説画像

・複数選択した状態で、上記の赤枠部分、塗り潰しの色をクリックします。

シートレイアウト解説画像

※ このように、白から左へ2つずらした灰色に修正します。

・このまま複数選択を維持して、今度は太字をクリックします。

シートレイアウト解説画像

・またまた複数選択を維持して、今度は水平方向の配置を中央揃えに設定します。

シートレイアウト解説画像
シートレイアウト解説画像

・最後に、以下の様に4つのセルの値を弄ります。

シートレイアウト解説画像

A1セルに、累計収支
A3セルに、日付
B3セルに、品目
C3セルに、収支

収入の登録ボタン、支出の登録ボタンを作る(2分)

新しい収支情報を簡単に登録できる、ボタンを作って行きましょう。

・B1セルを選択し、画面左上のメニューから挿入 → 図形描画 と進みます。

シートレイアウト解説画像
シートレイアウト解説画像

・図形描画の画面が開いたら、左上のメニューから、図形 → 図形 → 角丸四角形 をクリックして行きます。

シートレイアウト解説画像

・適当な大きさの長方形を描き、長方形を左クリックで選択します。すると、中に文字列を入力出来る様になるので、収支の登録、と入力します。

※ 長方形を選択すると、これまで同様に背景色や太字設定、中央揃えなどのメニューが出現しますので、お好みに合わせて調整しましょう。

シートレイアウト解説画像

・ボタンの見た目が完成したら、図形描画画面の右上にある、保存して終了をクリックします。

シートレイアウト解説画像

・収支の登録ボタンがシートに追加されました。

※ シート上に存在ボタンは、左クリックするとボタンの実行処理が動きます。レイアウト調整等で、移動させたいときは右クリックで一度選択状態にすると、ドラッグ&ドロップで移動可能になります。

シートレイアウト解説画像

※ ボタンの大きさを調整したい時は、縦に・が3つ並んだアイコンをクリックするとメニューが出てくるので、編集 をクリックしましょう。

・収入ボタンと同様の手順で、支出の登録ボタンも作ります。背景色を変えると雰囲気がちょっぴり良くなるので、おすすめです。

シートレイアウト解説画像

以上で、収支アプリの画面が完全に完成しました!

シートレイアウト解説画像
cattle
cattle

前半はここまでです。おつかれさまでした。前半で、収支アプリのレイアウトを完成させる事が出来ました。後半からは、スクリプトエディタを用いてプログラムを組み込んで行きましょう。また、スプレッドシート上でも関数を使って、累計収支計算の自動化を行います。

後半(15分)- 収支表アプリに、関数を組み込もう。

後半からは、私と一緒に主要な機能を実装して行きましょう。

収入の登録ボタンに関数を割り当てる(5分)

収入の登録ボタンは見かけだけで、押しても何も反応がありません。これを機能させる為には、貴方がこれまで学んできたJavaScriptの力が必要です。具体的には、ボタンが押されたときに実行される専用の関数を作成し、ボタンに割り当てます。

– GoogleAppsScript
JavaScriptをベースにGoogleが開発しているスクリプト言語です。GoogleAppsScript特有の便利機能が沢山用意されており、プログラマーはこれらを用いる事で、スプレッドシートを思い通りに操作出来ます。

まずは、スクリプトエディタを開きましょう。
そして、以下のコードを記述します。(長文で、うっ・・となりますが、内容はさておき一旦全てコピペしましょう。)

最も重要な関数は、収入の登録処理を行うincome関数支出の登録処理を行うspend関数の2つです。

// 収入の登録処理を行う関数(収入登録ボタンで実行される)
function income() {
  var kind = '収入';

  var price = inputPriceDialog(kind);  // 金額を入力
  // キャンセルされた時は、returnでincome関数の処理を抜ける。
  if(Number.isNaN(price)) {
    Browser.msgBox('登録をキャンセルしました。');
    return;
  }
  // 空入力時は、returnでincome関数の処理を抜ける。
  if(price === 0) {
    Browser.msgBox('金額を入力して下さい。\n\n登録をキャンセルしました。');
    return;
  }
  // 正の値に修正(負の値でも強制的に正の値にする)
  price = Math.abs(price);

  var name = inputNameDialog();  // 品目名称を入力
  // キャンセルされた時は、returnでincome関数の処理を抜ける。
  if(name === 'cancel') {
    Browser.msgBox('登録をキャンセルしました。');
    return;
  }
  // 空入力時は、returnでincome関数の処理を抜ける。
  if(name === '') {
    Browser.msgBox('品目名称を入力して下さい。\n\n登録をキャンセルしました。');
    return;
  }

  insertRecord(price, name);     // 新規行列をシートに挿入
  sendMessageDialog(kind, price, name);  // 登録完了を通知
}

// 支出の登録処理を行う関数(支出登録ボタンで実行される)
function spend() {
  var kind = '支出';

  var price = inputPriceDialog(kind);  // 金額を入力
  // キャンセルされた時は、returnでincome関数の処理を抜ける。
  if(Number.isNaN(price)) {
    Browser.msgBox('登録をキャンセルしました。');
    return;
  } 
  // 空入力時は、returnでincome関数の処理を抜ける。
  if(price === 0) {
    Browser.msgBox('金額を入力して下さい。\n\n登録をキャンセルしました。');
    return;
  }
  // 負の値に修正(正の値でも強制的に負の値にする)
  price = Math.abs(price) * -1;

  var name = inputNameDialog();  // 品目名称を入力
  // キャンセルされた時は、returnでincome関数の処理を抜ける。
  if(name === 'cancel') {
    Browser.msgBox('登録をキャンセルしました。');
    return;
  }
  // 空入力時は、returnでincome関数の処理を抜ける。
  if(name === '') {
    Browser.msgBox('品目名称を入力して下さい。\n\n登録をキャンセルしました。');
    return;
  }

  insertRecord(price, name);     // 新規行列をシートに挿入
  sendMessageDialog(kind, price, name);  // 登録完了を通知
}



// 金額の入力ダイアログを表示する関数
function inputPriceDialog(kind) {
  var title = '新しい' + kind + 'を登録';  // ダイアログのタイトル
  var prompt = '金額を半角数字で入力して下さい';  // ダイアログ内のテキスト
  var inputPrice = Browser.inputBox(title, prompt, Browser.Buttons.OK_CANCEL);
  return Number(inputPrice);
}

// 品目の入力ダイアログを表示する関数
function inputNameDialog() {
  var title = 'この収入の名称';  // ダイアログのタイトル
  var prompt = '名称を文字で入力して下さい';  // ダイアログ内のテキスト
  var inputName = Browser.inputBox(title, prompt, Browser.Buttons.OK);
  return String(inputName);
}

// 収支登録の完了メッセージダイアログを表示する関数
function sendMessageDialog(kind, price, name) {
  Browser.msgBox(kind + 'が登録されました。\n\n' + price + '円:' + name);
}

// 新規レコードの挿入
function insertRecord(price, name) {
  var insertStartRow = 4;   // 新規レコードを挿入開始する行
  var insertStartLine = 1;  // 新規レコードを挿入開始する列 (Aは1, Bは2,・・・)
  // 新たに挿入するレコードの内容
  var nowDate = new Date(); // datetime型の値(現在の年月日時間の情報)
  var records = [
    [nowDate, name, price]
  ];
  // 対象シートのオブジェクトを取得(ユーザーが現在選択中のシート)
  var sheet = SpreadsheetApp.getActiveSheet();
  // シートオブジェクトの関数を使って、まずは空白の新規行列を挿入(新たに挿入するレコード行数分)
  sheet.insertRows(insertStartRow, records.length);
  // 先程新たに挿入した空白行列のオブジェクトを取得
  var targetRange = sheet.getRange(insertStartRow, insertStartLine, records.length, records[0].length);
  // 先程取得した空白行列のオブジェクトを使って、シートの内容を修正する。
  targetRange.setValues(records);
}

収入の登録ボタンに関数を割り当てる(1分)

・ボタンを右クリックで選択して、スクリプトエディタに記述した関数を割り当てます。

※ 左クリックだと、「ボタンの実行」と勘違いされ選択できませんのでご注意下さい。

スクリプト割り当ての解説画像

※ 選択中は、この様に青色の線で強調され、右上にメニューボタンが表示されます。(縦に・が3つ並んでいる物)

・縦に・が3つ並んだマークのメニューボタンを左クリックします。

スクリプト割り当ての解説画像

※ 「スクリプトを割り当て」をクリックします。

・ダイアログが表示されるので、incomeと入力し、OKをクリックします。

スクリプト割り当ての解説画像
income

※ ここでincomeと設定する事で、このボタンがクリックされた時に、スクリプトエディタに定義したincome関数が実行される様になります。

支出の登録ボタンに関数を割り当てる(1分)

こちらも、先程の収入の登録ボタンと全く同じ手順で関数の割り当てを行います。

・途中手順の解説は割愛し、最後のダイアログ画面で、spendと入力し、OKをクリックします。

スクリプト割り当ての解説画像
spend

※ 支出の登録ボタンをクリックした時は、スクリプトエディタからspend関数が呼び出される様になります。

累計収支を求める(1分)

・以下の様に、累計収支見出しの真下にあるA2セルを選択します。

累計収支の関数処理の解説画像

・A2セルを選択したままの状態で、上部にあるfx入力欄に、=SUM(C1:C)と入力します。

累計収支の関数処理の解説画像
=SUM(C1:C)

動作を確認して、完成!(7分)

開発において、動作確認は欠かしてはならない非常に重要な行為です。チェックリストを作ると、確認漏れのリスクを減少出来ます。

・正しく「収入」を登録できていますか?
・収入に負の値を登録されたらどうなりますか?
・正しく「支出」を登録できていますか?
・入力を途中でキャンセルされた時はどうなりますか?
・累計収支の計算結果は、正しい値になっていますか?

あとがき

JavaScriptプログラマーとなった貴方が次のステップに進む為に、私がオススメ出来る道が4つあります。

1.「GoogleAppsScript」の勉強を継続し、スプレッドシートをもっと活用する。
後半部分で張り付けたコードを、一行ずつじっくり読み解いて行きましょう。わからない所はGoogle検索で調べて行くと、自身の問題解決能力が飛躍的に向上し、必ず自信が付いてきます。その後は、この収支表を更に機能拡張したり、新しいスプレッドシートアプリを開発してみるというのはいかがでしょうか。

2.「Node.js」を学び、Webアプリケーション開発を始める。
Node.jsは、JavaScriptが使えるWebサーバーです。リアルタイムの処理に強く、拡張性(他人が作った便利機能を組み込める)に優れています。例えば単純なチャット機能であれば、5分ほどで瞬間構築出来ます。オリジナルWEBサイトを作るには、サーバーとクライアントの通信の流れを理解する必要が有り、それと並行して、HTML、CSSの学習を進める必要があります。また、mysqlなどのデータベースの知識もあると、尚良いでしょう。これらを包括的に身に付けるには、集中出来る期間が3ヵ月程必要です。

Node.jsは、Line、DiscordのチャットBotを開発して、世界中の人々に自分のサービスを提供出来ます。単純なチャットBotであれば、JavaScriptのみで構築可能ですので、まずはこちらがオススメです。

3.「Unity」を学び、PC/スマホ向けゲームを開発する。
Unityは、JavaScript、またはC#でゲーム開発が簡単に行えるソフトです。ゲーム開発はプログラミングだけに留まらず、絵、サウンド、企画、レベルデザイン(難易度調整)など、多様な技術が求められます。まずは非常にシンプルな物から作ってみると実感を得られるので、自信に繋がります。勝利 / 敗北のルールは出来るだけわかりやすく明確であると、他人からの評価も得やすく、モチベーションの向上に繋がります。

4.「wordpress」に新しく出会う。
これは全く新しい選択です。プログラミングをやってみて、ブログもやってみようかな?とお考えの方は、是非wordpressを始めましょう。このサイトもwordpressを用いて管理しています。

cattle
cattle

プログラミングには、アイディアを実現する力があります。将来有望なプログラマーである貴方のご活躍を、今後も陰ながらに応援しております。

わからない所があれば、ページ下部のコメント欄、又はtwitterからご相談頂けます。

本日のまとめ – プログラミング学習、入門講座

・アプリケーション開発の手順を知り、具体的なイメージを掴む事ができました。

・GoogleAppsScriptを用いて、JavaScriptをより実用的に扱えました。

・冒険の準備が整いました!貴方の自由な発想で、モノづくりを楽しみましょう。

コメント