taiki-t's diary

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

運がいいとか悪いとか

雑記

よく運気をあげるとかいう話を聞く。運をよくすれば物事がうまくいくとか。ただそれだけを聞くと眉唾というか実態のない怪しいものを崇めるような雰囲気が漂う。

運気をあげるために日頃の行いをよくしなさい、的な。

これ、運気っていうとよくわからないけど、「人に声をかけてもらえるかどうか」ってことに換言すると、そうだなと思う。

良い話を回してもらえるかどうかというのは、結構その人の人柄にかかっていると思う。というか、良い話をわざわざ嫌な奴に話す人はそういないだろう。

で、その人柄ってのは日頃の行いの積み重ねだ。

そういう意味で、運をよくするために行動を改めるというのは理にかなっていると思う。 どこで誰が何を見ているかはわからない。人の悪口やポイ捨てなどがたまたま見られていて「あ、こいつに話すのはやだな」って思われたら運気が下がる。 つまり人に良い話を持ってきてもらえなくなる。 *1

運も実力のうちとはそういうことだ。*2

けっして壺を買うとかそういうことじゃない。短絡的に壺買えば運気が上がるなんてのは絶対に信じてはいけない。*3

*1:かのリチャード・ブランソンが、自殺相談だかの電話に親身に対応していたおかげで、忘れた頃に有益な情報を教えてもらって助かったとかいうエピソードがあった気がする (アフィリンク: ヴァージン―僕は世界を変えていく) 。 それを幸運と呼ぶならば、そういう幸運に恵まれるかは自分次第だ。 途方に暮れた時に人に手を差し伸べてもらえるかとか、そういうもそう。

*2:わかっていはいるけれどそういう意味で僕は実力がない。不親切で無礼だ。結構損してきたと思う。でもこういう内容をかけるぐらいには声をかけてもらってきた。ありがたい。

*3:壺買って運気が上がる人は一部いるだろう。つまり「こんな壺を持ってるということは、信用できる」と思考するような、力のある人が周りにいるかどうかだ。 あいにく僕の周りには骨董好きもいないし、そんな壺を選ぶ審美眼も自分は持ち合わせていない。壺がメタファーだとすればもう少し範囲は広がる。適当な美術品その他に置き換えてもいい。例えばいい美術品を持っていれば、レオナルド・ディカプリオに自宅に招待してもらえるなんて「ラッキー」も起こるかもしれないね。この場合のラッキーとは、自分の想定外、あるいはコントロール外にある「自分にとっての良いこと」が自分に降りかかって来ることかな。そういうものが思いがけず自分の手元に飛び込んできたら、嬉しくて自然と自分はついてると思えるものね。

Sketch3 グラデーションでぼかす

Sketch3

かなり前にこんな記事を書いた

taiki-t.hatenablog.com

グラデーションでぼかす方法はまた今度紹介するなどと言いつつずっと書いてなかったので手軽に手順だけまとめておこうと思う。

  1. 四角を二つ重ねてかく。一つ書いて⌘ + Dすれば楽だろうか。
  2. その二つの四角を選択してMaskを選択
  3. 上のメニュー Layer からMask Mode > Alpha Maskを選択
  4. 上に重なる四角には、横のメニューからBackground Blurを選択
  5. 下に重なる四角には、横のメニューからFillを選択し塗りつぶす
    1. このとき、上は透明、下は白とかでグラデーションで塗りつぶす
    2. これでグラデーションのかかる範囲を調整
  6. 適宜Background BlurのAmountを調整

西日暮里.rb 36回目「Electronではじめるアプリ開発」発売記念 LT 大会!」の記録

React Native 雑記 日記 感想文 Relay

nishinipporirb.doorkeeper.jp

参加してきた。というか主催者の一人w

今回はオーガナイザーの一人であるじょうさん (@joe_re) が本↓を執筆したので記念LT会をした。

gihyo.jp

テーマは自由。けれど本がElectronということもあり、かなーりfrontよりのLT会だった

まぁRubyistsといえど技術好きの集まりには違いないし、これからもどんどん楽しそうなことやっていきたい。

やったこと

LT大会というとばーっと話しておわりだけど、今回は（も）フィードバック込みでやった。 Lightning Talk & Lightning Feedback（LTLF）という形式で、 以前から何度か試している。これはオーガナイザーの一人であるまつしまさん（@mtsmfm）の発案で始めた試みで、 場がかなり濃くなるので良い。楽しい。

