Vueを使用してネイティブアプリをセットアップ、ビルド、およびデプロイする方法

序章

Vue Native は、クロスプラットフォームのモバイルネイティブアプリケーションを提供するように設計されたJavascriptフレームワークです。これは、 ReactNativeプロジェクトに触発されています。

Vue Nativeは元々、 React-Vue のフォークでした。これは、開発者が同じコードベースでVueとReactを記述できるようにするコンパイラーです。

このチュートリアルでは、VueNativeで利用可能なAPIとコンポーネントについて学習するためのアプリケーションを構築します。

作成したアプリケーションは、GiphyプラットフォームでトレンドGIFを表示します。 Giphy API は、各トレンドgifに関連付けられたgif画像、タイトル、およびタイプを取得するために使用されます。画像と詳細は、ScrollView、Text、ImageなどのVueネイティブコンポーネントを使用して表示されます。

注：このチュートリアルの最後に記載されているデプロイプロセスはAndroid固有です。ただし、このプロセスは、iOSの展開に関心のある人にとってはまだ教育的である可能性があります。

前提条件

このチュートリアルを完了するには、次のものが必要です。

Node.jsはローカルにインストールされます。これは、Node.jsのインストール方法とローカル開発環境の作成に従って実行できます。このチュートリアルには、ノード6.0.0以降が必要です。
npm （Nodeにパッケージ化されています）やYarnなどのノードパッケージマネージャー。このチュートリアルでは、npmを使用します。 yarnを使用する場合は、これらの手順に置き換える必要があります。
JavaScriptとVueに関する知識も役立ちます。公式のVueドキュメントに従って、Vueのコアコンセプトとコンポーネントのいくつかに精通することができます。
Giphy APIを使用するには、Giphyアカウントを作成またはログインする必要があります。

Expo は、新しいアプリケーションのビルドと実行に使用されます。 Expoは、AndroidおよびiOSアプリケーションを構築するためにReactNativeを中心に構築されたオープンソースのツールチェーンです。カメラやストレージなどのシステム機能へのアクセスを提供します。

expo-cliをまだグローバルにインストールしていない場合は、ターミナルで次のコマンドを実行できます。

npm install --global [email protected]

注：後でアプリをデプロイする場合は、Expoアカウントが必要になります。

ステップ1—プロジェクトの設定

まず、プロジェクトを設定し、いくつかの依存関係をインストールする必要があります。 VueネイティブCLIは、アプリケーションのブートストラップに使用されます。

npxを使用してターミナルで次のコマンドを実行し、vue-gifsの新しいプロジェクトを初期化します。

npx [email protected] init vue-gifs

このコマンドを実行すると、ExpoCLIを使用してこのプロジェクトのアプリケーションがブートストラップされます。

iOSおよびAndroidプラットフォーム用にビルドするには、package.jsonファイルのscriptsオブジェクトを更新します。

package.json

{
  "name": "vue-gifs",
  "main": "node_modules/expo/AppEntry.js",
  "private": true,
  "scripts": {
    ...
    "build:ios": "expo build:ios",
    "build:android": "expo build:android",
  },
  ...
}

次に、app.jsonファイルのsdkVersionを更新して、package.jsonのExpoバージョンと一致させます。 app.jsonファイルを開き、以下のスニペットのように更新します。

app.json

{
  "expo": {
    "name": "vue-gifs",
    "description": "This project is really great.",
    ...
    "sdkVersion": "37.0.3",
    ...
  }
}

注：このチュートリアルのテスト時には、VueNativeCLIにはReactNativeバージョン37.0.1とExpoバージョン37.0.3が必要です。後日、app.jsonおよびpackage.jsonファイルを手動で変更し、npm installを実行する必要がある場合があります。 SDK のアップグレードについては、Expoのドキュメントを参照してください。

プロジェクトを設定したので、アプリケーションのテストを開始する準備が整いました。

ステップ2—モバイルでのテスト

モバイルでアプリケーションをテストするために、ExpoCLIはアプリケーションをテストするためのさまざまな方法を提供します。 1つ目は、アプリケーションの実行後に生成されるURLを使用することです。このURLにモバイルブラウザでアクセスして、アプリケーションをテストできます。

