React Native Nclideでデバッグできない時の対処法

React Nativeの開発環境の構築でハマったのでメモ

atom nuclideでデバッグ


下準備と手順が大切?

1. (atom) packager start
2. (cmd) react-native ios-run
3. (atom) debugger start
4. シミュレータのDebug JS Remotelyを選択

多分だけど、chromeのdebuggerが起動してあると、そっちと接続してしまうので、
そこだけ気をつけてればすぐにつながったかも。

React Native react-native-router-fluxを使って開発も楽にする!

React Nativeのページ遷移をreact-native-router-fluxを使ってると、開発段階でもすごく効率よく開発できる。

例えば、ページが深い所にある場合、再起動してそのページに遷移するのが面倒になる。
でもreact-native-router-fluxのinitialを指定すれば、そのページから起動することが可能

react-native-router-fluxで例を見ると

```

 
   
     
     
       
       
     
     
     
     
      initial
/>     
       
       
       
     
     
       
         
           
           
         
         
           
           
         
         
         
         
       
     
   
   
 

```

tab2_2の画面を表示したい場合、launchが初回表示され、
「tabbar」=> 「tab2」=>「tab2_2」のようタップする必要がある。

これを以下のように指定すると、起動時にtab2_2が表示される。

```
 
   
     
     
       
       
     
     
     
     
     
     
       
       
       
     
      initial
>
       
         
           
           
         
          initial
>
           
            initial
/>
         
         
         
         
       
     
   
   
 
```


atom インストール済みパッケージの確認

インストール済みのパッケージ一覧

```
$ apm list
Built-in Atom Packages (90)
├── atom-dark-syntax@0.28.0
├── atom-dark-ui@0.53.0
├── atom-light-syntax@0.29.0
├── atom-light-ui@0.46.0
├── base16-tomorrow-dark-theme@1.5.0
├── base16-tomorrow-light-theme@1.5.0
├── one-dark-ui@1.9.2
├── one-light-ui@1.9.2
├── one-dark-syntax@1.7.1
├── one-light-syntax@1.7.1
├── solarized-dark-syntax@1.1.2
├── solarized-light-syntax@1.1.2
├── about@1.7.5
├── archive-view@0.63.0
├── autocomplete-atom-api@0.10.0
├── autocomplete-css@0.15.1
├── autocomplete-html@0.7.2
├── autocomplete-plus@2.34.2
├── autocomplete-snippets@1.11.0
├── autoflow@0.29.0
├── autosave@0.24.0
├── background-tips@0.26.1
├── bookmarks@0.44.2
├── bracket-matcher@0.85.3
├── command-palette@0.40.3
├── dalek@0.2.0
├── deprecation-cop@0.56.2
├── dev-live-reload@0.47.0
├── encoding-selector@0.23.2
├── exception-reporting@0.41.2
├── find-and-replace@0.207.3
├── fuzzy-finder@1.5.0
├── git-diff@1.3.3
├── go-to-line@0.32.0
├── grammar-selector@0.49.3
├── image-view@0.61.1
├── incompatible-packages@0.27.2
├── keybinding-resolver@0.36.3
├── line-ending-selector@0.6.2
├── link@0.31.2
├── markdown-preview@0.159.7
├── metrics@1.2.1
├── notifications@0.66.2
├── open-on-github@1.2.1
├── package-generator@1.1.0
├── settings-view@0.248.0
├── snippets@1.1.1
├── spell-check@0.71.3
├── status-bar@1.8.5
├── styleguide@0.49.3
├── symbols-view@0.115.2
├── tabs@0.104.2
├── timecop@0.36.0
├── tree-view@0.215.1
├── update-package-dependencies@0.11.0
├── welcome@0.36.2
├── whitespace@0.36.2
├── wrap-guide@0.40.0
├── language-c@0.57.0
├── language-clojure@0.22.2
├── language-coffee-script@0.48.5
├── language-csharp@0.14.2
├── language-css@0.42.1
├── language-gfm@0.88.1
├── language-git@0.19.0
├── language-go@0.43.1
├── language-html@0.47.2
├── language-hyperlink@0.16.1
├── language-java@0.27.0
├── language-javascript@0.126.1
├── language-json@0.19.0
├── language-less@0.31.0
├── language-make@0.22.3
├── language-mustache@0.13.1
├── language-objective-c@0.15.1
├── language-perl@0.37.0
├── language-php@0.37.5
├── language-property-list@0.9.1
├── language-python@0.45.2
├── language-ruby@0.70.5
├── language-ruby-on-rails@0.25.2
├── language-sass@0.58.0
├── language-shellscript@0.25.0
├── language-source@0.9.0
├── language-sql@0.25.4
├── language-text@0.7.2
├── language-todo@0.29.1
├── language-toml@0.18.1
├── language-xml@0.35.0
└── language-yaml@0.29.0


Community Packages (13) /Users/xxxxxxxxxxx/.atom/packages
├── atom-beautify@0.29.19
├── atom-jshint@2.0.0
├── atom-react-native-autocomplete@0.0.27
├── busy-signal@1.3.0
├── intentions@1.1.2
├── jshint@1.8.6
├── language-javascript-jsx@0.3.7
├── linter@2.1.4
├── linter-eslint@8.1.6
├── linter-ui-default@1.2.3
├── rails-transporter@1.3.0
├── react@0.16.2
└── vim-mode@0.66.0
```