具体的には、

  1. LT中に聴衆がそれぞれ思ったことや疑問などを付箋に書く
  2. LTが終わったら壁に集まって順番に付箋を貼りつつ
  3. その内容について話す、LT発表者が答える

という形式。発表者の一方通行で終わらないので、普通にやるよりは学びが多いと思う。 人数が多い時はどうしたらいいんだろう、って問題もあるけど、そん時はTrelloなりにバーっと書いて非同期でフィードバックするというのが良いのだろうか。

発表内容

基調講演はもちろんじょうさんだった

あとはスライド探しきれていないけれど、ざっと内容を書くと:

という感じだった。一文でまとめたので雑。Opalのすごいコードみたというのと、fastlaneのmatchがスタックしてるとき裏でパスワードをきいているという話がとても印象に残っている。

自分の発表のスライドはこれ:

近々リリースするアプリの技術的側面について話した。 デプロイゲートにてテスト版配布しているので、(iOSのみ): https://dply.me/435uls 気軽に試してフィードバックをもらえると嬉しい。

最後に

西日暮里.rbではまた6月にもLT大会を予定しているので、ぜひご参加ください。

西日暮里.rb | Doorkeeper

上記ページより「コミュニティに参加」をすると次回開催のお知らせがくると思います。

Relay Modernへの移行検討をした

Relay

結論: もう少しドキュメントとサンプルが増えてからにしよう（rcが外れる頃かな？）

追記: 2017/08/21: 移行しました: Relay Modernに移行した - taiki-t's diary

背景

現在アプリを作っていて、フロント側の構成はReact Native + Relay + Reduxという感じだ。

（Relay Modern以前のバージョンはModernの登場によりRelay Classicと呼ばれるようになったのでこの記事でも以後Relay Classicと呼ぶ。)

ネットワークを介するデータについてRelay Classicは素晴らしく機能的だったが、ネットワークを介さないデータの管理には向いていない。というかRelay Classic標準ではできない。

そこで出てくる問題は、コンポーネントを跨いだアプリケーショングローバルのステート管理だ。（コンポーネント単位のローカルステートであればそのままReactのstate, setStateを使って管理すれば良い）

つまりログインステータスなどをアプリケーション全体で一貫して管理するにはそこの層を導入する必要がある。

ReduxもしくはFluxがそこで登場するわけだが、自分の場合Reduxを選んだ。FacebookはFluxを使ってる/たとの話だ*1。

しかしやはりそのためにReduxなりFluxを導入するのは欲する結果と得る複雑性の観点から合理的とは言い難く(個人の感想)、issueなどでもローカルステートの管理をしたいとの要望などは上がっていた。

Relay Modernについて

Relay Modernでの改善については New in Relay Modern - Relay Docs に詳しいので再掲するようなことはしないが、今回Client Schema Extensionsなるものが入る。これはまさに上述の問題を解決するものだ。公式の説明にもそのように記述されている。

This should be able to replace some use cases that previously required a Flux/Redux store on the side.
– https://facebook.github.io/relay/docs/new-in-relay-modern.html#client-schema-extensions より一部抜粋

そのほかに導入された改善として目につくのは、

の2つだ。前者はRelay Classicに慣れ親しんだものにとっては移行コストであって、新規の人への恩恵が大きい。学習コストが下がってるはずだ。後者については、自分のアプリでもそう遠くないうちに導入したい機能だと思っている。

Relay Modernへの移行について

※ ほとんど個人的な話

まぁ自分の場合いまのアプリケーションで差し迫って必要なのはローカルステート問題を解決する機能なので、そこがアップデートへのモチベーションとなる。 ところが、そのClient Schema Extensionsについて具体的な実装に触れたドキュメントは2017/04/23現在、存在しない。 似たようなドキュメント難民の声がIssueに上がっていた。

github.com

提示されたリンクからいくらかざっと辿ってみたけれど、@exportというディレクティブを使うんだ、metadatapropsに入るのかな？ということぐらいしかわからなかった。 それでも試してみようかと思ったけど、そもそもIssueに答えたFB中の人が

but getting this to work outside the FB environment hasn’t yet happened.
– https://github.com/facebook/relay/issues/1656#issuecomment-296249276

と言っているので冒険にはまだ早いなと思いとどまった。もう少し合理的な努力ができそうになってからトライしよう。 そういう訳でまだアップデートしない。

