「iPad使っちゃおうよ」

そんな感じで、１１月のオフィス移転に合わせて受付からのコンタクト方法としてiPadを導入しました。

iPadとAsteriskを連携させて、受付からお客様が担当者へ直接連絡を取る手段を実現しています。

今回は、そのiPadのアプリ側の内容をご紹介します。

まず始めに、お客様を出迎えるのが以下の画面です。

手のひらマークが表示されていますが、一差し指でのタッチをお勧めします。

スクリーンをタッチしていただくと、トップ画面です。

こちらは担当者を５０音から選択していただきます。

現状は時計とカレンダーを表示していますが、

フォトフレームにしたり、セミナーなどのイベント通知を行ってもいいかもしれません。

また、いつも同じでは飽きてしまうのでアプリの背景は季節により変化します。

こちらは夏っぽい感じです。

担当者の５０音をタッチしていただくと、担当者が一覧表示されます。

御用のある担当者をタッチしていただくと、その担当者へと電話がつながります。

シンプルな作りですが、従来の担当者一覧を紙で用意して、番号を入力して電話をしていただく方法よりも断然簡単にわかりやすくなったと思います。

実際にiPadでの通話は予想以上に音がクリアに聞き取れてなかなか快適です。

※記事中の画像に表示されている担当者はあくまでイメージです。

みなさんiPad使ってます？私もかなり使ってます。macbookを滅多に使わなくなってしまったぐらい活躍しています。iPadは気軽に使えて便利なので気に入っているのですが、やはりSafariでPC向けページのブラウジングが面倒。A4プロセッサが速いとは言っても重いページの表示はちょっとつらいし、小さいリンクをクリックするのが難しいです。世の中ではFLASH非対応が問題視されてますが、それより私は通常のWebページのナビゲーションが引っかかります。小さいリンクが多いページは見ないようになってきました。

でもこういうニーズが出てくる事をAppleはiPhone発売の頃から予測していて、Webアプリなるモノを提案していたんですよ。Webアプリと言ってもサーバサイドのWebアプリケーションの事ではなく、ブラウザ上で動くクライアントアプリケーションです。今回はこのWebアプリをご紹介したいと思います。

Webアプリとは

Webアプリを一言で説明すると「ネイティブアプリにしか見えないWebページ」と表現できるのではないかと思います。iPhone、iPadのネイティブアプリはご存じのとおりスラスラ上下にフリックできるリストや、アニメーション付き画面切り替えが出来たりするアレですよ。Webアプリはそんな見栄えや操作感を持ったWebページなんですよ。

一つ目の画像がiPadのSafariで通常のWebページを表示した場合で二つ目がWebアプリを表示した場合です。どうです？見慣れたナビゲーションバーやリストビューなど、パッと見ネイティブアプリのように見えませんか？実はただ見栄えがネイティブアプリっぽいだけじゃないんです。以下にWebアプリの特徴を簡単にまとめてみました。

1. 指でタップしやすいiPhone/iPad標準のUIでWeb画面が作れる
2. Objective-Cを習得しなくてもHTML5+CSS+Javascriptでアプリが作れる
3. Appleの審査無しに任意のタイミングで公開や差し替えができる
4. 端末を傾けたときのタテヨコ切り替えやGPS、マルチタッチといったネイティブアプリ同様のイベントがJavascriptで取得できる
5. 画面遷移アニメーションがSafari独自の拡張で提供されている
6. HTML5なのでオフラインでの使用やローカルストレージに対応しているのでネイティブアプリ同様の機能が提供できる
7. Safariのアドレスバーも隠して全画面表示ができる

どうでしょう？いろいろできると思いません？iPhone/iPadアプリは作ってみたいけど、Objective-C勉強するのが大変そう。。。というあなたにピッタリじゃあないですか？それではWebアプリの中身について見ていきたいと思います。

Webアプリの中身

前述の通りWebアプリはHTML5+CSS+Javascriptで構成されています。表示内容はHTML、動作はJavascript、見栄えはCSSといったそれぞれの役割は通常のWebページと全く同じです。具体的なCSSの内容はひとまず置いておくとしてまず作成手順を説明しておきます。私はMacのDashcodeというツールを使ってみました。DashcodeはMacで動くウィジェットやSafari、もしくはモバイル向けSafariで動くWebアプリケーションを編集する為の無料ツールです。iPhone SDKに含まれます。

