Fablog

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

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

ReactNativeMeetUp #6 で学んだこと

ReactNative

最近自分が興味持っている分野でReactNativeというものがある ReactNativeとはFacebookが作ったReactを使ってモバイルアプリを作れるようにしたもの ReactNativeの良い点として

  • Web(っぽい)技術でモバイルアプリが作れる
  • iosandroidを1ソースで作ることもできる
  • WebView上で動くではなくNativeのViewを呼び出してくれる
  • ロジックに関してはwebとも共通化することもできる

があげられます。

むっちゃ便利じゃん!絶対はやるでしょ!

と思うのでReactNativeMeetUpという勉強会にて学んできました

ReactNativeで始める楽しいサービス開発 @YutamaKotaro

  • フロントエンジニアが余っててアプリエンジニアが居ないときにおすすめ
  • ios, android はViewを共通化することもできる
  • ios, andoid, web のロジックを全部共通化できる
  • 一部共通化で色んなレポジトリを扱うならmonorepoがいいよ
  • おすすめのライブラリ
    • formic, formをいい感じにしてくれる
    • react-native-push-notification
    • react-native-vector-icons
  • React native router flux の問題
    • React Navigation のAPIを使うようになった
    • つまりReactNavigationのラッパーになる
    • ので使うならReactNavigationの方が良さそう

ReactNativeの導入検討

  • DMM 英会話の話
  • Reactで作ってるらしい
  • ReactNative導入の問題点
    • 簡単に更新できない
    • 各国のカスタマイズ
  • どっちかというとアプリの問題点
  • ReactNativeが導入できるかは知らん、出来ると思う人は入社してくれ、という感じ

1ヶ月でのアプリ開発 地雷を踏み越えて

  • 沢山の地雷を踏んだらしい
  • displey:none がReactNativeのバージョンを上げると動かなくなった
  • Mobx お作法をわからずに書くとrenderが100回くらい呼ばれる
  • ReactNativeDebuggerでデバッグしながら最適化した
  • Reactを誰も使ったことがないから辛い
    • 1週間くらいで慣れた

Expoの話

  • Expoのいいところ
    • XcodeとかAndroidStudioとかを使わなくて良くなる
    • シミュレーターも要らない、QRコードを読み込めば実機でそのままデバッグ出来る
  • GUIぽちぽちすればいい
  • Expo SDK が充実しているので使うととても便利
  • ただ、NativeModulesが使えない
  • exp detach をするとNativeModulesを使えるようにできるけど、そうするとexpokitが使えなくなる

Expoの話 again @besutome

  • Expo思想の話
    • hello world をもっと早く
    • 実機確認をよりはやく
    • buildツールを1つに
    • expoに依存しない開発もできるよ
    • Nativeの機能は特殊な書き方になるけどできるよ(Expoが対応しているものは)

余談

懇親会でクラフトビールが配られていて最高だった🍺