ペペロミア開発ブログ

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

graphql-markdownでGraphQLのAPIドキュメントを自動生成する

github.com ↑最新のFirestoreの設計に合わせて全体的にGraphQLに移行していく中で、APIドキュメントを残していきたいなーと思いgraphql-markdownを使ってみました。 github.com 使い方 まずローカルで起動サーバーを起動 $ dev_appserver.py app.yaml localh…

Peperomia v2.0.6 リリースノート

GitHub Peperomia マイルストーン Peperomia v2.0.6 PeperomiaBackend v2.0.6 PeperomiaWeb v2.0.6 Peperomia LPサイト v2.0.6 PeperomiaTool v2.0.6 対応内容 [Peperomia]まだ残っているクラスコンポーネントをできるだけReact Hooksに変更する [Peperomia]…

Firestoreを新設計にマイグレーションする

元々Firestoreを使いこなせてない感がすごくあったので、改めて学習し直して新設計にマイグレーションしようとしているので、その辺の実装について記事にしていきます。 まず、現状のFirestoreの設計が以下です。 現状の Firestoreの設計(悪い例) ├──users…

アプリの強制アップデート機能を作成

Firestoreの新設計を適応させるためにアプリの強制アップデート機能が必須になりそうだったので、アプリの強制アップデート機能を実装しました。 https://github.com/wheatandcat/PeperomiaTool/pull/8 これをv2.0.6で実装して、Firestoreの新設計をv3.0.0で…

技術書典9に出品の本の作成が完了したので、LPページに技術書一覧の画面を追加しました

技術書典9に出品の本の作成が完了したので報告します。 Boothでも購入可能です。 booth.pm 内容は、2019〜2020 年のリリース内容の振り返りと現在のプロジェクトのアーキテクトについて解説していく本になっています。 以下、目次 ■⽬次 まえがき 第 1 章 ペ…

sentry-goを実装してみる

GAEのエラーは、デフォルトでGCPのロギングに出力されますが、ずっと追い辛いと思っていたのでsentry-go導入してエラー監視できるようにしてみました。 github.com Pull Request github.com 実装 Sentryはアプリのエラー監視でも使用していますがGo言語もサ…

React Custom Hooksでコンポーネントを整理

コンポーネントのコードにキーボードイベントの処理やスクロールイベントなど、 直接UIに関わらない処理が混じって、コードの可読性がしていたのでReact Custom Hooksを使用して整理しました。 ja.reactjs.org React Custom Hooksはコンポーネントとロジック…

今年も本を作成 するので表紙を公開

前にBoothに本を出展しましたが、1年経って内容が古くなったので新しく書こうかと思います。 booth.pm 時期的に技術書典9に出せたら良いかなーと思います。 blog.techbookfest.org 内容的にはQiitaに投稿した以下の振り返り記事の拡張版みたいな感じにする予…

Peperomia v2.0.5 リリースノート

