asklife

IT&Life

Month: 3月 2014 (page 1 of 2)

iPhoneアプリ開発初心者の開発メモ①

iphone5s

iPhoneアプリ開発をします。

iPhoneアプリ開発は初心者です。
これから開発を進めていって、基礎のキソからメモっていきますね。
この記事の通り進めていけばアプリが作れるようにメモっていきます。
(自分が次に作るときに再現できるように)

Xcodeのインストール

App Store⇒カテゴリ開発ツール⇛Xcode

インストールは完了!
Xcodeを起動します。

プロジェクトを作る

「Create a new Xcode project」を選択し、Next
⇛「Single View Application」を選択し、Next
⇛名前を「testApp」としてNext
⇛保存するディレクトリを選んでCreate

xcode1

セットアップ完了です。

各ファイルの構成

ViewController.mとViewController.h

画面(View)の動きをコントロール(Controller)します。

ViewController.h (interfaceですね)

#import <UIKit/UIKit.h>

@interface ViewController : UIViewController

@end

ViewController.m

#import "ViewController.h"

@interface ViewController ()

@end

@implementation ViewController

- (void)viewDidLoad
{
    [super viewDidLoad];
	// Do any additional setup after loading the view, typically from a nib.
}

- (void)viewDidUnload
{
    [super viewDidUnload];
    // Release any retained subviews of the main view.
}

- (BOOL)shouldAutorotateToInterfaceOrientation:(UIInterfaceOrientation)interfaceOrientation
{
    return (interfaceOrientation != UIInterfaceOrientationPortraitUpsideDown);
}

@end

MainStoryboard,storyboard

画面デザインを作るためのファイル

AppDelegate.hとAppDelegate.m

アプリの基本動作を書くファイル
アプリ起動時、アプリ終了時の動きを書くとこです。

AppDelegate.h (interface)

#import <UIKit/UIKit.h>

@interface AppDelegate : UIResponder <UIApplicationDelegate>

@property (strong, nonatomic) UIWindow *window;

@end

AppDelegate.m

#import "AppDelegate.h"

@implementation AppDelegate

@synthesize window = _window;

- (BOOL)application:(UIApplication *)application didFinishLaunchingWithOptions:(NSDictionary *)launchOptions
{
    // Override point for customization after application launch.
    return YES;
}
							
- (void)applicationWillResignActive:(UIApplication *)application
{
    // Sent when the application is about to move from active to inactive state. This can occur for certain types of temporary interruptions (such as an incoming phone call or SMS message) or when the user quits the application and it begins the transition to the background state.
    // Use this method to pause ongoing tasks, disable timers, and throttle down OpenGL ES frame rates. Games should use this method to pause the game.
}

- (void)applicationDidEnterBackground:(UIApplication *)application
{
    // Use this method to release shared resources, save user data, invalidate timers, and store enough application state information to restore your application to its current state in case it is terminated later. 
    // If your application supports background execution, this method is called instead of applicationWillTerminate: when the user quits.
}

- (void)applicationWillEnterForeground:(UIApplication *)application
{
    // Called as part of the transition from the background to the inactive state; here you can undo many of the changes made on entering the background.
}

- (void)applicationDidBecomeActive:(UIApplication *)application
{
    // Restart any tasks that were paused (or not yet started) while the application was inactive. If the application was previously in the background, optionally refresh the user interface.
}

- (void)applicationWillTerminate:(UIApplication *)application
{
    // Called when the application is about to terminate. Save data if appropriate. See also applicationDidEnterBackground:.
}

@end

その他

◎Supporting Files
アプリの画像等、アプリを作成するのに必要なサポートファイルを置くフォルダ

◎testApp-info.plist (プロジェクト名)
アプリ設定ファイル(あまり触れることは無い)

◎Frameworks
アプリ開発のフレームワークです。触ることは無いでしょう。

◎testApp.app (プロジェクト名)
アプリの実行ファイルです。

さて、ここで試しにRunボタンを押してみましょう。
真っ白なページですが、シミュレータが起動します。

simulator
では実装・デザインしていきます。

画面をデザイン

Mainstoryboaard.storyboardを使います。

ライブラリからLabelをドラッグしてきます。

step1

※GUIで直感的にわかりますが、当然ソースコードで実装もできます。
※右向きの矢印がありますよね、「→」は最初に表示する画面を表して

