Symfoware

Symfowareについての考察blog

Phonon + Riot + axiosでajax通信のサンプルプログラム

・Cordova
・Phonon Framework
・Riot

この組み合わせでのアプリケーション開発を試しています。
Cordova + Phonon + Riotでサンプルアプリケーションを実行する


今回は、ajax通信でサーバーからデータを取得。
結果をリスト表示してみようと思います。



axios



Riotでajax通信は以前試してみました。
Riot ajaxで取得したjsonデータをテーブルに表示する(axios使用)

今回もaxiosを使用してみようと思います。


使用しているフレームワークへのリンクはこちら。
Phonon Framework
Riot
axios

今回使用したバージョンは以下のとおりです。

Phonon Framework:v1.4.5
Riot:v3.6.1
axios:v0.16.2


axiosをダウンロードし、axios.min.jsをwww/js/axios.min.jsに配置しておきます。




サーバー側のプログラム



jsonデータを返却するプログラムはpythonのcgiで作成しました。
Python 組み込みのCGIHTTPServerやhttp.serverでcgiを動かす

適当にこんなプログラムを作成。

・cgi-bin/sample.py


  1. #!/usr/bin/env python
  2. # -*- coding:utf-8 -*-
  3. import json
  4. import cgi
  5. import cgitb
  6. cgitb.enable(display=0, logdir='./')
  7. print('Access-Control-Allow-Origin: *')
  8. print('Content-type: text/javascript; charset=UTF-8\r\n')
  9. # 送信データの先頭に「echo」をつけて返却
  10. result = [
  11.     {"id" : 1, "name" : "一番"},
  12.     {"id" : 2, "name" : "二番"},
  13.     {"id" : 3, "name" : "三番"},
  14.     {"id" : 4, "name" : "四番"},
  15.     {"id" : 5, "name" : "五番"}
  16. ]
  17. print(json.dumps(result))




実行権限を付与して、cgiサーバーを起動します。


$ chmod +x cgi-bin/sample.py
$ python3 -m http.server --cgi







アプリケーション



サンプルを見様見真似でプログラムを作成してみます。

・www/index.html


  1. <!DOCTYPE html>
  2. <html>
  3.     <head>
  4.         <meta charset="utf-8" />
  5.         <meta name="format-detection" content="telephone=no" />
  6.         <meta name="viewport" content="user-scalable=no, initial-scale=1, maximum-scale=1, minimum-scale=1, width=device-width, height=device-height" />
  7.         <link rel="stylesheet" href="css/phonon.css" />
  8.         <title>App</title>
  9.     </head>
  10.     <body>
  11.         
  12.         <!-- Panel tags go here -->
  13.         <!-- Side Panel tags go here -->
  14.         <!-- Notification tags go here -->
  15.         <!-- Dialog tags go here -->
  16.         <home data-page="true"></home>
  17.         <pagetwo data-page="true"></pagetwo>
  18.         <!-- page tags -->
  19.         <script src="tags/home.tag" type="riot/tag"></script>
  20.         <!-- scripts -->
  21.         <script src="js/riot+compiler.min.js"></script>
  22.         <script src="js/axios.min.js"></script>
  23.         <script src="js/phonon.js"></script>
  24.         <!-- our app config -->
  25.         <script src="js/app.js"></script>
  26.     </body>
  27. </html>





・www/js/app.js


  1. phonon.options({
  2.     navigator: {
  3.         defaultPage: 'home',
  4.         animatePages: true,
  5.         enableBrowserBackButton: true,
  6.     },
  7.     i18n: null
  8. });
  9. var app = phonon.navigator();
  10. app.on({page: 'home', preventClose: false, content: null});
  11. app.start();





