9
1

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 1 year has passed since last update.

JUCEAdvent Calendar 2022

Day 18

JUCEを使った自作Androidアプリの開発から公開まで

Last updated at Posted at 2022-12-17

前略 「KBass」というAndroidアプリを作成しました。

(音がでます)

某ベースシーケンサーのようなベースラインを鳴らすことができるアプリです。

このアプリは実は

JUCEで作成したものに広告(Admob)を挿入しています。

公開されてダウンロード数が増えれば広告収益が見込めるようになっています。

これまでVSTなどのオーディオ系ソフトウェアを自作したとき、それでお小遣いを稼ぐには「BOOTHやgumroad、shopifyなどでデジタル販売する」という手段がほとんどだったと思います。

しかしながら、無料でも素晴らしいVSTやDAW、音声Webサービスがあふれている昨今、個人開発のVST等にお金を払ってもらうのはなかなか大変なことです。

そんななか「無料のスマホアプリとして公開し、広告を挿入する」という選択肢を実例として提示できるかもしれません。これをきっかけに収益を得るまでのハードルが下がり、ひいては趣味でちょっとしたお小遣いを稼ぎたい自作VST開発者クラスタがもっと盛り上がればと思います。

開発のきっかけ

JUCEを使う方は「自分で音源プラグインを作りたい」という動機の人が多いのではないでしょうか。私も最初はVSTプラグイン開発から入りました。

過去の手帳を整理していたとき、「いつか機会があったら触りたい」と思っていたとあるオープンソースのベースライン音源ライブラリのメモが目に入りました。手帳にメモした当時は仕事が忙しく、触る余裕もなくそのまま忘れていたのですが、ちょうど現在まとまった時間があり、このライブラリを使って何かやってみようと思い立ちました。

そのライブラリはVSTのバージョン2.4向けに作られたものだったため、まずはVST3向けに改変することから始めました。
そしてこの作業時に、JUCEの存在を知りました。

PoC(?)

JUCEの使い方を知る手始めとして、こちらのページから音量だけを調整するVSTをまず作り

ここに音源ライブラリを追加するというやり方をしました。

動作確認は一般のDAWと下記のVSTHostというソフトを使用しました。

VST3への改変作業自体はVST情報の設定と音声の入出力処理まわりをVSTSDK2.4ソースを眺めながらVSTSDK3の相当するソースを編集するだけで済みました。

商品企画

音源のVST化ができたところで、JUCEでできることがなんとなくわかってきました。
このあたりからぼんやりと、収益をあげられるものが自分でも作れるんじゃないかと思い始めました。

始めに考えた収益モデルは2点。
①無償でVSTを公開して自分のブログやBOOTHストアへのアクセスを稼ぐ
→ 収益発生までだいぶ遠回りで労力に見合わなそう

②VSTを有償販売
→ ベースライン音源は既にBL-303などの先人がいる。
追加機能を入れて差別化を図ってもよいが、その開発やPRも大変そう

というようにいろいろ検討した結果、最終的にVSTではなくAndroidアプリにする方針に落ち着きました。

Androidのベースシーケンサーアプリは既にいくつかありますが、
無料~数百円のもの、すなわちエントリーレベルのアプリで参入の余地がありそうだと感じました。この価格帯は自分と同じような個人開発の方々が好きにアプリを作っていらっしゃる(とても楽しそう)。
彼ら先人に敬意を払いつつ、配色やボタン配置、画面遷移などUI/UXで優位性をだせれば、自分でもけっこう良いところまでいけるんじゃないかと思った次第です。私も混ぜて。

ちなみにiOSアプリは高品質な音楽アプリがはびこっているうえに、スマホアプリを公開するために年間1万円以上の登録料がかかり個人開発者にとって修羅の世界です(Androidアプリ初回だけの登録料3千円くらいで済みます)。そのかわりiOSはマシンスペックなど環境が魅力的ですけどね。

優位性

KBassのコンセプトは「広い入力画面」です。

既存のアプリは1画面で多機能を操作しようとしたり、ツマミがたくさんあったりで、タブレットの場合はともかくスマホで長時間使うには目が疲れてしまうおそれがあります。
そこでKBassでは端末画面をできるだけ広く使ったピアノロールでシーケンスを打ち込めるようにすることで、競合との差別化を図りました。

開発ステップ

実際の開発ではいきなりAndroidアプリを作ったわけではなく、まずWindows向けのスタンドアロンアプリから入りました。
これはのちのち問題が生じたときに、Windows上で再現するかどうか調べることで、原因の切り分けに役立つ効果があります。

PoCではVSTを作成しましたが、Projucerの設定を改めて”スタンドアロンアプリ”に変えて作成しなおします。
というのも、VSTとして作成した場合でもスタンドアロンにはなるのですが、これは厳密には「VSTを内部に組み込んだアプリを生成する」構成になっていて、最初からスタンドアロンにする場合とは内部が違っています。
AndroidアプリにするにはVSTではなく、本来のスタンドアロンとして開発する必要があります。
とっかかりはこちらのチュートリアルを参考にしました。

GUI作成

上記のチュートリアルに肉付けするカタチでシーケンサ画面を搭載しました。

ピアノロール画面のソースコードを公開している(MITライセンス)方がいたので、これをもとに実装しました。

KBassでは、縦 鍵盤数12 × 横 シーケンス数16にピアノロールを固定しています。

画面レイアウトはgetHeight getWidthを使った比率レイアウトを実装しました。
こちらのチュートリアルが参考になります。

スマホで全画面を使う想定だと、画面サイズは1920×1080になりますが、実際にPCで確認する際のウインドウサイズは768×432(2.5倍縮小)がオススメです。PC画面によい感じに収まります。

Androidネイティブ開発と広告の実装