リリース日 2020年07月21日 GitHub Peperomia マイルストーン Peperomia v2.0.5 PeperomiaBackend v2.0.5 PeperomiaWeb v2.0.5 PeperomiaHelp v2.0.5 Peperomia LPサイト v2.0.5 PeperomiaTool v2.0.5 対応内容 [Peperomia] DeepLinkでスケジュールを開く [P…

Reactで作成したLPサイトにアニメーションを追加してみた

peperomia.app ↑のLPサイトにに以下みたいなアニメーションを追加してみたので実装方法を紹介 Pull Request LPサイトにアニメーション追加 by wheatandcat · Pull Request #8 · wheatandcat/PeperomiaWebSite · GitHub 実装 まず、1つのコンポーネントで書い…

gqlgenとgraphql-codegenでGraphQLのtypeを自動生成してフロントエンドのコード作成する

バックエンドをgqlgenで実装して gqlgen.com graphql-codegenでスキーマ情報からTypeScriptのtypeを自動生成する構成で実装したました。 graphql-code-generator.com 実装 gqlgenでバックエンドを実装 ■ Pull Request https://github.com/wheatandcat/Pepero…

ExpoでPush通知を実装してみた

Push通知の実装をした後、すぐにExpo SDK38でexpo-notificationsが書き換わって、もろもろ書き換えてたら結構実装に時間がかかった https://blog.expo.io/expo-sdk-38-is-now-available-ab6cd30ca2ee 対応PR backend Expo Pushのtokenを保存 by wheatandcat …

リリースノートを自動生成するスクリプトを書いてみた

ペペロミアをリリースして1年くらい立ったので、振り返りしたいなーと思いリリースノート作りたいなーと思ったので、自動生成するスクリプトを書きました。 自動生成したリリースノート v1.0.3〜2.0.4まで以下で確認できます。 リリースノート カテゴリーの…

Peperomia v2.0.4 リリースノート

リリース日 2020年04月23日 GitHub Peperomia マイルストーン v2.0.4 対応内容 Dangerを導入する react-navigation v5にアップデート Expo sdk v37にバージョンアップ prettier 2.0にバージョンアップ Codecovを実装 Sign in with Apple実装 react-navigatio…

Peperomia v2.0.3 リリースノート

リリース日 2020年02月24日 GitHub Peperomia マイルストーン v2.0.3 対応内容 React Hooks対応 and ESLint対応 Specter導入 スケジュール画面とスケジュール詳細画面にローディングを実装 スケジュールの順番変更の処理で無駄にAPI更新の処理が走っている不…

Peperomia v2.0.2 リリースノート

リリース日 2019年12月14日 GitHub Peperomia マイルストーン v2.0.2 対応内容 react-navigation v4バージョンアップ Expo SDK 36 バージョンアップ リリース詳細 react-navigation v4バージョンアップ React Navigation v4にバージョンアップ https://react…

Peperomia v2.0.1 リリースノート

リリース日 2019年10月22日 GitHub Peperomia マイルストーン v2.0.1 対応内容 update react-native-elementをv1.2.0にバージョンアップ ダークモードに対応 Expo SDK35 バージョンアップ ローカル開発の初期設定スクリプトとガイドを追加 sentry-expoを実装…

Peperomia v1.0.5 リリースノート

リリース日 2019年07月27日 GitHub Peperomia マイルストーン v1.0.5 対応内容 Expo SDK v33にバージョンアップ デザインリニューアル & colorのconfig化 storybook v 5にバージョンアップ Firebase v6にバージョンアップ コミット時にlint & tscをチェック…

Peperomia v1.0.4 リリースノート

リリース日 2019年06月21日 GitHub Peperomia マイルストーン v1.0.4 対応内容 typescript-eslintの導入 Firebaseログインを追加する バックアップ機能を作成 リリース詳細 typescript-eslintの導入 typescript-eslintの導入してTypeScriptもLint対象にする …

Peperomia v1.0.3 リリースノート

リリース日 2019年05月22日 GitHub Peperomia マイルストーン v1.0.3 対応内容 Google Pixel 3だとヘッダーボタンがタッチできない スケジュールの色に合わせてStatusBarの部分をカラーも変更 リリース詳細 Google Pixel 3だとヘッダーボタンがタッチできな…

GoでGitHub Actionsでreviewdogを実装してみる

今までmonorepoで管理していたペペロミアのプロジェクトをリポジトリに分け始めたので、ついでにreviewdogを実装してみました github.com reviewdogとは reviewdogはPull Requestに対して指定したlinterや静的解析を行い、対象行に以下の画像みたいにコメン…

@nuxt/httpを導入する

ペペロミアのWeb版でのAPIアクセスの実装に@nuxt/httpを導入しみました。 github.com Nuxtは元々axiosを押していましたが、今後こちらの@nuxt/http標準になる流れみたいなので採用しました。 Pull Request https://github.com/wheatandcat/PeperomiaWeb/pull…

ペペロミア v2.0.4のリリースノート。Expo SDK v37、Sign in with Apple、ダークモード対応などなど

ペペロミア v2.0.4を公開したので主な変更を記載します ■ v2.0.4のマイルストーン v2.0.4 Milestone · GitHub Expo sdk v37にバージョンアップ ■ Expo sdk v37にバージョンアップ https://github.com/wheatandcat/Peperomia/pull/559 最新のExpo SDKにアップ…

React Navigation をv4→ v5にバージョンアップしてみた

こちらのPull Requestで諸々対応 ■ react-navigation v5にアップデート https://github.com/wheatandcat/Peperomia/pull/545/files ■ react-navigation v5のScreen optionにtypesを指定 https://github.com/wheatandcat/Peperomia/pull/549/files 概要 React…

NuxtでComposition API とTSとTSX + CSS Modulesの組み合わせについて考えてみる

github.com 上記のプロジェクトでComposition API とTypeScriptを組み込んでみたので、その時の考えをまとめて記事にしました。 前置き Composition API とは Composition API RFC | Vue Composition API Composition APIについては上記の公式ホームページの…

Firebase Authenticationの「This browser is not supported or 3rd party cookies and data may be disabled. 」の解決方法

今、以下のレポジトリでWeb版ペペロミアを開発中ですが、その時にハマった内容を記事にしました。 github.com はじめ Firebase Authenticationでログイン画面を作成して、いざログインしようとすると This browser is not supported or 3rd party cookies an…

DangerでPull Requestでカバレッジを通知してテストコードを書くモチベーションを上げる

そろそろもっとテストコード書いたほうが良いなーと思ったので、 モチベーションを上げるためにカバレッジを通知するようにしました。 ↓こんな感じ 通知にはdanger-jsを使用しました。 github.com カバレッジの通知は、こちらのプラグインでサクッと実装でき…

react-responsiveを使ってiPadの対応をする

アプリの審査で2回連続、iPad周りのレイアウトで落とされてたので、その辺の対応しました。 対応にはreact-responsiveを使用 github.com Expoで使用する場合は以下を参照 blog.expo.io react-responsiveを使うとReact NativeでもMediaQueryっぽい判定が使用…

GitHub ActionsでJest、ESLint、tscを実行する

今までTravis CIを使ってましたが、それをGitHub Actionsに移行しました。 github.com 元々Travis CIでは以下のことを移行しました jest実行 eslint実行 tsc実行 GitHub Actionsは.github/workflows配下にymlファイルを配置すれば実行されるようになります。…

Gatsby.js + mdxでヘルプサイトを作ってみる

ヘルプ用のサイトをGatsby.js + mdxで作ってたので紹介 www.gatsbyjs.org Gatsby.jsは、Reactベースで静的サイトを簡単に作成できるツール github.com MDXはMarkdownでJSXをimportして使用したり、JS側にMarkdownで記載 したファイルをimportしたりできるラ…