そーす

I'm a programmer in Fukuoka. Please contact me saubre.app[at]gmail.com or Twitter DM.

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…

Imageコンポーネントは画像をキャッシュする

ReactNativeの標準のImageコンポーネントはキャッシュ機構があります。 なので、以前に取得したURLの画像の場合はキャッシュが読まれます(期限は無さそう) 同じURLの画像が更新される仕様のAPIなどではこれは厄介です… ちなみにいくつかIssueが上がってま…

BackAndroidはremoveEventListenerではなくaddEventListenerの返り値のオブジェクトを使おう

facebook.github.io Andoroidの戻るボタンが押された時のイベントをハンドリングするAPIです。 なんか公式ドキュメント見るとaddEventListerでセットしたハンドラの破棄はremoveEventListerを使わないといけないっぽいですが、 ソースを見てみる addEventLis…

NetInfo.isConnectedはiOSでは常にfalseを返すという罠

issue上がってます github.com 再現方法 NetInfo.isConnectedを使うだけ。 Androidはちゃんとしたネットワークの接続状況を返してくれますが、iOSは常にfalse… 原因 github.com ワークアラウンド なんと公式ドキュメントのサンプルにまで書いてあります…直さ…

iOSのみ、ModalとAlertを同時に使うとModalが消えないバグがある

issue上がってます github.com 再現方法 例えば通信処理中にインジケータ(くるくるするやつ)を出して、通信終わったらインジケータ消してレスポンスに応じてダイアログでユーザに通知したいとかあるじゃないですか。 このインジケータの表示にModalを使っ…

DroidKaigiに出席した

3月9,10日に新宿で開催されたDroidKaigi2017に参加してきました。 スピーカーでは無いです。 スピーカーの皆様、スタッフの皆様、超お疲れ様でした。 あの規模のイベント回すのはとても大変だし準備も相当大変だっただろうとお察しします。 個人的にも大満足…

ReactNative製アプリをデバッグするときのTips

実機デバッグはVysorを使おう chrome.google.com 実機の画面をキャプチャしてPCに転送してくれます。 キャプチャ画面でクリックやスクロール、タイピングもできるので非常に便利です。 ReactNativeのRELOAD機能はR2回押しで実機だと出来ないのでコレを使うと…

ReactNativeのソースを読んで見る(Android編①)

*Android編①って書いてるけどAndroid編②があるとかiOS編があるとかは未定です ReactNativeの「Native」の部分がどう動いてるのか気になったのでソース見てみました。 細かい所まで見てないですし、間違った認識かもしれませんのであしからず。 エントリポイ…

ReactNative雑感

最近自社のアプリ(iOS,Swift/Android, Kotlin)をReactNative化しているので使ってみた雑感など。 導入のきっかけ 自社アプリのiOS(Swift)とAndroid(Kotlin)は私が一人で作って運用しています。 なんで一人かというと社内でアプリをかけるのは私しかいない…

Kotlin Android Extensionsで注意すること

とくにハマった訳ではないですがやらかしそうなミスだなぁと思ったので。 Kotlin Android ExtensinsとはViewの参照を自動で作ってくれるAndroidのためのPluginです。 kotlinlang.org findViewByIdしなくてもID名から自動で参照を作ってくれるので非常に便利…

KotlinからJavaのクラスを利用するときにAccessorが上手く生成されないことがある

Kotlin小ネタなんですが、KotlinからJavaのクラスを利用するときにjavaのSetter, GetterメソッドからKotlinのAccecorに自動で変換してくれる機能があります。 例えば、 Java側で class Text { ... public void setText(String text) {...} public String get…

DIY子供の絵本棚

設計 Sketchを使って作りました。 よくある形です。 本棚は3段にして、下はおもちゃ箱です。 扉が開閉します。重いので1歳のうちの子は開けることができないです。 近くのナフコに89mm * 19mm * 183mmの木材が200円で売ってたのでそれで作れる範囲にしました…

Redash外で閲覧画面を作る

RedashのDashboardは使いづらいです(個人的には なぜなら縦横幅が基本固定値で横に最大でも2個しか並べられない仕様だからです。(グラフに関しては縦幅を変更出来ます) Redashは作ったグラフなどを外部でも表示できる機能を提供しています。 やり方 外部…

RedashのデータソースにGoogleAnalyticsを追加する

*2017年1月15日現在ではRedashのGoogleAnalytics対応はαバージョンということになっているので、今後方法が変わるかもしれません。 Google Developer Consoleでプロジェクトを作成 console.developers.google.com サービスアカウントキーを登録する 左側のナ…

Redash概要

redash.io 概要 Redashはデータの分析や可視化を効率よく行えるBIツールです。 豊富なデータソースとクエリの登録 Redashは連携データソースとして登録できるソフトウェアやサービスが豊富です。 2017年1月12日現在でこれだけのデータソースに対応しています…