おえかきアプリ

大学の課題で、「画像共有サイト」を PHP で作れという課題が出た。主な要求事項は以下の通り

  • ユーザー作成・ログイン機能
  • 画像の投稿機能
  • 画像に対してコメントできる機能

普通にPHPで作るのはやだなーと思ったので、サーバーはPHPJSONを返すだけにし、クライアントをReactで組んでAjaxAPIサーバーにリクエストを投げて頑張ることにした。

このときのソース: github.com

できたもの: ユーザーは「しりとり」が成立するように画像を投稿しなければならない。例えば「りんご」の画像のつぎは例えば「ごりら」の画像を投稿しなければならない。ユーザーは画像とともに、それが何の絵かのキャプションを(「りんご」)のようにつける。そのキャプションをもとにしりとりが成立するかどうか判定するようにした。 f:id:Kumassy:20180227224109p:plain

サーバーには Bullet PHP を使用した。PATHをネストさせてかけるので、RESTっぽいエンドポイントを簡単に作ることができた。 bulletphp.com

クライアントには React、Redux を使用した。React も Redux もはじめて使ったので、学習コストが結構かかって消耗してしまった。さらに、ダイガクのサーバー上にデプロイするときにも消耗した。デプロイ先は http://example.com/deploy-cite/user-kumassy のようにbasenameつきの場所にデプロイする必要があった。React で Action Creators からリダイレクトするために react-router-redux を使っていた。これは現在いる path を示す history オブジェクトを Store に保存するライブラリだが、path に basename がついているとリダイレクトしたときに basename がつかず、うまくいかなかった。このあたりはググっても情報がすくなく、解決するのに苦労した。

素直にPHPでHTMLを出力する実装をしなかったせいでいろいろ消耗し、ソースコードはのべ 8000 行にもなってしまった。こんなことしなければよかった。

せっかくなので一般的公開できるように、APIサーバー関係のコードを書き直すことにした。

2017年やったこと

春休み

Github のコミット履歴によると、Polymer でライフゲームで遊べるような SPA を作っていたようです。Webフロントエンドの技術に触って遊んでいました。

https://github.com/Kumassy/life-app

春学期

やたら課題が多くてつらい思い出がありました。 ICPCに出るぞ、という気持ちで競技プログラミングをはじめたのはいいですが、モチベーションが続きませんでした。

夏休み

インターンシップにいくつか参加しました。

LINE では「生活を便利にする LINE Bot をつくろう」というテーマのもと、5日間のハッカソン形式で 4 人チームで Bot を作りました。私たちが作ったのは、 「バーチャル Amazon Dash Button」で、Bot に「ビールかってこい」などと話しかけるとAmazonで買ってくれる、という仕組みです。(商品を購入するAPIは公開されていないので、コンセプトのみの実装です)

f:id:Kumassy:20171226231038p:plain

残念ながら優勝はできなかったのですが、準優勝らしく、嬉しかったです。ちなみに、優勝チームの勝因は「プレゼンでいい感じの動画を流したこと」だそうで、あまり納得いきませんでした。インターンシップが終わって1ヶ月も経たないうちに、Amazon公式がバーチャルDash Buttonをしたので私たちが優勝したほうが正解だったのではないでしょうか。授賞式やり直してくれ

ミライナタワーからの景色はサイコーでした f:id:Kumassy:20171226231724j:plain

ステキな修了証をいただきました f:id:Kumassy:20171226231736j:plain

グリーの短期インターンシップにも参加しました。何をするのか当日までわからなかったのですが、「スカッとする爽快なゲーム」を作ることになりました。エンジニア、プランナー、デザイナー 3 人 1 組のチーム戦です。スケジュールが非常にタイトだったのですが、かすかに覚えている Unity の知識を絞り出し、なんとか完成させることができました。いろいろな出会いがあり、参加してよかったです。あと、デザイナーってすごい、という気持ちになりました。

秋学期

体調を崩すなどして進捗があまり生まれませんでした。 が、授業で Web アプリを作る機会があり、自主的に React + Redux を使ってみたため、Webフロントエンドの知識が増えました。簡単な API サーバーも組みました。サーバーサイドレンダリングとか Web Push あたりも実装して、冬休みや春休みでこの Web アプリを一般公開したいなぁと思っています。