部品とプログラムをつなげる

右上にアシスタントエディターというボタンがあります。
ネクタイみたいなボタンです。
アシスタントエディター

押してあげると、こうなります。
部品(オブジェクト)とプログラムに関連をつけていきます。

アシスタント

いじるソースコードはViewController.mです。

さて、画面に配置した部品をcontrol+クリックし、ViewConttoller.mの@interface @endの間にドラッグ&ドロップします。
そうして、出てきたポップアップに名前をつけてあげて下さい。
すると、ソースコードに自動で反映されます!(すげぇ!)

ViewController.m
choice

#import "ViewController.h"

@interface ViewController ()

@property (weak, nonatomic) IBOutlet UISegmentedControl *choice;

@end

@implementation ViewController
@synthesize choice;

- (void)viewDidLoad
{
    [super viewDidLoad];
	// Do any additional setup after loading the view, typically from a nib.
}

- (void)viewDidUnload
{
    [self setChoice:nil];
    [super viewDidUnload];
    // Release any retained subviews of the main view.
}

- (BOOL)shouldAutorotateToInterfaceOrientation:(UIInterfaceOrientation)interfaceOrientation
{
    return (interfaceOrientation != UIInterfaceOrientationPortraitUpsideDown);
}

@end

変化点は
5行目に@property (weak, nonatomic) IBOutlet UISegmentedControl *choice;
10行目に@synthesize choice;
20行目に[self setChoice:nil];
が追加されていることです。

実装するよ

ざっくりというと、選ぶ部品はSegmented Controlというオブジェクトです。choiceという名前で宣言しました。
それを選択されている状態でswitch文で背景色を変えています。
背景色を変えるのは[UIColor redColor]というやり方で変えられます。

ViewController.h

#import <UIKit/UIKit.h>

@interface ViewController : UIViewController{
    UISegmentedControl *choice;
}

@property (nonatomic, retain) IBOutlet UISegmentedControl *choice;

- (IBAction)SegChanged:(id)sender;

@end

ViewController.m

#import "ViewController.h"

@interface ViewController ()

@end

@implementation ViewController

@synthesize choice;


- (void)viewDidLoad
{
    [super viewDidLoad];
	// Do any additional setup after loading the view, typically from a nib.    
}


-(IBAction)SegChanged:(id)sender{
    switch (choice.selectedSegmentIndex) {
        case 0:
            NSLog(@"赤が選択されています");
            self.view.backgroundColor = [UIColor redColor];        
            break;
        case 1:
            NSLog(@"黄が選択されています");
            self.view.backgroundColor = [UIColor yellowColor];        
            break;            
        default:
            break;
    }
}


- (void)viewDidUnload
{
//    [self setChoice:nil];
    [super viewDidUnload];
    // Release any retained subviews of the main view.
    
}

- (BOOL)shouldAutorotateToInterfaceOrientation:(UIInterfaceOrientation)interfaceOrientation
{
    return (interfaceOrientation != UIInterfaceOrientationPortraitUpsideDown);
}

@end

ViewControllerとxibの紐付けを行う

部品オブジェクトを選択して、右側の「→」を選びます。

xib2

ValueChangedをcontrol+クリックで部品オブジェクトに紐付けます。

xib

これで、「赤」「黄」を選んだことがメソッドと紐付きます。

デモ

起動時

first

黄を選ぶ

yellow

赤を選ぶ

red

感想

Xcodeはツールとして機能が多すぎて、振り回された印象です。
部品とメソッドをつなぐところがかなり複雑(慣れればどうってことないんでしょうが)
とはいえ設定ファイルをベタ書きするわけにもいかずXcodeに早くなれるべきですね。

アプリはガワで、INPUTのUIを良くして、通信し裏のAPIサーバでゴリゴリと処理させた方が良い印象です。
次回は、もっと凝ったアプリを作ってみます。

デザイナーとエンジニアのこれまでとこれから:D/E問題を考える

2年目が終わろうとしている若手エンジニアが週末40時間かけてWebサービスを作った話。

週末を使ってWebサービスを作りました

スクリーンショット 2014-06-21 23.28.30

あなたの代わりに予定を調整してくれる賢いアプリよってぃ

よってぃという予定調整サービスを作りました。

