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

こんにちは！クラウドナインアップスのショウです。

初めてのアプリ開発もとうとう今回で最終回です。
今回はGitHubを使うことで画面を左にスワイプするとメニューが現れるようにすることと、お気に入り機能を付け加えてみたいと思います。

前回のブログはこちら →「ファイナンス・経済ニュース」アプリができるまで　＃４

今回作成したアプリ

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

アプリ作成

手順⑤　スワイプとお気に入り機能

＊FavoriteControllerファイル

まずはお気に入り機能を実装するための ViewController を追加します。

作業自体は　”「ファイナンス・経済ニュース」アプリができるまで　#3　”の　SegueController の時と同じです。

右クリックで「New File」を選び、

iOS -> Cocoa Touch Class を選んで、

名前を「FavoriteController」にしたら完了です。

＊GitHub – JASidePanel

JASidePanelsを使うとスワイプで画面の切替えができるようになります。

GitHubからJASidePanels をダウンロードしてください。

ダウンロードはこちら　⇒　GitHub – JASidePanels

zipを解凍して「Source」というフォルダから
・JASidePanelController.h
・JASidePanelController.m
・UIViewController+JASidePanel.h
・UIViewController+JASidePanel.m
をプロジェクトに追加してください。

さらに、ビューコントローラー（名前 -> LeftPanelController）を追加してください。

そして、Main.storyboardでJASidePanel用のビューコントローラーを２つと
お気に入り用のビューコントローラーを
追加します。

＊JASideViewController – storyboard

１つは、Custom Class を JASidePanelController に設定し、
矢印をこのビューコントローラーに移動しときます。

２つ目を LeftPanelController に設定して、TableViewとTableViewViewCell を配置し
TableViewCellのidentifierを「Cell」に設定します。

＊FavoriteController

NavigationController を追加してください。

