.-- --

スポンサーサイト

上記の広告は1ヶ月以上更新のないブログに表示されています。
新しい記事を書く事で広告が消せます。
スポンサー広告 comment(-) trackback(-)
.30 2012

みんなのQunQun サポートページーseason1ー

-アプリ説明-

『みんなのQunQun Season1』は、QunQunの選抜メンバーとの交流を深めるアプリです。
以下の機能が有ります。
スポンサーサイト
.20 2012

Mobile Safariを知る 〜 第一回 画面領域

みなさん、こんばんは
hayateです

Mobile Safariを知る
第一回目の今日は、その画面領域に迫りたいと思います。

我々の生活の一部と言っても過言ではないMobile Safari。
PC用ブラウザの延長として使うだけでは見えてこない様々な仕様があります。
その中でも今日は、Webコンテンツ制作者には欠かせないその画面領域について
皆さんと学んでいきたいと思います。

さて、Mobile Safariと一言で言ってもその実態は大きく2種類に分類されます。
・iPhone、iPod touchに搭載されているのもの(320pt×480ptベース)
・iPadに搭載されているもの(1024pt×768ptベース)
この2種類です。

まずはiPhoneのMobile Safariの画面領域からみていきましょう。
以下のとおりです。

※以下、サイズの単位はポイントです。
ピクセル換算するとRetinaディスプレイでは2倍となります。

Mobile_Safari_iPhone_P.png

Mobile_Safari_iPhone_L.png

■iPhone UIサイズ
向き Portrait Landscape
ステータスバー 20 20
ステータスバー(電話中) 40 40
アドレスバー 60 60
ツールバー 44 32

そして、コンテンツ領域は以下のとおりです。

■iPhone コンテンツ領域
向き Portrait Landscape
アドレスバー表示時 320 x 356 480 x 208
アドレスバー非表示時 320 x 416 480 x 268


次に、iPadのUIサイズとコンテンツ領域ですが
iPad版のMobile SafariはiOS4.3からiOS5へのバージョンアップ時にUI構成が変化しました。
タブバーの追加です。これによりコンテンツ領域のサイズが変わっています。

先日行われたWWDCやインターネット上の情報では、iOS4系の使用者はまだ約20%ほど存在するようですので、今回はiOS5.x系とiOS4.3を対象としましょう。(※2012年6月現在)

safari_ipad2-1-1.png


iPad UIサイズ
iOS 5 iOS 4.3
ステータスバー 20 20
ツールバー 44 58
ブックマークバー 28 30
タブバー 32 -

iPad コンテンツ領域
iOS 5 iOS 4.3
向き Landscape Portrait Landscape Portrait
ブックマークバー
非表示時
1024 x 672 768 x 928 1024 x 690 768 x 946
ブックマークバー
表示時
1024 x 644 768 x 900 1024 x 660 768 x 916


こうして見てみると、意外とコントロール部分が大きな割合を占めていること、
そして、ユーザの使い方によってコンテンツ領域が変化することがわかります。

このため、Webアプリをネイティブアプリ風に制作する場合、高さの変化に対応できるように
レイアウトを考慮する必要があります。

こうした問題の解決策としてAppleはスタンドアロンモードと呼ばれるものを用意しています。
これについては次回とりあげたいと思います。

さて、いかがでしたでしょうか。
「Mobile Safariを知る」
第一回目の今日は、その画面領域についてお送りいたしました。
次回は、スタンドアロンモードについて学んでいきます。

それではまた。

.13 2012

iOSアプリのファイルサイズ

Tasakiです。


そろそろMountain Lionが登場になりそうですね。
iMessageがMacから使えるようになるのは、とても便利そうです。

さて、今回はアプリのファイルサイズについての小ネタを紹介したいと思います。

.01 2012

UIViewの一部をUIImageとして取得する方法

こんにちわ。ネクストシステムの江原です!
 
