SYAMのブログ https://ameblo.jp/syam8192/ 主にiOS/Android関連の情報を載せるか、または何らかのテスト投稿です（謎 ja PickのLP アメンバー限定公開記事です。 https://ameblo.jp/syam8192/amemberentry-12788628611.html Fri, 10 Feb 2023 16:59:40 +0900 リブログを試す アメンバー限定公開記事です。 https://ameblo.jp/syam8192/amemberentry-12606586275.html Wed, 24 Jun 2020 19:57:32 +0900 iPhone の pt と px と 画面解像度 の関係 先のエントリでは画面のサイズを pt 単位でいくつか挙げました。
このエントリでは補助的に、 pt と px と 実際の端末の画面との関係を述べます。

以下のサイトに図解があります。


The Ultimate Guide To iPhone Resolutions



1 段めは pt 単位、
2, 3 段め以降が px単位です。
端末によって、1pt が 2pxだったり3pxだったりします。

iPhone 4, 4S, 5, 5S は 1pt あたり 2px の解像度です。 iPhone 5Sは 320x568(pt) →  640x1136 (px)で、端末のスペック通りの解像度になります。
iPhone 6 も同じく、 1pt あたり 2px です。 750x1334(px)であり、これもiPhone6のスペック通りです。  
これらの端末では、 pt の２倍の解像度の画像素材を用いることで端末の解像度に合います。


問題は iPhone 6 plus で、（今のところ）この端末だけは 1pt あたり 3px の解像度として扱います。
したがって画像素材はも pt の３倍の解像度が必要です。

ところが、iPhone 6plus の画面サイズの 414x736 (pt)を３倍すると 1242x2208 (px) で 、これは iPhone 6 plus の画面のスペック（1080x1920）より大きな数値です。
これはどうなっているかというと、iPhone 6 plus は内部的には画面サイズを 414x736(pt)、つまり px 単位では1242 x 2208 として扱っています。
そして、画面全体を1080x1920 pxに縮小（約87%）して 1080x1920 pxの画面に表示するようになっています。

・
・
・
以上
]]> https://ameblo.jp/syam8192/entry-11976765915.html Tue, 13 Jan 2015 18:14:19 +0900 アプリの画面デザイン 概要

アプリの画面デザイン～画像リソース作成をする際に知っておくべき内容です。

具体的なことは iOS アプリ開発の視点で述べていますが、多様な画面の広さに対応するという点ではAndroidアプリ開発でも同様のことが求められます。


単位（pt, px）に注意してお読みください。（参考：pt と px と 画面解像度 の関係 ）

1. レイアウト・デザイン

以下のサイズ（単位：pt ）のどれでも問題ないようにレイアウト・デザインを考案します。

  • 320 × 480
  • 320 × 568
  • 375 × 667
  • 414 × 736
  • 768 × 1024（iPad対応しないなら不要）
  • 1024 × 768（ヨコ画面。iPad対応しないなら不要）

1ptを下回るような要素は、端末によってはうまく表現できなくなるので、必ず pt 単位でデザインしてください。
320x480 pt 以内に収まるようデザインできていれば、少なくともすべての iOS デバイスでは正常に表現できるものになります。
（Androidではさらにせまい画面のものもありますが、国内主要キャリアからは発売されていませんし、他でもほとんど無いです。）


また、画面の広さや縦横比は何種類もあるので、どこでどう調整するかもここで考えてください。
広げる場所や広げない場所、UI要素をどこを基準に揃えるのか ...などです。


また、 iPadにネイティブ対応する場合はヨコ画面に対応することが求められるので注意してください。


2. 画像ファイル作成

画像リソースの解像度（単位：px）は、ptの１倍、２倍、３倍の３通りの解像度が必要です。（ iOS 7以降対応 かつ iPad ネイティブ対応しないなら １倍は不要です）

たとえば、40pt x 80 pt の大きさの画像をデザインに組み込んでいる場合、 画像データは 40 x 80 / 80 x 160 / 120 x 240 ピクセルの３種の画像が必要です。



サンプル

1. レイアウト・デザイン

例として、左のようなレイアウトを作りました。

画像内の赤い矢印が示す部分が、画面の広さに応じて変化させる部分です。

緑の矢印の部分は均等割付します。

A,B,C,Dの文字は、均等割付した範囲の中でそれぞれセンタリングされています。


このレイアウト仕様を 先述の６通りの画面の広さの中に当てはめてみると、下表のような画面になります。