・www/tags/home.tag


  1. <home>
  2.     <header class="header-bar">
  3.         <div class="center">
  4.             <h1 class="title">Phonon+Riot</h1>
  5.         </div>
  6.     </header>
  7.     <div class="content">
  8.         <ul class="list">
  9.             <li class="divider">一覧表示</li>
  10.             <li each={ items }>
  11.                 {id}:{name}
  12.             </li>
  13.         </ul>
  14.     </div>
  15.     <script>
  16.         var self = this
  17.         self.items = []
  18.         this.on('create', function() {
  19.             axios.get('http://192.168.1.4:8000/cgi-bin/sample.py')
  20.                 .then(function (response) {
  21.                     self.update({items : response.data})
  22.                 }).catch(function (error) {
  23.                     console.log(error)
  24.                 });
  25.             
  26.         })
  27.     </script>
  28. </home>





最終的にディレクトリの構成はこのようになります。

759_01.png


エミュレーターを起動してみると


$ cordova emulate android




動いてくれました。

759_02.png

テーマ:プログラミング - ジャンル:コンピュータ

  1. 2017/07/29(土) 18:04:56|
  2. 備忘録
  3. | トラックバック:0
  4. | コメント:0
  5. | 編集

Cordova + Phonon + Riotでサンプルアプリケーションを実行する

Cordova + Phonon Frameworkのサンプルを動かしてみました。
Cordova + Phonon Frameworkのサンプルアプリケーションをビルド

Riotと連携できるようなので、サンプルアプリケーションを動かしてみます。



サンプルのダウンロード



Phonon Framework

こちらにあるダウンロードから、githubのソースを一式ダンロードします。
https://github.com/quark-dev/Phonon-Framework/archive/master.zip

解凍した中のexamples/pizza-app-with-riotにサンプルがあります。
このサンプルを参考にしました。


Cordova + Phonon Frameworkのサンプルアプリケーションをビルド
こちらの手順同様、

dist/css/phonon.cssをwww/css/phonon.css
dist/js/phonon.jsをwww/js/phonon.js
dist/fontsディレクトリをまることwww/fontsにコピーしておきます。


加えて、

examples/pizza-app-with-riot/riot+compiler.min.jsをwww/js/riot+compiler.min.js
examples/pizza-app-with-riot/tagsをまるごとwww/tagsにコピーします。


・index.html


  1. <!DOCTYPE html>
  2. <html>
  3.     <head>
  4.         <meta charset="utf-8" />
  5.         <meta name="format-detection" content="telephone=no" />
  6.         <meta name="viewport" content="user-scalable=no, initial-scale=1, maximum-scale=1, minimum-scale=1, width=device-width, height=device-height" />
  7.         <link rel="stylesheet" href="css/phonon.css" />
  8.         <title>App</title>
  9.     </head>
  10.     <body>
  11.         
  12.         <!-- Panel tags go here -->
  13.         <!-- Side Panel tags go here -->
  14.         <!-- Notification tags go here -->
  15.         <!-- Dialog tags go here -->
  16.         <home data-page="true"></home>
  17.         <pagetwo data-page="true"></pagetwo>
  18.         <!-- page tags -->
  19.         <script src="tags/home.tag" type="riot/tag"></script>
  20.         <script src="tags/pagetwo.tag" type="riot/tag"></script>
  21.         <!-- scripts -->
  22.         <script src="js/riot+compiler.min.js"></script>
  23.         <script src="js/phonon.js"></script>
  24.         <!-- our app config -->
  25.         <script src="js/app.js"></script>
  26.     </body>
  27. </html>





・js/app.js


  1. phonon.options({
  2.     navigator: {
  3.         defaultPage: 'home',
  4.         animatePages: true,
  5.         enableBrowserBackButton: true,
  6.         templateRootDirectory: './tpl'
  7.     },
  8.     i18n: null // for this example, we do not use internationalization
  9. });
  10. var app = phonon.navigator();
  11. /**
  12. * The activity scope can be defined inside the page tag, but it is not necessary in our example.
  13. */
  14. app.on({page: 'home', preventClose: false, content: null});
  15. /**
  16. * On the second page, we define the activity scope inside pagetwo.tag
  17. * You can use readyDelay to add a small delay between the OnCreate and the OnReady callbacks
  18. * preventClose is true, so we have to define the close event (see pagetwo.tag)
  19. */
  20. app.on({page: 'pagetwo', preventClose: true, content: null, readyDelay: 1});
  21. // Let's go!
  22. app.start();





