ハチマン | 八幡山と育児、ライフスタイル、ITの情報ブログ

「ファイナンス・経済ニュース」 アプリができるまで #1

「ファイナンス・経済ニュース」 アプリができるまで #1

こんにちは、クラウドナインアップスのショウです。初心者プログラマーの自分が初めて作ったアプリファイナンス・経済ニュース
初心者がつまづきやすいポイントともに、アプリ完成までを解説していきます!

アプリの紹介

まずは僕が作ったアプリファイナンス・経済ニュースをご紹介します。

アプリ概要
appicon
*金融(ファイナンス)、経済に関するニュースが読める
*リアルタイムの為替情報を見ることができる
*お気に入り機能もあるので時間があるときにゆっくりと読むこともできる
*気になったニュースはTwitter,Facebook,LINEで共有することも出来る
アプリ画面
      スクリーンショット 2015-01-08 14.46.57              スクリーンショット 2015-01-08 14.49.14
スクリーンショット 2015-01-08 14.48.10スクリーンショット 2015-01-08 14.52.26
使用ツール
今回は「Single View Application」を使っています。
スクリーンショット 2015-01-08 15.03.45

アプリ作成

概要
①TableView
②XMLParser
③WebView
④戻る・進む・リロード(更新)
⑤お気に入り機能
 手順 ①TableView
では作っていきましょう。
スクリーンショット 2015-01-16 12.23.03
まず、*Navigation Controller*を追加し
「View Controller」に付いている矢印を「Navigation Controller」にドラッグで移動させてください。
そして、「Navigation Controller」に接続されている「Root View Controller」は消してしまいましょう。
すると「Navigation Controller」と「View Controller」が残ります。
そうしたら「Navigation Controller」を右クリックで「View Controller」にドラッグ&ドロップします。
画面遷移の種類を聞かれますので一番下の「root view controller」を選びましょう。
スクリーンショット 2015-01-16 13.36.25
「root view controller」を選ぶとこのマークで接続されます。
スクリーンショット 2015-01-16 13.54.07
「Navigation Controller」と「View Controller」を繋げたら*Table View*と*Table View Cell*を
「View Controller」に追加してください。
スクリーンショット 2015-01-16 13.50.39
追加したら、「Table View Cell」をクリックして
Style:「Subtitle」を選択し、
identifier:「Cell」と入力してください。
スクリーンショット 2015-01-16 14.05.29
そうしたら storyboard の TableViewと.h (ヘッダーフィル)をひも付けしましょう。
Outlet であることを確認し、
名前を「 tableView1」にしたらひも付けしてください。
スクリーンショット 2015-01-16 14.18.43
ここで、メソッドファイル(.m)に2つほど警告が出ますが、UITableViewの必須メソッドが記述されてないからです。
(あとで記述するので今は問題ないでしょう。)
テーブルビューは必須メソッドが2つある、ということを覚えて下さい。
*テーブルにいくつのデータがあるか
*テーブルの中のセルはどんなセルか
この2つのメソッドはUITableViewを使う上では必須となります。
では、コードを書いていきましょう。
1,ヘッダーファイル(.h)
ヘッダーファイル(.h)の@interfaceの末尾に
<UITableViewDelegate,UITableViewDataSource>
と記述してください。
スクリーンショット 2015-01-16 14.48.09
2,メソッドファイル(.m)の viewDidLoadに、「テーブルに表示するデータは誰に聞けばいいのか(dataSource)」
と「テーブルを選択されたとき誰にいえばいいのか(delegate)」を設定する。

 

3,セクション数を設定する
テーブルを表示する時、テーブルビューはまず「いくつセクションがあるのか?」を聞いてきます。
そのために、「numberOfSectionsInTableVIew」というメソッドが呼ばれますので「return セクション数」で答えるように
します。

 

4,行数を設定する
テーブルビューは次に、セクション毎に「このセクションには何行あるか?」と聞いてくるので、行の数を答えます。
「numberOfRowsInSection: section」というメソッドが呼ばれます。
どのセクションかは、sectionの値を見るとわかるので、そのセクションは何行あるかを、「return 行の数」で答えてあげます。

 

5,行に表示するデータを設定
テーブルビューは次に、「このセクションのこの行には、何を表示するの?」と聞いてくるので内容を答えます。
「cellForRowAtIndexPath:indexPath」というメソッドが呼ばれるので
どのセクションかはindexPath.sectionを、どの行かはindexPath.Rowを見るとわかります。

 

第一回まとめ

一回目となる今回は「TableView」を作るところまでをまとめました。
記事を読んでもよくわからない方は、是非「クラウドナインアップス」へご相談ください。

スクリーンショット 2015-03-09 11.28.56

#2へ続く〜

ハチマンブログは今なん位? 関東情報ブログランキング
bitFlyer ビットコインを始めるなら安心・安全な取引所で

コメントをどうぞ

*
*
* (公開されません)

世田谷区八幡山から育児ライフスタイルITに関する情報をブログでお届けします。
サイトマップ
Return Top