タグ別アーカイブ: iOS

iOSアプリでドラッグ&ドロップしてみる件について

| コメントをどうぞ

久しぶりにXcodeなぞ利用して、サンプルでも作ってみようかと思い立ったのですが、XCode5.1から普通にプロジェクト作成するとStoryBoardベースになるんですね。
俺のxibを返せ。(xibベースで作るにはEmpty Applicationから作成する必要があります)
DiceK Mikamiです。
続きを読む

モバイル向けWebページでiFrameを使用する際のスクロール問題

| 5件の返信

infoScoopをタブレット対応させる際に、iFrame絡みのクロスブラウザ対策でハマったので、そのあたりの対策について紹介したいと思います。

 

サポートブラウザ

今回サポート対象となったブラウザ(OS)は以下になります。

  • Safari(iOS)
  • Android Browser(Android)
  • IE(Windowsタブレット)

 

DOCTYPE宣言

HTMLの記述の前に、まずはDOCTYPE宣言です。 以下はHTML5のDOCTYPE宣言になります。

<!DOCTYPE HTML>

現状では何も宣言しないとブラウザのレンダリングモードは互換モードが選択されます。
また、互換モードに比べて標準モードの場合は記述が厳格になることもあり表示速度の向上も期待できます。
なので、モバイル向けにWebページを作成する際にはHTML5のDOCTYPE宣言をするようにしましょう。

 

iOSのiFrameにおけるスクロール問題

iFrameにコンテンツを表示するために、以下のようにHTMLを記述してブラウザで表示してみたところ、

<!DOCTYPE HTML>
<html>
<head>
  <style type="text/css">  
    .ifrm {
      width:300px;
      height: 250px;
      border:none;
    }
  </style>
</head>
<body>
  <iframe class="ifrm" scrolling="auto" src="http://www.infoscoop.org"></iframe>
</body>
</html>

Android BrowserとIEでは問題ありませんでしたが、

IE(Windowsタブレット)の場合

IE(Windowsタブレット)の場合

iOS Safariで表示してみると、コンテンツのサイズに合わせてiFrameがのびてしまいました。PC向けのサイトだと以下のように画面一杯に広がってしまいます。

iframe-safari-err


iOS Safariの場合

 

どうやらiOS Safariではiframeのscrolling属性が”auto”、もしく”yes”の場合、指定したサイズが効かないらしく、他の方のブログを参考にさせて頂いてiframeの直上にスクロール要素を用意する方法が有効である、ということが分かりました。
エージェントで判別してiOS Safariの場合だけ直上にスクロール要素を用意する方法も考えましたが、
煩雑になると思いCSSで対応することにしました。

以下のように記述し、実機で確認してみたところ、

<!DOCTYPE HTML>
<html>
<head>
  <style type="text/css">  
    .ifrm-container {
      width:300px;
      height:250px;
      overflow:auto;
      -webkit-overflow-scrolling:touch;
    }
    .ifrm {
      width:100%;
      height:100%;
      border:none;
    }
  </style>
</head>
<body>
  <div class="ifrm-container">
    <iframe class="ifrm" scrolling="auto" src="http://www.infoscoop.org"></iframe>
  </div>
</body>
</html>

SafariではiFrameの高さも固定され問題なくスクロールできるようになりましたが、
今度はAndroid BrowserとIEで2重にスクロールバーが表示されるようになってしまいました。

2重スクロール(IEの場合)

2重スクロール(IEの場合)

 

2重スクロールへの対処

どうやらiframeの高さがうまく調整できていないのが原因のようです。
iframeの下に余白が発生してしまっています。

試行錯誤の後、iframe要素に明示的に「display:block;」を指定することで回避できました。
理由はよく分かりません、デフォルトの表示形式が「inline-block」だとしても高さ調整は可能なはず…
対処するのに半日ほど掛かってしまいました…。
最終的に作成できたHTMLは以下になります。

<!DOCTYPE HTML>
<html>
<head>
  <meta http-equiv="content-type" content="text/html; charset=UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=1, user-scalable=no">
  <style type="text/css">
    .ifrm-container {
      width:300px;
      height:250px;
      overflow:auto;
      -webkit-overflow-scrolling:touch;
      display: inline-block;
      margin: 10px;
    }

    .ifrm {
      width:100%;
      height:100%;
      border:none;
      display:block;
    }
  </style>
</head>
<body>
  <div class="ifrm-container">
    <iframe class="ifrm" scrolling="auto" src="http://www.infoscoop.org"></iframe>
  </div>
  <div class="ifrm-container">
    < iframe class="ifrm" scrolling="auto" src="http://jquery.com/"></iframe>
  </div>
</body>
</html>

iOSアプリをディストリビューションしよう

| 1件のフィードバック