JUCEをAndroid上で動かすこと自体はチュートリアルを見てすぐにできました。

その後ディスプレイカットアウト(いわゆるノッチという画面にセルフカメラが入りこんでいるやつ)などのスマホ特有の対応をします。

問題は広告の埋め込みです。はじめはWebコンポーネントをどうにかこうにかすることでAdmob広告をJUCE内部で呼び出すことを考えたのですが、Webコンポーネントはドキュメントがほとんどありませんでした。

そこで、広告に関連する箇所はJUCEではなくAndroidネイティブ環境にすることを検討しました。Androidネイティブでボタンを作成し、それに連動して広告の表示/非表示を切り替える、という形です。概念設計的にも、広告はJUCE本来の役割とは離れていますし、ネイティブ環境で実装するほうが自然かな、と自分に言い聞かせました。

とはいうものの、AndroidアプリでAdmobに対応するための直接のチュートリアルは探しても見当たりませんでした。

(iOSではすでに海外の方がAdmobの挿入を実践した前例があるのですが、2018年当時から時間が経っているのでそのまま使えるかはわかりません)

ひとまず広告はおいておいて、AndroidネイティブとJUCEの混在を実現しようと思い、フォーラムでのこちらのスレッドで公開されているサンプルを動かそうとしました。

が、そのままではビルドエラーを吐いて動かず、Android Studio開発環境すら碌に知らない状態からエラーの原因を調査しました。

運が良いことに、ビルドエラーの中で「~~が読み込めません」と書かれていたメッセージが全部小文字だったことに気づき、単にソースの大文字で書かれていた箇所を小文字に変えるだけでビルドに成功しました。これを見逃していたら挫折していたかもしれません。
サンプルは2018年当時の端末用のビルドだったため、AndroidXとAppCompatへの移行などなんだかよくわからない対応をして

なんとか2022年現在の端末でも使えるビルドになりました。
これ以降はProjucerを使うと設定が上書きされ消えてしまうのでプロジェクトを直接編集していきます。

JUCEとAndroidネイティブの混在が実現できたところで、Admobo広告の埋め込みをこちらのGoogleのサンプルを参考にして実装しました。

広告にはいくつか種類があります。
画面の端に表示されるバナー、全画面を占めインターステイシャルやビデオ、
アプリの内容に溶け込んだ配置ができるネイティブなどです。

単純な実装の労力では、バナー広告をのっけるのがおそらく一番ラクなのでしょうが、画面を広く使えるのがKBassの売りとする以上、バナーが面積を占めては本末転倒です。ここはひと手間かけてネイティブ広告を実装しました。

Admob広告はガイドラインが定められており、広告の表示の仕方でやってはいけないことが細かく指定されています。

バナーなどは広告とアプリの機能が被らないようにする必要があるとのことで、念のためネイティブ広告でも同様に、使用中に広告の領域が被らないようにしました。

具体的にはフィルタタイプを選択するコンボボックスメニューを左右ボタンでの選択式に変更。さらにABOUT画面を広告領域とは別のところに表示しました。

AndroidネイティブのボタンはJUCEのテキストボタンやラベルよりおしゃれで良かったです。
(JUCEのボタンは文字数と枠サイズ次第でフォントが勝手に自動縮小したり、収まりきらないときは「…」表示になったりするので、調整が手間)
アプリ配信は見た目が大切なので、いっそボタン類は全部ネイティブで実装したほうが良いかもしれません。

販促コンテンツ作成

Androidアプリを公開するために、いくつかメディアを作成する必要があります。
ロゴ、フィーチャーイメージ、スクリーンショット2枚、そして動画です。

私はロゴ作成はPowerPointとPaint.net、動画はDavinci Resolve無料版で作成しました。以前はAViUilを使っていましたが、Davinci ResolveのほうがTwitter用とYoutube用の簡易書き出し設定が用意されていてラクです。エフェクトも無料でひととおりそろっていてオススメです。

Android Studioでエミュレータのスクリーンショットがとれることをこのとき知りました。

プライバシーポリシー

アプリを提出するのにプライバシーポリシーを記載したページが必要です。
(アプリの対象年齢が13歳以上であれば免除されるのですが、たとえ免除できる条件であっても、手続き画面で次のステップに進むのになにかとプライバシーポリシー記載を推奨するメッセージが割り込んできて、先に進むのが困難でした。事実上必須と考えてよいと思います)

KBassは現状ファイル書込みすらしないので、アクセス権限はとても簡素なものです。自分のブログで作ったプライバシーポリシーの記事でも審査に通ることができました。

機能追加していくにつれ、今後プライバシーポリシーの項目を増やしていく必要があります。

提出と審査

Google Playコンソールにデベロッパーとして登録し、アプリを署名付きバンドルという形式でビルドしたものを、Google Playコンソールのリリースページにアップロードすることで審査が始まります。巷ではアプリの審査に1週間~2週間かかるという話もありましたが、私の場合は初回のリリースが4日、軽微な修正リリースは半日で審査が通りました。審査が通ったアプリをAdmobに登録することで、広告と紐づけることができます。

審査期間中はこんなものを作って遊んでいました。

今回の開発活動の副産物のような簡易なVSTですが、githubに公開してます。
https://github.com/koi-ikeno/CallerCaller

最後に

晴れて審査も通り、KBassはすでに公開中です。

2022年12月時点、まだシーケンスの保存もwav書き出しも対応していませんが、おいおい追加していきます。

過去にJUCE自体を触ったことがありませんでしたが、開発に着手してだいたい一か月半くらいで公開でこれました。これが長いか短いかは判断が分かれるところですが、独りでここまでたどり着けるのは良い時代になったなと感じます。

9
1
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
9
1

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?