Force.comをmBaaSとして利用したハイブリッド(Cordova)アプリ開発

Force.comは、iOS、Android向けの、ネイティブ、ハイブリッドおよびモバイルブラウザ向けHTML5アプリケーションの開発環境とSalesforce Mobile SDKがあり、mBaaSとしても充実しています。

この記事は、APEXやVisualForcePageなど、Force.comがプラットフォームとして用意しているアプリケーション開発環境のコアなところを活かしつつ実用的なモバイルアプリケーションを素早く作成する手法として、iOS向けハイブリッドアプリケーションの開発について調べたことをまとめました。

ハイブリッドアプリケーション用のSalesforce Mobile SDKは、Apache Cordovaのプラグインとして提供されています。
そのため、開発にはCordovaの基本的な知識が必要となります。
Cordovaについては、前回の記事「Apache CordovaによるPush通知の実装 iOS版」を参照ください。

また、Cordovaは通常、アプリ内にhtmlやjsなどのアセットを含めてビルドしますが、ハイブリッドリモートという構成をとると、VisualForcePageなど従来からのサーバーサイドレンダリングの仕組みを活用することができます。

そこで、この記事では、iOS向けハイブリッド、かつハイブリッドリモートという構成のアプリケーションを作成するための手順について説明していきます。

iOS版のハイブリッドアプリの開発をさっと試すには、公式ドキュメントの「Getting Started with iOS Hybrid」が参考になります(対応する日本語記事も会ったような気がしたが見つからない)。こちらも併せて参照ください。

前提条件

Salesforce Mobile SDKで、iOS向けハイブリッドアプリを開発するには、以下のような環境や知識が必要です

  • Force.com開発の基本的な知識
  • node.jsコマンドを実行可能な環境
  • Apache Cordovaの実行環境と基礎的な知識
  • アプリを実機にインストールするためのXCodeとその操作に関する知識

この記事では、これらの内容については、扱いません。
“Force.comをmBaaSとして利用したハイブリッド(Cordova)アプリ開発” の続きを読む

Apache CordvaによるPush通知の実装 iOS版

モバイルのアプリで、UIの実装はHTML5でいいんだけどPush通知だけは入れたいという要件に対応するために、Apache Cordovaを利用したPush通知の実装をまとめてみました。
Apache Cordovaのインストールからプロジェクトのセットアップ、必要なプラグインのインストール、最後にPush通知を実装する流れで記載していますので、Push通知の実装だけ知りたい方は前半を飛ばしてください。

この記事では、Apple Push Notification Service (APNs)を利用するiOSアプリのみを対象としています。
APNsを利用したPush通知の基本については、前回の記事「iOSアプリPush通知 開発環境の作成手順まとめ」にまとめてありますので参考にしてください。

Cordovaのインストール

Cordovaは、npmパッケージとしてインストールできます

$ sudo npm install -g cordova

参考: iOS Platform Guide

プロジェクトの作成

インストールができたら、cordovaコマンドでプロジェクトを作成します

$ cordova create hello_cordova com.hrendoh.HelloCordova HelloCordova
Creating a new cordov

“Apache CordvaによるPush通知の実装 iOS版” の続きを読む

iOSアプリPush通知 開発環境の作成手順まとめ

iOSアプリにPush通知機能を実装するためには、まずApple Developer Centerで開発対象のアプリ用にPUSH通知(APNs)用の証明書を作成し、アプリに登録する必要があります。
また、PUSHを通知する側についても、自作のアプリやmBaaSに登録する作成した証明書を設定して、ようやく開発が始められるようになります。
慣れれば、簡単なのですが、久しぶりにアプリの開発をしたところ結構忘れていたので、手順をまとめておくことにしました。

この記事では、iOS 8.4、Xcodeは6.4で確認しています
また、手順は開発環境でAPNsによるPUSH通知の動作を確認することに絞って記述しています。

Push通知をアプリに実装するために用意するもの

まずは、Push通知を実装する前提条件として準備するものを整理しておきます

iOSアプリのビルドに必要なもの

  • Push通知を有効にしたApp IDが指定されたプロビジョニングプロファイル

APNsへのPUSH通知送信に必要なもの

  • Push通知用の証明書

“iOSアプリPush通知 開発環境の作成手順まとめ” の続きを読む

WebサイトをiOS Safariに最適化してアプリっぽく見せるには

レシポンシブ対応したWebサイトをさらにアプリっぽくiOS Safariに最適化させるためのTips集
以下の記事とAppleのドキュメントのまとめです
5 Tips for Turning Your Website Into an iOS Web… – Chief Creative Mechanic
Optimizing Mobile Web Apps for iOS | Treehouse Blog
Developing Web Content for Safari

幅を端末に合わせる

Viewport metaタグを以下のように指定

    <meta name="viewport" content="width=device-width, initial-scale=1">

さらに、ユーザーにリサイズさせないようにするには、Viewportにuser-scalable=noを追加する

    <meta name="viewport" content="width=device-width, user-scalable=no">

参照: Configuring the Viewport
“WebサイトをiOS Safariに最適化してアプリっぽく見せるには” の続きを読む

Objective-C NSDate 日付計算メモ

現在から1時間後を取得
[c]
[NSDate dateWithTimeIntervalSinceNow:60*60];
[/c]