3月になり花粉症の季節がやって参りましたね。
花粉症対策はインフルエンザ予防と同じように早めの対策が基本らしいです。
花粉症持ちの方はすぐさま病院へ。
どうもひと月ぶりのDiceK Mikamiです。

今回は使い古されたネタではありますが、
iOSアプリのディストリビューション方法に関してまとめみたいと思います。
App Storeに登録するためには、配布用にアプリをビルドする必要があります。
そのためにはいくつかの登録作業が必要となります。
ここではその方法に関してまとめていきます。
 

使用環境

OS: Mac OS X 10.7.3
ビルド環境: XCode 4.3
デベロッパープログラム: Individual
 

配布用のProvisioningを用意しよう

配布用のアプリをビルドするためには、配布用のProvisioningファイルが必要になります。
この項目では、配布用Provisioningファイルの作成を順を追って示します。

Certificatesの登録

開発用に実機ビルドを行うためにも、作成したキーチェーンを利用してCertificatesを登録したと思いますが、面倒なことに配布用ビルドにおいてもCertificatesを登録する必要があります。
(キーチェーンアクセス.appの使い方は割愛します)
では早速、登録してみるとしましょう。
 

お馴染みのApple Developer Connectionにアクセスし、メンバーセンターに行きましょう。
 

ログインしましたら、「iOS Provisioning Portal」にアクセスします。
 

左のツリーより「Certificates」を選択します。
 

「Distribution」タブをクリックし、用意したキーをアップロードします。
ここでポイントとしては、Distribution用のキーは別途用意した方が良いようです。
アップロード自体は開発用Certificatesの登録と同じですので、特に問題はないと思います。
登録したCertificatesをローカルにダウンロードしておきます。
あとで利用しますので、なくさないようにわかりやすい場所に置いておきましょう。
 

App IDの登録

次にApp IDを登録します。
開発用で使っていたものとは別に用意しておくと管理するのが楽です。
 

左のツリーより「App IDs」を選択し、表示された画面に配置されている「New App ID」ボタンをクリックします。
 

必要項目を入力します。

  • Description: 識別用の項目です。禁則文字以外でわかりやすい名前をつけると良いと思います。
  • Bundle Seed ID: 「Generate New」を選択。
  • Budle Identifier: パッケージの命名規則のように「com.sample.sampleapp」などと入力。

注意点としてBundle Identifierにはアスタリスクを利用しないように。
これは開発用とは異なりアプリを一意に識別する必要があるためです。
Budle Seed IDに「Generate New」がない場合は、「Use Team ID」などでも構いません。
SeedIDは「誰それさんの」の部分ですので、一応Apple側で一意性は担保されている模様です。
(大抵の場合、アカウントに割り振られた「Individual ID」を利用しているようです)
 

入力が確定すると前の画面に戻るので、登録されていることを確認しましょう。
一応、「Configure」リンクよりiCloudやGame Centerを後々使えるようにできます。
 

Provisioning Profileの登録

Provisioning Portal最後の作業としてProvisioning Profileの登録を行います。
 

左のツリーより「Provisioning Portal」を選択し、「Distribution」タブをクリックします。
表示された画面にある「New Profile」ボタンをクリックします。
 

必要項目を記入後、「Submit」ボタンを押します。

  • Distribution Method: 「App Store」を選択します。
  • Profile Name: 一意な名前をつけます。アプリ名で良いでしょう。
  • App ID: 作成したApp IDを指定します。

 

自動的に前の画面に戻ります。
StatusがPendingになっていると思いますが、リロードを繰り返したりしてるとActiveに変わります。
 

こんな感じです。
Activeに変わりましたら、Provisioningファイルをダウンロードしておきましょう。
これも使いますのでわかりやすい場所においておきます。
 

アプリを登録しよう

配布用アプリの情報を登録していきます。
ビルドを行う前の最後の行程となります。

アプリ情報の登録


メンバーセンターにアクセスし、「iTunes Connect」を選択します。
 

「Manage Your Applications」を選択します。
 

ここはアプリの管理を行う場所になります。
アップデートなどを行う場合も利用することになると思います。
左上にある「Add New App」をクリックします。
 

ここではApp Storeに表示される内容(アプリ説明やロゴ、画面イメージなど)を登録していきます。
前もって準備しておくと作業がスムーズに進むと思います。
基本的に必要事項を記入していくだけとなります。
これといって迷う箇所はないと思いますので、ポイントとなる箇所だけ解説します。

  • Default Language: 特に拘りがなければ「English」を選択しましょう。
  • App Name: アプリの名前を入力します。
  • SKU Number: 一意な文字列を入力します。Numberとありますが、数列でなくても問題ありません。私はいつもパッケージ命名規則に従った名前を付けています。
  • Bundle ID: Provisioning Portalで登録したIDを選択します。

