[ReactNative] Androidのinactive状態を確認する方法〜AppState〜

【React Native/Expo bare】プライバシーマニフェストファイル作成方法

自作アプリ (Kotango / Hajimari) の Privacy Manfest ファイルを作成してアプリの更新まで行いましたので、その手順を共有します。

App Store のアプリの言語を EN(英語) から JA(日本語) に変更する方法

室外ウォーキング履歴 – 2024年

室外ランニング履歴 – 2024年

【ReactNavie】この App Bundle に関連付けられている難読化解除ファイルはありません〜対処方法〜

ReactNative/Expo Bare 環境で、Google Play Console(GPC) にアプリのaabファイルをアップロードしてから下記のような警告が出た場合のシンプルな対処方法をご紹介します。

【ReactNative】手書き機能を実装する方法〜アプリ実装済み〜

【ReactNative】スマホの機種変更前のデータ引き継ぎ機能を実装する〜アプリ実装済み〜

「暗号化＋バックアップ版」Apollo Client の Reactive variables データと SQLite のデータを暗号化し バックアップ ➡︎ リストア する方法をご紹介しています。

【ReactNative】スマホの機種変更後のデータ引き継ぎ機能を実装する〜アプリ実装済み〜

「復号化＋リストア版」Apollo Client の Reactive variables データと SQLite のデータを暗号化し バックアップ ➡︎ リストア する方法をご紹介しています。

【ReactNative】SQLiteでデータを処理する方法〜アプリ実装済み〜

expo-sqlite を使用すると、WebSQL のような API を通じてクエリできるデータベースにアプリがアクセスできるようになります。 データベースはアプリを再起動しても保持されます。

【ReactNative】音声認識で発音をチェックする方法〜Speech Recognition〜

React Native 用の Speech-to-text ライブラリを用いて、既定の単語をユーザに発音してもらい、その結果をユーザにフィードバックするアプリの一つの機能として実装した実例をご紹介します。

【アプリ開発】AdMob バナー広告を実装する方法

ユーザーに広告を表示するためAdMob モジュールを使用します。すべての広告は Google AdMob ネットワーク経由で配信されるため、Google AdMob アカウントが必要になります。

App Tracking Transparency (iOS) を設定する

Apple は、IDFA にアクセスするための App Tracking Transparency 認証リクエストを表示することをアプリに要求しています (パーソナライズされた広告を使用するか、パーソナライズされていない広告を使用するかはユーザーに選択を委ねます)。

Expo Webでアプリを開発しGitHub Pagesへ公開する手順〜〜

Expo Webで開発したWebSiteをGitHub Pagesでホスティングする手順です。カスタム ドメインを使用するためXServerでDNS レコードにCNAME設定し、GitHub Pagesのカスタムドメインの検証まで行います。

【Expo Web】ResizeObserver ポリフィルのテスト方法

Safari の 開発メニューがメニューバーに表示されない〜masOS〜

iPhoneデバイスでWebインスペクタを有効にする

MacBook で Safari を開き、[開発] > [デバイス] > [ホスト] に移動する際に、表示される デバイスでWebインスペクタを有効にする 方法です。

[How-to] Light・Dark テーマを手動で切り替える実践方法〜React Native Paper〜

Light/Darkテーマを手動で切り替えるメニューの実装方法です。アプリ内のどこにでも実装できます。

VSCode エディター環境設定〜GraphQL・Nexus・Prisma〜

自作で利用中のNexus用スニペット。これを参考に自身のスニペットに変更するのも良いかもしれません！また、VSCode用のエクステンションも紹介します。

TypeScript with Apollo Client〜GraphQL コード ジェネレーター〜

GET_USERS にマウスオーバーすると、const GET_USERS: TypedDocumentNode<UserQueryQuery, Exact>のようにクエリのタイプが表示されることを確認できたら OK です。

Prisma でデータを PostgreSQL に一括入力する方法

仮に以下のように Daibunrui、Chubunrui テーブルがあるとします。大分類データを先に入力し、各大分類別 中分類でーたを入力することを想定します。

【Nexus・Prisma】Json 型を実装する

Error: NEXUS__UNKNOWN__TYPE was already defined and imported as a type, check the docs for extending types⬆︎ DateTime 型と同じく、Json 型も追加する必要があります。

【ReactNative】GraphQL Backend 構築 ❸ 〜Nexus Type 作成〜

