tag:blogger.com,1999:blog-30589576173290243872024-03-14T09:53:10.027+09:00hrk's bloghrkhttp://www.blogger.com/profile/14369445590054241924noreply@blogger.comBlogger172125tag:blogger.com,1999:blog-3058957617329024387.post-81524237871197022462020-12-11T09:30:00.002+09:002020-12-11T09:30:28.099+09:00ReactNativeでAndroid対応する話<h2 style="text-align: left;">前提</h2><div>ReactNativeでiOS版のアプリをリリースしていて、Android版をリリースする話</div><div><br /></div><h2 style="text-align: left;">トラブルシューティング</h2><h3 style="text-align: left;">Build.VERSION_CODES.Q が存在しないエラー</h3><div>compileSdkVersionを29以上にすると解決</div><div><br /></div><h3 style="text-align: left;">メモリー足りないエラー</h3><blockquote><div><div>Execution failed for task ':app:mergeExtDexDebug'.</div><div>> A failure occurred while executing com.android.build.gradle.internal.tasks.Workers$ActionFacade</div><div> > java.lang.OutOfMemoryError (no error message)</div></div></blockquote><p>コメントアウトを解除した</p><p>org.gradle.jvmargs=-Xmx2048m -XX:MaxPermSize=512m -XX:+HeapDumpOnOutOfMemoryError -Dfile.encoding=UTF-8</p><h3>64K問題?</h3><blockquote><div><div>Cannot fit requested classes in a single dex file (# methods: 154819 > 65536 ; # fields: 126457 > 65536)</div></div></blockquote><p>multiDexEnabled trueを追加</p><h3>facebook sdkのエラー</h3><blockquote><div><div>The SDK has not been initialized, make sure to call FacebookSdk.sdkInitialize() first.</div></div><div></div></blockquote><p>確かにまだ設定してないからなー。</p><p>FirebaseのAuthentication使ってるからそこら変の設定がもろもろ足りない。</p><h2 style="text-align: left;">React Native Firebase</h2><p><a href="https://rnfirebase.io/">https://rnfirebase.io/</a></p><h3 style="text-align: left;">Twitterの設定</h3><div><a href="https://rnfirebase.io/auth/social-auth#twitter">https://rnfirebase.io/auth/social-auth#twitter</a><br /></div><div>中で使ってるライブラリーはこれ</div><div><a href="https://github.com/GoldenOwlAsia/react-native-twitter-signin">https://github.com/GoldenOwlAsia/react-native-twitter-signin</a></div><div>react-native0.62.2使ってるから、gradleの追加や、MainApplication.javaへの追加は不要</div><div><br /></div><h3 style="text-align: left;">Appleでログイン</h3><div>使っているライブラリーはこちら</div><div><a href="https://github.com/invertase/react-native-apple-authentication">https://github.com/invertase/react-native-apple-authentication</a><br /></div><p>iOS開発時は1.0.0。Android対応は2.0.0からので、バージョンを最新にする(2.1.0)</p><blockquote><p> const response = await appleAuthAndroid.signIn();</p></blockquote><p>ドキュメント通り実装しても、responseで取得できるのはid_tokenだけ。</p><blockquote><p>{nonce: "XXXXXXXXX", state: "XXXXXXXXXXXX", id_token: "XXXXXXXXX", code: "XXXXXXXXXXX"} </p></blockquote><p>id_tokenはJWTなので、decodeすると、(便利なサイト <a href="https://jwt.io/">https://jwt.io/</a>)</p><blockquote><p>{</p><p> "iss": "https://appleid.apple.com",</p><p> "aud": "xxxxxxxxxxxxxxxxxxxxxx",</p><p> "exp": 1607694557,</p><p> "iat": 1607608157,</p><p> "sub": "xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx",</p><p> "nonce": "xxxxxxxxxxxxxxxxxxxxxxxxxxxx",</p><p> "c_hash": "xxxxxxxxxxxxxxxxxxxxxxxxxxxxx",</p><p> "email": "xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx",</p><p> "email_verified": "true",</p><p> "is_private_email": "true",</p><p> "auth_time": 1607608157,</p><p> "nonce_supported": true</p><p>}</p></blockquote><p>こんな感じ</p><p>で?</p><p>Firebaseの本家の(ReactNativeじゃないほう)のAndroidのドキュメントをみてみる</p><p><a href="https://firebase.google.com/docs/auth/android/apple">https://firebase.google.com/docs/auth/android/apple</a><br /></p><p>始めの方はSDK使えば簡単にできるようなことが書いてある。</p><p>「高度: 手動によるログインフローの処理」ここが参考になるかも</p><p><a href="https://firebase.google.com/docs/auth/android/apple#advanced_handle_the_sign-in_flow_manually">https://firebase.google.com/docs/auth/android/apple#advanced_handle_the_sign-in_flow_manually</a></p><blockquote><p>AuthCredential credential = OAuthProvider.newCredentialBuilder("apple.com")</p><p> .setIdTokenWithRawNonce(appleIdToken, rawUnhashedNonce)</p><p> .build();</p><p>mAuth.signInWithCredential(credential)</p><p></p></blockquote><p>appleIdTokenとか書いてあるので、それ渡せば良い? appleIdTokenはAppAuthから取得する?んー。これも違うような。</p><p>Web版をみてみる。</p><p><a href="https://firebase.google.com/docs/auth/web/apple">https://firebase.google.com/docs/auth/web/apple</a></p><p><br /></p><p>続きはまた明日・・・ </p><blockquote><p> </p></blockquote><p><br /></p>hrkhttp://www.blogger.com/profile/14369445590054241924noreply@blogger.com0tag:blogger.com,1999:blog-3058957617329024387.post-78445435843820037172019-03-02T22:34:00.002+09:002019-03-02T22:34:48.823+09:00DataStoreの辛いところ<textarea border-style:dotted="border-style:dotted" class="markdown" disabled="disabled">
# DataStoreの限界
FacebookやインスタグラムのようなSNSで、投稿、公開範囲、お気に入りなどの機能をDataStoreで実現しようとするとどうしても辛くなる。
## DataStoreで実現可能?
- users
- id
- feeds
- id
- user_id
- favorites
- user_id
- feed_id
- friends
- user_id
- follow_id
が存在する
### 投稿が削除された場合、お気に入りから削除
favoritesからfeed_idの物を削除すればOK
### フォロー解除した場合、相互フォローのみの投稿をお気に入りから削除
アクセスユーザーとフォローしていたユーザーのお気に入り一覧から、公開範囲が相互フォローの投稿を取得して削除する。
この場合、favoritesにfeed情報を保持していないため、user_idで絞り込んだfeedを全部取得する必要がある。
DataStoreはfavoritesにfeedの構造体を保存できるが、feedが更新された場合にfavoritesのfeedまで更新しないといけないため現実的ではない。
# RDSで行う場合
同じデータ構造でOK
## 取得する場合に毎回joinして取得する
select *
from favorites fav
inner join feeds on fav.feed_id=feeds.id
left join friends on friends.user_id=feeds.user_id
where fav.user_id=? and
(
(feeds.enabled=有効)
(feeds.publish_type=公開) or
(feeds.publish_type=フォローワーのみ公開 and friends.user_id is null) or
(feeds.user_id=自分)
)
# まとめ
DataStoreを使うってことは、前もってデータを作って置いてアクセスしやすい状態を担保するところでもある気がする。
更新のタイミングはデータの作り変えで複雑になるけど、検索はシンプルで良い。
</textarea>hrkhttp://www.blogger.com/profile/14369445590054241924noreply@blogger.com0tag:blogger.com,1999:blog-3058957617329024387.post-12430270219975402362019-02-25T22:32:00.001+09:002019-02-25T22:32:23.609+09:00Cloud Funcsionsを個別に呼び出す(リトライ処理)# 概要<br />
<br />
Cloud FunctionsをGCSに保存したタイミングで、画像データを変更してもう一度GCSにアップロードしたい。<br />
<br />
## WebUIから実行<br />
<br />
関数をテストから実行する<br />
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj6ej2VAhp1D8srbt2J8b9pM5iD5DlhB-2enZqijxeG1IUGD3VUqh4djr7vMsKfvaqUbHLqnKCKOLU9ZKxcDsWvIxRFzPmgK-ICvcYis8RCORLE7ID9hYuyixkfExzETK7bFaaVKtR6P6k/s1600/%25E3%2582%25B9%25E3%2582%25AF%25E3%2583%25AA%25E3%2583%25BC%25E3%2583%25B3%25E3%2582%25B7%25E3%2583%25A7%25E3%2583%2583%25E3%2583%2588+2019-02-25+22.20.55.png" imageanchor="1" style="clear: left; float: left; margin-bottom: 1em; margin-right: 1em;"><img border="0" data-original-height="527" data-original-width="1600" height="105" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj6ej2VAhp1D8srbt2J8b9pM5iD5DlhB-2enZqijxeG1IUGD3VUqh4djr7vMsKfvaqUbHLqnKCKOLU9ZKxcDsWvIxRFzPmgK-ICvcYis8RCORLE7ID9hYuyixkfExzETK7bFaaVKtR6P6k/s320/%25E3%2582%25B9%25E3%2582%25AF%25E3%2583%25AA%25E3%2583%25BC%25E3%2583%25B3%25E3%2582%25B7%25E3%2583%25A7%25E3%2583%2583%25E3%2583%2588+2019-02-25+22.20.55.png" width="320" /></a></div>
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
dataで必要なパラメータを指定。<br />
今回はbucketとfileを使っていたのでその2つを指定する<br />
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgFTTb6Jl5nKu5pZt7HT8dQJRw6-pYwXazn5ndvplzwhO4b-mKZCt8xxNVe5nxWiPtjT2lh1nMvl7XDmJVJlrfBKGWKiDfGZ7l-RwelrycFvZlDkR9ZDZfmVKFmLvbPr2_N91zxIJVnbvo/s1600/%25E3%2582%25B9%25E3%2582%25AF%25E3%2583%25AA%25E3%2583%25BC%25E3%2583%25B3%25E3%2582%25B7%25E3%2583%25A7%25E3%2583%2583%25E3%2583%2588+2019-02-25+22.21.56.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" data-original-height="1362" data-original-width="983" height="320" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgFTTb6Jl5nKu5pZt7HT8dQJRw6-pYwXazn5ndvplzwhO4b-mKZCt8xxNVe5nxWiPtjT2lh1nMvl7XDmJVJlrfBKGWKiDfGZ7l-RwelrycFvZlDkR9ZDZfmVKFmLvbPr2_N91zxIJVnbvo/s320/%25E3%2582%25B9%25E3%2582%25AF%25E3%2583%25AA%25E3%2583%25BC%25E3%2583%25B3%25E3%2582%25B7%25E3%2583%25A7%25E3%2583%2583%25E3%2583%2588+2019-02-25+22.21.56.png" width="230" /></a></div>
<br />
<br />
以下は実際に読んでるコード<br />
<br />
```<br />
exports.helloWorld = (event, callback) => {<br />
const object = event.datat;<br />
console.log(`Bucket: ${object.bucket} File: ${object.name}`);<br />
```<br />
<br />
## コマンドラインからの実行<br />
<br />
関数名、リージョンを指定して呼び出す<br />
<br />
```<br />
gcloud --project [PROJECT-NAME] beta functions call helloWorld --region asia-northeast1 --data '{"bucket":"hogehoge","name":foo.png"}'<br />
```hrkhttp://www.blogger.com/profile/14369445590054241924noreply@blogger.com0tag:blogger.com,1999:blog-3058957617329024387.post-20622725090383728022019-02-22T23:51:00.005+09:002019-02-22T23:51:38.977+09:00Cloud Functionsを使ってImageMagickを使って画像変換してみる<h3>
JSからImageMagickを使う</h3>
<div>
nodeでImageMagickを使うライブラリがある</div>
<div>
<br /></div>
<div>
gm https://github.com/aheckmann/gm</div>
<div>
<br /></div>
<div>
こちらを使って行う</div>
<div>
<br /></div>
<div>
<div>
const gm = require("gm").subClass({ imageMagick: true });</div>
</div>
<div>
gm('image.png')</div>
<div>
.colorspace("cmyk")</div>
<div>
.write('image.tif')</div>
<h3>
<br /></h3>
<h3>
GCSからダウンロード</h3>
<div>
<div>
渡された引数にGCSのオブジェクトが渡されるのでそれを使ってダウンロードする</div>
<div>
<br /></div>
<div>
const object = event.data;</div>
</div>
<div>
<div>
const file = storage.bucket(object.bucket).file(object.name);</div>
</div>
<div>
<div>
const tempLocalPath = `/tmp/${path.parse(file.name).base}`;</div>
</div>
<div>
<div>
file.download({ destination: tempLocalPath })</div>
</div>
<div>
<div>
.catch(err => {</div>
<div>
console.error("Failed to download file.", err);</div>
<div>
return Promise.reject(err);</div>
<div>
})</div>
<div>
.then(() => {</div>
<div>
console.log(`Image ${file.name} has been downloaded to ${tempLocalPath}.`);</div>
</div>
<div>
})</div>
<div>
<br /></div>
<h3>
GCSへアップロード</h3>
<div>
ダウンロードの続きでbucketに対してuploadを行う</div>
<div>
<br /></div>
<div>
<div>
const newFileName = file.name.replace(".png", ".tif");</div>
</div>
<div>
<div>
file.bucket</div>
<div>
.upload(tempLocalPath, {</div>
<div>
destination: newFileName,</div>
<div>
metadata: { contentType: "image/tiff" }</div>
<div>
})</div>
<div>
.catch(err => {</div>
<div>
console.error("Failed to upload cmyk image.", err);</div>
<div>
return Promise.reject(err);</div>
<div>
});</div>
</div>
<div>
<br /></div>
<h3>
デプロイ</h3>
プロジェクトの指定<br />
<br />
--project [PROJECT NAME]<br />
<br />
regionの指定<br />
<br />
--region asia-northeast1<br />
<br />
デフォルトだとus-central1になる<br />
<br />
実際のコマンドは以下<br />
<br />
gcloud --project [PROJECT] beta functions deploy pngToCMYKConverter --region asia-northeast1 --trigger-resource sheet-yournail-staging --trigger-event google.storage.object.finalize<br />
<br />
<br />
<h3>
他のリージョンにDeployしてモジュールを削除</h3>
gcloud --project [PROJECT] beta functions deploy pngToCMYKConverter<br />
<br />
参考<br />
https://cloud.google.com/functions/docs/tutorials/imagemagick?hl=jahrkhttp://www.blogger.com/profile/14369445590054241924noreply@blogger.com0tag:blogger.com,1999:blog-3058957617329024387.post-13095725487262145952018-05-23T23:50:00.003+09:002018-05-23T23:50:52.469+09:00.mitmproxyを使ってHTTPSの通信を確認<textarea border-style:dotted="border-style:dotted" class="markdown" disabled="disabled">公式のドキュメント
https://docs.mitmproxy.org/stable/
# install
## mac
```
$ brew install mitmproxy
```
## iPhone
### 証明書
セキュアな通信を傍受するために、プロファイルのインストールを行う
```
http://mitm.it
```
その後、「設定」> 「一般」> 「情報」> 「証明書信頼設定」
"ルート証明書を全面的に信頼する"にチェックを入れる
そうするとhttpsの通信も閲覧できるようになる
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh6JgOuweZN9-9e3I2jl-YjDg9nrj1EUfYEufTLUDVdjltI1u3TBqBchX4JGZ9pOyxdJnRHpSr01WngsZLBxqOGVoGyjeNj6zxLY_2CTdUC0m4n0t4ia-aVzTEB2hvXyOG0hBYVTbdIidA/s1600/IMG_0490.PNG" imageanchor="1" ><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh6JgOuweZN9-9e3I2jl-YjDg9nrj1EUfYEufTLUDVdjltI1u3TBqBchX4JGZ9pOyxdJnRHpSr01WngsZLBxqOGVoGyjeNj6zxLY_2CTdUC0m4n0t4ia-aVzTEB2hvXyOG0hBYVTbdIidA/s320/IMG_0490.PNG" width="148" height="320" data-original-width="739" data-original-height="1600" /></a>
### プロキシ設定
wifiのプロキシ設定で、PCのアドレス、port 8080にする
# 使い方
```
$ mitmproxy
```
## Flows通信一覧が表示
```
d 1行削除
z 全行削除
```
</textarea>hrkhttp://www.blogger.com/profile/14369445590054241924noreply@blogger.com0tag:blogger.com,1999:blog-3058957617329024387.post-60380101732070272682018-05-16T11:13:00.001+09:002018-05-16T11:13:36.226+09:00Firebase Functionsの登録<textarea border-style:dotted="border-style:dotted" class="markdown" disabled="disabled">
Cloud Storageに保存した画像をCloud Functionsを使って、サムネイル画像を生成する
# 公式ドキュメント
https://firebase.google.com/docs/functions/gcp-storage-events?authuser=1
## インストール
```
$ npm install -g firebase-tools
# ブラウザが起動して認証する
$ firebase login
# 初期設定
$ firebase init
or
$ firebase init functions
```
## ディレクトリ構成
```
$ tree -L 2
.
├── firebase.json
└── functions
├── index.js
├── node_modules
└── package.json
```
## 利用するパッケージを追加
```
# Cloud Storage への再アップロード用
$ npm install --save @google-cloud/storage
# 外部プロセス実行用
$ npm install --save child-process-promise
```
## index.js
ここの中身をそのままコピー
https://github.com/firebase/functions-samples/blob/90ac6c8083122cedae19141f8ac8cb124ec8f321/quickstarts/thumbnails/functions/index.js#L60-L83
## 特定のパケットをトリガーにする
特に指定しなければ、デフォルトのバケットが使われる
コード上で指定できる
```
# デフォルトを使う場合
functions.storage.object()
# 特定のバケットの場合
functions.storage.bucket('バケット名').object()
```
## Deploy
```
$ firebase deploy --only functions
```
</textarea>
hrkhttp://www.blogger.com/profile/14369445590054241924noreply@blogger.com0tag:blogger.com,1999:blog-3058957617329024387.post-71043598714554890282018-04-14T17:26:00.000+09:002018-04-14T17:26:10.156+09:00ReactNativeのリリース自動化、CodePush x CircleCI<textarea border-style:dotted="border-style:dotted" class="markdown" disabled="disabled">
# CodePushのアクセスキーを作成
```
$ code-push access-key add "CircleCI"
Successfully created the "CircleCI" access key: XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
Make sure to save this key value somewhere safe, since you won't be able to view it from the CLI again!
```
</textarea>
hrkhttp://www.blogger.com/profile/14369445590054241924noreply@blogger.com0tag:blogger.com,1999:blog-3058957617329024387.post-47944753044117530492018-02-25T11:33:00.002+09:002018-02-25T11:33:52.090+09:00iOSシミュレータでURLスキームで起動する方法<h3>
URLスキームの実行方法</h3>
<div>
simctlがXcode6から付属しているのでそれを実行する</div>
<div>
<br /></div>
<div>
$ xcrun simctl openurl booted hoge:/foo/bar</div>
<div>
<br /></div>
<h4>
simctl</h4>
<div>
シミュレータをコントロールできる</div>
<div>
<br /></div>
<div>
<div>
$ xcrun simctl</div>
<div>
usage: simctl [--noxpc] [--set <path>] [--profiles <path>] <subcommand> ...</subcommand></path></path></div>
<div>
simctl help [subcommand]</div>
<div>
Command line utility to control the Simulator</div>
<div>
<br /></div>
<div>
For subcommands that require a <device> argument, you may specify a device UDID</device></div>
<div>
or the special "booted" string which will cause simctl to pick a booted device.</div>
<div>
If multiple devices are booted when the "booted" device is selected, simctl</div>
<div>
will choose one of them.</div>
<div>
<br /></div>
<div>
Subcommands:</div>
<div>
create Create a new device.</div>
<div>
clone Clone an existing device.</div>
<div>
upgrade Upgrade a device to a newer runtime.</div>
<div>
delete Delete a device or all unavailable devices.</div>
<div>
pair Create a new watch and phone pair.</div>
<div>
unpair Unpair a watch and phone pair.</div>
<div>
pair_activate Set a given pair as active.</div>
<div>
erase Erase a device's contents and settings.</div>
<div>
boot Boot a device.</div>
<div>
shutdown Shutdown a device.</div>
<div>
rename Rename a device.</div>
<div>
getenv Print an environment variable from a running device.</div>
<div>
openurl Open a URL in a device.</div>
<div>
addmedia Add photos, live photos, or videos to the photo library of a device.</div>
<div>
install Install an app on a device.</div>
<div>
uninstall Uninstall an app from a device.</div>
<div>
get_app_container Print the path of the installed app's container</div>
<div>
launch Launch an application by identifier on a device.</div>
<div>
terminate Terminate an application by identifier on a device.</div>
<div>
spawn Spawn a process on a device.</div>
<div>
list List available devices, device types, runtimes, or device pairs.</div>
<div>
icloud_sync Trigger iCloud sync on a device.</div>
<div>
pbsync Sync the pasteboard content from one pasteboard to another.</div>
<div>
pbcopy Copy standard input onto the device pasteboard.</div>
<div>
pbpaste Print the contents of the device's pasteboard to standard output.</div>
<div>
help Prints the usage for a given subcommand.</div>
<div>
io Set up a device IO operation.</div>
<div>
diagnose Collect diagnostic information and logs.</div>
<div>
logverbose enable or disable verbose logging for a device</div>
</div>
<div>
<br /></div>
<h4>
デバイス確認</h4>
<div>
$ xcrun simctl list</div>
<div>
<div>
== Device Types ==</div>
<div>
iPhone 4s (com.apple.CoreSimulator.SimDeviceType.iPhone-4s)</div>
<div>
iPhone 5 (com.apple.CoreSimulator.SimDeviceType.iPhone-5)</div>
<div>
iPhone 5s (com.apple.CoreSimulator.SimDeviceType.iPhone-5s)</div>
</div>
<div>
・・・</div>
<div>
<div>
== Runtimes ==</div>
<div>
iOS 9.3 (9.3 - 13E233) - com.apple.CoreSimulator.SimRuntime.iOS-9-3</div>
<div>
iOS 10.3 (10.3.1 - 14E8301) - com.apple.CoreSimulator.SimRuntime.iOS-10-3</div>
<div>
iOS 11.2 (11.2 - 15C107) - com.apple.CoreSimulator.SimRuntime.iOS-11-2</div>
<div>
tvOS 11.2 (11.2 - 15K104) - com.apple.CoreSimulator.SimRuntime.tvOS-11-2</div>
<div>
watchOS 4.2 (4.2 - 15S100) - com.apple.CoreSimulator.SimRuntime.watchOS-4-2</div>
<div>
== Devices ==</div>
<div>
-- iOS 9.3 --</div>
<div>
iPhone 4s (269EF856-87D0-41E1-B303-CE36A65E712E) (Shutdown)</div>
<div>
iPhone 5 (35804246-54E9-47BC-AFC2-83E639744F7B) (Shutdown)</div>
<div>
iPhone 5s (AFAA2A65-FB92-441B-820F-CE7C97BE6AF1) (Shutdown)</div>
<div>
iPhone 6 (98529E42-EE5A-404F-B476-27C61737AD12) (Shutdown)</div>
</div>
<div>
・・・</div>
<div>
<div>
-- iOS 11.2 --</div>
<div>
iPhone 5s (A698838A-704E-43C6-AE8B-1E81AB0E1311) (Shutdown)</div>
<div>
iPhone 6 (6412A351-97A7-49A1-B860-A51EDB631C48) (<span style="color: red;">Booted</span>)</div>
<div>
iPhone 6 Plus (8AD29BA9-06A5-4036-BA95-477D05FE30AB) (Shutdown)</div>
<div>
iPhone 6s (6048B53E-87FF-429C-A5A1-5BE62CB8C2F4) (Shutdown)</div>
</div>
<div>
<br /></div>
<h4>
Open URL</h4>
<div>
<div>
$ xcrun simctl openurl</div>
<div>
Usage: simctl openurl <device> <url></url></device></div>
</div>
<div>
<br /></div>
<div>
deviceとURLを指定する</div>
<div>
<br /></div>
<div>
deviceは先ほどしらべたUUIDでも良いし、bootedと指定しても良い</div>
hrkhttp://www.blogger.com/profile/14369445590054241924noreply@blogger.com0tag:blogger.com,1999:blog-3058957617329024387.post-9063098209008992522018-02-22T23:24:00.000+09:002018-02-22T23:24:58.923+09:00react-navigationのバージョンアップreact-navigationのバージョンをあげてもう一度ドキュメントをよみなおしてみる<br />
<br />
<h3>
Headerのボタンの挙動</h3>
<a href="https://reactnavigation.org/docs/header-buttons.html">https://reactnavigation.org/docs/header-buttons.html</a><br />
<br />
navigationOptionがstaticメソッドのため、navigation.state.paramsを使ってやりとりを行う<br />
<br />
<span style="background-color: white; color: #393a34; font-family: monospace; font-size: 14px; font-variant-ligatures: normal; orphans: 2; white-space: pre; widows: 2;"> </span><span class="token keyword" style="border: 0px; color: #00a4db; font-family: monospace; font-size: 14px; font-stretch: inherit; font-variant-east-asian: inherit; font-variant-ligatures: normal; font-variant-numeric: inherit; line-height: inherit; margin: 0px; orphans: 2; padding: 0px; vertical-align: baseline; white-space: pre; widows: 2;">static</span><span style="background-color: white; color: #393a34; font-family: monospace; font-size: 14px; font-variant-ligatures: normal; orphans: 2; white-space: pre; widows: 2;"> </span><span class="token function-variable function" style="border: 0px; color: #9a050f; font-family: monospace; font-size: 14px; font-stretch: inherit; font-variant-east-asian: inherit; font-variant-ligatures: normal; font-variant-numeric: inherit; font-weight: bold; line-height: inherit; margin: 0px; orphans: 2; padding: 0px; vertical-align: baseline; white-space: pre; widows: 2;">navigationOptions</span><span style="background-color: white; color: #393a34; font-family: monospace; font-size: 14px; font-variant-ligatures: normal; orphans: 2; white-space: pre; widows: 2;"> </span><span class="token operator" style="border: 0px; color: #393a34; font-family: monospace; font-size: 14px; font-stretch: inherit; font-variant-east-asian: inherit; font-variant-ligatures: normal; font-variant-numeric: inherit; line-height: inherit; margin: 0px; orphans: 2; padding: 0px; vertical-align: baseline; white-space: pre; widows: 2;">=</span><span style="background-color: white; color: #393a34; font-family: monospace; font-size: 14px; font-variant-ligatures: normal; orphans: 2; white-space: pre; widows: 2;"> </span><span class="token punctuation" style="border: 0px; color: #393a34; font-family: monospace; font-size: 14px; font-stretch: inherit; font-variant-east-asian: inherit; font-variant-ligatures: normal; font-variant-numeric: inherit; line-height: inherit; margin: 0px; orphans: 2; padding: 0px; vertical-align: baseline; white-space: pre; widows: 2;">(</span><span class="token punctuation" style="border: 0px; color: #393a34; font-family: monospace; font-size: 14px; font-stretch: inherit; font-variant-east-asian: inherit; font-variant-ligatures: normal; font-variant-numeric: inherit; line-height: inherit; margin: 0px; orphans: 2; padding: 0px; vertical-align: baseline; white-space: pre; widows: 2;">{</span><span style="background-color: white; color: #393a34; font-family: monospace; font-size: 14px; font-variant-ligatures: normal; orphans: 2; white-space: pre; widows: 2;"> navigation </span><span class="token punctuation" style="border: 0px; color: #393a34; font-family: monospace; font-size: 14px; font-stretch: inherit; font-variant-east-asian: inherit; font-variant-ligatures: normal; font-variant-numeric: inherit; line-height: inherit; margin: 0px; orphans: 2; padding: 0px; vertical-align: baseline; white-space: pre; widows: 2;">}</span><span class="token punctuation" style="border: 0px; color: #393a34; font-family: monospace; font-size: 14px; font-stretch: inherit; font-variant-east-asian: inherit; font-variant-ligatures: normal; font-variant-numeric: inherit; line-height: inherit; margin: 0px; orphans: 2; padding: 0px; vertical-align: baseline; white-space: pre; widows: 2;">)</span><span style="background-color: white; color: #393a34; font-family: monospace; font-size: 14px; font-variant-ligatures: normal; orphans: 2; white-space: pre; widows: 2;"> </span><span class="token operator" style="border: 0px; color: #393a34; font-family: monospace; font-size: 14px; font-stretch: inherit; font-variant-east-asian: inherit; font-variant-ligatures: normal; font-variant-numeric: inherit; line-height: inherit; margin: 0px; orphans: 2; padding: 0px; vertical-align: baseline; white-space: pre; widows: 2;">=></span><span style="background-color: white; color: #393a34; font-family: monospace; font-size: 14px; font-variant-ligatures: normal; orphans: 2; white-space: pre; widows: 2;"> </span><span class="token punctuation" style="border: 0px; color: #393a34; font-family: monospace; font-size: 14px; font-stretch: inherit; font-variant-east-asian: inherit; font-variant-ligatures: normal; font-variant-numeric: inherit; line-height: inherit; margin: 0px; orphans: 2; padding: 0px; vertical-align: baseline; white-space: pre; widows: 2;">{</span><span style="background-color: white; color: #393a34; font-family: monospace; font-size: 14px; font-variant-ligatures: normal; orphans: 2; white-space: pre; widows: 2;">
</span><span class="token keyword" style="border: 0px; color: #00a4db; font-family: monospace; font-size: 14px; font-stretch: inherit; font-variant-east-asian: inherit; font-variant-ligatures: normal; font-variant-numeric: inherit; line-height: inherit; margin: 0px; orphans: 2; padding: 0px; vertical-align: baseline; white-space: pre; widows: 2;">const</span><span style="background-color: white; color: #393a34; font-family: monospace; font-size: 14px; font-variant-ligatures: normal; orphans: 2; white-space: pre; widows: 2;"> params </span><span class="token operator" style="border: 0px; color: #393a34; font-family: monospace; font-size: 14px; font-stretch: inherit; font-variant-east-asian: inherit; font-variant-ligatures: normal; font-variant-numeric: inherit; line-height: inherit; margin: 0px; orphans: 2; padding: 0px; vertical-align: baseline; white-space: pre; widows: 2;">=</span><span style="background-color: white; color: #393a34; font-family: monospace; font-size: 14px; font-variant-ligatures: normal; orphans: 2; white-space: pre; widows: 2;"> navigation</span><span class="token punctuation" style="border: 0px; color: #393a34; font-family: monospace; font-size: 14px; font-stretch: inherit; font-variant-east-asian: inherit; font-variant-ligatures: normal; font-variant-numeric: inherit; line-height: inherit; margin: 0px; orphans: 2; padding: 0px; vertical-align: baseline; white-space: pre; widows: 2;">.</span><span style="background-color: white; color: #393a34; font-family: monospace; font-size: 14px; font-variant-ligatures: normal; orphans: 2; white-space: pre; widows: 2;">state</span><span class="token punctuation" style="border: 0px; color: #393a34; font-family: monospace; font-size: 14px; font-stretch: inherit; font-variant-east-asian: inherit; font-variant-ligatures: normal; font-variant-numeric: inherit; line-height: inherit; margin: 0px; orphans: 2; padding: 0px; vertical-align: baseline; white-space: pre; widows: 2;">.</span><span style="background-color: white; color: #393a34; font-family: monospace; font-size: 14px; font-variant-ligatures: normal; orphans: 2; white-space: pre; widows: 2;">params </span><span class="token operator" style="border: 0px; color: #393a34; font-family: monospace; font-size: 14px; font-stretch: inherit; font-variant-east-asian: inherit; font-variant-ligatures: normal; font-variant-numeric: inherit; line-height: inherit; margin: 0px; orphans: 2; padding: 0px; vertical-align: baseline; white-space: pre; widows: 2;">||</span><span style="background-color: white; color: #393a34; font-family: monospace; font-size: 14px; font-variant-ligatures: normal; orphans: 2; white-space: pre; widows: 2;"> </span><span class="token punctuation" style="border: 0px; color: #393a34; font-family: monospace; font-size: 14px; font-stretch: inherit; font-variant-east-asian: inherit; font-variant-ligatures: normal; font-variant-numeric: inherit; line-height: inherit; margin: 0px; orphans: 2; padding: 0px; vertical-align: baseline; white-space: pre; widows: 2;">{</span><span class="token punctuation" style="border: 0px; color: #393a34; font-family: monospace; font-size: 14px; font-stretch: inherit; font-variant-east-asian: inherit; font-variant-ligatures: normal; font-variant-numeric: inherit; line-height: inherit; margin: 0px; orphans: 2; padding: 0px; vertical-align: baseline; white-space: pre; widows: 2;">}</span><span class="token punctuation" style="border: 0px; color: #393a34; font-family: monospace; font-size: 14px; font-stretch: inherit; font-variant-east-asian: inherit; font-variant-ligatures: normal; font-variant-numeric: inherit; line-height: inherit; margin: 0px; orphans: 2; padding: 0px; vertical-align: baseline; white-space: pre; widows: 2;">;</span><span style="color: #393a34; font-family: monospace; font-size: 14px; font-variant-ligatures: normal; orphans: 2; white-space: pre; widows: 2;"></span><span style="background-color: white; color: #393a34; font-family: monospace; font-size: 14px; font-variant-ligatures: normal; orphans: 2; white-space: pre; widows: 2;">
</span><span style="color: #393a34; font-family: monospace; font-size: 14px; font-variant-ligatures: normal; orphans: 2; white-space: pre; widows: 2;"></span><span style="background-color: white; color: #393a34; font-family: monospace; font-size: 14px; font-variant-ligatures: normal; orphans: 2; white-space: pre; widows: 2;">
</span><span class="token keyword" style="border: 0px; color: #00a4db; font-family: monospace; font-size: 14px; font-stretch: inherit; font-variant-east-asian: inherit; font-variant-ligatures: normal; font-variant-numeric: inherit; line-height: inherit; margin: 0px; orphans: 2; padding: 0px; vertical-align: baseline; white-space: pre; widows: 2;">return</span><span style="background-color: white; color: #393a34; font-family: monospace; font-size: 14px; font-variant-ligatures: normal; orphans: 2; white-space: pre; widows: 2;"> </span><span class="token punctuation" style="border: 0px; color: #393a34; font-family: monospace; font-size: 14px; font-stretch: inherit; font-variant-east-asian: inherit; font-variant-ligatures: normal; font-variant-numeric: inherit; line-height: inherit; margin: 0px; orphans: 2; padding: 0px; vertical-align: baseline; white-space: pre; widows: 2;">{</span><span style="background-color: white; color: #393a34; font-family: monospace; font-size: 14px; font-variant-ligatures: normal; orphans: 2; white-space: pre; widows: 2;">
headerTitle</span><span class="token punctuation" style="border: 0px; color: #393a34; font-family: monospace; font-size: 14px; font-stretch: inherit; font-variant-east-asian: inherit; font-variant-ligatures: normal; font-variant-numeric: inherit; line-height: inherit; margin: 0px; orphans: 2; padding: 0px; vertical-align: baseline; white-space: pre; widows: 2;">:</span><span style="background-color: white; color: #393a34; font-family: monospace; font-size: 14px; font-variant-ligatures: normal; orphans: 2; white-space: pre; widows: 2;"> </span><span class="token tag" style="border: 0px; color: #00009f; font-family: monospace; font-size: 14px; font-stretch: inherit; font-variant-east-asian: inherit; font-variant-ligatures: normal; font-variant-numeric: inherit; line-height: inherit; margin: 0px; orphans: 2; padding: 0px; vertical-align: baseline; white-space: pre; widows: 2;"><span class="token tag" style="border: 0px; font-family: inherit; font-size: inherit; font-stretch: inherit; font-style: inherit; font-variant-alternates: inherit; font-variant-caps: inherit; font-variant-east-asian: inherit; font-variant-ligatures: inherit; font-variant-numeric: inherit; font-variant-position: inherit; line-height: inherit; margin: 0px; padding: 0px; vertical-align: baseline;"><span class="token punctuation" style="border: 0px; color: #393a34; font-family: inherit; font-size: inherit; font-stretch: inherit; font-style: inherit; font-variant-alternates: inherit; font-variant-caps: inherit; font-variant-east-asian: inherit; font-variant-ligatures: inherit; font-variant-numeric: inherit; font-variant-position: inherit; line-height: inherit; margin: 0px; padding: 0px; vertical-align: baseline;"><</span>LogoTitle</span> <span class="token punctuation" style="border: 0px; color: #393a34; font-family: inherit; font-size: inherit; font-stretch: inherit; font-style: inherit; font-variant-alternates: inherit; font-variant-caps: inherit; font-variant-east-asian: inherit; font-variant-ligatures: inherit; font-variant-numeric: inherit; font-variant-position: inherit; line-height: inherit; margin: 0px; padding: 0px; vertical-align: baseline;">/></span></span><span class="token punctuation" style="border: 0px; color: #393a34; font-family: monospace; font-size: 14px; font-stretch: inherit; font-variant-east-asian: inherit; font-variant-ligatures: normal; font-variant-numeric: inherit; line-height: inherit; margin: 0px; orphans: 2; padding: 0px; vertical-align: baseline; white-space: pre; widows: 2;">,</span><span style="background-color: white; color: #393a34; font-family: monospace; font-size: 14px; font-variant-ligatures: normal; orphans: 2; white-space: pre; widows: 2;">
headerRight</span><span class="token punctuation" style="border: 0px; color: #393a34; font-family: monospace; font-size: 14px; font-stretch: inherit; font-variant-east-asian: inherit; font-variant-ligatures: normal; font-variant-numeric: inherit; line-height: inherit; margin: 0px; orphans: 2; padding: 0px; vertical-align: baseline; white-space: pre; widows: 2;">:</span><span style="background-color: white; color: #393a34; font-family: monospace; font-size: 14px; font-variant-ligatures: normal; orphans: 2; white-space: pre; widows: 2;"> </span><span class="token punctuation" style="border: 0px; color: #393a34; font-family: monospace; font-size: 14px; font-stretch: inherit; font-variant-east-asian: inherit; font-variant-ligatures: normal; font-variant-numeric: inherit; line-height: inherit; margin: 0px; orphans: 2; padding: 0px; vertical-align: baseline; white-space: pre; widows: 2;">(</span><span style="background-color: white; color: #393a34; font-family: monospace; font-size: 14px; font-variant-ligatures: normal; orphans: 2; white-space: pre; widows: 2;">
</span><span class="token tag" style="border: 0px; color: #00009f; font-family: monospace; font-size: 14px; font-stretch: inherit; font-variant-east-asian: inherit; font-variant-ligatures: normal; font-variant-numeric: inherit; line-height: inherit; margin: 0px; orphans: 2; padding: 0px; vertical-align: baseline; white-space: pre; widows: 2;"><span class="token tag" style="border: 0px; font-family: inherit; font-size: inherit; font-stretch: inherit; font-style: inherit; font-variant-alternates: inherit; font-variant-caps: inherit; font-variant-east-asian: inherit; font-variant-ligatures: inherit; font-variant-numeric: inherit; font-variant-position: inherit; line-height: inherit; margin: 0px; padding: 0px; vertical-align: baseline;"><span class="token punctuation" style="border: 0px; color: #393a34; font-family: inherit; font-size: inherit; font-stretch: inherit; font-style: inherit; font-variant-alternates: inherit; font-variant-caps: inherit; font-variant-east-asian: inherit; font-variant-ligatures: inherit; font-variant-numeric: inherit; font-variant-position: inherit; line-height: inherit; margin: 0px; padding: 0px; vertical-align: baseline;"><</span>Button</span> <span class="token attr-name" style="border: 0px; color: #00a4db; font-family: inherit; font-size: inherit; font-stretch: inherit; font-style: inherit; font-variant-alternates: inherit; font-variant-caps: inherit; font-variant-east-asian: inherit; font-variant-ligatures: inherit; font-variant-numeric: inherit; font-variant-position: inherit; line-height: inherit; margin: 0px; padding: 0px; vertical-align: baseline;">onPress</span><span class="token script language-javascript" style="border: 0px; font-family: inherit; font-size: inherit; font-stretch: inherit; font-style: inherit; font-variant-alternates: inherit; font-variant-caps: inherit; font-variant-east-asian: inherit; font-variant-ligatures: inherit; font-variant-numeric: inherit; font-variant-position: inherit; line-height: inherit; margin: 0px; padding: 0px; vertical-align: baseline;"><span class="token punctuation" style="border: 0px; color: #393a34; font-family: inherit; font-size: inherit; font-stretch: inherit; font-style: inherit; font-variant-alternates: inherit; font-variant-caps: inherit; font-variant-east-asian: inherit; font-variant-ligatures: inherit; font-variant-numeric: inherit; font-variant-position: inherit; line-height: inherit; margin: 0px; padding: 0px; vertical-align: baseline;">=</span><span class="token punctuation" style="border: 0px; color: #393a34; font-family: inherit; font-size: inherit; font-stretch: inherit; font-style: inherit; font-variant-alternates: inherit; font-variant-caps: inherit; font-variant-east-asian: inherit; font-variant-ligatures: inherit; font-variant-numeric: inherit; font-variant-position: inherit; line-height: inherit; margin: 0px; padding: 0px; vertical-align: baseline;">{</span>params<span class="token punctuation" style="border: 0px; color: #393a34; font-family: inherit; font-size: inherit; font-stretch: inherit; font-style: inherit; font-variant-alternates: inherit; font-variant-caps: inherit; font-variant-east-asian: inherit; font-variant-ligatures: inherit; font-variant-numeric: inherit; font-variant-position: inherit; line-height: inherit; margin: 0px; padding: 0px; vertical-align: baseline;">.</span>increaseCount<span class="token punctuation" style="border: 0px; color: #393a34; font-family: inherit; font-size: inherit; font-stretch: inherit; font-style: inherit; font-variant-alternates: inherit; font-variant-caps: inherit; font-variant-east-asian: inherit; font-variant-ligatures: inherit; font-variant-numeric: inherit; font-variant-position: inherit; line-height: inherit; margin: 0px; padding: 0px; vertical-align: baseline;">}</span></span> <span class="token attr-name" style="border: 0px; color: #00a4db; font-family: inherit; font-size: inherit; font-stretch: inherit; font-style: inherit; font-variant-alternates: inherit; font-variant-caps: inherit; font-variant-east-asian: inherit; font-variant-ligatures: inherit; font-variant-numeric: inherit; font-variant-position: inherit; line-height: inherit; margin: 0px; padding: 0px; vertical-align: baseline;">title</span><span class="token attr-value" style="border: 0px; color: #e3116c; font-family: inherit; font-size: inherit; font-stretch: inherit; font-style: inherit; font-variant-alternates: inherit; font-variant-caps: inherit; font-variant-east-asian: inherit; font-variant-ligatures: inherit; font-variant-numeric: inherit; font-variant-position: inherit; line-height: inherit; margin: 0px; padding: 0px; vertical-align: baseline;"><span class="token punctuation" style="border: 0px; color: #393a34; font-family: inherit; font-size: inherit; font-stretch: inherit; font-style: inherit; font-variant-alternates: inherit; font-variant-caps: inherit; font-variant-east-asian: inherit; font-variant-ligatures: inherit; font-variant-numeric: inherit; font-variant-position: inherit; line-height: inherit; margin: 0px; padding: 0px; vertical-align: baseline;">=</span><span class="token punctuation" style="border: 0px; color: #393a34; font-family: inherit; font-size: inherit; font-stretch: inherit; font-style: inherit; font-variant-alternates: inherit; font-variant-caps: inherit; font-variant-east-asian: inherit; font-variant-ligatures: inherit; font-variant-numeric: inherit; font-variant-position: inherit; line-height: inherit; margin: 0px; padding: 0px; vertical-align: baseline;">"</span>+1<span class="token punctuation" style="border: 0px; color: #393a34; font-family: inherit; font-size: inherit; font-stretch: inherit; font-style: inherit; font-variant-alternates: inherit; font-variant-caps: inherit; font-variant-east-asian: inherit; font-variant-ligatures: inherit; font-variant-numeric: inherit; font-variant-position: inherit; line-height: inherit; margin: 0px; padding: 0px; vertical-align: baseline;">"</span></span> <span class="token attr-name" style="border: 0px; color: #00a4db; font-family: inherit; font-size: inherit; font-stretch: inherit; font-style: inherit; font-variant-alternates: inherit; font-variant-caps: inherit; font-variant-east-asian: inherit; font-variant-ligatures: inherit; font-variant-numeric: inherit; font-variant-position: inherit; line-height: inherit; margin: 0px; padding: 0px; vertical-align: baseline;">color</span><span class="token attr-value" style="border: 0px; color: #e3116c; font-family: inherit; font-size: inherit; font-stretch: inherit; font-style: inherit; font-variant-alternates: inherit; font-variant-caps: inherit; font-variant-east-asian: inherit; font-variant-ligatures: inherit; font-variant-numeric: inherit; font-variant-position: inherit; line-height: inherit; margin: 0px; padding: 0px; vertical-align: baseline;"><span class="token punctuation" style="border: 0px; color: #393a34; font-family: inherit; font-size: inherit; font-stretch: inherit; font-style: inherit; font-variant-alternates: inherit; font-variant-caps: inherit; font-variant-east-asian: inherit; font-variant-ligatures: inherit; font-variant-numeric: inherit; font-variant-position: inherit; line-height: inherit; margin: 0px; padding: 0px; vertical-align: baseline;">=</span><span class="token punctuation" style="border: 0px; color: #393a34; font-family: inherit; font-size: inherit; font-stretch: inherit; font-style: inherit; font-variant-alternates: inherit; font-variant-caps: inherit; font-variant-east-asian: inherit; font-variant-ligatures: inherit; font-variant-numeric: inherit; font-variant-position: inherit; line-height: inherit; margin: 0px; padding: 0px; vertical-align: baseline;">"</span>#fff<span class="token punctuation" style="border: 0px; color: #393a34; font-family: inherit; font-size: inherit; font-stretch: inherit; font-style: inherit; font-variant-alternates: inherit; font-variant-caps: inherit; font-variant-east-asian: inherit; font-variant-ligatures: inherit; font-variant-numeric: inherit; font-variant-position: inherit; line-height: inherit; margin: 0px; padding: 0px; vertical-align: baseline;">"</span></span> <span class="token punctuation" style="border: 0px; color: #393a34; font-family: inherit; font-size: inherit; font-stretch: inherit; font-style: inherit; font-variant-alternates: inherit; font-variant-caps: inherit; font-variant-east-asian: inherit; font-variant-ligatures: inherit; font-variant-numeric: inherit; font-variant-position: inherit; line-height: inherit; margin: 0px; padding: 0px; vertical-align: baseline;">/></span></span><span style="background-color: white; color: #393a34; font-family: monospace; font-size: 14px; font-variant-ligatures: normal; orphans: 2; white-space: pre; widows: 2;">
</span><span class="token punctuation" style="border: 0px; color: #393a34; font-family: monospace; font-size: 14px; font-stretch: inherit; font-variant-east-asian: inherit; font-variant-ligatures: normal; font-variant-numeric: inherit; line-height: inherit; margin: 0px; orphans: 2; padding: 0px; vertical-align: baseline; white-space: pre; widows: 2;">)</span><span class="token punctuation" style="border: 0px; color: #393a34; font-family: monospace; font-size: 14px; font-stretch: inherit; font-variant-east-asian: inherit; font-variant-ligatures: normal; font-variant-numeric: inherit; line-height: inherit; margin: 0px; orphans: 2; padding: 0px; vertical-align: baseline; white-space: pre; widows: 2;">,</span><span style="background-color: white; color: #393a34; font-family: monospace; font-size: 14px; font-variant-ligatures: normal; orphans: 2; white-space: pre; widows: 2;">
</span><span class="token punctuation" style="border: 0px; color: #393a34; font-family: monospace; font-size: 14px; font-stretch: inherit; font-variant-east-asian: inherit; font-variant-ligatures: normal; font-variant-numeric: inherit; line-height: inherit; margin: 0px; orphans: 2; padding: 0px; vertical-align: baseline; white-space: pre; widows: 2;">}</span><span class="token punctuation" style="border: 0px; color: #393a34; font-family: monospace; font-size: 14px; font-stretch: inherit; font-variant-east-asian: inherit; font-variant-ligatures: normal; font-variant-numeric: inherit; line-height: inherit; margin: 0px; orphans: 2; padding: 0px; vertical-align: baseline; white-space: pre; widows: 2;">;</span><span style="background-color: white; color: #393a34; font-family: monospace; font-size: 14px; font-variant-ligatures: normal; orphans: 2; white-space: pre; widows: 2;">
</span><span class="token punctuation" style="border: 0px; color: #393a34; font-family: monospace; font-size: 14px; font-stretch: inherit; font-variant-east-asian: inherit; font-variant-ligatures: normal; font-variant-numeric: inherit; line-height: inherit; margin: 0px; orphans: 2; padding: 0px; vertical-align: baseline; white-space: pre; widows: 2;">}</span><span class="token punctuation" style="border: 0px; color: #393a34; font-family: monospace; font-size: 14px; font-stretch: inherit; font-variant-east-asian: inherit; font-variant-ligatures: normal; font-variant-numeric: inherit; line-height: inherit; margin: 0px; orphans: 2; padding: 0px; vertical-align: baseline; white-space: pre; widows: 2;">;</span><span style="color: #393a34; font-family: monospace; font-size: 14px; font-variant-ligatures: normal; orphans: 2; white-space: pre; widows: 2;"></span><span style="background-color: white; color: #393a34; font-family: monospace; font-size: 14px; font-variant-ligatures: normal; orphans: 2; white-space: pre; widows: 2;">
</span><span style="color: #393a34; font-family: monospace; font-size: 14px; font-variant-ligatures: normal; orphans: 2; white-space: pre; widows: 2;"></span><span style="background-color: white; color: #393a34; font-family: monospace; font-size: 14px; font-variant-ligatures: normal; orphans: 2; white-space: pre; widows: 2;">
</span><span class="token function" style="border: 0px; color: #9a050f; font-family: monospace; font-size: 14px; font-stretch: inherit; font-variant-east-asian: inherit; font-variant-ligatures: normal; font-variant-numeric: inherit; font-weight: bold; line-height: inherit; margin: 0px; orphans: 2; padding: 0px; vertical-align: baseline; white-space: pre; widows: 2;">componentWillMount</span><span class="token punctuation" style="border: 0px; color: #393a34; font-family: monospace; font-size: 14px; font-stretch: inherit; font-variant-east-asian: inherit; font-variant-ligatures: normal; font-variant-numeric: inherit; line-height: inherit; margin: 0px; orphans: 2; padding: 0px; vertical-align: baseline; white-space: pre; widows: 2;">(</span><span class="token punctuation" style="border: 0px; color: #393a34; font-family: monospace; font-size: 14px; font-stretch: inherit; font-variant-east-asian: inherit; font-variant-ligatures: normal; font-variant-numeric: inherit; line-height: inherit; margin: 0px; orphans: 2; padding: 0px; vertical-align: baseline; white-space: pre; widows: 2;">)</span><span style="background-color: white; color: #393a34; font-family: monospace; font-size: 14px; font-variant-ligatures: normal; orphans: 2; white-space: pre; widows: 2;"> </span><span class="token punctuation" style="border: 0px; color: #393a34; font-family: monospace; font-size: 14px; font-stretch: inherit; font-variant-east-asian: inherit; font-variant-ligatures: normal; font-variant-numeric: inherit; line-height: inherit; margin: 0px; orphans: 2; padding: 0px; vertical-align: baseline; white-space: pre; widows: 2;">{</span><span style="background-color: white; color: #393a34; font-family: monospace; font-size: 14px; font-variant-ligatures: normal; orphans: 2; white-space: pre; widows: 2;">
</span><span class="token keyword" style="border: 0px; color: #00a4db; font-family: monospace; font-size: 14px; font-stretch: inherit; font-variant-east-asian: inherit; font-variant-ligatures: normal; font-variant-numeric: inherit; line-height: inherit; margin: 0px; orphans: 2; padding: 0px; vertical-align: baseline; white-space: pre; widows: 2;">this</span><span class="token punctuation" style="border: 0px; color: #393a34; font-family: monospace; font-size: 14px; font-stretch: inherit; font-variant-east-asian: inherit; font-variant-ligatures: normal; font-variant-numeric: inherit; line-height: inherit; margin: 0px; orphans: 2; padding: 0px; vertical-align: baseline; white-space: pre; widows: 2;">.</span><span style="background-color: white; color: #393a34; font-family: monospace; font-size: 14px; font-variant-ligatures: normal; orphans: 2; white-space: pre; widows: 2;">props</span><span class="token punctuation" style="border: 0px; color: #393a34; font-family: monospace; font-size: 14px; font-stretch: inherit; font-variant-east-asian: inherit; font-variant-ligatures: normal; font-variant-numeric: inherit; line-height: inherit; margin: 0px; orphans: 2; padding: 0px; vertical-align: baseline; white-space: pre; widows: 2;">.</span><span style="background-color: white; color: #393a34; font-family: monospace; font-size: 14px; font-variant-ligatures: normal; orphans: 2; white-space: pre; widows: 2;">navigation</span><span class="token punctuation" style="border: 0px; color: #393a34; font-family: monospace; font-size: 14px; font-stretch: inherit; font-variant-east-asian: inherit; font-variant-ligatures: normal; font-variant-numeric: inherit; line-height: inherit; margin: 0px; orphans: 2; padding: 0px; vertical-align: baseline; white-space: pre; widows: 2;">.</span><span class="token function" style="border: 0px; color: #9a050f; font-family: monospace; font-size: 14px; font-stretch: inherit; font-variant-east-asian: inherit; font-variant-ligatures: normal; font-variant-numeric: inherit; font-weight: bold; line-height: inherit; margin: 0px; orphans: 2; padding: 0px; vertical-align: baseline; white-space: pre; widows: 2;">setParams</span><span class="token punctuation" style="border: 0px; color: #393a34; font-family: monospace; font-size: 14px; font-stretch: inherit; font-variant-east-asian: inherit; font-variant-ligatures: normal; font-variant-numeric: inherit; line-height: inherit; margin: 0px; orphans: 2; padding: 0px; vertical-align: baseline; white-space: pre; widows: 2;">(</span><span class="token punctuation" style="border: 0px; color: #393a34; font-family: monospace; font-size: 14px; font-stretch: inherit; font-variant-east-asian: inherit; font-variant-ligatures: normal; font-variant-numeric: inherit; line-height: inherit; margin: 0px; orphans: 2; padding: 0px; vertical-align: baseline; white-space: pre; widows: 2;">{</span><span style="background-color: white; color: #393a34; font-family: monospace; font-size: 14px; font-variant-ligatures: normal; orphans: 2; white-space: pre; widows: 2;"> increaseCount</span><span class="token punctuation" style="border: 0px; color: #393a34; font-family: monospace; font-size: 14px; font-stretch: inherit; font-variant-east-asian: inherit; font-variant-ligatures: normal; font-variant-numeric: inherit; line-height: inherit; margin: 0px; orphans: 2; padding: 0px; vertical-align: baseline; white-space: pre; widows: 2;">:</span><span style="background-color: white; color: #393a34; font-family: monospace; font-size: 14px; font-variant-ligatures: normal; orphans: 2; white-space: pre; widows: 2;"> </span><span class="token keyword" style="border: 0px; color: #00a4db; font-family: monospace; font-size: 14px; font-stretch: inherit; font-variant-east-asian: inherit; font-variant-ligatures: normal; font-variant-numeric: inherit; line-height: inherit; margin: 0px; orphans: 2; padding: 0px; vertical-align: baseline; white-space: pre; widows: 2;">this</span><span class="token punctuation" style="border: 0px; color: #393a34; font-family: monospace; font-size: 14px; font-stretch: inherit; font-variant-east-asian: inherit; font-variant-ligatures: normal; font-variant-numeric: inherit; line-height: inherit; margin: 0px; orphans: 2; padding: 0px; vertical-align: baseline; white-space: pre; widows: 2;">.</span><span style="background-color: white; color: #393a34; font-family: monospace; font-size: 14px; font-variant-ligatures: normal; orphans: 2; white-space: pre; widows: 2;">_increaseCount </span><span class="token punctuation" style="border: 0px; color: #393a34; font-family: monospace; font-size: 14px; font-stretch: inherit; font-variant-east-asian: inherit; font-variant-ligatures: normal; font-variant-numeric: inherit; line-height: inherit; margin: 0px; orphans: 2; padding: 0px; vertical-align: baseline; white-space: pre; widows: 2;">}</span><span class="token punctuation" style="border: 0px; color: #393a34; font-family: monospace; font-size: 14px; font-stretch: inherit; font-variant-east-asian: inherit; font-variant-ligatures: normal; font-variant-numeric: inherit; line-height: inherit; margin: 0px; orphans: 2; padding: 0px; vertical-align: baseline; white-space: pre; widows: 2;">)</span><span class="token punctuation" style="border: 0px; color: #393a34; font-family: monospace; font-size: 14px; font-stretch: inherit; font-variant-east-asian: inherit; font-variant-ligatures: normal; font-variant-numeric: inherit; line-height: inherit; margin: 0px; orphans: 2; padding: 0px; vertical-align: baseline; white-space: pre; widows: 2;">;</span><span style="background-color: white; color: #393a34; font-family: monospace; font-size: 14px; font-variant-ligatures: normal; orphans: 2; white-space: pre; widows: 2;">
</span><span class="token punctuation" style="border: 0px; color: #393a34; font-family: monospace; font-size: 14px; font-stretch: inherit; font-variant-east-asian: inherit; font-variant-ligatures: normal; font-variant-numeric: inherit; line-height: inherit; margin: 0px; orphans: 2; padding: 0px; vertical-align: baseline; white-space: pre; widows: 2;">}</span><span style="color: #393a34; font-family: monospace; font-size: 14px; font-variant-ligatures: normal; orphans: 2; white-space: pre; widows: 2;"></span><span style="background-color: white; color: #393a34; font-family: monospace; font-size: 14px; font-variant-ligatures: normal; orphans: 2; white-space: pre; widows: 2;">
</span><span style="color: #393a34; font-family: monospace; font-size: 14px; font-variant-ligatures: normal; orphans: 2; white-space: pre; widows: 2;"></span><span style="background-color: white; color: #393a34; font-family: monospace; font-size: 14px; font-variant-ligatures: normal; orphans: 2; white-space: pre; widows: 2;">
state </span><span class="token operator" style="border: 0px; color: #393a34; font-family: monospace; font-size: 14px; font-stretch: inherit; font-variant-east-asian: inherit; font-variant-ligatures: normal; font-variant-numeric: inherit; line-height: inherit; margin: 0px; orphans: 2; padding: 0px; vertical-align: baseline; white-space: pre; widows: 2;">=</span><span style="background-color: white; color: #393a34; font-family: monospace; font-size: 14px; font-variant-ligatures: normal; orphans: 2; white-space: pre; widows: 2;"> </span><span class="token punctuation" style="border: 0px; color: #393a34; font-family: monospace; font-size: 14px; font-stretch: inherit; font-variant-east-asian: inherit; font-variant-ligatures: normal; font-variant-numeric: inherit; line-height: inherit; margin: 0px; orphans: 2; padding: 0px; vertical-align: baseline; white-space: pre; widows: 2;">{</span><span style="background-color: white; color: #393a34; font-family: monospace; font-size: 14px; font-variant-ligatures: normal; orphans: 2; white-space: pre; widows: 2;">
count</span><span class="token punctuation" style="border: 0px; color: #393a34; font-family: monospace; font-size: 14px; font-stretch: inherit; font-variant-east-asian: inherit; font-variant-ligatures: normal; font-variant-numeric: inherit; line-height: inherit; margin: 0px; orphans: 2; padding: 0px; vertical-align: baseline; white-space: pre; widows: 2;">:</span><span style="background-color: white; color: #393a34; font-family: monospace; font-size: 14px; font-variant-ligatures: normal; orphans: 2; white-space: pre; widows: 2;"> </span><span class="token number" style="border: 0px; color: #36acaa; font-family: monospace; font-size: 14px; font-stretch: inherit; font-variant-east-asian: inherit; font-variant-ligatures: normal; font-variant-numeric: inherit; line-height: inherit; margin: 0px; orphans: 2; padding: 0px; vertical-align: baseline; white-space: pre; widows: 2;">0</span><span class="token punctuation" style="border: 0px; color: #393a34; font-family: monospace; font-size: 14px; font-stretch: inherit; font-variant-east-asian: inherit; font-variant-ligatures: normal; font-variant-numeric: inherit; line-height: inherit; margin: 0px; orphans: 2; padding: 0px; vertical-align: baseline; white-space: pre; widows: 2;">,</span><span style="background-color: white; color: #393a34; font-family: monospace; font-size: 14px; font-variant-ligatures: normal; orphans: 2; white-space: pre; widows: 2;">
</span><span class="token punctuation" style="border: 0px; color: #393a34; font-family: monospace; font-size: 14px; font-stretch: inherit; font-variant-east-asian: inherit; font-variant-ligatures: normal; font-variant-numeric: inherit; line-height: inherit; margin: 0px; orphans: 2; padding: 0px; vertical-align: baseline; white-space: pre; widows: 2;">}</span><span class="token punctuation" style="border: 0px; color: #393a34; font-family: monospace; font-size: 14px; font-stretch: inherit; font-variant-east-asian: inherit; font-variant-ligatures: normal; font-variant-numeric: inherit; line-height: inherit; margin: 0px; orphans: 2; padding: 0px; vertical-align: baseline; white-space: pre; widows: 2;">;</span><span style="color: #393a34; font-family: monospace; font-size: 14px; font-variant-ligatures: normal; orphans: 2; white-space: pre; widows: 2;"></span><span style="background-color: white; color: #393a34; font-family: monospace; font-size: 14px; font-variant-ligatures: normal; orphans: 2; white-space: pre; widows: 2;">
</span><span style="color: #393a34; font-family: monospace; font-size: 14px; font-variant-ligatures: normal; orphans: 2; white-space: pre; widows: 2;"></span><span style="background-color: white; color: #393a34; font-family: monospace; font-size: 14px; font-variant-ligatures: normal; orphans: 2; white-space: pre; widows: 2;">
</span><span class="token function-variable function" style="border: 0px; color: #9a050f; font-family: monospace; font-size: 14px; font-stretch: inherit; font-variant-east-asian: inherit; font-variant-ligatures: normal; font-variant-numeric: inherit; font-weight: bold; line-height: inherit; margin: 0px; orphans: 2; padding: 0px; vertical-align: baseline; white-space: pre; widows: 2;">_increaseCount</span><span style="background-color: white; color: #393a34; font-family: monospace; font-size: 14px; font-variant-ligatures: normal; orphans: 2; white-space: pre; widows: 2;"> </span><span class="token operator" style="border: 0px; color: #393a34; font-family: monospace; font-size: 14px; font-stretch: inherit; font-variant-east-asian: inherit; font-variant-ligatures: normal; font-variant-numeric: inherit; line-height: inherit; margin: 0px; orphans: 2; padding: 0px; vertical-align: baseline; white-space: pre; widows: 2;">=</span><span style="background-color: white; color: #393a34; font-family: monospace; font-size: 14px; font-variant-ligatures: normal; orphans: 2; white-space: pre; widows: 2;"> </span><span class="token punctuation" style="border: 0px; color: #393a34; font-family: monospace; font-size: 14px; font-stretch: inherit; font-variant-east-asian: inherit; font-variant-ligatures: normal; font-variant-numeric: inherit; line-height: inherit; margin: 0px; orphans: 2; padding: 0px; vertical-align: baseline; white-space: pre; widows: 2;">(</span><span class="token punctuation" style="border: 0px; color: #393a34; font-family: monospace; font-size: 14px; font-stretch: inherit; font-variant-east-asian: inherit; font-variant-ligatures: normal; font-variant-numeric: inherit; line-height: inherit; margin: 0px; orphans: 2; padding: 0px; vertical-align: baseline; white-space: pre; widows: 2;">)</span><span style="background-color: white; color: #393a34; font-family: monospace; font-size: 14px; font-variant-ligatures: normal; orphans: 2; white-space: pre; widows: 2;"> </span><span class="token operator" style="border: 0px; color: #393a34; font-family: monospace; font-size: 14px; font-stretch: inherit; font-variant-east-asian: inherit; font-variant-ligatures: normal; font-variant-numeric: inherit; line-height: inherit; margin: 0px; orphans: 2; padding: 0px; vertical-align: baseline; white-space: pre; widows: 2;">=></span><span style="background-color: white; color: #393a34; font-family: monospace; font-size: 14px; font-variant-ligatures: normal; orphans: 2; white-space: pre; widows: 2;"> </span><span class="token punctuation" style="border: 0px; color: #393a34; font-family: monospace; font-size: 14px; font-stretch: inherit; font-variant-east-asian: inherit; font-variant-ligatures: normal; font-variant-numeric: inherit; line-height: inherit; margin: 0px; orphans: 2; padding: 0px; vertical-align: baseline; white-space: pre; widows: 2;">{</span><span style="background-color: white; color: #393a34; font-family: monospace; font-size: 14px; font-variant-ligatures: normal; orphans: 2; white-space: pre; widows: 2;">
</span><span class="token keyword" style="border: 0px; color: #00a4db; font-family: monospace; font-size: 14px; font-stretch: inherit; font-variant-east-asian: inherit; font-variant-ligatures: normal; font-variant-numeric: inherit; line-height: inherit; margin: 0px; orphans: 2; padding: 0px; vertical-align: baseline; white-space: pre; widows: 2;">this</span><span class="token punctuation" style="border: 0px; color: #393a34; font-family: monospace; font-size: 14px; font-stretch: inherit; font-variant-east-asian: inherit; font-variant-ligatures: normal; font-variant-numeric: inherit; line-height: inherit; margin: 0px; orphans: 2; padding: 0px; vertical-align: baseline; white-space: pre; widows: 2;">.</span><span class="token function" style="border: 0px; color: #9a050f; font-family: monospace; font-size: 14px; font-stretch: inherit; font-variant-east-asian: inherit; font-variant-ligatures: normal; font-variant-numeric: inherit; font-weight: bold; line-height: inherit; margin: 0px; orphans: 2; padding: 0px; vertical-align: baseline; white-space: pre; widows: 2;">setState</span><span class="token punctuation" style="border: 0px; color: #393a34; font-family: monospace; font-size: 14px; font-stretch: inherit; font-variant-east-asian: inherit; font-variant-ligatures: normal; font-variant-numeric: inherit; line-height: inherit; margin: 0px; orphans: 2; padding: 0px; vertical-align: baseline; white-space: pre; widows: 2;">(</span><span class="token punctuation" style="border: 0px; color: #393a34; font-family: monospace; font-size: 14px; font-stretch: inherit; font-variant-east-asian: inherit; font-variant-ligatures: normal; font-variant-numeric: inherit; line-height: inherit; margin: 0px; orphans: 2; padding: 0px; vertical-align: baseline; white-space: pre; widows: 2;">{</span><span style="background-color: white; color: #393a34; font-family: monospace; font-size: 14px; font-variant-ligatures: normal; orphans: 2; white-space: pre; widows: 2;"> count</span><span class="token punctuation" style="border: 0px; color: #393a34; font-family: monospace; font-size: 14px; font-stretch: inherit; font-variant-east-asian: inherit; font-variant-ligatures: normal; font-variant-numeric: inherit; line-height: inherit; margin: 0px; orphans: 2; padding: 0px; vertical-align: baseline; white-space: pre; widows: 2;">:</span><span style="background-color: white; color: #393a34; font-family: monospace; font-size: 14px; font-variant-ligatures: normal; orphans: 2; white-space: pre; widows: 2;"> </span><span class="token keyword" style="border: 0px; color: #00a4db; font-family: monospace; font-size: 14px; font-stretch: inherit; font-variant-east-asian: inherit; font-variant-ligatures: normal; font-variant-numeric: inherit; line-height: inherit; margin: 0px; orphans: 2; padding: 0px; vertical-align: baseline; white-space: pre; widows: 2;">this</span><span class="token punctuation" style="border: 0px; color: #393a34; font-family: monospace; font-size: 14px; font-stretch: inherit; font-variant-east-asian: inherit; font-variant-ligatures: normal; font-variant-numeric: inherit; line-height: inherit; margin: 0px; orphans: 2; padding: 0px; vertical-align: baseline; white-space: pre; widows: 2;">.</span><span style="background-color: white; color: #393a34; font-family: monospace; font-size: 14px; font-variant-ligatures: normal; orphans: 2; white-space: pre; widows: 2;">state</span><span class="token punctuation" style="border: 0px; color: #393a34; font-family: monospace; font-size: 14px; font-stretch: inherit; font-variant-east-asian: inherit; font-variant-ligatures: normal; font-variant-numeric: inherit; line-height: inherit; margin: 0px; orphans: 2; padding: 0px; vertical-align: baseline; white-space: pre; widows: 2;">.</span><span style="background-color: white; color: #393a34; font-family: monospace; font-size: 14px; font-variant-ligatures: normal; orphans: 2; white-space: pre; widows: 2;">count </span><span class="token operator" style="border: 0px; color: #393a34; font-family: monospace; font-size: 14px; font-stretch: inherit; font-variant-east-asian: inherit; font-variant-ligatures: normal; font-variant-numeric: inherit; line-height: inherit; margin: 0px; orphans: 2; padding: 0px; vertical-align: baseline; white-space: pre; widows: 2;">+</span><span style="background-color: white; color: #393a34; font-family: monospace; font-size: 14px; font-variant-ligatures: normal; orphans: 2; white-space: pre; widows: 2;"> </span><span class="token number" style="border: 0px; color: #36acaa; font-family: monospace; font-size: 14px; font-stretch: inherit; font-variant-east-asian: inherit; font-variant-ligatures: normal; font-variant-numeric: inherit; line-height: inherit; margin: 0px; orphans: 2; padding: 0px; vertical-align: baseline; white-space: pre; widows: 2;">1</span><span style="background-color: white; color: #393a34; font-family: monospace; font-size: 14px; font-variant-ligatures: normal; orphans: 2; white-space: pre; widows: 2;"> </span><span class="token punctuation" style="border: 0px; color: #393a34; font-family: monospace; font-size: 14px; font-stretch: inherit; font-variant-east-asian: inherit; font-variant-ligatures: normal; font-variant-numeric: inherit; line-height: inherit; margin: 0px; orphans: 2; padding: 0px; vertical-align: baseline; white-space: pre; widows: 2;">}</span><span class="token punctuation" style="border: 0px; color: #393a34; font-family: monospace; font-size: 14px; font-stretch: inherit; font-variant-east-asian: inherit; font-variant-ligatures: normal; font-variant-numeric: inherit; line-height: inherit; margin: 0px; orphans: 2; padding: 0px; vertical-align: baseline; white-space: pre; widows: 2;">)</span><span class="token punctuation" style="border: 0px; color: #393a34; font-family: monospace; font-size: 14px; font-stretch: inherit; font-variant-east-asian: inherit; font-variant-ligatures: normal; font-variant-numeric: inherit; line-height: inherit; margin: 0px; orphans: 2; padding: 0px; vertical-align: baseline; white-space: pre; widows: 2;">;</span><span style="background-color: white; color: #393a34; font-family: monospace; font-size: 14px; font-variant-ligatures: normal; orphans: 2; white-space: pre; widows: 2;">
</span><span class="token punctuation" style="border: 0px; color: #393a34; font-family: monospace; font-size: 14px; font-stretch: inherit; font-variant-east-asian: inherit; font-variant-ligatures: normal; font-variant-numeric: inherit; line-height: inherit; margin: 0px; orphans: 2; padding: 0px; vertical-align: baseline; white-space: pre; widows: 2;">}</span><span class="token punctuation" style="border: 0px; color: #393a34; font-family: monospace; font-size: 14px; font-stretch: inherit; font-variant-east-asian: inherit; font-variant-ligatures: normal; font-variant-numeric: inherit; line-height: inherit; margin: 0px; orphans: 2; padding: 0px; vertical-align: baseline; white-space: pre; widows: 2;">;</span><span style="color: #393a34; font-family: monospace; font-size: 14px; font-variant-ligatures: normal; orphans: 2; white-space: pre; widows: 2;"></span><span style="background-color: white; color: #393a34; font-family: monospace; font-size: 14px; font-variant-ligatures: normal; orphans: 2; white-space: pre; widows: 2;">
</span><br />
<div>
<span class="token punctuation" style="border: 0px; color: #393a34; font-family: monospace; font-size: 14px; font-stretch: inherit; font-variant-east-asian: inherit; font-variant-ligatures: normal; font-variant-numeric: inherit; line-height: inherit; margin: 0px; orphans: 2; padding: 0px; vertical-align: baseline; white-space: pre; widows: 2;"><br /></span></div>
<div>
<span class="token punctuation" style="border: 0px; color: #393a34; font-family: monospace; font-size: 14px; font-stretch: inherit; font-variant-east-asian: inherit; font-variant-ligatures: normal; font-variant-numeric: inherit; line-height: inherit; margin: 0px; orphans: 2; padding: 0px; vertical-align: baseline; white-space: pre; widows: 2;"><br /></span></div>
<h3>
<span class="token punctuation" style="border: 0px; color: #393a34; font-family: monospace; font-size: 14px; font-stretch: inherit; font-variant-east-asian: inherit; font-variant-ligatures: normal; font-variant-numeric: inherit; line-height: inherit; margin: 0px; orphans: 2; padding: 0px; vertical-align: baseline; white-space: pre; widows: 2;">didFocusイベントが取れる?</span></h3>
<div>
<span class="token punctuation" style="border: 0px; color: #393a34; font-family: monospace; font-size: 14px; font-stretch: inherit; font-variant-east-asian: inherit; font-variant-ligatures: normal; font-variant-numeric: inherit; line-height: inherit; margin: 0px; orphans: 2; padding: 0px; vertical-align: baseline; white-space: pre; widows: 2;"><a href="https://reactnavigation.org/docs/status-bar.html">https://reactnavigation.org/docs/status-bar.html</a></span></div>
<div>
<br /></div>
<div>
<br /></div>
<h3>
子のコンポーネントにnavigationを渡す方法</h3>
<div>
<a href="https://reactnavigation.org/docs/connecting-navigation-prop.html">https://reactnavigation.org/docs/connecting-navigation-prop.html</a></div>
<div>
いちいちnavigationを渡さなくて良いので便利</div>
<div>
<br /></div>
<div>
<br /></div>
<div>
<code class="language-jsx js" style="background-color: white; border-bottom-left-radius: 0.3em; border-bottom-right-radius: 0.3em; border-left-color: rgb(107, 82, 174); border-left-style: solid; border-top-left-radius: 0.3em; border-top-right-radius: 0.3em; border-width: 0px 0px 0px 4px; box-shadow: rgba(107, 82, 174, 0.0666667) 2px 0px, rgba(107, 82, 174, 0.0666667) -2px 0px; color: #393a34; direction: ltr; display: block; font-size: 14px; font-stretch: inherit; font-style: inherit; font-variant-alternates: inherit; font-variant-caps: inherit; font-variant-east-asian: inherit; font-variant-ligatures: inherit; font-variant-numeric: inherit; font-variant-position: inherit; line-height: 20px; margin: 20px 0px; orphans: 2; overflow-x: auto; padding: 0.5em; tab-size: 2; vertical-align: baseline; white-space: pre; widows: 2; word-break: normal; word-spacing: normal;"><span class="token keyword" style="border: 0px; color: #00a4db; font-family: inherit; font-size: inherit; font-stretch: inherit; font-style: inherit; font-variant-alternates: inherit; font-variant-caps: inherit; font-variant-east-asian: inherit; font-variant-ligatures: inherit; font-variant-numeric: inherit; font-variant-position: inherit; line-height: inherit; margin: 0px; padding: 0px; vertical-align: baseline;">import</span> React <span class="token keyword" style="border: 0px; color: #00a4db; font-family: inherit; font-size: inherit; font-stretch: inherit; font-style: inherit; font-variant-alternates: inherit; font-variant-caps: inherit; font-variant-east-asian: inherit; font-variant-ligatures: inherit; font-variant-numeric: inherit; font-variant-position: inherit; line-height: inherit; margin: 0px; padding: 0px; vertical-align: baseline;">from</span> <span class="token string" style="border: 0px; color: #e3116c; font-family: inherit; font-size: inherit; font-stretch: inherit; font-style: inherit; font-variant-alternates: inherit; font-variant-caps: inherit; font-variant-east-asian: inherit; font-variant-ligatures: inherit; font-variant-numeric: inherit; font-variant-position: inherit; line-height: inherit; margin: 0px; padding: 0px; vertical-align: baseline;">'react'</span><span class="token punctuation" style="border: 0px; font-family: inherit; font-size: inherit; font-stretch: inherit; font-style: inherit; font-variant-alternates: inherit; font-variant-caps: inherit; font-variant-east-asian: inherit; font-variant-ligatures: inherit; font-variant-numeric: inherit; font-variant-position: inherit; line-height: inherit; margin: 0px; padding: 0px; vertical-align: baseline;">;</span>
<span class="token keyword" style="border: 0px; color: #00a4db; font-family: inherit; font-size: inherit; font-stretch: inherit; font-style: inherit; font-variant-alternates: inherit; font-variant-caps: inherit; font-variant-east-asian: inherit; font-variant-ligatures: inherit; font-variant-numeric: inherit; font-variant-position: inherit; line-height: inherit; margin: 0px; padding: 0px; vertical-align: baseline;">import</span> <span class="token punctuation" style="border: 0px; font-family: inherit; font-size: inherit; font-stretch: inherit; font-style: inherit; font-variant-alternates: inherit; font-variant-caps: inherit; font-variant-east-asian: inherit; font-variant-ligatures: inherit; font-variant-numeric: inherit; font-variant-position: inherit; line-height: inherit; margin: 0px; padding: 0px; vertical-align: baseline;">{</span> Button <span class="token punctuation" style="border: 0px; font-family: inherit; font-size: inherit; font-stretch: inherit; font-style: inherit; font-variant-alternates: inherit; font-variant-caps: inherit; font-variant-east-asian: inherit; font-variant-ligatures: inherit; font-variant-numeric: inherit; font-variant-position: inherit; line-height: inherit; margin: 0px; padding: 0px; vertical-align: baseline;">}</span> <span class="token string" style="border: 0px; color: #e3116c; font-family: inherit; font-size: inherit; font-stretch: inherit; font-style: inherit; font-variant-alternates: inherit; font-variant-caps: inherit; font-variant-east-asian: inherit; font-variant-ligatures: inherit; font-variant-numeric: inherit; font-variant-position: inherit; line-height: inherit; margin: 0px; padding: 0px; vertical-align: baseline;">'react-native'</span><span class="token punctuation" style="border: 0px; font-family: inherit; font-size: inherit; font-stretch: inherit; font-style: inherit; font-variant-alternates: inherit; font-variant-caps: inherit; font-variant-east-asian: inherit; font-variant-ligatures: inherit; font-variant-numeric: inherit; font-variant-position: inherit; line-height: inherit; margin: 0px; padding: 0px; vertical-align: baseline;">;</span>
<span class="token keyword" style="border: 0px; color: #00a4db; font-family: inherit; font-size: inherit; font-stretch: inherit; font-style: inherit; font-variant-alternates: inherit; font-variant-caps: inherit; font-variant-east-asian: inherit; font-variant-ligatures: inherit; font-variant-numeric: inherit; font-variant-position: inherit; line-height: inherit; margin: 0px; padding: 0px; vertical-align: baseline;">import</span> <span class="token punctuation" style="border: 0px; font-family: inherit; font-size: inherit; font-stretch: inherit; font-style: inherit; font-variant-alternates: inherit; font-variant-caps: inherit; font-variant-east-asian: inherit; font-variant-ligatures: inherit; font-variant-numeric: inherit; font-variant-position: inherit; line-height: inherit; margin: 0px; padding: 0px; vertical-align: baseline;">{</span> withNavigation <span class="token punctuation" style="border: 0px; font-family: inherit; font-size: inherit; font-stretch: inherit; font-style: inherit; font-variant-alternates: inherit; font-variant-caps: inherit; font-variant-east-asian: inherit; font-variant-ligatures: inherit; font-variant-numeric: inherit; font-variant-position: inherit; line-height: inherit; margin: 0px; padding: 0px; vertical-align: baseline;">}</span> <span class="token keyword" style="border: 0px; color: #00a4db; font-family: inherit; font-size: inherit; font-stretch: inherit; font-style: inherit; font-variant-alternates: inherit; font-variant-caps: inherit; font-variant-east-asian: inherit; font-variant-ligatures: inherit; font-variant-numeric: inherit; font-variant-position: inherit; line-height: inherit; margin: 0px; padding: 0px; vertical-align: baseline;">from</span> <span class="token string" style="border: 0px; color: #e3116c; font-family: inherit; font-size: inherit; font-stretch: inherit; font-style: inherit; font-variant-alternates: inherit; font-variant-caps: inherit; font-variant-east-asian: inherit; font-variant-ligatures: inherit; font-variant-numeric: inherit; font-variant-position: inherit; line-height: inherit; margin: 0px; padding: 0px; vertical-align: baseline;">'react-navigation'</span><span class="token punctuation" style="border: 0px; font-family: inherit; font-size: inherit; font-stretch: inherit; font-style: inherit; font-variant-alternates: inherit; font-variant-caps: inherit; font-variant-east-asian: inherit; font-variant-ligatures: inherit; font-variant-numeric: inherit; font-variant-position: inherit; line-height: inherit; margin: 0px; padding: 0px; vertical-align: baseline;">;</span>
<span class="token keyword" style="border: 0px; color: #00a4db; font-family: inherit; font-size: inherit; font-stretch: inherit; font-style: inherit; font-variant-alternates: inherit; font-variant-caps: inherit; font-variant-east-asian: inherit; font-variant-ligatures: inherit; font-variant-numeric: inherit; font-variant-position: inherit; line-height: inherit; margin: 0px; padding: 0px; vertical-align: baseline;">class</span> <span class="token class-name" style="border: 0px; font-family: inherit; font-size: inherit; font-stretch: inherit; font-style: inherit; font-variant-alternates: inherit; font-variant-caps: inherit; font-variant-east-asian: inherit; font-variant-ligatures: inherit; font-variant-numeric: inherit; font-variant-position: inherit; line-height: inherit; margin: 0px; padding: 0px; vertical-align: baseline;">MyBackButton</span> <span class="token keyword" style="border: 0px; color: #00a4db; font-family: inherit; font-size: inherit; font-stretch: inherit; font-style: inherit; font-variant-alternates: inherit; font-variant-caps: inherit; font-variant-east-asian: inherit; font-variant-ligatures: inherit; font-variant-numeric: inherit; font-variant-position: inherit; line-height: inherit; margin: 0px; padding: 0px; vertical-align: baseline;">extends</span> <span class="token class-name" style="border: 0px; font-family: inherit; font-size: inherit; font-stretch: inherit; font-style: inherit; font-variant-alternates: inherit; font-variant-caps: inherit; font-variant-east-asian: inherit; font-variant-ligatures: inherit; font-variant-numeric: inherit; font-variant-position: inherit; line-height: inherit; margin: 0px; padding: 0px; vertical-align: baseline;">React<span class="token punctuation" style="border: 0px; font-family: inherit; font-size: inherit; font-stretch: inherit; font-style: inherit; font-variant-alternates: inherit; font-variant-caps: inherit; font-variant-east-asian: inherit; font-variant-ligatures: inherit; font-variant-numeric: inherit; font-variant-position: inherit; line-height: inherit; margin: 0px; padding: 0px; vertical-align: baseline;">.</span>Component</span> <span class="token punctuation" style="border: 0px; font-family: inherit; font-size: inherit; font-stretch: inherit; font-style: inherit; font-variant-alternates: inherit; font-variant-caps: inherit; font-variant-east-asian: inherit; font-variant-ligatures: inherit; font-variant-numeric: inherit; font-variant-position: inherit; line-height: inherit; margin: 0px; padding: 0px; vertical-align: baseline;">{</span>
<span class="token function" style="border: 0px; color: #9a050f; font-family: inherit; font-size: inherit; font-stretch: inherit; font-style: inherit; font-variant-alternates: inherit; font-variant-caps: inherit; font-variant-east-asian: inherit; font-variant-ligatures: inherit; font-variant-numeric: inherit; font-variant-position: inherit; font-weight: bold; line-height: inherit; margin: 0px; padding: 0px; vertical-align: baseline;">render</span><span class="token punctuation" style="border: 0px; font-family: inherit; font-size: inherit; font-stretch: inherit; font-style: inherit; font-variant-alternates: inherit; font-variant-caps: inherit; font-variant-east-asian: inherit; font-variant-ligatures: inherit; font-variant-numeric: inherit; font-variant-position: inherit; line-height: inherit; margin: 0px; padding: 0px; vertical-align: baseline;">(</span><span class="token punctuation" style="border: 0px; font-family: inherit; font-size: inherit; font-stretch: inherit; font-style: inherit; font-variant-alternates: inherit; font-variant-caps: inherit; font-variant-east-asian: inherit; font-variant-ligatures: inherit; font-variant-numeric: inherit; font-variant-position: inherit; line-height: inherit; margin: 0px; padding: 0px; vertical-align: baseline;">)</span> <span class="token punctuation" style="border: 0px; font-family: inherit; font-size: inherit; font-stretch: inherit; font-style: inherit; font-variant-alternates: inherit; font-variant-caps: inherit; font-variant-east-asian: inherit; font-variant-ligatures: inherit; font-variant-numeric: inherit; font-variant-position: inherit; line-height: inherit; margin: 0px; padding: 0px; vertical-align: baseline;">{</span>
<span class="token keyword" style="border: 0px; color: #00a4db; font-family: inherit; font-size: inherit; font-stretch: inherit; font-style: inherit; font-variant-alternates: inherit; font-variant-caps: inherit; font-variant-east-asian: inherit; font-variant-ligatures: inherit; font-variant-numeric: inherit; font-variant-position: inherit; line-height: inherit; margin: 0px; padding: 0px; vertical-align: baseline;">return</span> <span class="token tag" style="border: 0px; color: #00009f; font-family: inherit; font-size: inherit; font-stretch: inherit; font-style: inherit; font-variant-alternates: inherit; font-variant-caps: inherit; font-variant-east-asian: inherit; font-variant-ligatures: inherit; font-variant-numeric: inherit; font-variant-position: inherit; line-height: inherit; margin: 0px; padding: 0px; vertical-align: baseline;"><span class="token tag" style="border: 0px; font-family: inherit; font-size: inherit; font-stretch: inherit; font-style: inherit; font-variant-alternates: inherit; font-variant-caps: inherit; font-variant-east-asian: inherit; font-variant-ligatures: inherit; font-variant-numeric: inherit; font-variant-position: inherit; line-height: inherit; margin: 0px; padding: 0px; vertical-align: baseline;"><span class="token punctuation" style="border: 0px; color: #393a34; font-family: inherit; font-size: inherit; font-stretch: inherit; font-style: inherit; font-variant-alternates: inherit; font-variant-caps: inherit; font-variant-east-asian: inherit; font-variant-ligatures: inherit; font-variant-numeric: inherit; font-variant-position: inherit; line-height: inherit; margin: 0px; padding: 0px; vertical-align: baseline;"><</span>Button</span> <span class="token attr-name" style="border: 0px; color: #00a4db; font-family: inherit; font-size: inherit; font-stretch: inherit; font-style: inherit; font-variant-alternates: inherit; font-variant-caps: inherit; font-variant-east-asian: inherit; font-variant-ligatures: inherit; font-variant-numeric: inherit; font-variant-position: inherit; line-height: inherit; margin: 0px; padding: 0px; vertical-align: baseline;">title</span><span class="token attr-value" style="border: 0px; color: #e3116c; font-family: inherit; font-size: inherit; font-stretch: inherit; font-style: inherit; font-variant-alternates: inherit; font-variant-caps: inherit; font-variant-east-asian: inherit; font-variant-ligatures: inherit; font-variant-numeric: inherit; font-variant-position: inherit; line-height: inherit; margin: 0px; padding: 0px; vertical-align: baseline;"><span class="token punctuation" style="border: 0px; color: #393a34; font-family: inherit; font-size: inherit; font-stretch: inherit; font-style: inherit; font-variant-alternates: inherit; font-variant-caps: inherit; font-variant-east-asian: inherit; font-variant-ligatures: inherit; font-variant-numeric: inherit; font-variant-position: inherit; line-height: inherit; margin: 0px; padding: 0px; vertical-align: baseline;">=</span><span class="token punctuation" style="border: 0px; color: #393a34; font-family: inherit; font-size: inherit; font-stretch: inherit; font-style: inherit; font-variant-alternates: inherit; font-variant-caps: inherit; font-variant-east-asian: inherit; font-variant-ligatures: inherit; font-variant-numeric: inherit; font-variant-position: inherit; line-height: inherit; margin: 0px; padding: 0px; vertical-align: baseline;">"</span>Back<span class="token punctuation" style="border: 0px; color: #393a34; font-family: inherit; font-size: inherit; font-stretch: inherit; font-style: inherit; font-variant-alternates: inherit; font-variant-caps: inherit; font-variant-east-asian: inherit; font-variant-ligatures: inherit; font-variant-numeric: inherit; font-variant-position: inherit; line-height: inherit; margin: 0px; padding: 0px; vertical-align: baseline;">"</span></span> <span class="token attr-name" style="border: 0px; color: #00a4db; font-family: inherit; font-size: inherit; font-stretch: inherit; font-style: inherit; font-variant-alternates: inherit; font-variant-caps: inherit; font-variant-east-asian: inherit; font-variant-ligatures: inherit; font-variant-numeric: inherit; font-variant-position: inherit; line-height: inherit; margin: 0px; padding: 0px; vertical-align: baseline;">onPress</span><span class="token script language-javascript" style="border: 0px; font-family: inherit; font-size: inherit; font-stretch: inherit; font-style: inherit; font-variant-alternates: inherit; font-variant-caps: inherit; font-variant-east-asian: inherit; font-variant-ligatures: inherit; font-variant-numeric: inherit; font-variant-position: inherit; line-height: inherit; margin: 0px; padding: 0px; vertical-align: baseline;"><span class="token punctuation" style="border: 0px; color: #393a34; font-family: inherit; font-size: inherit; font-stretch: inherit; font-style: inherit; font-variant-alternates: inherit; font-variant-caps: inherit; font-variant-east-asian: inherit; font-variant-ligatures: inherit; font-variant-numeric: inherit; font-variant-position: inherit; line-height: inherit; margin: 0px; padding: 0px; vertical-align: baseline;">=</span><span class="token punctuation" style="border: 0px; color: #393a34; font-family: inherit; font-size: inherit; font-stretch: inherit; font-style: inherit; font-variant-alternates: inherit; font-variant-caps: inherit; font-variant-east-asian: inherit; font-variant-ligatures: inherit; font-variant-numeric: inherit; font-variant-position: inherit; line-height: inherit; margin: 0px; padding: 0px; vertical-align: baseline;">{</span><span class="token punctuation" style="border: 0px; color: #393a34; font-family: inherit; font-size: inherit; font-stretch: inherit; font-style: inherit; font-variant-alternates: inherit; font-variant-caps: inherit; font-variant-east-asian: inherit; font-variant-ligatures: inherit; font-variant-numeric: inherit; font-variant-position: inherit; line-height: inherit; margin: 0px; padding: 0px; vertical-align: baseline;">(</span><span class="token punctuation" style="border: 0px; color: #393a34; font-family: inherit; font-size: inherit; font-stretch: inherit; font-style: inherit; font-variant-alternates: inherit; font-variant-caps: inherit; font-variant-east-asian: inherit; font-variant-ligatures: inherit; font-variant-numeric: inherit; font-variant-position: inherit; line-height: inherit; margin: 0px; padding: 0px; vertical-align: baseline;">)</span> <span class="token operator" style="border: 0px; color: #393a34; font-family: inherit; font-size: inherit; font-stretch: inherit; font-style: inherit; font-variant-alternates: inherit; font-variant-caps: inherit; font-variant-east-asian: inherit; font-variant-ligatures: inherit; font-variant-numeric: inherit; font-variant-position: inherit; line-height: inherit; margin: 0px; padding: 0px; vertical-align: baseline;">=></span> <span class="token punctuation" style="border: 0px; color: #393a34; font-family: inherit; font-size: inherit; font-stretch: inherit; font-style: inherit; font-variant-alternates: inherit; font-variant-caps: inherit; font-variant-east-asian: inherit; font-variant-ligatures: inherit; font-variant-numeric: inherit; font-variant-position: inherit; line-height: inherit; margin: 0px; padding: 0px; vertical-align: baseline;">{</span> <span class="token keyword" style="border: 0px; color: #00a4db; font-family: inherit; font-size: inherit; font-stretch: inherit; font-style: inherit; font-variant-alternates: inherit; font-variant-caps: inherit; font-variant-east-asian: inherit; font-variant-ligatures: inherit; font-variant-numeric: inherit; font-variant-position: inherit; line-height: inherit; margin: 0px; padding: 0px; vertical-align: baseline;">this</span><span class="token punctuation" style="border: 0px; color: #393a34; font-family: inherit; font-size: inherit; font-stretch: inherit; font-style: inherit; font-variant-alternates: inherit; font-variant-caps: inherit; font-variant-east-asian: inherit; font-variant-ligatures: inherit; font-variant-numeric: inherit; font-variant-position: inherit; line-height: inherit; margin: 0px; padding: 0px; vertical-align: baseline;">.</span>props<span class="token punctuation" style="border: 0px; color: #393a34; font-family: inherit; font-size: inherit; font-stretch: inherit; font-style: inherit; font-variant-alternates: inherit; font-variant-caps: inherit; font-variant-east-asian: inherit; font-variant-ligatures: inherit; font-variant-numeric: inherit; font-variant-position: inherit; line-height: inherit; margin: 0px; padding: 0px; vertical-align: baseline;">.</span>navigation<span class="token punctuation" style="border: 0px; color: #393a34; font-family: inherit; font-size: inherit; font-stretch: inherit; font-style: inherit; font-variant-alternates: inherit; font-variant-caps: inherit; font-variant-east-asian: inherit; font-variant-ligatures: inherit; font-variant-numeric: inherit; font-variant-position: inherit; line-height: inherit; margin: 0px; padding: 0px; vertical-align: baseline;">.</span><span class="token function" style="border: 0px; color: #9a050f; font-family: inherit; font-size: inherit; font-stretch: inherit; font-style: inherit; font-variant-alternates: inherit; font-variant-caps: inherit; font-variant-east-asian: inherit; font-variant-ligatures: inherit; font-variant-numeric: inherit; font-variant-position: inherit; font-weight: bold; line-height: inherit; margin: 0px; padding: 0px; vertical-align: baseline;">goBack</span><span class="token punctuation" style="border: 0px; color: #393a34; font-family: inherit; font-size: inherit; font-stretch: inherit; font-style: inherit; font-variant-alternates: inherit; font-variant-caps: inherit; font-variant-east-asian: inherit; font-variant-ligatures: inherit; font-variant-numeric: inherit; font-variant-position: inherit; line-height: inherit; margin: 0px; padding: 0px; vertical-align: baseline;">(</span><span class="token punctuation" style="border: 0px; color: #393a34; font-family: inherit; font-size: inherit; font-stretch: inherit; font-style: inherit; font-variant-alternates: inherit; font-variant-caps: inherit; font-variant-east-asian: inherit; font-variant-ligatures: inherit; font-variant-numeric: inherit; font-variant-position: inherit; line-height: inherit; margin: 0px; padding: 0px; vertical-align: baseline;">)</span> <span class="token punctuation" style="border: 0px; color: #393a34; font-family: inherit; font-size: inherit; font-stretch: inherit; font-style: inherit; font-variant-alternates: inherit; font-variant-caps: inherit; font-variant-east-asian: inherit; font-variant-ligatures: inherit; font-variant-numeric: inherit; font-variant-position: inherit; line-height: inherit; margin: 0px; padding: 0px; vertical-align: baseline;">}</span><span class="token punctuation" style="border: 0px; color: #393a34; font-family: inherit; font-size: inherit; font-stretch: inherit; font-style: inherit; font-variant-alternates: inherit; font-variant-caps: inherit; font-variant-east-asian: inherit; font-variant-ligatures: inherit; font-variant-numeric: inherit; font-variant-position: inherit; line-height: inherit; margin: 0px; padding: 0px; vertical-align: baseline;">}</span></span> <span class="token punctuation" style="border: 0px; color: #393a34; font-family: inherit; font-size: inherit; font-stretch: inherit; font-style: inherit; font-variant-alternates: inherit; font-variant-caps: inherit; font-variant-east-asian: inherit; font-variant-ligatures: inherit; font-variant-numeric: inherit; font-variant-position: inherit; line-height: inherit; margin: 0px; padding: 0px; vertical-align: baseline;">/></span></span><span class="token punctuation" style="border: 0px; font-family: inherit; font-size: inherit; font-stretch: inherit; font-style: inherit; font-variant-alternates: inherit; font-variant-caps: inherit; font-variant-east-asian: inherit; font-variant-ligatures: inherit; font-variant-numeric: inherit; font-variant-position: inherit; line-height: inherit; margin: 0px; padding: 0px; vertical-align: baseline;">;</span>
<span class="token punctuation" style="border: 0px; font-family: inherit; font-size: inherit; font-stretch: inherit; font-style: inherit; font-variant-alternates: inherit; font-variant-caps: inherit; font-variant-east-asian: inherit; font-variant-ligatures: inherit; font-variant-numeric: inherit; font-variant-position: inherit; line-height: inherit; margin: 0px; padding: 0px; vertical-align: baseline;">}</span>
<span class="token punctuation" style="border: 0px; font-family: inherit; font-size: inherit; font-stretch: inherit; font-style: inherit; font-variant-alternates: inherit; font-variant-caps: inherit; font-variant-east-asian: inherit; font-variant-ligatures: inherit; font-variant-numeric: inherit; font-variant-position: inherit; line-height: inherit; margin: 0px; padding: 0px; vertical-align: baseline;">}</span>
<span class="token comment" style="border: 0px; color: #999988; font-family: inherit; font-size: inherit; font-stretch: inherit; font-style: italic; font-variant-alternates: inherit; font-variant-caps: inherit; font-variant-east-asian: inherit; font-variant-ligatures: inherit; font-variant-numeric: inherit; font-variant-position: inherit; line-height: inherit; margin: 0px; padding: 0px; vertical-align: baseline;">// withNavigation returns a component that wraps MyBackButton and passes in the</span>
<span class="token comment" style="border: 0px; color: #999988; font-family: inherit; font-size: inherit; font-stretch: inherit; font-style: italic; font-variant-alternates: inherit; font-variant-caps: inherit; font-variant-east-asian: inherit; font-variant-ligatures: inherit; font-variant-numeric: inherit; font-variant-position: inherit; line-height: inherit; margin: 0px; padding: 0px; vertical-align: baseline;">// navigation prop</span>
<span class="token keyword" style="border: 0px; color: #00a4db; font-family: inherit; font-size: inherit; font-stretch: inherit; font-style: inherit; font-variant-alternates: inherit; font-variant-caps: inherit; font-variant-east-asian: inherit; font-variant-ligatures: inherit; font-variant-numeric: inherit; font-variant-position: inherit; line-height: inherit; margin: 0px; padding: 0px; vertical-align: baseline;">export</span> <span class="token keyword" style="border: 0px; color: #00a4db; font-family: inherit; font-size: inherit; font-stretch: inherit; font-style: inherit; font-variant-alternates: inherit; font-variant-caps: inherit; font-variant-east-asian: inherit; font-variant-ligatures: inherit; font-variant-numeric: inherit; font-variant-position: inherit; line-height: inherit; margin: 0px; padding: 0px; vertical-align: baseline;">default</span> <span class="token function" style="border: 0px; color: #9a050f; font-family: inherit; font-size: inherit; font-stretch: inherit; font-style: inherit; font-variant-alternates: inherit; font-variant-caps: inherit; font-variant-east-asian: inherit; font-variant-ligatures: inherit; font-variant-numeric: inherit; font-variant-position: inherit; font-weight: bold; line-height: inherit; margin: 0px; padding: 0px; vertical-align: baseline;">withNavigation</span><span class="token punctuation" style="border: 0px; font-family: inherit; font-size: inherit; font-stretch: inherit; font-style: inherit; font-variant-alternates: inherit; font-variant-caps: inherit; font-variant-east-asian: inherit; font-variant-ligatures: inherit; font-variant-numeric: inherit; font-variant-position: inherit; line-height: inherit; margin: 0px; padding: 0px; vertical-align: baseline;">(</span>MyBackButton<span class="token punctuation" style="border: 0px; font-family: inherit; font-size: inherit; font-stretch: inherit; font-style: inherit; font-variant-alternates: inherit; font-variant-caps: inherit; font-variant-east-asian: inherit; font-variant-ligatures: inherit; font-variant-numeric: inherit; font-variant-position: inherit; line-height: inherit; margin: 0px; padding: 0px; vertical-align: baseline;">)</span><span class="token punctuation" style="border: 0px; font-family: inherit; font-size: inherit; font-stretch: inherit; font-style: inherit; font-variant-alternates: inherit; font-variant-caps: inherit; font-variant-east-asian: inherit; font-variant-ligatures: inherit; font-variant-numeric: inherit; font-variant-position: inherit; line-height: inherit; margin: 0px; padding: 0px; vertical-align: baseline;">;</span>
</code></div>
<div>
<span class="token punctuation" style="border: 0px; font-family: inherit; font-size: inherit; font-stretch: inherit; font-style: inherit; font-variant-alternates: inherit; font-variant-caps: inherit; font-variant-east-asian: inherit; font-variant-ligatures: inherit; font-variant-numeric: inherit; font-variant-position: inherit; line-height: inherit; margin: 0px; padding: 0px; vertical-align: baseline;"><br /></span></div>
<div>
<br /></div>
<h3>
DeepLink</h3>
<div>
前回のバージョンではTabNavigationを使うと動かなかったけど、今回は動くようになったのかな?あとで試す</div>
<div>
<a href="https://reactnavigation.org/docs/deep-linking.html">https://reactnavigation.org/docs/deep-linking.html</a></div>
<div>
<br /></div>
<div>
<br /></div>
<div>
<br /></div>
hrkhttp://www.blogger.com/profile/14369445590054241924noreply@blogger.com0tag:blogger.com,1999:blog-3058957617329024387.post-64964794227297071722018-02-18T23:23:00.000+09:002018-02-18T23:23:08.697+09:00ESLintとFlowができることreact nativeをやっていて、ESLintとFlowについて<br />
<br />
<br />
<h3>
ESLint</h3>
<br />
静的解析ツール。<br />
括弧や、スペース、空行などスタイルの統一も可能。<br />
ルールを個別で指定可能<br />
<br />
airbnbの設定など公開されている<br />
<br />
エディターとの連携次第で自動フォーマット可能<br />
<br />
<br />
例えばこんな感じ<br />
<br />
先頭に空行はダメ<br />
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEje20Ru3ag1GXKjf1Ota14t0iiWRIIBMlHkKoos9liHS8e8zunmupAZqRTotigRtk5b9XCQyS4VGjNo4kNSEt29C9Rvu2k3Dg2AcGT-SLPMv0o-JbDJuz84rFrc6HtqFKWDkTJ9D8GW0gk/s1600/%25E3%2582%25B9%25E3%2582%25AF%25E3%2583%25AA%25E3%2583%25BC%25E3%2583%25B3%25E3%2582%25B7%25E3%2583%25A7%25E3%2583%2583%25E3%2583%2588+2018-02-18+22.24.43.png" imageanchor="1" style="clear: left; float: left; margin-bottom: 1em; margin-right: 1em;"><img border="0" data-original-height="116" data-original-width="1282" height="28" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEje20Ru3ag1GXKjf1Ota14t0iiWRIIBMlHkKoos9liHS8e8zunmupAZqRTotigRtk5b9XCQyS4VGjNo4kNSEt29C9Rvu2k3Dg2AcGT-SLPMv0o-JbDJuz84rFrc6HtqFKWDkTJ9D8GW0gk/s320/%25E3%2582%25B9%25E3%2582%25AF%25E3%2583%25AA%25E3%2583%25BC%25E3%2583%25B3%25E3%2582%25B7%25E3%2583%25A7%25E3%2583%2583%25E3%2583%2588+2018-02-18+22.24.43.png" width="320" /></a></div>
<br />
<br />
<br />
後ろで定義している変数を使うのもダメ<br />
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjhSqgSxmbvsjm6o9-qmmD9LorM8hVXGttePAMrwrsvKIn0kCn0mwOfVr1FlUhsCnCzGO64V3ERhRBgnZsr5VS8dFDu8eWKXHHtVgERNvMWjhAeFC0zRi9FHNbGww8ROdDxBDbqLoo5IKE/s1600/%25E3%2582%25B9%25E3%2582%25AF%25E3%2583%25AA%25E3%2583%25BC%25E3%2583%25B3%25E3%2582%25B7%25E3%2583%25A7%25E3%2583%2583%25E3%2583%2588+2018-02-18+22.23.42.png" imageanchor="1" style="clear: left; float: left; margin-bottom: 1em; margin-right: 1em;"><img border="0" data-original-height="232" data-original-width="1568" height="47" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjhSqgSxmbvsjm6o9-qmmD9LorM8hVXGttePAMrwrsvKIn0kCn0mwOfVr1FlUhsCnCzGO64V3ERhRBgnZsr5VS8dFDu8eWKXHHtVgERNvMWjhAeFC0zRi9FHNbGww8ROdDxBDbqLoo5IKE/s320/%25E3%2582%25B9%25E3%2582%25AF%25E3%2583%25AA%25E3%2583%25BC%25E3%2583%25B3%25E3%2582%25B7%25E3%2583%25A7%25E3%2583%2583%25E3%2583%2588+2018-02-18+22.23.42.png" width="320" /></a></div>
<br />
<br />
<br />
<br />
<br />
<h3>
Flow</h3>
<div>
<br /></div>
<div>
静的型付けツール。</div>
<div>
実行前にチェックが可能</div>
<div>
<br /></div>
<div>
Componentやメソッドの引数の型を定義する</div>
<div>
<br /></div>
<div>
<div>
<i>type UserType = {</i></div>
<div>
<i> name: string;</i></div>
<div>
<i> age: number;</i></div>
<div>
<i>}</i></div>
</div>
<div>
<i><br /></i></div>
<div>
<div>
<i>type Props = {</i></div>
<div>
<i> user: UserType,</i></div>
<div>
<i> text: string,</i></div>
<div>
<i>};</i></div>
</div>
<div>
<i><br /></i></div>
<div>
<i><br /></i></div>
<div>
<div>
<i>class Foo extends Component<props> {</props></i></div>
<div>
<i> componentDidMount() {</i></div>
<div>
<i><br /></i></div>
<div>
<i> }</i></div>
<div>
<i><br /></i></div>
<div>
<i> render() {</i></div>
<div>
<i> const { user, text } = this.props;</i></div>
<div>
<i> return (</i></div>
<div>
<i> <view></view></i></div>
<div>
<i> <text>{user.name}</text></i></div>
<div>
<i> <text>{user.age}</text></i></div>
<div>
<i> <text>{ user.age < 20 ? '未成年' : '成人' }</text></i></div>
<div>
<i> <text>{text}</text></i></div>
<div>
<i> </i></div>
</div>
<div>
<i> );</i></div>
<div>
<i> }</i></div>
<div>
<i>}</i></div>
<div>
<br /></div>
<div>
ageがnumberではなく、文字列で指定した場合</div>
<div>
<br /></div>
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEheUDCZwM8cg5GEsC-VKbMLN83L_Ys_ON_ghRKUbD5m6wvQXuz_gDAgRsIYKhbB0VCS7bxWpB6ouFBERxM2JjEf18pVWxZ1DH53U_9hybmdb53rA3Qfg4XiwU__ZYiZvZiL2obd8DKWICQ/s1600/%25E3%2582%25B9%25E3%2582%25AF%25E3%2583%25AA%25E3%2583%25BC%25E3%2583%25B3%25E3%2582%25B7%25E3%2583%25A7%25E3%2583%2583%25E3%2583%2588+2018-02-18+23.20.23.png" imageanchor="1" style="clear: left; float: left; margin-bottom: 1em; margin-right: 1em;"><img border="0" data-original-height="166" data-original-width="1186" height="44" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEheUDCZwM8cg5GEsC-VKbMLN83L_Ys_ON_ghRKUbD5m6wvQXuz_gDAgRsIYKhbB0VCS7bxWpB6ouFBERxM2JjEf18pVWxZ1DH53U_9hybmdb53rA3Qfg4XiwU__ZYiZvZiL2obd8DKWICQ/s320/%25E3%2582%25B9%25E3%2582%25AF%25E3%2583%25AA%25E3%2583%25BC%25E3%2583%25B3%25E3%2582%25B7%25E3%2583%25A7%25E3%2583%2583%25E3%2583%2588+2018-02-18+23.20.23.png" width="320" /></a></div>
<div>
<br /></div>
<div>
<br /></div>
<div>
<br /></div>
<div>
<br /></div>
<div>
<br /></div>
<div>
<br /></div>
hrkhttp://www.blogger.com/profile/14369445590054241924noreply@blogger.com0tag:blogger.com,1999:blog-3058957617329024387.post-53595564449093241342018-02-18T15:28:00.001+09:002018-02-18T15:28:48.177+09:00DataStoreのデータをBigQueryにインポートするGAE/goでサービス運用中<br />
DataStoreをメインで使ってる<br />
redash用のgceサーバーがあり<br />
<br />
<br />
<h3>
やるとこ</h3>
<div>
1. DataStoreのバックアップをGCS(Google Cloud Storage)に保存する</div>
<div>
2. GCSのバックアップをBigQueryにロードする</div>
<div>
3. gceのサーバーにcron登録する</div>
<div>
<br /></div>
<div>
<br /></div>
<h3>
やったこと</h3>
<div>
<br /></div>
<div>
環境が整って入れば以下のスクリプトをcron登録すればOK</div>
<div>
<br /></div>
<div>
<br /></div>
<div>
<div>
<i>#!/usr/bin/env bash</i></div>
<div>
<i><br /></i></div>
<div>
<i>set -e</i></div>
<div>
<i><br /></i></div>
<div>
<i>PROJECT="[プロジェクトID]"</i></div>
<div>
<i>BUCKET="[バケット]"</i></div>
<div>
<i>KINDS=("KIND1" "KIND2")</i></div>
<div>
<i><br /></i></div>
<div>
<i># kindsをカンマ区切りにする</i></div>
<div>
<i>kinds_str="$(IFS=,; echo "${KINDS[*]}")"</i></div>
<div>
<i><br /></i></div>
<div>
<i>gcloud config set project ${PROJECT}</i></div>
<div>
<i><br /></i></div>
<div>
<div>
<i># 前回のファイルが残っている場合、削除する</i></div>
</div>
<div>
<i>gsutil -m rm -rf gs://${BUCKET}</i></div>
<div>
<i><br /></i></div>
<div>
<i># バックアップ作成</i></div>
<div>
<i>gcloud beta datastore export --kinds="$kinds_str" --format=json gs://${BUCKET}</i></div>
<div>
<i><br /></i></div>
<div>
<i><br /></i></div>
<div>
<i># インポートする</i></div>
<div>
<i>for x in ${KINDS[@]}</i></div>
<div>
<i>do</i></div>
<div>
<i> echo import ${x}</i></div>
<div>
<i> bq load --project_id=${PROJECT} --headless --source_format=DATASTORE_BACKUP --replace datastore.${x} ${BUCKET}/all_namespaces/kind_${x}/all_namespaces_kind_${x}.export_metadata</i></div>
<div>
<i>done</i></div>
</div>
<div>
<br /></div>
<h3>
1つずつ説明</h3>
<div>
<br /></div>
<h4>
1. DataStoreのバックアップを作成</h4>
<div>
<a href="https://cloud.google.com/datastore/docs/export-import-entities?authuser=3&hl=ja">https://cloud.google.com/datastore/docs/export-import-entities?authuser=3&hl=ja</a></div>
<div>
<br /></div>
<div>
<br /></div>
<br /><i>gcloud beta datastore export --kinds="KIND1, KIND2" --format=json gs://${BUCKET}</i><br /><br /><br />--kindを指定しなければ全てのkindを作成する<br />
<br />
またすでにexport先にbacketが存在する場合、エラーになるので、実行する前にファイルを削除する<br />
<br />
<br />
<i>gsutil -m rm -rf gs://${BUCKET}</i><div>
<i><br /></i></div>
<div>
<i><br /></i></div>
<div>
<h4>
2. GCSのバックアップをBigQueryにロードする</h4>
<div>
<div>
bq load --project_id=${PROJECT} --headless --source_format=DATASTORE_BACKUP --replace datastore.[table name] ${BUCKET}/all_namespaces/kind_[KIND1]/all_namespaces_kind_[KIND1].export_metadata</div>
</div>
<div>
<br /></div>
<div>
--replaceを指定しないと追加される</div>
<div>
<br /></div>
<div>
<br /></div>
<h4>
3. gceのサーバーにcron登録する</h4>
<div>
<br /></div>
<div>
デフォルトの権限設定ではdatastoreやBigQueryのアクセス時に権限エラーとなる</div>
<div>
<br /></div>
<div>
Computer Engineではデフォルトでサービスアカウントが追加されている</div>
<div>
<br /></div>
<div>
<i>[PROJECT_NUMBER]-compute@developer.gserviceaccount.com</i></div>
<div>
<i><br /></i></div>
<div>
このアカウントに対して、IAMで権限を付与しても権限エラーは直らない</div>
<div>
<br /></div>
<div>
一度vmを停止してから設定を変更する</div>
<div>
<br /></div>
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj2sK_MNH8O5HeTjcvBPE8gRTOb6in8ChQzSjeiu74nSV_NPzsb18GLPiBc_IBk1bXZyd8B0M03lBPOWYjt6f4tvByGJ0_yJS11DxyY9VKkBzFG9JYgShDEMzR5y5Yp3ZkXr4lryub86SM/s1600/%25E3%2582%25B9%25E3%2582%25AF%25E3%2583%25AA%25E3%2583%25BC%25E3%2583%25B3%25E3%2582%25B7%25E3%2583%25A7%25E3%2583%2583%25E3%2583%2588+2018-02-18+15.20.22.png" imageanchor="1" style="clear: left; float: left; margin-bottom: 1em; margin-right: 1em;"><img border="0" data-original-height="1062" data-original-width="1032" height="320" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj2sK_MNH8O5HeTjcvBPE8gRTOb6in8ChQzSjeiu74nSV_NPzsb18GLPiBc_IBk1bXZyd8B0M03lBPOWYjt6f4tvByGJ0_yJS11DxyY9VKkBzFG9JYgShDEMzR5y5Yp3ZkXr4lryub86SM/s320/%25E3%2582%25B9%25E3%2582%25AF%25E3%2583%25AA%25E3%2583%25BC%25E3%2583%25B3%25E3%2582%25B7%25E3%2583%25A7%25E3%2583%2583%25E3%2583%2588+2018-02-18+15.20.22.png" width="310" /></a></div>
<div>
<br /></div>
<div>
<br /></div>
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<i>$ crontab -e<br />0 15 * * * /home/username/load_datastore.sh</i><br /><br /></div>
hrkhttp://www.blogger.com/profile/14369445590054241924noreply@blogger.com0tag:blogger.com,1999:blog-3058957617329024387.post-6010901545950043712017-12-18T10:22:00.000+09:002017-12-18T10:22:06.776+09:00React Native renderの更新タイミング調査<h2>
目的</h2>
<div>
React Nativeで、reduxとreact-navigationを使ってるとやたらとrenderが走る。</div>
<div>
タブやナビゲーションの親のViewでもレンダリングされているので、一度詳しく調べてみる。</div>
<div>
<br /></div>
<h2>
調査</h2>
<div>
<br /></div>
<h3>
react-nativeのReact.PureComponentとは</h3>
<div>
PureComponentはComponentのshouldComponentUpdateを変更したもの。</div>
<div>
shallowの比較により、Updateするか決める。</div>
<div>
<br /></div>
<h4>
サンプルコード</h4>
<div>
<br /></div>
<div>
```</div>
<div>
// 通常のComponentクラス</div>
<div>
<div>
class Normail extends React.Component {</div>
<div>
constructor(props) {</div>
<div>
super(props)</div>
<div>
this.render_num = 0</div>
<div>
}</div>
<div>
<br /></div>
<div>
render() {</div>
<div>
this.render_num++</div>
<div>
return (</div>
<div>
<view></view></div>
<div>
<text>normail</text></div>
<div>
<text>{this.render_num}</text></div>
<div>
</div>
</div>
<div>
);</div>
<div>
}</div>
<div>
}</div>
<div>
<br /></div>
<div>
// PureComponentクラス</div>
<div>
class Pure extends React.PureComponent {</div>
<div>
<br /></div>
<div>
constructor(props) {</div>
<div>
super(props)</div>
<div>
this.render_num = 0</div>
<div>
}</div>
<div>
<br /></div>
<div>
render() {</div>
<div>
this.render_num++</div>
<div>
<br /></div>
<div>
return (</div>
<div>
<view></view></div>
<div>
<text>pure</text></div>
<div>
<text>{this.render_num}</text></div>
<div>
</div>
<div>
);</div>
<div>
}</div>
<div>
}</div>
<div>
<br /></div>
<div>
<br /></div>
<div>
<div>
export default class App extends React.Component {</div>
<div>
constructor(props) {</div>
<div>
super(props)</div>
<div>
this.state = {</div>
<div>
param1: "hoge",</div>
<div>
param2: { "hoge": "val" },</div>
<div>
}</div>
<div>
}</div>
<div>
<br /></div>
<div>
render() {</div>
<div>
const {param1, param2} = this.state</div>
<div>
return (</div>
<div>
<view></view></div>
<div>
<button onpress="{()" title="Button1"> this.setState({param1: "hoge"})} /></button></div>
<div>
<button onpress="{()" title="Button2"> this.setState({param2: param2})} /></button></div>
<div>
<button onpress="{()" title="Button3"> this.setState({param2: {"hoge": "val"}})} /></button></div>
<div>
<normail param1="{param1}" param2="{param2}"></normail></div>
<div>
<pure param1="{param1}" param2="{param2}"></pure></div>
<div>
</div>
</div>
<div>
);</div>
<div>
}</div>
<div>
}</div>
<div>
```</div>
<div>
<br /></div>
<h3>
Propの値がどう変わるかで挙動が変わる</h3>
<h4>
文字列や数字の場合</h4>
<div>
this.setState({ param1: "hoge" })を実行すると</div>
<div>
<br /></div>
<div>
React.Componentはレンダリングされる</div>
<div>
React.PureComponentはレンダリングされない!</div>
<div>
<br /></div>
<h4>
同じObjectの場合</h4>
<div>
<div>
this.setState({ param2: this.state.param2 })</div>
</div>
<div>
<br /></div>
<div>
<div>
React.Componentはレンダリングされる</div>
<div>
React.PureComponentはレンダリングされない!</div>
</div>
<div>
<br /></div>
<h4>
中身は同じObjectの場合</h4>
<div>
this.setState({param2: {"hoge": "val"}})</div>
<div>
<br /></div>
<div>
<div>
React.Componentはレンダリングされる</div>
<div>
React.PureComponentはレンダリングされる</div>
</div>
<div>
<br /></div>
<div>
<br /></div>
<h3>
PureComponentはただのshallowEqualなので、第一階層だけしか比較できない</h3>
<div>
<a href="https://github.com/sophiebits/react/blob/aab1fd6e6af43aacb36f2e2006d3fc9245e064ec/src/renderers/shared/stack/reconciler/ReactCompositeComponent.js#L874-L876">https://github.com/sophiebits/react/blob/aab1fd6e6af43aacb36f2e2006d3fc9245e064ec/src/renderers/shared/stack/reconciler/ReactCompositeComponent.js#L874-L876</a></div>
<div>
<br /></div>
<div>
該当コードにあるように、shallowEqualをつかって比較している。</div>
<div>
shallowEqualはFacebookのやつ</div>
<div>
<br /></div>
<div>
<a href="https://github.com/facebook/fbjs/blob/c69904a511b900266935168223063dd8772dfc40/packages/fbjs/src/core/shallowEqual.js">https://github.com/facebook/fbjs/blob/c69904a511b900266935168223063dd8772dfc40/packages/fbjs/src/core/shallowEqual.js</a></div>
<div>
<br /></div>
<div>
ここのメソッドで第一階層しかチェックしてない。まぁパフォーマンスを考えるとしかたないのかな・・・</div>
<div>
<br /></div>
hrkhttp://www.blogger.com/profile/14369445590054241924noreply@blogger.com0tag:blogger.com,1999:blog-3058957617329024387.post-24931020194720328312017-11-27T16:19:00.000+09:002017-11-27T16:19:10.290+09:00iOS11アプリ起動中にPush通知が受け取れないiOS10からUserNotificationが導入されて、RemoteNotificationと共存している時に、iOS11ではアプリがForegroundにいる時に通知が取得できない状態になっていた。<br />
<br />
<br />
```<br />
<div style="background-color: white; font-family: Menlo; font-size: 11px; line-height: normal;">
<span style="color: #ba2da2;">func</span> application(<span style="color: #ba2da2;">_</span> application: <span style="color: #703daa;">UIApplication</span>, didReceiveRemoteNotification userInfo: [<span style="color: #703daa;">AnyHashable</span> : <span style="color: #ba2da2;">Any</span>]) {</div>
<div style="background-color: white; font-family: Menlo; font-size: 11px; line-height: normal;">
// ここで処理を行う</div>
<br />
<div style="background-color: white; font-family: Menlo; font-size: 11px; line-height: normal;">
}</div>
```<br />
<br />
iOS10までは、UserNotificationも上記が呼ばれる<br />
<br />
iOS11ではUNUserNotificationCenterDelegateを実装しないと呼ばれない<br />
<br />
```<br />
<div style="background-color: white; color: #ba2da2; font-family: Menlo; font-size: 11px; line-height: normal;">
<span style="color: black;"> </span>@available<span style="color: black;">(</span>iOS<span style="color: black;"> </span><span style="color: #272ad8;">10.0</span><span style="color: black;">, *)</span></div>
<div style="background-color: white; font-family: Menlo; font-size: 11px; line-height: normal;">
<span style="color: #ba2da2;">func</span> userNotificationCenter(<span style="color: #ba2da2;">_</span> center: <span style="color: #703daa;">UNUserNotificationCenter</span>, willPresent notification: <span style="color: #703daa;">UNNotification</span>, withCompletionHandler completionHandler: <span style="color: #ba2da2;">@escaping</span> (<span style="color: #703daa;">UNNotificationPresentationOptions</span>) -> <span style="color: #703daa;">Void</span>) {</div>
<div style="background-color: white; font-family: Menlo; font-size: 11px; line-height: normal;">
<br /></div>
<div style="background-color: white; font-family: Menlo; font-size: 11px; line-height: normal;">
// ここで処理を行う</div>
<div style="background-color: white; font-family: Menlo; font-size: 11px; line-height: normal;">
<br /></div>
<div style="background-color: white; font-family: Menlo; font-size: 11px; line-height: normal;">
completionHandler([])</div>
<br />
<div style="background-color: white; font-family: Menlo; font-size: 11px; line-height: normal;">
}</div>
```<br />
<br />
アプリ起動時もUserNotificationを表示させたい場合はcompetionHandler([.badge, .alert, .sound])とすると、表示される。<br />
<br />
そのをたっぷすると、上のdidReceiveRemoteNotificationあ呼ばれるhrkhttp://www.blogger.com/profile/14369445590054241924noreply@blogger.com0tag:blogger.com,1999:blog-3058957617329024387.post-10424664750539013182017-11-25T22:41:00.002+09:002017-11-25T22:41:43.829+09:00GAE DataStoreバックアップ&リストア方法https://cloud.google.com/datastore/docs/console/datastore-backing-up-restoring?hl=ja<br />
<br />
<h2>
1. 書き込み制限</h2>
ドキュメントに書いてあるのは書き込みを向こうにする・・・<br />
<br />
そうすると、全部のデータストアが書き込み向こうになるので、一旦この設定は見送り<br />
<br />
書き込み制限をすると、全てのエンティティーでエラーとなる<br />
<br />
<h2>
2.バックアップ作成</h2>
<div>
バックアップしたいエンティティを選択してバックアップを作成</div>
<div>
<br /></div>
<div>
バックアップ名の入力があるので、基本そのまま保存する</div>
<div>
<br /></div>
<div>
保存先のGoogle Cloud Storageが登録されていない場合、エラーとなるので、</div>
<div>
バックアップようのパケットを作成する</div>
<div>
<br /></div>
<h2>
3.リストア</h2>
<div>
バックアップから選択してリストする</div>
<div>
<br /></div>
<div>
(バックアップから復元する場合、バックアップ後に登録したデータが削除されるわけではない)</div>
hrkhttp://www.blogger.com/profile/14369445590054241924noreply@blogger.com0tag:blogger.com,1999:blog-3058957617329024387.post-12384237705099993382017-08-25T14:47:00.000+09:002017-08-25T14:47:12.467+09:00react nativeでxcodeのconfigurationを追加(Adhocなど)している時のハマりポイント新しくreact-nativeのライブラリを追加して、linkを通しても、Adhocビルドが通りません。<br />
<br />
例えば以下のようにライブラリを追加すると<br />
<br />
```<br />
npm install react-native-image-picker@latest --save<br />
react-native link<br />
```<br />
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjtZy5-IFwO4Aa0JSl1Jjmo84OjCX06l__-gdCz9a_w8MM-7heHh0uqMbEcKAJEKr-_-lcheJDmw-Qlf65dorBSaix15Wgec2CKswZE3oNVwVEnrosJO4um6vUbszXlz9Ehnjv9pulvteU/s1600/%25E3%2582%25B9%25E3%2582%25AF%25E3%2583%25AA%25E3%2583%25BC%25E3%2583%25B3%25E3%2582%25B7%25E3%2583%25A7%25E3%2583%2583%25E3%2583%2588+2017-08-25+14.26.30.png" imageanchor="1" style="clear: left; float: left; margin-bottom: 1em; margin-right: 1em;"><img border="0" data-original-height="522" data-original-width="1576" height="131" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjtZy5-IFwO4Aa0JSl1Jjmo84OjCX06l__-gdCz9a_w8MM-7heHh0uqMbEcKAJEKr-_-lcheJDmw-Qlf65dorBSaix15Wgec2CKswZE3oNVwVEnrosJO4um6vUbszXlz9Ehnjv9pulvteU/s400/%25E3%2582%25B9%25E3%2582%25AF%25E3%2583%25AA%25E3%2583%25BC%25E3%2583%25B3%25E3%2582%25B7%25E3%2583%25A7%25E3%2583%2583%25E3%2583%2588+2017-08-25+14.26.30.png" width="400" /></a></div>
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
Configurationを追加してあげないといけない。hrkhttp://www.blogger.com/profile/14369445590054241924noreply@blogger.com0tag:blogger.com,1999:blog-3058957617329024387.post-84361652606732721542017-08-10T23:53:00.000+09:002017-08-11T13:31:24.607+09:00GAE/goのログを分析可能にする#ストレージ先<br />
<br />
- BigQuery<br />
- Cloud Storage<br />
<br />
<a href="https://cloud.google.com/logging/docs/export/using_exported_logs?hl=ja">https://cloud.google.com/logging/docs/export/using_exported_logs?hl=ja</a><br />
<br />
## BigQuery<br />
<br />
検索しやすい<br />
料金はCloud Storageより高い<br />
$0.02/GB (90日アクセエスないと $0.01/GB)<br />
<br />
## Cloud Storage<br />
<br />
検索は不向き<br />
料金は安い<br />
1時間に1回、一括で行われる<br />
東京 Reagional Storage $0.023/GB Nealine Storage $0.016<br />
<br />
<br />
# 保存形式<br />
<br />
## BigQuery<br />
<br />
リクエストログになるため、1リクエストに対して出力したログを全て1つのjsonにかくのうされる<br />
<br />
そのためそのままBigQueryに登録しようとすると、余計なログまで格納される<br />
<br />
# Cloud Storage<br />
<br />
Cloud Storageに出力されるログも同様に全データが出力される。<br />
Cloud StorageからBigQueryにインポートする場合、カラムの絞り込みを行う必要がある。<br />
また定期実行の仕組みが必要<br />
<br />
<br />
# まとめ<br />
<br />
Cloud Storageを使うメリットがあまりないので、GAE => BigQuery => BigQuery中間テーブルを作成するのが楽そう<br />
<br />hrkhttp://www.blogger.com/profile/14369445590054241924noreply@blogger.com0tag:blogger.com,1999:blog-3058957617329024387.post-88139248561154662792017-08-04T09:26:00.000+09:002017-08-04T09:26:01.751+09:00golangでバーコード作成<br />
star: 284<br />
<a href="https://github.com/boombuler/barcode">https://github.com/boombuler/barcode</a><br />
<br />
いろいろ調べようとおもったけど、あまり種類がなさそうなので、ひとまず上記のやつを使ってみる<br />
<br />
<br />
バーコードのライブラリ一覧<br />
<a href="https://golanglibs.com/top?q=barcode">https://golanglibs.com/top?q=barcode</a>hrkhttp://www.blogger.com/profile/14369445590054241924noreply@blogger.com0tag:blogger.com,1999:blog-3058957617329024387.post-71242492955708554622017-07-30T10:39:00.003+09:002017-07-30T10:41:17.507+09:00React NativeにFastlaneを使って、FabricとCodePushにデプロイする<h2>
前提</h2>
<br />
FabticとCodePushはすでに使える状態<br />
<br />
<h3>
ディレクトリ構成</h3>
<br />
.<br />
├── README.md<br />
├── __tests__<br />
├── app.json<br />
├── build<br />
├── fastlane<br />
├── index.ios.js<br />
├── ios<br />
├── js<br />
├── node_modules<br />
└── package.json<br />
<div>
<br /></div>
<h3>
プロジェクト名</h3>
<div>
HRKSample</div>
<div>
<br /></div>
<h2>
要約</h2>
<div>
<br /></div>
<div>
gymでworkspaceを指定、ipaをbuildディレクトリ配下に出力</div>
<div>
crashlyticsでipa_pathの指定</div>
<div>
code-pushのpluginを追加</div>
<div>
<br /></div>
<div>
<br /></div>
<h2>
Fastlane Plugin追加</h2>
<div>
<br /></div>
<h3>
fastlane/Pluginfile ファイルを作成</h3>
<div>
<br /></div>
<div>
```</div>
<div>
gem 'fastlane-plugin-code_push'</div>
<div>
```</div>
<div>
<br /></div>
<h3>
プラグインのインストール</h3>
<div>
$ fastlane install_plugins</div>
<div>
<br /></div>
<div>
<br /></div>
<div>
<br /></div>
<div>
<br /></div>
<h2>
Fastfile</h2>
<div>
<br /></div>
<h3>
Fablicへアップロード</h3>
<div>
<div>
lane :beta do</div>
</div>
<div>
<div>
gym(</div>
<div>
workspace: 'ios/HRKSample.xcworkspace',</div>
<div>
scheme: "HRKSample",</div>
<div>
output_directory: "build",</div>
<div>
)</div>
<div>
crashlytics(</div>
<div>
ipa_path: "build/HRKSample.ipa",</div>
<div>
api_token: "xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx",</div>
<div>
build_secret: "xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx",</div>
<div>
)</div>
</div>
<div>
<div>
end</div>
</div>
<div>
<br /></div>
<h3>
code-pushへデプロイ</h3>
<div>
アクセスキーは ~/.code-push.config に設定済みのはず。</div>
<div>
<br /></div>
<div>
<div>
desc "fastlane beta_app desc:\"update description\""</div>
<div>
lane :beta_app do |options|</div>
<div>
code_push_release_react(</div>
<div>
app_name: "hrk-sample",</div>
<div>
platform: "ios",</div>
<div>
description: options[:desc],</div>
<div>
)</div>
<div>
end</div>
</div>
<div>
<br /></div>
hrkhttp://www.blogger.com/profile/14369445590054241924noreply@blogger.com0tag:blogger.com,1999:blog-3058957617329024387.post-45538966581155411242017-07-29T09:40:00.000+09:002017-07-29T09:40:01.903+09:00Let's Encryptを使って無料でHTTPS対応する<h3>
前提</h3>
<br />
CentOS release 6.9 (Final)<br />
<br />
すでに httpでnginxが動いてる前提<br />
<br />
<h3>
勘違いしていた点</h3>
ドキュメントなどを見てると、nginxのプラグインを使うとか書いてあるが、<br />
--webroot -w [nginxのルートディレクトリ]を指定すればOK<br />
<br />
<br />
<h3>
証明書作成コマンド</h3>
<br />
$ sudo ./certbot-auto certonly --webroot -w /usr/share/nginx/hogehoge -d foo-bar.com<br />
<br />
作業ディレクトリを指定しなければ、ここに作成される<br />
/etc/letsencrypt/live/[ドメイン名]/<br />
<br />
<h3>
nginxの設定</h3>
<br />
ssl_certificate /etc/letsencrypt/live/foo-bar.com/fullchain.pem;<br />
ssl_certificate_key /etc/letsencrypt/live/foo-bar.com/privkey.pem;<br />
ssl_session_cache shared:SSL:1m;<br />
ssl_session_timeout 10m;<br />
ssl_ciphers HIGH:!aNULL:!MD5;<br />
ssl_prefer_server_ciphers on;hrkhttp://www.blogger.com/profile/14369445590054241924noreply@blogger.com0tag:blogger.com,1999:blog-3058957617329024387.post-608672284418109472017-07-25T21:26:00.000+09:002017-07-25T21:26:05.892+09:00fastlaneでデバイス登録Fastlaneを使ってデバイスの登録を行い、Provisioning Profileへの追加、Xcodeの更新を行う<br />
<br />
<h3>
デバイスの追加</h3>
<div>
register_devicesで追加</div>
<div>
<a href="https://docs.fastlane.tools/actions/#register_devices">https://docs.fastlane.tools/actions/#register_devices</a></div>
<div>
<br /></div>
<h3>
Provisioning Profileの更新</h3>
<div>
sigh で更新</div>
<div>
<a href="https://docs.fastlane.tools/actions/#sigh">https://docs.fastlane.tools/actions/#sigh</a></div>
<div>
<br /></div>
<div>
adhocやdevelopmentの指定が可能</div>
<div>
<br /></div>
<div>
```</div>
<div>
# Adhoc</div>
<div>
<div>
sigh(force: true, adhoc: true)</div>
</div>
<div>
# Development</div>
<div>
sigh(force: true, development: true)</div>
<div>
```</div>
<div>
<br /></div>
<h3>
Xcodeの設定の更新</h3>
<div>
update_project_provisioningで更新</div>
<div>
<a href="https://docs.fastlane.tools/actions/#update_project_provisioning">https://docs.fastlane.tools/actions/#update_project_provisioning</a></div>
<div>
<br /></div>
<div>
ビルドの指定や、ファイル名の指定が可能</div>
<div>
<br /></div>
<div>
```</div>
<div>
<div>
update_project_provisioning(build_configuration: "Debug")</div>
</div>
<div>
```</div>
<div>
<br /></div>
<div>
<br /></div>
<h2>
現時点でのFastfaile</h2>
<div>
<br /></div>
<br />
```<br />
desc "Register Device"<br />
lane :add_device do |options|<br />
if options[:name] && options[:udid]<br />
register_devices(devices: {options[:name] => options[:udid]})<br />
update_develop_provisioning()<br />
update_adhoc_provisioning()<br />
else<br />
UI.error "Usage: fastlane add_device name:'New device name' udid:'UDID'"<br />
end<br />
end<br />
<br />
desc "update developmemt provisioning profile"<br />
lane :update_develop_provisioning do<br />
sigh(<br />
force: true,<br />
development: true,<br />
output_path: "provisioning",<br />
filename: "development.mobileprovision"<br />
)<br />
update_project_provisioning(<br />
build_configuration: "Debug",<br />
profile: "provisioning/development.mobileprovision",<br />
)<br />
end<br />
<br />
desc "update adhoc provisioning profile"<br />
lane :update_adhoc_provisioning do<br />
sigh(<br />
force: true,<br />
adhoc: true,<br />
output_path: "provisioning",<br />
filename: "adhoc.mobileprovision"<br />
)<br />
update_project_provisioning(<br />
build_configuration: "Release",<br />
profile: "provisioning/adhoc.mobileprovision",<br />
)<br />
end<br />
```<br />
<br />
使い方<br />
fastlane add_device name:'hrk iPhone7' udid:xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx<br />
<br />
<br />
<br />
<br />
<br />hrkhttp://www.blogger.com/profile/14369445590054241924noreply@blogger.com0tag:blogger.com,1999:blog-3058957617329024387.post-2845077224827371852017-07-16T13:20:00.001+09:002017-07-16T13:20:22.910+09:00React NativeのAnimationについてreact nativeのアニメーションには2つのやり方がある<br />
<br />
Animatedを使う場合と、LayoutAnimationがある<br />
<br />
<h3>
Animated</h3>
<div>
AnimatedはView, Text, Image, ScrollViewの4つのコンポーネントをexportしている</div>
<div>
<br /></div>
<div>
Animated.createAnimatedComponent()を使って独自のコンポーネントを作成することも可能</div>
<div>
<br /></div>
<div>
例:</div>
<div>
<br /></div>
<div>
```</div>
<div>
<div>
class FadeInView extends React.Component {</div>
<div>
state = {</div>
<div>
fadeAnim: new Animated.Value(0), // 0で初期化する</div>
<div>
}</div>
<div>
<br /></div>
<div>
componentDidMount() {</div>
<div>
Animated.timing( // </div>
<div>
this.state.fadeAnim, // 変化させる値</div>
<div>
{</div>
<div>
toValue: 1, // どこまで変化させるか</div>
<div>
duration: 10000, // どれくらい時間かけるか</div>
<div>
}</div>
<div>
).start(); // アニメーション実行</div>
<div>
}</div>
<div>
<br /></div>
<div>
render() {</div>
<div>
let { fadeAnim } = this.state;</div>
<div>
<br /></div>
<div>
return (</div>
<div>
<animated .view="" div="" nbsp=""><div>
style={{</div>
<div>
...this.props.style,</div>
<div>
opacity: fadeAnim, </div>
<div>
}}</div>
<div>
></div>
<div>
{this.props.children}</div>
<div>
</div>
</animated></div>
<div>
);</div>
<div>
}</div>
<div>
}</div>
</div>
<div>
```</div>
<div>
<br /></div>
<div>
<br /></div>
<div>
setStateを呼び出して再レンダリングするよりも高速</div>
<div>
<br /></div>
<h3>
オプション</h3>
<div>
Animated.timing</div>
<div>
easing: エフェクトの動き</div>
<div>
delays 遅延実行 (ミリ秒)</div>
<div>
<br /></div>
<div>
<br /></div>
<h3>
アニメションの順番</h3>
<div>
アニメーションの同時実行や、直前のアニメーションが終わってから実行させるように設定することも可能</div>
<div>
<br /></div>
<div>
Animated.sequence 順番にアニメーションさせる</div>
<div>
Animated.parallel 同時にアニメーションさせる</div>
<div>
<br /></div>
<div>
<a href="http://facebook.github.io/react-native/releases/0.45/docs/animated.html#composing-animations">http://facebook.github.io/react-native/releases/0.45/docs/animated.html#composing-animations</a></div>
<div>
<br /></div>
<div>
<br /></div>
<h3>
補完</h3>
<div>
<br /></div>
<div>
Animation.Valueの値を別の値で置き換える</div>
<div>
例: 0-1の値を0-100に置き換える</div>
<div>
<br /></div>
<div>
<div>
value.interpolate({</div>
<div>
inputRange: [0, 1],</div>
<div>
outputRange: [0, 100],</div>
<div>
});</div>
</div>
<div>
<br /></div>
<div>
必ずしも線形にする必要はない</div>
<div>
<br /></div>
<div>
<div>
value.interpolate({</div>
<div>
inputRange: [-300, -100, 0, 100, 101],</div>
<div>
outputRange: [300, 0, 1, 0, 0],</div>
<div>
});</div>
</div>
<div>
<br /></div>
<div>
<div>
Input | Output</div>
<div>
------|-------</div>
<div>
-400| 450</div>
<div>
-300| 300</div>
<div>
-200| 150</div>
<div>
-100| 0</div>
<div>
-50| 0.5</div>
<div>
0| 1</div>
<div>
50| 0.5</div>
<div>
100| 0</div>
<div>
101| 0</div>
<div>
200| 0</div>
</div>
<div>
<br /></div>
<div>
数字から文字に変換も可能</div>
<div>
<br /></div>
<div>
<div>
value.interpolate({</div>
<div>
inputRange: [0, 360],</div>
<div>
outputRange: ['0deg', '360deg']</div>
<div>
})</div>
</div>
<div>
<br /></div>
<div>
<br /></div>
<div>
<br /></div>
<h3>
スクロールに合わせて動かす</h3>
<div>
<br /></div>
<div>
パラメータ</div>
<div>
<div>
state = {</div>
<div>
scrollY: new Animated.Value(0),</div>
<div>
}</div>
</div>
<div>
<br /></div>
<div>
Scroll実装</div>
<div>
<br /></div>
<div>
<div>
<scrollview div=""><div>
scrollEventThrottle={16}</div>
<div>
onScroll={Animated.event(</div>
<div>
[{ nativeEvent: { contentOffset: { y: scrollY } } }]</div>
<div>
)}</div>
<div>
></div>
</scrollview></div>
<div>
<br /></div>
<div>
対象のView</div>
<div>
<br /></div>
<div>
<div>
<animated .view="" div=""><div>
style={{</div>
<div>
position: 'absolute',</div>
<div>
top: 30,</div>
<div>
right: 0,</div>
<div>
transform: [{</div>
<div>
translateY: Animated.multiply(scrollY, -1)</div>
<div>
}],</div>
<div>
}}</div>
<div>
></div>
<div>
<text>Hoge</text></div>
<div>
</div>
</animated></div>
</div>
<div>
<br /></div>
<div>
Animated.multiplyは-1で掛け算してる</div>
<div>
<br /></div>
<h3>
PanGestureのイベント</h3>
<div>
<div>
onPanResponderMove={Animated.event(</div>
<div>
[null, // ignore the native event</div>
<div>
// extract dx and dy from gestureState</div>
<div>
// like 'pan.x = gestureState.dx, pan.y = gestureState.dy'</div>
<div>
{dx: pan.x, dy: pan.y}</div>
<div>
])}</div>
</div>
<div>
<br /></div>
<h3>
Native Driver</h3>
<div>
<br /></div>
<div>
ネイティブ側でアニメーションを実行する</div>
<div>
アニメーション中もJSのスレッドがブロックされることはない</div>
<div>
<br /></div>
<div>
ScrrollViewの例</div>
<div>
<br /></div>
<div>
<div>
<animated .scrollview="" div=""><div>
scrollEventThrottle={16}</div>
<div>
onScroll={Animated.event(</div>
<div>
[{ nativeEvent: { contentOffset: { y: scrollY } } }],</div>
<div>
{ useNativeDriver: true }</div>
<div>
)}</div>
<div>
></div>
</animated></div>
<div>
<br /></div>
<h3>
LayoutAnimation</h3>
<div>
<br /></div>
<div>
全てのレイアウト変更に対するアニメーションに便利</div>
<div>
flex-boxのレイアウトなど。</div>
<div>
ただしできることが少ない</div>
<div>
<br /></div>
<div>
<div>
LayoutAnimation.linear();</div>
<div>
this.setState({ w: this.state.w + 15, h: this.state.h+15 })</div>
</div>
<div>
<br /></div>
</div>
</div>
hrkhttp://www.blogger.com/profile/14369445590054241924noreply@blogger.com0tag:blogger.com,1999:blog-3058957617329024387.post-1473197519790966982017-07-14T10:55:00.000+09:002017-07-14T10:55:00.516+09:00Google DataStoreのID管理について<h3>
前提</h3>
<div>
<div class="" data-block="true" data-editor="5rjmh" data-offset-key="8albk-0-0" style="background-color: white; color: #4d4d4d; font-family: 'Helvetica Neue', Helvetica, Arial, 'Hiragino Kaku Gothic ProN', Meiryo, 'Segoe UI Symbol', sans-serif; font-size: 16px; font-variant-ligatures: normal; orphans: 2; white-space: pre-wrap; widows: 2;">
<div class="public-DraftStyleDefault-block public-DraftStyleDefault-ltr" data-offset-key="8albk-0-0" style="direction: ltr; position: relative;">
<span data-offset-key="8albk-0-0">DataStoreは分散してデータを保存しているため、データ数が膨大になっても、</span></div>
</div>
<div class="" data-block="true" data-editor="5rjmh" data-offset-key="23p17-0-0" style="background-color: white; color: #4d4d4d; font-family: 'Helvetica Neue', Helvetica, Arial, 'Hiragino Kaku Gothic ProN', Meiryo, 'Segoe UI Symbol', sans-serif; font-size: 16px; font-variant-ligatures: normal; orphans: 2; white-space: pre-wrap; widows: 2;">
<div class="public-DraftStyleDefault-block public-DraftStyleDefault-ltr" data-offset-key="23p17-0-0" style="direction: ltr; position: relative;">
<span data-offset-key="23p17-0-0">パフォーマンスが落ちることがない。</span></div>
</div>
<div class="" data-block="true" data-editor="5rjmh" data-offset-key="bmq46-0-0" style="background-color: white; color: #4d4d4d; font-family: 'Helvetica Neue', Helvetica, Arial, 'Hiragino Kaku Gothic ProN', Meiryo, 'Segoe UI Symbol', sans-serif; font-size: 16px; font-variant-ligatures: normal; orphans: 2; white-space: pre-wrap; widows: 2;">
<div class="public-DraftStyleDefault-block public-DraftStyleDefault-ltr" data-offset-key="bmq46-0-0" style="direction: ltr; position: relative;">
<span data-offset-key="bmq46-0-0"><br data-text="true" /></span></div>
</div>
<div class="" data-block="true" data-editor="5rjmh" data-offset-key="6pvmd-0-0" style="background-color: white; color: #4d4d4d; font-family: 'Helvetica Neue', Helvetica, Arial, 'Hiragino Kaku Gothic ProN', Meiryo, 'Segoe UI Symbol', sans-serif; font-size: 16px; font-variant-ligatures: normal; orphans: 2; white-space: pre-wrap; widows: 2;">
<div class="public-DraftStyleDefault-block public-DraftStyleDefault-ltr" data-offset-key="6pvmd-0-0" style="direction: ltr; position: relative;">
<span data-offset-key="6pvmd-0-0">ただし、その分考慮しないといけない部分も多い</span></div>
<div class="public-DraftStyleDefault-block public-DraftStyleDefault-ltr" data-offset-key="6pvmd-0-0" style="direction: ltr; position: relative;">
<span data-offset-key="6pvmd-0-0"><br /></span></div>
<h3>
連番</h3>
<div>
基本的には使えない、データを複数拠点で管理しているため、同期をとろうとすると、パフォーマンスがボトルネクになるため、オートインクリメントなどはない。</div>
<div>
<br /></div>
<div>
また連番にすると、データの格納先が分散されないため、そもそも良くない。</div>
<div>
<br /></div>
<div>
<br /></div>
<h3>
要件</h3>
<h4>
連番表示</h4>
<div>
それでも人が作業する場合に、管理IDなるものは連番の方が何かと処理しやすかったりする。</div>
<div>
<br /></div>
<div>
なのでデータの保存用のIDと表示用のIDを準備して対応する。</div>
<div>
<br /></div>
<h4>
事前のID取得</h4>
<div>
IDに紐づいてファイル名などを決定したい(別でファイル名作ってもいいけど・・・)</div>
<div>
<br /></div>
<div>
<br /></div>
<h3>
連番の生成方法</h3>
<h4>
その1</h4>
<div>
<div>
連番はmemcachedでインクリメント</div>
<div>
※ここって整合性は保証される?</div>
</div>
<div>
<br /></div>
<h4>
その2</h4>
<div>
連番はCloud SQLを使うmysqlのMyISAMでシーケンステーブルを作成</div>
<div>
<br /></div>
<div>
<br /></div>
<h3>
事前のID取得</h3>
<h4>
その1</h4>
<div>
DataStoreにKey専用のEntityを作る</div>
<div>
- UserID IDの発番用に使う</div>
<div>
- User</div>
<div>
<br /></div>
<h4>
その2</h4>
<div>
UUIDを使う?</div>
<div>
<br /></div>
</div>
</div>
hrkhttp://www.blogger.com/profile/14369445590054241924noreply@blogger.com0tag:blogger.com,1999:blog-3058957617329024387.post-18082343551969489472017-07-10T02:21:00.001+09:002017-07-10T02:21:59.191+09:00GAE/goからFirebase Cloud Messagingを使う<h2>
ライブラリの選定</h2>
<div>
色々なオープンソースを使わせてもらい感謝してます!</div>
<div>
<br /></div>
<div>
star: 91 最終更新2/6</div>
<div>
<a href="https://github.com/NaySoftware/go-fcm">https://github.com/NaySoftware/go-fcm</a></div>
<div>
<br /></div>
<div>
star: 12 最終更新5/12</div>
<div>
<a href="https://github.com/edganiukov/fcm">https://github.com/edganiukov/fcm</a></div>
<div>
<br /></div>
<div>
star: 14 5/18</div>
<div>
<a href="https://github.com/maddevsio/fcm"></a><a href="https://github.com/edganiukov/fcm"></a><a href="https://github.com/maddevsio/fcm">https://github.com/maddevsio/fcm</a></div>
<div>
<br /></div>
<div>
<br /></div>
<div>
今回はGAEで使うため、httpクライアントを差し替えれるものを使いたかった。</div>
<div>
あと、コードを見てみると、送信用のパラメータが一通り揃っているedganiukovさんの</div>
<div>
ライブラリが良さそう</div>
<div>
<br /></div>
<h2>
実装</h2>
<div>
<br /></div>
<div>
<div>
func SendNotification(ctx context.Context, body string) error {</div>
<div>
<br /></div>
<div>
<span class="Apple-tab-span" style="white-space: pre;"> </span>token := "sample_token"</div>
<div>
<span class="Apple-tab-span" style="white-space: pre;"> </span>// or</div>
<div>
<div>
<span class="Apple-tab-span" style="white-space: pre;"> </span>tokens :=[]string{ "sample_token", "sample_token2" }</div>
</div>
<div>
<br /></div>
<div>
<br /></div>
<div>
<span class="Apple-tab-span" style="white-space: pre;"> </span>msg := &fcm.Message{</div>
<div>
<span class="Apple-tab-span" style="white-space: pre;"> </span>Notification: &fcm.Notification{</div>
<div>
<span class="Apple-tab-span" style="white-space: pre;"> </span>Body: body,</div>
<div>
<span class="Apple-tab-span" style="white-space: pre;"> </span>Badge: "1",</div>
<div>
<span class="Apple-tab-span" style="white-space: pre;"> </span>},</div>
<div>
<span class="Apple-tab-span" style="white-space: pre;"> </span>}</div>
<div>
<br /></div>
<div>
<span class="Apple-tab-span" style="white-space: pre;"> </span>if len(tokens) == 1 {</div>
<div>
<span class="Apple-tab-span" style="white-space: pre;"> </span>msg.Token = token</div>
<div>
<span class="Apple-tab-span" style="white-space: pre;"> </span>} else {</div>
<div>
<span class="Apple-tab-span" style="white-space: pre;"> </span>msg.RegistrationIDs = tokens</div>
<div>
<span class="Apple-tab-span" style="white-space: pre;"> </span>}</div>
<div>
<br /></div>
<div>
<span class="Apple-tab-span" style="white-space: pre;"> </span>// Create a FCM client to send the message.</div>
<div>
<span class="Apple-tab-span" style="white-space: pre;"> </span><span style="color: red;">o := fcm.WithHTTPClient(urlfetch.Client(ctx)) // GAEようにhttp clientを差し替える</span></div>
<div>
<span class="Apple-tab-span" style="white-space: pre;"> </span>client, _ := fcm.NewClient(os.Getenv("FIREBASE_API_KEY"), o)</div>
<div>
<br /></div>
<div>
<span class="Apple-tab-span" style="white-space: pre;"> </span>// Send the message and receive the response without retries.</div>
<div>
<span class="Apple-tab-span" style="white-space: pre;"> </span>response, err := client.Send(msg)</div>
<div>
<span class="Apple-tab-span" style="white-space: pre;"> </span>if err != nil {</div>
<div>
<span class="Apple-tab-span" style="white-space: pre;"> </span>return err</div>
<div>
<span class="Apple-tab-span" style="white-space: pre;"> </span>}</div>
<div>
<br /></div>
<div>
<span class="Apple-tab-span" style="white-space: pre;"> </span>log.Debugf(ctx, "%+v", response)</div>
<div>
<br /></div>
<div>
<span class="Apple-tab-span" style="white-space: pre;"> </span>return nil</div>
<div>
}</div>
</div>
<div>
<br /></div>
hrkhttp://www.blogger.com/profile/14369445590054241924noreply@blogger.com0tag:blogger.com,1999:blog-3058957617329024387.post-43945163340711862762017-05-03T09:50:00.001+09:002017-05-03T09:50:30.873+09:00Railsのアソシエーションで名前が違う場合の対処法Railsのモデル名にLoveなどをつけた場合、has_many: lovesと指定すると、Railsはloves => lofeと変換してしまう。<br />
<br />
これを正しくするには、inflections.rbに追記する。<br />
config/initializers/inflections.rb<br />
<br />
```<br />
ActiveSupport::Inflector.inflections(:en) do |inflect|<br />
inflect.irregular "love", "loves"<br />
end<br />
```<br />
<br />
<br />hrkhttp://www.blogger.com/profile/14369445590054241924noreply@blogger.com0tag:blogger.com,1999:blog-3058957617329024387.post-89960319329477367922017-04-20T11:54:00.000+09:002017-04-20T11:54:04.765+09:00React Native Nclideでデバッグできない時の対処法React Nativeの開発環境の構築でハマったのでメモ<br />
<br />
<h2>
atom nuclideでデバッグ</h2>
<div>
<br /></div>
<div>
下準備と手順が大切?</div>
<div>
<br /></div>
<div>
1. (atom) packager start</div>
<div>
2. (cmd) react-native ios-run</div>
<div>
3. (atom) debugger start</div>
<div>
4. シミュレータのDebug JS Remotelyを選択</div>
<div>
<br /></div>
<div>
多分だけど、chromeのdebuggerが起動してあると、そっちと接続してしまうので、</div>
<div>
そこだけ気をつけてればすぐにつながったかも。</div>
hrkhttp://www.blogger.com/profile/14369445590054241924noreply@blogger.com0