beatmania2dxのcsvデータを利用してAppSeetでアプリ開発をしてみました。
アプリ自作したい！という方はぜひ参考にしてください。
今回はプログラムを記述しないで作成が可能ですので誰でもアプリ作成が行なえます！
AppSeetとは？
googleが提供しており、コードを書かなくてもアプリ開発が出来るサービスです。
完成予定の画像
完成予定のアプリの画像は以下みたいな感じになります。
アプリを開いた時の最初の画面です。
検索を行う条件を指定出来るように設定可能です。
曲データのプレイ情報を表示させます
上記のように表示出来るように設定していきましょう。
CSVをインポートする。アプリ作成準備。
まずはコナミの公式サイトからcsvを取得しましょう。
今回Googleスプレッドシートを使用します。
ツールバーのファイル→インポートでCSVのインポートが可能です。
インポートしたら上の様に各データが見れます。
これだけでもスコア管理出来ますが、今回はアプリ開発を行っていきましょう。
ツールバーの拡張機能→AppSheetを選択。
「Customize your app」を選択したらアプリの編集画面まで到着出来ると思います！
DATAで表示する項目を選択する
次に一番重要なデータをフィルター（検索）出来るように設定していきます。
右画面にプレビュー表示があるので、実際にどんな動きを行うのか確認しながら作業を行います。
左メニューの「Data」を選択。
「Columns」を選択します。「SEARCH?」のチェックボックスは自分が必要な項目だけチェックしてください。「TYPE」を正しく設定することで正しく検索が出来るようになります。
最低限設定を行っておいた方がよい項目をピックアップしました。
| TYPE | どんな挙動になるのか | おすすめ項目 |
| Number | 数字の範囲指定が可能になります | タイトル・ジャンルなど文字列になっているもの |
| Text | テキスト形式で検索が可能になります | スコア・プレイ回数など |
| Enum | チェックボックス形式で検索できます | 難易度・DJ LEVEL・CLEAR TYPE など |
UXでシートを追加する。
こちらは、シートが複数ある場合に設定します。
beatmania2dxはSP・DP用とデータが別れてるので、事前準備としてスプレッドシートのシートにそれぞれ分けてインポートしました。
UXでシートを追加しましょう。
+ボタンの「New View」を選択してください。
続いて各項目を編集します。
「Primary Views」の設定をします。
| View name | メニューバーの名前を変更可能 |
| For this data | スプレッドシートで参照するシートを変更 |
| Position | メニューバーに表示する場所を変更 |
View Options
| Sort by | デフォルトで表示した時のソートを変更 | おすすめ設定「最終プレイ日時/Ascending Descending で昇順」 |
| Group by | グループ別に表示出来ます | 難易度で表示させたい時におすすめ |
| Group aggregate | Group by設定時に使うみたいです | 基本は設定しない。「NONE」 |
| Main image | 画像がある場合に使います | デフォルトで大丈夫です。又は「auto」 |
| Primary header | 最初に表示させるテキストの変更 | おすすめ設定「タイトル」 |
| Secondary header | Primary headerの下に表示させるテキストの変更 | おすすめ設定「タイトル 又は アーティスト」 |
| Summary column | Primary header の右に表示させるテキストの変更 | おすすめ設定「最終プレイ日時」 |
| Nested table column | 基本は使いません | |
| Image shape | 画像がある場合に使用可能です。 | |
| Show action bar | アクションバーの表示 | おすすめ設定「オフ」項目だが、項目毎に編集したい時は「オン」が良いかも |
| Actions | Show action bar を使用する時に利用可能 | 削除、編集などの設定が出来ます |
Display
| Icon | メニューバーのアイコンの変更ができます |
| Display name | 特に設定不要 |
| Show if | 特に設定不要 |
「Behavior」と「Documentation」はデフォルトで大丈夫です。
設定が終わりましたら、再び「DATA→Columns」の設定を同じ様に行って下さい。
アプリの名前等の変更
アプリの名前やアプリの画像を変更しましょう。
「info」→「Properties」からアプリの名前や説明が変更できます。
App Properties
| Short Name | アプリのタイトル変更 |
| Version | アプリを更新する際にバージョンをつけれます。 |
| Short Description | 「メニューバー」→「About」の説明文です |
| Category | アプリのカテゴリーの指定が可能 |
| Function | アプリのカテゴリーの詳細設定（基本はOtherで大丈夫） |
| Industry | （多分）業種の設定。今回は使いません。 |
| Description | 「About」の詳しい説明文の詳細です。 |
| Personal use only? | 個人的利用のみ推奨しているか。「おすすめはオン」 |
| Default app folder | アプリの保存場所が指定されてます |
Information for App Users。アプリを公開する予定がなければ特に設定不要です。
| User Guidance | 「About」の「Description」の下に説明文が表示されます。（ハウツー情報らしい） |
| About Url | 「About」の「MORE INFORMATION」にURLがリンクできます。 |
| Privacy policy | プライバシーポリシーの詳細が記入可能です |
| Terms of use | 利用規約を記入します |
App Documentationは特に使わないので詳細は省きます。
CSVのインポート機能の実装
せっかくなのでアプリで全て一連の動作を行えれるようにCSVインポート機能を実装します。
※現在はアプリの仕様でPCでのみCSVインポートが行えるみたいです。スマホからは行なえないみたいです。
「Behavior」から設定を行います。
各シートにそれぞれのアクションを行えるので、変更するシートの「ADD」で追加していきます。
| Action name | 任意の名前を入力できます | |
| For a record of this table | アクションを行うシートを選択します | |
| Do this | 実行するアクションを決定します | CSVをインポートを行う様にボタンを作成するには「App: import a CSV file for this view (not a row-level action)」を選択 |
| CSV file locale | インポートを行う言語を選択 | 日本語があるので「Japanese (Japan)」を推奨 |
| Appearance | 特に設定不要 | |
| Action icon | アイコンを変更 | お好みで大丈夫です |
| Prominence | デフォルトで大丈夫です | |
| Only if this condition is true | 特に設定不要 | |
| Needs confirmation? | 警告文を表示 | アクション実行時に警告文を表示させます |
| Confirmation Message | 警告文の内容 | アクション実行時に警告する文を指定できます |
| Descriptive comment | 特に設定不要 |
アプリの共有
友達やライバルとデータを共有したい時に重宝します。
権限を与えるには次の様にします。
- スプレッドシートの閲覧、編集権限を変更する。（第三者が編集可能にできます）
- AppSheetの権限を与える
上記のアイコンから共有が可能です。
最後に
ざっくりと簡単に機能を紹介を行いましたが、他にも細かい設定を行えばもっと活用できると思います。
サンプルアプリを公開したかったのですが、特定の人数以上の公開を行うとお金が掛かるプランになるみたいなので公開しておりません。（無料なら行っていた・・・）
このアプリは2DX以外にもボルテなどのデータももちろんアプリが作成可能です。
是非チャレンジしてみてください。
今回紹介していない機能があるのでまた時間のある時に記事に出来ればと思っております。
では良い弐寺ライフを！