総括

ハッカソン力をたかめ、いろいろなハッカソンに参加してみたいなぁという気持ちになった1年でした。それと、TwitterでもSlideShareでもなんでもいいから、とにかくアウトプットしていくのが大事だと思いました。2018年も体調に気をつけて、頑張っていきましょう。

コントローラー作成

ということで、グルコスを自作していきたいと思います。まず最初の課題はブースター(コントローラー)の作成です。

ブースターはジョイスティックの上にボタンがついた構造をしています。やや特殊な構造をしているので作るのが難しいところですが、3Dプリンタを使えばなんとかなるんじゃないでしょうか…。ちょっとサーベイしたところ、今のところブースターを自作した人はいなさそうです。

ハードウェアを作るのは後回しにして、ひとまずアプリで使えるようなコントローラーのソフトウェアのほうを作っていきましょう。

Android 端末の制御

Android 端末を制御する方法はいくつか考えられるます。

Monkeyrunner

Monkeyrunner は AndroidSDK についているテストツールです。Python スクリプトからデバイスを制御することができます。私も試しにやってみたのですが、うまくいきませんでした…。

android monkeyrunner 使ってみた
http://qiita.com/kasaharu/items/6ffef847eba88dee65e0

ADB

inputsendevent を使うことでタッチイベントを送信することができます。sendevent ではタッチイベントを直接Androidに送信するものです。

input のほうは以下のようにすれば OK です。

adb shell input tap 100 700

やってみたところ、タップはできたのですが遅延が大きくダメでした。

おつぎは sendevent です。このあたりを参考に次のようなコードを書きました。

Android】プログラムから端末をタッチする【ADB】 http://dev.classmethod.jp/smartphone/adb-attach-device/

while : ; do
  read line
  echo "send"
  ~/Library/Android/sdk/platform-tools/adb shell sendevent /dev/input/event1 3 57 1 # id
  ~/Library/Android/sdk/platform-tools/adb shell sendevent /dev/input/event1 3 48 10
  ~/Library/Android/sdk/platform-tools/adb shell sendevent /dev/input/event1 3 58 29
  ~/Library/Android/sdk/platform-tools/adb shell sendevent /dev/input/event1 3 53 500 # x
  ~/Library/Android/sdk/platform-tools/adb shell sendevent /dev/input/event1 3 54 900 # y
  ~/Library/Android/sdk/platform-tools/adb shell sendevent /dev/input/event1 0 0 0
  ~/Library/Android/sdk/platform-tools/adb shell sendevent /dev/input/event1 3 57 4294967295
  ~/Library/Android/sdk/platform-tools/adb shell sendevent /dev/input/event1 0 0 0
  echo "sent"
done

エンターを押すたびにタッチしてくれそうなコードですが、やはりエンターを押してからタッチされるまでの遅延が大きく、音ゲーは無理そうです。

先行事例

サーベイしたところ、同じようなことをやっている人をみつけました。

ラブライブ!スクフェス専用コントローラーを作ってみた【Androidhttp://www.nicovideo.jp/watch/sm26438988

おそらく、コントローラーをUSBマウスとして認識されているようです。USB HID デバイスを書くのはわりとかんたんらしい1ので、この方針でやっていきましょう。

音ゲーを作りたくなった

最近、音ゲーをはじめました。テスト勉強の息抜き、という名目で、カフェの近くにあったゲーセンにあった某音ゲーを試しにやってみたところ、とても面白くハマってしまいました。結果的にテスト週間はカフェとゲーセンを無限に往復しながら過ごすことになりました。

音ゲー、グルーヴコースターを雑に紹介します

グルーヴコースター

f:id:Kumassy:20170811233753p:plain

グルーヴコースターとは、誰でもカンタンに音楽にノリながら演奏できる音楽体験アトラクションです!
公式サイトから)

アバターがジェットコースターのようなコース上を移動していくのですが、アバターがターゲット(◯とか)に重なった瞬間にボタンを操作していきます。音ゲーなので基本的にはタイミングよくボタンを押せばよいのですが、以下の点が面白いんじゃないかなぁと思います。

操作がかんたん

