PUBLICROOTS

気になったことを紹介していきます!

JavaScript : スマホで簡単にスワイプが実現できるプラグイン

 

スマホでも簡単にスワイプ処理を実現できるjQueryを使ったプラグイン発見!!

 

f:id:publicroots:20140513013219p:plain

http://www.idangero.us/sliders/swiper/

 

とても簡単にスワイプが実現できて、かなりiOSに近い動きを実現してます。

しかもPCでも同じように操作できます。

 

いろんなサンプルがあるので試してみてはどうかと。

 

ocamera(ゼロカメラ)アプリの制作過程

 

f:id:publicroots:20140511012809j:plain

 

去年2013年に作ったカメラアプリ「ocamera(ゼロカメラ)」の制作過程について、

いろいろ振り返りながら書いてみます。

 

ちょうど、その頃はアプリのUIブームで、「 Simplify your life — Clear

Weathercube - The revolutionary gestural weather app」「Rechner Calculator

みたいなシンプルで新しいUI/UX系アプリが出だした頃で、

実際に使ってみるとかっこ良くて感動しました。

それに触発される形で、僕も何かアプリを作りたいなと強く思いました。

 

それからは、とにかく無料・有料にかかわらず、

良さそうなアプリは片っ端からインストールして使ってみました。

 

そんな中、カメラアプリでジェスチャベースのアプリが

無い事に気付きました。

 

その頃のカメラアプリは、詳細設定項目がいっぱいあるものか、

固定フィルターやフレームがいくつかあって、

それを選択するものしかありませんでした。

(僕が調べられる限りでは...)

詳細設定ができる時点で、プロっぽい人にしか操作できないので、

一般ユーザーが操作できるようなシンプルUIにはならないって事なんだと、

思いました。

 

そこで、一般ユーザーが操作できるように、

感覚的にカメラの設定を変更できるアプリを作ったらどうかと。

極力ボタンは無く、あらゆるジェスチャだけで、

カメラの設定が変更できるものがいいかなと。

スワイプ、ピンチ、タップ、ダブルタップ、ロングタップ、長押し、ホールドなど。

 

まあ、始まりはそんな軽い感じでした。

 

次に、どうやって実現するかが問題でした。お金も時間も無いので。。。

※ 個人的には、デジタル系案件(又はサービス系)はアイデアもさることながら、

 実現能力も大事だと思っています。自分で開発できるとか、

 できそうな開発者との幅広いネットワークを持っているなど...

 

そんな時、ちょうど社内でデジタルで新しい事をやっていく部署ができ、

少しお金が確保できそうな感じが出てきたので、

確証は無かったのですが、開発チームを勝手に作り、

制作をスタートしました。

 

そこからまずは、どのジェスチャをどの機能にするかを、

カメラに詳しい友人などに聞いて決めていきました。

同時にUI設計やロゴデザインなども進めました。

 

正直、通常業務外だったので、

そこまでスムーズに進んだ訳ではないですが、

粛々と進める事ができました。

それは、声をかけたチームのメンバーが、

このアプリの内容に賛同してくれたからだと思います。

本当感謝してます!

 

そして、デモ版アプリが完成したので、

社内の人達に実際にアプリを使ってもらいながら、

ブラッシュアップをしていきました。

そうして出来上がった時はとても嬉しかったです!

初めて自分の考えたアプリが、

AppStoreに上がっているだけで興奮しました。

(是非、興味のある方はインストールしてみてください!)

 

ただ、本当はその後の展開も色々考えていたのですが、

通常業務が忙しくなって、アップデート作業ができませんでした。。。

マジで後悔してます。

 

さらなるフィルターの調整や、撮った写真を一覧で見れるポータルページや

SNSでのログイン機能なども作りたかったし、

別の、もっと振り幅のある面白いフィルターを多数用意してユーザーが選べたり、

その設定を保存(オリジナルフィルター作成)できるようしたかったなあ...

 

初期の資料は下記にアップしておきました。

 ※初めのタイトルは、0cameraでしたが、
 後々「0(ゼロ)」を「o(オー)」に変えました。
 
ocamera(ゼロカメラ)
- ジェスチャ操作でフィルタを調整できる直感的なカメラアプリ
 
AppStore

PhoneGapでビルドする方法

 

