Go to Qiita Advent Calendar 2024 Top
LoginSignup
24
11

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 5 years have passed since last update.

P&D - Planning and Development -Advent Calendar 2017

Day 22
@serion253inP&D – Planning and Development –

Alamofireを用いてswiftとRailsと連携してみる

Last updated at Posted at 2017-12-21

SwiftとRailsの連携する手順をみて試してみたけど、バージョンとか昔の記事だと全然上手くいかない...
なんてことがあるかと思います。そこで参考サイトを元にした更新版の記事を書こうかと思います(初心者向けです)。ほぼ参考サイトと同じなのですが、より詳しく説明していければなと思います！

#参考サイト
参考にしたのは以下の通り。大変分かりやすくてありがとうございます！
【iOS】SwiftでRailsと連携する方法
【Swift3】Alamofire4系を使ってRailsと連携する

#環境
OS:macOS Sierra 10.12.6
Ruby:2.4.2
Rails:5.1.4
iOS:11.1
Xcode:9.1
cocoapods:1.3.1
Alamofire:4.5

#1．準備

##cocoapodsのインストール
ホームディレクトリで以下を実行する

$ gem install cocoapods

※cocoapodsはgemだけど一度インストールしたらMac自体にインストールされるらしい

インストールされたらxcodeを開いてiOSプロジェクトを作っておく。
SingleViewで場所と名前は適当でOKです。(ここではプロジェクト名をswift_memoとしてます)
プロジェクトのあるディレクトリに移動して以下のコマンドを実行する。

$pod setup
$pod init

PodfileができればOK!

##Alamofireのインストール
Podfileを開いて、以下のコードをコピ-&ペーストする。(pod 'Alamofire', '~> 4.5'とuse_frameworks!を追記)
なおiOSやAlamofireのバージョンは各自変更してください。(Alamofireについてはここ)

Podfile
# Uncomment the next line to define a global platform for your project
source 'https://github.com/CocoaPods/Specs.git'
platform :ios, '11.1'
  use_frameworks!

target 'swift_memo' do
  # Pods for swift_memo
    pod 'Alamofire', '~> 4.5'
  target 'swift_memoTests' do
    inherit! :search_paths
    # Pods for testing
  end

  target 'swift_memoUITests' do
    inherit! :search_paths
    # Pods for testing
  end

end

次にXcodeを落として以下を実行。

$ pod install
スクリーンショット 2017-11-28 23.01.24.jpg

#2．Swift側の設定
##xcodeでプロジェクトを開く
進化したswift_memo.xcworkspace(白色)を開く。
Finderで確認するとプロジェクトが進化してます！

new_project.jpg

##部品の配置

Main.storyboradを選択し、適当にヘッダーとタイトルラベル、保存ボタンとText Viewを配置します。Auto Layoutも忘れずにしましょう。

※iOS11からSafe Areaが導入され、Top Layout Guide とBottom Layout Guideが消えてるみたいです。詳しくはここ

##部品とソースコードの関連付け
ViewController.swiftを選択して、Text ViewをtextViewという名前で
Outlet接続、ButtonをtapSaveBtnという名前でAction接続します。

ViewController.swift
import UIKit

class ViewController: UIViewController {
    
    @IBOutlet weak var textView: UITextView!

    override func viewDidLoad() {
        super.viewDidLoad()
        // Do any additional setup after loading the view, typically from a nib.
    }

    override func didReceiveMemoryWarning() {
        super.didReceiveMemoryWarning()
        // Dispose of any resources that can be recreated.
    }
    
    @IBAction func tapSaveBtn(sender: Any) {
        let memo = Memo()
        memo.text = textView.text
        
        StockMemos.postMemo(memo: memo)
    }

}

##モデルオブジェクトとモデルマネージャーをつくる
下の画像のように、Modelsフォルダを作成し、その下にModel ManagerフォルダとModel Objectフォルダをつくる。
Model Managerフォルダの下には、StockMemos.swiftというNSObjectのファイルをつくり、Model Objectフォルダの下には、Memo.swiftというNSObjectのファイルをつくる。

model2.jpg