vue-gifsプロジェクトディレクトリにいることを確認し、npm startを実行してアプリケーションを起動します。

npm start

Expoは通常、:19002でアプリケーションを起動するため、 http：// localhost：19002 にアクセスして、ブラウザーでExpoDevToolsを表示します。開発ツール内で、プレビューリンクをSMSまたは電子メールとして携帯電話に送信できます。

外部トンネル、LAN、またはローカル接続の3つの接続オプションのいずれかを選択できます。ローカル接続の場合、携帯電話と仕事用PCは同じネットワークに接続する必要がありますが、トンネルはすべての場合に機能します。

次に使用できるテスト方法は、 Expo MobileAppをダウンロードすることです。 AppleAppStoreとAndroidPlayStoreの両方で見つけることができます。 iOSでは、アプリをインストールした後、カメラを開き、ブラウザバージョンのアプリケーションからQRコードをスキャンして、携帯電話で実行します。 Androidでは、Expoアプリを直接使用してQRコードをスキャンし、アプリケーションを実行できます。その後、アプリケーションがモバイルデバイスに表示されます。

モバイルデバイスでテストするための別のオプションは、エミュレーターまたはシミュレーターを使用することです。 macOSでAndroidStudioまたはXcodeを使用すると、それぞれのプラットフォーム用のエミュレーターまたはシミュレーターを起動できます。選択したプラットフォーム用のツールをダウンロードしてインストールします。iOSの場合はXcode、Androidの場合はAndroidStudioです。インストール後、コマンドを実行してアプリケーションを起動します。

iOSの場合、次を実行します。

npm run ios

Androidの場合、次を実行します。

npm run android

アプリをテストするためのさまざまなオプションを検討したので、アプリケーションをビルドする準備が整いました。

ステップ3—Giphyアプリケーションを作成する

次のステップは、 GiphyDeveloperプラットフォームでアプリを作成することです。

開発者アカウントのダッシュボードには、アプリの作成ボタンがあります。ボタンをクリックすると、SDKまたはAPIのいずれかを選択できます。このチュートリアルでは、APIで十分です。

次に、次のステップ、アプリの作成の順にクリックします。アプリケーションに関する詳細を入力します。

アプリを作成すると、新しいアプリケーションがAPIキーとともにダッシュボードに表示されます。このキーは、Giphyにリクエストを送信するときに使用されます。

GiphyのJavascriptSDK は、Giphyサービス自体にリクエストを送信するために使用されます。 vue-gifsディレクトリから次のコマンドを実行して、パッケージをインストールします。

npm install --save [email protected]

これで、プロジェクトはこのSDKを使用してGiphyAPIを使用する準備が整いました。

ステップ4—アプリコンポーネントを構築する

このステップでは、アプリコンポーネントをビルドします。ルートフォルダにあるApp.vueファイルを開き、以下のスニペットのように更新します。

App.vue

<template>
    <view>
        <scroll-view class="scroll-view">
            <!-- TODO: Create gif item and header -->
            <view class="loading-container" :style="{flex: 1, justifyContent: 'center'}" v-if="loading">
              <activity-indicator size="large" color="#0000ff"></activity-indicator>
            </view>
        </scroll-view>
    </view>
</template>

<script>
  import Giphy from 'giphy-js-sdk-core';
  const client = Giphy('GIPHY_API_KEY');

  export default {
    name: 'App',
    data() {
      return {
        gifs: [],
        loading: true,
      };
    },
    async created() {
      const response = await client.trending('gifs', {limit: 20});
      this.gifs = response.data;
    },
  };
</script>

<style>
    .scroll-view {
        padding-top: 20px;
        padding-bottom: 30px;
    }
    .loading-container {
        height: 600px;
    }
</style>

上記のスニペットでは、Appコンポーネントは、コンポーネントの要素を格納するscrollviewコンポーネントをレンダリングします。 activityindicatorのみが表示されます。これは、APIの呼び出しが完了すると、gifのリストに置き換えられます。

