そーす

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

Next.js × Heroku にブログを移行しました。

ryohlan.herokuapp.com Herokuは最初の起動が遅いですね…

UdemyでReactNativeの講座を公開しました

めっちゃ大変でした… カリキュラム作ったり動画撮影したり編集したりするのめちゃくちゃ大変で、 あとウチが動画撮影する環境に全く適していなくて(子供がいたり、上空を飛行機が飛んだり、夜は貨物が走ったり)、だいたい深夜・早朝しか作業できなくて全然…

福岡ゆるっとIT交流会 vol.3「モバイルアプリを作っている人の話を聞く会」

yurutto-it.connpass.com 「ReactNative枠よろしく!」 と言われたのででます。 珍しくアプリの話する会なので仲間を探してきます。 それに向けてFlutterもいじくり回してる途中。

「A Tour of the Dart Language」をやりました

www.dartlang.org Flutterのβ版発表やDart2の発表で話題のDart。 勉強したことがなかったのですが、公式のドキュメンが結構しっかりしており、その中の「A Tour of the Dart Language」という基礎を学ぶチュートリアルがあったのでやってみました。 www.dart…

FukuokaJSにてReact Native ExpoについてLTしてきました

React Native Expo from Ryosuke Hara www.slideshare.net FukuokaJSというイベントでLTしてきました fukuokajs.connpass.com やっぱ福岡だとReactもReactNativeも全然やってるひといなくて非常に疎外感がありますが、頑張っております。 ネタとしてはいくつ…

オブジェクトの配列の重複削除

const merge = (newList, oldList, key) => Object.values([...oldList, ...newList].reduce((a, b) => { a[b[key]] = b; return a; }, {})); const l1 = [ { id: '1', value: 'l1v1' }, { id: '2', value: 'l1v2' }, { id: '3', value: 'l1v3' }, ]; const …

Proton-native

Proton Native - React Native for the desktop, cross compatible Reactを使ってデスクトップアプリが作れるライブラリが公開されていました。 なんでも Create native desktop applications through a React syntax, on all platforms Same syntax as Reac…

アウトプットして起きたこと

ブログやらLTやらで少しづつアウトプット出してて身に起きたことです。 名前を覚えられる 前にReact Nativeについての発表を何回かしたのですが、同僚がある勉強会(私は行ってないです)に行ったときに名刺交換で 「React Nativeの〇〇さんがいる会社ですね…

無印のクラックプレッツェルチョコレートが美味い

www.muji.net これがマジで美味い。 美味すぎる。 今日大名店のやつ買い占めてきた。 2つ以上で10%OFFだったので。 1つ100円なんで買ってみてください。

Kotlinでa == 1 && a == 2 && a == 3

前回の記事はJavaScriptで a == 1 && a == 2 && a == 3が成り立つにはどうすれば良いか、という内容でしたが元記事のブコメに プロパティある言語(C#, Swiftなど)ならトリッキーなことしなくても普通にできちゃう とりあえずKotlinのDelegation。 一番楽で…

JavaScriptの比較演算子の話

stackoverflow.com これ、よく思いつくなーと感心しました。 普段等価演算==使うことないのですが、==の場合だと上記の回答のようなことができるようです。 valueOfでも大丈夫だって書いてあったのですが、toStringとvalueOfどっちも定義されている場合、toS…

Next.jsに動的ルーティングを追加する「next-routes」

Nextjsにはデフォルトでルーティング機能があります。 [root_directory]/pages/のディレクトリ構成がそのままルーティングになります。 しかし、RESTfulなURIにする場合はサーバーの設定をカスタマイズして手動でしなければなりません。 そのような動的なル…

react-native-firebaseのiOSのワークアラウンド

react-nativeでFirebaseを簡単に使えるようになるreact-native-firebaseというライブラリがあります。 rnfirebase.io ですが、react-native v0.51.0ではiOSの設定がドキュメント通りでは動きません。 そのワークアラウンドについて書いておきます。 RNFireba…

KotlinJSでReactNative書くのは今のところ無理っぽい

会社のブログにて、Kotlin x ReactNativeに挑戦した結果を書きました。 anect.hatenablog.com KotlinJS面白い。 まだまだ発展途上なので今後に期待。

KotlinJSを動かす

先日Kotlin1.2がリリースされました。 blog.jetbrains.com バックエンド、Webフロントエンド、Androidでコードの共通化ができるようになったとこのことです。 今回はその機能は触らないんですが、前にリリースされたKotlinJSとKotlinNativeには興味がありま…

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つの特徴から用途…