こたつにっき

Unityで遊びつつメモとか書きます

UnityでHoloLens用Twiiterアプリを作った話

こんにちは。今の名前はこTaktです。

 

最近研究室で新しいおもちゃを触っています。

f:id:kotatu99:20170712182902j:plain

そう、巷で話題(?)のHoloLens(ホロレンズ)です。

1台33万円らしいです。震える。

 

作ったもの

Twitterアプリを作ってみました。 

f:id:kotatu99:20170712214450g:plain

 

HoloLensって?

HoloLens何ぞやって人は電脳コイルの「電脳眼鏡」を想像してもらえれば大体あんな感じです。

 

え?

電脳コイルを知らない...?

 

じゃあ見ておいて下さい。最近だとソードアートオンラインの映画版でも似たような技術が出て来てます。そっちでもまあ結構です。

 

画像1枚で説明するとこんな感じです。

f:id:kotatu99:20170712183815j:plain

Microsoft がホログラフィック テクノロジーに命を吹き込む | HoloLens

 

要は眼鏡(ヘッドギアと言った方が適切かも...)を被ると視界にウィンドウやらアプリやら3Dモデルやらが表示され、それを手のジェスチャや音声で操作するブツです。

 

作るもの

僕はTwitterが大好きです。HoloLensを被ったらみんなのツイートがふわ〜〜〜と

浮き上がって見えたらなんか楽しそうじゃないですか?未来ですよね。

というわけで

 

現実世界とリンクしたTwitterタイムライン

 

作っていきます。

導入

まずHoloLens開発はおなじみのUnityでやります。

導入記事は結構多いので楽。でも僕はMacのBootCampで開発したのでエミュレーターが使えないのは少し不便でした。

HoloLens のアプリ開発はじめました - 凹みTips

UnityによるHoloLens開発環境&エミュレータ設定について - Qiita

 

TwitterAPIを叩く

TwitterAPIから現在地周辺のツイートを取得したい。

バッチリそのままのライブラリを開発してる方が居たので借りました。

qiita.com

 

ドキュメント読んで

検索にgeocodeを指定します。これで現在地周辺のツイートを検索できる。

The Search API — Twitter Developers

 

ちなみに現在地についてですが、

僕はてっきりHoloLensにGPSがついてると思ってました...。

無いんですね。というわけでWifiのアクセスポイントから現在地取ることにします。

GoogleMapsGeolocationAPIを使用。仕方ないですが精度は低いです。大体近くの区役所とかになります。

The Google Maps Geolocation API  |  Google Maps Geolocation API  |  Google Developers

クライアントを作る

ここからはいつものUnityプログラミング。

uGUIで取得したTweetをパネルとして表示。 

f:id:kotatu99:20170712195904p:plain

ちょっと見辛いですかね、下に地図の画像を表示して周囲にパネルを浮かばせてます。

視点変えるとこんな感じ。

f:id:kotatu99:20170712214010p:plain

よし!実機ビルドだ実機ビルド!

 

UWPの闇〜OAuth認証

 

どうやらTwitterOAuth認証の部分で引っかかってるらしい。でもエディター上では動く...じゃあ.NETのOAuth部分か...?

と調べていくと原因がコレでした。(気づくのに3日はかかった...)

stackoverflow.com

まずTwitterAPIを使うのにPCで鍵を暗号化しますが(ここら辺よく知らないです勉強します)

 Unityでは暗号化をSystem.Security.Cryptographyの関数でやってます。

using System.Security.Cryptography;

...

HMACSHA1 hmacsha1 = new HMACSHA1(Encoding.ASCII.GetBytes(signatureKey));
byte[] signatureBytes = hmacsha1.ComputeHash(Encoding.ASCII.GetBytes(signatureData));

が、HoloLensやWindowsPhoneで使われてる.NET core 4.5では使えないらしい。

代わりに Windows.Security.Cryptographyでやれとの事。