Nexus Type を作成して GranphQL Type に変換させる方法を見ていきます。

【Nexus・Prisma】DateTime 型を実装する

【ReactNative】GraphQL Frontend 環境〜apollo-client + apollo3-cache-persist〜

persistCache？CachePersistor？どちらを採用するかはプロジェクトのニーズによりますが、書き込みが多かった別のアプリの開発時は CachePersistor を採用し、手動( trigger: false )で保持するタイミング( persistor.persist() )を制御したことがありました。

【ReactNative】GraphQL Backend 構築 ❶ 〜Apollo Server4・Nexus・Prisma・PostgreSQL〜

既にリリース済みの自作アプリで利用中のReact Native の GraphQL バックエンド環境を紹介します。ApolloServer4, Nexus, Prisma, PostgreSQL 環境！

【ReactNative】GraphQL Backend 構築 ❷ 〜Prismaと接続するためのPostgreSQLを設定する〜

ReactNativeのバックエンド環境をGraphQLサーバであるApollo Serverを採用します。PostgreSQLをmacOSに設置 & プロジェクト用の DB を追加しPrismaと接続する準備をします。

[How-To/Expo Rotuer] tabBarのレイアウトを中央寄せに調整する

Google AdMob リワード広告 – 誤解を招く開示情報 問題を解決〜経験共有〜

意外と簡単に解決できましたが、リワード広告 - 誤解を招く開示情報 要修正 の詳細などを読みながら色々勉強になった気がしました。

Google AdMobでバナー広告を設定する方法〜expo-bare〜

開発環境は既に @react-native-firebase/app: 18.5.0 バージョンが設定されていることを前提とします。AdMob を使用してアプリを開発するときは、Google AdMob アカウントの本番広告ではなくテスト広告を使用するようにしてください。そうしないと、アカウントが無効になる可能性があります。

react-native-firebase/auth@18.5.0で匿名認証を追加する〜expo-router〜

React Native Firebase の他のパッケージ ( Analyticsなど ) を利用する時には匿名認証を含め、Firebase認証が必須ですので、ログイン機能を持たなくても追加しておくの良いと思います。

The Swift pod `FirebaseCoreInternal` depends upon `GoogleUtilities`, which does not define modules. エラーを修正する方法

react-native-firebase v15+ 以降では フレームワークを使用するように CocoaPods を変更する必要があるようです。実際の内容を反映し問題なくビルドした ios/Podfile の中身 をご参考ください

Task :app:processDebugGoogleServices FAILED エラーを修正する方法

Task :app:processDebugGoogleServices FAILED Firebaseコンソールで作成した Android アプリのパッケージ名とReactNative プロジェクトのAndroid アプリのパッケージ名を一致させる方法が変わっているようです。

デベロッパモードをONにする方法〜iOS 16.6.1〜

「your_app_name」を起動できませんでした「local_path」を起動できません: 操作を完了できませんでした。org.name.your_app_name は、コード署名が無効であるか、資格が不十分であるか、プロファイルがユーザーによって明示的に信頼されていないため、起動できません。

信頼されていないデベロッパ 警告を処理する〜iOS 16.6.1〜

このiPhoneでデベロッパ ”Apple Development: xxxx@gmail.com(123ABCD4EF)" のAppを使用することは現在のデバイス管理設定では許可されていません。これらのAppの使用は、"設定"で許可することができます。と、警告が出た場合の対応方法を見てみます。(※ iOS 16.6.1 基準)

【ReactNative】カスタマイズ可能な Undo/Redo 機能を実装する方法

Undo/Redoで管理したいデータを保存・追跡する方法を分かりやすく解説して、数値、文字列、配列、オブジェクトのどれでも問題なくUndo/Redoで管理可能なサンプルアプリを作成します。

React Navigation環境からExpo Routerに乗り換える方法〜React Native Paper〜

マテリアル デザインライブラリ・コンポーネントライブラリである React Native Paper を Expo Router と連携するための手順をご紹介します。React Native Paper + React Navigation環境から乗り換える方法にもなると思います。

Expo Router・TypeScriptで開発環境を作る〜Expo bare〜

自分に合う着地方法を見つけるポイント〜つま先・前足〜

2016年頃からリハビリを兼ねて走り始め、現在は10.3(4)km走りを毎週1〜3回程度実施中の筆者はピッチ型で始まり、現在ストライド型に変えて走っています。

