【基礎】3時間でswift ⇄ rails連携！apiサーバ構築講座

株式会社Dive into Code代表取締役 Founder CE 　野呂浩良

ails3認定ブロンズ技術者

【基礎】3時間で wift ⇄ ails連携！A Iサーバ構築講座

wiftアプリと ailsアプリ連携方法を

最短経路で理解するため講座です。

1Copyright © 2015-2016 Dive into Code Corp. All ights eserved.

構成

1. Introduction ( 5分)

2. 開発環境と通信ながれ ( 20分)

3. 実践ワーク (140分)wiftでブログ投稿と完了画面作成、ブログ入力欄と投稿ボタン

作成、ブログ投稿データをH リクエスト、 ailsアプリへA Iサーバ機能実装

4. スキルアップコツ ( 10分)エンジニアになる3つ方法

5. Appendixお薦め学習サイト、書籍、ツール等

2

私たちミッション

Copyright © 2015-2016 Dive into Code Corp. All ights eserved.

すべて人が、テクノロジーを武器にして活躍できる社会をつくる

対面講義 & ネット

ails基礎

チーム開発

• uby( ails)• ostgre• H• C (Bootstrap)

EBエンジニア

経験ゼロ

デザイン基礎

機能

受託開発

グループタスク機能

3Copyright © 2015 TimeShift Corp. All Rights Reserved.

Introduction野呂浩良ゼロからプログラミングを2回経験。

BAエンジニア講師。リクルートやワークスアプリケーションズなど異業種・異職種へ転職を4度経験。あらゆる時間を計測し、未経験職務でゼロから短期間に成果をあげる独自生産性向上手法を確立。ワークスアプリケーションズ特待生制度「問題解決能力発掘プログラム」突破経験と1年間独立起業過程でエンジニア人材

不足を痛感した原体験から、実務経験を得てエンジニアになるためプログラミングスクール「DI E I C DE」を創業。

4

キャリア


10年以上、非エンジニア社会人。異業種・異職種で転職と経営大学院を経て2015年4月に起業。

1980年誕生（松坂世代）

2003年株式会社すみや【接客販売】

2006年株式会社リクルート【法人営業】

2009年株式会社ワークスアプリケーションズ【運用保守】

2012年グロービス経営大学院大学 BA

2015年株式会社Dive into Code（創業）

5

プログラミングと出会い


①問題解決能力発掘プログラム(2009年10月~2010年3月)

・ネットなし・レクチャー禁止・文献なし・呼び出し＆指導入り

本ネット

C B

DE HI

AC E DB( )

エンジニア

経験ゼロ

独力

C B

C B

DE HI

DE HI

6



②リーンスタートアップ(2014年4月~2014年10月)

・アイデアソン回・ハッカソン回・ tartup eekend 3回・もくもく会回

本

ネット

300アイデア

3プラン

1プラン

エンジニアメンバー

ゼロ独力開発

独力開発

エンジニアが・・・



2014年11月6日。「 ails3技術者認定ブロンズ」に一発合格！ailsを本気で学びじめて約2ヶ月半。

8

プログラミング・スクールを開始


『自分でカタチにできない』と思い込み、エンジニアを探すという口実で前に進められずにいる非エンジニア

まずカタチにすることでリーンスタートアップを行いたい・エンジニアとして働きたいという課題を

自力でプロトタイプを作成できるスキルを身につけることで解決する。

誰？何課題を？どう解決するか？

9

1. アプリと eb 通信流れを理解できている

2. wiftと ailsを連携する仕組みを把握できている

3. モチベーションがグッと向上している

本日ゴール

3つ状態に到達すること



開発環境 code

ac であれ誰でもインストールして、 wiftでi アプリを開発することができる。

ナビゲーションエリアエディタエリア

デバッグエリア

インスペクタペイン

ライブラリペイン


開発環境 Cloud9

Cloud9内に eb系言語やツールが用意されているため、ebブラウザで開いて使うだけ。

フォルダビューワファイルビューワ

ターミナル


uby on ails

uby 開発言語。 uby on ails ubyで開発する際「型」となるフレームワーク。


uby on ails

Basecamp創業者 David HeinemeierHansson氏によって、無駄な時間を減らすために作られた。

