post Image
冬休みの8日間を使って、ダンス動画アプリを作った

ゼロベースからアプリを作ってリリースするまでの経験がなかったので、
29日からの8日間でダンス動画を取得するアプリを作りました。

スクリーンショット 2017-01-06 0.02.56.png
動画はこちら

システム構成

スクリーンショット 2017-01-05 23.42.22.png
サーバーはさくらVPSを使用
管理者画面ではYoutubeやニコニコ動画から取得してきた動画に対し、
ジャンルのタグづけや公開/非公開といった設定をおこないます。

分担

サーバー&管理者画面 クライアント(iOS)
エンジニア友達

準備

・ Trelloにタスクを書き出す
・ 参考アプリ調査

スケジュール

Dec. 29

アプリの機能と実装の優先順位を話し合う
…ユーザーの視点に立って、行いたい操作を挙げ、
 その操作をする上で必要な機能を洗い出すという作業をしました。

 この時に意識したのは、便利な機能はいくらでも思いつくものなのですが、
 とにかくシンプルなアプリにすることを目標としました。

 決まった作業はタスクに落とし込んでTrelloに登録。

UIイメージのすり合わせ
…参考にできそうなアプリを探し、お互いに10案ずつ探した参考物を見せ合ってイメージを固めました。

iPhoneデザインボックス
デザインがWebっぽいものが多い

The best free UI kits, February 2015
“iPhone cool ui”で画像検索して海外のかっこいいUI紹介サイトを探して見つけた

pinterest UI/UXタグ
上記と同じく”iPhone cool ui”で画像検索して辿り着いた
iPhoneに限らず程よくいろんなタイプのUI/UXがあるので1番インスピレーションは受けた

50 Free UI Kits & Templates for Photoshop & Sketch 2017

Dec. 30

大掃除実施
Sketchを使ってUIを作成
スクリーンショット 2017-01-06 0.26.33.png
…UIは経験・知見が豊富ないとまとめきることが難しいので、
 深堀せず参考アプリを真似させてもらう形で時間をかけないようにしました。
 こだわりだすと終わりがないですし、手戻りありきで進めました。

 Sketchはコンポーネント化ができるのでその機能を駆使してどんどん類似画像を色々作ってみては推敲を繰り返しました。

 10画面選ぶという作業の時点で色々な作品を見てイメージは固まっていたので試したいパターンは限られていて総作業時間は3~4時間位です。

Dec. 31

UIが決まったので実際にXcodeで開発を始めました。

グラデーション
…今回の私のこだわりポイントです。
 CAGradientLayerを使ってグラデーションレイヤーを生成しました。

 生成したグラデーションレイヤーはself.viewに対して追加し、
 tableViewは背景色をclearにすることで、
 テーブルをスクロールしても常に同じグラデションカラーが背景に見えるようにしました。

TableView
…1回作って手直ししたのですが、tableViewで作り出すより、
 ViewControllerをベースに作って必要なところだけtatbleViewにする方が、
 あとあと融通が効く気がします。

 tableViewだとviewをheaderとfooterに1つづつしか追加できないあたりに
 不自由さを感じました。

Sketchでロゴを作成する
スクリーンショット 2017-01-06 0.27.29.png
…予定してなかったのですがテンション上がってつくっちゃいました。
 UI作成時と同じように参考サイトを見て真似していくつか作って推敲していきました。

HAPPY NEW YEAR!!!

Jan. 1

素材の調達
スクリーンショット 2017-01-06 0.24.03.png
ICOOON MONO

サイドメニューを実装する
awesome-ios
ライブラリのリンクがずらっと貼られているサイトです。
この中からサイドメニューを実装するライブラリを選定しました。

結果選んだライブラリが導入までできたもののなんだかCocoaPod対応が完璧ではないようで、
サイトから色々ファイルを拝借しないと動かなく、動いてもこれも改造できね〜よ。
ってことでサイドメニューは自作しました。

実際やってみたらサイドメニューの実装ってそんなにソースコード書かなくても実装できるんですね。

Jan. 2

サイドメニューを実装する
…自作しようとしたところなぜか、本当に原因がわからないのですが、
 サイドメニューを閉じる時にタップイベントを検知できず,知人のUIに詳しい方に相談しました。

 本当に困った時に相談できる人がいるかいないかって大事です。

傷物語を見る
じゃぱないのう!
しのぶ.jpeg

Jan. 3

APIからデータを取得&Realm実装
…最初HTTPでAPIを作成していたのですが、
 POSTを正しく投げているのにサーバーにリクエストが届かないという問題が発生しました。

 調べたところ。iOS9.0からAppTransportSecurityというものができて、
 HTTP通信はデフォルトではできない仕様となったというのがあやしいのではないかということで、
 APIをhttps接続に直したとこと無事リクエストを投げられるようになりました。

 一応HTTPでも通信させる方法はあります。
 swiftでUIWebViewを作る(httpにも対応)

 ただしこれをするとリリースの申請時にHTTPを許可する理由の説明を求められるそうです。

Jan. 4

ジムで自転車をこぐ
検索まわりの機能を実装
…ここでAPIの不具合がぽろぽろみつかったのですが、
 いつも会社だとAPIの不具合なのかなにが悪いのか調べるのが苦手だったので、
 小規模でシステムを作って自由に色々いじれたのは勉強になりました。

Jan. 5

動画再生機能を実装
…厳密には動画再生機能は実装していません。
 WebViewを使うと動画再生機能なども使えるのでとても便利です。

<今後>

