布団の中にいたい

Elasticsearchいじったり、Androidアプリ書いたり。最近は数学の勉強が楽しくなってきました。

typescriptでreact-navigationを使おうとしてversion違いでハマった

タイトル通り、画面遷移の実装のためにreact-navigationを使おうとしたのですがハマったのでメモ。

react-navigationは以下。 github.com

ハマった理由はシンプルで、react-navigationのstableはv3なのですが、react-navigationの型定義である@types/react-navigationがv2.13.0までしか対応していなかったのが原因。

何も知らない状態で適当にインストールしてたので、1,2時間ぐらいハマってました。馬鹿みたい。。。

とりあえず既存のreact-navigationを削除して以下を実行して、再起動したら動きました。

$ yarn add react-navigation@2.13.0
$ yarn add -D @types/react-navigation@2.13.0

react-native-splash-screenでSplashScreenを追加する

最近はFlutterで遊んでいることが多いのですが、ReactNativeを触らないといけない状況がやってきそうなので適当なアプリを一本実装しながら勉強しています。

そんな中でReactNativeで書いているアプリにSplashScreenを追加しようとして微妙にハマったのでメモ。

SplashScreenの追加自体は以下のライブラリを使用しました。star数も多いし有名だし安心。

github.com

基本的には以下のリンクに沿って実装していました。

medium.com

が、画像が表示されず適当に作ったViewの画面しか表示されなかったので公式のREADMEを確認したところ、どうやらObjective-C側で参照するヘッダーの名前が変わっている模様。なので以下のように変更したら画像が表示されました。

- #import "SplashScreen.h"
+ #import "RNSplashScreen.h"

...

- [SplashScreen show]
+ [RNSplashScreen show]

まとめ

ライブラリのREADMEも親切だし、mediumの記事も大変親切だったのでかなり楽にSplashScreenを追加できました。とりあえず公式のREADMEは最初に読んだほうがよいと反省。

おまけ

アプリのSplashScreenに乗っける画像を作るのが面倒くさかったので以下のサービスで自動生成しました。ライセンスをしっかり確認できていないので微妙に不安ですが、綺麗にな画像がすぐ出来て非常にありがたいです。

hatchful.shopify.com

Laravelでapp/User.phpを移動した際のエラーを消す

Laravelを触ることになったので少し遊んでみている所なのですが、app配下にあるUser.phpを移動した際に認証周りでハマったのでメモ。

app配下にModelsディレクトリを作成してそこに配置します。

今回出たエラーは以下。

{
    "exception": "ErrorException",
    "file": "/var/www/vendor/composer/ClassLoader.php",
    "line": 444,
    "message": "include(/var/www/vendor/composer/../../app/User.php): failed to open stream: No such file or directory",

// 以下省略

原因はconfig/auth.phpで設定しているUserProviderのモデルがApp\User::classになっていたことでした。これをnamespaceに合わせてApp\Models\Userにすれば問題なく動きました。

「Nuxt.jsビギナーズガイド」を読んだ

ちょっとした仕事でNuxt.jsを触ることになりそうだったので「Nuxt.jsビギナーズガイド」をサクッと読んでみました。

Nuxt.jsビギナーズガイド―Vue.js ベースのフレームワークによるシングルページアプリケーション開発

Nuxt.jsビギナーズガイド―Vue.js ベースのフレームワークによるシングルページアプリケーション開発

本自体はタイトルに書かれているとおりにNuxt.jsの初心者向けの本ではあるのですが、対象読者としてはある程度Vue.jsを触ったことがあることを想定した形で書かれています。

ざっくり流れとしては、「Nuxt.jsとは」という話から始まり、Nuxt.jsを使った小規模な開発、中規模なアプリ開発、テスト、デプロイといった流れで話が進んでいきます。

感想

全体的に平易にかかれていて非常に分かりやすかったです。

個人的に読んでいて面白かった部分はNuxt.jsを利用するべきではない場面が書かれていたことでした。こういったフレームワークを解説するような本だと概ね使う上でのメリットが書かれているものですが、それに加えて利用するべきではない場面という形でデメリットも書かれているので、「流行っていて軽く触ってみて便利だから使ってみる」みたいな形で流されることもなくなるので素晴らしいと思いました。

上記に加えてサンプルコードも豊富ですし、テストの書き方も書かれているのである程度Vue.jsを使ったことがある人が読む分には素晴らしい本だと思いました。あと普段はReact/Reduxのコードを読んでいる機会が多いので、Vuexではこう書き方をするんだなという驚きもあって面白かったです。

flutterでfirebase authを利用する

flutterでfirebase authを利用するexampleを書いてみました。といってもメールアドレス認証のみですが。

github.com

肝になる部分は実際にfirebaseにリクエストを飛ばしている部分で以下です。 FirebaseAuth.instanceを使って、singinWithEmailAndPasswordでリクエストを投げてuserを引っ張ってきます。後はこれの呼び出し側でstateに突っ込むなり、別のページに渡すなりする感じですね。

final _auth = FirebaseAuth.instance;
Future<FirebaseUser> _signIn(String email, String password) async {
  final FirebaseUser user = await _auth.signInWithEmailAndPassword(
      email: email, password: password);
  return user;
}

flutterでfirebase authを利用しようとして環境設定でハマったのでメモ

flutterでfirebase authを使うときにハマったのでメモ。

ハマったのは各OSごとに設定しないといけない部分で今回はiOSで試していたのでそのあたりの使い方をざっくりと。

firebase_authをインストールする

firebase authを使うためにライブラリを入れる。 pubspec.yamlに以下を書く。firebase_authのversionは現時点の最新のものを指定しているが必要に応じて適宜指定してください。

dependencies:
  flutter:
    sdk: flutter
  firebase_auth: ^0.6.2+1 # ここを追加する

firebaseにアプリを追加して、GoogleService-Info.plistを入れる

firebase側のコンソールでアプリを追加してください。私はiOSでやりました。

Register AppIOS Bundle IDの部分にはiosディレクトリ配下にあるRunnerをopenして、記載されているBundle Identifierを入れてください。

そのまま手順を進めていけばGoogleService-Info.plistがダウンロードできます。

後はそれを以下の部分に入れれば問題ないです。

f:id:asahima_194h:20181104004528p:plain

まとめ

Xcode開くあたりでごちゃごちゃしたのでざっくりまとめました。このあたりはCodelabのtutorialをやっていればハマることはないのですが、特にやっていなかったので見事にハマりました。

Firebase for Flutter

実際に使う部分についてはまたそのうちまとめるかも。

flutterでTextFieldの値をmaskする

flutterで適当にログインフォームを作っていて、パスワード部分をmaskしたいなーと思って調べたのでメモ。

やり方は簡単でTextFieldにobscureText: trueを設定してあげるだけ。だいたい以下のような感じ。

new TextField(
    obscureText: true,
    controller: _passwordController
)

該当のドキュメントは以下。 docs.flutter.io