##コードの記述
メモクラスにtextプロパティを持たせる。

Memo.swift
import UIKit

class Memo: NSObject {
    var text: String = ""
}

HTTP通信に必要な処理を書いていく。

StockMemos.swift
import UIKit
import Alamofire

class StockMemos: NSObject {
    
    // 保存ボタンが押されたときに呼ばれるメソッドを定義
    class func postMemo(memo: Memo) {
        
        let params: [String: AnyObject] = [
            "text": memo.text as AnyObject
        ]
        
        // HTTP通信
        // Both calls are equivalent
        Alamofire.request("http://localhost:3000/api/memos", method: .post, parameters: params)
        
    }
}

上記の2つのswiftファイルはコピペでOK。
最後にinfo.plistに以下を追加してhttp通信から推奨しているhttps通信に変更する。
App Transport Security Settings（型：Dictionary）を追加。その中にAllow Arbitrary Loadsを入れる。ValueをYesにすることを忘れずに。

#3．Rails側の設定
ここではRuby及びRailsの導入については省略します。
(ブラウザーでhttp://localhost:3000/を開き、コマンドrails s -b 0.0.0.0でサーバーを立ち上げ、Yay! You’re on Rails!が表示されてればおkです)

##Railsアプリをつくる

$ rails new Meomoo -d mysql

場所は適当でOKです。

##DBをつくる

$ bundle exec rake db:create

##ルーティングの設定
Meommo/config/routes.rbを開き、以下のコードを記述する。apiのディレクトリをはさんでコントローラーをつくるため、namespaceでルーティングを設定。

routes.rb
Rails.application.routes.draw do

  namespace :api, default: {format: :json} do
    resources :memos, only: :create
  end

end

##モデルの作成

$ rails g model memo

##カラムの追加
Meommo/db/migrate/○○○○○○_create_memos.rbを開き、t.text :textを以下のファイルに
追記する。

○○○○○○_create_memos.rb
class CreateMemos < ActiveRecord::Migration [5.1]
  def change
    create_table :memos do |t|
      t.text :text
      t.timestamps
    end
  end
end

DBに反映させる。

$ bundle exec rake db:migrate

##コントローラーの作成とcreateアクション
apiディレクトリ配下にmemos_controller.rbを作成

$ rails g controller api/memos

次にMeommo/app/controllers/api/memos_controller.rbを開き、以下のように記述する。

memos_controller.rb
class Api::MemosController < ApplicationController
  skip_before_action :verify_authenticity_token, only: :create # どうやらこの記述が必要

  def create
    memo = Memo.new(create_params)

    # エラー処理
    unless memo.save # もし、memoが保存できなかったら
      @error_message = [memo.errors.full_messages].compact # エラーが入ってるインスタンス変数を定義
    end
  end


  private
  def create_params
    params.permit(:text)
  end
end

※2行目のskip_before_filterだとなんかエラー吐いてくるのでskip_before_actionにしてます。

##createアクションに対応するビュー(JsonJbuilder)をつくる
以下のディレクトリにcreate.json.jbuilderファイルをつくる。

$ vi Meommo/app/views/api/memos/aaa.json.jbuilder
create.json.jbuilder
json.error_message @error_message if @error_message

##バリデーションの設定
textが空のまま送信してきたらエラ-メッセージを返す。

Meommo/app/models/memo.rb
memo.rb
class Memo < ApplicationRecord
  validates :text, presence: true
end

#4．テストしてみる
ターミナルからrails s -b 0.0.0.0でサーバー立ち上げて、http://localhost:3000/
でサーバーが立ち上がってるか確認。
確認できたら、実際に実行してみる(以下の動画参照)

ここまでできればメモ帳で入力した文字がDB(MySQL)に保存されるはずです。お疲れ様でした。

#5．終わりに
ここまで色々と書きましたが、間違ってるところがあれば是非コメントよろしくお願い致します。
つまづくところとしてはxcodeのエラーのとこだと思うので、頑張ってGoogleで調べてみるか詳しい方に聞くのが一番大事かと思います。

24
11
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
Sign upLogin
24
11

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?