ダンスの練習をする人に向けて、
気に入ったダンス動画をダウンロードして、
トリミングや再生速度の変更、
できれば勝手に8カウントごとに動画が分割されてそれを見て8カウントずつ練習をできるようなものを作りたいと思っていています。

<反省>

リリースまでを目標としていましたが、管理者画面ができて、下記問題を解決できたらリリースします。
・動画によっては”この動画には–さんのコンテンツが含まれているため、特定のサイトでの再生が制限されています。”と表示される。

結果特に新しい技術を試したというよりはリリースが目的だったので
既に習得している技術を使って開発を進めました。
なので成長というより復習をしたといった感じでした。

ゼロベースから作って良い復習にはなったのですが、
成長という観点ではあまり満足がいっておらず、
ある程度基礎的なことができるようになってからの技術力向上の良い方法があればコメントにお願いします。

最後に

書き方について、プルリク絶賛大歓迎です!!
動画編集についても詳しい方がいましたらぜひ繋がってください!^^
GitHub


『 Swift 』Article List
Category List

Eye Catch Image
Read More

Androidに関する現役のエンジニアのノウハウ・トレンドのトピックなど技術的な情報を提供しています。コード・プログラムの丁寧な解説をはじめ、初心者にもわかりやすいように写真や動画を多く使用しています。

Eye Catch Image
Read More

AWSに関する現役のエンジニアのノウハウ・トレンドのトピックなど技術的な情報を提供しています。コード・プログラムの丁寧な解説をはじめ、初心者にもわかりやすいように写真や動画を多く使用しています。

Eye Catch Image
Read More

Bitcoinに関する現役のエンジニアのノウハウ・トレンドのトピックなど技術的な情報を提供しています。コード・プログラムの丁寧な解説をはじめ、初心者にもわかりやすいように写真や動画を多く使用しています。

Eye Catch Image
Read More

CentOSに関する現役のエンジニアのノウハウ・トレンドのトピックなど技術的な情報を提供しています。コード・プログラムの丁寧な解説をはじめ、初心者にもわかりやすいように写真や動画を多く使用しています。

Eye Catch Image
Read More

dockerに関する現役のエンジニアのノウハウ・トレンドのトピックなど技術的な情報を提供しています。コード・プログラムの丁寧な解説をはじめ、初心者にもわかりやすいように写真や動画を多く使用しています。

Eye Catch Image
Read More

GitHubに関する現役のエンジニアのノウハウ・トレンドのトピックなど技術的な情報を提供しています。コード・プログラムの丁寧な解説をはじめ、初心者にもわかりやすいように写真や動画を多く使用しています。

Eye Catch Image
Read More

Goに関する現役のエンジニアのノウハウ・トレンドのトピックなど技術的な情報を提供しています。コード・プログラムの丁寧な解説をはじめ、初心者にもわかりやすいように写真や動画を多く使用しています。

Eye Catch Image
Read More

Javaに関する現役のエンジニアのノウハウ・トレンドのトピックなど技術的な情報を提供しています。コード・プログラムの丁寧な解説をはじめ、初心者にもわかりやすいように写真や動画を多く使用しています。

Eye Catch Image
Read More

JavaScriptに関する現役のエンジニアのノウハウ・トレンドのトピックなど技術的な情報を提供しています。コード・プログラムの丁寧な解説をはじめ、初心者にもわかりやすいように写真や動画を多く使用しています。

Eye Catch Image
Read More

Laravelに関する現役のエンジニアのノウハウ・トレンドのトピックなど技術的な情報を提供しています。コード・プログラムの丁寧な解説をはじめ、初心者にもわかりやすいように写真や動画を多く使用しています。

Eye Catch Image
Read More

Pythonに関する現役のエンジニアのノウハウ・トレンドのトピックなど技術的な情報を提供しています。コード・プログラムの丁寧な解説をはじめ、初心者にもわかりやすいように写真や動画を多く使用しています。

Eye Catch Image
Read More

Rubyに関する現役のエンジニアのノウハウ・トレンドのトピックなど技術的な情報を提供しています。コード・プログラムの丁寧な解説をはじめ、初心者にもわかりやすいように写真や動画を多く使用しています。

Eye Catch Image
Read More

Scalaに関する現役のエンジニアのノウハウ・トレンドのトピックなど技術的な情報を提供しています。コード・プログラムの丁寧な解説をはじめ、初心者にもわかりやすいように写真や動画を多く使用しています。

Eye Catch Image
Read More

Swiftに関する現役のエンジニアのノウハウ・トレンドのトピックなど技術的な情報を提供しています。コード・プログラムの丁寧な解説をはじめ、初心者にもわかりやすいように写真や動画を多く使用しています。

Eye Catch Image
Read More

Unityに関する現役のエンジニアのノウハウ・トレンドのトピックなど技術的な情報を提供しています。コード・プログラムの丁寧な解説をはじめ、初心者にもわかりやすいように写真や動画を多く使用しています。

Eye Catch Image
Read More

Vue.jsに関する現役のエンジニアのノウハウ・トレンドのトピックなど技術的な情報を提供しています。コード・プログラムの丁寧な解説をはじめ、初心者にもわかりやすいように写真や動画を多く使用しています。

Eye Catch Image
Read More

Wordpressに関する現役のエンジニアのノウハウ・トレンドのトピックなど技術的な情報を提供しています。コード・プログラムの丁寧な解説をはじめ、初心者にもわかりやすいように写真や動画を多く使用しています。

Eye Catch Image
Read More

機械学習に関する現役のエンジニアのノウハウ・トレンドのトピックなど技術的な情報を提供しています。コード・プログラムの丁寧な解説をはじめ、初心者にもわかりやすいように写真や動画を多く使用しています。