Web × IoT メイカーズチャレンジ 2017の前橋ハッカソンに参加しました

Monaca Education担当の岡本です。

総務省が『IoT 機器等の電波利用システムの適正利用のための ICT 人材育成事業』として実施している『Web × IoT メイカーズチャレンジ 2017』という学生や若手エンジニアを対象としたIoT デバイス開発のスキルアップ講習&ハッカソンがあることをご存じでしょうか?

私も先月知ったばかりなのですが、IoTについて学ぶために前橋ハッカソンに参加してきました。

Web × IoT メイカーズチャレンジ 2017の概要

学生や若手エンジニアを対象とした IoT デバイス開発のスキルアップ講習&ハッカソンとして今年は仙台・前橋・横須賀・鳥取・沖縄の全国5箇所で開催中です。前橋会場は昨年の12月に無料の予備講習「はじめての JavaScript 1DAY 講習会 for Web × IoT メイカーズチャレンジ」が開催されたり、今年の1月にはハンズオン講習会というものも開催されていました。

ハンズオン講習会に参加した方々が引き続きハッカソンに参加する流れなのですが私は

【追加募集!】Web×IoT メイカーズチャレンジ in 前橋 ハッカソン

という追加募集枠を使ってハッカソンから参加しました。

なお、前橋会場ではCHIRIMEN for Raspberry Pi 3という、RaspberryPi3 に接続した電子パーツをWebの技術で直接制御できるIoTプロトタイピング環境を使用しました。 Chirimenは『W3C Browsers and Robotics Community Group』と『CHIRIMEN Open Hardware』が標準化検討を進めている「Web GPIO API」や「Web I2C API」を使用することでブラウザから直接GPIOやI2Cを叩いてセンサーデバイスなどを利用できます。

0日目

IoT プログラミング環境 CHIRIMEN for Raspberry Pi 3 が届く

申し込みをしたら翌営業日にはハンズオン講習会で使われたIoTプログラミング環境一式が送られてきました。

ハッカソンの前日に最低限、GPIOだけサンプルを動かしてから当日に望むことができました。

中央情報経理専門学校と群馬大学の混成チームに途中参加

追加募集メンバーとして、中央情報経理専門学校生と群馬大学生の混成チームにアサインされました。そして事前にSlackというチャットサービスに招待され、企画の紹介などをうけました。

サカイ「招き猫に音を認識させて反応するプログラムを作りたいんです!」
オカモト「なるほど!」
サカイ「しかし、今試しているセンサーがうまく動かないのです!」
オカモト「そのままハッカソンの日を迎えるのは危険ですね、秋葉原でセンサーを買い込んでおきます」
サカイ「お願いします」

ハッカソン初日

八王子にある自宅を早朝に出て、八王子駅から新前橋駅まで八高線を経由して向かい、そこから徒歩で会場入り。

経費節約のため普通列車でのんびり向かいましたが、家から会場まで約4時間近く掛かりました。
まぁ、有料特急を使っても八王子からだと30分ぐらいしか早くならいのですけどね。

メンバー

  • オカモト:IT企業の会社員です。開発寄りの何でも屋。
  • ニシムラ:専門学校の先生です。デザイン寄りの何でも屋。
  • シミズ:専門学校の1年生です。プログラミングは最近始めました。
  • ワシオ:専門学校の1年生です。プログラミングは最近始めました。
  • サカイ:群馬大学・社会情報学部の生徒です。プログラミングは最近始めました。
  • 豊岡招き猫:高崎市豊岡町の伝統工芸品。紙でできており、また中は空洞です。

今回はプログラミング経験の浅い若者が多いチームでした。
大人組に関してもIoTは未経験。

今回のハッカソンで最終的にIoT作品が完成して発表もできたのはメンターの皆様のおかげです。

マインドマップでアイディア整理

私も途中参加だったので状況や今後のスケジュールを整理するためにマインドマップを書きました。

ノートパソコンの画面だと3人ぐらいが限界ですが、サブモニターを使ってデュアルディスプレイ表示(ミラーリング)すれば大人数でも画面がちゃんと見られるので、便利です。

サブモニターはChirimen用に借りていたモニターを活用させて貰いました。

とりあえず、しゃぶしゃぶ

