WEB・アプリ開発

SwiftによるシンプルなRSSリーダーの作り方

SwiftとiOSアプリ開発の基本を学ぶのに最適なのは、RSSリーダーを作ることです。というのは、iPhoneアプリによく求められるサーバーサイドとの連携を、サーバーの実装無しに練習できるからです。この記事では、そんなRSSリーダーのシンプルな作り方をご紹介します。

最終的にはこんな感じ

完成品

ただ、いきなりこれを作ると思うと大変なので、1機能1機能追加して、ステップバイステップで進めるような記事にしています。

なお本記事はつぎの記事を参考にさせて頂いています。

ただ、より初心者の方が取り組みやすいように、難しい部分やコードの量を減らし、シンプルな手順にしています。

また、以下の環境を前提にしています。

  • Xcode Version 7.3 (7D175)
  • Swift 2.2

メニューバーを作る

ただ記事の一覧が表示されるだけというのも味気ないので、メニューバーを作ります。こんな感じのイメージです。

メニューバーのGIF

まずはプロジェクトを新規作成します。

プロジェクトを作る

Xcodeのメニューから、File>New>Project..をクリックし、Single View Applicationを選択します。

新プロジェクト

以下の3つは自由でOKです。

  • Product name
  • Organization Name
  • Organization Identifier

PageMenuのインストール

PageMenuというライブラリを使うため、CocoaPodsというライブラリ管理ツールをインストールしておいてください。インストール方法は次のページがわかりやすいです。

【初心者向け】SwiftでもObj-cでも、CocoaPodsを使ってiOSライブラリを使って開発効率をアップさせる

Macのコーソールで、このプロジェクトのルートディレクトリに移動してください。


Podfileという名前でファイルを作成します。


中身は次のようにします。


RssReaderApp の部分をきちんとあなたが作ったプロジェクト名と同じになっているようにしてください。

コンソールで、下のように pod install を実行するとPageMenuがインストールされます。


最初の pod install完了後には、Xcodeでこのプロジェクトを開き直す必要があります。まずこのプロジェクトを左上の赤いボタンでOKです。

コンソールで lsを実行すると、 RssReaderApp.xcworkspaceというファイルが生成されているはずです。それを開きます。下のようにするとXcodeで開きます。


すると下のようにXcodeの左側のProject NavigatorにPodsというのができてるのがわかります。

Podsができてる

この中にCocoaPodsでインストールしたライブラリが入ってきます。

なおPodfileでバージョンを指定しないと、その時々の最新バージョンをインストールします。なので、本記事執筆時から時間が経つにつれて動かなくなってしまうケースが出てくるかもしれません。

その場合は、それぞれのセクションに対応するgithubのタグから、 Podfile.lockに書いてある各ライブラリのバージョンを確認し、 Podfileの方で指定するようにしてみてください。そうすれば、本記事で使ったバージョンを確実に使うことができます。例えば、下のような形で指定できます。


Podfile.lockとは、 pod install実行時に、実際にインストールされたバージョンを具体的に記録したファイルです。

ViewController.swiftの編集

ViewController.swiftを開いてください。

まず、PageMenuをimportするようにし(2行目)、PageMenu用のプロパティを用意します。(5行目)


viewDidLoad()内を以下のようにします。

TableViewControllerの作成

TableViewController.swiftとそれに対応するxibファイルを作成します。

まず、Project NavigatorでRssReaderAppを右クリックし、New File…を選択します。

TableViewControllerの作成

次の画面でCocoa Touch Classを選択します。そして下のようにし、swiftファイルとxibファイルを同時に作成します。

xibも同時作成

これでRunすればこのようなメニューが表示されるはずです。

メニューバーのGIF

ここまでのコードは下のリンクで見ることができます。

https://github.com/tarky/RssReaderApp/tree/added-menu

ローカルでみたい方は git clone-bにタグの名前を指定すればOKです。

APIから情報を取得する

TableViewに記事一覧を表示する前に、APIからデータが取得できるかどうかを確認しておきましょう。

スポンサーリンク

ライブラリを追加する

まずPodfileに必要なライブラリを追加しておきます。(7〜8行目)


忘れずに pod installを実行します。

ViewController.swiftの編集

ViewControllerからそれぞれのメニューのTableViewControllerに対して、記事を取得するURLとタイトルを設定します。


という部分を、下のコードに置き換えてください。


RSSの取得元はhttp://menthas.com/というサイトです。


というURLになっているのは、RSSをGoogleが提供するJson形式に変換するAPIに通しているからです。

こうすることで、XMLではなくJsonとしてデータを取得することができます。

TableViewController.swiftの編集

下のように、2つのライブラリのimportの追加と、2つのプロパティを追加してください。


viewDidLoad()を次のようにします。


Runしてみて、下のようにXcodeのコンソールにタイトルとURLが表示されていればデータは取得できていることが確認できました。

ログが表示されている

この状態のコードは下で見れます。

https://github.com/tarky/RssReaderApp/tree/connect-api

TableViewを表示する

