2019-06-25

【ハックツハッカソン】アロ杯参加レポート

2019/06/22~23にかけて行われたハッカソンに、プロ研の後輩2人と一緒に参加しました。
チーム名はそれぞれの名前の頭文字をとって、「KKK」としました。

ハックツハッカソン・アロ杯参加レポート

ハックツハッカソン・アロ杯参加レポート

ハッカソン概要

cup.hackz.team

株式会社ハックツが主催するハッカソンイベント。私たちは、ITサービスを作りたい学生の環境的問題解決に取り組んでおり、地方学生にはプロダクトをアウトプットする機会やイベントが圧倒的に少ないと感じています。私たちも、みなさんと面白くてワクワクするようなサービスを作りたくてウズウズしています。皆さんも、プログラムを書きたい！面白いサービスを作りたい！そう思っているんではないでしょうか？ https://cup.hackz.team/

テーマ

タスク管理アプリ

スケジュール

6/22（土）

14:30 受付開始
14:45 オープニング
15:00 開発スタート
19:30 1日目終了

泊まる人は宿泊場所へ移動

6/23（日）

10:00 集合
10:15 開発
17:00 発表
18:30 集計
18:40 表彰, クロージング
19:00 懇親会
20:30 解散

Day2やっていくぞ！#ハックツハッカソン pic.twitter.com/gibVpab1h3
— Hack'z Inc. (@Hackz_team) June 23, 2019

開発物

ProChart

プログラミングをなにから学べばいいかわからないという問題を、他の人が学んできた歩みを参考にすることで解決するプロダクト

ターゲット

プロ研メンバー

使い方

成果の登録を行う場合

ユーザー登録・ログイン
トップから、「今日の成果」を選択
日付・コメントと一緒に、習得した言語とその要素を選択する。（例： C言語のprintfなど）

他人の学習状況を参考にする場合

どんな言語・要素を学ぼうかな
- 「みんなのタスク」から、人気のある言語を知る（人数順でソート）
みんな最近何をしてるのかな
- 「みんなの成果」から、他の人の成果を知る
printfわからないよ〜、誰かに聞きたい！
- 対象の要素詳細（C言語のprintfのページ）の、クリアした人一覧の中から聞きに行く。
- 掲示板機能を使い、質問する。

機能

ユーザー関連
- 新規登録
- ログイン
  - ログイン情報の保持
- ログアウト
- 管理者権限
言語・要素関連
- 言語・要素登録
- 要素詳細内での掲示板
- 編集・削除（管理者のみ）
- 自分が過去に達成したかわかる
日々の成果関連
- 成果登録
- 削除（当人・管理者のみ）

仕様技術

Ruby on Rails
Heroku

工夫したところ

「君たちはきっと強くなれる」我が相棒がプロ研一回生に向けた名言（相棒：たなっちさんのプロフィール - はてな）
一つのフォーム（成果登録）で複数のモデルに保存できる
新規の要素を成果登録のフォームからも追加できる
言語・要素をそれぞれ人数順にソート

結果 & 感想

入賞ならず！
タスク管理というテーマから少しずれてしまったのが原因かもしれません。ただ、自分たちが心から欲しいと思えるものを開発することができたのでよかったです。
今回は、一週間前からrailsを学び始めた後輩二人のサポートが主な役割でした。少し厳しめにしたつもりでしたが、よくがんばってくれました(^^)

とても楽しく充実したハッカソンでした。

今後の発展

プロ研のメンバーに「使いたい！」と思われるようなところまで完成度を高めていくのが目標です。
頂いたフィードバックとして、「クリアしたという判断が、自己評価というのはどうだろうか」というものがありました。その後メンバーで話し合い、テスト機能をつけるのもありかもね〜なんて話をしています（実装するとは言ってない）。「今日の成果」登録時に全言語・全要素を出力しているので、折りたたみ等を駆使すればコンパクトにできるかなと思います。

何はともあれ粘れば、いいプロダクトに成長しそうです。

ソースコード

github.com

プレゼンの様子

youtu.be

2019-06-21

【Alexa】3カ月のハッカソンが終わりました

Alexa イベントハッカソン

3/27~6/21にかけて、ハッカソンに参加してきました！
その参加レポートです。

Alexa Hack for students in Kyushu 2019 参加レポート

Alexa Hack for students in Kyushu 2019 参加レポート

ハッカソンの概要

Alexa Hack for Students in Kyushu 2019 とはエンジニア学生同士がチームを組み、スポンサー企業と一緒に企業の課題を解決するAlexaスキルを開発する、企業課題解決型のAlexaスキルコンテストです。