・tags/home.tag


  1. <home>
  2.     <header class="header-bar">
  3.         <div class="center">
  4.             <h1 class="title">Phonon+Riot</h1>
  5.         </div>
  6.     </header>
  7.     <div class="content">
  8.         <ul class="list">
  9.             <li class="divider">Select a pizza</li>
  10.             <li><a class="padded-list" href="#!pagetwo/margherita">Margherita</a></li>
  11.             <li><a class="padded-list" href="#!pagetwo/calzone">Cheese Calzone</a></li>
  12.             <li><a class="padded-list" href="#!pagetwo/pesto">Pesto Pizza</a></li>
  13.             <li><a class="padded-list" href="#!pagetwo/roma">Roma</a></li>
  14.             <li><a class="padded-list" href="#!pagetwo/prosciutto">Prosciutto</a></li>
  15.             <li><a class="padded-list" href="#!pagetwo/funghi">Funghi</a></li>
  16.         </ul>
  17.     </div>
  18. </home>





・tags/pagetwo.tag


  1. <pagetwo class="app-page">
  2.     <header class="header-bar">
  3.         <div class="left">
  4.             <button class="btn pull-left icon icon-arrow-back" data-navigation="$previous-page"></button>
  5.             <h1 class="title">Page Two</h1>
  6.         </div>
  7.     </header>
  8.     <div class="content">
  9.         <div class="padded-full">
  10.             <h2>Order</h2>
  11.             <p>1x Pizza: {pizza}</p>
  12.             <button class="btn negative cancel" data-order="cancel">Cancel</button>
  13.             <button class="btn btn-flat primary order" data-order="order">Order</button>
  14.         </div>
  15.     </div>
  16.     <script>
  17.         var self = this
  18.         this.pizza = ''
  19.         /**
  20.          * On this page, we define the activity events directly on the tag object with "this"
  21.          * [1] On the create callback, we add tap events on buttons. The OnCreate callback is called once.
  22.          * [2] If the user does not tap on buttons, we cancel the page transition. preventClose => true
  23.          * [3] The OnReady callback is called every time the user comes on this page,
  24.          * here we did not implement it.
  25.         */
  26.         var action = null
  27.         var onAction = function(evt) {
  28.             var target = evt.target
  29.             action = 'ok'
  30.             
  31.             if(target.getAttribute('data-order') === 'order') {
  32.                 phonon.alert('Thank you for your order!', 'Dear customer')
  33.             } else {
  34.                 phonon.alert('Your order has been canceled.', 'Dear customer')
  35.             }
  36.         }
  37.         this.on('create', function() {
  38.             document.querySelector('.order').on('tap', onAction)
  39.             document.querySelector('.cancel').on('tap', onAction)
  40.         })
  41.         this.on('close', function(self) {
  42.             if(action !== null) {
  43.                 self.close()
  44.             } else {
  45.                 phonon.alert('Before leaving this page, you must perform an action.', 'Action required')
  46.             }
  47.         })
  48.         this.on('hidden', function() {
  49.             action = null
  50.         })
  51.         this.on('hashchanged', function(pizza) {
  52.             self.pizza = pizza
  53.             self.update()
  54.         })
  55.     </script>
  56. </pagetwo>





ここまで準備出来たら、エミュレーターを起動してみます。


$ cordova emulate android




見た目は変わりありませんが、Cordova + Phonon + Riotの組み合わせで動かすことができました。

758_01.png

テーマ:プログラミング - ジャンル:コンピュータ

  1. 2017/07/29(土) 16:35:21|
  2. 備忘録
  3. | トラックバック:0
  4. | コメント:0
  5. | 編集