Giphyクライアントは、開発者ダッシュボードから取得したAPIキーを使用してインスタンス化されます。プレースホルダー文字列は必ずAPIキーに置き換えてください。 trendingメソッドを呼び出すと、Giphyトレンドエンドポイントが呼び出されます。最初に提供されるパラメーターはgifsです。これは、gifsまたはstickersのいずれかのトレンドアイテムを返す必要があることを示します。 2番目のパラメーターは、limit、offset、rating、fmt（フォーマット）などのオプションのパラメーターを提供するオブジェクトです。

このコードで使用される唯一のパラメーターはlimitパラメーターであり、結果を20アイテムに制限します。この呼び出しは、コンポーネントのcreatedライフサイクルで行われます。最後に、gifリストを使用して、返された結果をレンダリングします。

リロード後、アプリケーションはアクティビティインジケータを表示する必要があります。

アプリコンポーネントを作成したので、gifアイテムコンポーネントを作成する準備が整いました。

ステップ5—Gifアイテムコンポーネントを構築する

各gifアイテムは、Viewコンポーネントを使用して表示されます。 View コンポーネントは、フレームワークの重要な構成要素です。フレックスボックス、スタイリング、アクセシビリティを使用したレイアウトをサポートしています。各アイテムには、gif、タイトル、およびタイプが表示されます。

ルートフォルダにcomponentsという名前のフォルダを作成します。 componentsディレクトリ内に、GifItem.vueという名前のファイルを作成し、次のコードを追加します。

components / GifItem.vue

<template>
  <view class="container">
    <image class="img" :source="{uri: `${gif.images.original.url}`}" style="max-width:100%;"/>
    <text class="title">{{titleCase(gif.title)}}</text>
  </view>
</template>

<script>
export default {
  name: "GifItem",
  props: ["gif"],
  methods: {
    titleCase(text) {
      const textArray = text.split(" ");
      return textArray
        .map(text => {
          const trimmedText = text.trim();
          return `${trimmedText[0].toUpperCase()}${trimmedText.slice(1)}`;
        })
        .join(" ");
    }
  }
};
</script>

<style>
.container {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-bottom: 30px;
  position: relative;
}
.img {
  height: 200px;
  width: 300px;
}
.title {
  font-size: 14px;
  font-weight: 500;
  margin-top: 7px;
}
</style>

Image コンポーネントは、各gifのソースを表示するために使用され、 Text コンポーネントは、gifタイトルを表示するために使用されます。 Imageコンポーネントは、uriプロパティを持つオブジェクトであるsource小道具を取ります。

titleCaseメソッドは、各gifのタイトルを取得し、テキスト内の各単語の最初の文字を大文字にして、タイトルケースのテキストを返します。 GifItemコンポーネントは、単一の支柱gifを取ります。

以下のスニペットを使用して、App.vueファイルを更新して新しいGifItemを含めます。

App.vue

<template>
    <view>
        <scroll-view class="scroll-view">
            <gif-item v-for="gif in gifs" :gif="gif" :key="gif.id" v-if="!loading"/>
            <view class="loading-container" :style="{flex: 1, justifyContent: 'center'}" v-if="loading">
                <activity-indicator size="large" color="#0000ff"></activity-indicator>
            </view>
        </scroll-view>
    </view>
</template>

<script>
  import Giphy from 'giphy-js-sdk-core';
  const client = Giphy('GIPHY_API_KEY');

  import GifItem from './components/GifItem';

  export default {
    name: 'App',
    data() {
      return {
        gifs: [],
        loading: true
      };
    },
    async created() {
      const response = await client.trending('gifs', {limit: 20});
      this.gifs = response.data;
      this.loading = false;
    },
    components: {GifItem}
  };
</script>

<style>
    .scroll-view {
        padding-top: 20px;
        padding-bottom: 30px;
    }
    .loading-container {
        height: 600px;
    }
</style>

Expoアプリでアプリケーションを開くと、アプリはリストに積み上げられたgifを表示します。

ローカルアプリケーションがgifのリストを表示していない場合は、コードがこのチュートリアルのスニペットと一致していること、およびGiphyAPIキーが有効であることを確認してください。