f:id:publicroots:20140510224106p:plain

 

PhoneGapを使ってiOSアプリをビルドする方法です。

まずは下記よりPhoneGapをダウンロードする。

特にPhoneGapはインストールする必要はなくzip解凍するだけです。

http://phonegap.com/install/

 

PhoneGap用のXcodeプロジェクトを作成する前に、

アプリの下記の詳細情報を決めておきます。

【作成プロジェクトの場所】

/Users/name/works/XcodeProject/PhoneGap/SampleApp

【パッケージ名】

com.publicroots.SampleApp

【プロジェクト名】

SampleApp

 

次にターミナルを使ってPhoneGapを開始するための

Xcode用プロジェクトファイルを作成します。

先程ダウンロードして解凍したPhoneGap内の「lib/ios/bin」を開いて、

中にある「create」をターミナルにドラッグ&ドロップします。

 

ターミナル上のcreateの後に、

「create {作成するプロジェクトの場所} {パッケージ名} {プロジェクト名}」

(それぞれのパラメータは半角スペースをあける)となるように入力して、

Enterキーを押します。

/Users/name/Downloads/phonegap-2.9.1/lib/ios/bin/create /Users/name/works/XcodeProject/PhoneGap/SampleApp

com.publicroots.SampleApp SampleApp

そうすると、指定した場所にXcodeファイルが出来上がっています。

 

あとは、「www」フォルダの中にコーディングしたファイルを入れて、

ビルドするだけです。

 

参考サイト

Cordova(PhoneGap) とりあえずどんなものか | MUSHIKAGO APPS MEMO

Objecti-ve-C : Social.frameworkライブラリ

 

iOS6から実装されたライブラリSocial.frameworkを使うと

簡単にSNSへシェアができるようになります。

 

#import <Social/Social.h>
〜略〜

// Facebookシェアボタン設置

UIImage *FBsharebtnimg = [UIImage imageNamed:@"facebook.png"];

FBrepbutton = [[[UIButtonalloc] initWithFrame:CGRectMake(160, 468, 80, 100)] autorelease];

[FBrepbuttonsetBackgroundImage:FBsharebtnimg forState:UIControlStateNormal];

 [FBrepbuttonaddTarget:selfaction:@selector(FBshareaction:) forControlEvents:UIControlEventTouchDown];

 [self.viewaddSubview:FBrepbutton];

〜略〜

- (void)FBshareaction:(id)sender {
//NSLog(@"Facebookシェア保存");
// 組み込みのFacebookが利用可能な端末かを検証する
if ([SLComposeViewController isAvailableForServiceType:SLServiceTypeFacebook]) { 
// Facebook投稿機能のインスタンスを作成する 
SLComposeViewController *slComposeViewController =[SLComposeViewController composeViewControllerForServiceType:SLServiceTypeFacebook];
// 投稿するコンテンツを設定する 
// 表示する文字列 
[slComposeViewController setInitialText:@"#PUBLICROOTS"]; 
// URL 
//[slComposeViewController addURL:[NSURL URLWithString:@"http://publicroots.com"]];
// 画像 (ファイル名が分る場合)
//[slComposeViewController addImage:[UIImage
imageNamed:@"SNScompimg"]]; 
// 画像を添付 
[slComposeViewController addImage:[self makeaShot]];
// 処理終了後に呼び出されるコールバックを指定する
[slComposeViewController
setCompletionHandler:^(SLComposeViewControllerResult result) {
switch (result) {
case SLComposeViewControllerResultDone:
NSLog(@"Done!!");
break;
case SLComposeViewControllerResultCancelled:
NSLog(@"Cancel!!");
}
}];
// 表示する
[self presentViewController:slComposeViewController animated:YES completion:nil];
}
}

 

Twitterの場合は、isAvailableForServiceType:SLServiceTypeFacebook

isAvailableForServiceType:SLServiceTypeTwitterにすればOKです。

 

また、画像を添付したい時は、ファイル名を入れるか、

上記では別に画面キャプチャを撮って添付しています。

 

-(UIImage*)makeaShot {

//NSLog(@"シェア用画像保存スタート");
UIImage *image;
 
CGRect snsrect = CGRectMake(0, 0, 320, 468);
UIGraphicsBeginImageContext(snsrect.size);[self.view.layerrenderInContext:UIGraphicsGetCurrentContext()];
image = UIGraphicsGetImageFromCurrentImageContext();
// 画像コンテキストを終了
UIGraphicsEndImageContext();
 
//NSLog(@"シェア用画像保存完了");
return image;
}

 

