タグ: 開発ツール

WEB制作・開発において最後の詰め、動作検証。個人のサイトならいざ知らず会社としてサイトをリリースする以上、無様なものはリリースできません。事前にシナリオを起こし、機能単体から、サイト全体のスルーチェックまで、隅々までチェックする必要がありますが、頭を悩ませるのはやっぱり携帯端末でしょう。何せ爆発的に普及したスマートフォンと、衰退の一途をたどるも、まだ相当数のシェアを持っているガラケーの検証はモバイル関係の開発を行った人間なら一度は頭を抱えた問題です。

そこで今日は、モバイルの開発の際に使える検証ツールをいくつか紹介させて頂きます。
まずはガラケーとスマートフォン共用で使えるツールの紹介から

その1.FireMobileSimulator(ファイヤモバイルシミュレーター)

FireFoxの有名アドオンですが、超使えます。相当古いのガラケー機種(もちろん3キャリア対応)から最新のスマートフォンまで対応した優れもので、端末設定や利用方法もめちゃくちゃ簡単で、モバイル関係の開発者なら利用している方も多いのでは?
FireMobileSimulatorダウンロードページ

その2.UserAgentSwitcher(ユーザーエージェントスイッチャー)

これまたFireFoxのアドオン。FireFoxはWEB開発に使えるアドオンが目白押しでとても重宝します。このアドオンはUserAgent(ユーザーエージェント)を偽装するツールで、UserAgentはドコモならドコモの、エーユーならエーユーのといった感じで端末や機種ごと、PCでもブラウザごとに異なります。機種やキャリア、デバイスごとに表示を変える場合の確認にも使えますが表示の確認ならFireMobileSimulatorのほうが優秀なので、僕は主にPC、スマホ、ガラケーの転送プログラムの動作確認に利用しています。設定にはまず偽装したい機種のUserAgentを調べるところから始めなきゃいけないのでちょっと面倒ではあります。

UserAgentSwitcherダウンロードページ


続いてはスマホ用のテストツールを紹介します。


その3.iPhone SDK(アイフォンエスディーケー)

iPhone用サイトもそうですが、何よりiPhoneアプリを作る場合には避けて通れないツールです。環境はMACのみで、またインストールするにはApple IDを発行しなければならないなど、如何にもアップルらしい感じですが、何せ公式ですから実機には叶わないにしろ、抜群の信頼性を持ちます。iPhoneの開発キットでるXCodeも一緒にインストールすることをお勧めします。
Apple Developer Connection (日本語)

その4.Android SDK(アンドロイドエスディーケー)

モバイル関連の開発で何が困るかって言うと、バリエーションが多すぎて確認が追いつかない点というのは冒頭でも述べたことですが、それをまっこと象徴するのがAndroidでしょう。多すぎるOSのバージョン、違いすぎる端末ごとの画面サイズ、サードパーティによる自由なカスタマイズという、なんとも悩ましい。そんな時に使えるのがこのAndroid SDKという開発キットです。Windowsでも動くのがとてもありがたいです。
ただ、何点か不満を言うと、設定がそれなりにめんどくさいことと、検証したい機種のドライバをネットから探してインストールしなければならなかったりと、なかなかに手間がかかることです。ですが、こちらもAndroidアプリを作るうえで避けて通れないツールなので、是非導入すべし。なお、インストールの際はJavaの統合開発環境のeclipseと、Java 開発プラットフォームもインストールすることをお勧めします。
アンドロイドSDK ダウンロード
eclipse ダウンロード
Java 開発プラットフォーム ダウンロー^ド

その5.iPhone Simulator(アイフォンシミュレーター)

上に挙げたiPhoneSDKですけど、MACじゃないと使えないので、普段使いはWindowsという人にはちょっと面倒です。アプリならXcodeを使わざるを得ないので、あきらめもつくのですが、ちょっとWEBサイトの表示を確認したいだけのときはもうちょっとお手軽なものが欲しいところです。そこでこのツールです。Adobe Airで動くシミュレータで、ランドスケープにも対応しているので、何かと便利です。因みにiPad用のシミュレーターもあります。インストール後、設定なしですぐ動くのもいいですね。

