Typescript + React + Redux + SSR 辺りの素振り

仕事で使うことになりそうなので素振り 要点を抑えながらシンプルめに書いてみた インクリメントするだけのアプリ セットアップ 基本的なの $ yarn add react react-dom redux react-redux $ yarn add --dev typescript ts-loader webpack webpack-cli 型情…

ReactNative アップグレード対応 v0.52 -> v0.56

みんな大好き恒例のアップグレードをしたので、その時にハマった事のメモ 今回は v0.52.2 から v0.56.0 にアップグレードした 前回のアップグレードよりは楽だったけど、本体のバグらしき罠にだいぶはめられた ちなみに前回と同じく $ react-native-git-upgr…

TwitterKitを使ってるアプリでWeb経由の認証が出来なくなったのを解決した

Twitterの仕様変更 本日(2018/06/12)に認証周りの仕様が変わった。 認証して戻ってくる時のコールバックURLをデベロッパーの管理画面で設定するのが必須になった Callback URL — Twitter Developers TwitterKitを使ってログインを実装してるアプリで、端末…

react-native-domをちょっと動かしてみた

いい加減触るかと思いたち、チュートリアルをしてみた github.com セットアップ 適当なサンプルプロジェクトをinitする $ react-native init rndomExample まずは普通にアプリを起動してみる $ react-native run-ios ふむ 次に本題のセットアップ $ yarn add…

react-native-firebaseでプッシュ通知を扱う

react-native-firebaseでプッシュ通知を扱う時のメモ github.com 実装 基本的な実装はドキュメントへ React Native Firebase - Simple Firebase integration for React Native 扱い方 プッシュ通知を押すとアプリが起動するが、そのパターンが3つある ① ア…

homebrewでphp71-*系がインストールできなくなってた

php実行したらintlが無いよって言われて、じゃぁ入れますよと $ brew install php71-intl 打ったらそんなもんねぇって言われた これはintlに限らずphp71-がつくモジュール全部 今のバージョン $ brew --version Homebrew 1.5.14-3-g94c0d83 Homebrew/homebre…

react-navigationでスクリーンの重なりを保持したまま深い階層に飛ぶ

小ネタ 良いタイトルが思いつかなかった react-navigationでいっきにnavigate()で2つStack詰む方法あるのかな?バックボタン押した時に戻る分も設定したくて— .あーる (@DotEarl) 2018年4月2日 プッシュ通知からのDeeplinkで特定の深い階層に飛ばしたい時、…

React context APIを触ってみた

元ネタ medium.com React v16.3でcontext APIというものが入った このAPIを使うとReduxと同じようなデータフローを簡単につくれるらしい 記事中にわかりやすい説明があるので動かしてみた 環境構築 create-react-app をベースに使う $ npx create-react-app …

GoogleHomeとIoTデバイスでオフィスのQOLを上げた話

GoogleHomeとIoTデバイスを使ってオフィス環境の向上と 仕事が効率化するように色々やったので紹介しようと思います 前提として、うちの会社(Togetter社)はオフィスに10名ちょっとしかいないので、GoogleHomeに好き勝手喋らせてもわりと大丈夫です プログ…

今更だけどparcelの素振り

parcel + react + reduxを動かしてみる 環境構築 セットアップの仕方は公式サイトに親切に書いてある Recipes parcelをグローバルインストール $ yarn global add parcel-bundler ディレクトリを作成 $ mkdir parcel & cd parcel $ yarn init -y まずはドキ…

ReactNative アップグレード対応 v0.46 -> v0.52

最近、苦行のアップグレード対応をした RN v0.46からv0.52にアップグレードした時に色々エラーで引っかかったので なにを修正したかのメモをする $ react-native-git-upgrade はうまく動かなかったので使ってない 自力で差分をみてマージした 前提として、iO…

スマートコンセントを買ったので設定してみた

スタンドライトをGoogle Homeから操作したかったので、スマートコンセントを買ってみた スマートコンセントは、自身がWifiに繋がっているのでネット経由で電源をON/OFFできる 単純な仕組みなので使える家電は限られてくる スタンドライト操作するのに買った…

ラズパイ専用 学習リモコン基板を買ったので、GoogleHome経由で家電を操作してみた

GoogleHomeが安くなってたので勢いで購入 半額だったから買ってきた pic.twitter.com/MLMP4PiBHA— .あーる@生活改善 (@DotEarl) 2017年12月7日 まずやりたくなるのは家電の操作 「OK Google テレビをつけて!」「エアコンを消して!」とかやりたい 調べてみ…

igniteで自分専用のボイラープレート環境を作る

この記事は React Native Advent Calendar 2017 16日目です。 こんにちは。Webエンジニアの@DotEarlです。 Togetterという会社で、自社アプリをReactNativeで開発しています。 目次 目次 モチベーション igniteとは igniteでプロジェクトを始める時 自分用の…

ReactNativeにStorybookを導入するまで

