サービス終了後もガルラジ公式アプリを使うためのツールを作った

# はじめに
ガルラジ公式アプリが2019年6月いっぱいでサービス終了を迎えます．アプリで配信されている「つぶやき」を保存しサービス終了後も閲覧するためのツールを作りました．
https://github.com/sienori/Garuradi-cache-server

## ガルラジとは
[ガールズラジオデイズ](https://garuradi.jp/)，略してガルラジというコンテンツをご存知でしょうか．2018年12月から翌3月にかけてファーストシーズンが展開された，2次元のキャラクターたちによるラジオコンテンツです．

ラジオという媒体だからこそ醸し出される**キャラクターの実存感**や，**虚構と現実の境目がグラつくような**不思議な感覚に魅了され，これまでも多くのファンによって**怪文書**が投稿されるなど大きな盛り上がりを見せてきました．

* [ガルラジ－「ガールズ ラジオ デイズ」が面白い](https://livedoor.hatenadiary.com/entry/2019/01/03/142336)
* [声優ラジオが好きなオタクへ　キャラクターによるラジオ「ガルラジ」を聴いてみませんか？ #2019年はガルラジが来る](http://nobu-v.hatenablog.com/entry/2019/01/12/155838)
* [ガルラジを今すぐ追いかけろ ](https://note.mu/torishichimeee/n/n659ab001b550)
* [『ガールズ ラジオ デイズ』––––周波数を合わせて](http://lichtung.hateblo.jp/entry/2019/01/16/%E3%80%8E%E3%82%AC%E3%83%BC%E3%83%AB%E3%82%BA_%E3%83%A9%E3%82%B8%E3%82%AA_%E3%83%87%E3%82%A4%E3%82%BA%E3%80%8F%E2%80%93%E2%80%93%E2%80%93%E2%80%93%E5%91%A8%E6%B3%A2%E6%95%B0%E3%82%92%E5%90%88%E3%82%8F)
* [『ガールズ ラジオ デイズ（ガルラジ）』という異世界ラジオめいた奇妙なキャラクターラジオコンテンツを君は聞いたか](http://cemetrygates1919.hatenablog.com/entry/2019/01/17/225935)

2019年7月からは**セカンドシーズン**の展開を控えており，今最も熱いコンテンツといえます． [#2019年はガルラジ](https://twitter.com/search?q=%232019%E5%B9%B4%E3%81%AF%E3%82%AC%E3%83%AB%E3%83%A9%E3%82%B8)！

---

さて，ガルラジへの没入感を高めるための要素として，ラジオ本編の他にも公式アプリで配信されていたキャラクターたちの「**つぶやき**」というものがありました．

![tweets.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/207934/af286646-4cf8-178f-547e-a13f984288c1.png)


ラジオ外でのキャラクター達の会話がリアルタイムで更新されていく魅力的なコンテンツでしたが，コンテンツ展開の移動に伴い公式アプリのサービスは2019年7月で終了することが発表されています．

サービス終了後もつぶやきを見返したい！ということで，つぶやきを保存しサービス終了後もアプリで閲覧するためのツールを作りました．


# 仕組み
**Charles**という通信のモニタリングや通信内容の上書きができるソフトがあります．これを使うと特定のアドレス宛の通信を自前のローカルサーバに送ることができます．アプリとAPIサーバの間にローカルサーバを経由させることでリクエストとレスポンスの内容を保存し，オフラインでも利用できるようにします．

通常の通信はこうですが
![connection1.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/207934/25b1619e-8674-191d-fe45-e773ac1eca25.png)



Charlesでローカルサーバを経由させてリクエストとレスポンスを保存します．
![connection2.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/207934/f91bd70f-dd60-4505-d3aa-206de743a4ff.png)


一度保存した通信内容はキャッシュから取り出してアプリに渡すことで，サービスが終了したあとでも閲覧できるようにします．

そんなことして大丈夫なの？と思われるかもしれませんが，通信内容の保存は私的利用の範囲内でローカルにのみ行っており，サーバに対しても通常通りのリクエストしかしていないので問題はないと考えています．

# 導入

### 1. Androidエミュレータのインストール
ガルラジ公式アプリを動かすためのAndroidが必要です．
前述のCharlesを使えばスマホ実機の通信をキャプチャすることも出来るのですが，Android7以降の端末ではSSLの通信を覗けなくなりました．
参考: [Android7からcharlesでssl通信が見れなくなった件](https://qiita.com/endoidou/items/9d83d253b29e26e8d244)

この記事では[Genymotion](https://www.genymotion.com/)というAndroidエミュレータを使用します．Genymotionをインストールし，Android6の端末をインストールしてください．

インストールした端末にガルラジ公式アプリを**どうにかして**インストールしてください(Playストアでの配信はすでに終了しています)．

### 2. Charlesのインストール
こちらの記事などを参考にCharlesをインストールし，セットアップします．
[【開発支援ツール】Charlesの使い方【神ツール】](
https://qiita.com/ishigaki_shun/items/41ab31b002c8649be2c2)

ここで重要となるのがSSL証明書の設定です．
上記の記事を参考にPCとAndroidの両方に証明書をインストールしてください．

### 3. ツールのダウンロード
https://github.com/sienori/Garuradi-cache-server
Githubから任意の場所にクローンしてください．
ツールの実行には[Node.js](https://nodejs.org/ja/)が必要です．

```
git clone https://github.com/sienori/Garuradi-cache-server.git
cd Garuradi-cache-server
npm install
```

### 4. 追加の設定
ここまでのセットアップを終えると，AndroidとPC上の通信がCharlesでキャプチャされるようになっているはずです．
![charles.PNG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/207934/ac9eeb0f-67af-857f-9b6d-7f6e9c673b57.png)
以下の設定を追加で行います．

#### Recording Settings
関係のない通信を記録しないための設定です．
`Proxy`>`Recording Settings`を開き，`Include`タブの`Add`ボタンから2つのロケーションを追加します．

*  `https://app.garuradi.jp`
![recording-g.PNG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/207934/2e7392a2-f1ed-9687-7084-bbf37fa9c018.png)
* `http://localhost:3000`
![recording-l.PNG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/207934/9dd30bc9-4238-3c84-a633-1c2341dd3052.png)

#### Map Remote
`app.garuradi.jp`への通信をローカルサーバへ流すための設定です．
`Tools`>`Map Remote`を開き，`Enable Map Remote`を有効にして`Add`ボタンからマッピングを追加します．

Map From: `https://app.garuradi.jp`
Map To: `http://localhost:3000`
![mapremote.PNG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/207934/7de26352-6630-f6ac-11e1-5052f242d94f.png)

# 使い方
次のコマンドでツールを起動します．

```
npm run start
```

アプリを起動し，つぶやきを読み込んだりするとコマンドプロンプトに次のようなログが表示されるはずです．

```
/login
Request to server
Save cache /login 0001

/term/timeline
Request to server
Save cache /term/timeline 0001

/term/timeline
Response from cache /term/timeline 0001
```

これらのログはAPIへのリクエストが行われるたびに行われる処理の内容を表しています．
つぶやきを読み込むとAPIサーバへリクエストが送信され(`Request to server`)，返ってきたレスポンスをキャッシュとしてローカルに保存します(`Save cache`)．
一度保存された内容は，2回目以降はキャッシュから読み出されます(`Response from cache`)．

すべてのつぶやきを読み込んでローカルに保存しておけば，サービスが終了したあともアプリを通してつぶやきを閲覧することができるはずです．

## 既知の問題

読み込みを繰り返していると，通信エラーと表示されることがあります．
![error.PNG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/207934/5c2c17d9-3831-8177-64ac-4c91ba444202.png)
多くの場合は何度かリトライすると読み込めるようになりますが，ログに`302 'https://app.garuradi.jp/login/error'`と表示されている場合はアプリの再起動が必要です．

# まとめ
ガルラジ公式アプリの「つぶやき」を保存するツールを作りました．サービス終了までに保存しておけば，いつでもつぶやきを見返すことができるはずです．

https://github.com/sienori/Garuradi-cache-server
ご利用の際は自己責任でお願いします．

[#2019年はガルラジ](https://twitter.com/search?q=%232019%E5%B9%B4%E3%81%AF%E3%82%AC%E3%83%AB%E3%83%A9%E3%82%B8)！