N予備校を続けて2年が経った・・・

12789 ワード
プログラミング初心者 プログラミング教育 obniz dialogflow N予備校 プログラミング教育 テキストリンク

私について

　永遠のプログラミング初心者の"光の戦士Mono"と名乗っております。FF14というオンラインゲームが好きで、ゲームのアカウント名をQiitaでも使用している感じです。記事投稿時点では工具系エンジニアからジョブチェンジ（異動）して非IT系の自社内オンプレミスの保守を行うシステムエンジニアをやっています。2019年3月時点でN予備校を続けて2年数ヶ月が経ちました。最近引越したので、ネット回線がひけていないのでスマホから修正可能なここに記事を書くことにします。

タイトルについて

　自分には技術的な内容をQiitaに書くことができないので、自分の成長記録(これからのプログラミング教育のサンプル)として「N予備校を続けて2年が経った・・・」と題し、またまたN予備校が冬に開催しているwebアプリコンテストに光の戦士Monoという名前で参加した記録をここに残します。この記事の内容は制作過程の自分用の覚書としての記事になります。ですので、途中記事の修正がたくさんあると思われます。(3/11コンテスト結果発表予定。)
※Webアプリコンテストとなっていますが、自分の今回作ったアプリは色々な経緯を経てWebアプリになっていませんでした。審査員の方々には申し訳ないことをしました。

コンテスト概要：N高・N予備校 Webアプリコンテスト 2018冬
みんなの作品：「Web アプリケーションコンテスト 2018年度 冬」応募作品
自分が作ったもの：エルフ×ファーム(elf-farm)
※リンク先が変わっていたらすみません

「キャラクター（chatbot）を通じて、植物とコミュニケーションをとる」をコンセプトにLinebotを作成してみました。
簡単な挨拶とサービスについての説明、自作の水やりマシーンで「光の戦士Mono宅の観葉植物」に水をあげることができます。
水をあげることができる時間帯はLineのホーム画面に記載しています。

DEMO

アプリの作り方(水やり機能の作り方の紹介)

このアプリはlineの会話フレーズをトリガーにobnizというIOTデバイスを使用して、Lチカのプログラムを起動させるをLチカではなくポンプに代用しただけのプログラムになります。

システム構成
システム構成

水やり装置にかけたお金（概算）

材料 価格
obniz 6000円
水中ポンプ 1000円
水中ポンプ用シリコンホース 250円
工作用プラ板 500円
ペットボトル いつも飲んでるから無料
ブレッドボードとか配線ケーブル 昔の電子工作の流用品
合計 約7750円
水やり装置

作成手順のアウトライン

フロント側lineのmessageAPIの登録

参考記事
LINEのBot開発 超入門（前編） ゼロから応答ができるまで

lineとdialogflowの登録と連携

参考記事
LINEのBot開発 超入門（後編） メッセージの内容と文脈を意識した会話を実現する
チャットボットをAIでもっと素敵にする！自然言語処理の仕組み

obnizの水やり装置作成とハードAPIのwebhookによる連携

参考記事
夏休みの工作におススメ！自動水やり機（Obniz＋電動灯油ポンプ）の製作
猫好きエンジニアのIoT obnizを使った「遠隔ご飯あげマシーン」
obnizで家の猫にリモートで餌をあげてみた

<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <script src="https://obniz.io/js/jquery-3.2.1.min.js"></script>
  <script src="https://unpkg.com/[email protected]/obniz.js" crossorigin="anonymous"></script>
</head>
<body>

<div id="obniz-debug"></div>
<h1>waterPump switch</h1>
<button id="on">ON</button>
<button id="off">OFF</button>

<script>
  //obnizの端末の番号をあらかじめ登録
var obniz = new Obniz("****-****");
  obniz.onconnect = async function () {
    //waterPumpと名前をつけるobniz.wired()には"LED"と表記するパーツライブラリ上にwaterPump用の引数はない
    var waterPump = obniz.wired("LED", {anode:0, cathode:1});
    //webhookでアクセス時に、waterPumpが動くようにここに記述
      waterPump.on();
    //5sほど動かして、停止させる。ポンプを動かす時間を調整して、水の調整を行う。
      await obniz.wait(5000);
      waterPump.off();

    //obnizクラウドエディターの確認用のボタン
    $("#on").on("click", async function(){
      waterPump.on();
      await obniz.wait(5000);
      waterPump.off();
    });

    $("#off").on("click",function(){
      waterPump.off();
    });
  };

  obniz.onclose = async function(){
    $("#on").off("click");
    $("#off").off("click"); 
  };

</script>
</body>
</html>

まとまっていませんが、以上の記事を読むと作成することができます。
nodeによるbot-sdkでも同様の処理はできるのですが、dialogflowが便利すぎてdialogflowを使用しています。

感想と宣伝とポエムとか
Elfちゃん

　今回は自分一人でアプリケーションを作ったわけではなく、チャットボットのキャラクタデザインを(みなともずく)氏ご協力の元、アプリを制作しました。もずく氏には、とてもお世話になりました
漠然とした要件定義からできた我が子のようなキャラクター(Elfちゃん)、可愛いのでいいねください。
IP(知的財産権)コンテンツを取り扱うとどういうことを考えねばならないか、アプリ制作を通じて大変さを垣間見た気がします（「SHIROBAKO」でだいたい予習しました）
今回は去年に比べ技術的なプログラミングを学んだというよりは、他者とのコラボレーションを、どのようにして進めていくかを学べた気がします。
学習コンテンツとしてのアプリコンテストは作り方や設計図がないほぼ白紙状態から始まって、徐々に不確実性を減らしていき完成させるというプロセスがあり、エンジニアリングのいい勉強になったと感じました。これからも自分のプロダクト(自分の作りたいものを自由に作る)を頑張っていきたい。