ポイントはDefault Languageです。
これはアプリの第一言語を指定する項目ですが、1stリリースは日本向けだからという理由で「Japanese」にするのは後々苦労する可能性があります。
海外市場も視野に入れているのであれば素直に「English」にしておくと、
あとで設定するときに面倒なことを避けられます。
絶対に海外では売らないという強い気持ちがあるのならば「Japanese」にしても問題ありません。
 

配布用にアプリをビルド

ここからはローカルマシンでの作業になります。
ダウンロードしておいた2つのファイル(CertificatesファイルとProvisioningファイル)を使いますので、準備しておくと良いと思います。
 

CertificatesファイルとProvisioningファイルをダブルクリックして、所定の位置に登録します。
Certificatesファイルはキーチェーンアクセス.appから、ProvisioningファイルはXCodeのオーガナイザーから登録状態を確認することができると思います。
図はオーガナイザーからProvisioningファイルが登録されていることを確認したところです。
 

いよいよXCodeを立ち上げて、ビルドを開始します。
まず、「Code Signing」を登録した配布用Provisioningに変更します。
Code Signing Identifier全てを変更しておくと良いと思います。
この操作をProjectとTarget両方で行います。
配布用のProvisioningが選択肢の中にない場合、
オーガナイザーにProvisioningが登録されていない可能性があります。
再度ファイルをダブルクリックなどして登録してみてください。
登録直後は表示されない場合があります。
その場合、XCodeも再起動すると表示されるケースが確認されています。
 

XCode左上の「Schema」に表示されているプロジェクト名をクリックし、「Manage Schemas…」を選択します。
配布用Provisioningを設定したSchemaを選択し、左下の「Edit」ボタンをクリックします。
開発用スキーマと配布用スキーマを準備しておくとスキーマを切り替えるだけでビルドできるようになるので、余裕があれば設定しておくと楽かもしれません。
 

左側から「Archive」を選択し、Destinationが「iOS Device」になっていることを確認します。
同時にBuild Configurationが「Release」になっているかも確認しておきます。
iOSデバイスを接続している場合、Destinationが機器名になっていますので、その場合はそれを選択してください。
Build Configurationは設定によってはRelease以外も存在しますので、開発時にどのように切り分けたかを確認しておきます。
 
設定が終わりましたら[Product] > [Archive]を選択し、アプリをビルドします。
ビルドが問題なかった場合、オーガナイザーが自動的に立ち上がってくると思います。
 

ビルドしたアプリをアップロード

さて、いよいよ最後の工程です。
 

立ち上がってきたオーガナイザーを確認すると、ビルドしたアプリがリストに並んでいると思います。
Statusが空欄になっているものがビルドしたものです。
早速、アップロードといきたいところですが、まずは右上にある「Validate…」ボタンをクリックします。
この作業はビルドしたアプリのソースが不正でないか、あるいはアプリ情報が登録されているかを確認するためのものです。
例えば、UnDocumentedなAPIを利用していた場合、ここで弾かれてしまいます。
 

変更するような項目は特にありませんので、「Next」ボタンを軽快に連打しましょう。
 

問題がない場合、上のような画面が見れると思います。
「Finish」ボタンをクリックして、オーガナイザーに戻ります。
 

図のようにStausがPassed Validationに変わっていると思います。
「Distribute…」をクリックして、アップロードを開始します。
 

「Submit to the iOS App Store」を選び、「Next」ボタンをクリックします。
 

アップロードを開始します。
回線とAppleのサーバ混雑度にもよりますが、10分くらいかかります。
アプリ開発の日々を思い起こすも良し、休憩をはさむも良し、気ままに踊ってみるのも悪くないかと思います。
とりあえず、じっと待ちましょう。
 

アップロードが完了すると図のような画面を見ることができます。
 

iTunes ConnectのManage Your Applicationsを確認すると、アップロードしたアプリのステータスが「Waiting For Review」になっていると思います。
レビューがはじまると「In Review」に変わります。
状況にもよりますがレビューに入るのまでに2、3日くらいかかるのでこのままにしておきましょう。
デフォルト設定の場合、ステータスが変わるたびにメールが届きますので、気がついたらリリースされていたと言うこともないので安心です。
アプリの初回登録(特に登録自体はじめて)の場合、
リリースまで3週間くらいはかかると考えておいて良いと思います。
結構時間がかかります。
また、レビュアーの質などもまちまちなので理由はよくわからないがリジェクトされることもあります。
(私は1度ありました)
 
 
配布用アプリの登録方法は以上となります。
最初は馴れないため面倒に見えますが、馴れると…やはり面倒でした。
しかし、前よりはずいぶんと登録が楽になりましたので、それほど迷うこともないと思います。
以上、お疲れさまでした。
 

*おことわり
このまとめ記事は2012年3月6日時点の情報を元に作成されております。
登録方法は改変される恐れがありますので、その点につきましてはご了承ください。