React Native

電通国際情報サービス、オープンイノベーションラボの比嘉康雄です。 今回は、Expoの公式チュートリアルをやっていきたいと思います。 プロジェクトの作成 Download assets Install dependencies アプリの実行 コードの編集 テキストの文字色の変更 イメージの表示 ImageViewerコンポーネント Buttonコンポーネント PhotoButtonコンポーネント 画像の選択 まとめ 仲間募集 プロジェクトの作成 StickerSmashプロジェクトを作成しましょう。 npx create-expo-app StickerSmash && cd StickerSm…

電通国際情報サービス、オープンイノベーションラボの比嘉康雄です。 今回は、Expoに入門します。 Expo とは、開発者が React Native 単体で開発した場合に意識しないといけなかったネイティブ部分を隠蔽して、アプリケーション本体の開発をより Web アプリケーションの開発体験に近づけたものです。 expo cliのインストール Expo Goのインストール プロジェクトの作成 QRコードの読み取り アプリの修正 まとめ 仲間募集 expo cliのインストール expo cliは、下記のようにして、npxでインストールするようです。 npx expo -h 実行すると下記のように言…

ソースコードのダウンロード build開始 bashを起動します アプリケーション初期設定 testappディレクトリに移動 start expo project 形態を開いて、QRコードを読み込みましょう 前提条件:iphoneかandroidを持っていること 前提条件2:expoアプリをお手持ちのケータイにダウンロードしていること ソースコードのダウンロード このリポジトリのソースコードをダウンロードしましょう build開始 docker-compose build bashを起動します docker-compose run react_native bash アプリケーション初期設定 …

Reactとは、Facebookが開発したオープンソースのJavaScriptライブラリです。 ユーザーインターフェース（UI）を構築するために使用されます。 Reactを使うことで、Webページをリッチでインタラクティブなユーザーインターフェースに変えることができます。 Reactは、ユーザーインターフェースをコンポーネントと呼ばれる小さな部品に分割し、それぞれのコンポーネントを再利用可能な形で構築します。 例えば、Webページのヘッダー、ナビゲーションメニュー、検索ボックス、投稿リストなどを、それぞれ別々のコンポーネントとして作成することができます。 また、Reactは、コンポーネントにデ…