f:id:publicroots:20140506224613p:plain

 

 参考サイト

画像やURLをFacebookやTwitter、LINEなどのSNSに共有する - Think Big Act Local

Objective-C : アラート表示して自動的に閉じる方法

 

アラートの表示自体は簡単なのですが、自動的に閉じたい時の方法です。

 

//アラートの表示

UIAlertView *alert = [[[UIAlertView alloc] initWithTitle:@"SAVE" 

                                                                        message:@"COMPLETE"

                                                                        delegate:self

                                                                        cancelButtonTitle:nil

                                                                        otherButtonTitles:nil ] autorelease];

[alert show];

//アラートを自動的に閉じる

[alert dismissWithClickedButtonIndex:0 animated:NO];

 

f:id:publicroots:20140506230131p:plain

 

参考サイト

【Objective-C】アラート(UIAlertView)を表示して自動的に閉じる方法 - creativi.tea

【Objective-C】アラートビューの使い方 - zakihayaメモ

Objective-C : ステータスバーを非表示にする

 

GW中にちょっと時間があったので、久しぶりにObjective-cを書いてみたりした。

結構時間があいていたので、感覚を取り戻すのに時間がかかりました。。。

 

iOSアプリのディスプレイ名を変更する方法もiOS7からちょっと変わってたのでメモ。

・info.plistの「Status bar is initially hidden 」を「YES」にする。

・TARGETSの infoタブ > Custom iOS Target Properties 項目 > View controller-based status bar appearance を「NO」にする。これはiOS7で新しく必要となった設定。項目がない場合は(+)から View controller-based status bar appearance 項目を作成する。

 

f:id:publicroots:20140507170428p:plain

参考サイト

Xcode:ステータスバーを非表示にする(iOS 7対応) | www.sirochro.com

Androidアプリの登録に必要なキーストアファイル

 

f:id:publicroots:20140507170052p:plain

AndroidアプリをAndroidマーケット(Google Play)に登録するためには、

apkファイルへの署名が必要で、署名に必要なのが Keystore ファイルです。

 

基本的には、非公開鍵なのでiOSアプリのように厳しくはないですが、

下記の情報を登録する必要があります。

 

 Enter keystore password:  <enter password>

 What is your first and last name?

 [Unknown]:  <user’s name>

 What is the name of your organizational unit?

(あなたの組織単位の名前は何ですか?)

 [Unknown]:  <department name>

 What is the name of your organization?

(組織の名前は何ですか?)

 [Unknown]:  <company name>

 What is the name of your City or Locality?

(あなたの都市または地域の名前は何ですか?)

 [Unknown]:  <city name>

 What is the name of your State or Province?

(あなたの都道府県の名前は何ですか?)

 [Unknown]:  <state name>

 What is the two-letter country code for this unit?

(この単位に該当する2文字の国コードとは何ですか?)

 [Unknown]:  <country name> 

 

まとめると

 

パスワード : *****

姓名 : 担当者の氏名

組織単位名 : 担当者の肩書き

組織名 : 会社名

都市名または地域名 : 住所

州名または地方名 : 県名

国番号 : 81(日本)

 

上記の情報さえあれば、開発会社側で設定できます。

Macのターミナルからも作成できるようです。

 

参考サイト

【10分で出来る】Androidのリリース用「署名付きapkファイル」の作成 - キリンを召還するブログ。

 

【追記 2014.05.11】

f:id:publicroots:20140511022626p:plain

いつからか分らないですが、

アプリアップデート時の仕様が変更になってます。

どうやら、変更内容の入力場所も上記画像の場所では無く、

apkアップデート時に入力するようになっているのと、

アップロードしたらすぐに反映されるようです。。。

 

あと、この前制作したアプリが突然落とさました。。。

きちんと利用規約やプライバシーポリシー情報を入れていなかったので、

「なりすまし」と思われたようです。

きちんと異議申し立てをすれば解除されましたが....

 

Androidは、Appleとは違って審査なくすぐに反映される反面、

こういうところが怖いところですね。。。