[Vue-native] アンドロイド向けアプリを作ってみよう #1

Javascript

Vue-native

GeekyAnts/vue-native-cli
Write Native Mobile Apps using Vue. Vue Native is a wrapper around React Native APIs - GeekyAnts/vue-native-cli

以前やってコケたReact-nativeのラッパー的存在らしく、facebookも開発に協力してるのだとかなんとか。まあよくわからんのだが、ウェブアプリっぽくアンドロイドやiOS向けのアプリがつくれるということで再び手を出してみることにしました。

tkgstrator/GilemmaGame
Contribute to tkgstrator/GilemmaGame development by creating an account on GitHub.

ジレンマゲームはピュアVueで作成している(途中)ので、まあまあ少しはVueやJavascriptへの理解も進んだだろうということでチャレンジしてみた次第。

よくわからないのだが、どうもシャーマンキングがリメイクされるらしい。いろんな漫画の一話が載った冊子でしか読んだことがないのだが、面白かったので実は続きが読みたいとずっと思っていたりする。いい機会なので買ってみようかな。

環境の作成

今回はiOS向けではなくアンドロイド向けに弄ってみたので以下の記事を参考にしつつ微妙にアレンジを加えた感じです。

Vue Nativeでネイティブアプリ開発入門 - Qiita
株式会社diffeasyの日本一魅力的なプログラマー集団を作るCTO@_takeshi_24です。 普段はNuxt.jsでフロントエンド開発したり、Ruby on Railsでサーバーサイド開発したり、GCPでサーバー構築したりやっ...

yarn

npmと同じくパッケージマネージャなんだろうと勝手に思っている。

Yarn
Fast, reliable, and secure dependency management.

Node.js

yarnのページにNode.jsをインストールしろと書いてあるのでする。

Node.js
Node.js® is a JavaScript runtime built on Chrome's V8 JavaScript engine.

途中でdevtoolかなんかもインストールするかときかれたが、まあしておいて損はないかと思ってしておきました。

プロジェクトの作成

Node.jsインストール時にパスを通してくれるのでコマンドが使えるのはいいところ。

yarn global add expo-cli
yarn global add vue-native-cli
vue-native init <project>

プロジェクトが作成されるので、プロジェクトディレクトリに移動してDevToolを起動。

cd <project>
yarn start

今回はアンドロイドアプリをつくりたかったので「Run on Android device/emulator」を選択。便利なことに実機でいきなりビルドしてくれるらしい。

WebViewをつかってみる

WebViewというのはまあ簡単にいえばどっかのHPをそのままアプリにバン!!と表示するだけの機能。アプリとしての機能、ではないんだけどあればそれで便利だったりする。

作り方がわからなかったのだが「WebView vue-native」とか調べたら簡単にStackoverflowのページがヒットした。やっぱり調べるのは英語に限る。

how to make webview in vue-native
i am trying to make webview application with vue-native-cli i am trying to use web-view component with help of documents this is my page <template> ...

追加で何やらインストールする必要があるそうなので黙ってインストール。

expo install react-native-webview

例えば、Salmon Statsを表示するだけのアプリならApp.vueに以下のように書けば良い。

<template>
  <web-view :source="{uri:'https://salmon-stats.yuki.games/'}" />
</template>

<script>
import { WebView } from "react-native-webview";

export default {
  name: "SalmonStats",
  components: {
    "web-view": WebView
  }
};
</script>

<style>
.container {
  background-color: white;
  align-items: center;
  justify-content: center;
  flex: 1;
}
.text-color-primary {
  color: blue;
}
</style>

バッチリ期待通りの動作をしてくれた。

今後の展望

これだけだとまだデータを表示しているだけなので無価値のアプリである。

ここに、最低限必要な機能は以下の通り。

  • セッションキー取得機能
    • PythonとSwiftでコード自体はある程度理解しているつもりなので、まあいけそう
  • URLスキーム
    • Vue-nativeでこれが設定できないとURLスキームのHookができないのでなんとかしたいところ
  • JSONアップロード機能
    • まあなんとかなるやろっていう感じ

気が向いたら続きの記事を書いていきたいと思う、以上。

コメント

タイトルとURLをコピーしました