wheatandcatの開発ブログ

React Nativeで開発しているペペロミア & memoirの技術系記事を投稿してます

2019-01-01から1年間の記事一覧

クラスコンポーネントで書いていたものReact Hooksに変換してみる

github.com ↑の対応で@react-native-community/eslint-configを導入したら、 66:5 warning Do not use setState in componentDidMount react/no-did-mount-set-state 79:7 warning Do not use setState in componentDidUpdate react/no-did-update-set-state…

Alexaスキルの開発始めました2

Alexaスキル作り始めたら、思ったより審査を通すのが大変だった。。。公開まではもう少し時間がかかりそうです。 今回はアプリへデータを送る関係で以下の機能を開発していく感じになりました。 Alexaスキル開発 Alexaスキルと外部アプリを連携させるために…

Alexaスキルの開発始めました1

前々から興味あったけど手が出せてなかったAlexaスキル開発を始めました。 最終的にはペペロミアでアカウントリンクしてAlexaから予定を作成できるところまで作成する予定 まずは、サンプルから作成していきます。 developer.amazon.com Alexaスキルの開発に…

React Nativeでカラー変更をアニメーションさせる

カレンダーUIで月毎のカラーを変更する際のアニメーションさせてみた。 デモ www.youtube.com 実装方法 React Nativeでアニメーションを使う場合は Animated を使用します facebook.github.io 実装コードは、このファイルで書いています https://github.com/…

カレンダー画面を作ってみる。その1

色々考えたが、今後の昨日拡張を考えるとカレンダー画面の作成は必須かなぁと思ったので作ってみる まずは、デザインはFigmaで作って、こんな感じ スケジュールに日付を入力できるようにして、カレンダーに当てはめる感じの予定 ってことで、さっそくコンポ…

react-native-appearanceを使ってダークモードを判定する

github.com react-native-appearanceでiOSのダークモードの判定を取得できるので、 これでアプリのダークモードのON/OFF(初期値)の設定をしてみる 対応pull request ダークモード修正 by wheatandcat · Pull Request #145 · wheatandcat/Peperomia · GitHu…

jqを使ってexpoのapp.jsonの環境毎に設定を切り替えるようにした