チームビルディングを兼ねて昼からしゃぶしゃぶ!


※しゃぶ葉にて

マインドマップで大凡のタスクは見えてきたので、肉を食べて開発に備えます。

大人組は買い出し

追加購入すべき物品を求めてダイソーとヤマダ電機に寄りました。
若者組には先に会場に戻っていただき、こういった雑用は大人組が対応することにしました。

買ったもの

  • 自転車用のLEDライト(目玉用)
  • 座布団(招き猫の下に敷く)
  • パーティー用のモール(しっぽの代わり)
  • 小型スピーカー(猫が鳴く)

電子部品屋がなくても100均の製品をバラして代替できることがあります。今回は自転車のLEDを取り外して招き猫の目玉に使いました。

センサー動く!

大人組が買い出しに行っている間に若者3人がセンサーを動かすことに成功していました。

オカモト「すごいな!」
若者達「メンターが色々助けてくれました!」

私が買ってきたセンサーはアナログデータを扱うもののため、デジタル信号に変換するための装置などが必要だったようです。その辺のアドバイスをメンターの方が助けてくれたとのこと。

IoTの学習ではメンターの存在が大きいなと思いました。

19時終了・そして夜の開発へ

初日のハッカソンは19時で終わりました。

私は近くに宿をとっていたので作品にMonacaによるアプリやクラウドデータベースといった要素を含められるよう、ホテルでサンプルアプリの開発を行いました。一応、開発はサンプルまでに留めて作品への実装は若者達に託すことにしました。

2日目

朝9時ぐらいに集まって昨日の続きを実行。
お昼ご飯は食べに行く時間が惜しかったので、お菓子とか朝食の残りのパンで凌いで開発を続行しました。

今にして思えば、懇親会の開始時間が思ったより遅かったのでお昼はちゃんと食べておくべきでした。

モバイルアプリ化はMonacaとニフクラで瞬殺

今回は猫の音センサーのボリュームが閾値を超えるたびにニフクラのクラウドデータベース(ニフティクラウド mobile backend)に記録するようにしました。また、その値を参照するモバイルアプリをMonacaでサクッと開発。Monacaにはプロジェクト共有機能があるのでハッカソンイベントでは便利です。

猫に装置を内蔵できないトラブルが発生

バッテリーとラズパイとセンサー・その他ケーブルやブレッドボードを、猫の中にそのまま格納するとバランスが取れないことが判明。

急遽、私の私物ケースを加工して収納容器を作成することに。ドリルで穴を空けたりノコギリで蓋の一部をカットして、オリジナルのIoTケースを作成しました。

終了時間ギリギリでトラブルが発生し、それに対して知恵を絞って解決策を考えるのはハッカソンでは良くあることです。

発表準備~審査

経験の浅いメンバーが多かったので、審査の時にそなえて改めてマインドマップを作成。質問されたときにパニックになってしまわないように、自分たちが取り組んだ作品の目的や内容、技術的に工夫した点や苦労したことなどを書き出して頭の中を整理しました。

なお審査はパワーポイントを使ったプレゼンではなく、実機デモを交えた発表でした。

発表時に発生したトラブル一覧

  • スピーカーから音が鳴らない(スピーカーのスイッチがオフになっていた)
  • 座布団の中にケースが収まらない(付け焼き刃だったか)
  • ケースを逆に突っ込んでしまった(きっとパニックになったのでしょう)
  • スピーカーの音が小さくて分かりにくかった(発表用のマイクを近づけて解決)

まとめ

私自身が実作業にあまり関われなかったのが心残りですが、若者達がIoTデバイスの組み立てやセンサープログラミングの経験を積めたのは非常に良かった。

初日の午前中には自信なさげだった若者組が夕方頃には目を輝かせ活き活きと開発していたのは本当に驚いた。顔つきもだいぶ変わって、翌日には審査で楽しそうに発表をしたり懇親会でも積極的に話をしていたのは大変良かったです。

やはりハッカソンによる実践型の開発経験は人を成長させます。

Web × IoT メイカーズチャレンジ、良いイベントです。

岡山情報ビジネス学院の学生達が会社見学でアシアルを訪問

Monaca Education担当の岡本です。