Cordova + Phonon Frameworkのサンプルアプリケーションをビルド

Phonon Framework

Cordovaと組み合わせてアプリケーションが作成できるようです。
Riotも使用できるのが嬉しいですね。

サンプルアプリケーションをCordovaに組み込んでみます。


Phonon Frameworkのファイル



githubからファイルを取得します。
https://github.com/quark-dev/Phonon-Framework/archive/master.zip

最低限必要になるのはjs,cssファイルが各々1つ。
fontsディレクトリのようです。

Cordovaのwwwディレクトリにコピーしていきます。


dist/css/phonon.cssをwww/css/phonon.css
dist/js/phonon.jsをwww/js/phonon.js
dist/fontsディレクトリをまることwww/fontsにコピー。


最終的にCordovaのwwwディレクトリはこのようになりました。

757_01.png



サンプルアプリケーション



ここのサンプルアプリケーションをそのまま試してみました。
Phonon Framework

・www/index.html


  1. <!DOCTYPE html>
  2. <html>
  3.     <head>
  4.         <meta charset="utf-8" />
  5.         <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:;">
  6.         <meta name="format-detection" content="telephone=no">
  7.         <meta name="msapplication-tap-highlight" content="no">
  8.         <meta name="viewport" content="user-scalable=no, initial-scale=1, maximum-scale=1, minimum-scale=1, width=device-width">
  9.         <link rel="stylesheet" type="text/css" href="css/phonon.css">
  10.         <title>App</title>
  11.     </head>
  12.     <body>
  13.         <home data-page="true">
  14.             <header class="header-bar">
  15.                 <div class="center">
  16.                     <h1 class="title">Phonon Example</h1>
  17.                 </div>
  18.             </header>
  19.             <div class="content">
  20.                 <ul class="list">
  21.                     <li class="divider">Select a pizza</li>
  22.                     <li><a class="padded-list" href="#!pagetwo/margherita">Margherita</a></li>
  23.                     <li><a class="padded-list" href="#!pagetwo/calzone">Cheese Calzone</a></li>
  24.                     <li><a class="padded-list" href="#!pagetwo/pesto">Pesto Pizza</a></li>
  25.                     <li><a class="padded-list" href="#!pagetwo/roma">Roma</a></li>
  26.                     <li><a class="padded-list" href="#!pagetwo/prosciutto">Prosciutto</a></li>
  27.                     <li><a class="padded-list" href="#!pagetwo/funghi">Funghi</a></li>
  28.                 </ul>
  29.             </div>
  30.         </home>
  31.         <!-- for the second page, Phonon will load its content. -->
  32.         <pagetwo data-page="true"></pagetwo>
  33.         <!-- scripts -->
  34.         <script type="text/javascript" src="cordova.js"></script>
  35.         <script src="js/phonon.js"></script>
  36.         <script type="text/javascript" src="js/app.js"></script>
  37.     </body>
  38. </html>