取得したデータをそれぞれのメニューのTableViewに表示していきます。完成イメージはこんな感じです。

tableView

FeedTableViewCellの作成

名前はなんでもいいのですが、テーブルの一つ一つのセルとなるパーツを作ります。Interface Builderの操作は文字で説明するのが大変なので、動画にしました。

データ保存用のstructを作る

新しいSwift fileを作成し、名前をEntry.swiftとし、中身を下のようにします。

TableViewController.swiftの修正

次のように修正してください。

  • 9行目追加
  • 13〜18行目追加
  • 23〜27行目修正
  • 29行目追加
  • 38行目以降、修正&追加


この状態でRunすると、下のようにTableViewで記事一覧が表示されるようになります。

tableView

この状態のコードは下で見られます。

https://github.com/tarky/RssReaderApp/tree/show-table-view

記事を表示する

記事の一覧から見たい記事をタップすることで、記事の内容を表示するようにします。こんな感じのイメージです。

記事を表示する

スポンサーリンク

App Transport Security(ATS)を無効化する

アプリから外部通信を行う場合、通常ATSを丁寧に設定する必要があります。ですが、本記事ではその説明は趣旨ではないので、通信できるようこの機能自体を無効化します。実際にリリースするアプリでは必ずきちんと設定してください。

info.plistに以下を追加してください。info.plistを右クリックして、Open As → Source Codeをクリックすると編集できます。


追加する場所は、一番下の </dict>のすぐ上に入れるのがわかりやすいです。

TOWebViewControllerの追加

PodfileにTOWebViewControllerを追します。WebViewをよしなに使えるようにするためのものです。


pod installを実行します。

DetailViewControllerの作成

記事の内容を表示するDetailViewControllerを作成します。
下のように新しいCocoa Touch Classを作成します。

DetailViewControllerを作る

内容は下のようにしてください。


TableViewControllerに以下のメソッドを追加してください。

ViewControllerをNavigationControllerに埋め込む

Navigation Barを機能させるため、ViewControllerをNavigationControllerに埋め込見ます。

Main.storyboardを開きます。

下のようにViewControllerの上の三つのアイコンのうち一番左のものをクリックした状態で、Editorメニュー → Embed in → Navigation Controllerをクリックします。

NavigationControllerに埋め込む

そうするとこんな感じで、NavigationControllerとViewControllerが繋がります。

Controllerがつながる

そして、NavigationControllerの上の三つのアイコンのうち一番左のものをクリックした状態で、右側のセクションでTop Barにて Opaque Navigation Barを選択します。

Top Barの変更

ViewController.swiftの修正

viewDidLoad()内の super.viewDidLoad()のすぐ下に以下を挿入してください。navigationBarを設定しています。


pageMenuのデザインにメリハリをつけるため、 paramsを変更します。 viewDidLoad()内の paramsを設定する部分を下のように変更します。


この状態でRunすると下のように記事を表示できるようになります。

記事を表示する

ここまでのコードは下から見られます。

https://github.com/tarky/RssReaderApp/tree/show-article02

Thumbnail画像を表示する

TableViewのそれぞれのセルにThumbnail画像を表示します。こんな感じのイメージです。

サムネイルを表示する

SDWebImageの追加

PodfileにSDWebImageを追加します。ネットワーク上の画像の取得をよしなにやってくれるライブラリのようです。


pod installを実行します。

ThumbnailとActivity Indicatorを追加する

Interface BuilderからThumbnailと、ロード中に表示するActivity Indicatorを追加します。

まずは、FeedTableViewCell.xibを開きます。こちらも文字で説明するのが大変なため、動画で説明します。

スポンサーリンク

FeedTableViewCell.swiftの修正

FeedTableViewCell.swiftを以下のようにします。

  • importの追加
  •   let ogpApiの追加
  •   var linkの追加
  •   func setThumbnailImageView()の追加


最初にRSSから取得した記事一覧の情報には、サムネイル画像についての情報は入っていないので、OGP(Open Graph Protocol)データ取得APIを利用して、サムネイル画像のURLを1記事1記事取得しています。

URLが取れたら、 sd_setImageWithURL()で改めてサムネイル画像自体をとりに行っているということです。

そして、サムネイル画像がダウンロードできたら、アニメーションつきで、thumbnailViewのalphaを1にして、indicatorをstopしています。

TableViewController.swiftの修正

cellのlinkに値を代入する処理を加えます。下のコードでいう6行目を追加します。


この状態で、Runすると下のようにサムネイルが表示されるようになっているはずです。

サムネイルを表示する

ここまでのコードは下から見ることができます。

https://github.com/tarky/RssReaderApp/tree/show-thumbnail

さいごに

いかがでしたでしょうか。一気に全機能をつけるのではなく、なるべく一つずつ加えていく手順にしてみました。参考になればさいわいです。

もしちょっと基本的な知識がまだ足りないなーと思うかたは、Swiftが学べるプログラミングスクールで学んでみてもいいかもしれません。

下の記事がよくまとまっています。

Swiftのスクールランキング5選