320 × 480320 × 568375 × 667414 × 736
レイアウトサンプル1レイアウトサンプル2レイアウトサンプル3レイアウトサンプル4
768 × 10241024 × 768
レイアウトサンプル5レイアウトサンプル6
※iPad用画面のサンプルはすこし縮小して表示されています

狭い画面では中央のピンク色の領域が小さくなり、広い画面では大きくなります。文字入力欄やボタンの高さは画面の広さに影響されず、すべて同じ高さです。

2. 画像ファイル作成

画面下部に並んだ A～D ボタンの「高さ」は、どのような広さの画面であっても 60pt です。このボタンは、中央に 50×50（pt）の画像を表示しているものとします。


その場合、以下のようなサイズ（px）の画像が必要になります。


button_a.png
(50×50 px)		button_a@2x.png
(100×100 px)		button_a@3x.png
(150×150 px)

iOSでは、２倍、３倍解像度の画像ファイル名は、１倍解像度の画像ファイル名に それぞれ "@2x" , "@3x" をつけたものにしなくてはいけません。


同様に、他の画像リソースも pt の１～３倍の px数で画像を３種類ずつ用意します。


・
・
・
以上

]]> https://ameblo.jp/syam8192/entry-11973527173.html Mon, 05 Jan 2015 18:37:25 +0900 ９パッチ入門

たとえばこんな画像。
タテやヨコに変形・拡大するとき、






ふつうにやると、楕円になりますね。



９パッチの設定をした画像を同じように変形・拡大すると




こんなふうにできます。

アプリ内でいろんな大きさのワクなどを表示するにはこの仕組みを利用します。




具体的には、
画像の中の引き延ばしてよいところとそうでないところを決めます。



紫はふつうに拡大
緑はタテまたはヨコ（ぼやけない方向）にだけ拡大
色のついてない部分は拡大も変形もしません。




部分の指定のしかたは iOSとAndroidで異なるので、詳しい記事を。→ 詳解 ]]> https://ameblo.jp/syam8192/entry-11959340694.html Mon, 01 Dec 2014 18:46:42 +0900 ９パッチの詳解 ９パッチの解説.
  1. "９パッチ"とは何ぞ
  2. アプリに組み込むには
    1. iOSアプリに組み込む
    2. Androidアプリに組み込む
  3. 追加情報



1. "９パッチ"とは何ぞ

たとえば「ワク」の画像を 画面サイズや用途によっていろんな幅・高さで画面に出す場合。

こんな画像を用意して、

たとえばタテに長いワクとして単純に表示すると、


こんなありさまになります。
全体がタテに拡大されているので、横向きの線は太くなっています。真円だった四隅もタテ長の楕円になってしまってます。ださいですね。



しかし「画像の中で拡大・変形する部分と方向」を指定することができれば、きれいに拡大（変形）することができそうです。


ワクをきれいに拡げるには、およそこんな感じで分割して拡大するといいでしょう。
最初の画像を左図のように９つ（紫、緑×４、色無し×４）の部分に分けます。
  • 真ん中（紫）はそのまま拡大
  • 中央上と中央下（緑）はヨコにだけ拡大
  • 中央左と中央右（緑）はタテにだけ拡大
  • 四隅（色なし）はそのまま



すると、さっきのださいタテ長のワクが


いい感じになりましたね。
これが９パッチです。



もう一つ実例。

まんまるです。
これをなにも考えずに拡大・変形すると、

※ヨコに伸ばしたもの　／　タテに伸ばしたもの　／　タテもヨコも伸ばしたもの

このざまです。（最後のはタテとヨコに拡大してるので円のままでかくなってますね。）
これを、



この色のついた部分だけを引き延ばします。
（引き延ばす方向は最初の例と同様です）

すると、


こんどはこうです。
円ではなく角丸の方形になりました！

このように、角丸のワクや背景を作るなら、角だけ（＝丸）の画像を用意して中だけを引き延ばせます。
引き延ばし方向に色が変化していなければ、グラデーションや絵柄があってもOKですね。

ただし（ここ大事）、９パッチは縮小には使えません。
"４隅を変形しない"ので、それらが重なり合って崩れた表示になります。
９パッチ画像はできるだけ小さく作っておいて、拡大だけでどんな大きさでも表現できるように作ってください。