上の画面をみてもらえばわかりますが、Dashcodeでは画面のレイアウトを直接操作しながら画面を編集することができます。iPhone/iPad向けの画面コンポーネントが揃っていて、ネイティブアプリっぽいボタン画像や背景画像もちゃんと用意されています。もちろんブレイクポイントを設定してステップ実行もできます。まるでネイティブアプリを開発するXCodeみたいです。Dashcodeの使い方はここでは紹介しきれないので、ちょっとだけ実際に手を加えてみたいと思います。

Webアプリの編集

それでは先ほどの例に出たWebアプリをいじってみます。変更箇所は以下の2つだけ

• ホームスクリーンに配置するWebアプリのアイコンを設定
• Safariのアドレスバーを非表示にして全画面可

ではまずホームスクリーンアイコンから始めます。ホームスクリーンアイコンって言われてピンと来ない人のために説明しておくと、iPhone/iPadのアプリはホームスクリーンに配置されたアイコンをタップすることにより起動されます。このアプリのアイコンと全く同じようにWebサイトのショートカットをホームスクリーンにブックマークとして配置する事ができるんです。そのアイコンをタップするとアプリの代わりにSafariが立ち上がり、Webページを表示するというモノです。ただ通常のWebページをブックマークしてしまうと真っ白な味気ないアイコンが配置されてしまうので、Webアプリらしく専用のアイコン画像を用意したいと思います。アイコン画像はiPad用だと72 x 72 pxで作ります。取り急ぎ以下のものを用意しました。

このアイコンをホームスクリーンに配置するためにはHTMLのHEADタグ内に以下のタグを埋め込みます。

<link rel=”apple-touch-icon” href=”Images/WebClipIcon.png” />

このタグを埋め込むとSafariでホームスクリーンに設定する際に以下のようにアイコンが表示されます。

ホームスクリーンに設定すると、ほら、ネイティブアプリと見分けがつかないでしょ？

ちなみにアイコンを設定しなかった場合はこんな感じ

やっぱり真っ白じゃ寂しいですね。

では次にアドレスバーを非表示にしてフルスクリーン表示になるよう変更したいと思います。やり方は簡単。以下のタグを先ほどと同様にHTMLのHEADタグに追加するだけです。

<meta name=”apple-mobile-web-app-capable” content=”yes” />

どうですか？もうこれでSafariで表示したHTMLページには見えませんよね。このようにWebアプリの開発はHTMLやCSS、Javascriptをちょちょいと編集するだけで簡単にできてしまいます。今回ご紹介できなかった機能や特徴も盛りだくさんで本当に簡単に作れちゃいます。皆さんもぜひお試しください！

Twitter / ツイートボタン

wordpressに導入する場合、インデックスページには上のリンク先から生成したHTMLコードを貼付けるとトップページをTweet対象としてしまい、正しく表示できません。

wordpressの関数を使い、こんな感じに置き換えます。（左と下に10pxずつマージンとるdivを追加してます）

<div style="float:right; margin-left:10px; margin-bottom:10px;"><a href="http://twitter.com/share" class="twitter-share-button" data-text="<?php the_title(); ?>" data-url="<?php the_permalink() ?>" data-count="vertical" data-via="techfirmlab">Tweet</a><script type="text/javascript" src="http://platform.twitter.com/widgets.js"></script></div>

それでは快適なwordpressライフを。

以前の記事、「iPadにマジックテープを貼ってやった」も合わせてご覧ください。

この前の”アップルポイン”が意外と好評だったので、今回は調子にノッてiPed用にもマジックテープを貼ってやりました。

※このサイトをご覧の方にiPedを聞いたことがない方はいないと思いますが、ご存知ない方はこちらでご確認ください。

iPed用って言っても、

「”アップルポイント”が増えるだけでしょ？」

「何が違うの？」

違うんです。


iPadとiPedの違い。。。


そうです。あれです。

「ドロイドポイント」です！

iPedはAndroidですから。


以上、これだけです。

でも、これ意外と便利なんです。