ステップ6—ヘッダーコンポーネントの構築

アプリケーションがトレンドGIFのリストを取得して表示できるようになったので、アプリケーションのコンテキストを提供するヘッダーを含めましょう。ビューコンポーネントは、アプリケーションのヘッダーとして機能する領域を作成するために使用されます。

componentsディレクトリ内にheader.vueというファイルを作成し、以下のコードで更新します。

components / header.vue

<template>
    <view class="header-container">
        <text class="header">Trending</text>
    </view>
</template>

<script>
  export default {
    name: 'header.vue'
  };
</script>

<style scoped>
    .header-container {
        background-color: rgba(0, 0, 0, 0.05);
        display: flex;
        justify-content: center;
        padding-top: 15px;
        padding-bottom: 15px;
        border-bottom-color: aquamarine;
        border-bottom-width: 1px;
        margin-top: 20px;
    }
    .header {
        font-size: 16px;
        color: black;
        opacity: 0.8;
        font-weight: 600;
        text-align: center;
    }
</style>

次に、headerコンポーネントをAppコンポーネントに追加します。これにより、アプリケーションの上部にヘッダーが表示されます。 App.vueファイルを更新して、Headerコンポーネントを含めます。

App.vue

<template>
    <view>
        <header/>
        <scroll-view class="scroll-view">
            ...
        </scroll-view>
    </view>
</template>

<script>
  import Giphy from 'giphy-js-sdk-core';
  const client = Giphy('GIPHY_API_KEY');

  import GifItem from './components/GifItem';
  import Header from './components/header';

  export default {
    name: 'App',
    data() {
     ...
    },
    async created() {
      ...
    },
    components: {GifItem, Header}
  };
</script>

<style>
  ...
</style>

アプリケーションが更新されると、ヘッダーがアプリケーションの上部に追加されます。

Vue Nativeが提供するコンポーネントは、トレンドGIFのリストをレンダリング、順序付け、および表示するために必要なすべての作業を実行しました。

ステップ7— Androidへのアプリケーションのデプロイ（オプション）

注：これは、チュートリアルを完了するために必要ではないオプションの手順です。これは、プロジェクトの作成からアプリストアの送信までのワークフローに関する教育目的で検討する必要があります。

このチュートリアルの最後のステップは、アプリケーションをAndroidPlayストアにデプロイすることです。

まず、app.jsonを更新して、Android固有のプロパティを含める必要があります。 app.jsonファイルを開き、ファイルを更新してandroidフィールドを含めます。

app.json

{
  "expo": {
    ...
    "android": {
      "package": "com.vue.gifs"
    }
  }
}

android.packageフィールドは、アプリストアでパッケージを表す一意の値です。パッケージの命名規則について詳しくは、こちらをご覧ください。

ファイルを更新した後、ターミナルウィンドウでvue-gifsディレクトリから次のコマンドを実行します。

npm run build:android

このコマンドは、キーストアを提供するか、新しいキーストアを生成するかを尋ねるプロンプトを表示します。既存のキーストアがある場合は、このオプションを選択するか、Expoにアプリケーション用にキーストアを生成させることができます。

完了すると、アプリケーションのダウンロードリンクが生成されます。このリンクをクリックすると、APKのダウンロードがトリガーされます。

ダウンロードしたAPKをAndroidPlayストアにデプロイするには、 PlayConsoleにアクセスしてアカウントを作成してください。続行する前に登録料を支払う必要があります。登録が完了したら、このページにアクセスし、手順に従ってアプリケーションをPlayストアにアップロードします。

結論

Vue Nativeは、Vue.jsを使用してモバイルプラットフォーム用のアプリケーションを構築するための便利なフレームワークです。 Vue NativeはReactにコンパイルされ、ReactNativeが提供するコンポーネントを使用します。執筆時点では、そのコンポーネントの一部では、実際のReactNativeコンポーネントを使用してJSXを作成する必要があります。 VueNativeはReactNativeと連携するため、公式のReactNativeドキュメントに従って詳細を確認できます。