*1:

2015/02/20 もう2年前の情報。2017年現在はどうなってるか知らない:

At Facebook, we have apps built entirely using Flux, entirely using Relay, or with both. One pattern we see emerging is letting Relay manage the bulk of the data flow for an application, but using Flux stores on the side to handle a subset of application state.

https://facebook.github.io/react/blog/2015/02/20/introducing-relay-and-graphql.html#how-does-it-relate-to-flux

Grammarly cm の曲

雑記

Youtubeで流れていいなと思った

Soul City の Here I come というやつらしい

↓ みたCM

www.youtube.com

調べてみるとMarmosetという音楽出版社で配信している。映像に合わせるBGM向けのライセンス提供が主な業態らしい。個人で試聴するぶんには無料でダウンロードできた。自分の映像にマッチするかちゃんと検証するためには全部聞けないとね、ということらしい。

ということで、結婚式の映像につけるとかpodcastで流すとか、作品や配信に使う人はライセンス契約してね。

曲のページ：

Marmoset // Here I Come by Soul City

ライセンス:

Marmoset // Licensing

ライセンスもクラウドファンディング向けとか、スモールビジネス向けだとか、色々あって面白い。

Marmoset:

www.marmosetmusic.com

広告:

English Grammar in Use Book with Answers and Interactive eBook: Self-Study Reference and Practice Book for Intermediate Learners of English

English Grammar in Use Book with Answers and Interactive eBook: Self-Study Reference and Practice Book for Intermediate Learners of English

React Navigationにコントリビュートした

日記 React Native React Navigation

React Navigation, APIはいい感じなんだけど現状beta版ということもあり、プロダクションで使っていこうと思うとなかなか機能が足りない。 それで2017/4/7現在では、v1リリースに向けて最低限必要な機能を実装していこうという状態にある。（と信じている）

github.com

その不足してる機能の一つが、「ネストされたルーターからナビゲーションをリセットできる」ことだ。現状はできない。 で、先日そのPRが出て無事マージされたんだけど、どうやら別の機能(setParams)がうまく動かなくなっていた。 ので、コードを変更しテストを書きPRを出したところ、無事マージしてもらえた。

github.com

よかった（感想）。

React Navigation は React Native本体のコアコントリビューターたちも絡んでいる。出したPRもFacebookでRNを作ってる中の人に見てもらえた。 そういう意味ではReact Native本体にPRを出していく肩慣らしとしてReact Navigationはちょうど良いプロジェクトかもしれない。 React NativeにPRを出すにはContributor License Agreement (CLA) にサインする必要があったりと多少敷居が高いが、 こちらは特にCLAにサインする必要もない。普通にPR送れば良い。のでみんなでコントリビュートしてv1リリースしよう。（ポジショントーク）

あとがき

React Native本体はこのissueのコメントが役に立ってるぽいぐらいのことしかまだしてないので、今後もう少し折をみて寄与していけたらと思う。

Running Xcode's "analyze" on Yoga code surfaces issues · Issue #12609 · facebook/react-native · GitHub

おーい磯野〜 callback使ってる関数をPromiseでラップしてasync/awaitで書こうぜ〜

JS

例1

const sleep = (ms) => {
   return new Promise(resolve => setTimeout(resolve, ms));
}

const something = async () => {
   await sleep(100)
   doSomething()
}

例2

Geolocation.getCurrentPosition() - Web API インターフェイス | MDN から

// 元メソッドの構文は   
// navigator.geolocation.getCurrentPosition(success, error, options)

// クラスの中

getCurrentPosition(options) {
  return new Promise((resolve, reject) => {
    navigator.geolocation.getCurrentPosition(resolve, reject, options)
  })
}

async something() {
  try {
    let position = await this.getCurrentPosition()
    this.doSomething(position)
  }
  catch(error) {
     console.log(error)
  }
}

例3

値を二つ返す系 例は React Nativeから Image コンポーネントのgetSizeメソッド

// 元メソッドの構文: getSize(uri: string, success: function, failure?: function)
// クラスの中

_getSize(uri) {
  return new Promise((resolve, reject) => {
    Image.getSize(uri, (width, height) => { resolve({width, height}) }, reject)
  })
}

async something(imageUri) {
  try {
    let { width, height } = await this._getSize(imageUri)
    this.doSomething(width, height)
  }
  catch(error) {
     console.log(error)
  }
}