岡山情報ビジネス学院の学生達が会社見学でアシアルに来てくれました。

スーツの若者が大挙して押し寄せたため、普段TシャツとGパンが制服のアシアル社員一同はドキドキでした。

会社見学の模様

アシアル社員からは4名の社員が会社紹介や仕事・働き方の話を、岡山情報ビジネス学院からは3チームの方に制作中のアプリに関するお話をして頂きました。

アシアル社員の話

  • 取締役 塚田 亮一(東京餃子通信編集長)によるアシアルの紹介
  • Onsen UI開発リーダー 又川尚樹によるOnsen UIの話
  • 開発チーム Nikola Cvetkovski:Monaca(海外インターン生)による海外と日本の話
  • Education担当 岡本雄樹(ジャスティス岡本)による働き方の話

岡山情報ビジネス学院の発表

  • 写真を活用したSNSアプリ
  • iBeaconを使ったアプリ
  • スケジュール管理アプリ

※ コンテスト出品前のため詳細は非公開。

発表の模様(アシアル)


まずは取締役の塚田からアシアルやB2Bの仕事、システム業界についてお話。塚田は餃子のテレビ番組に良く出演していますが、元々は起業やVC勤務など多彩な経験を持ちMonacaが始まるタイミングでCMOとして入社した人です。


続いて、今年で入社二年目になる又川からOnsen UIの話。Onsen UIは世界中で利用者が伸びているオープンソースのプロダクトですが、彼は1年目からOnsen UIの開発リーダーを担当しているエースです。


海外からインターンでアシアルに来ているニコラによる、日本と海外のお話。


トリは昨年ハッカソンで優勝した話をドヤ顔で語る岡本の話。
※詳細が気になる方は優勝チームのメンバー書いたブログをご参照下さい 南島原のハッカソンで優勝して長崎新聞のセンターを取ったよー

発表の模様(岡山情報ビジネス学院)


写真を活用したSNSアプリ

iBeaconを使ったアプリ

スケジュール管理アプリ

Monacaチームも学生の活動を知るキッカケになりました

Monacaを開発しているメンバーは学生がどんな感じでアプリ制作に取り組んでいるかを直接知る機会がないので、社内で発表頂けたのは良かったなと感じました。

学生の成長に寄与していることを励みにMonacaの開発チームはこれからも頑張ってくれると思います、たぶん。

プログラミング教育・ICTセミナー in 長野に出展しました

6月3日(土)、長野県教育委員会×電算×みんなのコードの三者が開催した『プログラミング教育・ICTセミナー in 長野』にMonacaも出展してまいりました。

学校の先生向けにプログラミングの模擬授業を行ったり

ブース展示や

座談会がありました

長野は広い県なので生達が一同に集まるのは中々大変そうですが、大勢の先生が参加されていました。
また、色々な質問を頂いたり、中学校の先生から技術の授業で使ってみたいという声を頂きました。

Monacaは引き続き先生方と協力してプログラミング教育に取り組んでいきたいと思います。

旅日記(長野編)

今回の会場は塩尻市のため、自宅(八王子)から『特急スーパーあずさ』で向かいました。
素晴らしい景色が広がっていました。

そして、帰りに塩尻駅の食事処で『山賊そば』を頂きました。

長野県はお蕎麦が美味しいです。
実は今回のイベントの一週間前にもWordBench長野で登壇するために長野市で蕎麦を食べています。
また、その時にお土産で長芋を買ったのですが、こちらも美味しく頂いております。

情報処理学会第79回全国大会ナビゲーション & スタンプラリーアプリでMonacaを採用いただきました

情報処理学会の全国大会に出展していたところ、名古屋大学の河口信夫教授から衝撃的なことを教えて頂きました。

情報処理学会第79回全国大会ナビゲーション & スタンプラリーアプリはMonacaで開発しました」

アプリのスクリーンショット

驚きました、イベントに出展したらイベントアプリが自社製品で開発されていたのですから…

Monacaが情報処理学会の全国大会でも活用されるとは大変名誉なことだと感じております。

アプリの内容

  • ナビ(屋外だけでなく屋内も対応)
  • 音声ナビゲーション
  • スタンプラリー
  • グルメ情報
  • 全国大会のプログラム情報
  • データ収集機能

