Image:https://flic.kr/p/5959u3

ノンゲーム系スマホアプリ制作

First Stepノンゲーム系スマホアプリ勉強会 07/23

Munesada Yohei @yoheiMune

宗定 洋平むねさだ ようへい

@yoheiMuneハンドルネーム

＠渋谷にある緑のチャラくない会社

フロントエンドエンジニア

ブログもやってます → http://www.yoheim.net/

はじまり

Introduction

Image:

今日お話させて頂くことは

スマホアプリの作り方です

スマホアプリの作り人のレベルを分類すると

1. やりたいと思っている人

2. やりたいと言っている人

3. 実際に行動に移す人

4. 行動に移して結果を出す人

5. 行動を続けて結果を出し続ける人

6. 結果が世間に広く受け入れられている人

このセッションの対象者は

1. やりたいと思っている人

2. やりたいと言っている人

3. 実際に行動に移す人

4.

5.

6.

このセッションのゴールは

1.

2.

3.

4. 行動に移して結果を出す人

5. 行動を続けて結果を出し続ける人

6. 結果が世間に広く受け入れられている人

ちなみに後続のセッションでは　“きっと”

NewsPicksのUIデザイン

「あすけん」が受ける３つのポイント

RoomClipにおけるHTTP通信手法

といった、本セッションの次のステップ の話が聞けるはず!!