もともと、expoのapp.jsonですが、場合によってはdevとproductで分けたい場合があります。 docs.expo.io ぺペロミアだと以下のiosのGoogleSiginに使用するreservedClientIdと ■ app.json "ios": { "config": { "googleSignIn": { "reservedClientId": "*****…

技術書展7の入稿が終わりました。

技術書展7の入稿自体は先週にやったけど、色々合って今日もろもろ完了しました。 本の情報 wheatandcat.booth.pm BOOTHの方ではDL版を購入できるようにしました。 これの物理の本を技術書典7で販売します。 [ サークル情報 techbookfest.org 上記で委託で販…

ExpoでAndroidのstandaloneのみGoogle SignInが失敗する

気づいたら、Expoで実行時にAndroidのstandaloneのみGoogle SignInが失敗しています。 元々Expoの以下の機能を使用してGoogle SignInをしていました。 docs.expo.io 以下ではログインできました。 ExpoクライアントでAndroid起動時はログインできる iOSはExp…

技術書典7の準備中

techbookfest.org 技術書典7に出す本作成中です。 自分のアカウントでの抽選して落選しましたが、委託させて貰えそうなので作成しています。 表紙はこんな感じ ブログで掲載している内容 + αでアプリを公開するまでの色々を記載しています。 本の作成はRe:VI…

DetoxをExpo v34で動かす

Expo v33にアップデートしてから動いてなかったのでテスト出来るように修正しました。 github.com ↑に動いているサンプルがあるので、これを参考にすればいけます 変更箇所 package.jsonに以下を追加 "@types/detox": "^12.8.2", "@types/jasmine": "^3.3.14…

Expoでadaptive Iconに対応する

androidのアイコンが悲しい感じになっていたのでadaptive Iconに対応しました。 ↓現在のアイコン adaptive Icon developer.android.com androidにはadaptive Iconという規格があって、こちらで設定する白色の背景色を消すことができます。 docs.expo.io Expo…

ペペロミアの更新まとめ v.1.0.5

更新した内容まとめ https://github.com/wheatandcat/Peperomia/blob/master/CHANGELOG.md Expo SDK33にバージョンアップ 対応必須のAndroid64bitサポートがExpo SDK34に入るので、 準備のためExpo SDK33にバージョンアップしました。 Expo SDK34もリリース…

アプリのデザインをリニューアルしてリリースしました

前々からやっていたアプリデザインリニューアルですが、 やっとリリースできました。 アプリに合わせてWebサイトもリニューアルしました。 peperomia.app 作成的にはfigmaでデザインを作って それをReactのコードに対応させていった感じ。 最近はfigmaの扱い…

expoのsqliteでmigrationさせる

今回の更新でsqliteのtableにカラム追加したので、その辺の話 対象のpull request github.com pull request見れば分かりますが、特に良い実装とかは無く愚直に実行しました。 対応内容 今回はのMigrationでは以下の通りに動作するように対応 既にアプリをイ…

アプリのデザインリニューアル中。その1

アプリのデザインリニューアルに思ったより時間がかかっているので途中経過を報告 ホーム画面 スケジュール一覧 スケジュール作成 テキストを2回タッチで候補一覧を表示 スケジュール詳細の編集画面 やり出すと、いろいろ凝り出しすもので iOSはスクロールの…

Figma使ってデザインを管理してみる

新しいアイコンができたので、 合わせてアプリのデザインをリニューアルしようと作成中 ちなみに新しいアイコンは、こちら ということで、合わせてデザインの管理もFigmaに移行しました Figmaとは www.figma.com アプリとブラウザで使用できるデザインツール…

バックアップ機能作りました

ローカルに保存だけだとアンインストールでデータ消えるとかあるので、最低限データ移行できるようにバックアップ機能を作りました。 組み込みの流れ Google login 経由でfirebaseにログイン Auth認証を通してGAE経由でバックアップデータをfirestoreに保存 …

Swagger Hubを使ってみる

APIドキュメントなかったと思い、swagger書きました add swagger close#17 by wheatandcat · Pull Request #19 · wheatandcat/Peperomia · GitHub openapi: 3.0.0 servers: - url: http://localhost:8080 description: Local server info: version: 1.0.0 ti…

expoでfirebase Authを実装する

backendもFirestoreに繋いでユーザー情報を保存するようにして、frontendを繋いだら、こんな感じになりました。 対象のpull request ログイン追加 by wheatandcat · Pull Request #13 · wheatandcat/Peperomia · GitHub expoの実装 今回はGoogle ログインを…

GAE/Go 2nd-genでfirebase Authを実装してみる

ログイン機能を作ろうと思ったのでGAE/Goで実装してみた GAE/Go 2nd-genとは cloud.google.com 2nd-genの変更点は、ここでまとめられるので読むと分かるかも github.com 実装 公式のサンプルがあるので、これを元に作成 github.com app.yaml ■app.yaml runti…

typescript-eslintを設定してみる

Lint系の設定がなかったので追加してみました 最終的な修正 github.com ESLintとTSLint eslint.org 公式の発表でtslintはeslintに統合されていく方針で進んでいます。 統語には「typescript-eslint」を使います github.com 導入は以下の通り yarn add -D esl…

SafeAreaViewを使ってみる

androidのPixel3 XLで予定が保存できないというフィードバックあったので対応してみた どんな状況だったか? 確認したら、こんな感じになってました ステータスバーに被っていました。 「SafeAreaView」使っていたはずなのに。。。と思いドキュメントを読ん…

ペペロミアの更新 まとめ[v1.0.0 -v1.0.2]

更新した内容まとめ https://github.com/wheatandcat/Peperomia/blob/master/CHANGELOG.md v1.0.1更新 iPhoneSEのサイズに対応 知人からiPhoneSEだと、UIがズレるとの報告にて対応 ■Peperomia/responsive.ts at master · wheatandcat/Peperomia · GitHub imp…

slackにサムネイル画像を表示させる方法

slackにURLを貼ったら↓みたいな感じで寂しかったので、ちょっと調べてみました OGPを設定する digitalidentity.co.jp OGPというやつを設定するとURLが展開されて表示されるらしい ということで、さっそく↓を追加 ■https://github.com/wheatandcat/PeperomiaW…

react-nativeで作ったアプリをリリースしました

取り敢えず、v1.0.0をリリースしたので、その話 expoでのビルド docs.expo.io 記事の通り↓のコマンドだけOKです expo build:android expo build:ios appleの証明書とかは、対話式に入力すると勝手に作ってくれるので簡単 あとはappleはtestFlight、androidは…

AppLaunchpadでスクリーンショットを作成

思いの外、Androidの方は何もせずに実装できてしまったので、今回はスクリーンショットを作成の話についてを記事にします AppLaunchpad theapplaunchpad.com Store用のスクリーンショットを簡単に作成できるサービス 無料でも使用できますが、 iPhone XS Max…

アプリのチュートリアルを作ってみた

よくあるアプリのチュートリアルを作ってみた 使ったライブラリ github.com こんな動きする感じ 実装 チュートリアル用のイラストを用意してREADMEの通り実装 Peperomia/Page.tsx at master · wheatandcat/Peperomia · GitHub import React, { Component } f…

簡単にフィードバックを受け取る機能を実装してみる

コストをかけないでフィードバックを受け取る機能を実装してみた 内容 Cloud FunctionsでSlack APIを実行してメッセージを送る アプリでフィードバック送信フォームを作る Slack APIでメッセージを送る まずは↓を参考にSlack API トークンを取得する qiita.c…

netlifyでWebサイトをホストする

最近、いよいよアプリがリリースできそうな感じになってきたので、アプリのWebサイト作ってnetlifyでホストしてみた www.netlify.com 使い方 サイトでホストしたいGitHubリポジトリを指定 ビルド用のコマンドとデプロイするコマンドを指定するだけでOK。 あ…