基準時刻のNSDateから一時間後を取得
[c]
NSDate *baseDate = [NSDate date];
NSDate *afterOneHour = [now initWithTimeInterval:60*60 sinceDate:baseDate];
[/c]

今日の0:00を取得
[c]
NSDate *baseDate = [NSDate date];
NSCalendar * calendar = [NSCalendar currentCalendar];
NSUInteger flags = NSYearCalendarUnit | NSMonthCalendarUnit | NSDayCalendarUnit ;
NSDateComponents * components = [calendar components:flags fromDate:baseDate];
NSDate zeroTimeDate = [calendar dateFromComponents: components];
[/c]

今週の月曜日の日付を取得
[c]
NSDate *today = [NSDate date];
NSCalendar *calendar = [NSCalendar currentCalendar];
NSCalendar *calendar = [NSCalendar currentCalendar];
NSDateComponents *components = [calendar components:NSYearCalendarUnit | NSMonthCalendarUnit | NSWeekCalendarUnit fromDate:date];
[components setWeekday:2]; //Monday
NSDate *monday = [calendar dateFromComponents:components];
[/c]

月初の日付を取得
[c]
NSDate *today = [NSDate date];
NSCalendar *calendar = [NSCalendar currentCalendar];
NSDateComponents *components
= [calendar components:NSYearCalendarUnit|NSMonthCalendarUnit|NSDayCalendarUnit
fromDate:today];
components.day = 1;
NSDate *firstOfMonth = [calendar dateFromComponents:components];
[/c]

月の日数を取得
[c]
NSCalendar *calendar = [NSCalendar currentCalendar];
NSDate *today = [NSDate date];
NSRange range = [calendar rangeOfUnit:NSDayCalendarUnit inUnit:NSMonthCalendarUnit forDate:today];
NSInteger daysOfMonth = rang.length;
[c]

日付を比較
[c]
NSDate *date1 = [NSDate date]; // 現在日付を取得
NSDate *date2 = [NSDate dateWithTimeIntervalSinceNow:1.0f]; // 現在日付 + 1秒
if ([date1 isEqualToDate:date2]) {
NSLog(@"同じ日付です");
} else {
NSLog(@"異なる日付です");
}
[/c]
逆引きObjective-C for iPhoneアプリ – 2つの日付を比較する

Objective-Cで、ページ遷移時に次に表示するコントローラーに値をセットするには

StoryboardのSegueを使って画面遷移する際に表示するViewControllerに値をセットするには、まず、以下のようにStoryboard SegueのIdentifierに名前をつけておきます。
ここでは、モダールで表示するので適当に”Modal”と入力しています。
Segue-setting

画面遷移のする前には、遷移元のprepareForSegueが呼ばれるので、そこで上で指定したIdentifierでSegueを特定し、ターゲットのコントローラを取得して値をセットします。
ここでは、delegateをセットしています。
[c title=”AppViewController.m”]
– (void)prepareForSegue:(UIStoryboardSegue *)segue sender:(id)sender
{
if ([segue.identifier isEqualToString:@"Modal"])
{
ModalViewController *controller = [segue destinationViewController];
controller.delegate = self;
}
}
[/c]

補足

モーダルを閉じたときの処理についても書いておきます。

モーダルを閉じたときは、上でdelegateにセットしていたProtocolのメソッドでモーダルから値を渡します。
[c title=”ModalViewController.h”]
@class ModalViewController;
@protocol ModalViewControllerDelegate
– (void)didSelectAnimal: (ModalViewController *)controller call:(NSString *) call;
@end

@interface ModalViewController : UIViewController
@property (nonatomic, weak) id delegate;
@end
[/c]
選択した動物の鳴き声をラベルに表示します。
[c title=”ModalViewController.m”]
– (IBAction)selectDogButton:(id)sender {
[_delegate didSelectAnimal:self call:@"Bow"];
}

– (IBAction)selectCatButton:(id)sender {
[_delegate didSelectAnimal:self call:@"Mew"];
}
[/c]
Protocolの実装
[c title=”AppViewController.m”]
– (void)didSelectAnimal:(ModalViewController *)controller call:(NSString *) call
{
self.callLabel.text = call;
[self dismissViewControllerAnimated:YES completion:nil];
}
[/c]
ラベルを変更した後に、モーダルを閉じています。

参考: 初めての Storyboard in iOS 5 Part 2 | Ray Wenderlich

COCOAPODS をXCodeプロジェクトにセットアップするには

Objective-C 用のライブラリ管理システム COCOAPODS のセットアップメモ

ほぼ、Adding Pods to an Xcode project の通りです。

  1. COCOAPODSのインストール
    COCOAPODSはRuby Gemなのでインストールは gem install を利用します。
$ gem install cocoapods
  1. XCodeで新規からプロジェクトを作成します。「HelloWorld」というプロジェクトを作成しました。
  2. Xcodeを閉じます。

  3. プロジェクトのディレクトリに移動してPodfileを作成します。
    ライブラリ pod は Podfile にしています。GemのGemfile、Composerのcomposer.jsonにあたるファイルです。

$ cd HelloWorld
$ vim Podfile

“COCOAPODS をXCodeプロジェクトにセットアップするには” の続きを読む