懇親会の余興タイムでアプリの紹介がありました。

BLEによる測位を活用して屋内でもナビを行えるようにしているそうです。また、スタンプラリーの仕組みはスタンプの代わりにQRコードを活用してるそうです。

他にも大会プログラムを確認できたり近隣の食事処を確認できるとのことです。

オープンストリートマップによる屋内ナビ

オープンストリートマップのデータを充実させて実現されたとのことです。屋内情報や歩行者が通れる道の情報を追加しているそうです。

私も実際にインストールして動かしてみたのですが表示の部分でUIフレームワークのOnsen UIも使われているようです。

情報処理学会の全国大会に来場されている方はぜひ、試してみて下さい。

情報処理学会第79回全国大会ナビゲーション & スタンプラリーアプリ

名古屋大学 河口研究室のウェブサイト

横浜商科大学のアプリ制作発表会レポート

こんにちは、Monacaエバンジェリストの生形です。
私が非常勤講師を担当しておりました横浜商科大学 商学部 経営情報学科にて、アプリ制作発表会が行われました。

経営情報学科では、「情報システムとプログラミング」という科目でプログラミングを学び、「ITとデザイン」という科目でアプリの企画やデザインを学ぶことができます。
1年を通して両科目を履修した学生の皆さんが、自分たちで企画したアプリを開発し、そのプレゼンテーションを行いました。

皆さん非常に企画力が高く、おもしろいアイデアがたくさん発表されました。
傾向としては友達とコミュニケーションするアプリや自分たちの学生生活を豊かにするためのアプリが多かったようです。

最終発表を終えて、以下のような感想のコメントを頂きました。

  • 授業で習った部分でのプログラミングであったはずですが、なかなかどうして上手くいかずに困りました。動いた時には非常に達成感がありました。アプリ開発は難しいですね・・・
  • 授業時間外で何度も集まり話し合いながら作り、ある程度のところまで完成したので、このまま終わらせずApp Storeに出すまでしたいです。
  • 一言でいうとすごく楽しかったです!!途中いろいろ立て込んで苦しくなったこともありましたが、メンバーに恵まれていることもあり、乗り越えることができました。
  • 自分たちが考えた物を実現させるとなるととんでもない時間と労力がいることをしって最初はすごくいやでしたが徐々に出来上がっていくのを見るのはとても感慨深いものがありました。
  • アプリを作るという大変さを学んだ。ゲームしかりSNSしかり、どれにしてもたくさんの失敗や成功を繰り返して、やっと今のアプリがあるのかなと思います。
  • 内容はとても難しい内容だった。しかし、グループワークやプログラミングは普段の講義では、なかなか行えるものではなく、非常に貴重な体験をすることができた。講義以外でも集まったり、普段の私生活でアプリのヒントを探したり、この期を通してこの講義に没頭して取り組むことができた。
  • これからの人生で役に立ちそうなことをたくさん知ることが出来ました。プログラミングも実際に作ってみることで雰囲気がつかめた気がします。
  • ここまで達成感のある講義は今まで受けたことがありませんでした。
    かなり大変な思いはしましたが、終わってみるとやり遂げられて良かったなと思うプロジェクトでした。
  • クイズアプリを考えたとき、自分の中では「ちょっとふざけすぎかなぁ」という気持ちがあったのですが、予想外に好評だったのは正直驚きでした。同時に、ちょっとふざけているようなものを作ってもいいんだということに、安心感を覚えました。これからも、あまりふざけすぎない程度に、自分が作りたいと思ったものを作り続けていきたいと思いました。

プログラミングは難しく大変だと思いながらも、自分たちの考えを形にできたことに喜びや達成感を覚えたようです。
学生のうちにこのような経験ができるというのは、とても尊いことだと思います。
コンピュータサイエンス系以外の大学にプログラミング教育を導入した、最高の成功事例であると言えるでしょう。

日本電子専門学校の卒業制作展でMonacaによる作品が展示されました

こんにちは、Monacaエバンジェリストの生形です。
先月、日本電子専門学校 Webデザイン科の卒業・進級制作展が開催されました。
弊社アシアルも、僭越ながら優秀作品の選定に参加させて頂きました。

