ハチマン | 八幡山と育児、ライフスタイル、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の上に以下のコードを入力してください。
#pragma mark   Segue画面の設定
//セルがタップされると詳細画面に遷移する
- (void)prepareForSegue:(UIStoryboardSegue *)segue sender:(id)sender {
    //URL,タイトル,日付を「showDetail」を介してSegueControllerに渡している
    if ([[segue identifier] isEqualToString:@"showDetail"]) {
 
        NSIndexPath *indexPath = [self.tableView1 indexPathForSelectedRow];
        // URL情報をSegueViewControllerに渡す
        NSString *urlStr = [[self.newsArr objectAtIndex:indexPath.row] objectForKey:@"url"];
[[segue destinationViewController] setLinkStr:urlStr];
       // タイトルをDetailViewControllerに渡してる箇所
NSString *titleStr = [[self.newsArr objectAtIndex:indexPath.row] objectForKey:@"title"];
[[segue destinationViewController] setTitleStr:titleStr];
// 日付をDetailViewControllerに渡してる箇所
NSString *dateStr = [[self.newsArr objectAtIndex:indexPath.row] objectForKey:@"date"];
        [[segue destinationViewController] setDateStr:dateStr];
    }
}
urlStrがSegueControllerにあるsetLinkStrに情報を渡すためのパスになります。
これでSegueControllerに渡す準備が出来ました。
次にSegueControllerがViewControllerから情報を受け取る準備をします。
 SegueController.h
SegueController.hに情報の入ったパスを入力します。@endの上に以下のコードを書きます。
@property (strong, nonatomic) NSString *linkStr;
@property (strong, nonatomic) NSString *titleStr;
@property (strong, nonatomic) NSString *dateStr;
 *SegueController.m

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

#pragma mark - Detail画面の設定//マスター画面から受け取ったデータを表示
- (void)configureView {
 
    self.webView.delegate = self;  //忘れないこと
    //ニュース一覧から画面をタップすると画面遷移してWebページを表示
NSURL *linkStr = [NSURL URLWithString:self.linkStr];
NSURLRequest *linkStrReq = [NSURLRequest requestWithURL:linkStr];
[self.webView loadRequest:linkStrReq];
}
- (void)viewDidLoad {
[super viewDidLoad];
 
    [self configureView];//configureViewで書いたことが表示される
}
最後にウェブサイトが読み込まれる際のメソッドを書きます。
SegueController.mの@endの上に書いてください。
#pragma mark - Web Site 読み込み
// ウェブサイトの読み込みが開始された際に呼び出されるメソッド
-(void)webViewDidStartLoad:(UIWebView *)webView {
   NSLog(@"%s",__func__);
}
// ウェブサイトが正常に読み込まれた際に呼び出されるメソッド
-(void)webViewDidFinishLoad:(UIWebView *)webView {
   NSLog(@"%s",__func__);
}
// ウェブサイトの読み込みでエラーがあった場合に呼び出されるメソッド
-(void)webView:(UIWebView *)webView didFailLoadWithError:(NSError *)error {
   NSLog(@"%s",__func__);
   NSLog(@"HTTP Err : %@",error);
}
*GitHub - MBProgressHUD –
下のURLよりMBProgressHUDをダウンロードしてください。
そうしたらzipを解凍し、
・MBProgressHUD.h
・MBProgressHUD.m
をプロジェクトに組み込んでください。
スクリーンショット 2015-03-03 15.45.38
*SegueController.m
1.MBProgressHUDをインポートする。
2.viewDidLoadにインジケーターが表示されるようにする。
3.ウェブサイトが正常に読み込まれた時にインジケーターが消えるよう書く。
4.ウェブサイトの読み込みに失敗した時にインジケーターが消えるよう書く。
1)
#import "MBProgressHUD.h"

 

2)
- (void)viewDidLoad {
    [super viewDidLoad];
// インジケーターが表示される設定を追加
    MBProgressHUD *hud = [MBProgressHUD showHUDAddedTo:self.view animated:YES];
hud.dimBackground = YES; //背景
    [hud setLabelText:@"Loading..."]; //テキスト(下に"Loading..."と表示)
}

 

3)
//ウェブサイトが正常(200)に読み込まれた際に呼び出されるwebView のデリゲートメソッド
-(void)webViewDidFinishLoad:(UIWebView *)webView {
    //  読み込みが完了したのでインジケーター は取り除く
    [MBProgressHUD hideHUDForView:self.view animated:YES]; <-追加
}

 

4)
//ウェブサイトの読み込みでエラーがあった場合に呼び出されるwebView のデリゲートメソッド
-(void)webView:(UIWebView *)webView didFailLoadWithError:(NSError *)error {
    //  読み込み時にエラーが発生したのでインジケーターは取り除く
[MBProgressHUD hideHUDForView:self.view animated:YES];
}
 ビルド(実行)
ビルドするとこんな感じになります。
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へ続く〜
ハチマンブログは今なん位? 関東情報ブログランキング
【DMM FX】入金

コメントをどうぞ

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

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