こんにちは！クラウドナインアップスのショウです。
初めてのアプリを開発するまでをまとめたシリーズ。
前回の ”「ファイナンス・経済ニュース」 アプリができるまで ＃２” では、TableviewCellにニュースタイトルを表示し、それをタップするとSegueControllerに移動するというところまでやりました。
初めてのアプリを開発するまでをまとめたシリーズ。
前回の ”「ファイナンス・経済ニュース」 アプリができるまで ＃２” では、TableviewCellにニュースタイトルを表示し、それをタップするとSegueControllerに移動するというところまでやりました。
今回はSegueControllerにニュースの内容を表示できるようにします。
そしてもう一つウェブサイトを読み込んでいる間にクルクル回るやつを付けたいと思います。
TableViewに表示されているニュースタイトルをタップすると
ニュースの詳しい内容のページ (遷移先)ヘ移動できるようにしましょう。
ヘッダーファイル（.h）とメソッドファイル（.m）の追加
まずは、遷移先の内容を設定するための、ヘッダーファイル（.h）とメソッドファイル（.m）を追加しましょう。
右クリック -> 「New File」-> iOS Sourceの「Cocoa Touch Class」->「Next」
をしたら
[Class](名前)は「Segue Controller」とかにしておきましょう。
[Subclass of] がUIViewControllerになっていることを確認して完了させてください。
そうしたら次に、新しくViewControllerを１つ追加してください。
これが遷移先になります。
UIWebViewをViewControllerに貼り付けて
ViewControllerを選択した状態で「Custom Class」->「Class」->「SegueController」
と設定してください。
そうしたら このSegueControllerとSegueController.hをひも付けしちゃいましょう。
そして、@interfaceのUIViewController のあとに <UIWebViewDelegate> と入力してください。
これがないとWebViewが使えません。
次は、TableViewCellをタップしたらWebViewの移動するようにしましょう。
TableViewCellを右クリック(トラックパッドではCtr＋クリック)したままSegueControllerにドラッグし、「Selection Segue」の「push」を選んでください。
これで遷移付けをすることが出来ました。
そしたらViewControllerとSegueControllerの間にあるマークをクリックして、
Segueのidentifierに「showDetail」と入力してください。
ためしに、これで１回ビルドしてみてください。
TableViewCellにニュースのタイトルが表示されそれをタップするとSegueControllerに移動します。
(まだSegueControllerには何を表示するのか設定していないので何も表示されません。
＊ViewController.h
では続きをやっていきましょう。
ViewController.mにSegueController.hをインポートします。
＊ViewController.m
そしてViewController.mの@endの上に以下のコードを入力してください。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 |
#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の上に以下のコードを書きます。
|
1 2 3 |
@property (strong, nonatomic) NSString *linkStr; @property (strong, nonatomic) NSString *titleStr; @property (strong, nonatomic) NSString *dateStr; |
＊SegueController.m
SegueController.mにWebViewを表示できるようにコードを書いていきます。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 |
#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の上に書いてください。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 |
#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
をプロジェクトに組み込んでください。
＊SegueController.m
1.MBProgressHUDをインポートする。
2.viewDidLoadにインジケーターが表示されるようにする。
3.ウェブサイトが正常に読み込まれた時にインジケーターが消えるよう書く。
4.ウェブサイトの読み込みに失敗した時にインジケーターが消えるよう書く。
１）
|
1 |
#import "MBProgressHUD.h" |
２）
|
1 2 3 4 5 6 7 |
- (void)viewDidLoad { [super viewDidLoad]; // インジケーターが表示される設定を追加 MBProgressHUD *hud = [MBProgressHUD showHUDAddedTo:self.view animated:YES]; hud.dimBackground = YES; //背景 [hud setLabelText:@"Loading..."]; //テキスト(下に"Loading..."と表示) } |
３）
|
1 2 3 4 5 |
//ウェブサイトが正常（200）に読み込まれた際に呼び出されるwebView のデリゲートメソッド -(void)webViewDidFinishLoad:(UIWebView *)webView { // 読み込みが完了したのでインジケーター は取り除く [MBProgressHUD hideHUDForView:self.view animated:YES]; <-追加 } |
４）
|
1 2 3 4 5 |
//ウェブサイトの読み込みでエラーがあった場合に呼び出されるwebView のデリゲートメソッド -(void)webView:(UIWebView *)webView didFailLoadWithError:(NSError *)error { // 読み込み時にエラーが発生したのでインジケーターは取り除く [MBProgressHUD hideHUDForView:self.view animated:YES]; } |
ビルド（実行）
ビルドするとこんな感じになります。
ニュースが表示されタップすると画面が遷移して、インジケーターが表示されます。
そしてニュースの内容が表示されると、インジケーターが消えました。
第３回まとめ
３回目となる今回は、WebViewの機能を追加しました。
SegueControllerにニュースの内容を表示させる処理を行った事で、TableViewに表示されているニュースタイトルをタップするとニュースの詳しい内容のページヘ移動するようになりました。ニュースが表示されるまでのインジケーターも追加しています。
次回はWebViewの戻る・進む・リロードボタンの実装をやっていきたいと思います。
さらに詳しく知りたい方は、アプリ開発スクール「クラウドナインアップス」へお気軽にご相談ください。
〜＃４へ続く〜
コメントをどうぞ