そーす

福岡在住のプログラマ

Next.js+FirebaseHostingで構築するサーバレスWebアプリケーション

github.com Next.jsというReactアプリケーションをデフォルトでServerSideRenderingしてくれるライブラリがあります。 これをFirebaseHosting上にFirebaseFunctionsを使って構築することで、無料でサーバレスSPAを作る事ができます。 Next.jsをclone Next.js…

AndroidにHostsを書き換えずにPCのHostsを反映させる

PC側のHostsを変更 変更してください。 ローカルPCにプロキシサーバを立てる なんでも良いです。 node作りたい、と思っていましたが先駆者がいらっしゃったのでありがたく使わせていただきました。 qiita.com ペッと貼って起動 % node proxy-server.js http …

React Native Debuggerがすごすぎて笑ってしまった

github.com 何も言わずに入れて欲しい。 react-native-debuggerはReact Native公式のChrome Debuggerを元に作られたデバッグツールです。 Reduxを利用している場合に力を発揮します。 というかRedux使ってないと旨味無いかもです… でもRedux入れてるなら絶対…

VisualStudioCodeに入れておくと便利なプラグイン3選

ただ自分が使っててコレないと不便ってやつです。 advanced-new-file marketplace.visualstudio.com ファイルの新規作成にパスを先に指定して作成できます。 デフォルトだと先にファイル作成して保存時にGUIで指定なのですごく面倒なので。 ⌘+nに割り当てる…

React NativeでマテリアルデザインのRippleエフェクトを実装する

Inputフォームに続き、マテリアルデザインのRippleエフェクトをReact NativeのJSのみで実装してみました。 コード transformの方で最初実装してたのですが、タブを連続でタップすると表示が上手く行かないことがあったのでこちらで実装しました。 iOS Android

BitriseCIでAndroidSDKのライセンスエラー

