<< Visual Studioでスマホのアプリを作る(Cordova)7 | main | HTML5のWebローカルファイル(コルドバで) >>

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

 

前回からの続きです。

 

前回までで、一通りの説明は終わりましたので、

あとは、自由に好きなプログラミングをするだけです。

 

今回は、応用編ということになります。

なので、あまり説明はつけませんので、わからないところは、

申し訳ありませんが自分で調べてください。

 

前回までは、試験的なプログラム(プロトタイプ)なので、

実際にしばらく自分で使ってみて、使いやすいように直してみました。

 

 

変更点は、上の実行画面を見てもらえばわかるとおり、

表示画面を1つにまとめ、ボタンは2つにしました。

また、メモがひとつでは足りないので、買い物リスト、名前の覚え及びその他の3画面作りました。

これは、高齢者になると忘れやすい(出てきません!)名前や買い物リストを独立させました。

画面クリアのボタンを作りました。

 

上の(買物)ボタンは、ファイルがなければ、エラーメッセージ、あれば保存されているファイルを表示します。

保存ボタンはファイルがなければ、作成しますし、あれば上書きします。

なのでなにも入力せず保存ボタンを押すと内容が消えます。

そのため、保存ボタンを間違って押して消してしまわないように、確認のアラートを付けました。

 

index.htmlは、

 

変更点

12から15行目にscriptを集めました。(Mustではありません。この方がコードがきれい)

25から29行目が画面下のツールバーです。

34行目でバックグラウンドの色を指定しています。(Mustではありません。あった方がきれい)

あとは、画面が3つあるので、2つ追加しました。

長く見えるけど同じものをコピーしただけです。(もちろん名前は変えてありますが)

 

下は2ページ目:

 

 

index.cssはほとんど使わないので、触らなくてもいいです。

(Mustではありませんが、名前だけは残しておいてください。)

 

index.jsは、

 

20から22、33から35行目は、画面クリアです。

38,39,58から60行目はが違って保存しないように確かめます。

 

 

2画面分追加してます。

ただし、2画面目、3画面目は保存ボタンのを押しても確認のアラートはでません

(実際には、何も入力せずに保存ボタンは押しません。心配な人は、38,39,58から60行目と同様に

       var id = confirm("上書きしてもいい?");
        if (id == true) { }

        else { ons.notification.alert('取り消ししました'); }

を入れておいてください。)

これも、長く見えるけど同じものをコピーしただけです。

 

ファイルがの読み込みは、3つにしただけです。

下は、3画面目

 

 

あとは、小技で、アイコンと名前を変えてみます。

 

 

androidの場合は、res,iconsにアイコンが入っていますので、

上書きします。

を、上のアイコンに書き換えました。(これでよければ、右クリックで保存して使ってください。

ただし、名前の変更をしてから上書きしてください。)

 

また、config.xmlの表示名をnewmemoに書き換えました。

 

すると、下のようにアプリらしく表示されます。

 

 

 

ちょっと、プログラムを知っているひとなら、1日もあれば、気軽にスマホのアプリがつくれるはずです。

 

あとは、あなたの発想次第です。

 

次では、Webstorageを使って同じことをしてみます。

 

 

 

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

| Cordova | 07:09 | 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