違ったらごめんなさい(>.<。。。

• 導入

• スマホアプリの作り方

• 終わりに

Agenda

How to create appsスマホアプリの作り方

Image:

スマホアプリ制作の６つのステップ

企画と画面レイアウト

・何を作りますか？ ・どんな機能がありますか？ ・どんな使い勝手ですか？ ・何を解決するものですか？

紙やEvernoteなどにドンドンと書き出していきます。

やりたいことをすべて吐き出すまで続けます。

企画・画面レイアウト

困難#1

作りたいものが・・・思いつかない・・・

この観点はどうですか？

・日常困っていることを解決する何か ・暇つぶしに使う何か ・既存のアプリを真似してみる ・既存のアプリを掛け合わせてみる ・など

・日常困っていることを解決する何か ・暇つぶしに使う何か ・既存のアプリを真似してみる ・既存のアプリを掛け合わせてみる ・など

ポイント#1

最初はしょぼくて当たり前!! 作り始める1歩を踏み出すことが大切

今回はLivedoor Reader のiPhoneアプリを作ります

参考：Livedoor Readerとは

いわゆるひとつのRSSリーダーですFeedlyのお友達です

やりたいことを書き出したらこんな感じでした

企画・画面レイアウト

企画内容を画面にプロットします

← 広告を入れたい← フィードのリスト表示← 未読件数を表示

← 未読/既読/Pinの表示切替

← フィードのURLも表示

← 読み込み状況の表示

ポイント#2

①画面レイアウトは手書きがオススメ！

②内容まで具体的に書くと良い！

実現可能性のチェック

・Livedoor Readerって外部から使えるの？ ・SNSシェアしたいけどどうやるの？ ・データを永続化したいけどやったことないな ・etc・・・

実現できるのかを確認します

ない・・・Livedoor Readerの公式APIは・・・

困難#2

GoogleさんとかChromeさんで調べました

①Livedoor Readerのページを開いて

③APIの内容を確認していきます ・プロトコルとメソッド ・URL ・送信内容 ・レスポンス内容 ・認証方法（CookieやHTTPヘッダ） ・など

②フィードをクリック

そんなこんなで 実現できる方法を見つけていきます

デザイン

デザインなんてしたことないよ・・・

困難#3

画面デザインってExcelでやるんじゃないの。。。

引用：

SIer時代は、Excelさまさまでした

Image:https://

Design so Important

ポイント#3

1. Apple標準のUIを使う 2. 「RSS アプリ デザイン」でググる 3. 「アイコン 無料」でググる 4. GIMP2とかPhotoshopを使う 5. 知り合いのデザイナーに頼む

なんとか乗り切ってください！

今回はこんなデザインにしました

etc

プログラム設計

プログラム設計って？？

ポイント#4

プログラム設計を通して

コードの責任分担を決めていきます

プログラム設計の善し悪しで

コードの書きやすさが変わります!!

今回はこんな感じにしてみました

View /ViewController

Database

Livedoor Reader

DBManager

SyncManager

Service

今回はこんな感じにしてみました

View /ViewController

Database

Livedoor Reader

DBManager

SyncManager

ServiceAPIを扱う

今回はこんな感じにしてみました

View /ViewController

Database

Livedoor Reader

DBManager

SyncManager

Service永続化を扱う

今回はこんな感じにしてみました

View /ViewController

Database

Livedoor Reader

DBManager

SyncManager

Service高レベルAPI

今回はこんな感じにしてみました

View /ViewController

Database

Livedoor Reader

DBManager

SyncManager

Service

表示を扱う

コーディング

ひたすらコーディングします！

フィードを読み込んだ時に、スクロールがカクつくぞ

カクつく...

フィードを読み込むとスクロールがカクつく

【Problem】フィードを読み込んでDBに保存するとき UIが少しだけフリーズしてしまう

【Resolution】UIの表示処理とDB保存は 別スレッドで行うようにする

急にアプリがクラッシュしたり 処理が止まったりするようになったぞ・・・

クラッシュする...

処理が意図せず停止する

【Problem】DBに複数のスレッドからアクセスすることで クラッシュしたりデッドロックが発生しているようだ・・。

【Resolution】CoreDataはスレッドごとに NSManagedObjectContextを用意する。

Database

MultiThread Access

問題いっぱい出て大変だー。 SNSとかでアウトプットできる機能を

全部作るの面倒だなー。

めんどくなってきた...

作るのが面倒くさくなってきた

【Problem】Twitter,Facebook,Safari,Mail, Evernote,・・・etc 作るの面倒になってきたぞーw

【Resolution】諦めずにやることが大切

ポイント#5

妥協するもしないも自分次第!! アプリの品質にはできるだけ妥協しない

リリース

リリース素材を作ります

**************** リリースノート ver.1.0 **************** FastLDRは、Livedoor Readerクライアントで、たくさんの記事をサクサクと読めむことの出来る便利なアプリケーションです。特に未読記事をさくさくと読むことを重視して設計されており、オフライン機能やWeb先読み機能などの便利な機能がたくさん備わっています。 !【主な機能】 ■オフライン機能 ・フィードを一度ロードすると、オフラインでも閲覧することが可能です。 ・・・

********* リリースノート ver.1.0 （英語ver）**************** FastLDR is a one of Livedoor Reader Client, and provides you to read many feed items easily and comfortably. We create this for reading many item especially unread items, The app has many nice functions, for example offline cache, and preloading web pages. !【Features】 ■It works at Offline environment Once you download items, you can read them at offline, even under the Airplane Mode. ・・・

iPhoneアプリの場合は iTunes Connectでアプリ審査の準備をし XCODEからアプリをアップロードします

審査が終わるまでじっと待ちます・・・

来る日も来る日も待ちます・・・

審査が終わった・・・

Image:https://flic.kr/p/5ZwcHe

でたぞー!!!

復習：６つのステップ

Most Important Thing最も大切なこと

Image:https://

いまはこの状態

4. 行動に移して結果を出す人

5. 行動を続けて結果を出し続ける人

6. 結果が世間に広く受け入れられている人

自分の思いを 世界に発信できる状態

一番大切なことそれは

モチベーションだと思っています

将来どのようになりたいですか？

私は

世界史に名を残すサービスを

創りたい!!

Thank you

http://github.com/yoheiMune

http://www.yoheim.net

http://twitter.com/yoheiMune