storybookはコンポーネント単位でサンドボックス開発できる開発環境 どんなコンポーネントが存在するか、どんな種類があるか、使い方は?など ドキュメントとしても機能するのであると便利 最近Webの方でよく使われてるようで、ReactNativeでも使える 導入 …

ミドルウェアを使わないreduxをちゃんと理解するための個人メモ

仕事でいきなりredux/redux-saga さらに redux-actions の環境を触ってきて ミドルウェアを使わないシンプルな構成のreduxの理解が浅かったのでちゃんと覚えようと思った 環境構築 お手軽 create-react-app github.com $ create-react-app react-redux-examp…

igniteでモダンなReactNative環境を楽々セットアップ

react-native init appでアプリを始めても最初はreduxやmiddlewareなど いつも決まって使うような環境は入っていない とりあえず試したいけど面倒くさいよ!って時はigniteコマンドを使うと 定番の環境、いわゆるボイラープレートをいい感じに構築してくれる…

ReactNativeのAsyncStorageをコンソールから直接操作する

前回の記事で導入したReact Native Debuggerを使うと AsyncStorageを直接操作することが出来る rskull.hateblo.jp AsyncStorageとは アプリ本体にデータを保存したい時に使えるkey-valueストア 永続化されるのでアプリを落としてもデータが保持される 実際に…

React Native Debuggerを使ってみる

React Nativeで開発をする際 redux を使用することが多いと思う そんな時に使うと開発が捗るのが React Native Debugger インストール github.com $ brew update && brew cask install react-native-debugger インストールが完了すると、アプリ一覧にアイコ…

HTML5 Conference 2017 資料まとめ

資料まとめです セッション情報 | HTML5 Conference . . . .

LayoutAnimationをAndroidでも動くようにする

前にこんな記事を書いたが Androidでは動かなくて調べた rskull.hateblo.jp import { UIManager } from 'react-native'; constructor() { super() UIManager.setLayoutAnimationEnabledExperimental && UIManager.setLayoutAnimationEnabledExperimental(tru…

ReactNativeでglamorous-nativeとstyled-componentsを使ってみた

ReactNativeでスタイルを書きやすくしてくれるライブラリがある styled-comopnentsはスター数が1万を超えの人気ライブラリ 主にウェブの方で使われてるがReactNativeにも対応してるっぽい glamorous-nativeは後発でstyled-componentsなどに影響を受けて出て…

ポートフォリオサイト作り直した

仕事でもずっとReaectNativeばかりで、まじめにフロント書いてないので 勉強がてらポートフォリオサイト作り直した http://rskull.com/#/works 環境構築 $ yarn add react react-dom react-router-dom styled-components Webpack + Babel 関連 $ yarn add we…

クラッシュレポートからバグの原因を特定する - ReactNative

FabricのCrashlyticsを使ってユーザーがクラッシュした時のログを収集できる 収集したログからバグってる箇所を特定する方法の一つとしてメモ クラッシュレポートから探る Fabricの管理画面を開いてクラッシュレポートを見ると、こんな報告があった undefine…

ReactNativeでE2EテストをするDetoxをちょっとだけ触ってみた(iOS)

Detoxというライブラリを使ってE2Eテストを書いてみる github.com 前提 Mac brew xCode 8.2以上 node 7.2以上 準備 シミュレーターを動かすのに必要なのでインストールする $ brew tap facebook/fb $ export CODE_SIGNING_REQUIRED=NO && brew install fbsim…

バージョン指定でReactNativeのプロジェクトを始める

メモ $ react-native init App --version v0.46.0 運用してるプロジェクトで入れたモジュールがうまく動いてない時 同じバージョンの新規プロジェクトを作って一番素の状態で想定通り動くかテストしたい時に使う わりと最終手段だけど、問題の切り分けできて…

ReactNativeで開発中、Androidのビルドで64K問題のエラーが出てハマった

64K問題 ReactNativeに限った話ではないが Androidアプリでメソッド数が65536を超えるとビルドエラーになる問題のこと Androidエンジニアにとっては常識だと思うが、Webから入った人間からすると結構厄介だった 検索すると沢山ヒットする 分かりやすかった記…

TwitterからエゴサーチしてSlackやChatworkに投げる

検索したツイートを定期的にSlackに投稿はIFFFTで出来るけど、Chatworkに投稿はZapierという類似サービスくらいしかなかった 一月の制限が割りときつくて途中で止まっちゃので Goの勉強がてら自分で作った github.com まだ作法も全然わからないし まだテスト…

ReactNativeでActionSheetを実装する - その②

この前書いたActionSheetの記事書いたけど、特定の状況下だと使えないじゃん!ってなることに気づいた rskull.hateblo.jp 駄目だった理由 iOSはネイティブの機能を使ってるのでどこで呼び出しても起動するけど Androidはネイティブの機能ではなく、モーダル…

ReactNativeにActionSheetを実装してみた

ActionSheetとは? この下から出てきてるやつ RN本体でサポートしてくれてはいるが、iOSの標準機能なので iOS用のコンポーネントになってる。 ActionSheetIOS うーん…同じコードで両方対応したいですね… react-native-action-sheet そんなときはコレ github.…