• 起動が遅いiPed。起動を待つ間にこの”ドロイドポイント”を使えば両手が空き自由にiPadが使えます。
• ”予期せぬエラー”でアプリが使えなくなっても、この”ドロイドポイント”を使えば空いた両手ですぐにiPadを楽しめます。

さらに実はこの”ドロイドポイント”、”アップポイント”よりも曲線が少ないので作るのが簡単です。

”アップルポイント”に断念した方は是非！”ドロイドポイント”作ってみてください。

[使用上のご注意]

皆さんが知っているAndroidは、言うほど一般的には知られていません。

Xperiaを知っていてもAndroid、ドロイドくんの知名度は低いです。

自慢気に”ドロイドポイント”を披露すると「何その虫？」言われかねないのでご注意してください。

”ドロイドポイント”の増やし過ぎにもご注意ください。ゴキ○リに間違われる可能性があります。

再現手順は下記の通り。

１：動画画面で全画面表示する

２：正常に表示されていることを確認して全画面表示を閉じる

３：端末を180°回転して再び全画面表示→ステータスバーが逆位置に！

（再び端末を回転すると戻ります）

※EW’s Must List, FT, SoniyPicturesなどで確認できます。

Split Viewは、２つの隣り合ったペインから成る１つのフルスクリーンビューです。

横方向の場合はマスタペインと詳細ペインが表示されますが、縦方向の場合は詳細ペインのみの表示となります。

しかし、「設定」アプリのように縦方向の場合でもマスタペインを表示したい場合があります。

今回はその方法をご紹介します。

やることは３つです。

1. UISplitViewControllerのサブクラスを作成
2. willAnimateRotationToInterfaceOrientationをオーバーライド
3. 横方向の場合のみ、最後に親クラスのwillAnimateRotationToInterfaceOrientationを呼ぶ

３番目がポイントです。

UISplitViewControllerのサブクラスのwillAnimateRotationToInterfaceOrientationでは以下のようにします。

縦／横それぞれの場合にマスタペインと詳細ペインの表示位置とサイズを変更します。

- (void)willAnimateRotationToInterfaceOrientation:(UIInterfaceOrientation)interfaceOrientation duration:(NSTimeInterval)duration {

	UIViewController* master = [self.viewControllers objectAtIndex:0];
	UIViewController* detail = [self.viewControllers objectAtIndex:1];

	CGRect masterFrame = master.view.frame;
	CGRect detailFrame = detail.view.frame;

	if(interfaceOrientation == UIInterfaceOrientationPortrait ||
	   interfaceOrientation == UIInterfaceOrientationPortraitUpsideDown) {

		// 縦
		masterFrame.size.width = 320;
		masterFrame.size.height = 1024;
		masterFrame.origin.x = 0;
		masterFrame.origin.y = 0;

		detailFrame.size.width = 448;
		detailFrame.size.height = 1024;
		detailFrame.origin.x = 321;
		detailFrame.origin.y = 0;

		[master.view setFrame:masterFrame];
		[detail.view setFrame:detailFrame];

	}
	else {
		// 横

		masterFrame.size.width = 320;
		masterFrame.size.height = 768;
		masterFrame.origin.x = 0;
		masterFrame.origin.y = 0;

		detailFrame.size.width = 704;
		detailFrame.size.height = 768;
		detailFrame.origin.x = 321;
		detailFrame.origin.y = 0;

		[master.view setFrame:masterFrame];
		[detail.view setFrame:detailFrame];

		[super willAnimateRotationToInterfaceOrientation:interfaceOrientation duration:duration];
	}
}

ポイントとなるのは横方向の時の処理で、親クラスのwillAnimateRotationToInterfaceOrientationを呼んであげます。
これを指定しないとマスタペインと詳細ペインのつなぎ目のバーの直角となり丸みが消えてしまいます。

これらの指定で以下のように横、縦方向でも常に２ペインになります。

横方向の場合

縦方向の場合

以上です。

あらら、猫を抱えた女性がおもむろにPCに向かってポチ、ポチ、カチ、カチっとしたら、いとも簡単に猫をアプリに閉じ込めてしまいました。


という動画ではありません。


