れさくのブログ

れさくのブログ

*

2日目:スタバで授業の復習をしたら駅コレAndroidアプリができてしまった(前編)

   

クラウドナインアップスのAndroidアプリ教室、2日目です。
今日はデータの読み込みやオブジェクト指向、アプリの画面の設定などを学び、実学としてクイズアプリを作成します。

そしてアクセスの4分の3がスマホであることが判明したこのブログは、これまで通りの長文と大量の画像でお送り致します。
どうしたものかな。技術的にそうとう濃い、そして役に立つモノにするためには、詳細な説明と大量のキャプチャが必要なんですよね。

開発が始まります。
1392926_836875206364271_5600675747387842857_n

できました。
10170691_836924489692676_3882954531746751045_n

2コマー?!(ガビーン)

実は復習のために、講義中のキャプチャや詳細なメモはたくさんあります。
でも有料の講義内容をこのブログに無料でタレ流すわけにはいきません。

そこで!

1.今回の講義内容をもとに、れさくが復習を兼ねて「講義のものとは違うもの」を作る様子であれば、ガンガンレポートできるんじゃないか?!

2.さらに「少し違うもの」に取り組むことで、自習にもなる!

3.さらにその「少し違うもの」が、れさくが最終的に作りたいモノであれば、途中で行き詰ったらそれを先生に聞くことで効率よく開発できる!

と思い立ちました。

まさに三方よし、です。

「全然違ーう!(ガビーン)」
「その三方って全部自分じゃないかー!(ガビビーン)」

という訳でスタバなう。
9495_837389489646176_4587528831912941238_n

以下、これはヤラセでもなんでもなく、仕事帰りにれさくがスタバに寄って、復習を兼ねたAndroidアプリを作るレポートです。

起動してプロジェクト作成
WS000028

こんな感じに選択
WS000029

こんな感じに入力
WS000030

こんな感じで起動してきます。
WS000031

雛形のハロワ(Hellow world)ができています。

さてこれをいじって何を作るか?

今回の受講でのれさくの目的は「駅コレAndroidアプリ」を作ることです。
具体的にはガワネイティブとも呼ばれる、「ブラウザ」です。
このブラウザからWebサイトにアクセスすることで、サクッとアプリができてしまう。
「ネイティブのブラウザ+Webコンテンツ」なので「ハイブリッドアプリ」とも呼ばれます。

ガワネイティブだとイメージがいろいろアレですが、
ハイブリッドアプリって書くと何だかカッコイイです。

という訳でハイブリッドアプリを作ることにしました。

こちらのサイトを参考にしました。

これまでもガワネイティブや簡単なアプリを作る方法は、いろんなサイトで見てきました。
でもそれだけだとダメなんですよね。
開発環境を作るだけでも大変というのもありますが、
なにより全体構造が分かっていないからです。

前回と今回の講義ではこんな全体構造を学びました。

・IDE(統合開発環境。今回はeclipse)のプロジェクト起動だけで最低限の雛形ができる
・resのactivity_main.xmlでレイアウトをいじる
・GUIとxmlは下のタブで切り替えられる
・srcのMainActivity.Javaがメインのプログラム
・AndroidManifest.xmlで「何ができるか」の権限を設定

こういうことが理解できてないと、いくらネットでソースを拾ってきても何もできません。

今の自分ならできるッ!

このスタバのコーヒーを飲み終わる前にッ!

左フレームからAndroidManifest.xmlを選択します。
WS000032

Permissionsタブを選択
WS000033

add押してUses Permissionを選択
WS000034

[Name]から[android.permission.INTERNET]を選択
WS000035
これで「このアプリはインターネット通信をしても良い」という許可を与えたことになります。
ネットにアクセスできないとガワネ・・・ハイブリッドアプリになりませんから。

このPermission設定では、特に「確定」という動作が無いみたいでした。(?)

その後に下のAndroidManifest.xmlタブを開くと

が追加されています。
WS000036

次にレイアウトをいじりましょう。

res/layout/activity_main.xmlを開きます。
WS000037

小さい画面ですが、実はこの[Hello World]は選択できて動かせたりします。
選択してDeleteで消し去ってしまいましょう!
WS000038
左のCompositeを突っつくとサブメニューが展開されます。
少し下にスクロールすると「WebView」が出てきます。
これを掴んで右の端末画面の上に乗せます。
WS000039

適当につまんで最大まで広げます。
WS000040

下のactivity_main.xmlタブを開くとwebViewのIDがwebView1と名付けられていることが確認できます。
WS000041

