taiki-t's diary

React Native, Rails そして雑多な記録: The world is waiting for you to give it a meaning.

Show an image on launch screen in React Native iOS app

Tips React Native

My long attempts to show an image on launch screen (or splash screen) in iOS app with React Native have failed so far and here is a solution I finally found. The key is to make use of LaunchScreen.xib and not to use bunch of launch screen assets settings. (cf: xcode - iOS Launch screen in React Native - Stack Overflow )

1. Find LaunchScreen.xib

This blog post well describes how to find and edit LaunchScreen.xib so just watch it :How to Remove the “Powered by React Native” Message in iOS Apps | React Cafe. LaunchScreen.xib file is located under a file which name is the one you chosen for your app.*1

2. Provide image assets

Let’s provide assets. Find and select a file named Images.xcassets on XCode and show context menu with ctrl-click then select “New Image Set” as shown in an image below.

f:id:taiki-t:20170204191112j:plain

Drag'n'Drop images required in XCode. You may need to provide images which size are 1x, 2x and 3x. I named assets SplashIcon as shown in the image.

3. Set images in LaunchScreen.xib

This is the last step. Open LaunchScreen.xib then drag drop an Image View into a View.

f:id:taiki-t:20170204195119j:plain

Chose an image which added in the step 2.

f:id:taiki-t:20170204195817j:plain

Basically that’s all. You should be able to see the image you’ve set on launch screen. Make sure do Reset Content and Settings... on iOS simulator to reflect those changes if you are on the simulator.

Omake*2

Set constrains on the image in order to show it always in the center of the launch screens. Drag a connection with ctrl-clicking the image to the View. See this post to check required constrains: How to create ImageView center on storyboard using iOS? - Stack Overflow

*1:If you don’t want to use images (so as your logo) for your launch screen, that’s fine and just edit the screen. Actually Apple says “Don’t include logos or other branding elements unless they’re a static part of your app’s first screen.” and “Design a launch screen that’s nearly identical to the first screen of your app.” in their guide line for launch screen.

As far as I checked, some developers follow the guidelines and others don’t. Facebook, for example, follows the guidelines but Google mostly ignores it. Of course, Apple’s applications follow them. You might find it interesting to check out Apps on your device to see the difference of effects.

*2:https://en.wikipedia.org/wiki/Omake

React Native で文字を truncate

Tips React Native

プロローグ

Railsって色々ヘルパーが用意されていて便利。ActionView::Helpers::TextHelper#truncateもその一つ。これは、文字列を切り詰めて末尾に...と付けてくれる。そういうヘルパーみたいなのがRNにもあったら便利だな？と思った。そしたら、あった。

numberOfLines と ellipsizeMode

ヘルパーメソッドとかじゃなくて、Textコンポーネントのprop指定でできる。numberOfLines で表示する行数を指定する。そして、ellipsizeModeであの...やつをどこに用いるかを指定できる。末尾に...をつけて省略したい場合、

<Text
  numberOfLines={1}
  ellipsizeMode={'tail'}
>
   longlongfoobarbazbarfoobarbazbar
</Text>

というような具合だ。これで ‘longlongfooba…’ のように表示されるようになる。...をつける箇所の指定の仕方は、公式ドキュメントに詳しい。ひとつ注意をあげるとすれば、ellipsizeModeを指定する場合はnumberOfLinesを指定する必要がある。

エピローグ

こうして無事truncateを自分で実装せずに済んだ。他にもonLayoutなどの指定できるpropがある。これらを適切に使うことで、不要であったり不適切な実装を避けることができる。ReactやReact Native, RelayといったFacebookのOSSに触れていて素晴らしいと思うことの一つは、ドキュメントがきっちりと整備されていることだ。*1

*1:どこかで「FacebookのOSSのポリシーとしてドキュメントが揃うまでリリースしない」という記述を見た気がしたけど、ソースを見つけられなかったので感想止まり。

S3のログから日付とアクセス元を漁るコマンドライン

Tips

プロローグ

S3のログ、見たいと思ったんだよね。アクセス時間と、アクセス元を。

やったこと

  1. ターミナル開く

  2. aws-cliをいれて設定などする
    brew aws-cli, aws configure
    詳しくは: http://docs.aws.amazon.com/ja_jp/streams/latest/dev/kinesis-tutorial-cli-installation.html#config-cli

  3. ログを取ってくる
    あらかじめ保存先ディレクトリを用意して移動しておいて、
    aws s3 cp --region ap-northeast-1 s3://バケット名/ . --recursive
    参考: S3 から ファイルをAWSCLIでディレクトリごとダウンロード - Qiita
  4. ファイル結合
    find . -type f -exec cat {} + > 保存先のファイルパス
    参考: shell - cat files in current folder and all subfolders - Unix & Linux Stack Exchange
  5. 目的の文字列を抽出
    cat 保存したログのパス | cut -d ' ' -f 3,9,20 | grep 抽出したいアクセス元の名前 > 保存先のファイルパス