10kmマラソンの練習メモと実績

私の10キロマラソンのトレーニングでは、LSDトレーニング、インターバル走、ペース走などを取り入れています。トレーニングセッションを記録し、時間の経過とともに変化を分析することで、目標に向けて次のステップを設定、目標達成 ( 10km 40分切り ) に向けて取り組んでいきます！

【実践編】軽度の左片マヒを克服するための自主リハビリ、その経過！

リハビリとして「筋トレ」のような激しい運動ではなく、筋肉を伸ばし、柔軟性を高めるためにストレッチに主眼を置いています。自宅でペットボトルやバランスボールなどを用いて気軽く行えることも大事でしょう！

【呼吸する】浅い呼吸を克服！楽に走る方法とは？

幸いにも、最近の肥厚性鼻炎の症状は大幅に改善されて、私は鼻から自由に空気を吸い込めるようになりました。そして、腹式呼吸もできるようになり、息切れせずに10キロメートル弱を楽々と走ることができています。この経験から得られた呼吸方法を詳しく見ていきます。

サブドメインで複数のブログ運用中、403 Forbidden 処理方法

サブドメインで複数のブログ運用中、403 Forbidden 処理方法

【走る】ランニングを楽しんで体を鍛える！

【歩く】効果的に痩せる・カラダバランスと整えるためのウォーキング！

【冷凍食品】ひれかつのあれこれ・商品紹介

【冷凍食品】プラントベースハンバーグのあれこれ〜商品紹介〜

【冷凍食品】プラントベース餃子のあれこれ〜商品紹介〜

【冷凍食品】プラントベースピザのあれこれ〜商品紹介〜

ビーガン食に切り替えて以来、私はプラントベースピザをよく楽しんでいます。お肉の味が恋しくなったときやすぐにお腹いっぱい食べたいときによく食べています。今までいくつかの商品を食べ比べましたが、今回はその中でも特におすすめの商品を紹介します。

【お菓子】アーモンドのすごいところ〜効能効果・商品紹介〜

【お菓子】ソイミルクのすごいところ〜効能効果・商品紹介〜

【お惣菜】カレーのすごいところ〜効能効果・商品紹介〜

【お菓子】サツマイモのすごいところ〜効能効果・商品紹介〜

ビーガン食に切り替えて以来、よく楽しんでいるサツマイモの効能効果などを調べました。特に肝臓の健康と強化を期待して食べていますが、よく食べている紅はるか干し芋も合わせて紹介します。

菜食(ビーガン)への転向、その過程と前後の変化！

年度別ランニング履歴

年度別のランニング履歴をまとめてみて、健康的な生活習慣を続けることによって、さらに健康を意識することができます。ぜひ取り組んでみてください！

年度別ウォーキング履歴

年度別のウォーキング履歴をまとめてみて、健康的な生活習慣を続けることによって、さらに健康を意識することができます。ぜひ取り組んでみてください！

肉食から菜食へ転向した決定的なきっかけ、そして実践と健康の変化！

7年間歩き・走り続けて、ピッチとストライド走法の違いを見極めて見た！

室外ランニング履歴 – 2019年

室外ランニング履歴 – 2020年

室外ランニング履歴 – 2023年

室外ウォーキング履歴 – 2019年

室外ウォーキング履歴 – 2020年

室外ウォーキング履歴 – 2021年

室外ウォーキング履歴 – 2022年

室外ウォーキング履歴 – 2023年

室外ランニング履歴 – 2021年

室外ランニング履歴 – 2022年

初めてのブログで右往左往しない、SEO志向の必要最小限のやるべきこと！

目次通り進めば、初めてのブログでも右往左往しない、SEO志向の必要最小限のやるべきことを解説します。

複数のブログなら、サブドメインも常時SSL化しておく！

複数のブログをサブドメインで追加する場合、サイトを常時SSL化するための方法をXServerを例に設定方法や動作確認方法を画像で分かりやすく解説します。

ブログを始めたら、パーマリンクオプションを変更しておく！

ブログを始めたらパーマリンクオプションを変更し①文字化けのようなURLを避ける②記事の内容をURLを見るだけでわかるように③SEO対策を適用します。

SitekitとAdSense連携 – サイト登録はどこにすれば良いか！

AdSenseに登録済みのサイトを後からSiteKitと連携する場合と、アドセンス未登録のサイトをSiteKitで初めて連携する場合、