UIのレイアウトだけでなくイベントの設定もグラフィカルにカチカチと。
これほど簡単にアプリが作れるようになってしまうんです。

女子高生がアプリを作り出す日も近いです。

早く使えるのが楽しみです！

メディアプレーヤーを作成して、動画を再生します。

MPMoviePlayerControllerを使用します。

#import <MediaPlayer/MediaPlayer.h>

した上で、

// 動画URL
NSString *movieURL = @"[URL]";
NSURL *url = [NSURL URLWithString:movieURL];
// プレーヤーを生成
MPMoviePlayerController	*player = [[MPMoviePlayerController alloc] init];
[player setContentURL:url];
// プレーヤーを再生
[player play];

これが再生までの流れです。


ネットワークを考慮した処理などが抜けているので実際には必要です。
Notificationsを利用して、データ取得後、再生後等の通知を設定します。

ユーザにとってのアプリ起動感覚を早めるためにも起動画像は設定した方がいいでしょう。

iPadの場合、iPhoneとは異なり４方向（ホームボタンを基点）に対応させる必要があります。

iPadアプリは様々な方向から起動されることを想定しているためです。

1. サポートする起動向きを指定

まずiPadアプリのサポートする起動向きを指定します。

これは、info.plistの「UISupportedInterface- Orientations」キーによって指定され、サポートする向きを配列で指定します。

全ての方向をサポートする場合は以下のようになります。

このように全ての方向をサポートすることが推奨されています。

2. 起動画像の準備

次に起動画像を準備します。

2.1 画像サイズ

縦と横でそれぞれ画像サイズ（ピクセル）は以下のとおりです。

縦画像：1004(高)  ×　768(横)

横画像：748(高) × 1024 (横)

※高さはステータスバーの高さ分短くなります。

2.2 画像名、種類

iPhoneの場合、”Default.png”という画像を起動画像として利用していましたが、iPadで以下の画像を使用します。

１：Default-Portrait.png（汎用縦：ホームボタンが下）

２：Default-PortraitUpsideDown.png　（逆縦：ホームボタンが上）

３：Default-LandscapeLeft.png（横左：ホームボタンが左）

４：Default-LandscapeRight.png（横右：ホームボタンが右）

５：Default-Landscape.png（汎用横)

これのファイルは全ての方向をサポートして用意することが推奨されていますが、方向をサポートしていても画像がない場合は以下の優先度順に指定されます。

[ 縦 ]：Default-Portrait.png　→　Default.png

[ 逆縦 ]：Default-PortraitUpsideDown.png →　Default-Portrait.png　→　Default.png

[ 横右 ]：Default-LandscapeRight.png　→　Default-Landscape.png　→　Default.png

[ 横左 ]：Default-LandscapeLeft.png　→　Default-Landscape.png　→　Default.png

実際にアプリを起動するとそれぞれ以下のようになります。
すべてのホームボタンの向きに起動画像が対応しています。

ホームボタンが下（Default-Portrait.png）

ホームボタンが上（Default-PortraitUpsideDown.png）

ホームボタンが右（Default-LandscapeRight.png）

ホームボタンが左（Default-LandscapeLeft.png）

3.ユニバーサルアプリの場合の指定

ユニバーサルアプリにて、iPadとiPhoneそれぞれに起動画像を準備したい場合は、info.plistの「UILaunchImageFile」キーを指定します。

iPad用の画像を指定する場合は以下のような指定の仕方ができます。

3.1 info.plistの指定

「UILaunchImageFile~ipad」キーに”MyiPadImage.png”を指定

3.2 準備する画像

MyiPadImage-Portrait.png

MyiPadImage-PortraitUpsideDown.png

MyiPadImage-LandscapeLeft.png

MyiPadImage-PortraitUpsideDown.png

シミュレータの「写真」には始め画像が登録されていません。

写真を取り込むアプリを作っている場合などは画像があった方が便利なので今回はシミュレータに画像を登録します。

この方法は、iPhone、iPad共に利用できます。

まずシミュレータを起動したら、登録した画像をシミュレータへドラックします。

するとSafariが起動します。

あとは画像を長押して「保存する」を実行すれば「写真」に登録されます。

iPadの場合も同様です。