CordovaでVue2+OnsenUIのHelloWorld

モバイルアプリ開発でVue2+OnsenUIがマイブーム？です。そこで、Cordova + Vue2 + OnsenUIでOnsenUIのサンプルプログラムのhello Worldを動かすまでに少し苦労したので、今後やり方を忘れないためにφ(..)メモメモ

 

環境

  • node.js : v6.9.2
  • npm : 3.10.9
  • cordova : 7.0.1
  • macOS Sierra 10.12.5
    (Windowsユーザーとはいろいろ違うかもしれないです)
  • 実行環境 | Android 7.0

すでにnode.jsは利用可能であるり、それを利用してcordovaがインストールされていると仮定します。こちらは、いろいろなサイトにわかりやすい解説があるので割愛させていただきます。(自分が何でインストールしたのか忘れた…。

 

はじめに

今回の目標はOnsenUIのVue2向けサンプルページにあるHello Worldアプリを作成するところまでです。とりあえず、Vue+OnsenUIの組み合わせで動かす事が目的なので、あんまり深く理解してないです。とりあえず動いた〜って感じです。

 

環境構築

①cordovaのプロジェクトの作成

作業を行いたいディレクトリに移動して以下のコマンドでプロジェクトの作成を行います。

# cordova create プロジェクトのディレクトリ名 Androidアプリのパッケージ名 プロジェクト名
cordova create Co_sample com.takunoko.Co_sample Co_sample

作成されたディレクトリに移動すると、以下のような感じに必要なファイルが作成されていると思います。

 

②npmを用いてOnsenUIやVueを取ってくる

作業ディレクトリ(今回だとCo_sample)に移動して以下のコマンドで利用するパッケージ類を取得します。

npm install onsenui vue vue-onsenui

(–saveオプションを付けると、package.jsonに記録が残るそうです。)

これで、作業ディレクトリにnode_modulesディレクトリが作成され、それ以下にインストールしたパッケージが追加されました。

ちなみに、自分が実行した環境(2017/6/30)では、onsenui@2.4.2, vue@2.3.4, vue-onsenui@2.0.0でした。

ここにあるファイル(***.jsなど)をhtmlから呼び出してもダメみたいなので、必要なファイルだけwww以下に移動します。面倒であれば、node_modulesごと移動してしまってもいいかもしれません。

(作業ルートディレクトリに移動した状態で…)

# わかりやすいように適当なディレクトリを作成
mkdir www/node_modules_copy
# 必要なものをwww以下にコピー
cp -r node_modules/onsenui node_modules/vue node_modules/vue-onsenui www/node_modules_copy
③index.htmlの編集

公式サイトにあるサンプルプログラムを持ってきて、index.htmlを編集します。
この際に、scriptタグ内に直接ソースコードが記述されていると以下のように怒られた
(Refused to execute inline script because it violates the following Content Security Policy directive: “default-src ‘self’ data: gap: https://ssl.gstatic.com ‘unsafe-eval'”. Either the ‘unsafe-inline’ keyword, a hash (‘sha256-sRwF8sEGZoFihbXcPkvXA7zEsoJSub5l6rKxJ+G4Dic=’), or a nonce (‘nonce-…’) is required to enable inline execution. Note also that ‘script-src’ was not explicitly set, so ‘default-src’ is used as a fallback.)
ので、scriptの部分のみ別ファイルに分けます。

また、cssやjsのリンクをnode_modulesからコピーしたディレクトリに書き換えます。
以下が作成したソースです。scriptタグの前に”<“は諸事情により消してあるので、実際に実行する際には<を追記してください。

index.html

<!DOCTYPE html>
<html>
    <head>
        <meta http-equiv="Content-Security-Policy" content="default-src 'self' data: gap: https://ssl.gstatic.com 'unsafe-eval'; style-src 'self' 'unsafe-inline'; media-src *; img-src 'self' data: content:;">
        <meta name="format-detection" content="telephone=no">
        <meta name="msapplication-tap-highlight" content="no">
        <meta name="viewport" content="user-scalable=no, initial-scale=1, maximum-scale=1, minimum-scale=1, width=device-width">
        <link rel="stylesheet" type="text/css" href="css/index.css">
        <title>Hello World</title>

        <!--OnsenUI + Vue-->
        <meta charset="utf-8" />
        <link rel="stylesheet" href="node_modules_copy/onsenui/css/onsenui.css">
        <link rel="stylesheet" href="node_modules_copy/onsenui/css/onsen-css-components.css">
        script src="node_modules_copy/vue/dist/vue.js"></script>
        script src="node_modules_copy/onsenui/js/onsenui.js"></script>
        script src="node_modules_copy/vue-onsenui/dist/vue-onsenui.js"></script>
    </head>
    <body>
        <div id="app"></div>
    </body>
    script type="text/javascript" src="js/main.js"></script>
</html>

index.js

var vm = new Vue({
    el: '#app',
    template:
        '<v-ons-page>\
        <v-ons-toolbar>\
        
<div class="center"> Title </div>

\
        </v-ons-toolbar>\
        

\
        <v-ons-button @click="$notification.alert(\'Hello World!\')">Click</v-ons-button>\
        

\
        </v-ons-page>'
});

(上記のファイルのインデントがうまく行ってないのは許して…)

変更点

[index.html]

  • 11-17行目
    サンプルプログラムからcssとjsの読み込み部分をコピー
    ※この際に、srcを適切に変更
  • 20行目
    bodyタグの中身をサンプルプログラムと同様のdivタグのみに
  • 22行目
    新たに作成したmain.jsの読み込みを記述。
    (サンプルそのまんまscriptタグの中に処理を書くとうまく動作しないため)

[main.js]

  • js/main.jsを作成
    main.jsの名前は適当に〜index.htmlでしっかり読み込んでいれば問題なし
  • main.jsの中身
    サンプルプログラムの最後にあるscriptタグ内に記載されているものをとりあえずそのままコピペ
  • 13行目
    $notificationがいまいち動作しませんでした。。諦めた。

④cordovaでplatformの追加

cordovaでパッケージを生成するプラットフォームを追加します。

cordova platform add android

他にもiosだのbrowserだのがあります。

 

実行

以上で準備はできたので、デバイスで実行してみます。端末とPCの接続方法については、「adb 接続」とかでググるといっぱい出てきます。コマンドラインからデバイスが接続されていることを確認して実行します。

# 端末が接続できているか確認。端末のシェルに入れたらOK
adb shell
# コンパイル＆端末での実行
cordova run android

無事に実行できるとこんな感じの画面になります。

 

まとめ

とりあえず、無事にサンプルプログラムを動かす事ができました！このやり方が正しいのか、いいのかはとりあえず考えないで…。めでたし。

今後はこれを発展させていろいろと作っていきたいと思います！

 

参考サイト

CordovaでHTML5ハイブリッドアプリ開発 – Android編 | http://cordovaandroid.saetl.net/process2_2.html

Vue 2向けOnsen UI 2ガイド – Onsen UIフレームワーク – Onsen UI | https://ja.onsen.io/v2/docs/guide/vue/index.html

 

By たくのこ | 2017年7月2日 | Android, JavaScript, OnsenUI, Vue, 技術系 | No Comments |

コメントを残す

メールアドレスが公開されることはありません。 ※ が付いている欄は必須項目です

このサイトはスパムを低減するために Akismet を使っています。コメントデータの処理方法の詳細はこちらをご覧ください。