最近は、仕事でHTML5+CSS3+javascriptで
iOS/Android向けWebアプリをメインでやってます。
Javascriptも面白いですね!!

今日は、UIViewの一部をUIImageとして取得する方法を調べたいと思います。

cnvViewToImg01.png 


1)  まずUIImageを作成する為作業する場所を確保します。
     作業する場所はユーザに見えてはいけないので
     オフスクリーン(見えない領域)に作成します。
cnvViewToImg02.png 

CGSize size = CGSizeMake( rect.size.width , rect.size.height );

UIGraphicsBeginImageContextWithOptions(size,NO,0.0); 

CGContextRef context = UIGraphicsGetCurrentContext();




2) UIViewの切取り開始位置を左上にあわせます。

CGPoint point = rect.origin;

CGAffineTransform affineMoveLeftTop
        CGAffineTransformMakeTranslation(
            -(int)point.x ,

            -(int)point.y );
CGContextConcatCTM( context , affineMoveLeftTop );
cnvViewToImg03.png 


3)左上にずらしたUIViewのイメージをオフスクリーンに貼付けます。

[(CALayer*)view.layer renderInContext:context];

UIImage *cnvImg = UIGraphicsGetImageFromCurrentImageContext();
cnvViewToImg04.png 
※ オフスクリーンのサイズを超える領域は削除される為
  最初に用意した矩形サイズの画像が取得できます。

4)オフスクリーンの破棄をしておしまいです。

UIGraphicsEndImageContext();




以下参考のソースです。

/** UIViewの一部をUIImageとして取得

 * @param view 対象のUIImage

 * @param rect 切り出したい位置とサイズ

 *

 * @return 対象のUIImage

 */

-(UIImage *)makeUIImageFromUIView:(UIView *)view

                         withRect:(CGRect)rect

{

        

    // オフスクリーン(見えない描画領域)を作成

    CGSize size = CGSizeMake( rect.size.width , rect.size.height );

    UIGraphicsBeginImageContextWithOptions(size,NO,0.0);
    // (補足:サイズ , NO:透過有 , 0.0:自動スケール です)

    // オフスクリーン(見えない領域)描画よりグラフィックスコンテキスト取得

    CGContextRef context = UIGraphicsGetCurrentContext();

    

    // 切り取り開始位置に合わせ

    // 左にpoint.x、上にpoint.y移動させるAffine変換を作成します。

    CGPoint point = rect.origin;

    CGAffineTransform affineMoveLeftTop
        = CGAffineTransformMakeTranslation(
            -(int)point.x ,

            -(int)point.y );

    // Affine変換を使用する為、コンテキストに設定

    CGContextConcatCTM( context , affineMoveLeftTop );

    

    // Viewの移動返還後のイメージをオフスクリーンに貼付けます。

    // (※ オフスクリーンからはみ出た領域は削除されるようです。

    [(CALayer*)view.layer renderInContext:context];

    

    

    // オフスクリーンの内容をUIImageとして取り出します。

    // (autoreleaseと思います)

    UIImage *cnvImg = UIGraphicsGetImageFromCurrentImageContext();

        

    // オフスクリーンを破棄します。

    UIGraphicsEndImageContext();

    

    return cnvImg;

    

}


毎日楽しく刺激的な日々で
こんな環境で仕事ができるチャンスがあることを本当に感謝しています。

このチャンスに甘えない様に
iOSのネイティブ開発とWeb開発の両方をこれからもがんばっていきたいと思います。

 HOME 

ブログ内検索

関連リンク

製品情報

最新記事

カテゴリ

プロフィール

neoxneo



NEXT-SYSTEM iOS Developers Blog


  • UTO:
    カナダ版iPhone4Sは、マナーモードでシャッター音がならない…


  • Ehara:
    ...


  • Hayate:
    ...


  • Tasaki:
    Developer登録完了...したのはいいけど


  • Ueda:
    ...



リンク

上記広告は1ヶ月以上更新のないブログに表示されています。新しい記事を書くことで広告を消せます。