乾癬を完治した自分の確実な治し方の実例

[初めての方向け] eas submit コマンドを実行するとどうなる？

$ eas submit を実行すると App Store Connect(以下、ASC) や Google Play Console(以下、GPC) にどのように反映されるのか？それぞれ見ていきます。 以下は、expo bare プロジェットで Reat Native アプリを開発 & リリースしたことをベースにしています。

App Reviewに関する情報 メモ 欄には何を書けば良いのか？

App Store Connect(以下、ASC)のApp Reviewに関する情報には四つの項目(サインイン情報、連絡先情報、メモ、添付ファイル)がありますが、特にメモには何を書けば良いのか迷っている方に参考できればと。

App Reviewに関する情報 メモ 欄には何を書けば良いのか？

ScrollView の Scroll 機能を ON・OFF して使おう！〜ReactNative〜

React NativeのScrollViewを使用する時、スクロールしてもリバウンドされて最下段のコンテンツが見えない問題をクリアしてからスクロール機能を必要な時だけ ON にする例題です。

Reduxの代わりにReact Context APIでStateを管理してみる

ReduxもしくはuseContext、useReducerなどのReact Context API？どちらを使用すれば良いのか？それに答えるにはそれぞれ作って確認するが良いでしょう。定番のTODOアプリで素早くContext Storeの動作を確認！、ReduxのCounterアプリの動作も確認！、できます。今チェックを！

React Native で UUID を使うためには？！

React Native でuuidを使おうとすると、JavaScript標準のCrypto.getRandomValues()をサポートしていないためgetRandomValues() not supportedエラーが発生するようです。必要なpolyfillを適用してuuidを使う方法を確認しましょう。

material-bottom-tabsのTabを非表示する方法〜React navigation〜

React Navigation v5 + React Native Paper + createMaterialBottomTabNavigator で作成した Tab を非表示にしたい。その時、TabBarVisible: false オプションを使っても何故か効かなかったのでRedux Storeを使って解決(回避)してみました。

Redux ToolkitでReduxを楽に使う〜React-Native〜

React NativeでReduxを実装するための簡単なテンプレート的なものが欲しかったためまとめたものです。Reduxを実装する一般的な手順、Redux を実装する方法、関数コンポーネント ( フック )、クラスコンポーネント ( HOC ) への設定の違い、Redux Toolkit 上での非同期処理方法などをみていきます。

レンダリングを妨げるリソースの除外〜PageSpeed Insights〜

PageSpeed Insights からレンダリングを妨げるリソースを除外してサイトの性能を改善しなさいといわれた！PageSpeed Insightsから紹介されたやり方に沿って対処！リソースの読み込みのタイミングをチェックし、的確に先読みか後読みかを選別。除外スクリプトを作成しHTMLのヘッダーに挿入することで改善します。

Paper と Navigation v5 で Twitter Clone アプリを作成する〜初心者向け〜

初心者向け！Twitter CloneアプリをReact Nativeで作成、すべてのコードと共に開発過程を動画付きで詳しく説明！コピぺして今すぐ動くアプリを作りましょう。最新版の React Navigation v5とReact Native Paperを Expo開発環境でアプリを作成しています。マテリアルデザイン！

VSCode に乗り換えてはじめてやること！〜初心者向け〜

プログラミング用のエディターって何を使えばいいの？悩みますね。Atom から Sublime Text 3 それからVSCode。この三つの中で最終的に VSCodeに辿り着いた。VSCode を使う為に Emmet、Snippet、ESLint、Prettierなどを設定してすぐ有効に使えるものにします。

Expo.io｜イメージをシェアする方法〜チュートリアル〜

React Nativeをはじめる為Expo.ioを利用することに！その為ExpoやReact Nativeの開発環境や基礎を学習中です。今回はExpo.ioチュートリアルであるイメージファイルをシェアするアプリを作成します。expo-image-pickerやexpo-sharingなどを利用します。

Argon React Native で React Native をはじめる〜開発環境作り〜

Argon React Native + Expo.ioで開発環境を macOS に構築します。Android・iOS 用シミュレータ環境及び Expo アプリをインストールするデバイス環境の設定まで行います。これによって、より迅速なモバイルアプリの開発ができるようになります。

Expo.io で React Native 開発環境を構築する〜macOS〜

