blog.omoidasu.dev.feedOmoidasu Tech Blog2026-04-24T01:25:44.000Zhttps://blog.omoidasu.dev/posts/2025-05-01-expo-apple-targets#1746247855000expo-apple-targetsの凄さiOSのWidgetやApp Clip等のターゲットをManaged Workflowで利用するためのConfig Pluginであるexpo-apple-targetsが凄かったため、それについて書きます。2025-05-01T05:26:37.000Z2025-05-03T04:50:55.000Z@gaishimohttps://twitter.com/gaishimohttps://blog.omoidasu.dev/posts/2025-04-29-eas-devclient-testflight#1746150449000ExpoのEASで開発ビルドのTestFlight配布を試してみたExpo SDK 53からEAS DevClientがTestFlightで配布できるようなったため試してみました。2025-05-01T05:26:37.000Z2025-05-03T04:50:55.000Z@gaishimohttps://twitter.com/gaishimohttps://blog.omoidasu.dev/posts/2025-04-27-like-button#1746150449000ブログにLikeボタンを追加したブログ記事にLikeボタンを追加して、React Native SkiaとNext.jsで実装した方法について解説します。2025-05-01T05:26:37.000Z2025-05-03T04:50:55.000Z@gaishimohttps://twitter.com/gaishimohttps://blog.omoidasu.dev/posts/2025-04-09-sakura-fluttering#1746150449000当ブログの背景に桜を舞い散らせたReact Native Skiaを使って当ブログの背景に桜の花びらを舞い散らせるエフェクトを実装しました。2025-05-01T05:26:37.000Z2025-05-03T04:50:55.000Z@gaishimohttps://twitter.com/gaishimohttps://blog.omoidasu.dev/posts/2025-03-20-skia-atlas#1746150449000React Native SkiaのAtlasについてReact Native SkiaのAtlasでは大量の画像を効率的に描画することが可能です。2025-05-01T05:26:37.000Z2025-05-03T04:50:55.000Z@gaishimohttps://twitter.com/gaishimohttps://blog.omoidasu.dev/posts/2025-03-16-blog-system-update#1746150449000当ブログのシステムを更新しました当ブログのシステムを更新しました。2025-05-01T05:26:37.000Z2025-05-03T04:50:55.000Z@gaishimohttps://twitter.com/gaishimohttps://blog.omoidasu.dev/posts/2023-12-06-expo-modules#1746150449000Expo Modulesとは?React Nativeのネイティブモジュールを作成する仕組みであるExpo Modulesの概要について説明します。2025-05-01T05:26:37.000Z2025-05-03T04:50:55.000Z@gaishimohttps://twitter.com/gaishimohttps://blog.omoidasu.dev/posts/2023-03-19-inverted-text#1746150449000React Native Skiaでテキストを背景色に合わせて反転させるReact Native Skiaでテキストカラーを背景色に合わせて部分的に反転させる方法についてです。2025-05-01T05:26:37.000Z2025-05-03T04:50:55.000Z@gaishimohttps://twitter.com/gaishimohttps://blog.omoidasu.dev/posts/2022-12-04-circle-gradient#1746150449000React Native Skiaで円の枠線に対してグラデーションをかける最近様々なサイトやロゴでみかける、円の枠線にかかるグラデーションをReact Native Skiaで実装してみます。2025-05-01T05:26:37.000Z2025-05-03T04:50:55.000Z@gaishimohttps://twitter.com/gaishimohttps://blog.omoidasu.dev/posts/2022-10-30-coin-rotate-animation#1776993873000React Nativeでコインの裏表を回転させるアニメーションreact-native-reanimatedでコインの裏表が回転するアニメーションを表現してみます。2025-05-01T05:26:37.000Z2025-05-03T04:50:55.000Z@gaishimohttps://twitter.com/gaishimohttps://blog.omoidasu.dev/posts/2022-10-19-skia-curved-line-chart#1746150449000react-native-skiaで丸みのついた折れ線グラフを実現するReact Native Skiaでカーブのついた折れ線グラフを実現したいと思います。d3-shapeを使います。2025-05-01T05:26:37.000Z2025-05-03T04:50:55.000Z@gaishimohttps://twitter.com/gaishimohttps://blog.omoidasu.dev/posts/2022-10-16-eas-config-plugin-podfile#1746150449000ExpoのConfig PluginでPodfileを直接書き換えるExpoのConfig PluginでPodfileを直接書き換える方法です。2025-05-01T05:26:37.000Z2025-05-03T04:50:55.000Z@gaishimohttps://twitter.com/gaishimohttps://blog.omoidasu.dev/posts/2022-10-12-android-13-themed-icon#1746150449000ExpoのManaged WorkflowでAndroid 13のThemed Iconsを設定するExpoのManaged WorkflowでAndroid 13のThemed Iconを設定する方法です。2025-05-01T05:26:37.000Z2025-05-03T04:50:55.000Z@gaishimohttps://twitter.com/gaishimohttps://blog.omoidasu.dev/posts/2022-10-08-config-plugin-dev-settings#1746150449000ExpoのConfig PluginをTypeScriptで開発する環境を整えるExpoのConfig PluginをTypeScriptで開発するための環境設定について説明します。2025-05-01T05:26:37.000Z2025-05-03T04:50:55.000Z@gaishimohttps://twitter.com/gaishimohttps://blog.omoidasu.dev/posts/2022-10-05-eas-managed-os-versions#1746150449000ExpoのManaged Workflowでビルド時の設定値(ターゲットOSバージョン等)を変更するExpoのManaged Workflowにおいてexpo-build-propertiesでAndroidのminSdkVersionやiOSのターゲットバージョンを設定する方法です。2025-05-01T05:26:37.000Z2025-05-03T04:50:55.000Z@gaishimohttps://twitter.com/gaishimohttps://blog.omoidasu.dev/posts/2022-10-02-custom-haptic-ios#1746150449000React NativeでCustom Hapticsを使う (iOS)React Nativeで独自のCustom Hapticsを使う方法について説明します(iOS)。2025-05-01T05:26:37.000Z2025-05-03T04:50:55.000Z@gaishimohttps://twitter.com/gaishimohttps://blog.omoidasu.dev/posts/2022-09-27-eas-managed-exo-player#1746150449000ExpoのManaged Workflowでreact-native-videoのExoPlayerを使う設定react-native-videoのv5系でExoPlayerを使うための設定です。2025-05-01T05:26:37.000Z2025-05-03T04:50:55.000Z@gaishimohttps://twitter.com/gaishimohttps://blog.omoidasu.dev/posts/2022-09-21-cubic-bezier-curve#1746150449000react-native-skiaで三次ベジェ曲線を描くreact-native-skiaで三次ベジェ曲線を描く方法について説明します。2025-05-01T05:26:37.000Z2025-05-03T04:50:55.000Z@gaishimohttps://twitter.com/gaishimohttps://blog.omoidasu.dev/posts/2022-09-18-quadratic-bezier-curve#1746150449000react-native-skiaで二次ベジェ曲線を描くReact Native Skiaで二次ベジェ曲線を描く方法について説明します。アニメーションもしてみます。2025-05-01T05:26:37.000Z2025-05-03T04:50:55.000Z@gaishimohttps://twitter.com/gaishimohttps://blog.omoidasu.dev/posts/2022-09-14-skia-dimly-glowing-light#1746150449000Skiaでぼんやり光るライトを表現するreact-native-skiaでぼんやり光るライトを表現してみたいと思います。2025-05-01T05:26:37.000Z2025-05-03T04:50:55.000Z@gaishimohttps://twitter.com/gaishimohttps://blog.omoidasu.dev/posts/2022-09-11-dynamic-react-logo#1746150449000Reactのロゴをreact-native-skiaでアニメーションさせてみるReactロゴをreact-native-skiaでアニメーションさせて遊んでみました。楕円上を小さな円が周ります。2025-05-01T05:26:37.000Z2025-05-03T04:50:55.000Z@gaishimohttps://twitter.com/gaishimohttps://blog.omoidasu.dev/posts/2022-09-06-done-animation#1746150449000react-native-skiaでチェックマークアニメーションを実装するiOSでの購入時等に表示される、チェックマークが描かれるアニメーションを再現してみたいと思います。2025-05-01T05:26:37.000Z2025-05-03T04:50:55.000Z@gaishimohttps://twitter.com/gaishimohttps://blog.omoidasu.dev/posts/2022-09-04-rn-emoji-keyboard#1746150449000react-nativeで絵文字を選択するためのライブラリrn-emoji-selector先日のReact Native EU 2022で絵文字を選択するためのライブラリrn-emoji-keyboardが紹介されていました。2025-05-01T05:26:37.000Z2025-05-03T04:50:55.000Z@gaishimohttps://twitter.com/gaishimohttps://blog.omoidasu.dev/posts/2022-09-02-ripple-effect-button#1746150449000react-native-skiaでRipple Effectボタンを作成するMaterial UIでも使われているRipple Effectのボタンをreact-native-skiaで作成してみます。2025-05-01T05:26:37.000Z2025-05-03T04:50:55.000Z@gaishimohttps://twitter.com/gaishimohttps://blog.omoidasu.dev/posts/2022-08-30-skia-skeleton-screen#1746150449000react-native-skiaでSkeleton Screenを作成するreact-native-skiaのグラデーションとアニメーションを使い、ロード中表示用のSkeleton Screenを実装します。2025-05-01T05:26:37.000Z2025-05-03T04:50:55.000Z@gaishimohttps://twitter.com/gaishimohttps://blog.omoidasu.dev/posts/2022-08-28-text-gradient#1746150449000react-native-skiaでテキストにグラデーションをかけるreact-native-skiaでテキストにグラデーションをかける方法です。アニメーションも試してみます。2025-05-01T05:26:37.000Z2025-05-03T04:50:55.000Z@gaishimohttps://twitter.com/gaishimohttps://blog.omoidasu.dev/posts/2022-08-24-shrinking-circle#1746150449000react-native-skiaで収縮する円を表現する様々なアプリやサービスで見かける、収縮する小さな円（ライト)をreact-native-skiaで表現してみます。2025-05-01T05:26:37.000Z2025-05-03T04:50:55.000Z@gaishimohttps://twitter.com/gaishimohttps://blog.omoidasu.dev/posts/2022-08-22-custom-font-weight#1746150449000React Nativeでカスタムフォントのweight設定をするReact Nativeでカスタムフォントを利用した時に、Textに指定したweightに応じて変化させる方法です。2025-05-01T05:26:37.000Z2025-05-03T04:50:55.000Z@gaishimohttps://twitter.com/gaishimohttps://blog.omoidasu.dev/posts/2022-08-20-rn-skia-shadow#1746150449000react-native-skiaでドロップシャドウをつけるreact-native-skiaでドロップシャドウをつける方法です。2025-05-01T05:26:37.000Z2025-05-03T04:50:55.000Z@gaishimohttps://twitter.com/gaishimohttps://blog.omoidasu.dev/posts/2022-08-17-skia-arc#1746150449000Skiaで円弧を描くreact-native-skiaで円弧を描く方法についてです。path.addArcを使います。2025-05-01T05:26:37.000Z2025-05-03T04:50:55.000Z@gaishimohttps://twitter.com/gaishimohttps://blog.omoidasu.dev/posts/2022-08-13-aglet-animation#1746150449000Agletの無限に斜め横に移動するアニメーションを再現してみるスニーカーを集めるアプリAgletで使われているアニメーションをreact-native-skiaで再現してみます。2025-05-01T05:26:37.000Z2025-05-03T04:50:55.000Z@gaishimohttps://twitter.com/gaishimohttps://blog.omoidasu.dev/posts/2022-08-10-parabola-move#1746150449000Skiaで放物線の動きを描くreact-native-skiaで放物線の動きを描く方法についてです。2025-05-01T05:26:37.000Z2025-05-03T04:50:55.000Z@gaishimohttps://twitter.com/gaishimohttps://blog.omoidasu.dev/posts/2022-08-09-trigonometric-tool#1746150449000三角関数計算ツール📐三角関数の計算をおこなうためのツールをSkiaで作成してみました。角度と半径を元にsin, cosの計算を行います。2025-05-01T05:26:37.000Z2025-05-03T04:50:55.000Z@gaishimohttps://twitter.com/gaishimohttps://blog.omoidasu.dev/posts/2022-08-08-reanimated-web-config#1776993944000Webでreact-native-reanimatedの設定を行うReact Native Web(Next.js)でreact-native-reanimatedの設定が意外と大変だったため、記録として残します。2025-05-01T05:26:37.000Z2025-05-03T04:50:55.000Z@gaishimohttps://twitter.com/gaishimohttps://blog.omoidasu.dev/posts/2022-08-07-rn-skia-in-blog#1746150449000ブログにreact-native-skiaを導入しました🎨2DグラフィックライブラリをReact Nativeで扱うためのreact-native-skiaを当ブログに導入しました2025-05-01T05:26:37.000Z2025-05-03T04:50:55.000Z@gaishimohttps://twitter.com/gaishimohttps://blog.omoidasu.dev/posts/2022-07-25-eas-widget#1746150449000Expo (EAS Build)でAndroid・iOSのWidgetを作成したExpoのManaged WorkflowでWidget(iOS / Android)を作成する方法について説明します。2025-05-01T05:26:37.000Z2025-05-03T04:50:55.000Z@gaishimohttps://twitter.com/gaishimohttps://blog.omoidasu.dev/posts/2021-09-24-blog-rn-web#1746150449000当ブログにReact Native for Webを導入しました当ブログ(Next.js)にReact Native for Webを導入しました。2025-05-01T05:26:37.000Z2025-05-03T04:50:55.000Z@gaishimohttps://twitter.com/gaishimohttps://blog.omoidasu.dev/posts/2021-08-29-eas-iap#1746150449000ExpoのManaged Workflowでアプリ内課金を実装するExpoのEAS Buildで、Managed Workflowプロジェクトに対してアプリ内課金を実装する手順について説明します。2025-05-01T05:26:37.000Z2025-05-03T04:50:55.000Z@gaishimohttps://twitter.com/gaishimohttps://blog.omoidasu.dev/posts/2021-08-27-expo-links#1746150449000Expo(React Native)のリンク集Expo (React Native)関連のリンクをまとめました。2025-05-01T05:26:37.000Z2025-05-03T04:50:55.000Z@gaishimohttps://twitter.com/gaishimohttps://blog.omoidasu.dev/posts/2021-06-04-hello-eas-build-managed#1746150449000Hello EAS Build! (Managed Workflow)最近サポートされた、EAS BuildのManaged Workflowビルドを試してみます。2025-05-01T05:26:37.000Z2025-05-03T04:50:55.000Z@gaishimohttps://twitter.com/gaishimohttps://blog.omoidasu.dev/posts/2020-12-17-m1-mac-react-native#1746150449000M1 Mac上でReact Nativeアプリを実行・検証してみるReact NativeのアプリをM1 Mac上で検証する手順についてです。2025-05-01T05:26:37.000Z2025-05-03T04:50:55.000Z@gaishimohttps://twitter.com/gaishimohttps://blog.omoidasu.dev/posts/2020-12-04-expo-client-apk#1746150449000AndroidのExpo ClientアプリをAPKで直接インストールするAndroidのExpo Clientアプリを、CLI(expo client:install:android)ではなく、APKを直接インストールする方法です。2025-05-01T05:26:37.000Z2025-05-03T04:50:55.000Z@gaishimohttps://twitter.com/gaishimohttps://blog.omoidasu.dev/posts/2020-12-03-vercel-error#1746150449000Next.js Vercelデプロイ時にエラー should NOT have fewer than 1 propertiesVercelでデプロイした時にshould NOT have fewer than 1 propertiesと謎のエラーが出た場合の対処法です。2025-05-01T05:26:37.000Z2025-05-03T04:50:55.000Z@gaishimohttps://twitter.com/gaishimohttps://blog.omoidasu.dev/posts/2020-09-02-firestore-indexes#1746150449000firestoreのindexを自動で管理するFirestoreのインデックス管理について説明します2025-05-01T05:26:37.000Z2025-05-03T04:50:55.000Z@gaishimohttps://twitter.com/gaishimohttps://blog.omoidasu.dev/posts/2020-08-04-custom-font-line-gap#1746150449000React Nativeでカスタムフォントの行間がやたら拡がってしまう場合の調整方法React Nativeでカスタムフォントを使った場合、行間がやたら拡がってしまう場合があります。その場合の調整方法について説明します。2025-05-01T05:26:37.000Z2025-05-03T04:50:55.000Z@gaishimohttps://twitter.com/gaishimohttps://blog.omoidasu.dev/posts/2020-08-03-expo-config#1746150449000Expoの設定(app.json)をtypescriptで動的に記述するExpoの設定ファイルをtypescriptで動的に書くやり方について説明します。アプリから環境変数を参照する方法についても記載します。2025-05-01T05:26:37.000Z2025-05-03T04:50:55.000Z@gaishimohttps://twitter.com/gaishimohttps://blog.omoidasu.dev/posts/2020-06-13-blog-opened#1746150449000Omoidasu Techブログを開設しました!ブログを新たに開設しました。2025-05-01T05:26:37.000Z2025-05-03T04:50:55.000Z@gaishimohttps://twitter.com/gaishimo