RSS

KenG Blog

MRS - 元春レイディオショー iPhone App 開発の記録 〜 初めてのプログラミングからApp Storeリリースまでの40日

初出：2013年12月 6日 23:42

Digital Book on iPad

今回が初めてのiOSプログラム開発ということになる。人が作ったソースを見る機会はあったけど、自分でObjective-Cのコードを打つというのは全くの初めてだった。開発期間は3ヶ月で、コードを書いていたのは実質40日ほど。完成したプロジェクト・ファイルの中を見て、よくもここまで作ったものだと他人事のように感心している。

今までにも何度かトライしたことがあり、解説本を買ってみたりもした。でもまったく身にならず終わっていった。それがなんで今回上手く行ったかというと、2014年から、いよいよ仕事の軸足をiOSアプリケーションの企画・開発・運用に移そうと考え、自分にとっては思い切った投資もしようとしている。それなので最悪、自分でもコーディングできるくらいにしておかないと潰しがきかないと思い、今回は真剣に頑張ってみた。

8月8日頃から本を読んだり、サイトを見たりして勉強を始める。この時点ではクラスもインスタンスもメソッドもデリゲートもな〜んにも分からず。チンプンカンプン。理解するにも何かとっかかりが必要だと思い、手帳に書き始めたのはこんなレベル。

learning_iOS.jpg

8月15日には、サンプル・コードを参考にしながら、マップ画面の中心地の緯度経度と住所を取得するという単機能アプリケーションを完成させてみる。

8月23日。もう少しステップアップしたものを作ってみようと思い立ち、ネットワークからデータを受信して、それを一覧表示するプログラムを書き始める。データは何が良いかと考えた時に、自分が5年間登録し続けてきた「元春レイディオショー」のプレイリストが最適だと思い、そこから始めてみる。

このプログラムは、サンプル・コードに頼らずゼロから作り始めた。最初のうちは、とにかくObjective-CとiPhoneの癖みたいなものを掴むのに四苦八苦だったけど、決定的な挫折はなかった。新しいことを実装しようとする度に、自分にピッタリの参考サイトが見つかるまでGoogleでとことん検索し、サイトを見つけては十分に熟読して、ようやく理解できたらコードを打つ。そんなやり方を繰り返した。

8月31日。この頃には、ネットからデータを取得するだけで飽き足らなくなってきてて、データをCoreDataに蓄えて、検索画面を作って、念願のプレイリスト検索ができるようにしてみた。

ここで3週間ほど開発はお休み。どうでしょう祭りもあったし、iOS 7のローンチもあったし。

9月19日。iOS 7が登場したと同時に開発を再開。一覧画面におけるアートワーク表示の方法を見直し、スクロール速度を改善。ネットから音声ファイルを取得して再生するという、またまた新しい方面を掘り始める。これで完全にMRSサイトのユーザー体験を超えるものになったと自負する。

9月28日。ボタン画像は通常PNGファイルで作るが、iOS 7からは1〜2ptの細い線で描くようにとアップルからお達しが出ているので、ビットマップ画像だとアンチ・エイリアス処理が仇となるケースが多々ある。そこで、画像をベクターデータで表示する仕組みを作ってみた。Retinaディスプレイの高精細さにベクターが映えるし、大きさや色もソースコードから簡単に変え放題。UIデザインを突き詰めていくのに、とても良い効果をもたらしてくれた。些細なところだけど、今回のアプリケーションで最も気に入っている部分である。

9月29日。この頃から、App Storeでのリリースを本気で考え始める。そうなると、単なるデータベース検索ではアプリケーションとして弱い。何か派手なギミックを入れるかと色々スケッチしてみたが、ここで重要な事にハタと気づく。元春レイディオショーというのは毎回、確固たるテーマと文脈に基づいて編集・構成され、オンエアされる曲も体系化された、真の意味での"コンテンツ"なのだと。アプリケーションは、その体系化されたコンテンツを適切なUIで表現さえすれば良く、派手なギミックや奇をてらった機能など入り込む余地がないのだと。これに気がついた時は、本当に救われた。

そこで、番組がオンエアされている時の体験を高める方向にアイデアをシフトしてみた。そうなると、やることはひとつ。MRSサイトで人気の高い「リアルタイム曲表示」をアプリケーションでも実現すれば良い。...と考えるのは簡単だったけど、やってみると時間軸の管理が必要なので、とても苦労した。今まで作ったロジックも相当書き直した。しかし、何よりも大変だったのが、一週間に一回しかオンエアがないから、その時にしか実戦テストができないってこと。。

...こんなこと書いているけど、Background Fetchで放送データを定期取得し、放送直前にローカル通知を出し、タップするとリアルタイム曲一覧画面が出てくるという流れを完璧なものにするまでに、一ヶ月くらいかかった。

10月中旬は、サーバーからデータを出力してもらう準備のためしばし中断。MRSサイト用データのiTunesリンクは、リンクシェアのURLを登録していた。それをピュアなiTunes URLに置き換える作業に多くの時間を費やす。

11月4日。最後の仕事として残しておいた3picksの表示部分に取り掛かる。事前に準備はしてあったし、すぐできるだろうとタカをくくってたが、画像を一気に処理するとどうも落ちる。実はVer 1.0ではこのバグを潰し切れていない。今度、時間を作ってキチンと見てみる。

