ノンゲーム系スマホアプリ勉強会第2弾 セッション1の内容です http://atnd.org/events/51656

1. Image:https://flic.kr/p/5959u3
ノンゲーム系スマホアプリ制作
First Step
ノンゲーム系スマホアプリ勉強会 07/23
Munesada Yohei
@yoheiMune

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

3. @yoheiMune
ハンドルネーム

4. ＠渋谷にある緑のチャラくない会社
フロントエンドエンジニア
ブログもやってます → http://www.yoheim.net/

6. はじまり
Introduction
Image:

7. 今日お話させて頂くことは
スマホアプリの作り方
です

8. スマホアプリの作り人のレベルを分類すると
1. やりたいと思っている人
2. やりたいと言っている人
3. 実際に行動に移す人
4. 行動に移して結果を出す人
5. 行動を続けて結果を出し続ける人
6. 結果が世間に広く受け入れられている人

9. このセッションの対象者は
1. やりたいと思っている人
2. やりたいと言っている人
3. 実際に行動に移す人
4.
5.
6.

10. このセッションのゴールは
1.
2.
3.
4. 行動に移して結果を出す人
5. 行動を続けて結果を出し続ける人
6. 結果が世間に広く受け入れられている人

11. ちなみに後続のセッションでは きっと
NewsPicksのUIデザイン
「あすけん」が受ける３つのポイント
RoomClipにおけるHTTP通信手法
といった、本セッションの次のステップ
の話が聞けるはず!!
違ったらごめんなさい(>.<。。。

12. • 導入
• スマホアプリの作り方
• 終わりに
Agenda

13. How to create apps
スマホアプリの作り方
Image:

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

15. 企画と画面レイアウト

16. ・何を作りますか？
・どんな機能がありますか？
・どんな使い勝手ですか？
・何を解決するものですか？
紙やEvernoteなどにドンドンと書き出していきます。
やりたいことをすべて吐き出すまで続けます。
企画・画面レイアウト

17. 困難#1
作りたいものが・・・思いつかない・・・

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

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

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

21. 参考：Livedoor Readerとは
いわゆるひとつのRSSリーダーです
Feedlyのお友達です

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

23. 企画・画面レイアウト

24. 企画内容を画面にプロットします
← 広告を入れたい
← フィードのリスト表示
← 未読件数を表示
← 未読/既読/Pinの表示切替
← フィードのURLも表示
← 読み込み状況の表示

25. ポイント#2
①画面レイアウトは手書きがオススメ！
②内容まで具体的に書くと良い！

26. 実現可能性のチェック

27. ・Livedoor Readerって外部から使えるの？
・SNSシェアしたいけどどうやるの？
・データを永続化したいけどやったことないな
・etc・・・
実現できるのかを確認します

28. ない・・・Livedoor Readerの公式APIは・・・
困難#2

29. GoogleさんとかChromeさんで調べました
①Livedoor Readerのページを開いて
③APIの内容を確認していきます
・プロトコルとメソッド
・URL
・送信内容
・レスポンス内容
・認証方法（CookieやHTTPヘッダ）
・など
②フィードをクリック

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

31. デザイン

32. デザインなんてしたことないよ・・・
困難#3
画面デザインってExcelでやるんじゃないの。。。

33. 引用：
SIer時代は、Excelさまさまでした

34. Image:https://
Design so Important

35. ポイント#3
1. Apple標準のUIを使う
2. 「RSS アプリ デザイン」でググる
3. 「アイコン 無料」でググる
4. GIMP2とかPhotoshopを使う
5. 知り合いのデザイナーに頼む
なんとか乗り切ってください！

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

37. プログラム設計

38. プログラム設計って？？

39. ポイント#4
プログラム設計を通して
コードの責任分担を決めていきます
プログラム設計の善し悪しで
コードの書きやすさが変わります!!

40. 今回はこんな感じにしてみました
View
/ViewController
Database
Livedoor Reader
DBManager
SyncManager
Service

41. 今回はこんな感じにしてみました
View
/ViewController
Database
Livedoor Reader
DBManager
SyncManager
Service
APIを扱う

42. 今回はこんな感じにしてみました
View
/ViewController
Database
Livedoor Reader
DBManager
SyncManager
Service
永続化を扱う

43. 今回はこんな感じにしてみました
View
/ViewController
Database
Livedoor Reader
DBManager
SyncManager
Service
高レベルAPI

44. 今回はこんな感じにしてみました
View
/ViewController
Database
Livedoor Reader
DBManager
SyncManager
Service
表示を扱う

45. コーディング

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

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

48. フィードを読み込むとスクロールがカクつく
【Problem】
フィードを読み込んでDBに保存するとき
UIが少しだけフリーズしてしまう
【Resolution】
UIの表示処理とDB保存は
別スレッドで行うようにする

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

50. 処理が意図せず停止する
【Problem】
DBに複数のスレッドからアクセスすることで
クラッシュしたりデッドロックが発生しているようだ・・。
【Resolution】
CoreDataはスレッドごとに
NSManagedObjectContextを用意する。
Database
MultiThread Access

51. 問題いっぱい出て大変だー。
SNSとかでアウトプットできる機能を
全部作るの面倒だなー。
めんどくなってきた...

52. 作るのが面倒くさくなってきた
【Problem】
Twitter,Facebook,Safari,Mail,
Evernote,・・・etc
作るの面倒になってきたぞーw
【Resolution】
諦めずにやることが大切

53. ポイント#5
妥協するもしないも自分次第!!
アプリの品質にはできるだけ妥協しない

54. リリース

55. リリース素材を作ります
**************** リリースノート ver.1.0 ****************
FastLDRは、Livedoor Readerクライアントで、たくさんの記
ションです。特に未読記事をさくさくと読むことを重視して設計
便利な機能がたくさん備わっています。
!
【主な機能】
■オフライン機能
・フィードを一度ロードすると、オフラインでも閲覧することが
・・・
********* リリースノート ver.1.0 （英語ver）****************
FastLDR is a one of Livedoor Reader Client, and provides
comfortably. We create this for reading many item espec
functions, for example offline cache, and preloading web
!
【Features】
■It works at Offline environment
Once you download items, you can read them at offline, e
・・・

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

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

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

59. 審査が終わった・・・

60. Image:https://flic.kr/p/5ZwcHe
でたぞー!!!

61. 復習：６つのステップ

62. Most Important Thing
最も大切なこと
Image:https://

63. いまはこの状態
4. 行動に移して結果を出す人
5. 行動を続けて結果を出し続ける人
6. 結果が世間に広く受け入れられている人
自分の思いを
世界に発信できる状態

64. 一番大切なことそれは
モチベーション
だと思っています

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

66. 私は
世界史に名を残すサービスを
創りたい!!

67. Thank you
http://github.com/yoheiMune
http://www.yoheim.net
http://twitter.com/yoheiMune