スポンサーサイト

上記の広告は1ヶ月以上更新のないブログに表示されています。
新しい記事を書く事で広告が消せます。

-----------------------------------

-----------------------------------
応援はこちらのクリックをお願いします。
にほんブログ村 IT技術ブログ iPhoneアプリ開発へ
にほんブログ村
にほんブログ村 IT技術ブログ Androidアプリ開発へ
にほんブログ村
--/--/--(--)
スポンサー広告

8-2.Monaca開発(jQueryでスマホアプリっぽい見た目と動き)

4作目のアプリ冷凍できる・できない事典では、jQueryというものを使って、スマホのアプリらしい見た目と動きを実現しました!
jQueryってなんだよー!というかたもいらっしゃると思うのでWEB上のIT用語辞典的なもので調べてみると、「オープンソースのJavaScriptライブラリの一つ」ということです。
「jQueryはシンプルなコードでWebページに効果やアニメーション、ユーザインターフェース要素などを追加でき、Ajaxによる通信も容易に実装できるほか、様々な機能を実現する豊富な対応プラグインが公開されている。」

要はjavascriptで、ニューと動いたりシャーっと動いたり近未来っぽいかっちょいい見た目にしたりとかを、本来ガリガリコードを書かなくちゃいけないようなところを、ちょちょいと簡単に書けばやってくれる感じ?ですかね?
ん?よけい意味不明?


まぁとにかくやってみようや、って感じです。
Monaca開発においては「とにかくやってみようや」が簡単にできます。
ダッシュボードの画面で「+新しいプロジェクト」ボタンからいつものようにプロジェクトを追加するのですが、

memo02.jpg


プロジェクトの作成画面の「スケルトンの選択」っていうところでいつもは「空のプロジェクト」を選んでいたところを「メモ帳アプリ」っていうのを選択してみます。

memo01.jpg

で、ソースを何もいじらずに「プレビュー」してみます。

memo03.jpg
memo04.jpg

こーんな感じでメモ帳アプリがもうできちゃっているわけです。
なので今回はこれをベースに作成を始めました。

jQueryも使われています。
例えばこの部分、ヘッダーですよね。

memo05.jpg

これってすでにスマホアプリっぽい見た目になっていますが、これを単純にスタイルシートとjavascriptで作ると結構ガリガリコードがを書かなくてはいけない。
黒い背景で、文字は白で、フォントはあれで、ボタンをクリックしたときの動作はこうで、ボタンはプラスマークの画像を使って、隅は丸っこくして、配置は右よりで、ヘッダーはスクロールするときは位置を固定して・・・とかあれこれ書かなくてはいけないところを、

<header data-role="header" data-position="fixed">
<h1>Monaca Memo</h1>
<a href="#AddPage" data-icon="plus" class="ui-btn-right">Add</a>
</header>

こうやって書くと、勝手に作ってくれるわけです。

data-role="header" ヘッダーだね
data-icon="plus"  プラスのアイコンのボタンだね
class="ui-btn-right" ボタンは右端に配置するんだね

とかなんとかそういうことですよ、たぶん!
こんな感じのリファレンスのページでひとつひとつが何を表すかチェックして覚えてもいいし、もしくは、変えたいとこだけ調べてもいいですよね。
例えば元々こういう最初の画面を

memo03.jpg

冷凍できるできない事典ではこうしたんだけど
memo06.jpg

メモ帳アプリにある「×」ボタンはメモの1つ1つを削除するボタンなんだけど、冷凍できるできない事典は削除の機能はなくて、変わりに詳細画面に飛ぶ「>」のマークのアイコンを出しています。
アイコン変えたい!と思ったので「jQuery アイコン」とかでググると
こんな感じのページがたくさん出てきて、アイコンの変え方なんてすぐわかっちゃうわけですね。
すばらしい!
山ほどあるよ!アイコン!

で、見た目もそうですけど、動きもあります。
例えばこちらのサイトさんで、同じ「リストをソートする」という動作を単純なjavascriptだけで書いたものと、jQueryを使って書いたものを比較しています。
jQueryの便利さがなかなかわかりやすくていいですね。

冷凍できるできない事典でいうと、一覧の情報を絞り込むところはこちらのサイト、文字での検索機能についてはこちらが参考になりました。

食品名をクリックすると詳細のページに移動する動きとかは、メモ帳アプリの機能をちょっとずつ改造して作りました。

というわけで、同じような感じでやりたいことをリファレンスサイトやサンプルソースを公開しているサイトで探して勉強して・・・を繰り返し、なんとなくjQueryの基礎の基礎的なところはわかってきました。
スマホアプリ開発、ちょっとだけやったことあります!って言える感じになってきましたね。
jQueryはこうやっていろんなサンプルや解説がネット上に転がっているので、独学しやすい言語のひとつだと思います。
スポンサーサイト

-----------------------------------

-----------------------------------
応援はこちらのクリックをお願いします。
にほんブログ村 IT技術ブログ iPhoneアプリ開発へ
にほんブログ村
にほんブログ村 IT技術ブログ Androidアプリ開発へ
にほんブログ村
















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


| ホーム |
Page Top↑
▲ Page Top
上記広告は1ヶ月以上更新のないブログに表示されています。新しい記事を書くことで広告を消せます。