Tableau Mobile Bootstrap React Nativeを利用してMacで素敵オリジナルiOSアプリをつくる
スクラッチでアプリ開発するのは好きだけど、時間ないのよね~な方に、何かテンプレートほしぃわ~な方に、まずは最低限機能が入った素敵Bootstrapはいかがかしら。
データをVisualizationしたTableauのダッシュボードをスマホで見るには、ふつうのブラウザ、Tableau Mobileアプリ、そして自作アプリ、という方法があります。素敵カワイイがテーマのnoteなので自作しちゃいましょう。
・・・とここまでは前回と同じくだり。
Android開発も堪能したので、iPhoneアプリも同じコードで動かしちゃいましょう。せっかくReact Nativeですしね♡
レシピ
1.GitHubのレポジトリからコードをいただきましょう
https://github.com/tableau/mobile-app-bootstrap-react-native
2.IDEを入れましょう(Visual Studio Codeを利用)
https://code.visualstudio.com/
3.XCodeを用意しましょう
4.Android Studioを用意しましょう(個人的にはどっちでもいいですケド…)
https://developer.android.com/studio
5.homebrewを入れます
https://brew.sh/
6.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で実機にデプロイしてみました。
ここにDeviceが表示されていれば接続されています。
デバイス上で「信頼されていないデベロッパ」のメッセージが出た場合は、「設定」→「一般」→「デバイス管理」から信頼してあげましょ。
実機で動くと上がりますね⤴⤴
上がったテンションで是非素敵アプリを開発してください♡
リファレンス
この記事が気に入ったらサポートをしてみませんか?