展示されていた作品はどれも完成度が非常に高く、驚きの連続でした。
そのなかでも、Monacaを使って作られた3作品を抜粋して以下にご紹介します。

備品管理アプリ「カシダス」

学科内の備品であるPCや書籍などに貼付されたQRコードを読み込むことで、
備品の貸与手続きをスムーズに行えるようにするアプリだそうです。
シンプルで使い勝手の良さそうなUIになっていて、利用者のことがよく考えられていると感じました。


プロジェクトチーム情報共有アプリ「PUCHI」

イベント企画などの活動を自主的に行う学生グループ、「プロジェクトチーム」を支援するためのアプリです。
イベントへの参加登録や開催カレンダー表示など、チーム内での情報共有が主な機能です。
実際にチームのリーダーに困っていることをヒアリングして、課題を解決するための工夫を凝らしたそうです。


BLEを使ったグルメアプリ「meeat!」

飲食店内に設置されたiBeaconを検知し、近くにある店舗情報を手軽に受取ることができるアプリです。
またユーザー同士がチェックインしたお店の情報を交換する、すれちがい機能も搭載されています。
iBeacon/Bluetoothといったデバイスの機能を効果的に活用していて、企画力と技術力の高さがうかがえました。



優秀賞は、突出した技術力を評価して「meeat!」を制作したWebデザイン科2年の石井花奈さん、内山凌さんに決定しました。
以下は弊社塚田から表彰状を差し上げている様子です。

今回の卒業制作展では、Webデザインのスキルを持つ学生がMonacaを利用することで、プロ顔負けのアプリを作れるということが見事に実証されていました。
学生の皆さんの手から素晴らしい作品が産み出されたことを非常に嬉しく思います。卒業後のご活躍にも期待しています。

東京テクニカルカレッジに出張講義に伺いました

こんにちは、Monacaエバンジェリストの生形です。
1月24日に、専門学校東京テクニカルカレッジに出張講義に行って参りました。

東京テクニカルカレッジでは、RJP(リアルジョブプロジェクト)と呼ばれるカリキュラムを実施されています。
RJPは各学科の学生がそれぞれの専門分野を活かして一つのプロジェクトを遂行するもので、学舎の1Fにはその成果物であるカフェが併設されています。
外観は建築科・インテリア科が、カフェで提供するメニューは環境テクノロジー科・バイオテクノロジー科が、
そして注文システムやWebサイト等は情報処理科・Web動画クリエイター科が担当しています。
実際の仕事と同じように、自分の専門領域以外の人とコミュニケーションを取りながらプロジェクトを進めることで、
人と話し合う力や自ら考え行動する力を身に着けられるのだそうです。

RJP紹介サイト

授業の様子

今年のRJPではアプリ開発を行うということで、情報処理科の1,2年生合同でMonacaの授業を実施しました。
書籍「Monacaで学ぶはじめてのプログラミング」を使ってアプリ開発の基本は一通り学習済みということでしたので、
より発展的な技術を習得して頂くためにOnsen UIとクラウド連携(ニフティクラウド mobile backend)の利用方法について解説しました。


 
普段からプログラミングに慣れ親しんでいる情報処理科の学生だけあって、授業はとてもスムーズに進みました。
今回学んだことを活用して、クラウド連携機能のあるゲームアプリ等を開発される予定だそうです。

授業資料について

今回実施した「Onsen UI」と「クラウド連携(ニフティクラウド mobile backend)」の授業資料は、
Monaca講義用スライド第2弾 に含まれています。
ご興味のある方はお気軽にお問い合わせください。

人間総合科学大学に出張講義に伺いました

こんにちは、Monacaエバンジェリストの生形です。
1月21日に、人間総合科学大学に出張講義に行って参りました。
人間総合科学大学の人間科学部 健康栄養学科では、管理栄養士の養成に取り組んでおられます。
今回学生の皆さんが卒業制作として管理栄養士の国家試験対策アプリを制作されるということで、
試験問題アプリの作り方をレクチャーしに伺いました。

なお、事前に「Monacaで学ぶはじめてのプログラミング」の第12章までは、動画教材を利用して自己学習して頂いておりました。
動画教材はMonacaの利用を表明して下さっている教育機関様にご提供しております。ご興味のある方はお問い合わせください。