Atom Package Managerの略かな?

nuclideをアンインストールすると、左側に出ているproject navigatorみたいなウィンドウが表示されなくなり、色々調べていたら、設定 > Packages > Core Packagesのtree-viewがdisabledになってただった。

mysql2のインストール失敗 An error occurred while installing mysql2 (0.4.5), and Bundler cannot continue.

rails5をインストールするときにmysql2のgemがうまく入らずにハマった時のメモ

mac 10.12.3
ruby 2.3.1p112
Bundler version 1.12.5

```
Installing mysql2 0.4.5 with native extensions

Gem::Ext::BuildError: ERROR: Failed to build gem native extension.

    current directory: /workdir/vendor/bundle/ruby/2.3.0/gems/mysql2-0.4.5/ext/mysql2
/Users/yoshifuji.hiroki/.rbenv/versions/2.3.1/bin/ruby -r ./siteconf20170415-12041-6ex24h.rb extconf.rb
checking for rb_absint_size()... yes
checking for rb_absint_singlebit_p()... yes
checking for ruby/thread.h... yes
checking for rb_thread_call_without_gvl() in ruby/thread.h... yes
checking for rb_thread_blocking_region()... no
checking for rb_wait_for_single_fd()... yes
checking for rb_hash_dup()... yes
checking for rb_intern3()... yes
checking for rb_big_cmp()... yes
-----
Using mysql_config at /usr/local/bin/mysql_config
-----
checking for mysql.h... yes
checking for SSL_MODE_DISABLED in mysql.h... no
checking for MYSQL_OPT_SSL_ENFORCE in mysql.h... no
checking for errmsg.h... yes
checking for mysqld_error.h... yes
-----
Don't know how to set rpath on your system, if MySQL libraries are not in path mysql2 may not load
-----
-----
Setting libpath to /usr/local/Cellar/mysql/5.6.26/lib
-----
creating Makefile

To see why this extension failed to compile, please check the mkmf.log which can be found here:

  /workdir/vendor/bundle/ruby/2.3.0/extensions/x86_64-darwin-15/2.3.0-static/mysql2-0.4.5/mkmf.log

current directory: /workdir/vendor/bundle/ruby/2.3.0/gems/mysql2-0.4.5/ext/mysql2
make "DESTDIR=" clean

current directory: /workdir/vendor/bundle/ruby/2.3.0/gems/mysql2-0.4.5/ext/mysql2
make "DESTDIR="
compiling client.c
compiling infile.c
compiling mysql2_ext.c
compiling result.c
compiling statement.c
linking shared-object mysql2/mysql2.bundle
ld: library not found for -lssl
clang: error: linker command failed with exit code 1 (use -v to see invocation)
make: *** [mysql2.bundle] Error 1

make failed, exit code 2

Gem files will remain installed in /workdir/vendor/bundle/ruby/2.3.0/gems/mysql2-0.4.5 for inspection.
Results logged to /workdir/vendor/bundle/ruby/2.3.0/extensions/x86_64-darwin-15/2.3.0-static/mysql2-0.4.5/gem_make.out
Using puma 3.8.2
Using bundler 1.12.5
Using sass 3.4.23
Using tilt 2.0.7
Using turbolinks-source 5.0.0
Using tzinfo 1.2.3
Using nokogiri 1.7.1
Using rack-test 0.6.3
Using sprockets 3.7.1
Using websocket-driver 0.6.5
Using mime-types 3.1
Using coffee-script 2.4.1
Using uglifier 3.2.0
Using rb-inotify 0.9.8
An error occurred while installing mysql2 (0.4.5), and Bundler cannot continue.
Make sure that `gem install mysql2 -v '0.4.5'` succeeds before bundling.
```

