Symfoware

Symfowareについての考察blog

Ubuntu 14.40 + NativeScript Androidアプリケーションをエミュレーターで実行する

NativeScript

iOSとAndroidのネイティブアプリを作れるとのこと。
Ubuntu 14.04で動かしてみます。




環境の準備



こちらを参考にしました。
Set Up the NativeScript CLI on Linux

・Ubuntu 14.04 LTS
・Node.js 0.10.26 or a later stable official release except Node.js 0.10.34
・G++ compiler
・JDK 7 or a later stable official release
・Apache Ant 1.8 or later
・Android SDK 19 or later

上記が必要なのですが、使っている端末が以前Cordova(コルドバ)が動く
環境を作成したもので、ひと通り揃っています。

Cordova(コルドバ)チュートリアル1 Cordovaプロジェクトの作成
Ubuntu 14.04にAndroid SDKをインストールする(Cordova向け)
Cordova(コルドバ)チュートリアル2 Cordovaプロジェクトのビルドとエミュレーターの実行

こちらの手順で、動作環境が作成できると思います。


npmでnativescriptをインストールしました。


$ sudo npm i -g nativescript








hello-world



こちらに従い、最初のアプリケーションを動かしてみます。

Create New Project


tnsコマンドでプロジェクトを作成
実行時、匿名で情報を送ってよいか尋ねられます。
開発に貢献するため、「y」を選択しました。


$ tns create hello-world
Do you want to help us improve Telerik NativeScript by automatically sending anonymous usage statistics?
We will not use this information to identify or contact you. You can read our official Privacy Policy at
http://www.telerik.com/company/privacy-policy (y/n): y
Project hello-world was successfully created




プロジェクトフォルダに移動。
androidエミュレーターを起動します。


$ cd hello-world
$ tns platform add android
$ tns run android --emulator





エラーになりました。


Could not find an emulator image to run your project.




どうも、実行するエミュレーターの名前を引数で指定しないといけないようです。
「test」という名前でエミュレーターを作成していたので

603_01.png


ここを参考に、--avdオプションをつけて実行。


$ tns run android --emulator --avd test




動きました。

603_02.png


「TAP」をクリックするとカウントが減っていきます。

603_03.png


最後はこんな感じになります。

603_04.png






Build Something Awesome



チュートリアルを進めます。

hello-world/app/appに「main-page.xml」というファイルがあると思います。
ここと同じ階層に「tasks.xml」というファイルを作成。

以下の内容を記載します。


  1. <Page loaded="onPageLoaded">
  2.     <GridLayout rows="auto, *">
  3.         <StackLayout orientation="horizontal" row="0">
  4.             <TextField width="200" text="{{ task }}" hint="Enter a task" id="task" />
  5.             <Button text="Add" tap="add"></Button>
  6.         </StackLayout>
  7.         <ListView items="{{ tasks }}" row="1">
  8.             <ListView.itemTemplate>
  9.                 <Label text="{{ name }}" />
  10.             </ListView.itemTemplate>
  11.         </ListView>
  12.     </GridLayout>
  13. </Page>




画面はxmlで定義するようです。
xamlやjavafxをちょっと触ったことがあるので、なんとなく感覚はつかめました。



同じ階層に「tasks.js」を作成。
内容に以下を記載します。


  1. var observableModule = require("data/observable");
  2. var observableArray = require("data/observable-array");
  3. var viewModule = require("ui/core/view");
  4. var tasks = new observableArray.ObservableArray([]);
  5. var pageData = new observableModule.Observable();
  6. var page;
  7. exports.onPageLoaded = function(args) {
  8.     page = args.object;
  9.     pageData.set("task", "");
  10.     pageData.set("tasks", tasks);
  11.     page.bindingContext = pageData;
  12. };
  13. exports.add = function() {
  14.     tasks.push({ name: pageData.get("task") });
  15.     pageData.set("task", "");
  16.     viewModule.getViewById( page, "task" ).dismissSoftInput();
  17. };



「MVVM」というパターンに基づく設計のようです。


「app.css」に以下の内容を追記。


  1. label {
  2.     margin: 15;
  3. }
  4. textfield {
  5.     margin: 15;
  6. }




「app.js」を編集し、内容を以下のように変更します。


  1. var application = require("application");
  2. application.mainModule = "app/tasks";
  3. application.start();





エミュレーターを起動。


$ tns run android --emulator --avd test




テキストの入力欄とボタンが表示されます。

603_05.png


適当に入力して「Add」をクリック。

603_06.png


リストに追加されました。

603_07.png


ボタンの文字が大きすぎるので、cssの一部を変更します。


  1. button {
  2.     font-size: 26;
  3.     horizontal-align: center;
  4. }




xml + cssで画面レイアウトを定義できて便利です。

603_08.png


関連記事

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

  1. 2015/03/23(月) 23:50:56|
  2. 備忘録
  3. | トラックバック:0
  4. | コメント:0
  5. | 編集
<<AWS Elastic BeanstalkでCodeIgniter 3を動作させる | ホーム | Google App Engine(GAE)でCodeIgniter 3を動かす>>

コメント

コメントの投稿


管理者にだけ表示を許可する

トラックバック

トラックバック URL
http://symfoware.blog68.fc2.com/tb.php/1698-02206531
この記事にトラックバックする(FC2ブログユーザー)