https://fusic.co.jp/doings/245

テーマ

学生がお金の管理に使いたくなるAlexaスキル

ふくおかフィナンシャルグループ（以下、FFG）のチームになり、上記のテーマを与えられました。
多くの学生に利用されている地銀ならではのお題でした。

開発物

一言でいうと

引き落とし日の残高不足という問題を、事前に注意してくれることで防ぐAlexaスキル

スライド

以下、実際にプレゼンで使用したスライドです。

結果

AmazonJapan賞を頂きました。
また、賞品としてAlexaEchoDot第三世代を頂きました。

ユースケースを絞っていた
方言やひそひそ声などがあり、完成度が高かった
プレゼンがおもしろかった

などの多くのありがたい声を頂きました。本当にうれしかったです。

どんなことがあったか

企画

学生がお金管理に使いたくなるAlexaスキルというテーマだったこともあり、とても自由度が高かったです。
メンバー内で学生ならではのお金管理に関わる問題を議論した結果、引き落とし日の残高不足という問題に注目することにしました。

Alexaスキルハンズオン

Alexaスキル開発のハンズオンが行われ、そこで基礎的な知識を身に着けることができました。初めてのAlexaスキル開発だったため、とてもありがたかったです。ここでは、じゃんけんスキル・くにっこ分けゲーム（ジャルジャルのネタ）をつくりました。

AlexaでAPIを叩く

口座情報を取得するために、福岡銀行が提供しているオープンAPIを利用する必要がありました。そのため、まずはAlexaで簡単なAPIを叩けるようになろうと考え、ライブドア天気APIで試してみることにしました。が、想定以上にハマり（別記事参照 Alexaでライブドア天気APIを叩く際に注意すること - rkdora's Blog）、それでもなんとか叩けるようになると今度は銀行のAPIがOAuth2.0という種類のものでこれまた苦労しました。。。
最終的に、難しい認証のところは省略したので、今後実用化する際に一番大変なところはこの部分だと思います。

Alexaの通知機能を断念する

本来はAlexaの通知機能を使うつもりでした。
通知機能があれば、スキルを起動するきっかけになるためです。
手動（コマンドを実行）すると通知するところまではいったのですが、

通知の自動化
通知文が定型文
通知機能の情報が少ない等の理由により、断念することになりました。

Alexaのリマインダー機能に手を出す

通知機能を断念した後、リマインダー機能なるものを見つけました。 Alexaのほうから定期的に話しかけることができるものです。
ただ、

まったくできなかった（未対応なのでは？）
ユーザーがいないときに勝手にしゃべられても困る（言い訳）という理由により、リマインダー機能も断念することにしました。

完成度を高める

いままで述べてきた通り、通知機能を実装することができなかったので私たちは今ある機能（残高不足注意・残高照会・取引照会）の完成度を高めることにしました。
方言やひそひそ声を喋らせたり、対応する言葉のパターンを増やしたり、プレゼン用のビデオを編集したり。。。

感想

長かった～。3カ月という長いハッカソンでしたが、実際に開発した期間はギュッと詰めると2週間ぐらいになると思います（大半が沼にハマっていた）。多くの作業を自分が行っていたことで、正直に言うとブーたれていたこともありました。が、普通に過ごしていても関わることのできない企業さんと一緒にハッカソンを駆け抜けることができたのはとてもいい経験になりました。この機会を提供していただいた、Fusic、FFGをはじめとしたスポンサーの方々、本当にありがとうございました。

f:id:rkdora:20190621232321j:plain — 調子が悪く、デモで動かなかった我がAlexa

2019-06-16

SchemeでWebアプリを開発できるらしい #2

Scheme

前回の続き

rkdora.hatenablog.com

Add1
- URL直打ち
  - 動き
  - コード
- フォーム付き
  - 動き
  - コード
まとめ

Add1

URL直打ち

動き

/add1/数字で、数字+1する。 f:id:rkdora:20190616160305p:plain

コード

