プログラム関係の備忘録。技術系記事1000記事以上を目指すブログ
CATEGORY

nativeアプリ

  • 2020年7月7日
  • 2020年7月7日

react-nativeでアプリ内データのCSV出力機能の実装方法

react-nativeでアプリ内データをCSV出力 私が勉強がてら作っているアプリはRealmを使っているため、データのエクスポート機能が欲しいところ。そこで今回はアプリ内データをCSVファイルでデバイスのストレージに出力する機能を追加してみました。Androidでの実機確認済み。 react-nativeでアプリ内データをCSV出力するために必要なこと 必要なことは大きく3つ rn-fetch […]

  • 2020年7月5日
  • 2020年7月5日

react-nativeで初めてのnativeアプリリリース(android編)

Androidアプリのリリースを行うのは初めてでしたので、備忘録をかねて残しておきます。扱い慣れたWebとは違い全く未知の領域なので不安がありましたが、幸いネット上の情報が多く問題なく進めていくことができました。 1.GooglePlayの開発者登録を行う 1-1.Googleアカウント作成 https://accounts.google.com/signup Googleアカウントはいろいろなサ […]

  • 2020年6月30日
  • 2020年6月30日

react-nativeでRealm!!ディレクトリ構成や基本的な使い方

はじめに react nativeのソースを貪っているとrealmというパッケージを使っていて、初めて聞いたワードだったのでなんのことやらだったので、調べてみました。 Realmってなにするもの? Realm(レルム)はiOSやAndroidアプリで使えるDBで、モバイル用データベースという立ち位置のようです。 Realmの特徴 SQL文が不要 組み込みデータベース(デバイス上で動作) メモリ効率 […]

  • 2020年6月29日
  • 2020年6月29日

react-nativeでのそれっぽい最小限のUI構築

react-native-router-flux、native-baseを使ってアプリケーションの土台作り。 パッケージインストール react-native-router-fluxのインストール 私の環境では上記だけではreact-native-router-fluxでの画面遷移が上手くいかず、以下のエラーが発生。 Unable to resolve module ‘react-na […]

  • 2020年6月9日
  • 2020年6月9日

react-nativeの環境構築~Windows編~

はじめに react-nativeでの環境構築ですが、いろいろと準備することが多くてハマった際の問題切り分けが少し大変だった印象です。 まず、react-nativeでのアプリ作成にはExpoとreact-native-cliの2つがあるので、ググるときに気を付ける。前者の環境構築はかなり簡単です。 今回はWindowsでreact-native-cliを使ったアプリの環境構築手順と、Androi […]

  • 2019年9月25日
  • 2019年9月25日

create-react-appでPWA実践

はじめに Progressive Web Appsがすごいということなのでやってみました。 かつてはネイティブアプリを作る=iPhone app ならxcodeとswiftで作る。AndroidならAndroid StudioとJAVAでそれぞれ別に作るという感じでした。 それがreactのexpo cliを使えばどちらのOSにも対応したアプリが簡単に作ることができるようになりました。少し凝ったも […]

  • 2019年7月11日
  • 2019年7月16日

【mac】react native cliでのnativeアプリ開発環境構築

はじめに 公式のdocを参考に、react native cliでのnativeアプリ開発環境構築をやっていきます。 react nativeの環境構築にはお手軽なexpo cliとreact native cliがある。今回は後者で、macを使って環境構築をしていきます。 1.導入準備 mac初心者なので必要だった工程1から10まで全て書いていきます。 上記は公式docにある一番初めの手順です。 […]

  • 2019年5月6日
  • 2019年5月6日

expo CLIでのnativeアプリ開発でAndoroidシュミレーターを使うまで

ダウンロード ダウンロードは以下からhttps://developer.android.com/studio/index.html?hl=ja インストール googleにデータを送信するかどうか(任意で選択) セットアップ エミュレーターの設定 デバイスを選択します。 作成したエミュレーターを立ち上げる expoアプリからandroidエミュレーターを起動する エミュレーターが立ち上がった状態で […]

  • 2019年4月28日
  • 2020年6月14日

Expo CLIを使ってnativeアプリ開発入門編④axiosでAPI取得

はじめに 前回の記事で、ボタンを押したときに決め打ちの情報を表示させるというところをやりました。今回は郵便番号検索APIを叩いて、入力した郵便番号から住所を取得しアプリで表示するというのをやってみます。 Expo CLIを使ってnativeアプリ開発入門編③ axiosのパッケージを追加する 公式のドキュメントを読むと、fetchするだけで良いと書いてありますが、ここではaxiosを使ってAPIリ […]

  • 2019年4月27日
  • 2019年5月6日

Expo CLIを使ってnativeアプリ開発入門編③

はじめに 前回の記事 今回はもう少しアプリっぽい見た目を作るのを目的に、react nativeで用意されているいくつかのコンポーネントを使ってみます。※公式docに書いてあることを日本語でやっています。 flexを使ってコンポーネントのサイズを動的に指定する 前回用意したHeader.jsと同じように、Main.js、Footer.jsも用意することにします。ディレクトリ構成は今のところこのよう […]

  • 2019年4月26日
  • 2020年6月16日

Expo CLIを使ってnativeアプリ開発入門編②

はじめに 前回の記事はこちらExpo CLIを使ってnativeアプリ開発入門編① まだまだアプリの形としては不十分だが、react特有の書き方に馴染むためにプロジェクトを少し変更してみます。 変更点1.自作コンポーネントを追加する App.jsに新たにコンポーネントを作成してみます。 App.jsと同じ階層にsrcディレクトリを、その下にcomponentsディレクトリ、その下にHeader.j […]

  • 2019年4月26日
  • 2019年5月6日

Expo CLIを使ってnativeアプリ開発入門編①

はじめに 前回の記事で開発環境を作りました。 今回は実装部分をかるーくだけ触ってみて全体構成を少し把握するのを目的に。 開発、デバッグ方法 前回、npm startでアプリを立ち上げ、端末(ここではiPhone)を使って初期状態のプロジェクトを開くところまでやったので、まずは表示させる内容を変えてみたいと思います。 プロジェクトディレクトリ配下のApp.jsを以下に変更 初期状態のメッセージをコメ […]

  • 2019年4月25日
  • 2020年6月12日

Expo CLI(旧create-react-native-app)を使ってnativeアプリ開発環境を時短構築

はじめに Webアプリケーションを触っているなら気になるのがiOSアプリの開発、Androidアプリの開発。ネイティブアプリの作成は少しハードルが高く感じてしまいますが、Expo CLI(元はcreate-react-native-app)を使えば特定のIDEを用意せずに、クロスコンパイルが可能なアプリを簡単に作ることができるということなので、まずはやってみました。 ※この記事ではwindows1 […]