（デザイナーの方へ）
また、今までに画像を依頼した方にはWEBサイトの素材を作る仕事をされてた方が多かったのですがそのような方は分割済みのばらばらの画像を１つ１つ別のファイルにしてくださる方が実際に何人かいらっしゃいました。
iOS, Androidアプリの９パッチは、１つの画像の中で、変形する部分を指定するものです。
あらかじめ分割して別々の画像ファイルにする必要はありません。一番小さく作った画像をひとつだけ用意してください。


2. アプリに組み込むには

1. iOS アプリに組み込む


拡大する部分を指定するには、下図の中に示した ４つの大きさ（top,left,right,bottom） の数字で指定します。
非Retina画像の場合でのサイズで、プログラマーに伝えてください。




2. Android アプリに組み込む


  1. 元の画像をぐるりと囲む１ピクセルの透明部分を用意する
  2. 引き延ばしたいエリアの上端と左端（追加した透明部分）に、黒のピクセルを書き込む
  3. ファイル名を "***.9.png" のように変える
...のような手順で９パッチ情報をもった画像ファイルができます。これを元の画像ファイルと置き換えるだけでOKです。

Androidアプリの開発環境にはこれを簡単に作る（＆プレビューできる）ツール "draw9patch" が付属しています。

※９パッチ設定前と設定後の変形プレビューの様子

たいへん便利です。使いましょう。



3. 追加情報
以下は Android 向けの さらに細かい 追加情報。目を通して関係ナイと思ったら気にしなくてOK

Androidの場合、変形しない部分は端っこに限る必要はなく、さらに複数設定することもできますが、多くすると分割数が増えてしまい、パフォーマンスに影響します。
また、変形箇所を２つ以上作った場合は、各々の長さに応じて拡大率が決まります。

たとえば、下図のような範囲を指定した場合。

これまでと同じように、四隅は拡大・変形しません。また、真ん中も拡大・変形しないように残しています。
緑と紫の部分だけが拡大・変形します。

すると、

例としてヨコにのばした結果。
わりと期待通りですね。

しかし、

指定した変形する部分の大きさにムラがある状態


これだと、

こうなってしまいます。
ずれちゃいました。


で、（長文注意）
画像リソースをAndroid端末のピクセル密度の種類（ldpi,mdpi,hdpi,xhdpi ...）すべてに対応したぶんだけ用意しなかった場合、９パッチ画像は端末のピクセル密度と画面サイズに合わせてリサイズされ、その後に分割されます。
このとき問題になるのが９パッチの範囲を指定するピクセルです。このピクセルは透明か黒の２値であり中間はありえません。こういう場合、整数倍でない拡大をおこなった場合、元が同じ大きさだった部分が必ずしも同じサイズに拡大されるとは限りません。たとえば元が１ピクセルだったところが、場所によって２ピクセルになったり３ピクセルになったりすることがあります。
こうなると、センタリングするつもりで設定していた９パッチが、端末によっては思った結果にならない（センタリングができてない例みたいな）ことになるので注意しましょう。

そもそもこのような使い方をすると iOS では対応できないのでこんな方法でセンタリングはすべきではありませんね。ちゃんと背景とコンテンツを別に用意して、アプリでそれを重ねて表示するのが妥当です。



もうひとつ。
Androidの場合は９パッチのついでに「コンテンツ領域」を設定できます。
画像を背景として使った場合に、それを背景に持つコンテンツをどの部分に表示するかを画像のほうに設定しておくことができます。

指定するには、９パッチ用の透明部分の右と下を使います。
拡大部分を指定したときと同じように黒ピクセルを置いて指定します。


結果がこれ。

青い部分が、「コンテンツ領域」です。
たとえばこの９パッチ画像を背景に指定したボタンは、画像や文字がこの青い部分に入ります。
うまく利用するとこれも便利です。（がiOSには無いので工夫が必要です）


以上.

]]> https://ameblo.jp/syam8192/entry-11959182156.html Mon, 01 Dec 2014 10:50:11 +0900 あッッッつい！ 扇風機の手入れしてやらんとなぁ
(*-ω-)

Candyからの投稿 ]]> https://ameblo.jp/syam8192/entry-11839467416.html Fri, 02 May 2014 16:47:45 +0900 おや イタリックとか使えてる？
ボールドとか。

Candyからの投稿 ]]> https://ameblo.jp/syam8192/entry-11799922237.html Wed, 19 Mar 2014 19:52:54 +0900 さいしょ ]]> https://ameblo.jp/syam8192/entry-11058408809.html Tue, 25 Oct 2011 09:21:43 +0900