アシアルブログ

アシアルの中の人が技術と想いのたけをつづるブログです

スマホ&タブレットの解像度(ppi)ベスト3

こんにちは。和田です。

とうとうiPhone5の予約が始まりました。みなさん予約されましたか?
自分も予約したいな…と考えております。我が家の大蔵大臣と交渉です…。

さて、そのiPhone5の解像度(ppi)って異様に高いですね! 画面のキャプチャが原寸で175線(350dpi)の印刷にそのまま使用できてしまいます(厳密にはちょっと足りないですが)。
DTP出身の自分としては本当に驚きです。
以前ですと、Web媒体でキャプチャした画像を印刷物に載せる場合、5分の1くらいの大きさにしないと綺麗に表示できなかったのですが、最近は本当にすごいです。

と、iPhoneに感動していたのですが、ふと実際に流通している他のスマホの解像度(ppi)ってどうなっているのだろうと思い調べてみることにしました。
そうしたら、iPhoneよりも高いppiのデバイスってあるんですね!
これまた驚きです。

ちなみに、各通信事業者のサイトには画面サイズ(インチ数(対角))とピクセル数しか載っていなかったので、遠い遠い昔に学んだピタゴラスの定理を使って割り出してみました(汗)。
(一覧表はブログの最下段に記しておきます)

解像度(ppi)の値は小数点第1位で四捨五入していますし、計算で割り出していますので実際の解像度(ppi)や公称の値とは異なります。ご了承下さい。大よその値としてみていただけたらと思います。
iPhone4/4S/5は公称の数値を入れています。

それでは、スマホ解像度(ppi)ベスト3!




順位通信事業者バイスインチ(対角)サイズ(px)ppi
1位docomoARROWS X LTE (F-05D)4.31,280×720342
docomoMEDIAS LTE (N-04D)4.31,280×720342
docomoMEDIAS  ( N-07D)4.31,280×720342
docomoDisney Mobile on docomo (F-08D)4.31,280×720342
docomoXperiaTM acro HD (SO-03D)4.31,280×720342
docomoMEDIAS ES (N-05D)4.31,280×720342
auARROWS Z (ISW11F )4.31,280×720342
2位docomoAQUOS PHONE sv (SH-10D)4.51,280×720326
docomoOptimus LTE (L-01D)4.51,280×720326
docomoAQUOS PHONE(SH-06D)4.51,280×720326
docomoAscend (HW-01E)4.51,280×720326
SoftBankAQUOS PHONE (102SHII)4.51,280×720326
SoftBankAQUOS PHONE (102SH)4.51,280×720326
SoftBankAQUOS PHONE (104SH)4.51,280×720326
SoftBank/auiPhone 4/4S3.5960×640326
SoftBank/auiPhone 541,136×640326
3位docomoARROWS X  (F-10D)4.61,280×720319
docomoXperia GX (SO-04D)4.61,280×720319
docomoELUGA V (P-06D)4.61,280×720319
auAQUOS PHONE SERIE (ISW16SH )4.61,280×720319
auARROWS Z (ISW13F)4.61,280×720319

※ 解像度(ppi)の値は小数点第1位で四捨五入しています
※ 計算で割り出していますので実際の解像度(ppi)や公称の値とは異なります。ご了承下さい。大よその値としてみていただけたらと思います。
※ iPhone4/4S/5は公称の数値を入れています。

こうやってみると、
iPhone以外はすべて日本製です。
ちなみに海外勢では、GALAXY SII WiMAXau ISW11SC)が312ppiで4位、GALAXY S III (docomo SC-06D)がppiで5位に入っていました。
上記のGALAXYはどちらも画面サイズが4.7、4.8インチと大きいので、海外では画面が大きい方が好まれるのかもしれませんね。



ところでタブレットはと言うと、こんな感じです。

順位通信事業者バイスインチ(対角)サイズ(px)ppi
1位SoftBankNew iPad9.72,048×1,536264
2位docomoMEDIAS TAB UL (N-08D)71,280×800216
docomoMEDIAS TAB (N-06D)71,280×800216
3位docomoGALAXY Tab 7.7 Plus (SC-01E)7.71,280×800196

※ 解像度(ppi)の値は小数点第1位で四捨五入しています
※ 計算で割り出していますので実際の解像度(ppi)や公称の値とは異なります。ご了承下さい。大よその値としてみていただけたらと思います。
※ iPhone4/4S/5は公称の数値を入れています。

スマホ程のppiが無いにしても、ほぼ200ppi以上というのはすごいですね。
New iPadが262ppiでぶっちぎりです。



と、こんな結果になりました。
今後、解像度(ppi)はどこまで進むのでしょうか。
自分としては300ppiもあれば十分綺麗だと思うので、それよりも電池の持ちをもっと良くしてほしいと思っています。皆さんはどう思いますか?

それではまた次回です。

今回調べた解像度(ppi)一覧表です