(get "/add1/:n"
  (lambda (req)
    (let ((n (params req 'n)))
      (format "~a + 1 = ~a" n (add1 (string->number n))))))

フォーム付き

動き

フォームに入力した数字に＋１する。

f:id:rkdora:20190616164136p:plain

f:id:rkdora:20190616164151p:plain

コード

(get "/add1"
  (lambda (req)
    (let ((n (params req 'n)))
      (format "~a + 1 = ~a" n (add1 (string->number n))))))

(get "/f"
  (lambda (req)
    "<form method='get' action='/add1'>
      <input name='n'>
      <input type='submit'>
    </form>"))

まとめ

URLの値は、paramsで取得できる。

2019-06-14

SchemeでWebアプリを開発できるらしい #1

Scheme

準備
コード
動作
感想

準備

raco pkg install https://github.com/dmac/spin.git
詳細は、こちら↓

github.com

コード

#lang racket

(require (planet dmac/spin))

(define header "<h1>Wellcome to my page</h1>")

(define footer "<hr> &copy; ryuto")

(define html
  (lambda (s)
    (format "~a~a~a" header s footer)))

(get "/"
  (lambda (req)
    (html "
      <h2>My name is Ryuto!</h2>
      <a href='/hello'>Hello!</a>
    ")))

(get "/hello"
  (lambda (req)
    (html "
      <h2>Hello!</h2>
      <a href='/'>home</a>
    ")))

(run)

動作

racket index.rktでサーバー起動。
localhost:8000にアクセスすると、、、
f:id:rkdora:20190614173545p:plain

「Hello!」というリンクを踏むと、、、 f:id:rkdora:20190614173629p:plain

おおおおおおおお、たった一つのファイルで。。。

感想

railsみたく、自動生成されるものが無いためとてもコンパクトに開発ができそう。
しかし、規模が大きいものには不向きな気もする。
引き続き遊ぶ。

一応、githubにもあげといた。

github.com

続く

rkdora.hatenablog.com

2019-06-13

Alexaでライブドア天気APIを叩く際に注意すること

Alexa Node.js

AlexaでAPIを叩く練習にライブドア天気APIを使いました。
その際に結構ハマったので書き残しておきます。

ハマったこと
解決策
結論（注意すること）
リファクタリング（？）

ハマったこと

Alexaがライブドアの天気情報を喋ってくれない！

f:id:rkdora:20190613215006p:plain

きちんとログには出ているのに！

f:id:rkdora:20190613215319j:plain

なんで？？？？

    async handle(handlerInput) {
        const url = "http://weather.livedoor.com/forecast/webservice/json/v1?city=400040";
        
        const res = await axios.get(url);
        const items = res.data;
        const speechText = items.description.text;
        console.log("speechText: " + speechText);

解決策

知り合いのエンジニアの方に助けていただきました。ありがとうございますm(__)m
どうやら、改行と「<」「>」が邪魔をしていたそうです！ f:id:rkdora:20190613222158j:plain たしかにある！！そこで、教えていただいたとおりに改行と「<」「>」を削除すると、、、

    async handle(handlerInput) {
        const url = "http://weather.livedoor.com/forecast/webservice/json/v1?city=400040";
        
        const res = await axios.get(url);
        const items = res.data;
        var speechText = items.description.text.replace(/\r?\n/g, '');
        speechText = speechText.replace(/</g, '');
        speechText = speechText.replace(/>/g, '');
        
        console.log("speechText: " + speechText);

f:id:rkdora:20190613215747p:plain

おおおお！感動！！！！！

f:id:rkdora:20190613220426j:plain

ログもこのように！！

いやあ、よかった。これにて解決。
ありがとうございました。

結論（注意すること）

Alexaに喋らせる文字列は、改行・「<」・「>」を消す必要あり

リファクタリング（？）

その後、正規表現を少し学び、、、
以下のようにリファクタリングしてみました。
同じ動作をします。ただ、短くなった代わりに若干読みづらくなった気が・・・（焦）ご意見いただければ幸いです。

    async handle(handlerInput) {
        const url = "http://weather.livedoor.com/forecast/webservice/json/v1?city=400040";
        
        const res = await axios.get(url);
        const items = res.data;
        const speechText = items.description.text.replace(/[\r?\n<>]/g, '');
        
        console.log("speechText: " + speechText);

いつか書こう書こうと思ってたら1カ月が過ぎてた・・・・

2019-06-11

コマンドを作ってみた（trash, untrash）

シェルスクリプト

コマンドとは

lsとか、cdとか、catとか、ターミナル上でよく使うもの

OS

Mac
（untrashにて、Linuxと動作の異なるコマンドsedを利用）

前準備

.profileに以下を書く。
export PATH="$HOME/bin:$PATH"
その後、source .profile。
vi ~/bin/コマンド名
プログラムを書いた後、
chmod +x コマンド名

trash

機能

trash ファイルとすると、対象のファイルを.trash/に移動する。
その際、trashを実行した日付をファイル名の先頭につける。

動き

f:id:rkdora:20190611140346p:plain

コード

#!/bin/sh

d=`date +%F`
trash=$HOME/.trash
mkdir -p $trash
mv $1 $trash/$d-$1
touch $trash/$d-$1

untrash

機能

一番最近trashをしたファイルを現在のディレクトリに移動させる。その際、ファイル名から日付を削除する。

動き

f:id:rkdora:20190611141351p:plain

コード

pwd=`pwd`
cd $HOME/.trash/
tra=`ls -rt1 | tail -1`
org=`echo $tra | sed -E 's/^.{11}//'`
mv $tra $pwd/$org

Macでは、sedに-Eをつける必要があるらしい。
^は先頭から
.は全ての文字
^.{11}で、先頭から11文字
s/^.{11}//で、先頭から11文字を消す（先頭から11文字は日付）

=をくっつけるのよく忘れる

2019-06-05

【SPAJAM2019福岡予選】俺の愛犬がこんなに病んでいるわけがない

イベントハッカソンプロ研 Monaca

2019年6月1日、2日にLINEFukuokaで行われたSPAJAM2019福岡予選。DRWTH（プロ研のメンバー5名）で参加した。

SPAJAM2019福岡予選参加レポート

SPAJAM2019福岡予選参加レポート

f:id:rkdora:20190605113044j:plain

SPAJAMとは

SPAJAM とは「温泉でハッカソン」を合言葉に、スキルを向上するための競技と交流の場を提供する国内最高峰のハッカソンです。全国6地域7会場で開催する予選において、最優秀賞を受賞した各1チーム、優秀賞を受賞したチームの中から実行委員会によって選出される最大2チームが本選に出場することができます。本選・表彰式は名称のとおりSPA（温泉地）において1泊2日（開発時間は24 時間）で開催します。大会概要｜ SPAJAM2019公式サイト – 温泉でハッカソン

SPAJAM2019福岡予選のテーマ

ペット

開発したアプリ

俺の愛犬がこんなに病んでいるわけがない

飼い主の外出時間に応じて、ペットから「ねえ」「いまどこ？」「いつ帰るの？」などの病んでいるメッセージが飛んでくるアプリ。
留守番時にかかるペットのストレスを表現することで普段のペットとの生活を見直すきっかけとなり、より良い関係へと導く。

アプリの動き

クラウドデータベースと照合し、ユーザーの新規登録・ログイン（自動ログイン有り）を行う
定期的に現在の位置情報を取得する
登録されている家の位置情報と、現在の位置情報を比較し家の中か外かを判定する
家の外の場合、病んでるメッセージを送る

利用したサービス

Monaca
Monaca - HTML5ハイブリッドアプリ開発プラットフォーム
ニフクラ mobile backend
mBaaSでサーバー開発不要！ | ニフクラ mobile backend

感想

アプリ開発難しい。
本来はpush通知機能も搭載する予定だったが、バックグラウンドで位置情報を取得するパッケージとの相性が悪かったため泣く泣く搭載を見送った。これがネイティブとの違いだと思う。実際、他の参加者のアプリとのレベルの差を感じた。今後、アプリ開発をもっと本格化するならネイティブは避けて通れないだろう。そういえば最近、swiftUIやReact Nativeが盛り上がってるらしい。ちょっとのぞいてみようかな。

ハックツハッカソン・アロ杯 参加レポート

ハッカソン概要

テーマ

スケジュール

6/22（土）

6/23（日）

開発物

ProChart

ターゲット

使い方

成果の登録を行う場合

他人の学習状況を参考にする場合

機能

仕様技術

工夫したところ

結果 & 感想

今後の発展

プレゼンの様子

Alexa Hack for students in Kyushu 2019 参加レポート

ハッカソンの概要

テーマ

学生がお金の管理に使いたくなるAlexaスキル

開発物

一言でいうと

スライド

結果

どんなことがあったか

企画

Alexaスキルハンズオン

AlexaでAPIを叩く

Alexaの通知機能を断念する

Alexaのリマインダー機能に手を出す

完成度を高める

感想

Add1

URL直打ち

動き

コード

フォーム付き

動き

コード

まとめ

準備

コード

動作

感想

ハマったこと

解決策

結論（注意すること）

リファクタリング（？）

コマンドとは

OS

前準備

trash

機能

動き

コード

untrash

機能

動き

コード

SPAJAM2019福岡予選参加レポート

SPAJAMとは

SPAJAM2019福岡予選のテーマ

ペット

開発したアプリ

俺の愛犬がこんなに病んでいるわけがない

アプリの動き

利用したサービス

感想

ハックツハッカソン・アロ杯参加レポート