Tableau Mobile Bootstrap React Nativeを利用してMacで素敵オリジナルiOSアプリをつくる

スクラッチでアプリ開発するのは好きだけど、時間ないのよね～な方に、何かテンプレートほしぃわ～な方に、まずは最低限機能が入った素敵Bootstrapはいかがかしら。
データをVisualizationしたTableauのダッシュボードをスマホで見るには、ふつうのブラウザ、Tableau Mobileアプリ、そして自作アプリ、という方法があります。素敵カワイイがテーマのnoteなので自作しちゃいましょう。

・・・とここまでは前回と同じくだり。

Android開発も堪能したので、iPhoneアプリも同じコードで動かしちゃいましょう。せっかくReact Nativeですしね♡

レシピ

１．GitHubのレポジトリからコードをいただきましょう
　　https://github.com/tableau/mobile-app-bootstrap-react-native
２．IDEを入れましょう（Visual Studio Codeを利用）
　　https://code.visualstudio.com/
３．XCodeを用意しましょう
４．Android Studioを用意しましょう(個人的にはどっちでもいいですケド…)
　　https://developer.android.com/studio
５．homebrewを入れます
　　https://brew.sh/
６．Node, Watchman, React Nativeをいれましょう

brew install node
brew install watchman
npm install -g react-native-cli

環境確認

こちらが私のお遊びMacbookマシンの環境です。

GitHubレポジトリからコードをダウンロードしてあるのでそこのパスまで移動してから、話しかけます（＝コマンドラインを流します）

react-native info

料理（コーディング）開始～

GitHubのレポジトリからダウンロードしたコードを見ると、SRCフォルダにメインのスクリプトが入っています。
Visual Studio Codeを利用してどんどんカスタマイズしていきます。
ここではいったんデフォルトで実行しておきます。

試食（シミュレーターで実行）

いよいよ実行！

今回はXCodeのシミュレーターでそのまま表示してしまいます。

react-native run-ios

はい、これでビルドされて配置されてシミュレーターが実行します。

Androidのときも思ったケド…かわいい。

あとはアプリにコードを足してどんどん素敵にするだけですね♪

実食（リアルデバイスで実行）

Androidのときはお約束の(？)7回クリック開発者モードに設定しましたが、iPhoneではこちらのインストラクションどおりCodeSignしてXCodeで実機にデプロイしてみました。

Running On Device 揃 React Native

ここにDeviceが表示されていれば接続されています。

デバイス上で「信頼されていないデベロッパ」のメッセージが出た場合は、「設定」→「一般」→「デバイス管理」から信頼してあげましょ。

実機で動くと上がりますね⤴⤴

上がったテンションで是非素敵アプリを開発してください♡

リファレンス

tableau/mobile-app-bootstrap-react-native

Running On Device 揃 React Native