ReactNativeのデバッグ方法
Atom上でデバッグできるのかなと思っていたけどできなかったので忘れないようにメモ
詳しくは公式ページに書いてあった。
デバッグ方法
起動中のエミュレータ上で、以下のキーを入力する
そうすると以下のダイアログが出て来るので、Debug JS Remotelyを選択。
ブラウザが立ち上がって、デバッグ用のダミーページが表示されるので、デベロッパーツールを開く。
Chromeの場合、Command + Option + J。
そうするとソースコードやConsoleなどが確認できるようになるので、デバッグしたい場合はでデベロッパーツール上のJSコードにブレークポイントを置いて、実際に動かしてやるとブレクポイントで止まるようになり、変数に入っている値も参照できる。
一度デバッグモードに切り替えると、次回 react-native run-iosしたときも自動でデバッガが起動する。
キャンセルしたい場合、再度Command + D (AndroidはCommand + M)で開発者メニューを表示してStop Remote JS Debuggingを選択してやればOK。
Atom上ではなくてChrome上でデバッグするのは斬新だけど、これでデバッグしながらの開発ができるようになった。
console.logの表示
デバッグを起動するまでもないけど、console.logだけ表示させておきたいという場合
# iOSの場合 $ react-native log-ios # Androidの場合 $ react-native log-android
そうすると、console.logで出力している内容が出力されるようになる
以下はjsonデータを単純に出力している。
Jan 22 00:14:46 USER_NAME AwesomeProject[46007] <Notice>: { title: 'Star Wars', releaseYear: '1977' }
Jan 22 00:14:46 USER_NAME AwesomeProject[46007] <Notice>: { title: 'Back to the Future', releaseYear: '1985' }
Jan 22 00:14:46 USER_NAME AwesomeProject[46007] <Notice>: { title: 'The Matrix', releaseYear: '1999' }
Jan 22 00:14:46 USER_NAME AwesomeProject[46007] <Notice>: { title: 'Inception', releaseYear: '2010' }
Jan 22 00:14:46 USER_NAME AwesomeProject[46007] <Notice>: { title: 'Interstellar', releaseYear: '2014' }
【ねごと】ETERNALBEATをiTunesで予約！
ねごとの4thアルバム「ETERNALBEAT」がiTunes Storeでプリオーダー開始というツイートが流れてきたので、早速予約しました。
【速報】2月1日発売
— ねごと (@negoto69) 2017年1月18日
New Album「ETERNALBEAT」から、アルバムを象徴するタイトル曲「ETERNALBEAT」のMusic Video YouTube解禁！
iTunes Storeにてプリオーダースタート！ https://t.co/FSo4mdqU9Z pic.twitter.com/7TTyRDoBZo
1つ前の「VISION」まではCDで購入していましたが、
- 曲をiTunesに取り込んだらもうCD ROMに触れない
- わざわざ外付けのCDドライブを取り出すのも面倒
なので、今回からはiTunesで購入することにしました。
価格は2,100円と、CD版よりも少しリーズナブル。
更に、iTunesで購入すると、既にシングルで販売している
- アシンメトリ
- DESTINY
- holy night
が自動でダウンロードされてきました。
※曲単体では購入していません。
早速通勤中に聴いています。
残りの曲は2/1の発売日を楽しみに待ちたいと思います！
簡単にねごとの魅力を紹介
今までに無い独特の世界観。
それでいてPVがどれもクール。
ボーカル&キーボードの蒼山幸子の声が世界観にマッチしていてかなり引き込まれます。
バンホーテンさやことか個性的なメンバーも。
個人的にはendlessのPVが一番好き。
ねごとを知るキッカケになった#sharpも。
昔はよくライブに行ったけど、最近はチケットが売り切れていることも多くなかなか行けないのが残念。。
とはいえ、ねごとの世界観はライブに行かないと体験出来ないものも多いので、興味がある人は是非ライブ参戦してみて欲しいと思います！
また、女性ファンも多いねごとのライブでは、「女性・子供エリア」が設置されているので女性や子連れでも安心して参戦できるのがユニークだなと思います！
最近のライブには行けていないですが、きっと今でも設置されていると思います。
追記
1/25 0時過ぎに、ELEMENTALBEATが1曲降ってきました！
噂のCOMPをオーダー!
以前から気になっていたCOMPをついに注文してしまった！
COMPとは
ヒトが生きるのに必要なすべての栄養素を、 たった１杯で理想的に補える「完全食」です。
すごいですね。
いわゆるソイレントのような物でしょう。
会社の人がよくランチ代わりにCOMPを飲んでいるのをみて、前々から気にはなっていました。
味は豆乳のような味らしく、飲みやすいし空腹感が抑えられ、何より5分で作って飲めるから忙しい時でもバッチリとの事でした。
一食あたりに換算すると400円弱するので、思ったより高いな・・・という印象で、なかなか踏み切れずにいました。
しかし、ホームページに以下のような記載があり、「COMP売れすぎ・・！そんなに人気があるなら・・！」と完全なミーハー思考で少し調べてみた結果、なかなか良さそうという考えに至りました。
また、「夜勉強しようと思ってもなかなかできないのは、夕食後にソファーでゴロゴロし始めてしまうのが原因なのでは」と思い、コンプならデスクに座ったまま食事を済ませられるのでダラダラを回避できるのでは・・！という思考。
ついでに夕食がCOMPに置き換えるだけでダイエットになりそう。
その結果、今回注文した内容はコチラ。
本当は最初だしTrial Packだけ試してみようと思ったものの、
- シェーカーと送料を合わせるとそれだけで1,300円
- 続けて飲みたいと思ったときに、配送遅延の影響ですぐに手に入らないかも
という理由で、4,000kcalパック2つとスコップも一緒に購入。
到着は2月に入ってからなのでしばらく先ですが、楽しみに待ちたいと思います。
Nuclideをインストールしてみた
React Nativeのコードを書く環境で何かいいものは無いかと少し調べた感じだと、NuclideとDeco IDEが良さそうだった。
コード補完などはどちらもありそうだったので、簡単な特徴だけ挙げてみる。
Nuclide
Deco IDE
- Mac版のみ
- シミュレータはiOSのみ連携できる(?)
- Componentをコードにドロップすることでコードの雛形ができる
- Styleの設定値をスライダーやカラーピッカーで直感的に設定することができる
実装が楽になりそうだなと感じたのはDeco IDE。
ただし、慣れるまではちゃんとコードを書いて理解したいなと思い、今回はNuclideを使ってみることにした。
実際にインストール
まずはAtomのインストール
自分は既にインストール済みだったのでスキップ。
続いてNuclideのインストール
Getting Startedが分かりやすい。
ATom -> Preferences と選択すると、Settingsタブが開く。
+ Install を選択すると、パッケージをインストールする画面になるので、Search packagesと書かれているテキストボックスにNuclideと入力し、Packagesボタンをクリック。
すると nuclideプラグインが表示されるので、そのままInstallをクリック。
インストールが終わると、以下の画面が表示された。
ついでに推奨パッケージのこちらもインストールした。
https://nuclide.io/docs/editor/setup/#post-installation
手動でインストールした後に、以下の記載があるのに気づいた。
In order to install all of the recommended packages: Go to Packages | Settings View | Manage Packages. Search for the nuclide package, and click on the package’s Settings button. Select the Install Recommended Packages on Startup checkbox.
Nuclideの設定でチェックを入れておけば、再起動時にインストールしてくれそう・・
あとは、vim-mode-plusプラグインをインストール。
他にも使いたくなるプラグインが出てきそうなので、進めていく上でいいものがあったら都度インストールしてみようと思います。
↓最終的にはこんな感じに。
bfgの実行でLargeObjectExceptionが発生した場合の対応
bfgを実行した際に以下のエラーが発生した。
Caused by: org.eclipse.jgit.errors.LargeObjectException:【コミットハッシュ】 exceeds size limit
at org.eclipse.jgit.internal.storage.file.LargePackedWholeObject.getCachedBytes(LargePackedWholeObject.java:98)
at org.eclipse.jgit.treewalk.CanonicalTreeParser.reset(CanonicalTreeParser.java:214)
at com.madgag.git.bfg.model.Tree$.entriesFor(Tree.scala:39)
at com.madgag.git.bfg.cleaner.ObjectIdCleaner$$anonfun$4.apply(ObjectIdCleaner.scala:119)
at com.madgag.git.bfg.cleaner.ObjectIdCleaner$$anonfun$4.apply(ObjectIdCleaner.scala:118)
at com.madgag.git.bfg.MemoUtil$$anon$3.load(memo.scala:75)
at com.google.common.cache.LocalCache$LoadingValueReference.loadFuture(LocalCache.java:3542)
at com.google.common.cache.LocalCache$Segment.loadSync(LocalCache.java:2323)
at com.google.common.cache.LocalCache$Segment.lockedGetOrLoad(LocalCache.java:2286)
at com.google.common.cache.LocalCache$Segment.get(LocalCache.java:2201)
... 107 more
調べてみたところ、GitHubにissueが上がっていた。
org.eclipse.jgit.errors.LargeObjectException · Issue #97 · rtyley/bfg-repo-cleaner · GitHub
その通りに確認していく。
$ git cat-file -t 【コミットハッシュ】 tree
treeオブジェクト形式らしい。
巨大なフォルダ構造だということがわかったので、容量を調べてみる。
$ git cat-file -s 【コミットハッシュ】 10189544
およそ10MBのtreeオブジェクト形式という事がわかった。
bfgが内部的に利用しているJGitのデフォルトは1MBまでとの事なので、今回のエラーが発生した。
以下のオプションを付けて実行することで、扱うことができる最大値を指定できるようなので試してみた。
--massive-non-file-objects-sized-up-to サイズ
こんな感じ。
$ java -jar ./bfg-1.12.14.jar --no-blob-protection --delete-files '*.{jpg,png}' --massive-non-file-objects-sized-up-to 20M
無事処理が完了。
また、OutOfMemoryエラーが発生してしまうことがあるそうなので、その場合はJVMオプションでメモリ割り当てを増やしてあげればよいようだ。
-Xms1G -Xmx4G
ReactNativeでiOSの動作環境を準備
前回↓に続いて、iOSでも動作するように準備してみた。
公式ページの手順を参考に。
を選択しました。
少し眺めて、「あれ、やること無くないか・・？」という状態に。
※既にXCodeはインストール済み
というわけで、前回作成したAwesomeProject配下で以下のコマンドを実行する。
$ react-native run-ios
あっさり起動したので拍子抜け。
せっかくなので、コードのホットリローディングを試してみる。
プロジェクト直下のindex.ios.jsを編集する。
<Text style={styles.welcome}>
- Welcome to React Native!
+ Welcome to React Native Test!
</Text>
保存して、iOSシミュレータ上でCommand⌘ + R
そうするとすぐに画面がリフレッシュされて、変更した内容が表示された。
これはすごい・・！
GenymotionでReactNativeの動作環境を作った
iOSアプリ開発の学習をしていましたが、最近ReactNativeが活発になってきているので少し試してみようと思い、試してみることにした。
インストール方法
公式ページが分かりやすい
の手順で試してみた。
Node, Watchmanのインストール
nodeはanyenvで入れているのでスキップ。
watchmanはFacebook製のファイルシステムの変更を監視するツールらしい。
$ brew install watchman
React Native CLIのインストール
npmを使って
$ npm install -g react-native-cli
Android Studioのダウンロードとインストール
Android Studioは既に入っているのでスキップ。
JavaがJDK8以上が必要らしいので、バージョンだけ確認。
$ javac -version
javac 1.8.0_102
インストール済みのSDKなどはこちらから確認できるので状況に応じて追加でインストールする。
Android Stuid起動画面の右下のConfigure
SDK Managerを選択
Launch Standalone SDK Managerを選択
必要なパッケージのを選択。
- Google APIs
- Intel x86 Atom System Image
- Intel x86 Atom_64 System Image
- Google APIs Intel x86 Atom_64 System Image
あとで出てくるけどAndroid SDK Build-Toolsが必要で、以下のバージョンをインストールしておく必要がある。
Android SDK Build-Tools 23.0.1
Package毎に Accept Licenseを選択してinstall
ANDROID_HOMEの設定
手順では~/.bashrcですがzshを使っているので、~/.zshrcに設定した。
export ANDROID_HOME=~/Library/Android/sdk export PATH=${PATH}:${ANDROID_HOME}/tools export PATH=${PATH}:${ANDROID_HOME}/platform-tools
ターミナルを再起動するか、sourceで読み込み、確認する。
$ source ~/.zshrc $ env | grep ANDROID ANDROID_HOME=/Users/USER_NAME/Library/Android/sdk
Genymotionのインストール
※Virtual Boxが必要なので、別途インストールしておく。
公式ページからダウンロードする。
アカウントにサインインした状態で
Resources -> Fun Zone -> からPersonal Editionをダウンロードする。
※個人での利用に限り、無料で利用できる。
起動したら Addを選択。
利用したいVirtual Deviceを選択する。
Nexus 5Xとかを選んでおけば問題ない。
※サインインしている必要あり。
Virtual deviceの名前を入力し、Next。
デバイス一覧に追加された。
そのままStartを選択すると、VMが起動する。
そのまま起動させておく。
ReactNativeアプリケーションの作成と実行
適当なディレクトリに移動して、以下のコマンドを実行する
$ react-native init AwesomeProject
$ cd AwesomeProject
$ react-native run-android
ここで起動できなくてかなりハマった。
Android SDK Build-tools versionは23系の最新を使えばいいと思っていたので23系の最新を入れていたけど、実際は以下のバージョンで固定だった。
Android SDK Build-tools version 23.0.1
23.0.1をインストールすると無事にGenymotion上でReactNativeのアプリを起動することができた。
