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

929 views

Published on

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

Published in: Internet
0 Comments
5 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
929
On SlideShare
0
From Embeds
0
Number of Embeds
36
Actions
Shares
0
Downloads
5
Comments
0
Likes
5
Embeds 0
No embeds

No notes for slide

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

  1. 1. Image:https://flic.kr/p/5959u3 ノンゲーム系スマホアプリ制作 First Step ノンゲーム系スマホアプリ勉強会 07/23 Munesada Yohei @yoheiMune
  2. 2. 宗定 洋平 むねさだ ようへい
  3. 3. @yoheiMune ハンドルネーム
  4. 4. @渋谷にある緑のチャラくない会社 フロントエンドエンジニア ブログもやってます → http://www.yoheim.net/
  5. 5. はじまり Introduction Image:
  6. 6. 今日お話させて頂くことは スマホアプリの作り方 です
  7. 7. スマホアプリの作り人のレベルを分類すると 1. やりたいと思っている人 2. やりたいと言っている人 3. 実際に行動に移す人 4. 行動に移して結果を出す人 5. 行動を続けて結果を出し続ける人 6. 結果が世間に広く受け入れられている人
  8. 8. このセッションの対象者は 1. やりたいと思っている人 2. やりたいと言っている人 3. 実際に行動に移す人 4. 5. 6.
  9. 9. このセッションのゴールは 1. 2. 3. 4. 行動に移して結果を出す人 5. 行動を続けて結果を出し続ける人 6. 結果が世間に広く受け入れられている人
  10. 10. ちなみに後続のセッションでは  きっと NewsPicksのUIデザイン 「あすけん」が受ける3つのポイント RoomClipにおけるHTTP通信手法 といった、本セッションの次のステップ の話が聞けるはず!! 違ったらごめんなさい(>.<。。。
  11. 11. • 導入 • スマホアプリの作り方 • 終わりに Agenda
  12. 12. How to create apps スマホアプリの作り方 Image:
  13. 13. スマホアプリ制作の6つのステップ
  14. 14. 企画と画面レイアウト
  15. 15. ・何を作りますか? ・どんな機能がありますか? ・どんな使い勝手ですか? ・何を解決するものですか? 紙やEvernoteなどにドンドンと書き出していきます。 やりたいことをすべて吐き出すまで続けます。 企画・画面レイアウト
  16. 16. 困難#1 作りたいものが・・・思いつかない・・・
  17. 17. この観点はどうですか? ・日常困っていることを解決する何か ・暇つぶしに使う何か ・既存のアプリを真似してみる ・既存のアプリを掛け合わせてみる ・など ・日常困っていることを解決する何か ・暇つぶしに使う何か ・既存のアプリを真似してみる ・既存のアプリを掛け合わせてみる ・など
  18. 18. ポイント#1 最初はしょぼくて当たり前!! 作り始める1歩を踏み出すことが大切
  19. 19. 今回はLivedoor Reader のiPhoneアプリを作ります
  20. 20. 参考:Livedoor Readerとは いわゆるひとつのRSSリーダーです Feedlyのお友達です
  21. 21. やりたいことを書き出したらこんな感じでした
  22. 22. 企画・画面レイアウト
  23. 23. 企画内容を画面にプロットします ← 広告を入れたい ← フィードのリスト表示 ← 未読件数を表示 ← 未読/既読/Pinの表示切替 ← フィードのURLも表示 ← 読み込み状況の表示
  24. 24. ポイント#2 ①画面レイアウトは手書きがオススメ! ②内容まで具体的に書くと良い!
  25. 25. 実現可能性のチェック
  26. 26. ・Livedoor Readerって外部から使えるの? ・SNSシェアしたいけどどうやるの? ・データを永続化したいけどやったことないな ・etc・・・ 実現できるのかを確認します
  27. 27. ない・・・Livedoor Readerの公式APIは・・・ 困難#2
  28. 28. GoogleさんとかChromeさんで調べました ①Livedoor Readerのページを開いて ③APIの内容を確認していきます ・プロトコルとメソッド ・URL ・送信内容 ・レスポンス内容 ・認証方法(CookieやHTTPヘッダ) ・など ②フィードをクリック
  29. 29. そんなこんなで 実現できる方法を見つけていきます
  30. 30. デザイン
  31. 31. デザインなんてしたことないよ・・・ 困難#3 画面デザインってExcelでやるんじゃないの。。。
  32. 32. 引用: SIer時代は、Excelさまさまでした
  33. 33. Image:https:// Design so Important
  34. 34. ポイント#3 1. Apple標準のUIを使う 2. 「RSS アプリ デザイン」でググる 3. 「アイコン 無料」でググる 4. GIMP2とかPhotoshopを使う 5. 知り合いのデザイナーに頼む なんとか乗り切ってください!
  35. 35. 今回はこんなデザインにしました etc
  36. 36. プログラム設計
  37. 37. プログラム設計って??
  38. 38. ポイント#4 プログラム設計を通して コードの責任分担を決めていきます プログラム設計の善し悪しで コードの書きやすさが変わります!!
  39. 39. 今回はこんな感じにしてみました View /ViewController Database Livedoor Reader DBManager SyncManager Service
  40. 40. 今回はこんな感じにしてみました View /ViewController Database Livedoor Reader DBManager SyncManager Service APIを扱う
  41. 41. 今回はこんな感じにしてみました View /ViewController Database Livedoor Reader DBManager SyncManager Service 永続化を扱う
  42. 42. 今回はこんな感じにしてみました View /ViewController Database Livedoor Reader DBManager SyncManager Service 高レベルAPI
  43. 43. 今回はこんな感じにしてみました View /ViewController Database Livedoor Reader DBManager SyncManager Service 表示を扱う
  44. 44. コーディング
  45. 45. ひたすらコーディングします!
  46. 46. フィードを読み込んだ時に、スクロールがカクつくぞ カクつく...
  47. 47. フィードを読み込むとスクロールがカクつく 【Problem】 フィードを読み込んでDBに保存するとき UIが少しだけフリーズしてしまう 【Resolution】 UIの表示処理とDB保存は 別スレッドで行うようにする
  48. 48. 急にアプリがクラッシュしたり 処理が止まったりするようになったぞ・・・ クラッシュする...
  49. 49. 処理が意図せず停止する 【Problem】 DBに複数のスレッドからアクセスすることで クラッシュしたりデッドロックが発生しているようだ・・。 【Resolution】 CoreDataはスレッドごとに NSManagedObjectContextを用意する。 Database MultiThread Access
  50. 50. 問題いっぱい出て大変だー。 SNSとかでアウトプットできる機能を 全部作るの面倒だなー。 めんどくなってきた...
  51. 51. 作るのが面倒くさくなってきた 【Problem】 Twitter,Facebook,Safari,Mail, Evernote,・・・etc 作るの面倒になってきたぞーw 【Resolution】 諦めずにやることが大切
  52. 52. ポイント#5 妥協するもしないも自分次第!! アプリの品質にはできるだけ妥協しない
  53. 53. リリース
  54. 54. リリース素材を作ります **************** リリースノート 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 ・・・
  55. 55. iPhoneアプリの場合は iTunes Connectでアプリ審査の準備をし XCODEからアプリをアップロードします
  56. 56. 審査が終わるまでじっと待ちます・・・
  57. 57. 来る日も来る日も待ちます・・・
  58. 58. 審査が終わった・・・
  59. 59. Image:https://flic.kr/p/5ZwcHe でたぞー!!!
  60. 60. 復習:6つのステップ
  61. 61. Most Important Thing 最も大切なこと Image:https://
  62. 62. いまはこの状態 4. 行動に移して結果を出す人 5. 行動を続けて結果を出し続ける人 6. 結果が世間に広く受け入れられている人 自分の思いを 世界に発信できる状態
  63. 63. 一番大切なことそれは モチベーション だと思っています
  64. 64. 将来どのようになりたいですか?
  65. 65. 私は 世界史に名を残すサービスを 創りたい!!
  66. 66. Thank you http://github.com/yoheiMune http://www.yoheim.net http://twitter.com/yoheiMune

×