iPhone Simulatorダウンロード


その6.Opera Mini Simulator(オペラミニシミュレーター)

冒頭でFireFoxを持ち上げましたが、Operaも何気に開発ツールは豊富にそろっています。これはスマホ専用ブラウザOpera mini用のシミュレーターです。使う機会は限られますが、備えあれば憂いなしということで。

Opera Japan ブログ - Opera Mini シミュレーター


  もっといろいろあると思いますが、僕が普段使っているのはこんな感じです。あと、ガラケー用のエミュレーターもあるのですが、需要も少なくなってきてますし、FireMobileSimulatorが結構良い感じなので、割愛させて頂きました。


先日のエントリーで紹介した「HTML5 Boilerplate」を使って、お粗末ながらレスポンシブサイトを作ってみました。

initializrを使えばあらかたレイアウトが組まれている状態ですので、後はスタイルシートとHTMLを使って自分好みのサイトに仕立てあげることが出来ます。

レスポンシブサイトのサンプル

素のテンプレートからあまり大きくレイアウトを変更していませんので、この程度のカスタマイズであれば、ものの数時間で完成できちゃいます。レスポンシブデザインの骨子はウインドウサイズを取得して、それによって読み込むスタイルを切り分けるということになりますので、あまり大掛かりな変更を加えない限り、HTMLとCSSに手を加えるだけで完結してしまいます。

ただ、ちょっと難しいというか、厄介だと感じたのは、サイズやブラウザごとにスタイルが定義してあって、それを考慮に入れて手を加えないと一方ではいい感じになっても、もう一方では…。みたいなことが頻繁に起こってしまいます。後はHTML5で記述されているので、とてもシンプルなソースですが、見慣れていないと少しわかりにくいかもしれません。でも慣れてしまうと4.0の<div>~</div>だらけのソースよりかはるかに楽ですけどね。

因みにあらかじめスタイルを決めておくべき画面サイズは、以下のような感じ。

  • オールサイズ対応
  • 横幅1140ピクセル~
  • I横幅480ピクセル(場合によっては320px)~
  • 横幅768ピクセル~

デバイスごとに更新の手間やソースの管理をしなくて済むし、クローラー対策やインデックス化の手間の省略などSEOの観点でも有利とされているので、一度試してみてはどうでしょうか?

HTML5 WEBテンプレート集「HTML5 Boilerplate 4」



HTML5はもはや次世代規格といえないほど、ニーズや要求が高まってきています。ウチの会社でも脱フラッシュだの、レスポンシブデザイン(ウインドウ幅に合わせてレイアウトを最適化させる方法。PCとスマホサイトの両立に使えるとして俄かに話題になっている技術)に対応せよだの、コレがWEB制作や開発者以外からでも指摘を受けるようになって来ました。

こちとら必死こいてXHTMLのマークアップ方法を覚えていったのに、その努力を一切合切水の泡にせよと言うのか?と愚痴りたくなりますが、現実問題スマートフォン、タブレットがここまで浸透してきたらやっぱり無視は出来ません。

でもご安心あれ、常に最先端を求められるWEB制作・開発の現場を助けるお役立ちツールがあるんです!それがこちら、

HTML5 WEBテンプレート集「HTML5 Boilerplate 4」

あらかじめ基礎の構築が完了している雛形集なので、一から構築していく必要もなく、また用途や目的に沿ってカスタマイズすればいいので、喫緊な開発の場合重宝すること間違いなしです。

もちろん、今はやりのスマートフォン、タブレットに対応したテンプレートや、Ratinaディスプレイを搭載したMacBook Proといった高DPIデバイス向けのサンプルメディアクエリなど、今もっとも対応を求められている問題について充実の内容となっています。

なお、更に踏み込んで、「Get Custom Build」から、すでにあらかたカスタマイズされたライブラリをダウンロードでき、中にはレスポンシブデザインのライブラリもあるじゃないですか!スマホサイトも作らなきゃ、でもPCサイトと両立できないって言うWebマスターも多いと思いますので、これをつかってレスポンシブデザインに挑戦してみては?