Unicode版msearchのスマートフォン対応

Unicode版msearchは、Version1.52(U3)以降では標準でスマートフォンに対応しています。 このページは、添付のsphone.cfg使用時にスマートフォンでどんな風に表示されるのかを シミュレータもしくは実機の写真で紹介・確認すること、およびsphone.cfg(スマートフォン用HTML+CSS)作成時に 苦労した事項を書きとめておくことを目的としています。

目次

iOS端末

iOS(iPhone/iPodTouch/iPad)のMobile Safariでの画面です。Unicode版msearchをスマートフォンに対応させようと 思ったそもそものきっかけは「iOSに対応させたい」でした。 ですので、iOSのMobile Safariで正しく表示されることは絶対必須でした。 IE,Android用標準ブラウザと比べるとブラウザ自体の完成度が高く、不具合が少ないと感じました。 Mobile Safariで正しく表示されるようなHTML+CSSを作成するのは容易に行えたものの、 Androidの標準ブラウザ, IEでも正しく表示されるようにしようとした途端に作業が難しくなりました。 特に大変だったのがIE対応で、モダンブラウザ(Firefox,Opera,Chrome,Safari)では正しく表示されるのにIEだけ表示が崩れることが頻発し、 IEの不具合を回避するようにしたため、検索窓のHTML+CSSは複雑になってしまいました。

iOS 4.3, iOS5.0のいずれでも問題なくきれいに表示されます。 下記はiOSシミュレータでの画面(iOS5.0)です。画面は載せていないものHTML+CSSそのものはiPadでも問題なく表示されることを確認しています。

iOSでの画面(拡大)

Android端末

IEに次いで苦労させられたのがAndroidの標準ブラウザ(Chrome Lite)です。パソコン用のChromeをなぜそのまま持ってこないのだろうかと 考えたくなるほど、Mobile Safariと比べて完成度が低いと感じました。Mobile Safariと同じWebKit系なのでなおさらです。 HTML画面の部品(ドロップダウンのボタンなど)が見栄えしない、 日本語フォントの太字が効かないことがある(太字が効く機種もある、というか太字が効くか効かないかは機種による、という状況はどうかと思う。)、 border-radiusがぎざぎざする、検索結果画面の下部に出る「戻る,1,2,3,4,5,進む」を囲むボックスに余計な線が入る、等々。 いくつかの実機で確認を行い大きな問題(検索に支障をもたらすような問題)がないことは確認したものの、 前述の細かな不具合は処置しきれず、断念しました。

Android版Firefox,Opera Mini/Mobile,NetFrontLifeBrowserにも対応はしているものの、 実機確認はしていません。

下のエミュレータでの画面は、左から、Android 1.6、Android 2.33、Android 4.03です。 画面は載せていないもの、HTML+CSSそのものはAndroid 3.xでも大きな問題なく表示されることを確認しています。

Android1.6での画面(拡大) Android2.33での画面(拡大) Android4.03での画面(拡大)

WindowsPhone

WindowsPhoneについては、Windows Phone 7.5以降(Mango以降,IE9以降およびEdge)のみの対応です。 auのIS12T(Windows Phone 7.5)で実機確認し(下の写真)、大きな問題なく表示されることを確認しています。 せっかくだからWindowsPhone用のみMetro調デザインにしようかとも考えたものの、 結局止めました。 Mango以前のWindowsPhone(6.x, 7.0)およびPocket PC、Windows CE, WindowsMobile(2003/2003 SE/5.0/6/6.1/6.5)は携帯電話扱いです。

auのIS12Tでの画面(拡大)

Windows Phone 8.1上のIEとWindows 10 Mobile上のEdgeについても 特に問題なく表示されます。下のエミュレータでの画面は、 左から、Windows Phone 8.1、Windows 10 Mobileです。

Windows Phone 8.1での画面(拡大) Windows 10 Mobileでの画面(拡大)

IE対応についてはとにかくてこずりました。モダンブラウザ(Firefox,Opera,Chrome,Safari)では問題なく 表示されるのにIEだけ表示が崩れる現象が頻発し、IEでの不具合を回避するために、 検索窓のHTML+CSSが複雑になってしまいました。

HTML+CSSについてはパソコン用のIE8,IE9でも確認を行い、大きな問題なく表示されることを確認しています。

BlackBerry

ブラウザがWebKit系となったBlackBerry OS 6以降に対応しています。 日本国内で販売されている機種では、BlackBerry Bold 9780, BlackBerry Bold9900などが該当します。 iOSのMobile Safari並に問題が少なく、対応は容易でした。 BlackBerry OS 6以前については携帯電話扱いです。

下記はBlackBerryシミュレータでの画面です。左から、BlackBerry Bold 9780, BlackBerry Bold 9900です。 実機確認(NTTドコモ版9780,9900)も行い、問題なく表示されることを確認しています。 余談ですが9900を触っていたら、物欲が沸いてきました。キーボードの感触がたまらなく、いいです。

BlackBerry Bold 9780での画面(拡大) BlackBerry Bold 9900での画面(拡大)

DSi

任天堂の携帯ゲーム機であるDSiに内蔵されているDSiブラウザでも大きな問題なく表示できます。元々表示できること自体を期待していなかったものの、 冗談半分で試してみたところ、大きな問題なく表示できる、CSS3のターゲット擬似クラス(:target)や HTML5で追加された機能であるform属性にも対応している等びっくりの連続で、 DSiLL,3DS,Wii,PS Vitaと併せて対応しました。

DSiのハードウェア・スペックはパソコンやスマートフォンと比べるとはるかに貧弱なのに、 これだけ表示できるとは、すばらしいと思います。

DSi,DSiLL,WiiのブラウザはOpera、3DS,PS Vita(PlayStation Vita)のブラウザはWebKit系NetFrontとなっており、 その中で実機確認をしているのはDSi(下の写真)のみです。 自分はゲームをまったくしない人間ですが、今回の件でネット端末の観点からゲーム機に興味が沸きました。

Nintendo DSiでの画面(拡大)

携帯電話

スマートフォンではないものの、i-modeでの画面(i-mode HTML simulator IIでの画面)とEZwebの画面も付けておきます。 Unicode版msearchを携帯電話(フィーチャーフォン、ガラケー)に対応させた2005年当時には、スマートフォン全盛の時代が到来することは想像できませんでした。 これから先の将来、パソコン、携帯電話、スマートフォンはいったいどうなっていくのでしょう?

i-modeでの画面(拡大) EZwebでの画面(拡大)

ページのトップへ戻る