m_shige1979のささやかな抵抗と欲望の日々

プログラムの勉強をしながら学習したことや経験したことをぼそぼそと書いていきます

なんとなく作ったサイト

http://www.it-check-matome.info/


Github(注意すること)

https://github.com/mshige1979

cordova+onsen-uiでサンプルアプリ

cordovaをまだ、うまく使えていないので

ちょっくらみてみる

まずは初期設定

プロジェクトを作成
$ cordova create hello com.example.hello Helloworld -d
Creating a new cordova project with name "Helloworld" and id "com.example.hello" at location "/Users/matsumotoshigeharu/sample_projects/hello"
Using stock cordova hello-world application.
cordova library for "www" already exists. No need to download. Continuing.
Copying stock Cordova www assets into "/Users/matsumotoshigeharu/sample_projects/hello/www"
$
プラットフォームを追加
$ cd hello/
$ cordova platform add android
Creating android project...
Creating Cordova project for the Android platform:
	Path: platforms/android
	Package: com.example.hello
	Name: Helloworld
	Android target: android-19
Copying template files...
Project successfully created.
$
エミュレータ起動
$ cordova emulate android -d

f:id:m_shige1979:20141113202258p:plain

onsen-ui設定

もともとのwww配下のファイルを削除

f:id:m_shige1979:20141113202527p:plain

http://ja.onsen.io/より取得

f:id:m_shige1979:20141113202738p:plain

www/lib/onsenをvendorsディレクトリを作成してその配下へ配置

f:id:m_shige1979:20141113203241p:plain

画面設定

www/index.html
<!doctype html>
<html lang="en" ng-app="app">
<head>
    <meta charset="utf-8">
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="mobile-web-app-capable" content="yes">

    <title>My App</title>

    <link rel="stylesheet" href="lib/onsen/css/onsenui.css">
    <link rel="stylesheet" href="styles/app.css"/>
    <link rel="stylesheet" href="styles/onsen-css-components-blue-basic-theme.css">

    <script src="lib/onsen/js/angular/angular.js"></script>
    <script src="lib/onsen/js/onsenui.js"></script>

    <script src="cordova.js"></script>
    <script src="js/app.js"></script>
    <script>
        ons.ready(function() {
        });
    </script>

    <style>
        .item {
            padding: 10px;
            line-height: 1;
        }
        .item-thum {
            background-color: #ccc;
            width: 50px;
            height: 50px;
            border-radius: 4px;
        }
        .item-title {
            font-size: 15px;
            font-weight: 500;
        }
        .item-desc {
            font-size: 14px;
            color: #666;
            line-height: 1.3;
            margin: 4px 0 0 0;
            padding: 0 30px 0 0;
        }
        .item-label {
            font-size: 12px;
            color: #999;
            float: right;
        }
    </style>
</head>

<body ng-controller="AppController">

<ons-navigator>
    <ons-page>
        <ons-toolbar>
            <div class="center">Master Details</div>
        </ons-toolbar>

        <ons-list ng-controller="MasterController">
            <ons-list-item modifier="chevron" class="item" ng-repeat="item in items" ng-click="showDetail($index)">
                <ons-row>
                    <ons-col width="60px">
                        <div class="item-thum"></div>
                    </ons-col>
                    <ons-col>
                        <header>
                            <span class="item-title">{{item.title}}</span>
                            <span class="item-label">{{item.label}}</span>
                        </header>
                        <p class="item-desc">{{item.desc}}</p>
                    </ons-col>
                </ons-row>
            </ons-list-item>
        </ons-list>
    </ons-page>
</ons-navigator>

<ons-template id="detail.html">
    <ons-page ng-controller="DetailController">

        <ons-toolbar>
            <div class="left"><ons-back-button>Back</ons-back-button></div>
            <div class="center">Details</div>
        </ons-toolbar>

        <ons-list modifier="inset" style="margin-top: 10px">
            <ons-list-item class="item">
                <ons-row>
                    <ons-col width="60px">
                        <div class="item-thum"></div>
                    </ons-col>
                    <ons-col>
                        <header>
                            <span class="item-title">{{item.title}}</span>
                            <span class="item-label">{{item.label}}</span>
                        </header>
                        <p class="item-desc">{{item.desc}}</p>
                    </ons-col>
                </ons-row>
            </ons-list-item>

            <ons-list-item modifier="chevron" ng-click="doSomething()">
                <ons-icon icon="ion-chatboxes" fixed-width="true" style="color: #ccc"></ons-icon>
                Add a note
            </ons-list-item>
        </ons-list>

        <ons-list style="margin-top: 10px">
            <ons-list-item class="item" ng-repeat="i in [1,2,3]">
                <header>
                    <span class="item-title">Lorem ipsum dolor sit amet</span>
                </header>
                <p class="item-desc">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
            </ons-list-item>
        </ons-list>

        <br>

    </ons-page>
</ons-template>

</body>
</html>
www/js/app.js
(function(){
    'use strict';
    var module = angular.module('app', ['onsen']);

    module.controller('AppController', function($scope, $data) {
        $scope.doSomething = function() {
            setTimeout(function() {
                alert('tappaed');
            }, 100);
        };
    });

    module.controller('DetailController', function($scope, $data) {
        $scope.item = $data.selectedItem;
    });

    module.controller('MasterController', function($scope, $data) {
        $scope.items = $data.items;

        $scope.showDetail = function(index) {
            var selectedItem = $data.items[index];
            $data.selectedItem = selectedItem;
            $scope.ons.navigator.pushPage('detail.html', {title : selectedItem.title});
        };
    });

    module.factory('$data', function() {
        var data = {};

        data.items = [
            {
                title: 'Item 1 Title',
                label: '4h',
                desc: 'Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.'
            },
            {
                title: 'Another Item Title',
                label: '6h',
                desc: 'Ut enim ad minim veniam.'
            },
            {
                title: 'Yet Another Item Title',
                label: '1day ago',
                desc: 'Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.'
            },
            {
                title: 'Yet Another Item Title',
                label: '1day ago',
                desc: 'Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.'
            }
        ];

        return data;
    });
})();

あといろいろとonsen-uiと同じ構成で作成
f:id:m_shige1979:20141113210707p:plain

実機へコピー

$ cordova run android --device

android端末をUBSデバッグの状態にして接続してコマンド実行

結果

f:id:m_shige1979:20141114064321p:plain
f:id:m_shige1979:20141114064333p:plain
f:id:m_shige1979:20141114064344p:plain

所感

サンプル動かすだけだけど、結構簡単にできた。
angularjsでの動きは任せていろいろとなんか良い感じの画面を作成できるかも
cordovaのカメラとかを制御を動かすとかはちょっとわからないかも…
あとで勉強しよう

補足
Genymotion Site
はとっても速かった

参考


AngularJS + Onsen UIで始めるPhoneGapアプリケーション : アシアルブログ

HTML5モバイルアプリをもっと速く、もっと美しく | Onsen UI

広告を非表示にする