VOYAGE GROUP エンジニアブログ

voyagegroup_techのブログ
VOYAGE GROUPエンジニアブログです。

iPhoneアプリ

アプリのFirst impression


こんにちは。

VOYAGE GROUPの子会社であるジェネシックスでスマートフォンアプリの開発をしている中(@g_1)です


先日、tuneTVというアプリをリリースし、今も改善に取り組んでいます。

 


tuneTVではシンプルな操作感とTV視聴というライブ感をアプリにも取り込むため、動的な演出に力を入れました。

基本となるUIデザイン、画面遷移、あとなるべく軽い手触りになるよう工夫したり、アニメーションも大きく見せるような小さい工夫が多く施されています。


今回のアプリではUXデザイン、そしてゲーミフィケーションを意識しています。

これらはどちらもユーザーに楽しんでもらう、疲れさせないなどといったユーザビリティの追求の道でありますが、技術的にあまり語られることが多くない分野です。


スマートフォンアプリにはさまざまな制約があり、結果的にユーザーが不便に感じたり、すごく疲れてしまうこともよくあります。そういったアプリに触れたときの感じるストレスを解消する技術というのも今後より深く広く研究され、あちこちで語られるんではないかなと思っています。


今回はアプリのFirst impressionについて記事を書きます。

アプリに限らず、プログラムというものは一般的に起動、データor入力値読み込み、実行、結果表示、終了というプロセスを踏みますが、この際、各種パラメータを初期化する起動やデータ等のロードという過程は動作が重い上に、ユーザーから見ると大変退屈なプロセスです。

また起動後、アプリに触れた際に期待していた振舞いをしなかったり、シーケンスが複雑で目的に辿りつけなかったり、長いチュートリアルが始めると、目的であるコンテンツがどんな素晴らしいものだとしても、ユーザーはそこへ到着する頃には、非常に悪い心証を持ってしまいます。

あるいは、目的のコンテンツへ到達すらやめてしまうことがあります。

また再びアプリを開始した際に、うんざりした初体験をまた繰り返してしまい、面倒くさいなと思ってしまうかもしれません。


ビデオゲームの世界では最初の5分が勝負と考えます。*アーケードにおいては、30秒とも言われました。北米においてはさらに短く5秒(笑)

プレイ直後から気持ちよく、そして期待を持たせられないのなら、そのゲームを最後まで遊んでもらえる可能性がかぎりなく低いとまで言われることがあります。

これはアプリにもまったく同じことが当てはまると思います。

便利なはず、生活を豊かにするはずのアプリで逆にストレスを貯めるようであれば、本末転倒です。

なので、一番最初のユーザーが目にする画面のユーザビリティ向上、そして起動スピードを極限まで早くするというのは、理にかなった考えだと言えます。

何事も初めが肝心ということです。

そしてこれはアプリケーションデザイン、実装スキル、ユーザーサポート体制・・・全てが力を発揮しないと、達成できないパートでもあります。


さて、tuneTVはとことんユーザービリティにこだわろうとというポリシーの元、開発を進めています。

とはいえ、まだ生まれたばかりのサービスで未熟な点も多く、どうすれば喜んでもらえるのかと日々考えて手を動かしています。

ユーザーからの声を大事にしようと、レビューやブログにも頻繁に目を通していますので、フィードバックをよろしくお願いします。 

tuneTV iPhone版
fb_icon_app_s


fb_appstore 
首都圏版
iPhone、iPod touch (第4世代)
iOS 4.0 以降
 
 


2泊3日の合宿でiPhoneアプリをリリース!

こんにちは、子会社genesixの上杉(@unlearned)です。

先日genesixでは開発合宿を行ないました。