D (Don't repeat yourself) CoC (Convention over Configuration)

“ぼくがやろうとしていること、自分時間を浪費する時間を減らそうっていうこと。どうでもいいことに時間を費やす

を減らす。”

「同じことを繰り返さない」「設定よりも規約」

※出典：H ナビ「「10倍プログラマ」神話、 uby on ails 生み親が語った高い生産性カギと !?」


uby on ails

uby on ails で作られた ebサービス例

「ストリートアカデミー」さん


通信流れ

インターネット

ブラウザを通して通信が流れる。通信先コンピュータから処理結果が返る。ブラウザ上に画面が表示される。

http通信リクエストGE , , DE E E …

レスポンスH , images …

URL


通信流れ

画面表示内部処理データ管理

HTTP Server

Controller

View

Model

デー

タベ

ース

管理

シス

テム

内

Database

コンピュータがhttp通信を受け取り、役割に応じて処理が順番に流れ、レスポンスとして返る。

リクエストGE

レスポンスH

Router

① ② ③ ④ ⑤

⑥⑦⑧⑨10


uby on ails

各役割所定フォルダ内にファイルとして存在。そ中に開発言語 uby が書かれている。

http Server

Controller

View

Model

デー

タベ

ース

管理

シス

テム

Router

役割別フォルダ構造。ファイル内に uby が書かれている。

Cloud9内概念図

18

http

erve

r

def index

@blogs = Blog.all

end

<% @blogs.each do |blog| %><% end %>

class Blog < ActiveRecord::Baseend


http通信と組み合せから処理を流す先を判定。C→( →DB→ →C)→ →Cと通信が流れる。

/config

/ro

ute

s.rb

/blogs

httpGE

blogs#

inde

x

/controllers/blogs_controller.rb

/models/blog.rb

ostgreblogsテーブル

/views/blogs/index.html.erb

uby on ails

h1 {}

/assets/stylesheets/blogs.css.scss

“ / マッパー”Blog.all↓

ubyからに変換↓E EC * F blogs;

19

http

erve

r


オモテ、H , C 。ウラ uby, 。 ails httpリクエストからレスポンスまで流れをつくる。

/config

/ro

ute

s.rb

/blogs

httpGE

blogs#index

/controllers/blogs_controller.rb

/models/blog.rb

ostgreblogsテーブル

/views/blogs/index.html.erb

/assets/stylesheets/blogs.css.scss

uby on ails


uby on ails

画面表示内部処理データ管理

H

erve

r

Contro

ller

iew

ode

l

デー

タベ

ース

管理

シス

テム

内

Database

wift ⇄ ails連携第一歩、http リクエストからレスポンスまで流れを理解すること。

リクエストGE

レスポンスH

oute

r

① ② ③ ④ ⑤

⑥⑦⑧⑨10


作業方法基礎

マニュアルを見る。コマンドをコピーする。ターミナルに入力する。エンターで実行する。

①マニュアルを見る ②コマンドを作成する ③ターミナルに入力する

編集が必要

そまま使える

コピー＆ペースト

編集してコマンドを完成

※メモ帳で半角”や’が全角に自動変換されることがあるため使用禁止

23

【 E 0】 codeインストール

【 E 0】Cloud9で開発環境を構築

【 E 1】Cloud9でお試しアプリケーション開発

【 E 1】 wiftでブログ投稿と完了画面作成

【 E 2】ブログ入力欄と投稿ボタン作成

【 E 3】ブログ投稿データをH リクエスト

【 E 4】 ailsアプリへA Iサーバ機能実装

実践ワーク


4ステップで、 wiftと ailsを連携！

1

2

3

0

4

24

Cloud9

実践ワーク

【図解】4ステップ


code（ローカル端末）

Class

ファ

イル

0

H

erve

r

Contro

ller

iew

ode

l

Database

oute

r

0

iew

Contro

ller

Class

ファ

イル

2

iew

Contro

ller

1

Class

ファ

イル

Class

ファ

イル

Class

ファ

イル

3C

ontro

ller

4

25

実践ワーク


0 開発環境を構築、 ailsアプリケーション開発

Cloud9code（ローカル端末）

H

erve

r

Contro

ller

iew

ode

l

Database

oute

r

26


実践ワーク


wiftでブログ投稿と完了画面作成1

iew

Contro

ller

iew

Contro

ller

入力フォームヘッダー作成

投稿完了画面作成

完了メッセージ設定

完了画面へ遷移設定

27

実践ワーク

ブログ入力欄と投稿ボタン作成


2


iew

Contro

ller

iew

Contro

ller

Class

ファ

イル

AddBlogiewController

func viewDid oad

func sendtaped()

extField

sendbtn

28

実践ワーク

ブログ投稿データをH リクエスト


3


iew

Contro

ller

Class

ファ

イル

iew

Contro

ller

Class

ファ

イル

Cocoa odsインストール

Alamofire

BlogClass

ファ

イル

Blog anagerC

lassフ

ァイ

ル

Env

func postBlog

func Documentroot()

H リクエスト

29

実践ワーク

Cloud9code（ローカル端末）

H

erve

r

iew

ode

l

oute

r

ailsアプリへA Iサーバ機能実装4

Class

ファ

イル

iew

Contro

ller

Class

ファ

イル

iew

Contro

ller

Class

ファ

イル

Class

ファ

イル

Database

Contro

ller

Contro

ller

POST /api/v1/blogs

Api::V1::Blogs

skip_before_action

30

エンジニアになるなら DIVE INTO CODE

受講体験記ご紹介

私たちと共に稼ぐチカラを磨きましょう！

ふるってご参加をお待ちしております！

【基礎】3時間でswift ⇄ rails連携！apiサーバ構築講座

Education