Xcode
iOS
Swift
Alamofire
SwiftyJSON

APIを使って、Qiitaの記事を表示する。Part.1

背景

iOSでAPIについて学ぶついでに、Qiitaの新着記事を表示させました。また、記事をタップした時に当サイトに飛ぶようにしました。このアプリで学んだことをいくつかに分けて説明します。

参考にしたもの

AlamofireとSwiftyJSONでAPIを叩くチュートリアル

[iPhone] Web ブラウザを作る

APIって結局何なの?初心者向けに徹底解説します!

Homebrew

Carthageを使ってビルド時間を短縮しよう

準備

Xcode 9.2
Swift 3.2

完成図

image.png
アプリに表示

image.png
タップした後

APIについて

APIとは…

"Application Programming Interface"の略。
簡単に言うと、ソフトウェアとプログラムをつなぐもの。

APIを使うには…

今回は、"SwiftyJSON"と"Alamofire"というライブラリを導入します。

プロジェクト作成と導入

プロジェクト作成

Xcodeを起動して、"Create a new Xcode project" -> "Single View App"を選択します。
プロジェクト名はQiitaViewerApp。(任意)
保存先はDeskTopへ(わかりやすいため)

ライブラリ導入

今回は、Carthageを使って導入します。
ターミナルを開いてください。

Carthageの導入

Homebrewを入れていない方は以下のコマンドを実行してください。

ruby -e "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/master/install)"

以下のコマンドを実行してcarthageをインストール。

brew install carthage

ライブラリの導入

ライブラリをプロジェクト(先ほど作ったプロジェクト)に導入したいので、ターミナルで作業します。

cd ~/DeskTop/QiitaViewer
touch Cartfile
vi Cartfile

このコマンドを実行すると、"Cartfile"をターミナル上で編集できます。
このファイルに以下のように編集して保存します。

github "Alamofire/Alamofire"
github "SwiftyJSON/SwiftyJSON"

iで入力モードになります。
入力モードを終える時は、esc
その状態で:wqを実行すると、保存して終了し、:q!を実行すると、保存せずに終了します。

編集できたら、以下のコマンドを実行してライブラリをビルドします。

carthage update --platform iOS

ビルドが終了したら、プロジェクトの方でライブラリを追加します。
プロジェクトファイルの"General"から"Linked Frameworks and Library"の+ボタンを押します。
image.png

Frameworksを選択する画面になるので、"Add Other"を選択します。
image.png

プロジェクトのディレクトリ内から、QiitaViewer/Carthage/Build/iOSのAlamofire.frameworkとSwiftyJSON.frameworkを選択します。
image.png

追加できたら、Build Phasesタブに移動し、+ボタンから"New Run Script Phase"を選択します。
"Run Script"が出てくるので、"Shell"に

/usr/local/bin/carthage copy-frameworks

"input Files"に

$(SRCROOT)/Carthage/Build/iOS/Alamofire.framework
$(SRCROOT)/Carthage/Build/iOS/SwiftyJSON.framework

を書きます。
image.png

これで、無事プロジェクトにライブラリが導入されました。

Part.2へ

次は、Main.storybordを使って画面を構成していきます。
APIを使って、Qiitaの記事を表示させる。Part.2