[src/com.example.mywebview/MainActivity.java]を開く。
WS000042
3行目に+マークがありますね。これを突っつくと・・・

こんな風に展開されます。
WS000043
import済みのものが4行表示されていますね。

ここに
import android.webkit.WebView;
import android.webkit.WebViewClient;

を追記します。
WS000044

setContentView(R.layout.activity_main); のあとに以下を追加します。
————————————
//レイアウトで指定したWebViewのIDを指定する。
WebView myWebView = (WebView)findViewById(R.id.webView1);

//リンクをタップしたときに標準ブラウザを起動させない
myWebView.setWebViewClient(new WebViewClient());

//最初にスタバなう!のページを表示する。
myWebView.loadUrl("http://stbnow.net/");

————————————
参考サイトではyahooでしたが、これをスタバなう!にしてみますw
スタバなう!はブラウザアプリ(http://stbnow.net/)として既にサービス中の位置情報サービスです。
熱く競うサービスではないので、特に位置情報詐称対策はありません。
なので今回はこれをテスト用に選びました。

WS000045
青い部分が追記したものです。
良く見ると「webView1」の下に赤い波線が引かれてます。
ここにカーソルを合わせると・・・

こんな風にポップアップが!
WS000046
一番上の「Create field ‘webView1′ in type ‘id’」を突っつきます。

なんか突然画面が切り替わりました。
WS000047
リソース R.java にID webView1 が登録されていないのでこれを登録する処理が走ったのです。
こういうことをやってくれるのがIDEの素晴らしいところ!

これでいったん完成!もう完成!

ジョジョスマホもしっかり繋がっているので
WS000048
実行してみましょう。

最初の一回目はこの確認画面が出ます。
WS000049
Android Applicationを選んでOK
その後にも確認画面が出ますが、そのままOK

どれで検証する?と聞かれます。
WS000050
当然!
ジョジョスマホを選択してからOK押します。

スタバなう!
写真 2014-11-21 2 41 32
実機の上で起動成功!

ここまでわずか30分。

何年も手も足も出なかったれさくが、スタバで30分でハイブリッドアプリ(キリッが作れてしまう。
「全体の構造を理解できて」「実践的に学べる」クラウドナインアップスハンパないです。

さて、スタバのコーヒーはまだ暖かいです。

この勢いのまま、駅コレAndroidアプリを作ってしまうか・・・?

-つづく-

 - 5日間でできるAndroidアプリ開発

adpc

adpc

Message

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

次のHTML タグと属性が使えます: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code class="" title="" data-url=""> <del datetime=""> <em> <i> <q cite=""> <strike> <strong> <pre class="" title="" data-url=""> <span class="" title="" data-url="">

  関連記事

unnamed
プロローグ:ジオの奇妙な冒険

2010年! それは位置ゲーとジオメディアの発展が起業家の思想と生活を変えた時代 …

4日目の前日:ところで駅コレのAndroid版って

そもそも今回れさくがAndroidアプリ教室に通っている理由は、「駅コレのAnd …

ic_launcher
おまけ:本当は大変なAndroid開発

スクールで作ったapkファイルがあれば、「新規で」アプリリリースするなら簡単。 …

1日目:計算機を作ろうとしたらUSBドライバの勉強が進んだの巻

~前回までのあらすじ~ AndroidSDKは重い。 AndroidSDKは複雑 …

Androidアプリにプッシュ通知を実装する

運営から限定イベントのお知らせが届いたり、新着ニュースが届いたり。 そんな通知を …

10671457_837472396304552_3584240601328250199_n
2日目:スタバで授業の復習をしたら駅コレAndroidアプリができてしまった(後編)

~これまでのあらすじ~ スタバでスタバなうを作った。 さて、この勢いでもっと何か …

unnamed
リリース前に:apkとapkとKeyStoreとzipalign

クラウドナインアップスでの授業も終わり、なんだかアプリが作れてしまいました。 こ …

5日目:クラウドナインアップスAndroid教室最終日

一部で好評! 八幡山ってどんなところよ?シリーズ。 京王線の八幡山駅を出て左に進 …

icon-pc
最終回:本当に5日間でAndroidアプリが作れてリリースできた。

というわけで、5日間でできるAndroidアプリ開発も今回で最終回を迎えました。 …

eclips2
0日目:Androidアプリ開発環境をMacに設定しかけて途中からWindowsに設定する

~前回までのあらすじ~ 「ちょっと!蕎麦の出前まだなの?」 「すみませんねェ、今 …