・www/js/app.js


  1. phonon.options({
  2.     navigator: {
  3.         defaultPage: 'home',
  4.         animatePages: true,
  5.         enableBrowserBackButton: true,
  6.         templateRootDirectory: './tpl'
  7.     },
  8.     i18n: null // for this example, we do not use internationalization
  9. });
  10. var app = phonon.navigator();
  11. /**
  12. * The activity scope is not mandatory.
  13. * For the home page, we do not need to perform actions during
  14. * page events such as onCreate, onReady, etc
  15. */
  16. app.on({page: 'home', preventClose: false, content: null});
  17. /**
  18. * However, on the second page, we want to define the activity scope.
  19. * [1] On the create callback, we add tap events on buttons. The OnCreate callback is called once.
  20. * [2] If the user does not tap on buttons, we cancel the page transition. preventClose => true
  21. * [3] The OnReady callback is called every time the user comes on this page,
  22. * here we did not implement it, but if you do, you can use readyDelay to add a small delay
  23. * between the OnCreate and the OnReady callbacks
  24. */
  25. app.on({page: 'pagetwo', preventClose: true, content: 'pagetwo.html', readyDelay: 1}, function(activity) {
  26.     var action = null;
  27.     var onAction = function(evt) {
  28.         var target = evt.target;
  29.         action = 'ok';
  30.         if(target.getAttribute('data-order') === 'order') {
  31.             phonon.alert('Thank you for your order!', 'Dear customer');
  32.         } else {
  33.             phonon.alert('Your order has been canceled.', 'Dear customer');
  34.         }
  35.     };
  36.     activity.onCreate(function() {
  37.         document.querySelector('.order').on('tap', onAction);
  38.         document.querySelector('.cancel').on('tap', onAction);
  39.     });
  40.     activity.onClose(function(self) {
  41.         if(action !== null) {
  42.             self.close();
  43.         } else {
  44.             phonon.alert('Before leaving this page, you must perform an action.', 'Action required');
  45.         }
  46.     });
  47.     activity.onHidden(function() {
  48.         action = null;
  49.     });
  50.     activity.onHashChanged(function(pizza) {
  51.         document.querySelector('.pizza').textContent = pizza;
  52.     });
  53. });
  54. // Let's go!
  55. app.start();





www/tplというディレクトリを作成し、pagetwo.htmlファイルに2ページめのビューの情報を記載します。

・www/tpl/pagetwo.html


  1. <pagetwo class="app-page">
  2.     <header class="header-bar">
  3.         <div class="left">
  4.             <button class="btn pull-left icon icon-arrow-back" data-navigation="$previous-page"></button>
  5.             <h1 class="title">Page Two</h1>
  6.         </div>
  7.     </header>
  8.     <div class="content">
  9.         <div class="padded-full">
  10.             <h2>Order</h2>
  11.             <p>1x Pizza: <span class="pizza"></span></p>
  12.             <p class="message"></p>
  13.             <button class="btn negative cancel" data-order="cancel">Cancel</button>
  14.             <button class="btn btn-flat primary order" data-order="order">Order</button>
  15.         </div>
  16.     </div>
  17. </pagetwo>





ここまで準備出来たらエミュレーターを起動。


$ cordova emulate android




あっさり起動してくれました。

757_02.png



Riotとの組み合わせが便利そうなので、引き続き使い方を調べてみます。

テーマ:プログラミング - ジャンル:コンピュータ

  1. 2017/07/27(木) 23:29:52|
  2. 備忘録
  3. | トラックバック:0
  4. | コメント:0
  5. | 編集

avdmanagerコマンドによるAndroidエミュレーターの作成

Android SDKをインストールしてみました。
Ubuntu 16.04にAndroid SDKをインストール

avdmanagerコマンドでAndroidエミュレーターを作成する方法がよくわからなかったので調べてみます。


まず、コマンドのヘルプを表示。


$ tools/bin/avdmanager -h

Usage:
     avdmanager [global options] [action] [action options]
     Global options:
-s --silent     : Silent mode, shows errors only.
-v --verbose    : Verbose mode, shows errors, warnings and all messages.
     --clear-cache: Clear the SDK Manager repository manifest cache.
-h --help     : Help on a specific command.

Valid actions are composed of a verb and an optional direct object:
- list             : Lists existing targets or virtual devices.
- list avd         : Lists existing Android Virtual Devices.
- list target     : Lists existing targets.
- list device     : Lists existing devices.
- create avd         : Creates a new Android Virtual Device.
- move avd         : Moves or renames an Android Virtual Device.
- delete avd         : Deletes an Android Virtual Device.





「avdmanager create avd」でエミュレーターを作成
作成時のオプションは以下のとおり。


$ tools/bin/avdmanager create avd
Error: The parameter --name must be defined for action 'create avd'

Usage:
     avdmanager [global options] create avd [action options]
     Global options:
-s --silent     : Silent mode, shows errors only.
-v --verbose    : Verbose mode, shows errors, warnings and all messages.
     --clear-cache: Clear the SDK Manager repository manifest cache.
-h --help     : Help on a specific command.

Action "create avd":
Creates a new Android Virtual Device.
Options:
-a --snapshot: Place a snapshots file in the AVD, to enable persistence.
-c --sdcard : Path to a shared SD card image, or size of a new sdcard for
                 the new AVD.
-g --tag     : The sys-img tag to use for the AVD. The default is to
                 auto-select if the platform has only one tag for its system
                 images.
-p --path    : Directory where the new AVD will be created.
-k --package : Package path of the system image for this AVD (e.g.
                 'system-images;android-19;google_apis;x86').
-n --name    : Name of the new AVD. [required]
-f --force : Forces creation (overwrites an existing AVD)
-b --abi     : The ABI to use for the AVD. The default is to auto-select the
                 ABI if the platform has only one ABI for its system images.
-d --device : The optional device definition to use. Can be a device index
                 or id.






使用できるデバイスのリストを「avdmanager list device」で表示してみます。


$ tools/bin/avdmanager list device
Available devices definitions:
id: 0 or "tv_1080p"
    Name: Android TV (1080p)
    OEM : Google
    Tag : android-tv
---------
id: 1 or "tv_720p"
    Name: Android TV (720p)
    OEM : Google
    Tag : android-tv
---------
id: 2 or "wear_round"
    Name: Android Wear Round
    OEM : Google
    Tag : android-wear
---------
id: 3 or "wear_round_chin_320_290"
    Name: Android Wear Round Chin
    OEM : Google
    Tag : android-wear
---------
id: 4 or "wear_square"
    Name: Android Wear Square
    OEM : Google
    Tag : android-wear
---------
id: 5 or "Galaxy Nexus"
    Name: Galaxy Nexus
    OEM : Google
---------
id: 6 or "Nexus 10"
    Name: Nexus 10
    OEM : Google
---------
id: 7 or "Nexus 4"
    Name: Nexus 4
    OEM : Google
---------
id: 8 or "Nexus 5"
    Name: Nexus 5
    OEM : Google
---------
id: 9 or "Nexus 5X"
    Name: Nexus 5X
    OEM : Google
---------
id: 10 or "Nexus 6"
    Name: Nexus 6
    OEM : Google
---------
id: 11 or "Nexus 6P"
    Name: Nexus 6P
    OEM : Google
---------
id: 12 or "Nexus 7 2013"
    Name: Nexus 7
    OEM : Google
---------
id: 13 or "Nexus 7"
    Name: Nexus 7 (2012)
    OEM : Google
---------
id: 14 or "Nexus 9"
    Name: Nexus 9
    OEM : Google
---------
id: 15 or "Nexus One"
    Name: Nexus One
    OEM : Google
---------
id: 16 or "Nexus S"
    Name: Nexus S
    OEM : Google
---------
id: 17 or "pixel"
    Name: Pixel
    OEM : Google
---------
id: 18 or "pixel_c"
    Name: Pixel C
    OEM : Google
---------
id: 19 or "pixel_xl"
    Name: Pixel XL
    OEM : Google
---------
id: 20 or "2.7in QVGA"
    Name: 2.7" QVGA
    OEM : Generic
---------
id: 21 or "2.7in QVGA slider"
    Name: 2.7" QVGA slider
    OEM : Generic
---------
id: 22 or "3.2in HVGA slider (ADP1)"
    Name: 3.2" HVGA slider (ADP1)
    OEM : Generic
---------
id: 23 or "3.2in QVGA (ADP2)"
    Name: 3.2" QVGA (ADP2)
    OEM : Generic
---------
id: 24 or "3.3in WQVGA"
    Name: 3.3" WQVGA
    OEM : Generic
---------
id: 25 or "3.4in WQVGA"
    Name: 3.4" WQVGA
    OEM : Generic
