Fablog

社会人マイナス1年生のブログ / プログラミング / 料理 / ビットコイン

ReactNativeのFlatListがsetStateをしてもリレンダーされない時の対処法

FlatListのItemの中でFlatListで定義したdata以外のstateの値を使ってコンポネントをレンダーしていると、setStateを使ってもリレンダーされないことがある

そんなときはFlatListのExtraDataにその値を渡してあげるといい

そうするとextraDataの値が変更された時もrerenderされるようになる

<FlatList
  data={this.state.tags}
  extraData={this.state.movie}
  keyExtractor={this.defaultKeyExtractor}
  renderItem={this.renderTag}
/>

それでも動かない時もたまにある そういう時はremoveClippedSubviews={false}を追加してあげる

ここを参考にしてやった github.com

ReactNativeでTypescriptを使うチュートリアル

個人でアプリを開発するとき、iosandroid の両方を書くのは嫌だなーと思いReactNativeを使うように心がけています。

 

基本的には満足しているのですが、型がないので色々辛いところがあってなんかいい方法無いかなーと探していたらTypescriptを見つけました。

Typescriptを使うのも初めてなので、いい感じのチュートリアルないかなと思って探していたらMicrosoftがだしてる良さげなrepositoryがあったのでそれを使うことにしました。

 

GitHub - Microsoft/TypeScript-React-Native-Starter: A starter template for TypeScript and React Native with a detailed README describing how to use the two together.

 

イマは取り敢えずこのチュートリアルにのっとって開発してます。

 

便利便利

Microsoftありがとう

GoogleHome が10月に日本に来る

google home

https://i.ytimg.com/vi/r0iLfAV0pIg/hq720.jpg

つい先日 google home は日本語に対応していないと嘆いたばかりだが、来月にも google home が日本に来るらしい

www3.nhk.or.jp

google home の値段

日本での値段などはまだ発表されてないけど、アメリカでの価格が129ドルなので13000円くらいになりそう

わくわくだー

fablog.hatenadiary.com

スマートスピーカがただの置物になってしまっている件

スマートスピーカーはすごいものだと思う

Google Home や Alexa のCMをみたことってありますか? 面白いので見たことな人はとりあえず見て見てください

google home

www.youtube.com

alexa

www.youtube.com

どうでしたか?

これらの動画をみたとき、僕はむっちゃワクワクしました

「チャンネルを変えて」

とか

「ただいま」

とか喋るだけで全部AIがよしなに操作をしてくれる世界

リモコンがどこにあるとか、充電があるかとか、そういうことを毎日気にしてた僕にとっては憧れでした

だからClova買った

Alexa とか GoogleHome は日本語に対応していないので今の所買っていない(GoogleHomeは借りてるけど)

なので日本語に対応していた、LINE からでている Clova を買った

www.youtube.com

LINE Clova の機能

Clova は他のスマートスピーカーと同じように話しかけて、音楽を再生させたり、家電を操作したり、いろんなことができるようになるらしい

公式解説

clova.ai

僕と同じく先行体験版を買った人の中にはすでに解体している人とかもいて、記事を読むととてもおもしろい

他のスマートスピーカーよりもサイズが大分大きい代わりに赤外線センサーとかも入ってるみたいだ

qiita.com

ただ、スマートスピーカーは現在置物になってしまっている

スマートスピーカーが我が家に届いて約2週間たったが、最近はほぼ稼働していない

この哀愁漂う Clova, GoogleHome の姿を見て貰えば彼らの無念さは伝わるだろうか

スマートスピーカーの現実

Clova を実際に買って、わくわくして、使って見たのだが、今の所僕の日常生活に関わることはなさそうだった

Clova にはいくつかの問題があった

  • 個人アプリ開発者への門が閉ざされている
  • 赤外線センサーを用いる機能はまだ使えない
  • 音楽を再生させると起動コマンドの反応が悪くなる
  • 音声というインターフェイスのため使い方を覚えるのが大変

とりあえず、これらの問題の半分くらいは解決してくれないと毎日使うことは難しそうだった

Clova の良い所

もちろん Clova にも良い所はたくさんあった。

  • 部屋の端から呼びかけても認識する
  • 日本語の認識精度がよい
  • 音楽流した時の音質も普通に良い
  • ソフトウェアの更新がされると、ハードを買い換えなくても新しい機能が増えていく

そんな高くなかったし、悪くない買い物だったと思っている。

今はとりあえず、面白い新規のアップデートと日本語でも使える開発環境がでてくるのを待つだけである

開発環境ができたら、

  • 日記アプリとか
  • 昔話の読み聞かせアプリとか
  • ポエム投稿アプリとか

作ってみよう

GoogleHome アプリの開発に役立ったリンク集

GoogleHome が日本でも年内に発売するらしい

www.itmedia.co.jp

こういう話を聞くとGoogleHomeに対応したアプリを作りたくなってくるので色々調べた。 Action on Google というプラットフォームで動くボットがGoogleHomeで動くっぽい。

アプリの作り方は二種類ある

  • API.AI を使用する
  • Actions SDK を使用する

基本的にこのどっちかを使うみたい

API.AIを使うと自然言語処理が楽になるけどプロジェクトの大部分をGUI上で管理しなくてはならない Actions SDK を使うとプロジェクトをコードで管理できるけど自然言語処理の部分を全部自分でやらなければいけない

どっちもメリット・デメリットあるけど、ざっと試した感じだとAPI.AIを使った方が便利そうだった。

以下は参考にしたいろんな資料たち

Actions on Google のトップ画面

developers.google.com

30分でアプリを作ろうみたいなチュートリアル

コードを書く箇所はほとんどない けどなんとなく開発の流れとか構成図みたいのはこれで十分わかる

Get started  |  Actions on Google  |  Google Developers

Actions SDKチュートリアル

そのままだと一部動かなかったけど読めばわかる

App Basics  |  Actions on Google  |  Google Developers

API.AI と Action on Google のドキュメント

Action on Google  |  API.AI

API.AIを試した日本人の記事

参考になった

qiita.com

AndroidStudio で突然ログが吐かれなくなった

Android Studio で開発をしていたのですが、突然ログが吐かれなくなってしまい困りました。

絶対通る箇所に ‘Log.d(hoge, hoge)’

をしてもなにも出ない しかし、全てのログが止まってるわけではなく昔からあったログはちゃんと出力される

なんでだろなーと思いProject Clean をしたら直った。 けどしばらくしたらまた同じ状態に….

「なんでだろなー」

状態になってしまった。

もしかしてと思って AndroidStudio のインスタントランをオフにしたら無事なおった。 やっぱりインスタントランは信用ならない。。

Macbookを新しく買ったので環境構築した

iTerm2 を入れた

https://www.iterm2.com/

brew をインストールした

https://brew.sh/index_ja.html

fish shell をインストールした

https://fishshell.com/

fish の設定色々した

$ fish_config

をするとGUIからできる

InteliJ IDEA をインストールした

http://qiita.com/keita-nishimoto/items/31e8af9ccb4b3bdd74d0

Android Studio をインストールした

https://developer.android.com/studio/install.html

Gitの鍵登録をした

http://monsat.hatenablog.com/entry/generating-ssh-keys-for-github

Alfred を入れた

https://www.alfredapp.com/

BetterToutchTool を入れた

https://www.boastr.net/

Docker を入れた

https://store.docker.com/editions/community/docker-ce-desktop-mac