好きって言って欲しいだけのクソアプリ

この記事は「クソアプリ Advent Calendar 2020」16日目の投稿です。

昨日は@kanchan-1996さんの「[M5Stackでポケ○ンウォッチを再現したい](https://zenn.dev/vr_min_chan/articles/b8d07ef6c34af2)」でした。
古の遺物を現代に召喚するとは…！そしてオチが秀逸。

# 何を作ったか
　1問だけの質問アプリを作成しました。
　師走の年末進行でお忙しい貴方もご安心あれ、早ければ5秒で終わります！

　[penguin_lovers](https://penguin-mall.com/penguin_lovers/index.html)



![penguin_lovers_demo.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/177998/aa2ccee5-0f25-1f64-3f3d-b7d0015862fe.gif)


# コンセプト
　・いつか触ろうと思ってX年が経過したティラノビルダーとLive2Dを使う
　・絶対「はい」だろうという質問にする
　・絶対「はい」なのに押し間違えてしまったウッカリやさんのために、
　　「いいえ」を押した場合は再質問してくれる
　・どうしても「いいえ」と回答したい人のために、
　　煩悩の数「いいえ」と答えた場合は仕方なく受け付ける

　要は、RPGで稀に見る「はい」「いいえ」の選択肢があるのに「はい」しか選べないやつ…の、頑張れば「いいえ」も押せるやつ、を作りました。

# 使用ツールなど
・Adobe Photoshop（画像作成）
・Live2D Cubism Editor 4.0（表情やモーション作成）
・Live2D Cubism Viewer 4.0（表情やモーションのパッケージ化）
・TyranoBuilder 1.8.5b（アンケート部分）

# 簡単な説明
## 作成フロー
　1.画像を作成する
　2.画像にパラメータ設定する
　3.ティラノビルダーで読み込める形式のファイルを作成する
　4.アプリのプロジェクトを作成する
　5.プロジェクトにLive2Dを読み込む
　6.アプリを作り込む

## 細かい部分
### Live2Dで読み込める画像について
　psdファイルが読み込めます。以下の条件がありますのでご注意ください。
　- RGB
　- psdファイル
　- マスクやパス、フィルターを統合しておく

### Live2Dでの作業
　大切なことはすべてマニュアルが教えてくれる。

　Live2D Cubism マニュアル
　https://docs.live2d.com/cubism-editor-manual/top/

　[PSDのインポート](https://docs.live2d.com/cubism-editor-manual/psd-import/)
　[メッシュの自動生成](https://docs.live2d.com/cubism-editor-manual/mesh-edit/)
　[パラメータ設定](https://docs.live2d.com/cubism-editor-manual/palametor/)
　[まばたき設定](https://docs.live2d.com/cubism-editor-manual/eye-blink-settings/)
　[表情を作る](https://docs.live2d.com/cubism-editor-manual/create-facial-expressions/
)
　[表情の設定と書き出し](https://docs.live2d.com/cubism-editor-manual/setting-and-exporting-facial-expressions/)


### ティラノビルダーでの作業
　大切なことはすべてマニュアルが教えてくれる。(2回目)

　使い方＆チュートリアル
　https://b.tyrano.jp/tutorial/


　ティラノビルダーを解凍した場所が作業フォルダになります。

　画面上で作成したプロジェクトの場所
　```\tyranobuilder_vXXX_win_ja_pro\myproject\プロジェクト名```
　この下のdata\scenarioにシナリオのファイルがあります。

　出力されたアプリは以下に保存されます。
　```\tyranobuilder_vXXX_win_ja_pro\export\browser_日付```
　このファイル一式をサーバーにアップロードすれば、ブラウザ上でアプリが動きます…！

### ランダムにメッセージを出す
ランダムな数値はティラノビルダーで作成できます。（便利！）
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/177998/843aa1aa-44ac-6943-ea01-b4a56d0855db.png)

ティラノスクリプトコンポーネントを追加します。
　・メッセージの変数を用意
　・ランダムな数値番目の値を画面に表示
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/177998/3a8bb38e-34d7-e6b3-427f-301984c1fae1.png)

```
[eval exp="f.test=['メッセージA','メッセージB','メッセージC']
[emb exp="f.test[f.num]"]
```

### Fireabaseのデータを参照する
ティラノビルダーでJavaScriptを動かせるため、Firebaseにペンギン好きな方の数を記録してみます。

データの取得は公式のウェブ用のサンプルを使用します。

[Cloud Firestore でデータを取得する](https://firebase.google.com/docs/firestore/query-data/get-data?hl=ja)


初期化処理はループ外に書いておきます。
```[iscript][endscript]```のブロック内に、Firebaseからコピーした接続情報を貼り付けます。



```javascript:title_screen.ks(scene1.ksより先に読み込まれるファイル)

[iscript]
var firebaseConfig = {
apiKey: "****",
authDomain: "****.firebaseapp.com",
projectId: "****",
storageBucket: "****.appspot.com",
messagingSenderId: "****",
appId: "1:****:web:****"
};

firebase.initializeApp(firebaseConfig);
f.db=firebase.firestore();
[endscript]

```

データを取得する部分


```javascript:scene1.ks

[iscript]
f.query=f.db.collection("hige-lover").doc("lovers");
f.query.get().then(function(doc){
if(doc.exists){
f.love_count=doc.data().count+1;
}
}).catch(function(error){
console.log('error:', error);
});
[endscript]
```

取得した値を代入した変数を表示

```javascript:scene1.ks

[tb_start_tyrano_code]
;データが取得できた場合のみヒゲペンギン好きの数を表示
[if exp="f.love_count>-1"]
@jump target=*show_count
[else]
@jump target=*show_result
[endif]
[_tb_end_tyrano_code]


*show_count
[tb_start_text mode=1 ]
#
あなたは[emb exp="f.love_count"]人目のヒゲペンギン好きです
[_tb_end_text]

*show_result
(省略)
```



## ハマったこと
マニュアルをあまり読まないからこうなる…という（^^;）

* Live2Dでアニメーション画面に切り替えても何も表示されない？  
→先に表情などの設定が必要のようです。早まってはダメということですね。

>アニメーションワークスペースではパーツ化されていないオブジェクトはパーツ表示のプロパティに反映されません。
表示・非表示はモデルを作成する段階でオブジェクトをパーツに設定しプロパティの値で切り替えをするか、
パラメータで切り替えをするか決めておきましょう。
オブジェクトをパーツに設定せず、パラメータも設定しない場合、アニメーションワークスペース内では表示・非表示の切り替えができません。
https://docs.live2d.com/cubism-editor-manual/animation-preparation/?locale=ja

* Live2D書き出し時のアラート

テクスチャアトラス？
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/177998/4bb494b7-6352-d96d-482e-8dd12986c8e7.png)

[テクスチャアトラス編集](https://docs.live2d.com/cubism-editor-manual/texture-atlas-edit/)

ここにありました！保存前に書き出ししましょう。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/177998/7d166d50-481f-9fbf-3b4c-6f22980d3436.png)


## まとめ
積年の想いが果たせて嬉しいです。ありがとう、クソアプリアドベントカレンダー。
Live2Dもティラノビルダーもずっと触っていられる沼でした。

最後に…
__「推しが！！！今日も！可愛い！！！！」__
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/177998/6c34120c-2fec-bb2b-c4b6-97c193bf8dec.png)

明日は@a-knowさんの記事です。
愛おしい感じのクソアプリ、楽しみすぎる…！