典型的な音ゲーはたくさんのボタンを押すことになるので、指をどのように動かすか(運指)を練習する必要があるかと思いますが、グルーヴコースター(以下グルコス)では基本的には練習する必要がありません1。なぜかというと、ボタンが2つしかないからです。なので、本当にボタンをタイミングよく押すだけのかんたん操作になっています。実際にはボタンを長押ししたり、傾けたり、ぐるぐる回したり、両手で同時に押したりするような操作も必要になってきますが。

音楽にノリながら演奏できる

これは、譜面が曲に忠実なことが多いということです。譜面がボーカルやギター、ドラムなどに基いているので、曲を演奏している感を得られます。また、譜面が曲に忠実なので、グルコスがはじめての人でも曲を聴き込んでいればそこそこの得点をとれるんじゃないかと思います。

アドリブ

グルコスでは、アドリブという見えないターゲットがあります。アドリブはコース上に現れないので厄介な存在かと思われるかもしれませんが、コースの形状や曲の合いの手からある程度は推測することができます。適当にたたいたときにアドリブが取れると楽しいです。

個人的には某アイドル曲や某ボカロPの曲がたくさん収録されていて嬉しいところです。他にもいろいろなアニソンや東方アレンジ曲があります。

つくる

そんなグルコスがお家でできたらハッピーです。実はグルコスはアーケード版の他にアプリ版があり、アプリ版でもアーケード版の収録曲の一部が遊べるのですが、スマホだと操作が難しいのであまり捗りません。もし仮にグルコスのオリジナル譜面を作ることができたら、自分の好きな曲で無限に遊べてさらにハッピーです。

ロードマップ

  1. スマホ用のコントローラを作成
  2. グルコスっぽいアプリをつくる
  3. 譜面エディタをつくる

  1. さすがに高難易度だと考える必要が出てきます

ICPC 2017 国内予選に参加した

今更ですが、一応ブログに残しておきます。

大学のクラスメイトにICPCに出ないか?と誘われたので、今年の春学期前半は競プロの勉強をしていました。

やったこと

俗に言う蟻本はなんとなく持ってはいたのですが、競プロはじめましての私のにはちょっと難しかったので、プログラミングコンテスト攻略のためのアルゴリズムとデータ構造 を買って一通りやりました。それから、土曜日の夜に開催される ABC には参加するようにしました。

本番

なかなかチームメイトと予定が合わず、ICPC予選の練習は本番の直前になってしまいました。役割分担も特に決めず、解法を思いついた人がコーディングする、程度になってしまいました。

本番では A と C を私がバグらせながら(本当はしょーもない、ファイルの提出ミス!w)通し、もう1人がBをバグらせながら(プログラムの結果のリダイレクト先を間違えてソースコードを紛失しながら)通してました。 私は A と C をやったあと D を考えていたのですが、結局最後までよくわからず、結果的に 3 完、136位でした。。。

f:id:Kumassy:20170811232716p:plain

反省

今回は大学の講義的に Java で書くことを強いられたので辛かったです。来年もし参加することがあれば C++ で書きたいところです。それから、DP をスッと書けるようになりたいです。今回の予選通過を分けた D 問題はどうも DP を応用して解くようです。DP ができるかできないかに大きなギャップがあると思うので、そのあたりの勉強を進めていければと思います。

これから

サークル内で競プロをやろう!みたいなムーブメントがあるので、時間が許せば参加していきたいと思っています。でもAIの勉強や、せっかくかった自転車でいろいろ旅をしてみたいと思っているのであまり時間がとれないかも…

つよい SoundFlower をみつけた

Mac で動画収録や動画配信をするときには、パソコンの音の出力先を仮想オーディオドライバにして、ミキサーで適当にまぜて収録する、ということがやられます。仮想オーディオドライバでは Soundflower がよく使われていて、私も使っていたのですが、チャンネルが 2 つだとちょっと足りなくなりそうだったので、代わりを探していました。

適当に Github をみていたら、 Soundflower-2x4 を見つけました。オリジナルの Soundflower は Soundflower(2ch) と Soundflower(64ch) の 2 つの仮想デバイスを使えますが、Soundflower-2x4 では Soundflower 1 から Soundflower 4 の 4 つの仮想デバイスを使えます。

f:id:Kumassy:20170617210304p:plain

インストールするときには先に Soundflower のアンインストールをしましょう 🍣
Github: kawauso/Soundflower-2x4