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

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

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

 こんにちは!クラウドナインアップスのショウです。
初めてのアプリを開発するまでをまとめたシリーズ。
前回の ”「ファイナンス・経済ニュース」 アプリができるまで #2” では、TableviewCellにニュースタイトルを表示し、それをタップするとSegueControllerに移動するというところまでやりました。
今回はSegueControllerにニュースの内容を表示できるようにします。
そしてもう一つウェブサイトを読み込んでいる間にクルクル回るやつを付けたいと思います。

技術ブログ#4 MBProgress

今回作成したアプリ

appicon
ファイナンス・経済ニュース – 最新情報を素早くキャッチ

 

アプリ作成

手順③WebView
TableViewに表示されているニュースタイトルをタップすると
ニュースの詳しい内容のページ (遷移先)ヘ移動できるようにしましょう。
ヘッダーファイル(.h)とメソッドファイル(.m)の追加

まずは、遷移先の内容を設定するための、ヘッダーファイル(.h)とメソッドファイル(.m)を追加しましょう。

右クリック -> 「New File」->  iOS Sourceの「Cocoa Touch Class」->「Next」
をしたら
[Class](名前)は「Segue Controller」とかにしておきましょう。
[Subclass of] がUIViewControllerになっていることを確認して完了させてください。
スクリーンショット 2015-02-09 12.22.01スクリーンショット 2015-02-09 12.25.43スクリーンショット 2015-02-09 12.28.03
 そうしたら次に、新しくViewControllerを1つ追加してください。
これが遷移先になります。
スクリーンショット 2015-02-09 12.11.52
UIWebViewをViewControllerに貼り付けて
ViewControllerを選択した状態で「Custom Class」->「Class」->「SegueController」
と設定してください。
スクリーンショット 2015-02-09 12.15.03スクリーンショット 2015-02-09 12.40.33
そうしたら このSegueControllerとSegueController.hをひも付けしちゃいましょう。
スクリーンショット 2015-02-12 11.21.46
そして、@interfaceのUIViewController のあとに  <UIWebViewDelegate> と入力してください。
これがないとWebViewが使えません。
次は、TableViewCellをタップしたらWebViewの移動するようにしましょう。
TableViewCellを右クリック(トラックパッドではCtr+クリック)したままSegueControllerにドラッグし、「Selection Segue」の「push」を選んでください。
スクリーンショット 2015-02-12 11.34.28スクリーンショット 2015-02-12 11.32.34
これで遷移付けをすることが出来ました。
そしたらViewControllerとSegueControllerの間にあるマークをクリックして、
Segueのidentifierに「showDetail」と入力してください。
スクリーンショット 2015-02-12 12.08.12
ためしに、これで1回ビルドしてみてください。
TableViewCellにニュースのタイトルが表示されそれをタップするとSegueControllerに移動します。
(まだSegueControllerには何を表示するのか設定していないので何も表示されません。
スクリーンショット 2015-03-03 17.16.24*ViewController.h
では続きをやっていきましょう。

ViewController.mにSegueController.hをインポートします。

スクリーンショット 2015-02-12 13.46.25
*ViewController.m
そしてViewController.mの@endの上に以下のコードを入力してください。
urlStrがSegueControllerにあるsetLinkStrに情報を渡すためのパスになります。
これでSegueControllerに渡す準備が出来ました。
次にSegueControllerがViewControllerから情報を受け取る準備をします。
 SegueController.h
SegueController.hに情報の入ったパスを入力します。@endの上に以下のコードを書きます。
 *SegueController.m

SegueController.mにWebViewを表示できるようにコードを書いていきます。

最後にウェブサイトが読み込まれる際のメソッドを書きます。
SegueController.mの@endの上に書いてください。
*GitHub - MBProgressHUD –
下のURLよりMBProgressHUDをダウンロードしてください。
そうしたらzipを解凍し、
・MBProgressHUD.h
・MBProgressHUD.m
をプロジェクトに組み込んでください。
スクリーンショット 2015-03-03 15.45.38
*SegueController.m
1.MBProgressHUDをインポートする。
2.viewDidLoadにインジケーターが表示されるようにする。
3.ウェブサイトが正常に読み込まれた時にインジケーターが消えるよう書く。
4.ウェブサイトの読み込みに失敗した時にインジケーターが消えるよう書く。
1)

 

2)

 

3)

 

4)
 ビルド(実行)
ビルドするとこんな感じになります。
iOS Simulator Screen Shot 2015.03.03 16.08.44iOS Simulator Screen Shot 2015.03.03 16.08.47iOS Simulator Screen Shot 2015.03.03 16.08.50
ニュースが表示されタップすると画面が遷移して、インジケーターが表示されます。
そしてニュースの内容が表示されると、インジケーターが消えました。

 第3回まとめ

3回目となる今回は、WebViewの機能を追加しました。
SegueControllerにニュースの内容を表示させる処理を行った事で、TableViewに表示されているニュースタイトルをタップするとニュースの詳しい内容のページヘ移動するようになりました。ニュースが表示されるまでのインジケーターも追加しています。

次回はWebViewの戻る・進む・リロードボタンの実装をやっていきたいと思います。
さらに詳しく知りたい方は、アプリ開発スクール「クラウドナインアップス」へお気軽にご相談ください。
スクリーンショット 2015-03-09 11.28.56
#4へ続く〜

ハチマンブログは今なん位? 関東情報ブログランキング

コメントをどうぞ

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

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