LoginSignup
3
2

More than 3 years have passed since last update.

スマホアプリ制作未経験者がGooglePlayで配信できるアプリを作るまで~QuizKnockさんに憧れて~

Posted at

前置き

皆さんはyoutubeを見るだろうか。筆者はよく見る。中でも最近特に注目しているのがQuizKnockという、主にクイズを扱っているチャンネルである。「身の回りのモノ・コトをクイズで理解する」をコンセプトとした東京大学発の知的メディア「QuizKnock」のyoutubeチャンネルといった位置づけだ。
さて、このチャンネルの動画に、「東大生100点は取り飽きたので人生最高得点を取る旅に出ます」という動画がある。
3週間のあいだに、「何か」でより「高得点(※積み重ね不可、1回のチャレンジでの結果。複数回チャレンジは可。)」を取ってきた人が勝ち、という企画だ。
動画は展開が二転三転して面白いのでまず視聴をお薦めする。

以下盛大なネタバレとなるが、

この動画ではふくらPが「1不可説不可説転点」を取り優勝を果たす。
不可説不可説転てなんだよという問題はちょっと後に説明するとして、その方法が「自分でゲームアプリを開発して自分の設定した点数を取る」というものだった。「使う側より作る側が強いの 世の中っていうのはそういうもん」というのは動画内でふくらPが残した名言である。エンジニアとしては心くすぐられる発言ではないか。
しかも後に、「1不可説不可説転点RTA!!(ルイザ・グロス・ホロウィッツ賞クイズアプリ再現RTA)」という動画で実際にエンジニアの方がこのアプリを作るRTA(リアルタイムアタック)までしている(ちなみにこの時の記録は27分36秒)。

こんなのやってみたいじゃん。

というわけで、この記事の目標はPHPエンジニア(スマホアプリ制作未経験)の筆者がGooglePlayで配信できるアプリを作ること、である。
ネタバレになるが結果は成功だ。

要件は以下。
・Androidのみ対応
・本家に倣いUnityで開発
・UI/UXは本家「ルイザ・グロス・ホロウィッツ賞クイズアプリ」を可能な限り再現
・内容は本家と違い、且つ限りなくオマージュ感のあるもの

これだけお薦めされておいて上記の動画を視聴しなかった方のためにアプリの概要を説明しておくと、
①トップ画面
②クイズ(二択)の解答選択画面
③結果表示画面
の3要素のみで構成されているゲームアプリである。

ではいよいよ作っていこう。

作業

①クイズを作る

