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