NavigationController には NavigationController と rootViewController がセットになってますが、
rootViewController のほうは消して新たにViewControllerを追加してNavigationControllerとつなげて、
(Relationship -> root view controller でつなげます）

NavigationController の identifier は「NavFavo」と設定します。

rootViewController は
Custom Class -> Class 「FavoriteController」を指定し、
TableView & TableViewCell を配置してTableViewCell は
Style : Basic , identifier : Cell を設定してください。

セルをタップすることでSegueControllerへ画面遷移し、ニュースを見れるようにしたいので
SegueController の WebView へドラッグ＆ドロップして「Selection Segue : push」でつなげます。

また、Storyboard Segue の identifierを「toWebview」に設定し、個別化します。

＊LeftPanelController.h

TableViewとLeftPanelController.hをひも付けします。

を書くのを忘れないようにしてください。

また、「AppDelegate.h」・「AppDelegate.m」・「UIView+JASidePanelCotroller」
にも色々書いていきます。

AppDelegate.h

#import <UIKit/UIKit.h>
#import “JASidePanelController.h” <- 追加

@class JASidePanelController; <- 追加

@interface AppDelegate : UIResponder <UIApplicationDelegate>

@property (strong, nonatomic) UIWindow *window;
@property (strong, nonatomic) JASidePanelController *slideViewController; <- 追加

@end

AppDelegate.m

- (BOOL)application:(UIApplication *)application didFinishLaunchingWithOptions:(NSDictionary *)launchOptions {
    
    self.slideViewController = (JASidePanelController *)self.window.rootViewController; <- 追加
    self.slideViewController.shouldDelegateAutorotateToVisiblePanel = NO; <- 追加
  //ストーリボードを取得
    UIStoryboard *storyboard = [UIStoryboard storyboardWithName:@"Main" bundle:nil]; <- 追加
    self.slideViewController.centerPanel = [storyboard instantiateViewControllerWithIdentifier:@"Nav1”]; <- 追加
    self.slideViewController.leftPanel = [storyboard instantiateViewControllerWithIdentifier:@"LeftPanel”]; <- 追加
    return YES;
}

UIView+JASidePanelCotroller.h

#import <UIKit/UIKit.h> <- 追加
#import <Foundation/Foundation.h>

@class JASidePanelController;

＊LeftPanelController.m

実装ファイルにも書いていきます。
LeftPanelController.m に「JASidePanelController.h」,「UIViewController+JASidePanel.h」,「AppDelegate.h」
をインポートし、

以下のコードを書きます。

@interface LeftPanelController ()

@end

@implementation LeftPanelController
{
NSArray *siteArr;
}

- (void)viewDidLoad {
[super viewDidLoad];

self.leftTable.delegate = self;
self.leftTable.dataSource = self;

siteArr = @[@"ニュース",@"お気に入り"];
}

続いて、TableViewの設定です。

#pragma mark - Table View 設定

- (NSInteger)numberOfSectionsInTableView:(UITableView *)tableView {
return 1;
}
- (NSInteger)tableView:(UITableView *)tableView numberOfRowsInSection:(NSInteger)section {
return [siteArr count];
}

- (UITableViewCell *)tableView:(UITableView *)tableView cellForRowAtIndexPath:(NSIndexPath *)indexPath {

UITableViewCell *cell = [tableView dequeueReusableCellWithIdentifier:@"Cell" forIndexPath:indexPath];
cell.textLabel.text = siteArr[indexPath.row];

return cell;
}

- (void)tableView:(UITableView *)tableView didSelectRowAtIndexPath:(NSIndexPath *)indexPath
{
NSString *str;
switch (indexPath.row) {
//TableViewの１行目 = case 0
//TableViewの２行目 = case 1
case 0:
str = @"Nav1"; //ニュース
break;
case 1:
str = @"NavFavo"; //お気に入り
break;
default:
break;
}

self.sidePanelController.centerPanel =
[self.storyboard instantiateViewControllerWithIdentifier:str];
}
// ヘッダーの高さ
-(CGFloat)tableView:(UITableView *)tableView heightForHeaderInSection:(NSInteger)section {
return 60.0f;
}
// 行の高さ
-(CGFloat)tableView:(UITableView*)tableView heightForRowAtIndexPath:(NSIndexPath *)indexPath{
return 45.0f;
}
//セクションを設定(title,color)
- (UIView *)tableView:(UITableView *)tableView viewForHeaderInSection:(NSInteger)section {

UIView *sectionView = [[UIView alloc] init];
// Sectionの大きさ
sectionView.frame = CGRectMake(0.0f, 0.0f, 320.0f, 480.0f);//(x,y,width,height)
// 背景色を黒にする。
sectionView.backgroundColor = [UIColor blackColor];
// UIView にラベルを追加する。
UILabel *sectionLabel =
[[UILabel alloc] initWithFrame:CGRectMake(20.0f, 15.0f, 300.0f, 40.0f)];//(x,y,width,height)
// テキストのタイトル・色を変更
sectionLabel.text = @"ファイナンス・経済ニュース";
sectionLabel.textColor = [UIColor whiteColor];
// ビューにセットして
[sectionView addSubview:sectionLabel];
// ビューを戻り値で返すとセクションに反映されます。
return sectionView;
}

シミュレーターで確認してみると、こんな感じになりました。

まだお気に入り画面には何も表示されていません。
なのでこれからお気に入りボタンを作り、ボタンを押したらお気に入り画面にニュースタイトルが表示されるようにします。

＊お気に入りボタンの配置

まずはお気に入り機能を実装するために
SegueControllerのツールバーにお気に入りボタンを追加します。

「Bar Button Item」＆「Flexible Space Bar Button Item」を
SegueCotrollerのツールバーに追加します。

Bar Button Item のidentifier は「Bookmarks」を指定します。

そしたらこの「お気に入りボタン」とSegueControllerをひも付けします。

※「Connection」は「Action」です。間違えないようにしてください。

＊SegueController.m

お気に入りボタンを押すとニュースの「タイトル」・「URL」・「日付」が辞書(NSMutableDictionary）に格納され、そのデータがNSUserDefaultsによって保存されます。
さらに、UIAlertViewでお気に入りに追加されたことを表示します。

#pragma mark - お気に入りボタン
- (IBAction)favoButton:(id)sender {

// NSUserDefaultを呼び出す
NSUserDefaults *defaults = [NSUserDefaults standardUserDefaults];

//辞書(favoDic)を作成し、タイトル・URL・日付を格納
NSMutableDictionary *favoDic = [NSMutableDictionary dictionary];
[favoDic setObject:self.titleStr forKey:@"title"];
[favoDic setObject:self.linkStr forKey:@"url"];
[favoDic setObject:self.dateStr forKey:@"date"];

NSLog(@"favoDic %@",favoDic);

// 「お気に入り」を格納する配列を作る
NSMutableArray *storeFavoArr = [NSMutableArray array];
// FAVORITEキーがない場合
if (![defaults arrayForKey:@"FAVORITE"])
{
[storeFavoArr addObject:favoDic];//"favoDic"を"storeFavoArr"に格納
[defaults setObject:storeFavoArr forKey:@"FAVORITE"];//"storeFavoArr"を"FAVORITE"という名前で"Defaults"に保存
// FAVORITEキーがある場合
} else {

NSArray *Arr = [defaults arrayForKey:@"FAVORITE"];
storeFavoArr = [Arr mutableCopy]; //　MutableArray(追加・削除などが行える)に変換
[storeFavoArr addObject:favoDic];
[defaults setObject:storeFavoArr forKey:@"FAVORITE"];
}
[defaults synchronize];

NSLog(@"FAVORITE ARR %@", storeFavoArr);

// UIAlertViewで「お気に入りに追加されました。」（タイトル:お気に入り、ボタン:OK）が表示されるようにする。
// １行で書くタイプ（１ボタンタイプ）
UIAlertView *alert =
[[UIAlertView alloc] initWithTitle:@"お気に入り" message:@"追加しました"
delegate:self cancelButtonTitle:nil otherButtonTitles:@"OK", nil];
[alert show];
}

＊FavoriteController.h

ストーリーボードのFavoriteControllerに配置されているTableViewとFavoriteController.hを
ひも付けし、NSUserDefaultsを再び呼びます。

@interface FavoViewController : UIViewController <UITableViewDelegate,UITableViewDataSource>
{
NSUserDefaults *defaults;
}
@property NSMutableArray *favoArr;
@property (weak, nonatomic) IBOutlet UITableView *favoTableView;

@end

＊FavoriteController.m

お気に入り画面には編集(Edit)ボタンを用意します。
なのでTableViewとEditボタンの設定をする。
SegueController.mで保存されてたfavoDic(お気に入り画面に表示するためのニュースのデータを格納している辞書)を
NSUserDefaultsを介してfavoArrに表示します。
また、セルをタップするとSegueControllerに画面遷移してニュースが表示される様に設定します。

#import "FavoriteController.h"
#import "SegueController.h"
#import "AppDelegate.h"
#import "JASidePanelController.h"

- (void)viewDidLoad {
[super viewDidLoad];
// EditButtonItem(編集のためのボタン、削除機能のみ)を使う。
self.navigationItem.rightBarButtonItem = self.editButtonItem;
// NSUserDefaultsのFavoriteキーお気に入りがあるならば、配列を取得する(なければ取得しない。)
defaults = [NSUserDefaults standardUserDefaults];
if ([defaults arrayForKey:@"FAVORITE"]) {
self.favoArr = [[defaults arrayForKey:@"FAVORITE"] mutableCopy];
}
self.favoTableView.delegate = self;
self.favoTableView.dataSource = self;
}
#pragma mark - Table View 設定
//セクションの数
-(NSInteger)numberOfSectionsInTableView:(UITableView *)tableView
{
return 1;
}
//行の数
-(NSInteger)tableView:(UITableView *)tableView numberOfRowsInSection:(NSInteger)section
{
return [self.favoArr count];
}
//セルの中身を記述
-(UITableViewCell *)tableView:(UITableView *)tableView cellForRowAtIndexPath:(NSIndexPath *)indexPath
{
UITableViewCell *cell = [tableView dequeueReusableCellWithIdentifier:@"Cell" forIndexPath:indexPath];
if (cell == nil) {
cell = [[UITableViewCell alloc] initWithStyle:UITableViewCellStyleSubtitle reuseIdentifier:@"Cell"];
}
cell.textLabel.text = [[self.favoArr objectAtIndex:indexPath.row] objectForKey:@"title"];
cell.detailTextLabel.text = [[self.favoArr objectAtIndex:indexPath.row] objectForKey:@"date"];

return cell;
}
// お気に入りSceneのEdit(編集)を許可するかどうか
- (BOOL)tableView:(UITableView *)tableView canEditRowAtIndexPath:(NSIndexPath *)indexPath {
return YES; //編集を許可している
}
// Editモードへの切り替え
- (void)setEditing:(BOOL)editing animated:(BOOL)animated {
[super setEditing:editing animated:animated];
[self.favoTableView setEditing:editing animated:YES];
}
// Edit(編集)ボタンが押された場合どうするかを書く
- (void)tableView:(UITableView *)tableView commitEditingStyle:(UITableViewCellEditingStyle)editingStyle forRowAtIndexPath:(NSIndexPath *)indexPath {

if (editingStyle == UITableViewCellEditingStyleDelete) {
// 1) NSUserDefaultsを呼び出し
defaults = [NSUserDefaults standardUserDefaults];
// 2）NSUserDefaultsのFAVORITEキーから配列を呼び出し
NSArray *Arr = [defaults arrayForKey:@"FAVORITE"];
// 3）取得した配列(NSArray)からMutableArray形式に変換（mutableCopy)
self.favoArr = [Arr mutableCopy];
// 4）配列から削除
[self.favoArr removeObjectAtIndex:indexPath.row];
// 5) NSUserDefaultsのFAVORITEキーに再度格納する。
[defaults setObject:self.favoArr forKey:@"FAVORITE"];
// 6）削除した配列をNSUserDefaultsに戻す（[defaults syncronize]しておく）
[defaults synchronize];

[self.favoTableView reloadData];
}
}
#pragma mark - Tap Cell to Detail Scene
//セルがタップされるとWebView画面に遷移
- (void)prepareForSegue:(UIStoryboardSegue *)segue sender:(id)sender {
if ([[segue identifier] isEqualToString:@"toWebView"]) {

NSIndexPath *indexPath = [self.favoTableView indexPathForSelectedRow];
//URL
NSString *linkstr = [[self.favoArr objectAtIndex:indexPath.row] objectForKey:@"url"];
[[segue destinationViewController] setLinkStr:linkstr];
//タイトル
NSString *titleStr = [[self.favoArr objectAtIndex:indexPath.row]objectForKey:@"title"];
[[segue destinationViewController]setTitleStr:titleStr];
//日付
NSString *dateStr = [[self.favoArr objectAtIndex:indexPath.row]objectForKey:@"date"];
[[segue destinationViewController]setDateStr:dateStr];
}
}
@end

終わったらシミュレーターで確認してみましょう。

お気に入りボタンを押すと、アラートビューで「お気に入りに追加しました」と表示されました。