技術的な点だけ知りたい方は飛ばしていただいて大丈夫だ。
「ルイザ・グロス・ホロウィッツ賞クイズアプリ」はルイザ・グロス・ホロウィッツ賞の唯一の日本人受賞者を当てるクイズゲームなので、理想としては〇〇賞の唯一の○○人受賞者を当てる、というクイズがいい。
また、ルイザ・グロス・ホロウィッツ賞は「生物学、生化学の分野の基礎研究において、顕著な貢献を行った研究者または研究者のグループに与えられる賞(wikipedia参照)」なので、今回は生物学を含むところの自然科学の対義語である社会科学関連の賞にあたりをつける。
それらしいものをwikipediaで漁った結果、ジョン・フォン・ノイマン賞(ライク・ラズロ・カレッジが社会科学の優れた学者に与える賞)をノルウェー人で唯一受賞しているヤン・エルスターという人物を発見。この方を正解とさせていただこう。
不正解の方だが、本家ではルイザ・グロス・ホロウィッツ賞の唯一の日本人受賞者である利根川進(正解)に対して日本人で唯一ダーウィン・メダルを受賞している木村資生(不正解)となっている。これに倣うにはノルウェー人で唯一また何かの社会科学系の賞を受賞している人物を探し出したいところだが、「"ノルウェー人で唯一" "賞"」の検索でhitした人物がノルウェー人で唯一ドイツ十字章金章を授与されたフレドリク・イェンセンしか出てこなかったので、社会科学どころか賞ですらないが妥協することにする。
クリア時の点数は1不可説不可説転点より高い1グーゴルプレックス点にしておく。(参照:https://quizknock.com/large-number)

②Unityでアプリを作る

android版のみの作成でこの画面数ならAndroid Studioでやるのが手っ取り早そうだが(実際RTA動画ではAndroid Studioが利用されている)、本家がUnityなのでなんとしてもUnityを使いたい。オタクとはそういうものだ。

こちらを参考に、まずはUnityでアカウントを作成。
アカウントの作成が完了したら、トップページの「はじめる」から遷移し更に個人向けのタブを選択して、そこにあるPersonalを選択(今回は私の個人的な趣味で収益も発生させないので)。
新規ユーザーを選びたいところだが、参考サイトの指示に従いリピートユーザーを選択。
利用規約に同意してUnityHubをインストール(UnityHubとUnity自体の違いは参考サイト参照)。

無事UnityHubが起動できたら、まず右上のアイコンからサインイン。
サインインできたら、新規ライセンスの認証で先ほどと同様Personal、10万ドル以下で認証。(参考サイトには業務に関連しないライセンスを選択していたが一応会社のメールアドレスで作成したのでこちらにしておいた、そこは各々の裁量で。)
このあたりでお気付きかもしれないが参考サイトと画面が違う。どうやらはじめに環境設定画面が表示されているようだ。左上を押せばトップに移動するので参考サイトに従える。
バージョンに関しては参考サイトとちょっと様子が違うが、説明を読んだ感じ最新の(LTS)でよさそうなのでそれで。
追加モジュールは、今回はandroid版しか作らないが、一応iOSも。ドキュメントはデフォでチェックがあるのでそのまま、言語パックは使う予定ないが一応日本語だけ選択しておく。
規約に2回ほど同意したら実行できるので実行。

Visual Studioのインストーラが出てきて一瞬ビビるがまあ怪しいソフトではないので待機。

更に暇なので背景色をカラーピッカーでピックしておく。
トップ画面:85FEED
クイズ画面:FF7AAA
結果表示画面:FDFC7C

そうこうしている間にインストールが終わった。参考サイトに従い、プロジェクトを新規作成。本家はどう見ても2Dなので2Dで。
プロジェクトが開かれる。
参考サイトによるとシーンというのが場面に相当するそうなので、今回は3ないし4シーン作ればよさそう。

2Dの単純なゲームなのでこの先は先ほどまでのサイトだと高度すぎるため、他の参考サイトを探す。まんまクイズアプリ作ってるところがあったのでここからはこちらを参考にしていく。

しかしまずもって参考サイトはボタンアクションなのに対しこちらは画面タップ遷移だし参考サイトはなぜか画面を縦にする説明がないので他諸々参照した結果Gameウィンドウでアスペクト比を新規作成して9:16にすることで縦画面の編集が可能に。

とりあえずmain Cameraの背景色を先ほどピックした水色に変更すると何となくそれっぽくなる。

次にGUIを使って文字を配置していく。
GUIからテキストを入力する場合、Assetsにfontを格納する必要があるようだ。デフォではArialしか入っていないので適宜用意して入れていく。
GameOcject>UI>textから、文字を入れていく。

参考サイトの「uGUIでの画面遷移:onClickイベント」まで進む。

ボタンアクションだが画面全体にしたいので、無理やりだが
GameOcject>UI>buttonで作成したボタンを全画面サイズにして透過する方法をとる。

ちなみにC#を記述しようとすると先ほど折角ダウンロードしたVisual Studioが起動しようとするが、この程度のコードなので、
Assets>Create>C# Scriptで作成されるファイル(プロジェクトディレクトリのAssetsの中にある)をテキストエディタで開いて記述した。
コードの内容がやや古いようなのでこちらを参考に修正して記述する。

実行により遷移が確認できたら、あとはこれまで使った技術だけで回せそうなので参考サイトの「クイズ画面の作成」~以降は読み飛ばす。

シーンを3つ追加してそれぞれのボタンから遷移(ボタンのデザインはimageを二カ所Noneすればフチなし四角形になります)するように設定。
正誤判定などしない。画面がそうなればよい。今回は。

③Android用にビルド

File>BuildSettingsを開く。
PlatformをAndroidにして、「Build App Bundle(Google Play」にチェックを入れる。(これにより作成されるのがapkファイルでなくaabファイルになる)
Player Settingsを開く。「Company Name」、「Product Name」、「Default Icon」を適宜設定する。
ちょっと参考画像の見た目は違うが、こちらを参考にkeystoreを作成。
更にこちらを参考に64ビット対応させておく。
準備ができたらビルドする。保存場所は適当で良い。

④GooglePlayにアプリケーションを登録する

まずこちらでGoogleアカウントとGoogleディベロッパーアカウントを作成する。$25かかる。
そしてこちらからコンソールに入る。
左メニュー「すべてのアプリ」の「アプリの作成」からアプリを作成する。言語とアプリ名を入力してボタン押下でアプリの設定画面に遷移する。
画面の指示に従い必須事項を記入していく。事前に準備が必要なのは各名称や説明文の他
・アイコン画像
・プレイ画面のスクリーンショット
・フィーチャーグラフィック画像
・メールアドレス
・プライバシーポリシーの記載ホームページURL
だ。一切個人情報など取り扱わないアプリだがプライバシーポリシーのURLが必要なのは手痛い。筆者はこのためだけにFC2に登録しプライバシーポリシーだけのサイトを開設した。
なお最初に表示されるのは「ストアの掲載情報」だが、ここで必須の「コンテンツのレーティング」はまた別の左メニューから入力が必要なので一度未公開で保存した後に左メニューからそれらを順次入力していく。
③でビルドしたaabファイルは左メニュー「アプリのリリース」から製品版の「管理」>「次へ」で選択できる。

左メニューのグレーのチェックがすべて緑になった状態で「アプリのリリース」へ進むと、確認→公開できる。
あとは審査を待つのみだ。

⑤結果

2020/7/14にこの作業を完了し、審査を通過してリリースされたのが2020/7/21だった。
https://play.google.com/store/apps/details?id=com.gluecode.John_von_Neumann_Award
こちらがリリースされたアプリである。
筆者の実機でインストールしたところ、問題なく動作した。
クイズ作成:1.5h
アプリ作成:6h(環境構築含)
アプリリリース:4h(審査待ち除)
程度の作業だった。

まとめ

お遊びとしてやるには大変楽しい作業だった。
実務的に考えると、テスト段階を完全に飛ばしているなど課題が多い。特に、画面サイズがUnityで作成している段階からどうにも小さく思えたのが実機で確認するとやはり小さく、Androidの機種差を考慮してもおそらく違う設定で作成したほうが良かったと思われる。また、今回参考にしたサイトの多くで言及が無かったGooglePlayConsole上での機能(テスト版リリースなど)が全く使えていないので、実際に企業としてアプリをリリースするのであればこのあたりの使用も必要になってくるだろう。今回のようにあれこれhow toサイトをメインに見るよりも本家サイトの手順をしっかり理解して使いこなさなくてはならない。筆者にその日が来るのかは不明だが。

ともあれ楽しい遊びだった。ふくらPをはじめとするQuizKnockの皆さんありがとうございました。

3
2
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
3
2