ひろぽっぽれす » Android

メディアクエリワンソース・マルチデバイステンプレートをリリースしました

hirohi — Fri, 16 Sep 2011 12:31:52 +0000

CSS3のメディアクエリを使ったワンソース・マルチデバイステンプレートをリリースしました。

PC, iPhone, iPad, Android, 各種タブレットに最適化された形でコンテンツが提供できるように開発しました。多分まだ検証不十分でバグがあるかもですが、ベータ版をリリースします。

ワンソース・マルチデバイスとは？

「ワンソース・マルチデバイス」とは、1つのドキュメント(HTML)を、文書構造・内容に手を加えずに、仕様や画面サイズの異なる複数の端末毎に最適化して表示させる技術です。
CSS3のMediaQueryを使って横幅の変化によってCSSの読み込みを変えることで、さまざまな画面サイズのデバイスに対応することができます。

動作検証端末

Windows Mac: Internet Explorer 7 以上; Firefox3.6 以上; Safari5 以上; Opera11 以上; Google Chrome

iOS4.3 以上: iPhone3GS; iPhone4; iPad; iPad2

Android2.1 以上: Xperia (Android2.1); GalaxyS (Android2.2); NexusS (Android2.3)

とりあえず目標として、スマートフォン、PC、タブレットなど、Web標準ブラウザを搭載するデバイスに最適な形でコンテンツを提供することを目指しました。

マルチデバイス対応案件における、開発、運用のハードルや負荷を下げつつ、運用もラクにできればなと。

極力、ユーザーエージェント判別による振り分けはしません。全部CSS！
JSギミックなければ全然いけるよ、うんきっと。

メリット

CSSのみで対応できちゃう。
JavaScriptができなくても、マークアップのみで対応できちゃう。
MediaQueryはウィンドウの横幅でCSSを切り替えるため、未知のデバイスも考慮できる（はず。）

デメリット

複雑なレイアウト、コンテンツの出し分けは難しい。
MediaQueryでのCSS切り替えによるコーディングの取得が必要。

最後に・・・

このブログはマルチデバイス対応まだです！これからこのテンプレートを使ってみようと思います。

Androidでベーシック認証をかけるとJSが文字化けする

hirohi — Thu, 03 Mar 2011 08:24:19 +0000

あまりに何も書いていなかったので久しぶりに書こうかと。
最近はすっかりスマートフォン対応の案件が多くなってきたのでちょろちょろとスマフォ対応についても書いていこうかなと思います。

今回は結構気づきにくいバグがあったのでそれを書きます。

Android2.2 で外部から読み込んでいるJSがきちんと動作しないことがありました。どうも文字コードがおかしくなってるのかなんなのかわかりませんがJSが壊れます。

原因はなんとベーシック認証！ベーシック認証を外せば特に問題ないのですが、ベーシック認証をかけた瞬間からJSを正常によまなくなります。まったくもって意味不明です。NexusS(Android2.3)ではよめたのですが、文字化けは起こさないものの、何らかの動作がおかしくなります。結局Android全般ダメっぽいです。

apacheのバグなのか、Androidのバグかは定かではありませんが、開発段階ではベーシック認証をかかった環境での開発が多々あると思いますので、スマフォ対応の案件をやる方は注意してください。

google Android をエミュレートしてみた

hirohi — Sun, 09 Aug 2009 15:06:18 +0000

ドコモからgoogleのオープンソースOS、Androidを搭載したスマートフォンが発売された。
ＬｉｎｕｘカーネルをベースにつくられたＡｎｄｒｏｉｄはオープンソースのため、誰でもカスタマイズができる。
ＥｃｒｉｐｓｅでＡｎｄｒｏｉｄで動かすアプリの開発ができるので、早速環境を整え、Ａｎｄｒｏｉｄをエミュレートしてみた。

▼自分のサイトを2つ開いてみた。

▼funnythingz.comをフルで開いてみた。

▼Ｌｉｎｕｘベースのため、ターミナルが使える。

ターミナルはiPhoneでも使えるが、Ｊａｉlbreakしなければならない。

ＡｎｄｒｏｉｄはＪａｖａで開発できるので、iPhone開発のように、Objectiv-Cなど新たに覚える必要もないし、開発者にとっての敷居がかなり低いと思われるので、今後流行りそうな予感はするが、一般ユーザーに対しては全然iPhoneのほうがまだまだ強いんだろうなぁ。