開発合宿を行なったのは新卒2人を含む、次の3人組です。(残念ながら私は参加できませんでした)

  • 徐(@TonnyXu)
  • 荒井(@cutmail)
  • 加藤(@guruguruman)
  • 2泊3日の開発合宿でiPhoneアプリを2本リリースすると言う目標で行ないました。

     

    開発環境

    合宿2


    iPhoneアプリ開発なので、開発環境を整える準備は少なくてすみました。

    MacBook proとインターネットにつなげる環境さえあれば、とりあえず開発をはじめることができます。リポジトリはgithubを利用しました。

    宿泊施設

    より集中できる環境を求めなければいけません。当たり前ですが静かな場所で少し広めでゆったりとリラックスしながら開発が出来る場所が良いのではないでしょうか。

    今回はECナビで借りているシェアハウスPORTを利用して合宿を行ないました。

    開発

    合宿1


    この短期集中でiPhoneアプリを完成させるためには 事前にアプリの仕様を固めておき、合宿中はプログラミングに集中する必要があります。

    参加者曰く 「合宿中は本当に朝から晩までコードのことばかり考え、起きて5分後には既にモニターを見つめていました。」 とのこと。

    普段の職場とは違った環境でひたすらプログラミングをすることはかなり刺激的だったようです。

    宣伝

    今回開発したアプリは既にリリースされていますので、ぜひ使ってみてください。

    楽しそう。うらやましい。私も次回こそは参加したい!!

     

    【詳細図解】iPhoneの共通モジュールのベストプラクティス(その5)

    こんにちは、 株式会社ジェネシックス の徐 廷(@TonnyXu)です。iPhoneの共通モジュールのベストプラクティスに関してです。
     文章が長くなりますので、5回に分けてお届けします。

    今回は、5回目となります。

    その1

    ■ 共通プロジェクトを作る

    その2

    ■ コンシューマPJを作る

    ■ コンシューマPJで共通プロジェクトを引用

    その3

    ■ 引用する後コンシューマPJでの必須設定

    その4

    ■ コンシューマPJを実行する

    その5

    ■ さらに

    ・ 共通プロジェクトに単体テストを追加

    ・ オープンソースライブラリを作る

    ■ さらに

    コード品質を向上するために、単体テストは不可欠です。特に共通モジュールでバグがあると、影響は非常に大きなものになるので、単体テストをしっかり作ったほうが良いと思います。

    ・ 共通プロジェクトに単体テストを追加

    iPhone SDKは3.0から、単体テストをサポートしています。では、共通モジュールに追加してみましょう。


    adding lib test target.
    図23:共通プロジェクトにテストtargetを追加

    新しいTargetのタイプは「Unit Test Bundle」です。名前は「LogicTests」にしましょう。まずは図24のように、テストTargetの依存性を指定しましょう。


    adding dependency for test target.
    図24:テストTargetの依存関係画面

    図24の依存関係の下の「+」ボタンを押してください。


    select dependency module for test target.
    図25:共通モジュールを依存先として追加

    これで、単体テストのtargetができました。次はテストケースを追加しましょう。Testというグループを作って、右クリックして、Add New Files...を選択してください。


    add test case files.
    図26:テストケースを選択


    name the test case.
    図27:テストケースを追加

    注意 所属targetはLogicTest *のみを選択してください。

    テストケースのテンプレートが自動的に適用されます。下記のようなヘッダーファイルとコードファイルが自動的に生成されます。

    GCDeviceTests.h
    //
    //  GCDevicesTests.h
    //  Common
    //
    //  Created by Tonny Xu on 10/05/26.
    //  Copyright 2010 genesix, Inc. All rights reserved.
    //
    //  See Also: http://developer.apple.com/iphone/library/documentation/Xcode/Conceptual/iphone_development/135-Unit_Testing_Applications/unit_testing_applications.html
    
    //  Application unit tests contain unit test code that must be injected into an application to run correctly.
    //  Define USE_APPLICATION_UNIT_TEST to 0 if the unit test code is designed to be linked into an independent test executable.
    
    #define USE_APPLICATION_UNIT_TEST 0
    
    #import <SenTestingKit/SenTestingKit.h>
    #import <UIKit/UIKit.h>
    //#import "application_headers" as required
    
    @interface GCDevicesTests : SenTestCase {
    
    }
    
    #if USE_APPLICATION_UNIT_TEST
    - (void) testAppDelegate;       // simple test on application
    #else
    - (void) testMath;              // simple standalone test
    #endif
    
    @end
    
    

    GCDeviceTests.m
    //
    //  GCDevicesTests.m
    //  Common
    //
    //  Created by Tonny Xu on 10/05/26.
    //  Copyright 2010 genesix, Inc. All rights reserved.
    //
    
    #import "GCDevicesTests.h" 
    
    @implementation GCDevicesTests
    
    #if USE_APPLICATION_UNIT_TEST     // all code under test is in the iPhone Application
    
    - (void) testAppDelegate {
    
        id yourApplicationDelegate = [[UIApplication sharedApplication] delegate];
        STAssertNotNil(yourApplicationDelegate, @"UIApplication failed to find the AppDelegate");
    
    }
    
    #else                           // all code under test must be linked into the Unit Test bundle
    
    - (void) testMath {
    
        STAssertTrue((1+1)==2, @"Compiler isn't feeling well today :-(" );
    
    }
    
    #endif
    
    @end
    

    ヘッダーファイルの「USE_APPLICATION_UNIT_TEST」を0に設定しましょう。この時点では本番のテストケースをまだ書いていませんが、テストを実行することはできます。では、プロジェクトの実行targetを下図のようにLogicTestに変更しましょう。


    select new target.
    図28:テストケースのtargetに設定

    「テストケースを実行する」というより実はコンパイルするだけです。Active targetをLogicTestに設定したら、コンパイル(Build→build)してみましょう。間違っていなければ、ビルド結果画面を開く(Build->Build Results)と、下図のような画面が出てきます。


    compile test target and get the test result.
    図29:テストケースの実行結果

    クラスGCDeviceをテストするために、GCDevice.mファイルをLogicTests Targetに追加しなければいけません。GCDevice.mファイルを右クリックして, 出てくるメニューのGet Infoをクリックしましょう。下図の画面が出てきます。


    add .m files to test target.
    図30:テスト対象クラスの.mファイルをテストtargetに追加

    図30のように、二つのtargetの左側のチェックボックスを全部チェックしてから、GCDeviceTests.mファイルに新しいテストケースを追加しましょう。

    GCDeviceTests.h
    //...上省略
    #else
    - (void) testMath;              // simple standalone test
    - (void) testIsIPad;
    #endif
    //...下省略
    

    GCDeviceTests.m
    //...上省略
    - (void) testMath {
    
        STAssertTrue((1+1)==2, @"Compiler isn't feeling well today :-(" );
    
    }
    
    - (void) testIsIPad{
        STAssertFalse( [GCDevice isIPad], @"単体テストとしてはFalseしかない.");
    }
    //...下省略
    

    追加したテストケースの実行結果を見てみましょう。


    new test case running result.
    図31:testIsIPadのテストケース実行結果

    これで、共通モジュールの作成、利用、テストの説明がすべて終わりました。

    ・ オープンソースライブラリを作る

    この共通モジュールは自分のプロジェクトで使えるだけではなく、ほかの人のプロジェクトでも動きます。もしこの共通モジュールを公開したければ、最低限libCommon.aファイルとすべてのヘッダーファイル(テストケースのヘッダーファイルを除く)を一緒にアーカイブして提供すれば、だれでも手軽に使えます。本文で使用したサンプルコードです。
    オープンソースライブラリにするなら、このプロジェクトのすべてのフォルダとファイル(buildフォルダを削除したほうが良いです)をGoogle CodeあるいはGitHubにアップロードしましょう。

    皆さんが作ったすばらしいライブラリをお待ちしております。

    【詳細図解】iPhoneの共通モジュールのベストプラクティス(その4)

    こんにちは、 株式会社ジェネシックス の徐 廷(@TonnyXu)です。 iPhoneの共通モジュールのベストプラクティスに関してです。

    文章が長くなりますので、5回に分けてお届けします。

    今回は、4回目となります。

    その1

    ■ 共通プロジェクトを作る

    その2

    ■ コンシューマPJを作る

    ■ コンシューマPJで共通プロジェクトを引用

    その3

    ■ 引用する後コンシューマPJでの必須設定

    その4

    ■ コンシューマPJを実行する

    その5

    ■ さらに

    ・ 共通プロジェクトに単体テストを追加

    ・ オープンソースライブラリを作る

     

     

    ■ コンシューマPJを実行する

    まず、 CommonConsumerViewController.xib ファイルを開いて、下記のように、二つのラベルを追加します。


    viewController.xib , adding 2 labels
    図21:二つのラベルを追加

    CommonConsumerViewController.h ファイルに赤いラベルのアウトレット属性を追加します。CommonConsumerViewController.h
    //
    // CommonConsumerViewController.h
    // CommonConsumer
    //
    // Created by Tonny Xu on 10/05/26.
    // Copyright genesix, Inc. 2010. All rights reserved.
    //

    #import <UIKit/UIKit.h>

    @interface CommonConsumerViewController : UIViewController {
    UILabel *resultLabel;
    }

    @property (nonatomic, retain) IBOutlet UILabel *resultLabel;

    @end

    注意 ヘッダーファイルに@propertyを追加したので、.mファイルに@synthesizeを追加することを忘れないでください。また、xibファイルにアウトレットとラベルの繋がりを忘れないでください。

    次に、 CommonConsumerViewController.m- (void)viewDidLoad メソッドに下記のコードを追加してください。

    // 下記のimportはファイルの一行目に追加してください。
    #import "GCDevice.h"
    // 中略...
    - (void)viewDidLoad {
    [super viewDidLoad];
    if ([GCDevice isIPad]) {
    resultLabel.text = @"Yes, it is an iPad.";
    }else {
    resultLabel.text = @"No, it's NOT an iPad.";
    }
    }

    ここまで、共通モジュールの実装は完了しました。アプリケーションを実行してみましょう。


    running on simulator.
    図22:シミュレーターでの実行結果

    Wow! やった!完成しました。これで、この isIPad メソッドはほかのプロジェクトでも使えるようになりました。

    本文の最初に設定した目標の1−4はクリアです!

    【詳細図解】iPhoneの共通モジュールのベストプラクティス(その3)

    こんにちは、 株式会社ジェネシックス の徐 廷(@TonnyXu)です。 iPhoneの共通モジュールのベストプラクティスに関してです。

    文章が長くなりますので、5回に分けてお届けします。

    今回は、3回目となります。

    その1

    ■ 共通プロジェクトを作る

    その2

    ■ コンシューマPJを作る

    ■ コンシューマPJで共通プロジェクトを引用

    その3

    ■ 引用後のコンシューマPJでの必須設定

    その4

    ■ コンシューマPJを実行する

    その5

    ■ さらに

    ・ 共通プロジェクトに単体テストを追加

    ・ オープンソースライブラリを作る

     

    ■ 引用後のコンシューマPJでの必須設定

    必須となる設定は三つあります。
    1. 共通プロジェクトを利用するために、ヘッダーファイルの置き場所を指定。
    2. コンシューマPJをコンパイルする前に、まず共通モジュールをまずコンパイルするように設定。いわゆる依存関係を設定。
    3. コンシューマPJをリンクする時、共通モジュールをリンク。

    まず、1番目の設定を行いましょう。プロジェクトのルートノードCommonConsumerをダブルクリックすると、下図の設定画面が出てきます。


    setting 1 for consumer PJ, header search path.
    図15:CommonConsumerのプロジェクト設定画面

    図15画面上にある検索ボックスに"header"を入力してみましょう。絞り込んだ設定項目画面で Header Search Path項目の右にある空セルをダブルクリックして、"../Common"を入力してください。Recursivelyチェックボックスはそのままでかまいません。完了したら下図の画面と同じかどうかを確認してください。


    setting 1, header path.
    図16:Header Search Pathの値

    図16に、相対Pathを記入しています。画面のOKを押して、次の設定へ行きましょう。

    次はプロジェクトの依存関係を設定します。左側のTargetsノードをダブルクリックしてください。


    setting 2 for consumer PJ, dependency project.
    図17:Targetの設定画面(図15とほぼ同じ、ただし、少し違いがあります)

    図17のGeneralタブを選択して、Direct Dependenciesの下にある「+」ボタンを押してください。下記の画面が出てきたら、Commonを選択してください。


    setting 2 for consumer PJ, select dependency pj.
    図18:依存先を選択

    これで、コンパイルができるはずです。コンパイルすると、下図のような画面が出てきます。リストの一番上にCommonプロジェクトをコンパイルしたことが示されています。


    setting 2 for consumer PJ, compile OK after adding dependency.
    図19:依存関係を設定後、コンパイル結果画面

    最後もう一つの設定が不可欠です。コンパイル後、共通モジュールをコンシューマPJにリンクします。コンシューマPJのCommonプロジェクトノードの下に表示される「libCommon.a」をドラッグして、「targets」の「CommonConsumer」の「Link Binary with Libraries」にドロップしてください。結果は下図の画面のようになります。


    setting 3 for consumer PJ, adding link option and invoke common module
    図20:共通モジュールのバイナリファイルをリンクする

    ここまでで、コンシューマPJでの共通モジュールの設定が終わりました。続いて、コンシューマPJで共通モジュールのクラスを利用してみましょう。

    記事検索
    QRコード
    QRコード