---------
id: 26 or "3.7 FWVGA slider"
    Name: 3.7" FWVGA slider
    OEM : Generic
---------
id: 27 or "3.7in WVGA (Nexus One)"
    Name: 3.7" WVGA (Nexus One)
    OEM : Generic
---------
id: 28 or "4in WVGA (Nexus S)"
    Name: 4" WVGA (Nexus S)
    OEM : Generic
---------
id: 29 or "4.65in 720p (Galaxy Nexus)"
    Name: 4.65" 720p (Galaxy Nexus)
    OEM : Generic
---------
id: 30 or "4.7in WXGA"
    Name: 4.7" WXGA
    OEM : Generic
---------
id: 31 or "5.1in WVGA"
    Name: 5.1" WVGA
    OEM : Generic
---------
id: 32 or "5.4in FWVGA"
    Name: 5.4" FWVGA
    OEM : Generic
---------
id: 33 or "7in WSVGA (Tablet)"
    Name: 7" WSVGA (Tablet)
    OEM : Generic
---------
id: 34 or "10.1in WXGA (Tablet)"
    Name: 10.1" WXGA (Tablet)
    OEM : Generic





前回作成した「test」というエミュレーターを削除。


$ tools/bin/avdmanager delete avd --name test




32(5.4in FWVGA)を指定して、エミュレーターを作成します。
100MのSDカードを挿入した状態にしています。


$ tools/bin/avdmanager create avd --name test --device 32 --package "system-images;android-23;google_apis;x86" --abi x86 --sdcard 100M




cordovaからエミュレーターを起動してみます。


$ cordova emulate android



756_01.png


いい感じです。

テーマ:プログラミング - ジャンル:コンピュータ

  1. 2017/07/27(木) 22:27:33|
  2. 備忘録
  3. | トラックバック:0
  4. | コメント:0
  5. | 編集

Ubuntu 16.04にCordova(コルドバ)のインストール

以前試した時から2年以上経過したので、再度手順を試してみます。
Cordova(コルドバ)チュートリアル1 Cordovaプロジェクトの作成



nodejsのインストール



nodejsとnpmをインストール。


$ sudo apt-get install nodejs npm




バージョンは4.2.6でした。


$ nodejs -v
v4.2.6




「node」で動いてくれないと後々こまるので、


$ sudo update-alternatives --install /usr/bin/node node /usr/bin/nodejs 10




これでnode -vでも起動できるようになりました。


$ node -v
v4.2.6








cordovaのインストール



npmを使用して、cordovaをインストールします。


$ sudo npm install -g cordova




バージョンは7.0.1。
前回試した時は4.2.0でしたので、随分バージョンが上がっています。


$ cordova -v
? May Cordova anonymously report usage statistics to improve the tool over time? Yes

Thanks for opting into telemetry to help us improve cordova.
7.0.1





前回同様、プログラムの雛形を作成してみます。


$ cordova create workshop com.yourname.workshop Workshop




作成されたフォルダに移動。


$ cd workshop




androidのプラットフォームを追加してみます。


$ cordova platforms add android



この辺は変更ありませんね。
次の手順。プラグインのインストールでハマりました。


$ cordova plugin add org.apache.cordova.device
Error: Registry returned 404 for GET on https://registry.npmjs.org/org.apache.cordova.device





どうも、プラグインの名称が変更されているようです。
こちらで、変更後のプラグイン名を調べます。
http://cordova.apache.org/plugins/

「org.apache.cordova.device」は「cordova-plugin-device」
「org.apache.cordova.console」は「cordova-plugin-console」に
それぞれ名称が変更されたようです。

以下のコマンドでプラグインがインストールできました。


$ cordova plugin add cordova-plugin-device
$ cordova plugin add cordova-plugin-console

テーマ:プログラミング - ジャンル:コンピュータ

  1. 2017/07/26(水) 22:41:35|
  2. 備忘録
  3. | トラックバック:0
  4. | コメント:0
  5. | 編集
前のページ 次のページ