この記事では、活動の振り返りと週末でWebサービスを作っていく過程を
まとめておきたいと思います。

ことのはじまり

社会人になって1年と9ヶ月

そろそろ仕事にも慣れてきて、課題も見えるようになってきた頃
「Webサービス作らない?」という声がかかり、週末に集まり計7回、
40時間の開発合宿がスタートしました。

開発合宿第一回:AWSでサーバを立ててインフラ構築してみた

aws-logo

Amazon Web Servicesを初めて触りました。

EC2インスタンスで以下のような構成にしています。
・Apache + MySQL on WEB/DBサーバ
・Redmine + Git on ファイルサーバ
・NAT

AWSでのインフラ作りは別のメンバーが実施したのですが、
隣で次々とサーバ構築がされていく様を見ていると
今まで遠い存在だったインフラ構築が
「意外と出来るんじゃね?」と感じることが出来たのが大きな成果です。
AWSの良さは、まさに「手軽さ」なんだと思います。

ここまでで計6時間

開発合宿第二回:CakePHPで実装開始!→完成

開発はメンバーが全員Macユーザだったため、ApacheもMySQLも入っているMAMPを選びました。

FWは以前、ドットインストールさんのCakePHP入門を見て、チュートリアルをやったこともある(※)のでCakePHPを選択しました。
MacのMAMPでCakePHP入門

Doneisbetterthanperfect
この開発合宿で特に大事にしたかったことは「スピード感」でした。

喧々諤々と議論をしても、形にならないと意味が無く
「まずは作ってみよう!そこから考えよう」
というコンセンサスが取れていたことが非常に良かったと思っています。

実は、開発第二回目でモノは完成していました。

最初に作った機能は「イベント登録」と「参加者登録」です。
これだけあれば、サービスとして最低限必要なものは揃っているよねという判断です。

この機能だけは完成させる!という思いをもとにゴリゴリ実装しました。
結果、「出来た」。

この、「一日で出来た」という感覚は非常に衝撃的でした。
Webサービスって、もっと時間かけて、じっくり企画して、じっくり設計してようやっと完成するもの
そんなイメージが根底から覆されました。

確かに、ただのINSERT文を投げるだけの機能で何がWEBサービスだって感じですが
一日で出来るんだという実感は得るものが大きかったと思います。

ローカルからAWSサーバに乗せるときに詰まった「あるあるネタ」は以下の記事にまとめていますのでご参考までに
CakePHPのつまりどころ

ここまでで計12時間

開発合宿第三回:コワーキングスペースを探す!Redmineを導入。ログイン機能を実装

活動が三回目になり、活動拠点が誰かの家だとグダグダしてしまいがちになっていました。(休日ですし)
この辺りからチーム運営を考えていく必要があり、活動拠点となるコワーキングスペースを探しました。
結果、コワーキングスペースでの活動は効果を生み「やっている感」がチームに出てきてモチベーションの向上にも繋がりました。

また、平行したチーム開発にはマネジメントツールが必要だという問題にも直面しました。
そこでオープンソースのプロジェクト管理ツールのRedmineを導入しました。
Redmineはチケットを切ってタスクを細分化出来るため、複数人での開発の際に効果を発揮してくれます。

アプリの実装としては
誰が参加しているかわからないよね→ログインは必要→作ろう。
ということでログイン機能を実装しました。

ログイン機能はスタンダートなメール認証機能です。
CakePHPは非常に優秀で、公式ドキュメントにあるメール認証機能
ほぼ写経することでログイン周りが出来てしまい、
フレームワークって本当に便利だなと改めて実感させられました。

ここまでで計18時間

開発合宿第四回:Git導入!UIイケてない問題発生

基本機能を作り終わり、動いているアプリを見てふと気がついた
「UIがイケてない。。。」

その時、よってぃはめっちゃわかりにくいUIだったんですね。
(今も改善点ありますが)
機能を作ることに注力し、「使い方がわかる」UIを意識していませんでした。
そこで、大きく画面・機能を削除し、「使える」画面遷移に直しました。

この辺りから徐々にscpコマンドの限界を感じ、Gitが欲しいなーと思っていたら
インフラ側でGitが導入されていました!

Gitの概念ってざっくりとしかわかっていなかったのですが、
実際にチームで複数人並行の開発で使ってみて、
やっと分散型バージョン管理システムの便利さを実感しました。

