プログラミング初心者でも簡単にできる「初めてのAndroidアプリ開発」【その1】
初めまして。株式会社ガラパゴスのAndroidチームの@rockmanstreemです。
タイトル通りつい1ヶ月ほどまえからAndroidアプリをやり始めました初心者でAndroidをやる前はJavaなんて触ったこともありませんでした。
そんな自分がこの1ヶ月で色々と試行錯誤して一つなんとかアプリと呼べるんじゃないかな？と思う物が出来ましたので、
そのアプリを作る過程で分かったことなどを書いていきたいと思います。
初心者ですので当り前なこと、怪しいことを書くことがあるかと思いますがご容赦下さい。
間違いなどありましたら指摘して下さるとありがたいです。
自分の作ったアプリは簡単な「Rssリーダー」です。この製作過程を順をおって記事にしていこうと思っています。
今回はURLを入力するためのボックスを作るあたりまで書こうと思います。
Androidアプリ作成を始めるにあたり
何といってもまずは環境構築をしなければなりません。
環境構築方法については同じAndroidチームの@knqyf263さんが分かりやすく記事にしているのでそちらを参考にして下さい。
Androidアプリ開発の環境構築 - スマートフォンアプリ開発会社のエンジニアブログ
自分の開発環境もその記事通りに構築して日本語化プラグインを使用しています。
RssReaderアプリの作成
ちなみに今回自分が作成したアプリは元はこちらの本に載っているものを改良した物です。
この本は自分が一番初めに学習用に購入した本でJava入門とありますがほとんどAndroid入門の本です。
Java知らないけどAndroidアプリを作ってみたい！という人にはこの本は非常にお勧めです。
この本に載ってるサンプルアプリを作ってみるだけで色々と出来るようになると思います。
それでは作成していきたいと思います。
基本的な動作の流れは
「RssフィードのURLを入力」→「ボタンを押す」→「Rssの内容がリスト形式で表示される」→「見たい内容のリスト部分を押す」→「ネットに接続してそれを見る」
とこんな感じです。
まずはURLを入力するページを作ります。
仕様としては
・TextView、EditText、Button、ListView X1
こんな感じになるかと思います。これはRssの内容を表示している状態。
まずAndroidプロジェクトの作成から。
「ファイル」→「新規」→「プロジェクト」→「Andorid」→「Andoridプロジェクト」と進み
、
・プロジェクト名：SampleRssReader
・ビルド・ターゲット：Android 2.2(API Level 8) をチェック
・アプリケーション名：SampleRssReader
・パッケージ名：com.glpgs.samplerssreader
・Create Activity：(チェックを入れる) RssList
・Min SDK Version：8
と入力します。入力したら「完了」を押して下さい。
するとプロジェクトエクスプローラに「SampleRssReader」が出来ていると思います。
つぎにレイアウトをいじってボタンなどを配置したいと思います。
SampleRssReader→res→layoutとフォルダを開きmain.xmlを開いて下さい。
下のように表示されると思います。
まず上の方に左から「2.7in QVGA」「Portrait」「Theme」「Android ○.○」と表示されているバーがあると思います。
ここで一番右のバーを選択し「Android２．２」に変更して下さい。これはAndroidのバージョンによって使用できるレイアウト部品に違いがあるためプロジェクト作成時に指定したビルドターゲットで指定したバージョンに変更する必要があります。
次に各パーツを配置していきます。
まずEditText,Buttonを横に並べて配置するためにLinearLayoutを配置します。
左の「パレット」の下に「Form Widgets」「レイアウト」「コンポジット」などがあると思います。
その中の「レイアウト」を選択します。そこにLinearLayoutがあります。
何といってもレイアウトの配置は簡単な所は
「ただ置きたい部品をドラッグアンドドロップするだけでいい」
てところですね。
LinearLayoutを配置したら同様に他のパーツもドラッグアンドドロップで配置します。
ちなみにButton,EditTextは「Form Widgets」、ListViewは「コンポジット」の中にあります。
他にもたくさんパーツがあるので色々使ってみたいですねー。
こんな感じですね。
右のアウトラインのウィンドウを見ると分かるようにLinearLayoutの中にEditTextとButtonがあってLinearLayoutと同じレベルにListViewがあります。
LinearLayoutは他のパーツを入れ子状にすることができてパーツを垂直方向、水平方向に並べて表示することができます。
ドラッグアンドドロップするかアウトラインウィンドウで右クリックで「Move up」「Move Down」を使って配置できます。
「俺は縦にパーツを並べたいんだ！！」って人はLinearLayoutを右クリックして「垂直方向」を選択するか、
下のプロパティーウィンドウを開いて「Orientation」の部分を「vertical」にすれば縦にパーツが並びます。
現状ではボタンに「Button]、EditTextに「EditText」と文字が表示されていて
「そんなん言われんでもわかるわ！」って感じですね。
これではつまらんので表示させる文字を変更しましょう。
また後のプログラミングの準備のための変更もしておきましょう。
・idの変更
・表示させる文字の変更
これらは「プロパティー」ウィンドウともう一つ別のファイルを変更します。
まずidの変更から。idはパーツをプログラム上で識別するためにつけられるものです。
プロパティーウィンドウを開くとこんな感じになっているはずです。
・「Id」の変更
Idの「値」の部分をクリックして「＠+id/urlEditText」と変更しましょう。
この時先頭の「@+id/」の部分は消さないように注意して下さい。
idにパーツの役割に応じたidをつけておくとあとあとパーツの数が増えた時に困らなくて済みます。
変更したらアウトラインの部分も変わったと思います。
・「Text」の変更
次にプロパティの「Text」を変更します。
今は「値」の部分に「EditText」が入っていますがそれは消して下さい。
・「Hint」の変更
「Id」の上にある「Hint」をクリックします。HintはEditText内にあらかじめ表示させておく文字を指定するプロパティでTextとの違いは文字が入力されると自動的に消えるのがHintです。
表示させる文字の指定方法は二通りあり
（１）直接「値」に入力
（２）strings.xmlを参照する
（１）はそのまんまですね。今回は（２）の方法で行います。
「Hint」をクリックすると右側にアイコンが出るのでそれをクリックします。
するとこんなウィンドウが出ると思うので左下の「New String...」をクリックして下さい。
次に出てきたウィンドウの「ストリング（S)」には表示させたい文字、「New R.string.(R)」にはこの文字を識別するための名前を入力します。今回は
「ストリング（S)」→「Enter RssFeed URL」
「New R.string.(R)」→「urlEditHint」
としましょう。入力したらOKをクリック。するとさっきのぺーじに戻って「urlEditText」が追加されているので
それをせんたくしてOKをクリック。Hintに「@string/urlEditHint」とでているはずです。
「res」→「values」→「string.xml」を開いて見るとurlEditTextがあるのが分かると思います。
複数個所に同じ文字を表示させる場合、このように別のファイルに文字を保存しレイアウトからはそのIdを指定して参照させることで後で文字を変更する場合など非常に便利です。開いてもらった「string.xml」からも「追加」をクリックすることで同じことが出来ます。
残りのButton、ListViewも以下のように変更します。
・Button
「Id」→「@+id/rssShowButton」
「Text]→「Show」（こちらは直接入力で構いません）
・ListView
「Id」→「@+id/rssList」
（もし分かりにくければ自分の分かりやすいようにId名は適宜変更して下さい）
おそらくこんな感じなっていると思います。
今回はここまでで次回はプログラム部分に入っていきたいと思います。
正直初めてだったので読みづらい、分かり辛い部分などあると思いますがこれからも書いていきたいと思うので
よろしくお願いします。
