Help us understand the problem. What is going on with this article?

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

More than 1 year has passed since last update.

はじめに

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

ガルラジとは

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

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

2019年7月からはセカンドシーズンの展開を控えており,今最も熱いコンテンツといえます. #2019年はガルラジ


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

tweets.png

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

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

仕組み

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

通常の通信はこうですが
connection1.png

Charlesでローカルサーバを経由させてリクエストとレスポンスを保存します.
connection2.png

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

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

導入

1. Androidエミュレータのインストール

ガルラジ公式アプリを動かすためのAndroidが必要です.
前述のCharlesを使えばスマホ実機の通信をキャプチャすることも出来るのですが,Android7以降の端末ではSSLの通信を覗けなくなりました.
参考: Android7からcharlesでssl通信が見れなくなった件

この記事ではGenymotionというAndroidエミュレータを使用します.Genymotionをインストールし,Android6の端末をインストールしてください.

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

2. Charlesのインストール

こちらの記事などを参考にCharlesをインストールし,セットアップします.
【開発支援ツール】Charlesの使い方【神ツール】

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

3. ツールのダウンロード

https://github.com/sienori/Garuradi-cache-server
Githubから任意の場所にクローンしてください.
ツールの実行にはNode.jsが必要です.

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

4. 追加の設定

ここまでのセットアップを終えると,AndroidとPC上の通信がCharlesでキャプチャされるようになっているはずです.
charles.PNG
以下の設定を追加で行います.

Recording Settings

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

  • https://app.garuradi.jp recording-g.PNG
  • http://localhost:3000 recording-l.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

使い方

次のコマンドでツールを起動します.

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
多くの場合は何度かリトライすると読み込めるようになりますが,ログに302 'https://app.garuradi.jp/login/error'と表示されている場合はアプリの再起動が必要です.

まとめ

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

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

#2019年はガルラジ

sienori
情報系修士学生.Firefox/Chrome向け拡張機能 Tab Session Manger, Simple Translate など作っています.
http://sienori.hatenablog.com/
Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away