11月6日。アップル主催の「iOS 7 Tech Talks」に参加。この時点でアプリケーションはほぼ完成してたが、セミナーで初めて知ることも多く、通信周りの処理を抜本的に見直し、検索画面にブラー処理による奥行き感を追加。セミナーでは「あくまでもコンテンツが主であり、UIは従」と言っていたのを聞いて、自分のアプリケーションは理にかなったものなのだと確信。

11月8日。いよいよ、DJにアプリケーションをプレゼンテーション。とても気に入ってもらう。元春レイディオショーの構造をあからさまに解体するような側面もあるため、DJにとって困った存在になってしまわないか？と尋ねたところ、まったく逆の答えが返ってきた。DJ曰く、自分でスクリプトを書き、選曲をし、番組を作る。そこには独自の科学があるが、今までその科学を解明しようというものが現れなかった。このアプリケーションは、そこに切り込んでくる存在であり、とても嬉しい...といった趣旨のことを言ってもらい、ホッとした。

11月14日。DJの手によるアプリケーション・アイコンが完成。そのPhotoshopさばきに惚れ惚れしながら作品が出来上がるのを待っている時間は、作家が最後の一節を書くのをじっと待つ編集者みたいな気分だ。

11月19日。関係者へのプレゼンテーション。わずか15分ほどの短い時間だったが、説明をし終えて良いリアクションをもらったとき、App Storeに記載する内容が自分の中でほぼ固まった。


MRSApp_missionCompleted.jpg

11月29日。いよいよApp Store申請。最後の最後でBundle IDを変更するなど、申請にはちょっと苦労した。ここから一週間、何の音沙汰も無し...。

12月4日。アプリケーションの説明をしにアップルへ。次期バージョンで解決すべき大切なフィードバックをいくつか貰う。そして、ここでもとても高い評価をもらえた。お世辞を言い合う間柄でもないし、本心なのが嬉しい。頑張って作った甲斐があった。

そして深夜に突然のレビュー開始状態へ。そのメールを受け取って就寝。朝起きたら、こんなメールが。

The status for your app, MRS - Motoharu Radio Show, is now Ready for Sale.

なんとあっさりレビューを通過。度重なるリジェクトで疲弊していく人達をたくさん見ていたし、自分の技術の無さから一回くらいはダメ出しされることも覚悟していたが、スムーズに進んで良かった。これも一つの評価として捉える事にする。

こうして、皆さんの手元にアプリケーションが届けられて、本当に嬉しい。自分の手でアプリケーションをリリースすることで、これからどんな事が始まるか分からないが、何か良い方向に向かってほしいと願うばかり。このブログには、アプリケーションのサポート・ページも用意したので、いろいろとフィードバックしてください。

Googleさんは、この記事をこう解釈しました

記事の詳細ページ

記事の全文を表示します。関連するコメントやトラックバックなどもこちらからどうぞ。

本日のBGM

★印があったら「これは聴いてみてほしい！」という推薦曲です。曲名をクリックするとiTunes Storeへジャンプします。

'; // loop through the songs in the array and get 4 fields that I want to see foreach ($songs as $song) { $output .= '
  • '; if ($song["Rating"] == 100){ $output .= ''.$song["Rating"].''; } $output .= '
    '; $output .= '
    '.$song["Name"].''; $output .= '
    '.$song["Artist"].''; $output .= ''.$song["Album"].''; if ($song["Year"]){ $output .= '('.$song["Year"].')'; } $output .= '
    • '; } // end the table $output .= ''; // show my new table print ($output); } ?>

    Now & Then

    Twitter Updates

      OAuthRequest('https://api.twitter.com/1.1/statuses/user_timeline.json','GET',array('screen_name' =>$search_word,'count' =>'3')); //Jsonデータをオブジェクトに変更 $oObj = json_decode($vRequest); //var_dump(json_decode($vRequest)); //オブジェクトを展開 for($i_tweet = 0; $i_tweet < sizeof($oObj); $i_tweet++){ $screen_name = $oObj[$i_tweet] -> {'screen_name'};//ユーザーID $profile_image_url = $oObj[$i_tweet] -> {'profile_image_url'};//プロフィール画像のURL $text = $oObj[$i_tweet] -> {'text'};//ツイート $date = $oObj[$i_tweet] -> {'created_at'};//時間 $tweet_time=strtotime($date);//Unixタイムスタンプ形式に変換 $now_time=time();//現在の時刻をUnixタイムスタンプで取得 $relative_time=$now_time-$tweet_time;//つぶやかれたのが何秒前か if($relative_time<60){//ss $displayTime = $relative_time.'秒前'; }elseif($relative_time>=60 && $relative_time<(60*60)){//mm $displayTime = floor($relative_time/60).'分前'; }elseif($relative_time>=(60*60) && $relative_time<(60*60*24)){//hh $displayTime = floor($relative_time/(60*60)).'時間前'; }elseif($relative_time>=(60*60*24)){//日付 $displayTime = date('n月j日',$tweet_time); } //表示 echo '
    • ' . $text .'' . $displayTime . '
      • '; } ?>
    follow me on Twitter

    Copyright © 2005-2015 Wonderwall.net,co. All rights reserved. Contact Us.