No.通信事業者バイスインチ(対角)サイズ(px)比率ppi備考
1docomoOptimus (G L-01E)4.71,280×72016:9312 スマホ
2docomoGoogle Nexus one3.7720×4803:2234 スマホ
3docomoGALAXY S III (SC-06D)4.81,280×72016:9306 スマホ
4docomoARROWS X  (F-10D)4.61,280×72016:9319 スマホ
5docomoAQUOS PHONE sv (SH-10D)4.51,280×72016:9326 スマホ
6docomoREGZA Phone (T-02D)4.3960×54016:9256 スマホ
7docomoOptimus Vu (L-06D)51,024×7684:3256 スマホ
8docomoAQUOS PHONE ZETA (SH-09D)4.71,280×72016:9312 スマホ
9docomoELUGA power (P-07D)51,280×72016:9294 スマホ
10docomoXperia GX (SO-04D)4.61,280×72016:9319 スマホ
11docomoGALAXY S II LTE (SC-03D)4.5800×4805:3207 スマホ
12docomoARROWS X LTE (F-05D)4.31,280×72016:9342 スマホ
13docomoOptimus LTE (L-01D)4.51,280×72016:9326 スマホ
14docomoMEDIAS LTE (N-04D)4.31,280×72016:9342 スマホ
15docomoGALAXY Note(SC-05D)5.31,280×8008:5285 スマホ
16docomoAQUOS PHONE(SH-06D)4.51,280×72016:9326 スマホ
17docomoARROWS μ (F-07D)4800×4805:3233 スマホ
18docomoMEDIAS PP (N-01D)4800×4805:3233 スマホ
19docomoP-04D4.3960×54016:9256 スマホ
20docomoXperia PLAY (SO-01D)4854×480427:240245 スマホ
21docomoBlackBerry Bold 99002.8480×6403:4286 スマホ
22docomoAQUOS PHONE si (SH-01E)4.1960×54016:9269 スマホ
23docomoAscend (HW-01E)4.51,280×72016:9326 スマホ
24docomoMEDIAS  ( N-07D)4.31,280×72016:9342 スマホ
25docomoOptimus it (L-05D)4800×4805:3233 スマホ
26docomoXperia SX (SO-05D)3.7960×54016:9298 スマホ
27docomoANTEPRIMA (F-09D)3.7800×4805:3252 スマホ
28docomoARROWS Me (F-11D)3.7800×4805:3252 スマホ
29docomoELUGA V (P-06D)4.61,280×72016:9319 スマホ
30docomoAQUOS PHONE st (SH-07D)3.4854×480427:240288 スマホ
31docomoDisney Mobile on docomo (P-05D)4.3960×54016:9256 スマホ
32docomoDisney Mobile on docomo (F-08D)4.31,280×72016:9342 スマホ
33docomoGirls' (F-03D)3.7800×4805:3252 スマホ
34docomoPRADA phone by LG (L-02D)4.3800×4805:3217 スマホ
35docomoQ-pot.Phone (SH-04D)3.7960×54016:9298 スマホ
36docomoXperiaTM acro HD (SO-03D)4.31,280×72016:9342 スマホ
37docomoAQUOS PHONE slider (SH-02D)3.7960×54016:9298 スマホ
38docomoLUMIX Phone (P-02D)4960×54016:9275 スマホ
39docomoMEDIAS ES (N-05D)4.31,280×72016:9342 スマホ
40docomoP-01D3.2800×4805:3292 スマホ
41docomoF-12C3.7800×4805:3252 スマホ
42docomoGALAXY Tab 7.7 Plus (SC-01E)7.71,280×8008:5196 タブレット
43docomoMEDIAS TAB UL N-08D71,280×8008:5216 タブレット
44docomoELUGA Live (P-08D)10.11,280×8008:5149 タブレット
45docomoARROWS Tab LTE (F-01D)10.11,280×8008:5149 タブレット
46docomoGALAXY Tab 10.1 LTE (SC-01D)10.11,280×8008:5149 タブレット
47docomoMEDIAS TAB (N-06D)71,280×8008:5216 タブレット
48auHTC J (ISW13HT4.3960×54016:9256 スマホ
49auAQUOS PHONE SERIE (ISW16SH )4.61,280×72016:9319 スマホ
50auARROWS Z (ISW13F)4.61,280×72016:9319 スマホ
51auURBANO PROGRESSO4800×4805:3233 スマホ
52auAQUOS PHONE SL (IS15SH)3.7960×54016:9298 スマホ
53auAQUOS PHONE CL (IS17SH )4.2960×54016:9262 スマホ
54auGALAXY SII WiMAX (ISW11SC)4.71,280×72016:9312 スマホ
55auINFOBAR (C01)3.2854×480427:240306 スマホ
56auXperia acro HD (IS12S )4.3960×54016:9256 スマホ
57auOptimus X (IS11LG )4800×4805:3233 スマホ
58auMOTOROLA RAZR (IS12M )4.3960×54016:9256 スマホ
59auARROWS ES (IS12F )4800×4805:3233 スマホ
60auAQUOS PHONE (IS14SH )3.7960×54016:9298 スマホ
61auARROWS Z (ISW11F )4.31,280×72016:9342 スマホ
62auDIGNO (ISW11K4800×4805:3233 スマホ
63auHTC EVO 3D (ISW12HT )4.3960×54016:9256 スマホ
64auMOTOROLA PHOTON (ISW11M )4.3960×54016:9256 スマホ
65auMEDIAS (IS11N )3.6800×4805:3259 スマホ
66auWindows Phone (IS12T )3.7800×4805:3252 スマホ
67auMIRACH (IS11PT )3.7800×4805:3252 スマホ
68auINFOBAR (A01 )3.7960×54016:9298 スマホ
69auG'zOne (IS11CA )3.6800×4805:3259 スマホ
70auREGZA Phone (IS11T )4854×480427:240245 スマホ
71auSIRIUS α (IS06 )3.7800×4805:3252 スマホ
72auREGZA Tablet (AT500)10.11,280×8008:5149 タブレット
73auMOTOROLA XOOM? Wi-Fi (TBi11M)10.11,280×8008:5149 タブレット
74auSMT-i910071,024×600128:75170 タブレット
75SoftBankAQUOS PHONE Xx (106SH)4.71,280×72016:9312 スマホ
76SoftBankARROWS A (101F)4.3960×54016:9256 スマホ
77SoftBankPANTONE 5 (107SH)3.7854×480427:240265 スマホ
78SoftBankボス電 (107SH B)3.7854×480427:240265 スマホ
79SoftBankAQUOS PHONE (102SHII)4.51,280×72016:9326 スマホ
80SoftBankAQUOS PHONE (102SH)4.51,280×72016:9326 スマホ
81SoftBankAQUOS PHONE (104SH)4.51,280×72016:9326 スマホ
82SoftBankLUMIX Phone (101P)4960×54016:9275 スマホ
83SoftBank102P4.3960×54016:9256 スマホ
84SoftBankHONEY BEER(101K)3.5800×4805:3267 スマホ
85SoftBankAQUOS PHONE THE HYBRID (101SH)3.4854×480427:240288 スマホ
86SoftBankAQUOS PHONE (103SH)4960×54016:9275 スマホ
87SoftBankSTAR 7 (009Z)3.8800×4805:3246 スマホ
88SoftBankMEDIAS CH (101N)4800×4805:3233 スマホ
89SoftBankDELL Streak Pro (101DL)4.3960×54016:9256 スマホ
90SoftBankAQUOS PHONE THE HYBRID SoftBank (007SH)3.4854×480427:240288 スマホ
91SoftBankAQUOS PHONE THE HYBRID SoftBank (007SH J)3.4854×480427:240288 スマホ
92SoftBankSoftBank (007SH KT)3.4854×480427:240288 スマホ
93SoftBankAQUOS PHONE SoftBank (006SH)4.2960×54016:9262 スマホ
94SoftBankAQUOS PHONE THE PREMIUM SoftBank (009SH)4960×54016:9275 スマホ
95SoftBankYahoo! Phone SoftBank (009SH Y)4960×54016:9275 スマホ
96SoftBankSweety SoftBank (003P)4.3854×480427:240228 スマホ
97SoftBankVision SoftBank (007HW)3.7800×4805:3252 スマホ
98SoftBankシンプルスマートフォン SoftBank (008Z)3.8800×4805:3246 スマホ
99SoftBankGALAPAGOS SoftBank (003SH)3.8800×4805:3246 スマホ
100SoftBankGALAPAGOS SoftBank (005SH)3.8800×4805:3246 スマホ
101SoftBankLibero SoftBank (003Z)3.5800×4805:3267 スマホ
102SoftBankdynapocket SoftBank (X02T)4.1800×4805:3228 スマホ
103SoftBankSoftBank (X01SC)2.4240×3203:4167 スマホ
104SoftBankiPhone 3G/3GS3.5480×3203:2165 スマホ
105SoftBank/auiPhone 4/4S3.5960×6403:2326 スマホ
106SoftBank/auiPhone 541,136×64071:40326 スマホ
107SoftBankiPad/iPad29.71,024×7684:3132 タブレット
108SoftBankNew iPad9.72,048×1,5364:3264 タブレット

※ 解像度(ppi)の値は小数点第1位で四捨五入しています
※ 計算で割り出していますので実際の解像度(ppi)や公称の値とは異なります。ご了承下さい。大よその値としてみていただけたらと思います。
※ iPhone4/4S/5は公称の数値を入れています。

レスポンシブデザインのウインドウサイズの切替えについてまとめてみました

こんにちは。和田です。

ここ数日暑いですが皆様いかがお過ごしですか?

私共は先日、アシアルのHP(ブログも)をリニューアルしました!
皆さま見てていただけましたでしょうか?
まだの方は是非是非ご覧になってください。
http://www.asial.co.jp

さて今回のアシアルHPはレスポンシブデザインを採用しています。
そこで今回はFireworksから離れて、最近なにかと話題のレスポンシブデザイン-特に最初に悩むウインドウサイズの切替えについて書こうと思います。


アシアルではウインドウサイズの切替えを、タブレットはPC版のHPをそのまま表示させ、スマホのみウインドウサイズを切替える。ということにいたしましたが、
皆様はレスポンシブデザインを作成される際どのようなウインドウサイズ(幅)で切り分けていますでしょうか?
結構悩むところなのではないかと思います。

そこで、各デバイスのサイズのまとめと自分なりに基本的な切り分けサイズを考えてみようと思います。


■各デバイスの画面サイズと切替えサイズ
3キャリアから現在発売中もしくは発売予定の機種の画面サイズを調べてみました(抜けはあると思いますのご注意ください)。
そうしたらなんと、ちょうど100件!
こんなに沢山の機種が発売されているとは思いませんでした。
(各デバイスとサイズの一覧表は、ブログの最下部にまとめています)


ただ、これだけ見ていいてもよく分からないので
これを、ポートレート時、ランドスケープ時で同じ横幅毎に分けてみました。
すると、


※ 2012年7月時点の情報です。


思ったよりまとまりました。

これを更にビジュアル化してみると以下のような感じです。
といってもデバイスは有名?なものだけ載せています。




一概には言えませんが、上記の表や図を見ると
以下のような分けが出来るのではないかと思います。
・〜480px:ちょっと古いスマホ
・480〜768px:現在よく使われているスマホ
・768px〜:タブレットやPC、高解像度のスマホ

これをウインドウサイズの切り分けとして考えると
以下のようになります。



結構まとまったと思うのですがいかがでしょうか?

実際は、サイトの幅やデザイン、ページの内容・量によって切替える回数やウインドウサイズも変わってくると思うのですが、オーソドックスなサイトであれば、上記3つの分けで、ある程度対応できるのではないかな…と思います。

皆様いかがでしょうか?
もし「こんな風に切替えたよ」などございましたら
是非教えていただけたらと思います。

それではまた次回もよろしくお願いいたします。


↓各デバイスとサイズの一覧表

No.通信事業者バイスサイズ(px)備考
1docomoGoogle Nexus one480×720スマホ
2docomoGALAXY S III (SC-06D)720×1280スマホ
3docomoARROWS X  (F-10D)720×1280スマホ
4docomoAQUOS PHONE sv (SH-10D)720×1280スマホ
5docomoREGZA Phone (T-02D)540×960スマホ
6docomoOptimus Vu (L-06D)768×1024スマホ
7docomoAQUOS PHONE ZETA (SH-09D)720×1280スマホ
8docomoELUGA power (P-07D)720×1280スマホ
9docomoXperia GX (SO-04D)720×1280スマホ
10docomoGALAXY S II LTE (SC-03D)480×800スマホ
11docomoARROWS X LTE (F-05D)720×1280スマホ
12docomoOptimus LTE (L-01D)720×1280スマホ
13docomoMEDIAS LTE (N-04D)720×1280スマホ
14docomoGALAXY Note(SC-05D)800×1280スマホ
15docomoAQUOS PHONE(SH-06D)720×1280スマホ
16docomoARROWS μ (F-07D)480×800スマホ
17docomoMEDIAS PP (N-01D)480×800スマホ
18docomoP-04D540×960スマホ
19docomoXperia PLAY (SO-01D)480×854スマホ
20docomoBlackBerry Bold 9900640×480スマホ
21docomoMEDIAS  ( N-07D)720×1280スマホ
22docomoOptimus it (L-05D)480×800スマホ
23docomoXperia SX (SO-05D)540×960スマホ
24docomoANTEPRIMA (F-09D)480×800スマホ
25docomoARROWS Me (F-11D)480×800スマホ
26docomoELUGA V (P-06D)720×1280スマホ
27docomoAQUOS PHONE st (SH-07D)480×854スマホ
28docomoDisney Mobile on docomo (P-05D)540×960スマホ
29docomoDisney Mobile on docomo (F-08D)720×1280スマホ
30docomoGirls' (F-03D)480×800スマホ
31docomoPRADA phone by LG (L-02D)480×800スマホ
32docomoQ-pot.Phone (SH-04D)540×960スマホ
33docomoXperiaTM acro HD (SO-03D)720×1280スマホ
34docomoAQUOS PHONE slider (SH-02D)540×960スマホ
35docomoLUMIX Phone (P-02D)540×960スマホ
36docomoMEDIAS ES (N-05D)720×1280スマホ
37docomoP-01D480×800スマホ
38docomoF-12C480×800スマホ
39docomoARROWS Tab LTE (F-01D)800×1280タブレット
40docomoGALAXY Tab 10.1 LTE (SC-01D)800×1280タブレット
41docomoMEDIAS TAB (N-06D)800×1280タブレット
42auHTC J (ISW13HT540×960スマホ
43auAQUOS PHONE SERIE (ISW16SH )720×1280スマホ
44auARROWS Z (ISW13F)720×1280スマホ
45auURBANO PROGRESSO 480×800スマホ
46auAQUOS PHONE SL (IS15SH)540×960スマホ
47auAQUOS PHONE CL (IS17SH )540×960スマホ
48auGALAXY SII WiMAX (ISW11SC)720×1280スマホ
49auINFOBAR (C01)480×854スマホ
50auXperia acro HD (IS12S )540×960スマホ
51auOptimus X (IS11LG )480×800スマホ
52auMOTOROLA RAZR (IS12M )540×960スマホ
53auARROWS ES (IS12F )480×800スマホ
54auAQUOS PHONE (IS14SH )540×960スマホ
55auARROWS Z (ISW11F )720×1280スマホ
56auDIGNO (ISW11K480×800スマホ
57auHTC EVO 3D (ISW12HT )540×960スマホ
58auMOTOROLA PHOTON (ISW11M )540×960スマホ
59auMEDIAS (IS11N )480×800スマホ
60auWindows Phone (IS12T )480×800スマホ
61auMIRACH (IS11PT )480×800スマホ
62auINFOBAR (A01 )540×960スマホ
63auG'zOne (IS11CA )480×800スマホ
64auREGZA Phone (IS11T )480×854スマホ
65auSIRIUS α (IS06 )480×800スマホ
66auREGZA Tablet (AT500)800×1280タブレット
67auMOTOROLA XOOM™ Wi-Fi (TBi11M)800×1280タブレット
68auSMT-i9100600×1024タブレット
69SoftBankAQUOS PHONE Xx (106SH)720×1280スマホ
70SoftBankARROWS A (101F)540×960スマホ
71SoftBankPANTONE 5 (107SH)480×854スマホ
72SoftBankAQUOS PHONE (102SHII)720×1280スマホ
73SoftBankAQUOS PHONE (102SH)720×1280スマホ
74SoftBankAQUOS PHONE (104SH)720×1280スマホ
75SoftBankLUMIX Phone (101P)540×960スマホ
76SoftBank102P540×960スマホ
77SoftBankHONEY BEE®(101K)480×800スマホ
78SoftBankAQUOS PHONE THE HYBRID (101SH)480×854スマホ
79SoftBankAQUOS PHONE (103SH)540×960スマホ
80SoftBankSTAR 7 (009Z)480×800スマホ
81SoftBankMEDIAS CH (101N)480×800スマホ
82SoftBankDELL Streak Pro (101DL)540×960スマホ
83SoftBankAQUOS PHONE THE HYBRID SoftBank (007SH)480×854スマホ
84SoftBankAQUOS PHONE THE HYBRID SoftBank (007SH J)480×854スマホ
85SoftBankSoftBank (007SH KT)480×854スマホ
86SoftBankAQUOS PHONE SoftBank (006SH)540×960スマホ
87SoftBankAQUOS PHONE THE PREMIUM SoftBank (009SH)540×960スマホ
88SoftBankYahoo! Phone SoftBank (009SH Y)540×960スマホ
89SoftBankSweety SoftBank (003P)480×854スマホ
90SoftBankVision SoftBank (007HW)480×800スマホ
91SoftBankシンプルスマートフォン SoftBank (008Z)480×800スマホ
92SoftBank GALAPAGOS SoftBank (003SH)480×800スマホ
93SoftBank GALAPAGOS SoftBank (005SH)480×800スマホ
94SoftBank Libero SoftBank (003Z)480×800スマホ
95SoftBank dynapocket SoftBank (X02T)480×800スマホ
96SoftBankSoftBank (X01SC)320×240スマホ
97SoftBankiPhone3G/3GS320×480スマホ
98SoftBankiPhone4/4S640×960スマホ
99SoftBankiPad/iPad2768×1024タブレット
100SoftBankNew iPad1536×2048タブレット

HTML5でアプリ開発「Monaca」- スマートフォン&モバイルEXPOに出展してきました

こんにちは。小林です。
先日、アシアルでは、HTML5アプリ開発Monaca」をテーマにスマートフォン&モバイルEXPOに出展してきました。

展示会では、たくさんの皆様にブースにお立ち寄りいただきまして誠に有難うございました。
3日間で、ブース来場者数500名を目標としていましたが、目標の2倍の1000名近くのお客様にブースにお立ち寄りいただくことができました。

説明員が不足しており、ご来場いただいた皆様に満足な説明ができずに申し訳ない場面もございました。深くお詫び申し上げます。

もっと、Monacaのことを知りたい、HTML5を利用したスマートフォンアプリ開発の具体的な手法に興味がある、HTML5を使ったスマートフォンアプリ開発の事例を知りたい方向けに、フォローアップセミナーを開催しますので、宜しければご参加いただけたらと思います。

○【アシアルPHPスクール】初心者歓迎!ノンプログラマー歓迎!『Monacaで作るHTML5スマフォアプリ開発ハンズオンセミナー』

 開催日時:2012年6月1日 10:00-12:30(開場:9:30)
 会場:関東ITソフトウェア健康保険組合 市ヶ谷健保会館
 対象者:Webデザイナー、初級エンジニアなどでiPhone/Androidアプリ開発に興味のある方
 定員:30名 ※定員となり次第、受付を終了させていただきます
 受講料:5,000円(税込)
 当日の持ち物:ノートPC、スマートフォン端末
 ※ 詳しくは、 「初心者歓迎!ノンプログラマー歓迎!『Monacaで作るHTML5スマフォアプリ開発ハンズオンセミナー』」申込ページ をご覧ください。

○【アシアルPHPスクール】スマフォアプリ企画者向け『事例に学ぶHTML5スマフォアプリ開発最前線』

 開催日時:2012年6月5日 10:00-11:40(開場:9:30)
 会場:関東ITソフトウェア健康保険組合 市ヶ谷健保会館
 対象者:スマートフォンアプリの企画者
 定員:70名 ※定員となり次第、受付を終了させていただきます
 受講料:3,000円(税込)
 ※ 詳しくは、 「スマフォアプリ企画者向け『事例に学ぶHTML5スマフォアプリ開発最前線』」申込ページ をご覧ください。



HTML5 最中 その1


HTML5の刻印が押された特注最中。


HTML5 最中 その2


展示会に向け大量に準備した最中。EXPOは3日間の開催でしたが、予想以上の大盛況ぶりに、2日目の午前に既に無くなってしまいました。急いで、無刻印最中を用意したことは、内々の話です。。。


◎ EXPO前日 最終打ち合わせの様子


EXPO前日、ブースの前で、ミニセミナーの最終調整を行いました。


◎ EXPO当日 アシアルのブース前の状況


当日は、通路を塞いでしまう程の大盛況でした。主催者の皆さん、周りのブースの皆さんにはご迷惑をおかけしまして本当に申し訳ございませんでした。


◎ EXPO当日 もえもえクロックの撮影風景


テレビ東京のモーニングサテライト「ネタのたね」でも紹介された「もえもえクロック」のアプリ開発を「10分間で時計アプリを作ろう!」と題して、来場者の皆様にも体感いただきました。

iScroll4でネイティブに近いスマホ向けHTMLページを作成する

こんにちは。松田です。
スマホ向けにネイティブに近い動作をするHTMLページを作成しようとした時、必ずぶつかるのがヘッダーの動作の扱いです。
特にiOS向けに処理を書く場合、iOS5では実装されているposition:fixed;がiOS4では動作しないため、iOS4CSSのみでヘッダーを固定することが難しくなっています。
そんな時につかえるのがiScroll4です。iScrollではJavaScriptの動作によりヘッダーの固定を行う処理が行われます。


http://cubiq.org/iscroll-4
上記のサイトからDOWNLOADボタンを押すとtar.gz形式のファイルがダウンロードされます。
examplesディレクトリにたくさんサンプルが入っているので見てみると良いかもしれません。
特に使えそうなのが、lite、pull-to-refresh、carousel、あたりです。
liteは最も簡略化した使い方のサンプル、pull-to-refreshは表示したリストが上限まで達した際に次のリストを動的に読みこませるサンプル、carouselはページ単位で横スクロールを実装できるサンプルになっています。

lite


pull-to-refresh


carousel



liteのソースコードを見ればわかりますが、基本的な使い方は簡単で、サンプルをコピペすれば簡単に作れてしまいます。
基本的なhtmlの構造はこんなかんじです。



<div id="wrapper">
	<ul>
		<li>row1</li>
		<li>row2</li>
		<li>row3</li>
		...
	</ul>
</div>


これで以下のようにスクリプトを実行させます。


var myScroll;
function loaded() {
	myScroll = new iScroll('wrapper');
}
document.addEventListener('touchmove', function (e) { e.preventDefault(); }, false);
document.addEventListener('DOMContentLoaded', loaded, false);


DOMの読み込み完了後でないとiScrollが実行できないため、DOMContentLoadedイベント発生後にnewされるようになっています。
また、タッチ時に余計な動きを起こさないようにtouchmoveイベント発生時のデフォルトの動作をキャンセルさせています。
これにサンプルのソースのcssをコピペすれば完成です。
ヘッダーがしっかりと固定され、かなりネイティブに近い動きになっています。
ヘッダーの固定は、タッチでの移動距離を計算し、その分だけ元の位置に戻すような処理が入っているようです。なかなか力技ですね。

さらに複雑な処理を指せる場合はiScrollのコンストラクタ第2引数で色々なオプションをつけることができるので、何か特殊な操作をさせたい場合は近い動作をするサンプルのソースを見てみるか、公式ページでオプションを確認してみると良いかもしれません。

スマホ向けのページを作るにはとても便利なので、ぜひ一度試してみてはいかがでしょうか。

Monacaで作ろう 簡単スマフォアプリ!

こんにちは、志田です。
今回は、弊社で開発しているスマートフォンプラットフォーム「Monaca」を使って、アドレス帳検索アプリを作ってみます。


1. Monaca開発準備



まずはMonacaで開発できる環境を整えましょう。
弊社松田の記事を参考に、Monacaアカウントを取得、プロジェクトを作成しましょう。
Monaca + enchant.js でお手軽スマフォゲームアプリ開発

そして、実機にMonacaデバッガをインストールしてください。
http://docs.monaca.mobi/manual/debugger/

2. 表示部分 index.htmlの編集



今回のアプリはとても簡単な作りですが、このような作りのアプリにしたいと思います。
(1) 入力フォームに検索したい文字列を入力する
(2) 携帯のアドレス帳を検索する
(3) 検索フォームの下に、検索結果を表示

まず、表示部分であるindex.htmlを編集しましょう。



<!DOCTYPE HTML>
<html>
  <head>
    
    <meta name="viewport" content="initial-scale = 1, user-scalable=no" />
    <meta http-equiv="Content-type" content="text/html; charset=utf-8" />
    <title>PhoneGap</title>
    <link rel="stylesheet" href="css/master.css" type="text/css" media="screen" title="no title" charset="utf-8">
    <link rel="stylesheet" href="css/jquery.mobile-1.0b2.css" type="text/css" media="screen" title="no title" charset="utf-8">
        
    <script type="text/javascript" charset="utf-8" src="js/jquery-1.6.2.min.js"></script>
    <script type="text/javascript" charset="utf-8" src="js/jquery.mobile-1.0b2.js"></script>
        
    {% if Device.Platform == Android %}<script type="text/javascript" charset="utf-8" src="js/phonegap.0.9.5.1_android.js"></script>{% endif %}
    {% if Device.Platform == IOS %}<script type="text/javascript" charset="utf-8" src="js/phonegap.0.9.5.1_ios.js"></script>{% endif %}

    <script type="text/javascript" charset="utf-8" src="js/main.js"></script>  
                
  </head>
    
  <body onload="onLoad();" data-role="page" data-theme="c">

    <div data-role="header" data-theme="b"><h1>アドレス帳検索</h1></div>
        
    <div data-role="content" data-theme="b">
      <input type="text" id="search">
      <input type="button" value="Search!" onClick="search_user()">
            
      <div id="info">
      </div>        
    </div>

    <div data-role="footer" data-theme="b">
      <div>Powered by Monaca</div>
    </div>

  </body>
</html>


上記のようなコードで、このようなアプリの見た目が完成しました。


それでは、これから機能部分を実装していきます。

3. 機能部分 main.jsの実装





// PhoneGapの読み込みを待機
//
function onLoad() {
  console.log("logging start");
  document.addEventListener("deviceready", onDeviceReady, false);
}

// PhoneGap準備完了
//
function onDeviceReady() {
  $("#info").append("<p>アドレス帳からユーザを検索します</p>");
}

//ボタンを押すとアドレス帳を検索
//
function search_user() {
  var options = new ContactFindOptions();
  options.filter = document.getElementById('search').value;
  var fields = ["displayName", "name", "phoneNumbers"];
  navigator.service.contacts.find(fields, onSuccess, onError, options);
}

//エラー
//
function onError() {
  alert("エラー発生");
}

//検索結果
//
function onSuccess(contacts) {
  $("#info").empty();
  $("#info").append('<p>「<span style="font-weight:bold; color: orangered;">' + $("#search").val() + '</span>」の検索結果</p>');
  if (contacts.length == 0) {
    $("#info").append("<p>アドレス帳に登録されていません。</p>");
  }
    
  for (i=0; i<contacts.length; i++){
    var name = '';
    if (contacts[i].name.formatted != null) {
      name = contacts[i].name.formatted;
    } else {
      if (contacts[i].name.familyName != null)
        name = name + contacts[i].name.familyName;
      if (contacts[i].name.givenName != null)
        name = name + contacts[i].name.givenName;
      }
      var string = '';
      string = "<p>" + name + "</p>";
      for (j=0; j<contacts[i].phoneNumbers.length; j++) {
        string = string + "<p> &nbsp; &nbsp;" + contacts[i].phoneNumbers[j].value + "</p>";
      }
        
      if (contacts.length -1 != i)
        string = string + "<hr />";
      $("#info").append(string);
  }
}


まず、index.htmlのbody onLoadで指定されているとおり、main.jsのonLoad()が呼ばれます。
onLoad()では、PhoneGapの読み込みを待機し、DeviceReady状態になるとonDeviceReady()が呼ばれています。

onLoad()内で、console.log()という処理を行えば、デバッグログに文字列を残すことができます。
onDeviceReady()では、処理の初期化などを行うと良いですね。

index.htmlを見ると、検索ボタンを押すとsearch_user()を呼ぶようになっていることがわかります。
main.jsのsearch_user()で何をしているかというと・・・



function search_user() {
  // 検索オプションを作成します。
  var options = new ContactFindOptions();
  // 検索オプションのフィルターに、入力文字列を使います。
  // ここで指定された値でアドレス帳を検索します。
  options.filter = document.getElementById('search').value;
  // 検索結果に返してほしいフィールドを指定します。
  // この例だと、連絡先名称、個人名に関するオブジェクト、電話番号を指定しています。
  var fields = ["displayName", "name", "phoneNumbers"];
  // アドレス帳から指定したフィールドを、指定したオプションで検索します。
  // 成功時はonSuccess、失敗時はonErrorに遷移します。
  navigator.service.contacts.find(fields, onSuccess, onError, options);
}


このように、検索オプションを指定して検索を行っています。
さて、検索が成功した後はどうしているかというと・・・



// 成功時は、onSuccessにcontactsが引数として渡されます。
function onSuccess(contacts) {
  // まず、div#infoの中身を空にします
  $("#info").empty();
  $("#info").append('<p>「<span style="font-weight:bold; color: orangered;">' + $("#search").val() + '</span>」の検索結果</p>');

  // 検索結果の件数は、contacts.lengthで取得できます。
  if (contacts.length == 0) {
    $("#info").append("<p>アドレス帳に登録されていません。</p>");
  }
    
  // 取得できたcontactsのぶんだけ、div#infoに表示していきます。
  for (i=0; i<contacts.length; i++){
    var name = '';
    // 連絡先のフルネーム:formatted
    if (contacts[i].name.formatted != null) {
      name = contacts[i].name.formatted;
    } else {
      if (contacts[i].name.familyName != null)
        name = name + contacts[i].name.familyName;
      if (contacts[i].name.givenName != null)
        name = name + contacts[i].name.givenName;
    }
    var string = '';
    string = "<p>" + name + "</p>";
    // 登録されている電話番号を全部表示
    for (j=0; j<contacts[i].phoneNumbers.length; j++) {
      string = string + "<p> &nbsp; &nbsp;" + contacts[i].phoneNumbers[j].value + "</p>";
    }
        
    // 区切りのhr
    if (contacts.length -1 != i)
      string = string + "<hr />";
    // div#infoに追加
    $("#info").append(string);
  }
}


コードを見ても分かるとおり、簡単なJavaScriptjQueryで、contactsの検索ができます。



4. アプリとしてインストール



デバッグビルドを行えば、アプリとしてインストールすることができます。
今回は、実機がAndroidなので、右上のメニューからAndroidをクリックし、「ビルド」を選択。
下図のような画面が出ますので、「デバッグビルド」をクリックします。



少し待つと、デバッグビルドが終了します。
そうすると、Monacaデバッガからネットワークインストールすることができます。



インストールが完了すると、端末にインストールされたネイティブアプリと同様に、起動・利用できるようになります。

スプラッシュ画面が表示された後・・・


アプリ起動!


はじめの画面と見比べるとわかりますが、デバッガのメニューが表示されておらず、ネイティブアプリとして動いていることがわかります。

まずはAPIを見てみよう



Monacaでアプリを開発するにあたり、いろいろなネイティブの機能を利用することができます。
加速度センサー、カメラ、位置情報、ネットワーク、ストレージ…
全て、簡単なJavaScript等で記述できます。

機能を利用するためのAPIドキュメントはこちら。
http://phonegap-fan.com/docs/

Monacaアプリ開発がもっと身近なものになると思います。
みなさんも、楽しいアプリを作ってみてください♪

スマートフォン(iPhone/Android)アプリ制作時に役立つ画像サイズのまとめ

こんにちは、鴨田です。

最近、スマートフォン関連の仕事が多いのですが、
スマートフォン絡みのデザインをするときに、
この画像はどんなサイズだったっけ、
っていうことが多いので、まとめておきたいと思います。


■画面サイズ[画面解像度](単位:px)



iPhone3G / 3GS
320×480

iPhone4
640×960

iPad / iPad 2
768×1024

HT-03A
320×480

Xperia (SO-01B) / Xperia arc (SO-01C)
480×854

HTC Desire (X06HT)
480×800

Nexus One
480×800

Galaxy S
480×800

IS03
640×960

Galaxy Tab
600×1024



主要な機種だけ載せておきます。
AndroidはWide対応が主流ですね。


■Lancherアイコンサイズ(単位:px)



iPhone3G / 3GS
57×57

iPhone4
114×114

Android
36×36 / 48×48 / 72×72

Androidはデバイスにより、画面サイズが異なるので、
あらかじめ3種類のサイズを用意します。
詳しくは、こちらの記事を参照下さい。

ちなみに、iPhoneは四角い画像を用意すれば、
アプリ側で角丸と反射などを勝手につけてくれます。

Androidは規定が変わったりして、
最近は統一が取れていない気がします。


■申請時に必要な画像(単位:px)



iPhoneアプリ(形式:jpg / tif / png)
高解像度アイコン:512×512
スクリーンショット:960×640, 960×600, 640×960, 640×920, 480×320, 480×300, 320×480, 320×460

iPadアプリ(形式:jpg / tif / png)
高解像度アイコン:512×512
スクリーンショット:1024×768, 1024×748, 768×1024, 768×1004

Androidアプリ(jpg / png)
高解像度アイコン:512×512
スクリーンショット:320×480, 480×800, 480×854, 1280×800
プロモーション画像:180×120

忘れがちなのですが、申請時に必要な画像が何種類かあります。
そんなに種類があるわけではないのですが、
Androidスクリーンショットは、
rootを取らないとデバイスから行うことが出来ないので、
少し注意が必要かも知れません。


■申請時に必要なテキスト情報



iPhone / iPad アプリ

Description:必須
Category(Primary, Secondary):選択形式
Keywords:必須
Copyright:必須
Contact Email Address:必須
Support URL:必須
App URL:任意
Review Notes:任意

Android アプリ

言語:選択形式
タイトル:最大30文字
説明:最大4000文字
最近の変更点:最大500文字
プロモーション テキスト:最大80文字
アプリケーション タイプ:選択形式
カテゴリ:選択形式
価格:任意

コピー防止:オン, オフ
コンテンツのレーティング:成人向け, 青年向け, 少年向け, 全員
国/地域:掲載する国/地域を選択

ウェブサイト:任意
メール:任意
電話番号:任意

画像サイズとは関係ないので、
特にデザイナーが気にするようなことではありませんが、
ディレクターの方は申請時にこれらの情報が必要になるので、
事前に準備しておきましょう。



---震災に寄せて---

なんだか東京都の水道水からも放射性物質が検出されたとかで、
ミネラルウォーターが早くもスーパーなどからなくなってるようです。
大人よりも子供に危険があるので、どうか子供のいるご家庭に優先的に水が届きますように。

まだまだいろいろな困難が待ち受けているとは思いますが、
助け合いが重要だと思いますので、平静に、寛容な心を持って、
普通の生活を意識して、過ごしていきましょう。

今回の震災で被害に遭われた方々には、心よりお見舞い申し上げます。
被害のなかった地域、少なかった地域の方は、精一杯バックアップしましょう。

iPhone向けの名刺管理・共有アプリケーション ~ ビジネスアプリケーションにもiPhoneを活用

2008年のiPhone発売を皮切りに、各キャリアのスマートフォンのラインナップが充実されてきました。フルキーボード、大画面、インターネット接続など、PCに準じる機能と携帯性を備えた端末として、スマートフォンを活用する機会が益々増えることが予測されます。

アシアルでは、
・そろばんソフト「Abacus」
モグラ叩きゲーム「Tap-A-Mole」
OKWaveを表示・検索できるiPhoneアプリ
・3Dオブジェクトとして画面上に商品を再現したプロモーションツール
・ファン向けの画像・動画のダウンロードサイト
 ・・・
などなど、iPhone向けのアプリケーション構築を行ってきました。

iPhoneは、その特有のマルチタッチパネル、加速度センサー、インターネット接続、GPS機能などを活用することで、エンターテイメント性の高いアプリケーションも、閲覧・操作性の良いエンタープライズ向けの業務アプリケーションも、構築することができます。

今後、アシアルでは、スマートフォン向けに順次ビジネス・アプリケーションを投入していきたいと考えています。その事始として、三三株式会社様と協力して、「iPhone向けの名刺管理・共有アプリケーション」を3月にリリースします。



他にも、皆さんの新しいアイディアの具現化、Webシステムなどの既存のビジネス資産を活用するお手伝いができたら幸いです。

iPhoneアプリ構築 紹介Webサイト