iOS 技術

SwiftでCocoaPodsを使う手順メモとios-chartsでグラフ表示

Swift でiphoneやiPad向けのアプリ開発をする際に、もはや必須となりつつあるライブラリ。

そのライブラリを便利に使うためのCocoaPodsの導入手順です。

CocoaPodsって何?って人向けです。

ついでにライブラリの導入例として「ios-charts」をプロジェクトに追加し、グラフ表示してみました。

CocoaPodsとは何か?

私はココアポッズ、面倒なのでポッズと呼んでいますが、正確な読み方は知らないため間違っていてもそこはご愛敬・・・。

CocoaPodsはiOSやMac向けアプリ開発で使用するライブラリを管理してくれるものです。

昔はGitからわざわざ取ってきて、バージョンアップした際には・・・なんていう面倒なことをしていたのですが、それと比べると非常に便利になりました。

環境

・macOS High Sierra 10.13.4
・Xcode Version 9.3
・CocoaPods 1.5.3

CocoaPodsの環境を構築する

CocoaPodsのインストールにはRubyが必要です。

ただ、MacにはあらかじめRubyがインストールされています。

それではまずgemを最新にしておきましょう。

gemとはRuby用のパッケージ管理システムです。

$ sudo gem update --system  
 
続いて、CocoaPodsをインストールします。
 
$ sudo gem install -n /usr/local/bin cocoapods  
 
インストールが完了したら、念のためバージョンを確認してみてください。
 
$ pod --version  
 
正しくインストールされていたら、1.5.3といったようにバージョンが表示されるはずです。
 
CocoaPodsのセットアップを行います。
 
$ pod setup  
 
セットアップはかなり時間がかかる場合がありますので、放置しておきましょう。
 
セットアップが終わったら、事前準備は完了です。

CocoaPodsを使ってみる

CocoaPodsを使ってライブラリを導入します。

今回は「ios-charts」をプロジェクトに追加し、グラフ表示をしてみました。

ライブラリを導入したいプロジェクトファイルに移動します。

例として「GraphSample 」というプロジェクト名で説明していきます。

$ cd ***/***/GraphSample  
 
Podfileを新規で作成します。
$ pod init
 
PodfileはCocoaPodsにおいて重要な役割を果たしています。
 
今後、ライブラリの追加などはこのPodfileを編集することによって行なうためです。
 
作成したPodfileを以下のように編集します。
 
1行目のプラットフォームのコメントを外し、4行目に「pod 'Charts'」を加えます。
 

platform :ios, '11.0'

target 'GraphSample' do

  # Comment the next line if you're not using Swift and don't want to use dynamic frameworks

  pod 'Charts'

  use_frameworks!

  # Pods for GraphSample

  target 'GraphSampleTests' do

    inherit! :search_paths

    # Pods for testing

  end

  target 'GraphSampleUITests' do

    inherit! :search_paths

    # Pods for testing

  end

end

 
ios-chartsをインストールします。
 
$ pod install
 
成功すると、以下のようにプロジェクトファイルと同階層にCocoaPods関連のファイルが作成されます。
 
CocoaPods
ここで間違ってはいけないのは、CocoaPodsを導入したプロジェクトについては、開くのはプロジェクトファイルではなく、CocoaPodsのワークスペースでなければなりません。
 
今回でいうと、開くのは「GraphSample.xcworkspace」です。
 

storyboardの操作

では試しに折れ線グラフを表示させてみましょう。

まずはstoryboardにviewを配置します。

操作するのはMain.storyboardです。

配置したviewのclassをLineChartViewに変更。

CocoaPods2

今度はソース側です。

ViewControllerのメンバとしてLineChartViewを宣言。
 
@IBOutlet weak var chartView: LineChartView!

といった感じです。

再びstoryboardに戻って、storyboardに配置したviewとコードのchartViewを紐付けます。

あとはデータを用意し、LineChartViewにセットしてやるだけです。

ソースは以下です。

実行するとこんな感じでグラフが表示されます。

CocoaPods3

ライブラリを利用するとほんの数行コードを書くだけで、こんなに綺麗なグラフを表示できます。

使えるものはどんどん利用すべきですね。

-iOS, 技術

© 2024 FIRE達成のフリーランスエンジニアブログ