<< Visual Studioでスマホのアプリを作る(Cordova)6 | main | Visual Studioでスマホのアプリを作る(Cordova)8 >>

Visual Studioでスマホのアプリを作る(Cordova)7

 

前回の続きです。

 

Visual Studio 2017でのcordovaで、Onsen UIテンプレートの使い方です。

 

別にOnsen UIでなくてもよかったのですが、解説が一番わかりやすかったので、

その解説のまねをして、書いてみました。

 

Onsenの概要については、Onsen UIをはじめよう!のホームページを見てください。

 

まず、上のホームページからOnsen UIをダウンロードしてください。

 

 

OnsenUI-dist-2.5.X.zipのようなフォルダです。(随時バージョンアップしてます)

ダウンロードしたら、解凍しておいてください。

 

あとは、説明にあるように、

css/onsenui.css

css/onsen-css-components.min.css

onsenui.min.js

をindex.htmlの<head>にリンクしていきます。

 

 

上のように配置してください。

CSSに追加の仕方は、ソリューションエクスプローラの

CSSフォルダを右クリックして、追加、既存の項目を選んでください。

 

 

最初にダウンロードした、OnsenUIフォルダのCSSフォルダの

onsen-css-components.min.cssを選んで追加ボタンを押してください。

続いて、同様にonsenui.cssも追加を行ってください。

 

 

同様に、scripsも新規フォルダの作成、

 

 

ここでは、一応、frameという名前をつけてください。(ほんとは何でもいいです)

 

前と全く同じで、作ったframeフォルダに、ダウンロードした、OnsenUIフォルダのjsフォルダの

onsenui.min.jsを追加してください。

 

 

あとは、Onsen-UIのコードを書くだけです。

 

Onsenの解説のとおり、前々回つくったものに付け加えてみます。

 

 

        <link rel="stylesheet" href="css/onsenui.css">
        <link rel="stylesheet" href="css/onsen-css-components.min.css">

        <script src="scripts/frame/onsenui.min.js"></script>

 

では、最初に登録した、onsenui.cssとonsen-css-components.min.cssをリンクして

onsenui.min.jsを実行します。

 

        <ons-page>
            <ons-toolbar>
                <div class="center">メモ帳</div>
            </ons-toolbar>

 

<ons-page>はひとつのページのかたまりの始めを表します。

<ons-toolbar>でツールバーを作ります。

 

                <ons-button modifier="large" id="writeFile">ファイル保存</ons-button><br><br>
                <ons-button modifier="large" id="readFile">ファイル呼込</ons-button>

 

で、Onsen UIのボタンを作っています。

 

</ons-page>

 

でページの終わりを表します。

 

実行すると、次のようになります。

 

 

(上では、タイトルが左よせになっていますが、androidの場合はデフォルトで左寄せになるため

中央になりません。解決策は見つけ次第お知らせします。iPhoneでは大丈夫だと思います。)

なんとなく、アプリっぽくなってきました。

 

Onsenでは、かなりサンプルも充実していますので、

それを自分に合わせて改変すれば、かなりのものができますし

プログラムの初心者でも、スマホのアプリが作れると思います。

 

まとめに、最後は、自分用にカスタマイズしたメモ帳のプログラムを載せておきます。

ちょっと、修正すればだれでも、自分用のアプリになるようにする予定です。

 

次回その8につづく

 

 

JUGEMテーマ:プログラミング

| Cordova | 15:24 | comments(0) | trackbacks(0) |
Comment









Trackback
url: トラックバック機能は終了しました。

11
--
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
--
>>
<<
--
Profile
New entries
Archives
Categories
Recent comment
カウンター


今日
昨日
レンタルサーバ/プロバイダー




ファッション
カタログ通販ベルーナ(Belluna)

イマージュ - IMAGEアウトレットセール
yahoo・その他


買い物
ビックカメラ.com



Mobile
qrcode
Links
Others
無料ブログ作成サービス JUGEM