React Native アプリを開発する為の環境を二つに分けて設定していきます。1) Android エミュレート・iOS シミュレータ環境、2) Expoアプリ・Expo Client のインストールによるデバイス環境

Nodebrew で Node.js の環境を管理する〜macOS〜

macOSでのnode.js環境をnodebrewで管理する方法のメモ！

Twitter ソーシャルログイン機能を実装する〜Reactjs + Django〜

CentOS7.6で、React+Django REST framework+Nginx+uWSGIの環境を作り、その上にソーシャル認証機能(Twitter)を実装する方法をご紹介します。メール認証方式のユーザ登録方法も確認できます。

適切なサイズの画像を配信する方法〜PageSpeed Insights〜

PageSpeed Insight でサイトを分析すると、「改善できる項目」に「適切なサイズの画像を配信して、モバイルデータ量を節約し読み込み時間を短縮してください。」と表示された場合の対処方法をご紹介します。本記事の最後にご紹介する他の項目も改善する前提で、パソコンで最大 97 点、モバイルで最大 68 点までアップできます。

「オフスクリーン画像の遅延読み込み」項目を改善する方法〜PageSpeed Insights〜

サイトバーにアフィリエイトサイトの広告を適用中ですが、PageSpeed Insightsの分析結果で「改善できる項目」に入っていましたので、修正した内容を記録しておきます。個人的にはプラグインを使用しないなら Lazysizes を適用し、プラグインを使用するなら Autoptimize を使えば楽かと思います。

「WEB フォント読み込み中のテキストの表示」に対処する方法〜PageSpeed Insights〜

WEBフォントがロード中に表示できない場合、システムフォントを一時的に表示できるよう、font-display:を@font-faceスタイルにスワップすることで、ほとんどの最新ブラウザーでこの問題を回避できますが、全てのブラウザでサポートさせるためWeb Font Loaderを採用します。

JavaScript や CSS の最適化のための Autoptimize プラグインの設定方法

JavaScriptやCSSの最適化はもちろん、Googleフォントの制御、サードパーティのドメインに事前接続設定でサイトのパフォーマンスがさらに向上できます。PageSpeed Insightsのパソコンスコアが60台から最大97点までアップするその一つの方法を公開！GTmetrixでも最大A(93)までアップ！

第三者コードの影響を抑える方法〜PageSpeed Insights〜

AdSenseやGoogleアナリティクスなど、第三者との連携によってサイトのスピードは落ちて行くのですが、第三者コードの影響を抑える ことでサイトのパフォーマンスがさらに向上できます。PageSpeed Insightsのパソコンスコアが60台から最大97点までアップするその一つの方法を公開します。

Lazysizes で アフィリエイト広告画像ファイルの読み込みを遅延させる〜A8.net moshimoなど〜

PageSpeed Insights でサイトを分析する際、「改善できる項目」に「オフスクリーン画像の遅延読み込み」が表示された場合の対処方法を紹介します。Cocoon テーマの「高速化」機能を使用しながら、プラグインを設置せずアフィリエイト広告コードの読み込みを遅延させるときに有効です。

エックスサーバに SSH 接続する方法〜Config ファイル & コマンドライン〜

レンタルサーバのXserverへSSHで接続する必要があったので、接続方法をまとめておきます。Configファイルに覚えやすい接続名のテンプレートを作成しておくと、コマンドラインで長くコマンドを打つよりは便利です。

CentOS 7 インストール後の初期設定を行う〜セキュリティ強化〜

OSのインストール後、初期設定をどのレベルまですれば良いか、に対する答えは様々でしょうが、本稿ではサーバへの不正アクセスを防止する事と、システム運用のための最小限の設定に焦点を当てて紹介します。主にsudo、SELinux、Fail2Ban、Chronyd、Yum、Firewalldの設定を行います。

CentOS 7 に最新の LNMP 環境を構築する

CentOS7の自宅サーバ環境です。LAMP環境は既に使用中であり、新しくLNMP環境を追加します。Nginx設定にはSSL証明書 / HTTPS / 301リダイレクト / PHP-FPM設定を行います。

CentOS 7.7 をインストールする〜NetInstallを利用〜

Dell ハードウェアに NetInstall を利用して最新版の CentOS7.7 をインストールします。MacBook を使用し、OSディスクイメージからインストールCDを作成して作業を行います。サーバとして使用するので Minimal Install オプションで行います。