まぁ大方はこんな感じ。cut -d ' ' -fに指定する数字は必要に応じて調節すると良い。デリミタ（この場合空白 ‘ '）で区切った前から何番目という感じで指定できる。grepで特定のものに絞り込みたくない場合は、pecoに食わせてもいいかもね。

cat 保存したログのパス | cut -d ' ' -f 3,9,20 | peco

エピローグ

昨日は雪が降ってた

Carrierwave TypeError - no implicit conversion of nil into String on multiple upload

Carrierwaveで複数アップロードしようにもどうにもうまくいかない。 調べたあげく普通にIssueにあった。

mount_uploaderじゃなくてmount_uploadersを使うとのこと。 同じくs見落としてた…

github.com

書くことでしか文章は生まれない

文章が先か、書くことが先か。

僕の場合、書くことが先だ。頭の中で書きたいことができるまで待っていると何も書けない。 けれど、一旦書き始めてしまうと堤防が決壊したかのようにとめどなく文章が溢れてくる。

必ずしもまとまった内容で出てくるわけではない。あっちへいったりこっちへいったりする。

そのままの勢いで外に出してしまうこともあれば、一旦整理して整えて出したりする。

仕事では一旦整理して出すけれど、ブログとかではそのまま出したりする。

読みにくいかもしれないけど、それでいいと思ってる。それがブログの役割と捉えている。

もっと乱雑になりそうな時は、匿名ダイアリーに書いたり。 でも、乱雑でも、勢いよく書いたものはそれなりに反応が強い感じがするんだよね。

文章の構造を超えたところで何かを伝えることができているとすれば、嬉しい。

良い文章は自分の中に

なまもの

良い文章は自分の中にある。誰がなんと言おうと。

世の中には事実は一つしかないかもしれないが、真実は２つぐらいある。 一つは他人の中にある真実。もう一つは自分の中にある真実。

この二つの真実は必ずしもいつも一致するわけでもないし、そもそも一致することはないのかもしれない。

普段人とコミュニケーションをしているとふと思うことがある。この人と自分の共通認識はどこで辻褄が合っているのだろう。

同じ赤と言ったとしても、僕の赤はもっとオレンジっぽいかもしれないし、彼女の赤はもっと青に近いかもしれない。わからない。 でも、赤が好き、って言った時の赤は、僕たちの間にある。その言葉に浮かれて、後々楽しい時間を過ごした後、現実に直面して落胆するなんてことは往往にしてあるのだけど。

話が逸れた。僕たちはファジーな世界でファジーな感じでやり取りしてる。一つの言葉にしてもその定義は幅広く、また言葉の質感も重さも人によってまるで異なる。僕たちはベン図を書いてその中央の重なるスペースでコミュニケーションをとっている。

たまたま、僕の赤と彼女の赤に重なる部分があっただけだ。

それは狭いかもしれないし、広いかもしれない。

というわけで、言葉結構曖昧で、それでなんらかの共通認識ができていてそれでコミュニケーションができているのはすごいと思うし、面白い。奇蹟的すらであると思う。僕たちは自分の曖昧な認識を他人というフィードバックを通して再度認識している。赤といったときに緑が返ってきたらそれは自分が間違っているかもしれないし、相手が間違っているかもしれない。けれど緑が返ってきたところで君が微笑んで僕も笑えれば、それはお互いの中にいつのまにか何か共通認識ができていて、斜め上に新たなベン図が書かれてる。面白いし、喜ばしい。

話がまとまらない。言いたいことを元に戻すと、誰がなんと言おうと君がいいと思った文章は言い訳で、それに誰かが難癖をつけようと関係ない。そしてその文章の大部分が関係ないとしても、たった一文、胸を打つ文章があれば、それは君にとって宝物だ。

人生だって、何かのハイライトを除けば、残りは冗長かもしれない。文章で書いたら、長い、短くしろ、なんてツッコミを受けそうで。ネットなら。

でも、そのハイライトを分かり合える人にとっては、その冗長さもあってこそ。だから、それでいい。

たった一文でも、胸を打つ文章に出会えたら、僕はそれで嬉しい。

美はみるものの目に宿る。

僕にとっての真実は、僕が決める。

「セーターとは別のなにかを脱ぎ捨てていくような感じがした。」

http://www.daiwashobo.co.jp/web/html/mob/forty-years/vol04.html

僕はこの一文を読んで、そう思った。