React Native で Live Dwango Reader クライアントを作る #JavaScript

愛用している AeroReader が最近更新されなくなってしまい、iPhone 6s だと画面が引き伸ばされたままで悲しみがあふれていたので、自分用に勉強がてら作りました。Ladder って名前です。レポジトリはこちら。React Native で作っていますが Android では動きません。

フィードを消化して連続で読んでいくことに特化していますので、機能はとても少ないです。ぼく自身ピンを使わないので、ピンが無かったりします。機能は並び替えくらいですね...。

Electron で LDR のデスクトップアプリを作った時もそうでしたが、デザインセンスが滅亡しているのでがんばって Slack に似せてみました（つらい）。

動かし方

$ git clone git@github.com:k0sukey/Ladder.git
$ cd Ladder
$ npm install
$ npm satrt

npm start すると、React Native がファイルの監視を始めるので、そしたら ios/Ladder.xcodeproj を開いて実行すれば OK です

中身

React Native にお世話になりました。いくつかコンポーネントを入れていますが、別段難しいことしていません。

react-native-navigation

react-native-controllers を抽象化しているコンポーネントです。このコンポーネントはナビゲーションを管理したりドロワーを作ったりと、このアプリの基本になっているコンポーネントになります。ドロワーのスタイルがいじれなかったので、できるように Fork しました。入用な方はこちらからどうぞ。react-native-controllers 自体でうまく動いていない所がいくつかあったので、こちらも後々 Fork するかもです。

react-native-controllers は導入がちょっと面倒なのでここに残しておきます（rnpm link できない）。

$ npm install react-native-navigation --save

インストールが終わったら Xcode の左ペインのプロジェクトを右クリックして、「Add Files to "プロジェクト名"...」から node_modules/react-native-controllers/ios/ReactNativeControllers.xcodeproj を追加します。
そしたら「Build Phases」の「Link Binary With Libraries」で libReactNativeControllers.a を追加します。
最後に「Build Settings」の「Header Search Paths」に $(SRCROOT)/../node_modules/react-native-controllers/ios を recursive で追加してください。これで準備完了です。AppDelegate.m を開いて、↓な感じに変更しましょう。

#import "AppDelegate.h"

#import "RCCManager.h"
#import "RCTBundleURLProvider.h"
#import "RCTRootView.h"

@implementation AppDelegate

- (BOOL)application:(UIApplication *)application didFinishLaunchingWithOptions:(NSDictionary *)launchOptions
{
  NSURL *jsCodeLocation;

  [[RCTBundleURLProvider sharedSettings] setDefaults];
  jsCodeLocation = [[RCTBundleURLProvider sharedSettings] jsBundleURLForBundleRoot:@"index.ios" fallbackResource:nil];

  self.window = [[UIWindow alloc] initWithFrame:[UIScreen mainScreen].bounds];
  self.window.backgroundColor = [UIColor whiteColor];
  [[RCCManager sharedInstance] initBridgeWithBundleURL:jsCodeLocation];
  return YES;
}

@end

react-native-cookies

Cookies をさわれる用になります。自分で機能を追加してありますので、同じような機能がほしい方はこちらからどうぞ。Fork した版は Cookies の保存と読み込みができるようになっています。アプリが終了されてもセッションは残したいですよね（毎回ログインするのはつらい）。

react-native-spinkit

記事を読み込む時にクルクル回るやつです。便利。

react-native-action-button

react-native-vector-icons とセットで使っています。FAB 的なやつです。このアプリではフィードの移動で使っています。これも便利。

react-redux

ちょっと前に ng2 と TypeScript で Flux なお手伝いをしていたのでなんとかはいれました。やっていなかったら死亡していたかも。react-native-navigation 噛ませながらなサンプルは react-native-navigation 公式にしか見つけることができなくてつらかった。この部分は完全に見よう見まねです。

まとめ

Debug JS Remotely

開発中はこいつで console.log なんかを見ていると思いますが、ぼくの環境が悪いのかアプリがクラッシュしまくってストレスがやばかったです。途中、Safari でシミュレータの Webインスペクタを見ることができるのを思い出したおかげてなんとか幸せになれました。「JSContexts の Web インスペクタを自動的に表示」にチェックを入れておけばアプリをリロードした時でも再表示してくれます。とても便利。

Titanium

普段はこっちだったりします。比べてみるとどうなんでしょうね。個人的にはどちらも大きくは変わらないかなーと思います。ウェブの技術を〜とかうたうのなら圧倒的に React Native かなって感じですが（Titanium はちょっと独自の世界ですよね）。両方とも痒いところに手が届かないとネイティブなレイヤーを触りますし。ただ、React Native で Android はまだ未体験なのでその部分は何ともいえません。
アプリの挙動的には React Native の方が早いと感じました。LDR のフィードが 100 以上あっても描画早いですし。Titanium だとつらそうだなーと思いました（Titanium も Hyperloop が本気だすとどうなるんでしょうね）。

まー、好きな方を使うと良いと思いました