<< C#初心者入門Visual Studio2017改訂版4 | main | Visual Studioでスマホのアプリを作る(Cordova)5 >>

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

 

前回のスマホのアプリを作る3からずいぶん時間があいてしまいました。

実は、Visual Studio Community 2017を新しくインストールして、

使い方に慣れるのに苦労してしまいました。

新しければ、いいものではありませんでした。

 

なので、途中半端になっていた、Cordovaの続きです。

(基本的には、Visual Studio 2015と2017で違いはありません。

ただ、DebugでRippleエミュレータはプラウザシュミレータに代わっています。また、

onsen UIのテンプレートがありません)

 

今回の仕様としては、

ボタンを押すと電話番号を表示する。

だけです。

 

ですが、まったく簡単なプログラムですので、作る必要があるのか自分でも疑問ですが、

高齢者には、自分の電話番号を聞かれても、とっさに出てきませんし、

スマホのどこに書いてあったかをとっさに思いだせません。ワンタッチで表示できれば、それなりに便利です。

 

ほんとは、Cordovaをつかわなくても、html、JavaScriptだけで十分できます。

けど、プログラムに慣れるのとオンリーワンのアプリだと割り切ってつくってみます。

 

スマホのアプリを作る2で説明したように

index.html

index.css

index.js

を修正してつくります。

 

スマホのアプリを作る2で作ったものを修正して作ってください。

 

index.html

 

 

17行目で、

<p id="test" class="ccstest"></p>

を作ってください。

 

index.css

 

 

23から25行目で表示する文字の色を指定します。

 

index.js

 

 

16行目で

document.getElementById("aaa").addEventListener("click", hyouji);

ボタンが押されたときhyoji()を実行する。

 

27から29行目で

   function hyouji() {
        test.innerHTML = "あなたの電話番号は" + "<br>" + "999−9999−9999です";
    };

押されたときの処理を書く。

ただし、"999−9999−9999です"は自分の電話番号を入れてください。

 

デバックでデバイスをを選び、実行しスマホに下のように出れば成功です。

(実機でのデバックの仕方は、スマホのアプリを作る3を参考に行ってください。)

 

下は、スマホ画面のハードコピーです。

ボタンを押すと電話番号が表示されます。

 

 

なお、実機でのデバックの終了は、スマホの戻るボタンで終了させてください。

もちろん、実行ファイル(インストール済み)もできています。

 

 

 

必要なアプリは、ほとんどダウンロードできるスマホですが、

自分でつくるのも楽しいのではないでしょうか?

 

また、本格的にアプリを作るには、Ionic、OnsenなどのUI(ユーザーインターフェイス)があるようです。

 

その5に続きます。

 

 

 

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

| Cordova | 10:56 | comments(0) | trackbacks(0) |
Comment









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

07
--
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
31
--
>>
<<
--
Profile
New entries
Archives
Categories
Recent comment
カウンター


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




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

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


買い物
ビックカメラ.com



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