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

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

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

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

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

今回作成したアプリ

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

 

アプリ作成

手順⑤ スワイプとお気に入り機能
*FavoriteControllerファイル

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

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

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

スクリーンショット 2015-02-26 15.30.55

iOS -> Cocoa Touch Class を選んで、

スクリーンショット 2015-02-26 15.31.12

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

スクリーンショット 2015-02-26 15.31.52

*GitHub – JASidePanel

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

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

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

スクリーンショット 2015-03-02 10.51.00

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

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

スクリーンショット 2015-03-02 11.38.24

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

*JASideViewController – storyboard

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

スクリーンショット 2015-03-02 11.56.00

 

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

スクリーンショット 2015-03-02 11.56.18

スクリーンショット 2015-03-02 11.56.33

*FavoriteController

NavigationController を追加してください。

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

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

スクリーンショット 2015-03-02 15.36.23

スクリーンショット 2015-03-02 15.48.56

スクリーンショット 2015-03-02 15.40.24rootViewController は
Custom Class -> Class 「FavoriteController」を指定し、
TableView & TableViewCell を配置してTableViewCell は
Style : Basic , identifier : Cell を設定してください。

スクリーンショット 2015-03-02 15.56.51

スクリーンショット 2015-03-02 15.57.42セルをタップすることでSegueControllerへ画面遷移し、ニュースを見れるようにしたいので
SegueController の WebView へドラッグ&ドロップして「Selection Segue : push」でつなげます。

スクリーンショット 2015-03-02 16.08.03

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

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

*LeftPanelController.h

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

<UITableViewDateSource , UITableViewDelegate>

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

スクリーンショット 2015-03-02 12.21.52

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

AppDelegate.h


 

AppDelegate.m


 

UIView+JASidePanelCotroller.h


 

 

*LeftPanelController.m

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

スクリーンショット 2015-03-02 13.11.05

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

 

 

続いて、TableViewの設定です。

 

 

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

iOS Simulator Screen Shot 2015.03.02 14.50.51

iOS Simulator Screen Shot 2015.03.02 15.30.40

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

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

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

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

スクリーンショット 2015-02-26 15.52.27

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

スクリーンショット 2015-02-26 15.52.58

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

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

スクリーンショット 2015-02-26 16.09.30

*SegueController.m

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

 

*FavoriteController.h

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

 

*FavoriteController.m

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

 

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

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

iOS Simulator Screen Shot 2015.03.03 15.12.25

お気に入り画面には今お気に入りしたニュースのタイトルと日付が表示されてます。

iOS Simulator Screen Shot 2015.03.03 15.13.03

右上のEditボタンを押すと、セルの左に赤丸が現れ削除することができます。
また、Editボタンを押さなくてもセルを左にスワイプするだけで削除することもできます。

iOS Simulator Screen Shot 2015.03.03 15.13.06

iOS Simulator Screen Shot 2015.03.03 15.13.11

セルをタップすると画面が遷移し、ニュースの内容が表示されました。

iOS Simulator Screen Shot 2015.03.03 15.13.18

以上で完成です!

まとめ

5回に渡ってお伝えしてきました「ファイナンス・経済ニュース」 アプリができるまで。いかがでしたでしょうか。
一つのアプリを完成させることができれば、その応用で何本もアプリを作成できるようになります。
このブログをきっかけにアプリ開発に興味を持ってくれる方が増えれば幸いです。

アプリは完成したもののそのあとの手続きでつまずいている方も、アプリ開発スクール「クラウドナインアップス」へ!
クラウドナインアップスでは、開発だけでなくその後のアプリのリリースまで責任を持ってサポートいたします。

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

 


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

コメントをどうぞ

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

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