iPhone/iPadユニバーサルアプリ化とデモ

Slides:



Advertisements
Similar presentations
InstallShieldLecture InstallShield でインストーラを作成する方法 ( 初級編 ) ソニーエンジニアリング 設計 3 部 1 課 齋藤佑輔.
Advertisements

オブジェクト指向 プログラミング 第二回 知能情報学部 新田直也. 講義計画(あくまで予定) 第 1 回 プログラミング言語の種類と歴史 第 2 回 eclipse の基本操作 第 3 回 eclipse のデバッグ機能 第 4 回 構造化プログラミングの復習 第 5 回 演習 第 6 回 構造化指向からオブジェクト指向へ.
BBT 大学 Ruby on Rails 開発環境セットアップマニュアル Mac 版 1.1 最終更新日: 2013/1/5.
フォトブックサイト企画提案書 『モバフォトBook』
BBT大学 Ruby on Rails開発環境セットアップマニュアル
WinDBG6によるRTX5.5デバッグ RTX開発環境 WinDBG6.0 debugモードで起動 232Cクロスケーブル
開発者目線でAndroidとiPhoneを比較してみる
Cornell Spectrum Imagerの使い方
目次 WindowsPCの場合 iPadの場合 iPhoneの場合 Androidの場合
4.ユーザー登録マニュアル              Version 年6月10日 国立情報学研究所.
情報処理実習 第05回 Excelマクロ機能入門 操作マクロ入門.
図の挿入 ●方法1 ①図を挿入する位置にカーソルを置く。 ②「挿入」メニュー →「図」 → 「ファイルから」とクリックする。 ③挿入するファイルを選択し、「挿入」をクリックする。 ●方法2(書式までコピーされるので、ファイルサイズが大きくなる) ①挿入する図をコピーする。 ② 挿入する位置にカーソルを移動し、ツールバーまたは右クリックメニューの「貼り付け」をクリックする。
図の挿入 ●方法1 ①図を挿入する位置にカーソルを置く。 ②「挿入」タブ ⇒「図」 → 「ファイルから」とクリックする。 ③挿入するファイルを選択し、「挿入」をクリックする。 ●方法2(書式までコピーされるので、ファイルサイズが大きくなる) ①挿入する図をコピーする。 ② 挿入する位置にカーソルを移動し、ツールバーまたは右クリックメニューの「貼り付け」をクリックする。
ブラウザの基本操作 前のページに戻る ブラウザの左上にある 「戻る」ボタンで、自分がたどってきた一つ前のページに戻ることができます。
情報処理 第8回.
2017/3/2 情報処理 第8回.
情報処理 第7回.
パソコン教室(Word) ワークフロア清柳.
REIMEI EISA Viewerの使い方
Androidアプリを公開する方法.
Skypeの使い方 ス  カ  イ  プ ア ン ド ロ イ ド Android版.
デスクトップを画像として保存する(1) ① デスクトップの画像をクリップボードへコピーする。
2017/3/7 情報処理 第8回.
ファイルやフォルダを検索する ①「スタート」→「検索」→「ファイルとフォルダ」とクリックする。
PCの情報を得る - 「システム情報」 ①「スタート」→「すべてのプログラム」→「アクセサリ」→「システム ツール」→「システム情報」とクリックする。 ②左欄の項目を選択すると、右欄に情報が表示される。
コントロールパネル ◎コントロール パネル: コンピュータのさまざまな機能を設定するための画面
2007 Microsoft Office system クイックガイド
コントロールパネル ◎コントロール パネル: コンピュータのさまざまな機能を設定するための画面
XcodeとObjectiveC講習会 講師:株式会社 アセンディア 遠藤 豊紀 2010年4月よりiOSアプリの開発に 参画
Hot Pepper for iPod touch
第四回 VB講座 画像とタイマー.
デスクトップを画像として保存する(1) ① デスクトップの画像をクリップボードへコピーする。
EGSに対応した粒子軌跡と 計算体系の3次元表示ソフト - CGVIEW -
ImpressのプレゼンをPPで表示 学校や会社にパワーポイントはあるが自宅には ない人のために・・・・・。
Al-Mailのインストールと使い方 インストール –1 (pop-authの設定、Al-Mailのインストール用ファイルをダウンロード)
F5 を押すか、または [スライド ショー] > [最初から] をクリックして、コースを開始してください。
Fire Tom Wada IE dept. Univ. of the Ryukyus
9 Microsoft Word(1).
アプリケーション共有機能 〈参考〉 (図1) (図2)
チュートリアル EBSCOhostの概要
【トップページ-TOPICSの登録・編集】
Microsoft Office 2010 クイックガイド ~応用編~
メッセージ機能 相手にメッセージを送信する 04 送信する相手を選んでメッセージを送信します。
タブレットのビジネス活用を支援する法人向けファイル共有サービス
情報学部 プログラミング体験教室 (初級編)
Microsoft Office 2010 クイックガイド ~応用編~
Titanium Studioを使った アプリ開発 Vol.1
Unity, C# シーン移動と1人称視点.
情報処理 第8回.
VBA ( Visual BASIC for Application) を使えるようにする方法
EclipseでWekaのAPIを呼び出す
すぐできるBOOK -基本設定編-.
単語登録(1) ◎MS-IMEの「単語登録」に、単語、語句、記号など自分がよく使うものを登録しておくと、便利である。
諸連絡 USBメモリの販売について 日時:6月23日(月)授業開始前 商品:プリンストン社製32MBのUSBメモリ
デジタル画像とC言語.
EGSに対応した粒子軌跡と 計算体系の3次元表示ソフト - CGVIEW -
スイッチを入れる前に… 講習を受けていない人は、まだスイッチを入れないこと。 まず講習を受けてセットアップを行ってください 注意.
プログラミング基礎a 第12回 Java言語による図形処理入門(3) アニメーション入門
プログラミング基礎a 第11回 Java言語による図形処理入門(3) アニメーション入門
Fire Tom Wada IE dept. Univ. of the Ryukyus
ファイルやフォルダを検索する ①「スタート」→「検索」とクリックする。 ②「表示項目」から適当なものを選択する。
アルゴリズムとプログラミング (Algorithms and Programming)
Windows Summit 2010 © 2010 Microsoft Corporation.All rights reserved.Microsoft、Windows、Windows Vista およびその他の製品名は、米国 Microsoft Corporation の米国およびその他の国における登録商標または商標です。
情報処理概論Ⅰ 2007 第6回 2019/5/16 情報処理概論Ⅰ 第6回.
System.AddInを利用したアプリケーション拡張 - アドインの開発 -
Microsoft Office 2010 クイックガイド ~応用編~
Molecular Devices Japan
単語登録(1) ◎MS-IMEの「単語登録」に、単語、語句、記号など自分がよく使うものを登録しておくと、便利である。
ソーシャルメディアの画像テンプレート このテンプレートを使用して、既存の画像のサイズを変更するか、 ソーシャル メディアで使用する新しい画像を作成します。 Twitter Facebook Instagram LinkedIn 既存の画像のサイズを変更するには 新しい画像を作成するには 次のページで、画像サイズを選択し、画像のプレースホルダーの中央にある写真アイコン.
System.AddInを利用したアプリケーション拡張 - アドインの開発 -
Presentation transcript:

iPhone/iPadユニバーサルアプリ化とデモ 2010.05.19  2010.7.30修正版 木谷公哉

iPhone/iPad両対応するには? iPadの2倍モードを使う Targeted Device Family コーディング内でプラットフォームを検出し、Viewや座標系をいじる? ユニバーサルアプリ化(今回のデモ) View部分の分離 コーディングの分離 iPhone側コーディングにプラットフォーム検出させて処理を分離させることも可

抽選くん v 0.70 (2009/11/11) 320x480 512x512 57x57 [self.view addSubview: HELP]; HELP.alpha = 0.0; タップでソフトキーボードの開閉 使い方 「番号の最大値」を入力 「初期化」ボタンを押す 「抽選」を押すと、抽選結果が表示される UIView *view UIView *HELP アプリダウンロード http://itunes.apple.com/jp/app/id337941044?mt=8 iPhone/iPod TouchのApp Storeの検索で、「抽選」と打てば、出てきます アプリ紹介HP http://bakkers.gr.jp/~kitani/tools/iphone/lottery_ja.htm UILabel *help_exp; help_exp.numberOfLines = 0;

抽選くん v 0.80 (2010/05/13) 320x480 768x1004 512x512 57x57 72x72 [self.view addSubview: HELP]; HELP.alpha = 0.0; タップでソフトキーボードの開閉 使い方 「番号の最大値」を入力 「初期化」ボタンを押す 「抽選」を押すと、抽選結果が表示される UIView *view UIView *HELP 480x320 1004x768 アプリダウンロード 申請中(申請が通れば、0.70からのアップデートという形で出てきます。 アプリ紹介HP http://bakkers.gr.jp/~kitani/tools/iphone/lottery_ja.htm 配置調整のみ 配置調整のみ UILabel *help_exp; help_exp.numberOfLines = 0;

プラットフォーム検出 #if (__IPHONE_OS_VERSION_MAX_ALLOWED >= 30200) if (UI_USER_INTERFACE_IDIOM() == UIUserInterfaceIdiomPad) { // iPadなら }else{ // iPadでないOS 3.2以上(iPhone4.0等) //縦横の比率を逆転か // 横向きになったら if (fromInterfaceOrientation == UIInterfaceOrientationPortrait || fromInterfaceOrientation == UIInterfaceOrientationPortraitUpsideDown){ help_exp.frame = CGRectMake(help_exp.frame.origin.x,help_exp.frame.origin.y, help_exp.frame.size.width,help_exp.frame.size.height/3*2); help_exp.font = [UIFont systemFontOfSize:13]; }else { // 縦向きになったら help_exp.frame.size.width,help_exp.frame.size.height/2*3); help_exp.font = [UIFont systemFontOfSize:17]; } #else // OS 3.1.x以下(iPhone) #endif HELPメニューのUILabel *help_exp  - iPadは縦横サイズ変更なし - iPhoneは、縦横の比率(320:480)を逆転し、   フォントサイズを調整

流れ XCodeをiPad対応版に更新する iPhoneアプリのiPad化 App Store申請(iPad対応) 4.0beta (iPhone 4.0beta / iPad 3.2) iPhoneアプリのiPad化 ターゲットのユニバーサル化 Interface BuilderでiPad用のMainWindowを自動生成 Intarface BuilderでiPad用のViewを自動生成 iPad用MainWindowの参照先XIBの変更 シミュレータで動作確認 回転対応(有効化) Intarface BuilderでiPad用のViewを修正 (大きさ、フォント等) 回転対応(プログラム・配置) Loading画面の回転対応 アイコン分離(iPhone/iPad両対応) App Store申請(iPad対応)

iPhoneアプリのiPad化(1) ターゲットのユニバーサル化 One Universal applicationを選択 中身が空のResource-iPadグループができたことを確認 Interface BuilderでiPad用のMainWindowを自動生成 iPadのMainWindow名称を考える Info.plistに「Main nib file base name (iPad) 」が追加されているので、値に「考えた名前」(デフォルト値:MainWindow-iPad)を入れ、保存する iPhoneのMainWindow.xibを開いて、Fileメニューから「Create iPad Version Using Autosizing Marks」を選択 ターゲットにチェックを入れ、保存します それをResource-iPadグループに登録(移動)しましょう

iPhoneアプリのiPad化(2) Interface BuilderでiPad用のViewを自動生成 Resources内のlottery_iphoneViewController.xibを開く Interface BuilderのFileメニューからCreate iPad Version Using Autosizing Markを選択 FileメニューからSave as を選択し、ターゲットにチェックをいれた上、lottery_iphoneViewController-ipad.xibで保存。 Resources-iPadグループにファイルを登録(移動)。 iPad用MainWindowの参照先XIBの変更 MainWindow-iPad.xibを開き、「Lottery iphone View Controller」を開く Attributes InspectorのNIB Nameをlottery_iphoneViewController-ipad.xibに変更 InspectorのClassが「lottery_iphoneViewController」になっているか確認 iPhone OS 3.2(iPad)のシミュレータで動作することを確認。 iPad用のコーディングファイルの生成(必要な方は) Resources-iPadグループで右クリックして、追加→新規ファイルを選び、iPhone OSのCocoa Touch ClassからUIViewController subclassを選択してください オプションは、Targeted for iPadのみチェックを入れて、保存名称は、lottery_iphoneViewController-ipadにします。

iPhoneアプリのiPad化(3) 回転対応(有効化) iPad用のView編集 回転対応(プログラム・配置) (BOOL)shouldAutorotateToInterfaceOrientation:(UIInterfaceOrientation)interfaceOrientationを有効にして、「return YES;」とする iPad用のView編集 適切な大きさとフォント、そして配置の調整 回転対応(プログラム・配置) iPhone側で特に縦横でフォントサイズを変更する 縦横の比率(2:3)を変更 iPhone/iPad側で部品の配列を調整する

回転処理 最初に呼び出されるメソッド 回転時に回転前に呼び出されるメソッド 回転時に回転後に呼び出されるメソッド 回転判定 対応する回転を選択(4方向なら、return YES;) (BOOL)shouldAutorotateToInterfaceOrientation:(UIInterfaceOrientation)interfaceOrientation 回転時に回転前に呼び出されるメソッド (void)willRotateToInterfaceOrientation:(UIInterfaceOrientation)toInterfaceOrientation duration: duration:(NSTimeInterval)duration toInterfaceOrientation:回転後の位置情報が入る 回転時に回転後に呼び出されるメソッド (void)didRotateFromInterfaceOrientation:(UserInterfaceOrientation) fromInterfaceOrientation fromInterfaceOrientation: 回転前の位置情報が入る 回転判定 interfaceOrientation : 現在の回転情報 UIInterfaceOrientationPortrait : ホームボタンが下(縦:通常) UIInterfaceOrientationPortraitUpsideDown : ホームボタンが上(縦:逆さ) UIInterfaceOrientationLandscapeLeft : ホームボタンが左(横) UIInterfaceOrientationLandscapeRight : ホームボタンが右(横)

iPhoneアプリのiPad化(4) 9. Loading画面の回転対応 Info.plistでiPhone/iPadの変数分け ○○: iPhone用 ○○ (iPad): iPad用 iPadは「Info.plist」で対応できる Launch image (iPad): iPad用のデフォルト名.png (DefaultiPad.png) Supported interface orientations (iPad): Array 対応する回転方向 LandscapeLeft ホームボタン(左) - 横 LandscapeRight ホームボタン(右) - 横 Portrait ホームボタン(下) - 縦(通常) PortraitUPSideDown ホームボタン(上) - 縦(逆さま) 用意する画像 デフォルト画像 Default.pngあるいは、Launch image (iPad)指定 縦:DefaultiPad-Portrait.png 縦のデフォルト DefaultiPad-Portraitleft.png 縦 – ホームボタン(通常:下) DefaultiPad-PortraitUpSideDown.png 縦 – ホームボタン(逆さ:上) 横:DefaultiPad-Landscape.png 横のデフォルト DefaultiPad-LanscapeLeft.png 横 – ホームボタン(左) DefaultiPad-LandscapeRight.png 右 – ホームボタン(左) iPad Programming Guide - The Core Application Design - http://developer.apple.com/iphone/library/documentation/General/Conceptual/iPadProgrammingGuide/CoreApplication/CoreApplication.html#//apple_ref/doc/uid/TP40009370-CH6-SW6

iPhoneアプリのiPad化(5) 10. アイコン分離(iPhone/iPad両対応) アイコンの用意 iPhone用:57x57 iPad用:72x72 Info.plistに「CFBundleIconFiles」を追加 Array属性にして、iPhoneとiPad両方のアイコンファイルをArrayに追加する。 参考:http://developer.apple.com/iphone/library/qa/qa2010/qa1686.html

トラブルシューティング サブビューがY軸の上方向にずれる 下記の条件下において、-20ずれることをナビゲーションバーで確認。 MainWindowのView ControllerのInspector Layout: 「Wants Full Screen」(チェック) NIB: 「Resize View NIB」(チェックオフ)

App Storeに登録 アイコン スクリーンショット 回転対応(iPad) アップデート時 iPhone: 57x57 iPad: 72x72 512x512 スクリーンショット iPhone: 320x480 iPad: 1024x768, 1024x748, 768x1024, or 768x1004 回転対応(iPad) 縦横両対応が必要!?(Rejectメールから抜粋) We've reviewed your application and determined that we cannot post this version of your iPad application to the App Store. Applications must adhere to the iPad Human Interface Guidelines as outlined in the iPhone Developer Program License Agreement section 3.3.5.The iPad Human Interface Guidelines state that an iPad application should be able to run in all orientations. アップデート時 Bundle version (Info.plist): 必ず大きいバージョンにする(1.0  1.1等)