新年は見事にブログ三日坊主。
昨日は子供たちと遠出して遅くに帰ってきて酒を飲んでそのまま寝るという失態を犯した結果、ブログを書けず。やはり午前中に書いておくべきだったか……。
[『React Native実戦投入』]
（まだブログには書いてないが）今年の目標として、モバイルアプリ開発がある。その一環で、先日はReact NativeのHello World的な記事を書いた。
しかし、2018年のテーマは「実戦投入力を高める」（©️id:kakku22さん）にしているので、最終的には自分で開発した物をリリースしたいと考えている。
考えている以上、リリースにこぎつけたいが、いきなりリリースできるわけもないので、何かステップアップのネタはないものか、と思っていたところ……。
WEB+DB PRESS Vol.102の記事「React Native実戦投入」を発見。
サブタイトルは「Android/iOSアプリをJavaScriptで高速開発」。
開発の基本から実際のアプリ開発、本番アプリのノウハウまで紹介されている良記事。しかもタイトルに「実戦投入」の言葉！これは写経するしかない！！
そういえば最初にJavaをやり始めた時も写経だったなあ……。
[第２章「React Nativeの基本」]
まずは記事の第２章「React Nativeの基本」で紹介されている内容をザッと読み、react-native-device-infoを使うあたりまでをやってみることに。
最初のHello React Native!に画面表示を書き換える部分もおさらいとしてやってみる。
自分で開発環境をセットアップした時はiOSシミュレータの自動リロードとか気づかずに毎回command+Rでやってたな。
Chromeでリモートデバッグができるのか。なるほど便利そう。デバッグ用アプリはまた今度使ってみよう。
npm install jshashesでnpmライブラリを追加してHelloの文字列をMD5ハッシュ化してコンソールに出力してみる。おお、なんか出た。
[最新のreact-native-device-infoを使う]
いよいよネイティブコンパイルが必要なライブラリを利用してみる。
そのままだとブログに書きづらいので（アウトプット駆動！）、2018年1月時点での最新版にチャレンジ。
- react-native: 0.51.0
- react-native-device-info: 0.13.0
※記事中ではreact-native 0.49.3とreact-native-device-info 0.11.0の組合せが利用されている。
npm install react-native-device-infoで最新版をインストールして、インストールしたライブラリをimportして、Textタグにデバイスのロケールを出力するよう修正する。
なんかエラーがでた。
スタックトレースからエラー元のjsファイルが開けそうなので、Object.getDeviceLocaleをクリックしてみる。
React Packagerが何か言っている。エディタの設定しておけばソースファイル開けるらしい。
sudo vi /etc/bashrcでEXPORT REACT_EDITOR=atomの一文を追加して、再度シミュレータを起動する。
今度はスタックトレースをクリックすると、Atomで元ファイルが開いた。
getDeviceLocale: function() {
return RNDeviceInfo.deviceLocale;
},
なるほど分からん。
記事をよくよく読み直してみると、続きがあって、ネイティブコードの組み込みが完了していないために発生している模様。
ネイティブコードの組み込みのために、react-native link react-native-device-infoを実行して、シミュレータを再起動。
さっきとはエラー表示が変わったものの、まだ何かエラーが出ている。やはり最新版だと動かないのか……と、ターミナルに目をやるとエラーメッセージが。
ld: library not found for -lRNDeviceInfo-tvOS
こんな時はグーグル先生だ、ということでググってみると、githubのリポジトリにエラーメッセージが含まれたイシューがあった。
イシューのコメントによると、XCodeから設定を変更するといけるらしい。
プロジェクトのiosフォルダをXCodeで開き、「Build Phases」を開く。
そして、「Link Binary With Libraries」を展開する。
エラーになっていた「libRNDeviceInfo-tvOS.a」が一番下にある。コイツを選択して、「-」ボタンをクリックしてリムーブする。
んでもって、iOSシミュレータを再起動すると、以下の画面が。
無事に最新版のreact-native-device-infoを利用して、enロケールを取得することができた。
[まとめ]
長くなったのでこの辺で。
写経したコードを後悔……じゃなくて公開してみる。
[2018/01/06追記]
続きを書いた。