授業の様子

多少時間はかかったものの、ソースコードを1から書き始めて、無事に全員アプリを完成させることができました!
今回作ったものは単一選択式のシンプルな試験問題アプリでしたが、
今後は複数選択式の問題を増やしたり、タイムアタック機能をつけたりと、より本格的なアプリに発展させていきたいという夢を語ってくださいました。

所感

今回の人間総合科学大学のように、情報系の教育機関以外でも、学生の皆さんの夢を実現するためにMonacaが採用されるケースが増えています。
もはやモバイルアプリは生活の一部になっていて、ITエンジニアやそれを目指す学生の方以外でも、手段のひとつとしてアプリ開発を行っています。
プログラミングは専門職の人だけのものというイメージが払拭され、誰でも当たり前のようにアプリ開発をする時代が到来しつつあることを実感しました。

資料ダウンロード

試験問題アプリの資料およびソースコードは以下に公開しておりますのでご自由にお使い下さい。

スライド資料

ソースコード

https://github.com/kanakoubukata/monaca_quiz_app

日本最大級の子供向けITイベント『IT津梁まつり2017』に行ってきました

MonacaEducation担当の岡本です。
沖縄県で毎年開催されているIT津梁まつりに今年も参加してきました。

IT津梁まつりとは

沖縄県で毎年行われている子供向けのIT体験イベントです。このイベントが面白いのは出展者の属性が2パターンあって、片方は高校生や大学生・専門学生といった若者達、もう片方は沖縄県内のIT企業になっていることです。

また、参加者側の年齢層が非常に若くて幼稚園生や小学生ぐらいの子供たちも大勢参加しています。

高校生や大学・専門学生によるブース出展では日頃の成果を発表したり子供向けの体験コーナーを用意してITの楽しさを伝える展示が行われます。また、企業ブースでは最新のIT製品に触れたりプログラミングの体験学習コーナーなどが用意されました。さらに『ETロボコンWRO大会』や各種セミナーも併せて開催されました。

詳しくは公式ウェブサイトをご参照ください。

IT津梁まつり2017|Official Site

Monacaで作った作品を展示してくださった学校の紹介

今年は『宮古工業高等学校』と『八重山商工高等学校』がMonacaで作ったアプリ作品を展示しておりました。また、『名桜大学』もMonacaのブロック崩しアプリを改造したものを子供向けの体験として展示しておりました。

宮古工業高等学校

八重山商工高等学校

企業の展示についても少し紹介します

会場入口の方で出張スタジオが出来ていてトライキャスターでUstream配信体験が行われていました。

アイソトープス株式会社-IT津梁祭りへの出店

またドローンも飛んでました。

IT津梁まつり2017に関するニュース情報

ヤフーニュースなどにニュースが出ていたのでリンクしておきます。

ドローンや最新技術紹介 豊見城でIT津梁まつり

IT津梁まつり 八商工(情報技術科)「観光アプリ」展示

沖縄の未来が楽しみです

デジタルネイティブという言葉があるくらいですから今どきの子供にとってスマホなどのIT製品に触れることは多いと思います。ただ、その仕組みがどうなっているのか?それを作っている人たちはどんな人たちなのか?詳しく知る機会は貴重だと思います。

IT津梁まつりを通じてプログラミングをはじめとしたIT技術の中身や、IT技術の習得や活用に取り組んでいる学生、IT企業で働く大人たちの姿を小さいころから見た子供たちが、将来どんな活躍をするのか今から楽しみです。

沖縄県立那覇商業高等学校にてIT出前講座を実施

MonacaEducation担当の岡本です

沖縄県立那覇商業高等学校にてIT出前講座を実施しました。

授業風景

沖縄県立那覇商業高等学校には情報処理科が2クラスあり、情報処理や簿記の資格を取得できるカリキュラムになっています。国家資格である基本情報技術者やITパスポートの取得もサポートしているそうです。

今回受講してくれた方々も既にプログラミングの授業を受けたことがありif分などは理解している方々でしたが、アプリ開発の講座を通じて更にプログラミングへの興味が高まったようです。ITパスポートで勉強した用語が出てきて勉強に役立った声や、家で続きをやるという声もあがり、非常に教え甲斐がありました。