解決方法

xcode-select --install

xcodeのコマンドラインツールがインストールしてないだけだった。

xcodeのversionあげた場合とか気をつけたほうがよい。

Apple Watch用アプリケーションの開発(その1)

はじめてのApple Watch開発についてのメモ

ここを見ながら作っていく
https://developer.apple.com/jp/documentation/General/Conceptual/WatchKitProgrammingGuide/index.html#//apple_ref/doc/uid/TP40014969-CH8-SW1


将来的に作りたいものは、ランニング用のアプリだけど、それは次の機会に。


Watchアプリケーションバンドルと、WatchKitExtension バンドル

WatchアプリケーションバンドルはUIのみ
  - ストーリーボード
  - リソースファイルだけ

WatchKitExtension は状態管理、インターフェースの管理、ユーザ操作の応答を行う


Watchアプリケーションのアーキテクチャ
https://developer.apple.com/jp/documentation/General/Conceptual/WatchKitProgrammingGuide/DesigningaWatchKitApp.html#//apple_ref/doc/uid/TP40014969-CH3-SW1


コンプリケーション
  - 時計の画面に表示できる小さな可視要素
  - アプリはメモリーに常駐しており、起動が早い
  - バックグランドタスクを実行できる割り当て時間が増加する

リモート通知のテスト、デバッグ
  JSONペイロードデータを指定して、送信される。
  PushNotificationPayload.apps この仕組みは普通にiOSアプリにも欲しいな。


WatchKitExtensionのデリゲート
  - WKExtension
  - WKExtensionDelegate (AppDelegateみたいなやつ)
    呼び出されるクラスはInfo.plistで指定する


バックグランドタスク
  - システムから呼び出され、それぞれのタスクの処理を行う
    - アプリケーションを最新の状態に更新
    - スナップショットを更新するタスク
    - Watchs接続タスク(iOSから取得する)
    - NSURLSessionタスク

データの共有
  - 各バンドル(Watchアプリケーション、WatchKitExtensionの両方)に置く
  - WatchKitExtensionに置く、Watchアプリケーションからはアクセス可能なため。
  - ネットワーク経由でダウンロード(またはiOSから転送)して、共有グループコンテナに置く


ファイルの共有
  - WatchアプリケーションとWatchKit Extensionのファイルの共有はApp Groupsを使って行う

iOSとのデータのやり取りをWatch Connectivity Frameworkを使う
  - 一時的なデータはupdateAplicationContextを使う。送信が完了していない場合に、再度呼び出すと、前回のデータは破棄されて、新しい送信を始める
  - 確実に届けたい場合はtransferUserInfoを使う





 

ReactNativeでAndroid対応する話

前提 ReactNativeでiOS版のアプリをリリースしていて、Android版をリリースする話 トラブルシューティング Build.VERSION_CODES.Q が存在しないエラー compileSdkVersionを29以上にすると解決 メモリー足りないエラー Execu...