ここまでで計24時間

開発合宿第五回:jQueryを入れてみた。

UIを直した所で、デザインを何とかしたいなーと思い
jQuery UIを使ってそれっぽいデザインを目指しました。
慣れないjsやcssをなんとか使い、「納得はいかないけどまぁ許せる」レベルにまで押し上げました。
やはりエンジニアだけではデザインの限界を感じました。。。
ここは今でも大きな課題です。

その時にまとめたのがこの記事です。
CakePHPの共通レイアウトを変更する手順

またまた、インフラ側でリリースシェルを作ってくれていて
一日のうちに何度もローカルからAWSへリリースすることが可能になり
だんだんと、最近のイケてる開発手法っぽくなってきました。

ここで、ひと通り納得出来るアプリが完成しました。

ここまでで計30時間

開発合宿第六回:全面リファクタリング

ひと通り、納得出来るアプリが完成した頃、
ソースコードを見直してみると、、、

「もっと綺麗なソースコードに直したい」

という悪魔の囁きが聞こえてきました。

ここで、やっちゃったんですね。全面ソースコード改修。
同じ機能なのに、ソースコードをことごとく直していく時間。
直すのはCakePHPの勝手知ったるレベルまで来ていたから簡単だったんです。
でもですね、一日かけて終わってみたら
「ソースコード綺麗になったなー、大満足!」
「でも、機能一つも進歩が無い!」
という状況になっていました。

勉強にはなりましたけど、意味のあることだったのかは悩ましいです。
この頃になると愛着が湧いてしまって、ついつい手を出してしまっていました。

「やらないことを決める」

ある程度形のあるものを見ると、やることを決めるのは簡単です。
形のあるものを見て、やらないことを決めるというのは意識する必要があると思った次第です。

ここまでで計36時間

開発合宿第七回:よってぃ完成!

2014年3月22日 よってぃを完成させました。

改善しようと思えば、キリが無いんです。
「完璧を目指すより、まず終わらせろ」
改めて初心に帰り、完成させました。

そして本日は想い想いの活動の振り返りをして、
次に作る新サービスのアイデアを出してきました。

ここまでで計40時間

よってぃ開発を通して感じたこと

要所要所で書いてしまいましたが

「手を動かすこと」
「まずやってみること」
「新しいことに挑戦すること」
「やらないことを決めること」
「完成させること」

この五つが一番の学びだと感じております。
次の新サービスも頑張って作っていきたいと思います!

(追記)2014/6/21 デザインリニューアルして正式リリースしました

2014/3/22から3ヶ月
試行錯誤し、機能を追加しては削除し、
多くの意見を交わしデザインリニューアルしました。

出来ることが増えてきて、出来ることに固執してはいけないことを学びました。
インフラを構築してみてわかること。
デザインというやったことの無い領域。
やってみたら、考えてみたら出来るものだなと。

次は、よってぃを育てていくフェイズ。
マーケティング、プロモーション and more
やったことが無いことはたくさんあるけれど、果敢に挑戦していくことが何より大切だと実感しました。

今後ともよってぃをよろしくお願いします。

賢い予定調整アプリ よってぃ

スクリーンショット 2014-06-21 23.28.30

Lean UX Workshop at Movida Japan #3

CakePHPのつまりどころ

権限関連の更新が出来ない問題

chmod -R 755 app/tmp/cache

.htaccessがない問題

.htaccessは3箇所にあります。
①/ (appと同一ディレクトリ)

<IfModule mod_rewrite.c>
   RewriteEngine on
   RewriteRule    ^$ app/webroot/    [L]
   RewriteRule    (.*) app/webroot/$1 [L]
</IfModule>

②/app/

<IfModule mod_rewrite.c>
    RewriteEngine on
    RewriteRule    ^$    webroot/    [L]
    RewriteRule    (.*) webroot/$1    [L]
</IfModule>

③/app/webroot

<IfModule mod_rewrite.c>
    RewriteEngine On
    RewriteCond %{REQUEST_FILENAME} !-d
    RewriteCond %{REQUEST_FILENAME} !-f
    RewriteRule ^ index.php [L]
</IfModule>

ダウンロードしたばかりではここに置かれていません。

Older posts

© 2017 asklife

Theme by Anders NorenUp ↑