(´・ω・`)知らんがな

using System.Runtime.InteropServices.WindowsRuntime;
using Windows.Security.Cryptography;
using Windows.Security.Cryptography.Core;
using Windows.Storage.Streams; 

...

var objMacProv = MacAlgorithmProvider.OpenAlgorithm("HMAC_SHA1");
var messageBytes = Encoding.UTF8.GetBytes(signatureData);
var keyBytes = Encoding.UTF8.GetBytes(signatureKey);
CryptographicKey hmacKey = objMacProv.CreateKey(keyBytes.AsBuffer());
IBuffer buffHMAC = CryptographicEngine.Sign(hmacKey, messageBytes.AsBuffer());

 に書き換え。

環境毎に挙動を変えるのはUnityでは

#if UNITY_EDITOR
 //editorでの挙動

#else if UNITY_UWP

 //UWPでの挙動

#end if

 と書きますが、何故かこれがうまくいかない。という事で

Unityで書き出し(UWP部分コメントアウト)

VisualStudioでUWP部分を戻す

書き出し

 

これでやっとビルドできました。

 

疲れた。。。。。。。。。。。。。

Windowsアプリと同じ感じでビルドできるようになればいいんですが。

 

できました

初HoloLensアプリ「atSpot」完成!

f:id:kotatu99:20170712214450g:plain

機能

  • 自分の周囲にある 位置情報付きツイート(I'm at ~)を空間上に表示します
  • 下部に表示される地図と現在位置が連動してます(リアルタイムでは無い)
  • 隠れた人気スポットが見つかるかも?

youtu.be

 

実際に試してみたところ、ラーメン屋率高し。

ランチ検索に良いかもしれません。

f:id:kotatu99:20170712213758j:plain

f:id:kotatu99:20170712213713j:plain

 (テザリングしたら何故か現在地が札幌になった)

横浜だと麻婆豆腐のお店とか出て来ました。腹が減る。

 

後どうでも良いですがTwitterのテレビCMのイメージ映像と似てると思う。

 

f:id:kotatu99:20170712220832j:plain

f:id:kotatu99:20170712220854p:plain

イメージ映像に現実が追いつくのも近いのでは?Twitterは僕にお金くれても良いですよ

まとめ

今後はタップしたらルート検索とか画像出したりとかでしょうか?

やりたいですね。

 

触ってアプリ開発してとHoloLensの感想ですが 、

未来感

がすごい。未来に生きてますわ。

 

HoloLensとアプリ共に研究室のオープンキャンパスで展示して高校生とかに被せてました。皆さん反応が良くて楽しかったです。

ソードアートオンラインのアレじゃないですか!」とか言われました。

大体あってる。

 

これからもアプリ開発はして行きたいですが今のエミュレーターとか動かせない環境だとスピード下がるのでどうにかしたい所。

後はUWPですね…ここら辺はUnity2017で.NETのバージョンが変わるとかなんとからしいのでそこも要チェックかもしれません。

 

ではまた!

ゲーム業界就活持ち物リスト(プランナー編)

5ヶ月ほどブログを更新してなかった言い訳の記事です。

 

タイトルの通りゲーム会社に就活へ行ってました。ゲーム作りが好きなので。

無事内定頂けたのであまり情報のないゲーム業界就活情報を

過去の僕のような何も知らんけどゲーム会社行きてえな〜〜〜みたいに思っている人向けに書こうと思います。

 

が、

 

「ゲーム開発論」とか「面白さとは」みたいな事は書きません。てか書けません。

偉そうな事書いたら後に見返して物凄い恥ずかしさに見舞われそうなのでね、

先回りして書かないことにします。数年後の僕は感謝してほしい。

 

ちなみにプランナー編と書いてありますがプログラマー編もデザイナー編も書く予定は有りません。詐欺。

 

続きを読む

Unity 1週間ゲームジャム「積む」に参加しました

お久しぶりです。

 

気がつけば前回の更新から5ヶ月が経ち広告が出て来てしまいました。

アクセスして下さった方には見難く申し訳ありません。

言い訳はし出したらキリがないのでしません。色々あるよね。

 

本題!

ゲームジャムって?

皆さん「ゲームジャム」はご存知ですか?

知らない人はこれ読んで下さい。

 

kotatu99.hateblo.jp

 

短期間でゲームをガーッ!と作るイベントです。

僕が以前参加したGGJ(グローバルゲームジャム)は2泊3日でしたが、

今回参加したのはUnityroomさんで今年4月から毎月行われている

 

「Unity 1週間ゲームジャム」

です。

 

その名の通りUnityを使ったゲームを1週間で仕上げてこいや!って話です。

大体ゲームジャムは「テーマ」や「お題」に沿ってゲームを作りますが、

今回の6月は「積む」でした(5月は「転がる」4月は「跳ねる」)

 

1週間も期間あるんだし余裕じゃん

 

そんな事を考えていた時期が僕にもありました。

これから語るのは僕の1週間の軌跡です。参考にはならないです。

 

興味ない人はゲームだけでもしていって下さい。後生なので

f:id:kotatu99:20170627162857p:plain

積み将棋 | ゲーム投稿サイト unityroom - Unityのゲームをアップロードして公開しよう

1日目

 

ぼーっとする

充電期間です

 

2日目:アイデア出し

お題の「積む」から連想するものを書き出します。

皆さんは「積む」と聞いて何を思い浮かべますか?

 

積み木、積み重ねる、降り積もる、積みゲー、ツムツム、人生詰んだ・・・オワタ・・・、妻夫木聡

 

色々ありますよね。

個人的なんですがここで「お題と違くないか?」って思って消しちゃうのは勿体無いと思います。

むしろ全然違うのを組み合わせると面白くなったりしますからね。

 

妻夫木聡は消していいか

 

イデア考えてレインボーシックスしてたら2日目が終わっちゃいました。

 

3日目:アイデア決定

そろそろTwitterの参加者の皆さんがプロトタイプを上げ始め焦り出します。

いい加減僕も開発しなければ

 

 

よし

 

 

 

テーマは

 

 

 

「積み将棋」だ!!!!!!!!!!! 

 

 

最近20何連勝やら何やら何かと将棋がホットですからね。

将棋で行きましょう。

 

ん?「積み将棋」じゃなくて「詰み将棋」だろ?

 

そう思いますよね。僕が作るのは将棋を積み上げる新しい「詰み将棋」なのです。

僕が詰み将棋が出来ないので代替として作る訳ではないです。多分。

 

参考のために将棋を使ったパズルを調べたらドンピシャ「しょうぎパズル」ってのがあったのですがメチャムズで1問20分ぐらいかかりました。

最短手13手って難し過ぎないですか。

www.i-tsu-tsu.co.jp

 

まあそれは置いておいて、将棋を使ったパズルは中々面白そうですね。

イケる気がします。

 

イデア出しは僕の場合ホワイトボードかメモ帳に書いてるんですが、

ホワイトボードは消しちゃったので代わりに秘蔵ネタ帳を貼っておきます。

本邦初公開です。

 

f:id:kotatu99:20170627161203j:plain

 

f:id:kotatu99:20170627161207j:plain

 

 字、きたねえ〜〜〜

 

以外の感想浮かばないですよね。僕もです。何の参考にもならなくてすみません。

大体ゲーム案が浮かんだのでUnityEditorを開こう。

ん?将棋の盤面ってどう管理するんだ?

 

 

〜終了〜

  

4日目:プロトタイプ開発

ここからはゲームサイクルの完成を目標に頑張ります。

今回の場合

 

将棋の駒を配置する→積み上げていく→目的地に着く

 

が1サイクルとなるので、これをどうにか作るのが目標。

ここが長引くとモチベが下がるのでガーッ!と行きましょう。

 

ただ、今回僕は2Dのジャンルで言えばパズルゲームを作る訳ですが

僕は盤面制御ってものをしたことがなかったんですよね。

逆にした事がなかったから挑戦しようとも思ったのですが。

 

盤面制御ってのは例えばオセロでこういう盤面を

f:id:kotatu99:20170627163425p:plain(この盤面は実現可能なのか?)

配列にすると(0:空き 1:白 2:黒)

0  2  1  0

0  1  1  0

1  2  1  0

2  0  0  0

 

と、なってこの配列を操作しながらゲームを作るみたいなやつです。

 

今回は目的地、コマ、配置可能マス、お邪魔マスなどが必要。

テキストファイルで管理する方法もあるらしいですが、配列だけで今回はやりました。

 

Unity2Dの事をググりながら色々やって何とかゲームサイクルが完成

 

 

5日目:ステージを増やす

この時点ではコマの種類が「金」「銀」「歩」「桂馬」

だったので「香車」を追加。

飛車角王がいないのは万能過ぎてあまりパズルに向かないから…角は入れても良かったかも知れない。

 

6日目:燃え尽き

燃え尽きてました。

他の参加者のゲーム進捗を眺めながらちょくちょく同じ「積み将棋」をテーマに作っている人がいる事を知る。

みんな頑張れ。

 

7日目:ゲームアップロード

操作説明をやっつけで作り、ロゴも30秒で作成(Keynoteで文字に枠つけただけ)

アップロード!

f:id:kotatu99:20170627162857p:plain

 ↑クリックでプレイ

 

僕の1週間ゲームジャムは無事終了です。

投稿した時点で38作品ぐらい他にありましたね。

 

 

感想

やっぱりゲームジャムは楽しい!

 

これに尽きますね。

 

色々ゲームジャムがある中で Unity 1週間ゲームジャム、

とてもバランスがいいと個人的に思います。

 

バランスがいいって何だよ山本稔かよって話ですが、

まず初心者でも開発が短期間なのでクオリティがちょっとアレでも大丈夫!(自分はこの枠)

上級者はランキングTOP3が設定されてるので上位を目指せる!

 

と、誰が参加しても楽しめるんですね。

毎月開催なのもあってUnityやゲーム開発に興味ある人にめっちゃいいと思います。

運営さん頑張って!

 

「積み将棋ゲームジャム」

はい、ここからはUnity 1週間ゲームジャムの裏で密かに行われていた

「積み将棋ゲームジャム」のレビューをしていこうと思います。

 

ネタが被ってもゲームは被らない。人間の想像力は無限大ですね。

 

エントリーNo.1「積み将棋じゃないやつ」by kuma360° 

積み将棋じゃないやつ | ゲーム投稿サイト unityroom - Unityのゲームをアップロードして公開しよう

 

いきなり「じゃない」とタイトルについてますが出場していただきます。

こちらのゲームは基本は将棋ですが、相手の駒を「取る」のではなく

相手の駒の上に「積む」事で吸収して行き、

積み上げた駒の分移動範囲が増えるというシステム。

ちょっと文章では伝わり難いと思うので実際のゲーム画面をどうぞ。

f:id:kotatu99:20170627171223p:plain

 

はい。「角角銀」が「歩」を吸収し「角角銀歩」へ進化(エボリューション)する場面です。

 

最初に角を取って駒の名前が「角角」になった所で吹き出しそうになりました。

しかも同じの取ったから移動範囲変わらないっていう。

 

エクストリーム将棋枠ですね。

 

エントリーNo.2「積将棋」by びっぐにゃん

積将棋 | ゲーム投稿サイト unityroom - Unityのゲームをアップロードして公開しよう

 

まさかの詰み将棋×落ちモノゲーです。

f:id:kotatu99:20170627172024p:plain

 

落ちてくる駒を回転させ、詰みにするという意外と将棋としては本格(?)派なので

将棋の勉強にもなると思います。

 

登場するイラストはびっぐにゃんさんの自作でしょうか。

 

エントリーNo.3「積み将棋」by あれん(絵の修行中)

積み将棋 | ゲーム投稿サイト unityroom - Unityのゲームをアップロードして公開しよう

 

f:id:kotatu99:20170627172514p:plain

 

待望の物理エンジン枠です。

将棋のコマを崩さないように積み上げて行きます。

ステージ毎に出てくる妨害が結構シビアなので全12ステージ熱くなれます。

 

昔やった将棋崩しとはシステムが真逆ですが何故か懐かしい気持ちになりました…

僕だけですかね。

UIやタイトル画面が凝ってて見習いたい所。

 

エントリーNo.4「積み将棋」by こたkt

積み将棋 | ゲーム投稿サイト unityroom - Unityのゲームをアップロードして公開しよう

僕のです。

f:id:kotatu99:20170627173418p:plain

 

多分パズルゲーム枠です。

下が手駒、赤丸の部分に駒を置いて行き、黄色のマスへ駒を置けたらクリアー

詰み将棋できない人もこれならできるよ!多分

 

 

そんな感じ〜〜〜

もちろん積み将棋以外のゲームがまだまだ150以上投稿されてるので

是非みんな遊んでね!良いUnityライフを!

Unity 1週間ゲームジャム | ゲーム投稿サイト unityroom - Unityのゲームをアップロードして公開しよう

Unityでシミュレーションっぽいものを作りたい #2

皆さんこんばんは。

このブログでこんなに更新ペースが早いのは前代未聞ですね。

暇なんです。

 

さて、シミュレーションゲームの続きです。

前回はユニットを移動させる所まででした。

kotatu99.hateblo.jp

 

お次は

作りたいもの

  • 占領エリア

を作っていこうと思います。エリアにユニットが入るとゲージがギューンと伸びてパァッ!となる奴です。

伝わってるか不安なので出来上がったものがこちらとなります。

これを作ります。

f:id:kotatu99:20170130220131g:plain

実装

 エリアの設定はまず、SphereColliderつけたオブジェクトに入ってきた(OnTriggerEnter)ゲームオブジェクトが「team1」か「team2」のタグを持ってればそれぞれteam1配列とteam2配列に追加します。これが占領エリアとなります。

 エリアから出る(OntriggerExit)と、配列から消去。これでエリア内にいる各チームのユニット一覧が完成。以下参考。

teratail.com

 

 次に、占領ゲージを実装します。こいつが曲者・・・条件分岐でグダグダやってました。まず、ゲージの条件は以下。

  1. ユニット数の多いチームのゲージが上昇
  2. ユニットが同数の場合ゲージはストップ
  3. ユニット数が逆転した時、相手のゲージを減らし、中立状態にしてから自軍が占領
  4. 占領途中でユニットがいなくなった場合元の状態へ復元

ゲージのUIはuGUIのスライダーを利用。ゲージの操作はコルーチンでやっています。

また、エリアがビクンビクンしてますが、これはParticleSystemでやっています。

↓こんな感じのテクスチャを貼り付けて、

f:id:kotatu99:20170130220656p:plain

Size over Lifetimeでビクンビクン。

f:id:kotatu99:20170130220629p:plain

色の変更はスクリプトからStartColorを変更しています。

中立→灰色(Color.gray)

team1→シアン(Color.cyan)

team2→マゼンタ(Color.magenta)

 

ソースコードはこちら。

OccupyController2.cs · GitHub

 "2"なのはブログ書いてる途中で色々書き直したためです。

 

本来ならここでソースコードの解説をしたいんですが、

正直なんでこれで動いてるのかよく分かっていない

そもそもコードが汚すぎるので誰か直してください。

ので、とりあえず置いておくだけにします。

コメントにわかり次第書き足していくと思いますが…。

 メソッドの流れだけ一応しておくと、ユニットの出入りがあるとAreaOccupy()が呼び出されて、それによってゲージの上下がされます。そこからコルーチンOccupyかDeOccupyを起動します。

 

完成

まだまだ改善の余地ありですが、一応実装したいものは実装できました。

f:id:kotatu99:20170130214557g:plain

 

課題

  • 占領途中でユニットがいなくなった場合元の状態へ復元←これ出来てないブログ書いてたらできるようになりました
  • コードが汚い
  • そもそも何がどうなってるのかよく分かってない
  • エリアの占領の演出とか欲しい

それと、現状のユニット操作システムだと、1体の操作はまあいいんですが、複数になると混乱しまくるのでそっちも直したい所。

 

 

↓今回作ったもの

Unity WebGL Player | StrategyTest2

方向キー WASDキー : カメラ移動

Q E キー : カメラズームイン・アウト

クリック : 選択

選択後目的地クリック : 移動

Unityでシミュレーションっぽいものを作りたい #1

あけましておめでとうございます。

新年の挨拶が遅くなってしまい申し訳在りません。

 

もう年明けから1月が経ちそうですが、実は私

 

特に何もしてません。

 

はい。

 

巷ではGGJ2017とか開催されたりなんだりで皆さん忙しそうでしたね。

GGJとはレッドブルをガブ飲みしながら徹夜で三日二晩ゲームを作り続ける地獄のイベントです。(個人の感想です)

僕も去年参加しちゃったりなんだりしてました。

kotatu99.hateblo.jp

 僕は寝袋で寝ました。

なんだかんだで TwitterでGGJ実況を見てたら行きたくなって来たので来年は行きたいです。

 

前置きが長くてすみません。

 

そんな訳でたまには僕もアウトプットしないと、このまま家でミイラになっている所を発見されてしまうのでちょこちょこ作っていたものを置いておきます。

 

作りたいもの

 

リアルタイムシミュレーションゲームでよくある

  • ユニットクリック→目的地クリックでの移動

これを作ってみたい!

  

実装

まずユニット選択はEventSystemでGameObjectを選択します。

参考になるブログがあったので簡単でした。

kotatu99.hateblo.jp

いやー参考になるブログだなあ

テラシュールブログの次に参考になるわー

 

 

上の記事通りにマウスオーバーで色変え、クリックでまた別の色へ変更。

f:id:kotatu99:20170123230945g:plain

 

選択はできたので移動させます。移動はNavMeshを利用。

AIキャラクターのTargetにクリックした場所を設定します。

gametukurikata.com

 

今回ちょっと戸惑ったのがNavMeshでの飛び降り

f:id:kotatu99:20170123230231p:plain

これできるんか?と思ったらバッチリその機能ありました。

Navigationの OffMeshLinks から設定できるんですね。初めて知りました。

f:id:kotatu99:20170123230155p:plain

飛び降りる高さを設定すると自動で飛び降りポイントを作ってくれます。

なんか絵面が気持ち悪い

 

ただ、OffMesh移動中は”ギュン”って感じで挙動が妙に速くなるので対策が必要です。重力に引かれて落ちたりしてくれないです。

そこはテラシュールブログ様に頼りましょう。いつもお世話になってます!!!

tsubakit1.hateblo.jphttp://blog.hatena.ne.jp/kotatu99/kotatu99.hateblo.jp/edit?entry=10328749687209302406#preview

 

でも今回は面倒だったので実装してないです。すいません。じきにやります。

 

これで当初の目的は一通りできたんですが、シミュレーションゲームって、

f:id:kotatu99:20170123231412p:plain

こういう回り込みをどっちにするかで敵の裏をかいたりするのが醍醐味ですよね?

僕がSLGで一番好きなのはここ!!!これを実装するには目的地一個じゃ足りない!!!

 

という訳で、目的地を3つ保持できるようにしました。

ここは実際のゲームに実装するとしたら何個でも選択できるようにした方がいいんですかね?まあゲームデザインの事は置いておきます。

 

保持は配列を作って目的地に着いたら次にずらしてるだけです。

 

 

gistb9f9185d167fbcda428627639df3806d

 

ソースコードはこんな感じでRayを飛ばして当たったところにTarget用のGameObjectを移動。Meshを表示させます。

いちいちGameObject生成とかやってられませんからね。

 

それをAIが持つ目的地の配列に追加し、配列0番目を直近のターゲット(目的地)として指定します。

後は目的地に着いたら(次の目的地がある場合)配列の次の場所をターゲットとして指定するようにすれば完了!

 

完成

f:id:kotatu99:20170123233557g:plain

以上を組み合わせてこんな感じ

OffMeshの飛び降りの挙動も分かりますかね。

これで

  1. 選択
  2. 移動先複数指定
  3. 移動

ができました!やったぜ!

 

課題

  • 目的地間のラインとか表示したい
  • 攻撃とかさせたい
  • OffMeshの挙動

こんなところでしょうか。モデルとアニメーションはアセットストアからのものですが、結構合ってて楽しい。

 

↓一応作ったの動かせます

Unity WebGL Player | StrategyTest

方向キー WASDキー : カメラ移動

Q E キー : カメラズームイン・アウト

クリック : 選択

選択後目的地クリック : 移動

 

ではまた〜

学園祭アプリを作った話

どうもこんにちは。

 

アドベントカレンダーをすっぽかした男、kotatuです。

 

言い訳から始めます。

普通カレンダーの左端に自分の名前があったら、月曜日に担当なんだな?って思いますよね?

f:id:kotatu99:20161212181905p:plain

思わないか。上にSUNって書いてあるし。

 

そんな話は置いておいてすっぽかしすいませんでした

今日は某大学学園祭のためのナビゲーションアプリを作った話を書こうと思います。

新宿祭アプリ-学園祭ナビゲーション

新宿祭アプリ-学園祭ナビゲーション

  • Takuto Kamiura
  • ナビゲーション
  • 無料

 こちらのアプリです。

過ぎた学園祭の残り香を味わいたい方はどうぞ。

いつ公開停止するか分からない部分はご了承ください。

 

はじまり

irorio.jp

今年5月、こんなニュース記事を見かけました。

東京大学の学園祭「五月祭」向けのアプリを東大生が作ったみたいな記事ですね。

アプリはこちら

 

僕「ほーん、面白そうじゃん」

 

僕「東大生に作れるなら僕でも作れるだろ!」

 

 

 

 

東大生に作れるなら僕でも作れるだろ!

 

 

 

酔ってんのかな?

 

よく分からない情報伝達によりアプリ開発の決意をしました。

多分、休日の朝だったので寝ぼけていたんだと思います。

 

アプリ開発のの字も知らない僕はiPhoneアプリを開発するために本を買いに行きました。

まずはお金をかければモチベーションが後からついてくる理論です。

 

絶対に挫折しない iPhoneアプリ開発「超」入門 増補改訂第4版【Swift 2 & iOS 9】完全対応

絶対に挫折しない iPhoneアプリ開発「超」入門 増補改訂第4版【Swift 2 & iOS 9】完全対応

 

絶対に挫折しない超入門と書いてあったのでこの本を買いました。

実際挫折しなかったのでタイトル詐欺ではないと思います。

 

開発

上記の本を使ってアプリ開発のお勉強をしました。

本の【Swift2対応】という表記からも分かるように、アプリはSwiftで作ります。

SwiftはApple開発の結構新しいプログラミング言語です。というわけでアプリはiPhone専用です。Android…?

Swiftも触ったことのない言語だったので構文からお勉強。

 

とりあえずAPI叩いてデータ取ってくるのとかをアプリに使うだろうということでググる

ascii.jp

他はアプリ画面設計のPlaygroundやらもいじりつつ。

f:id:kotatu99:20161212194656p:plain

画面遷移・設計

 

その後、データを置くサーバーの構築を先輩にお願いし一安心。

気づけば夏休みを迎えます。

 

夏休みの僕は走る自動販売機開発に忙しく、全然開発してませんでした。 

kotatu99.hateblo.jp

 

9月の後半、サーバーのAPI構築も安定したので企画データの取り込みやらを作り始めます。

 

が、段々モチベーションが低下してきたので10月はほぼ空白期間です。

大学各部署にアプリ開発してるという挨拶回りはしていたので、自分の首を絞めていた期間がここです。

 

ちなみに、理想のリリーススケジュール(11月19日から学園祭なのでそこがデッドライン)が

  • 8月 開発完了

  • 9月 α版提出

  • 10月 本番データ入力

  • 11月 AppStoreリリース

ですが実際出来たのは

  • 8月 開発完了

  • 8月 α版提出

  • 10月 本番データ入力

  • 11月 AppStoreリリース

これだけでした。

11月が近づくにつれ、流石に焦った僕は写真機能・Twitter投稿・オススメ表示を実装。

 

ついに11月11日、最初のAppStore審査に提出します。

以下が僕の安定版リリースまでの道のりです。下から見てね。

f:id:kotatu99:20161212200608p:plain

これ、僕が最初に提出した11日は金曜日の夜なんですが、これはタイミングとして最悪でした。

なぜかというと、アプリをAppleに提出すると、審査はカリフォルニアで行われます。

カリフォルニアは金曜朝。ここを逃すと審査されるのが月曜日以降になってしまう!

そう、Appleの審査は土日休みなのです。ホワイト企業かよ

 

企業としては羨ましいですが、Appleが月曜の朝イチで審査してくれても僕が確認できるのは月曜夜!開発者としてこれはヤバイもっと余裕持って審査出せよ

調べたら「特急審査」というシステムがあるそうなので、Appleにメール出しました。英語で。Appleにメール出せて僕は嬉しかったです。

文章はほぼこちらに載っていたものそのままです。

モーグ株式会社 – AppleにiOSアプリの緊急審査をしてもらう方法

19日からイベントだからアプリ出したいの!お願いします。

私たちがアプリをリリースできないのはとても悲しいことです。

 とりあえず英語の教科書風な日本語をGoogle翻訳にブチ込んで念じながらメールを送りました。

 

通りました。

f:id:kotatu99:20161212202042p:plain

多分このExpedite Requestって奴ですね。Expediteをググったら「早めます」と出てきたので、そうだと思います。

「このシステムは丁度こんな時の為にあるんだよ!任せろ!でもいつでも適用されるわけじゃないからな!(意訳)」

みたいなことが書いてありました。多分。

 

 みんなは月曜の夜に審査に出そう。

 

そんなメールが来た10分後にレビュー通過!リリースできるぞ〜〜〜!!!

 

 

 

 

 

 

 

 

 

 

 

バグ発見

 

 

 

 

 

 

 

直します。隅々まで確認してから審査出そうね。

f:id:kotatu99:20161212202830p:plain

結局最終版が配信準備完了になったのは学園祭2日前の17日でした。セーフ!

  

アプリ機能

ここで説明しないとこのアプリがどんな物だったのか永遠に闇の中へ葬られるので解説します。

 

まず、アプリを起動すると大きめのセルが出てきます。

f:id:kotatu99:20161213091738g:plain

これは日ごとに更新のオススメ画面。

タップすると企画ページや、芸能人が来る企画の場合は特設ページへ誘導します。

 

f:id:kotatu99:20161213092507g:plain

トップでスワイプすると、企画一覧のカテゴリ毎表示。

企画をタップで詳細が出ます。

f:id:kotatu99:20161213093008p:plain

詳細画面の下部3つのアイコンは左から

写真シェア・お気に入り・ランキング投票

お気に入りした企画は右下MyPage(ハートアイコン)でまとめて見ることができます。

ランキング投票はカテゴリ毎の表示に「ランキング」が有るのでそこへ適用。得票数が多い企画ほど上に出てきます。

 

 写真シェアはこんな感じ。写真撮るとハッシュタグ&企画名付きでTwitter投稿画面が出てきます。

f:id:kotatu99:20161213093937g:plain

投稿すればそのまま写真付きで投稿。

パクリ元参考にした「五月祭アプリ」は写真投稿をアプリ内で完結させていたんですが、なにぶんアプリ開発に携わっているのが僕と先輩の2人だけで不適切画像のチェックが出来そうにないのでTwitterへ流すことにしました。

 

お次はマップ画面。

階ごとの企画を表示します。

f:id:kotatu99:20161213093221g:plain

 

機能としてはこんな所です。

 

反省

アプリDL数は200弱でした。リリースを早くしてもっと宣伝に時間をかけたかったですね。

今回のアプリ開発を説明するのに重要な画像です。

f:id:kotatu99:20161213095339j:plain

このグラフ、なんだと思いますか?

 

 

 

 

 

 

僕のアプリ開発へのやる気です。

f:id:kotatu99:20161213095341j:plain

 

進捗を重ねるとこうなります。

f:id:kotatu99:20161213095343j:plain

 

出だしの燃えてた時期の貯金で何とかリリースにこぎつけました。

「全体の8割を、2割の時間で終わらせる」

 のが仕事を終わらせるコツと、元マイクロソフトプログラマー中島聡さんが著書で述べていますしね。

なぜ、あなたの仕事は終わらないのか スピードは最強の武器である

なぜ、あなたの仕事は終わらないのか スピードは最強の武器である

 

 多分ニュアンスが違う気がしますけど。仕事が終わってよかったです。

 

上には書いてないですが、Swiftが2から3になってエラーが出まくったり、設定変更しろとかAppleに怒られたり(写真撮影にカメラ使う警告を出してなかった)色々書ききれない事もありました。ぶっちゃけアプリ開発はしんどかったですが、

アプリリリースという実績が解除できて嬉しかったです。これからまたAppStoreの登録に必要な100ドルの元を取るために何かアプリ作ろうと思います。

 

 

 

納期無しがいい

 

 

 

でも納期無いと作れない

 

 

 

二律背反

 

 

 

 

〜おわり〜

 

OSCに参加した話

この記事はコーガくんとは無関係アドベントカレンダー7日目の記事です。

 

コーガくんとは何も関係ありません。期待させてしまった方は申し訳ございません。

 

 

今日はOSC2016 TOKYO FALLに参加した体験記でも書こうかと思います。

 

www.ospn.jp

OSCとはオープンソースカンファレンスの略で、オープンソースの展示会です。

 

オープンソースはソースがオープンな事です。

 

 

はじまり

 

始まりはCPAW*1代表の一言でした

 

 

 

OSC出そうお

 

 

Leap motionn*2前買ってたじゃん?アレで何かやってよ

 

 

 

 

僕「マジか…」

 

 

 

いきなり展示しろと言われても出すモノが無いので会議します

 

 

出た案はこちら

 

f:id:kotatu99:20161207235223p:plain

書き出すと

  • 自販機(中身が分かる)
  • トースター
  • トイレットペーパーの残量
  • パンにジャム塗る

後半になるとやけになってますね。

と思いましたが前半もよく分かんないですね。

色々あって最近流行りのIoTで行こうとはなりましたがアイデアの散らかり具合が凄い。

 

 とりあえず「走る自動販売機」に決定。

理由は一番最初に出たからです。

 

開発合宿でモノを作るという事に決まります。

僕は完全にノープランのまま開発合宿へ向かうのでした。

 

闇の開発合宿

1日目

合宿1日目はこちらのワーキングスペースでの作業でした。

www.coworking.tokyo.jp

 

 

僕が着いた時には走る自販機の「走る」部分(キャタピラ)はほとんど出来てたので僕は

 

 

 

いけるやん!

 

 

みたいな気分に到着3秒でなってました。

 

f:id:kotatu99:20161208114914j:plain

 キャタピラ

 

初日はLeap motionから前進後退やらの指示を自販機(に積んでるラズパイ)に送れるようクライアントを作ります。

 

そう

 

Unityでね。

 

f:id:kotatu99:20161208000700p:plain

エセ日の丸弁当みたいなクライアントが出来ました。

ピンクの丸が手の位置です。丸が黄色に入ったら前進、青は後退みたいな指示をWebsocketでラズパイに飛ばします。

 

ちなみに、ラズパイ受け取り部分は自販機プロジェクトのメンバーIくん(後輩)が書いてます。

 

 

 

僕はサーバー書けませんからね。ハハハ

 

 

 

初日はこんなところでした。IoT以外のメンバーはCTFやらプログラミング言語の開発をしてました。僕はさっぱり分からないのでUnityを弄るだけです。

 

ちょっとIoT部分の設計として、API叩いたらJSONで残量とか返ってきたらいいね!とIくんに言うだけ言って僕は寝ました。

 

2日目

お宿のある湯河原に向かいます。

青春ペルソナ4でも始まるかと思いそうな風景でビビりました。

f:id:kotatu99:20161208002514j:plain

撮影:Iwashiさん

 

海へキャイキャイ言いながら向かう若者たちを尻目に山へ向かいます。

f:id:kotatu99:20161208003720j:plain

 

炎天下歩き続けて死ぬかと思いました。バスに乗った方がいいです。

僕たちはCPAW代表(元陸上部)に合わせて歩かされました。僕は死にかけでした。

 

f:id:kotatu99:20161208002908j:plain

 

お宿に到着!完全に温泉旅館のいでたち。

www.onyadomegumi.co.jp

 

突入!(一番右の疲れで有り得ないほどリュックがずり落ちてるのが僕です。)

f:id:kotatu99:20161208003234j:plain

 

温泉&Wifi完備会議室付きで非常に快適でした。

 

f:id:kotatu99:20161208003633j:plain

f:id:kotatu99:20161208003829j:plain

完全に旅館の飯。お酒飲みたい。

 

f:id:kotatu99:20161208004346j:plain

飲みました。

 

 

3日目

気付いたら死屍累々でした。(一番寝相悪いのが代表です。)

f:id:kotatu99:20161208004409j:plain

 

僕はお酒飲んでて全然進捗出てなかったので早起き駆け込みでUI作ります。

気付いたらAPIは出来てました。 

何とか進捗発表までにはUI完成。

f:id:kotatu99:20161208004541j:plain

 ジェスチャー(手を時計回り)でUIを呼び出します。UIには残量・料金・写真を表示。

サーバーからデータを取ってきます(ここIoT)。

f:id:kotatu99:20161208014344p:plain

f:id:kotatu99:20161208004558j:plain

お疲れ様でした。

 

ありがとう湯河原。

f:id:kotatu99:20161208005246j:plain

彼はゆるキャラ?のゆたぽんレッドくんです。手がぶつかると大ダメージを受けるナイーブな一面を持っています。

f:id:kotatu99:20161208005259j:plain

 

そんなこんなで合宿は終了。僕は結構楽しかったのですが周囲では「闇」「闇」という声が多かったです。

この時点でのIoTプロジェクト「走る自動販売機」の完成度は70%といったところ。何せ自販機部分が出来ていないので今は「走るキャタピラ」ですからね。

 

 

完成

はい。完成したものがこちらとなります。

f:id:kotatu99:20161208005942j:plain

安心してください。どこも読み飛ばしてないですよ。

かいつまんで経緯をお話しすると、僕がなけなしの設計知識を駆使し作り上げたスカスカの設計図を

f:id:kotatu99:20161208005830p:plain

空き箱ダンボールと厚紙で再現したりと壮大なドラマがありました。

この丸い部分が回って前面にある取り出し口から商品を取り出す構造です。

f:id:kotatu99:20161208005948j:plain

ギアの支柱は割り箸

f:id:kotatu99:20161208005928j:plain

 

何はともあれCPAW号(仮称)完成です!

 

出展

そんな訳でCPAWはOSC2016 TOKYO FALLに「CpawCTF」「走る自動販売機」を出典しました。

CpawCTFについては各自ググってください。

 

f:id:kotatu99:20161208010319j:plain

ちなみにこのスライドショーアプリもUnityで作ってます。Unityでスライドショーアプリを作るメリットはよく分かりません。Androidアプリの作り方が分からないだけ

f:id:kotatu99:20161208011022j:plain

 

当日は大小様々な方にお越し頂き楽しかったです。

 

 動くCPAW号の勇姿。

 いや、動いてますからね。

 

CPAW号よ永遠に

CPAW号は持って帰るのが面倒という理由で解体されました。

ありがとうCPAW号。お疲れ様CPAW号。

f:id:kotatu99:20161208005907j:plain

f:id:kotatu99:20161208005848j:plain

 

こうして僕らのOSCは幕を閉じたのでした。

 

〜おわり〜

 

 

 

 

 

 

次OSC何出す?

 

 

僕「え・・・?」

 

 

To be continued ……?


*1:CPAW(コポォ)…公の場でコポォwwwと言ってみたいが為に生まれたサークル。他の命名時の候補としてはDFF(デュフフ)などがあった。

*2:Leap motion...手や指の位置を検知してくれるセンサー。9000円ぐらいしてたのが3500円に値下がりしたので衝動買い。ちなみにOSCの話が来た時には一通り触り終わっていたので完全に飽きていた。