install-missing-android-toolsを使っていると、SDKがアップデートされた時に * What went wrong: A problem occurred configuring project ':app'. > You have not accepted the license agreements of the following SDK components: [Android SDK Platfor…

React Nativeでマテリアルデザインのテキスト入力フォームを作った

gist.github.com AndroidとiOSでInputTextのスタイルを合わせるのが面倒だなと思ってました。 iOSもマテリアルデザインに寄せてしまうのは最近だとアリだと思っているのでちょっと試しに作りました。 ざっと30分くらいで作ったので本物の機能は足りてないで…

React Nativeで起動時にJS側にデータを渡す

facebook.github.io iOSの方はちゃんとドキュメントがあるのに何でAndroidは無いんですかね… といってもやり方は簡単です。 MainActivityでcreateReactActivityDelegateをオーバーライドして ReactActivityDelegateのgetLaunchOptionsをオーバーライドするだ…

熱盛りSlackBot

Bitriseのビルド待っている間に熱盛り絵文字を投稿すると返信してくれるようにした。 笑ってもらえたので良かった(会社のSlack)

React Nativeのアニメーションで簡単なチュートリアル画面を作った

React Nativeで個人開発アプリを開発中なのですが、ちょうどアニメーション周りを結構調べていたので試しに簡単なチュートリアルを作ってみました。 Component ほとんどAnimatedを使いました。コンポーネントもデフォルトのAnimated.View, Text, Imageのみで…

React Native ARTで遊ぶ

React Nativeでグラフを描くにはどうしたらいいのかと調べましたら、 React Native内にReact Native ARTというライブラリが在るのを知りました。 ドキュメントにも書いてないですが、開発はされているようです。 react-native/ReactNativeART.js at 0.48-sta…

ServiceWorkerのデバッグ時にはキャッシュを

ServiceWorker勉強中です。 saburesan.hatenablog.com これやった時に通知の表記のデバッグ時に何変えても表記が上手くいかなくて悩んだんですが、 結局ServiceWorkerのキャッシュのせいでファイル更新しても上手く更新されなかったようです。 Chromeでデバ…

Firebase Cloud Messagingを使ってWebサイトでPush通知を受け取る

仕事でReact SPAにPush通知を実装することになったので備忘録。 Firebase Cloud Messaging(以下FCM)をWebにやるにはHttpsに対応のサイトじゃないとだめなので、Firebase Hostingで構築するところまでを記載します。 Firebaseの説明はありません。 Firebase…

React Native version 0.47.0 is out

github.com Breaking changes Android Remove unused createJSModules calls (ce6fb33, 53d5504) - @javache ReactPackageというinterfaceからcreateJSModulesが削除されました。 これ結構ヤバイ変更だと思っています。 Androidのネイティブにアクセスするラ…

Kotlinのrunとalsoの使い所

twitterのタイムラインに 「runとalsoの使い所分からん」 というツイートが流れてきたので。 Kotlinには便利な拡張関数があるのですが、それぞれが微妙に違うので用途を結構迷います。 そこでrun, alsoに加えよく使うであろうletとapplyの4つの特徴から用途…

「新しい技術の導入に関する勉強会」で発表してきました。

React Nativeで始めるアプリ開発 from Ryosuke Hara www.slideshare.net SlideShareにアップロードしてます。 Keynoteで作ったのをPowerPointに変換して上げてるので若干レイアウト崩れてます(修正する元気無い) React Nativeに関する簡単な紹介です。…

AndroidのカスタムOSが使われている端末でDevメニューが出ない時の対処

もー、クソん。 Oppo。 KeyEvent.KEYCODE_MENU(82番) がシステム側で受け取られててアプリまで来ない。 ちなみにOppoはシェイクしてもDevモード出ない。 しかたなく他の空いているキーコードをアプリで受け取って書き換えることに… 処理は簡単で、ReactAct…

react-reduxのmapStateToPropsとmapDispatchToPropsは必要なのか

ReactNativeでアプリを作る時はReduxを使っていて、ReduxのStoreとReactのComponentをBindingしてくれるreact-reduxが便利なので使っています。 github.com react-reduxが提供するconnectというStoreとComponentをBindingする関数が在るのですが、 connect( …

「新しい技術導入に関する勉強会」に登壇します。

宣伝です。 話します、よければどうぞーー。新しい技術導入に関する勉強会 https://t.co/g3BkQVamzh— Ryohlan (@Ryohlan) 2017年6月5日 「ReactNativeで始めるアプリ開発(仮)」という内容で登壇する予定です。 ReactNativeを触ったことがないWebエンジニア…

ReactNativeでアプリの開発環境(エディタ, ESLint, Flow編)

私がReactNativeを使ってアプリを開発するときの環境や初期設定です。 Visual Studio Code ESLint インストール エディタにPluginをインストール ReactNative用の設定を追記 Flow プラグインのインストール エラー対処 Visual Studio Code Visual Studio Cod…

Twitter LiteはReactNativeWebで作られてる???

https://mobile.twitter.com/home ちょっと前にTwitterLiteがリリースされました。 なんでもProgressive Web App(PWA)対応したとかで話題になってました。 はじめてのプログレッシブ ウェブアプリ | Web | Google Developers 気になってソースを少し見てみた…

ReactNative+ReactNavigation+Reduxで起きるバグ

2017/05/25時点です。 StackNavigatorのルートに他のNavigatorを入れるとエラーになる。 たとえば、 スプラッシュ→ログイン→メイン(ドロワー) ってしたい時にメインまで行ったらメインでスタックを初期化したいですよね? その時にメインがNavigatorだった…

ReactNative+Redux環境で非同期アクションのテストを書く

Javascriptでちゃんとテスト書いてますか? 私は書いてないです。 テストはあんまり書いたことないです(ドン引き Javascriptのテストは全く書いたことないです(ドンッ!! 今仕事で開発しているアプリはReactNativeなんですが、 やっぱスクリプト言語だと…

Javascriptの型チェック「Flow」まとめ

flow.org 個人的まとめ。 重要な所だけ読み返したい用です。 型名の和訳は適当です。 時間あったら追記する。 String let text: string = 'hoge'; //OK text = 'fuga'; // OK text = 12; // Error let func = (value: string): string => value; // ok Numbe…

React Sketch.app で何ができるのか見てみた

Introduction · react-sketchapp ReactのシンタックスでSketchが動くらしい。 なんだかすごそう(小並感 インストール 公式のまんま git clone https://github.com/airbnb/react-sketchapp.git cd react-sketchapp/examples/basic-setup && npm install basi…

ReactNativeでJavascript側で起きたエラーを取得する

アプリのクラッシュレポートツールを大体入れているかと思うのですが、ReactNativeではどうするのが一般的なんでしょうかね。 FabricのCrashlyticsを入れたのですが、これはネイティブのエラーの箇所をレポートするので自前のネイティブ処理じゃない場合はラ…

20代の振り返り

明日、5月9日に私は30歳になる。 20代を終えると言うのは一つの大きな区切りのような気がする。 20代はいろんなことがあった。 東京で就職 大学院を出て24歳で初就職。 渋谷駅近くのモバイル系広告営業の会社に新卒エンジニアとして入り、Webのフロントコー…

「ReactNativeってどうなの?」というタイトルでLTしてきました

React nativeってどうなの? from Ryosuke Hara www.slideshare.net LTなんて初めてでした。 とりあえず、なんか友人からの質問やTwitterとか見てて疑問に思ってそうな事適当に並べて見ました。 なんというか、福岡でもReact/React Nativeをワイワイさせた…

(解決)ReactNative+FirebaseではネイティブSDKを使ったほうが良いかも

(追記)解決しました。 やっぱりJavascriptCoreが原因でした。 github.com developers-jp.googleblog.com ここで紹介されてたので、ネイティブSDK入れなくてもいけるのか〜 と思って色々試して見ました。 匿名ログインしてRealtimeDatabaseに書き込みは出来…

ReactNativeでiOS, Androidに最適化したUIを構成するには

最近は仕事でも個人でもReact Nativeでの開発がメインになっており、かなり知識が溜まってきました。 で、だいぶiOSとAndroidに最適化したUIの構成ができるようになってきたのでメモ程度に残します。 OSごとのUIの分け方 ReactNativeは標準で幾つかiOS, Andr…