やりたいこと 既にあるReact NativeアプリをJavaかKotlinで呼び出して組み込みたいという需要があったときに、 どんな感じでやればいいかを試してみます。 (Java） 実現したいこと Java製の画面にボタンがあって、ボタンを押すとReact Nativeの画面に遷移するのをやりたいです。 React Nativeをbundle化 React Nativeアプリを作成 teisyoku-tabetai.hatenablog.com React Nativeをbundle化 assetsフォルダがない場合は作成します。 mkdir android/app/src/main/ass…

こんにちは。207 でソフトウェアエンジニアをやっている原口 (id:nagamejun)です。 今回は Expo InAppPurchases から RevenueCat に移行した内容について話します。 1年前に Expo の InAppPurchases に移行しましたが今回 RevenueCat に移行しました。その理由と導入方法・注意点についてまとめました。 tech.207-inc.com expo SDK 45 に update 出来ない 207では先日のエントリーの通り EXPO のサポート期間中にバージョンアップを進めています。 tech.207-inc.com expo S…

この記事は 207 Advent Calendar 2022の記事です。 qiita.com 207株式会社でソフトウェアエンジニアをしている id:ryo-rm です。 207ではiOS / Android向けのアプリケーション "TODOCUサポーター" を提供しており、GraphQL / Apollo Clientを活用しています。 Apollo Clientにはスマートなキャッシュ管理機構がありますが、 "TODOCUサポーター" では Local-only fields を活用しているので、こちらについて紹介します。

Expo CLIでローカルの開発、EAS Buildでアプリのビルドを作成、という具合でアプリの開発をしているのですが、 環境変数の扱い方に戸惑い時間を溶かしました。 迷ったところと最終的な設定方法をご紹介します。 なお、Expo v49以降を前提とします。 Environment variables and secrets in EAS Build - Expo Documentation Expo CLI使用時の環境変数 ドキュメントはこちら Environment variables in Expo - Expo Documentation Expo v49からは.env*ファイルが自動…

前回、react-native-youtube-iframeライブラリで、Youtube動画をみるアプリを作りましたが、しばらくすると動画がみれなくなりました。 そこで、次のホームページを参考にして作成してみましょう。 betterprogramming.pub サンプルコードで、Reactで、getElementsByTagNameメソッドを使用する方法で実現してます。 これに関するドキュメントは下記でしょう。 developers.google.com ここで出てくる ` ・・・・${ } ・・・・${ }` という書き方は、 値やテキストを入れたい文字列で、ところどころを虫食いの状態にし…

はじめに Technology Radarとは 項目のピックアップ基準 Techniques 3. Accessibility-aware component test design (Trial) 11. Risk-based failure modeling (Trial) 14. Unit testing for alerting rules (Trial) Tools 50. Chromatic (Trial) 53. Container Structure Tests (Trial) 57. Insomnia (Trial) 65. Terratest (Assess) 76. Ma…

mhidakaが建てたAdvent Calendar 2の8日目です。テーマ性なさすぎてほんと狂ってんなこのカレンダー…… adventar.org というわけで何書いてもいいらしいので、サクッと書ける割に独自性の出やすい、自分の経験を振り返る系記事にしてみようと思います。 コンピュータサイエンスの大学に2005年に入学した人間としてはお恥ずかしいところなのですが、コードを書こうと思ってコードを書くようになったのは大学5年目の2009年だったので、僕の主観では2023年現在がようやくプログラマー15年目という感じです。節目っぽい感じがするので、それぞれの年で思い出深いテクノロジーを思い出してい…

今回、react-native-youtube-iframeというライブラリを利用して、Youtube動画を見れるアプリを作成します。 Youtube公式アプリにリンクがしてあるので、違法ではないようです。まあ、これに関しては自分で使用するだけなので関係ないですが。 lonelycpp.github.io 上記HPのサンプルコードを流用します。 ボタンは、用途上大きくしてます（リモコン操作で行うため） Buttonではwidthは設定できますが、heightは変更できないようなので、 TouchableOpacityとTextの合わせ技でボタンを作成してます。 import { StyleSh…

reactnative.dev 公式ドキュメントを見ると、TextInputは13種類のコールバック関数を渡せるらしい。 onBlur onChange onChangeText onContentSizeChange onEndEditing onPressIn onPressOut onFocus onKeyPress onLayout onScroll onSelectionChange onSubmitEditing TextInput、たまに触る時にちょろちょろ公式ドキュメントを読んでいるだけで、これらのコールバックの細かい違いを把握していない・・・。 ちゃんと理解した方がいいよね、…

下記HPを参考にしてます。 qiita.com totolog34.com このHPにでてくるもののTipsを上げておきます。 非同期処理については以前勉強したので詳細は割愛しますが、今回の非同期処理ではPromiseが使用されていないことに留意してください。また、非同期処理がでてくるのは、AsyncStorageオブジェクトのメソッドを使用するときのみです。 ⓵ JSON.stringify( ) ・・・オブジェクトリテラルをJSON文字列へ変換します。 ② JSON.parse( ) ・・・JSON文字列をオブジェクトリテラルへ変換します。 ③ Mapクラス ・・・ キーと値のペアを保持す…

この記事は、 React Native Advent Calendar 2023 の2日目の記事です。 はじめに FrameProcessorとは？ FrameProcessorを作ってみる vision-camera-ocrの実装を見る iOS Android Frame Processorの作り方のまとめ おわりに 参考 はじめに みなさん、モバイルアプリケーション開発でカメラ機能使ってますか？ React Nativeではカメラを利用するのにライブラリを利用するのが多いかと思います。 ベーシックなカメラライブラリとしては expo-camera などがありますが、より拡張性の高いカメララ…

フロントエンドカンファレンス沖縄2023 2023/11/18 https://frontend-conf.okinawa.jp/ https://front-okinawa.connpass.com/event/299738/ Figmaプロトタイプ入門〜インタラクションイメージのつくりかた〜 株式会社necco / 中川 小雪 Figmaのプロトタイプ デザインを繋いで動きを確認できる 画面遷移を確認できる インタラクションも作れる 実機でデザインを確認できる URLの共有で顧客にプロトタイプを共有できる プライベートプロダクト戦略。Webアプリを起点にしたクロスプラットフォームで大企業が…

前回の用途で行くと、ボタンは縦横にできるだけ大きい方が、リモコン操作でカーソルを合わせやすいとのことで、React NativeでButtonコンポーネントをみると、heightを設定できないとのこと。 幅だけなら、Viewコンポーネントで挟んで、Viewの方に、widthプロパティで設定できるようだが、、、 縦の長さを長くするには下記HP参照 https://stackoverflow.com/questions/41777884/how-to-set-the-height-of-button-in-react-native-android/41778004#41778004 ということで作…

前回の用途で行くと、ボタンは縦横にできるだけ大きい方が、リモコン操作でカーソルを合わせやすいとのことで、React NativeでButtonコンポーネントをみると、heightを設定できないとのこと。 幅だけなら、Viewコンポーネントで挟んで、Viewの方に、widthプロパティで設定できるようだが、、、 縦の長さを長くするには下記HP参照 https://stackoverflow.com/questions/41777884/how-to-set-the-height-of-button-in-react-native-android/41778004#41778004 ということで作…

さて、アンドロイド用のリモコンを買ったのですが、これを使って、Youtube動画を再生したいと思うようになりました。（車で、Youtube動画をうつす方法はいろいろありますが、最近ottocastなるものが流行っているようですが、流行りにのらずに、ミラーリングを使用してます。ただ、これだと画面タッチでは操作できず、スマホをタッチ操作するか、あるいは、Bluetoothリモコンをスマホにつなげ、リモコン操作できるようにするかになります。） その場合、カーソルをYoutube動画の再生ボタンの上に合わせる必要がありますが、 そうではなく、下により大きなボタンを押せるようにしたいという需要がでてきま…