ラベル iPad の投稿を表示しています。 すべての投稿を表示
ラベル iPad の投稿を表示しています。 すべての投稿を表示

2011年7月8日金曜日

スマートフォン向けページに最適な meta viewport の指定で迷う

スマートフォンでページが見やすくなるように、metaタグでviewportを指定。

試行錯誤の結果、以下の書式に決定。
<meta name="viewport" content="width=device-width; initial-scale=1.0; maximum-scale=1.0; user-scalable=0;">

viewportの属性の内容は以下の通り。

・width
デフォルトの幅は 980、範囲は [200, 10,000]。
つまり、viewportが指定されていない場合は、デフォルトは幅980pxでページが表示されるので、表示コンテンツが小さくなり、見にくくなる。

・height
デフォルトの高さは、width と縦横比から計算され、範囲は [223, 10,000]。

・initial-scale
ページが最初に読み込まれるときの拡大率。デフォルトではページを画面に合わせる。指定可能範囲は [minimum-scale, maximum-scale]。

・minimum-scale
ユーザーが操作可能な拡大率の下限。デフォルトは 0.25 で指定可能範囲は [>0, 10]。

・maximum-scale
ユーザーが操作可能な拡大率の上限。デフォルトは 1.6 で指定可能範囲は [>0, 10]。

・user-scalable
ユーザーが拡大縮小(ピンチイン/ピンチアウト)できるかどうかをyesかnoで設定。デフォルトはyes。数値指定も可能。その場合yesが1、noが0。

参考:Travellers Tales : iPhone 用 Web ページおよびアプリケーションの作り方 - iPhone Development Guidelines を読む



つまり、今回のviewport指定では、
<meta name="viewport" content="width=device-width; initial-scale=1.0; maximum-scale=1.0; user-scalable=0;">
width=device-width; initial-scale=1.0;
ページの横幅を、ユーザーが使用しているスマートフォン画面の横幅と等倍になるようにし、

maximum-scale=1.0; user-scalable=0;
ユーザー操作による拡大縮小を禁止している。



今回作成したページでは、端末の画面幅に合わせて、画像を最適なサイズへリサイズする必要があった。

端末を回転させる前にユーザーがページを拡大させていたとする。端末を回転させると、回転させる前のズームレベルを継承しつつ、回転後の画面幅に合わせようとして、思ったとおりの画像サイズへリサイズされない。

よって、

maximum-scale=1.0; user-scalable=0;

の指定が必要だった。

参考:meta viewportがよくわからん - Takazudo hamalog


さらに、画像をリサイズする拡大縮小率は、端末のdpiを考慮しないと、正確な拡大縮小率にはならない。

例えば、端末のdpiを考慮しないと、docomo Galaxy TAB(SC-01C)縦では、ブラウザ幅は400pxとなる。Galaxy TABのdpiレベル 1.5 を考慮しないと、正確な解像度である幅600pxとはならないのだ。

dpiレベルを指定する属性を含めると、viewportは以下のようなタグになる。
<meta name="viewport" content="target-densitydpi=device-dpi, width=device-width; initial-scale=1.0; maximum-scale=1.0; user-scalable=0;">
参考:Targeting Screens from Web Apps | Android Developers


しかし、ここで問題が。

スマートフォン向けのAdSense広告をページ内に表示していると、dpiに合わせて広告が小さく表示され、アピール度に欠けてしまうのだ。

よって、target-densitydpiは指定せず、拡大縮小率を数値で表示させるのもやめることとした。

スマートフォンのユーザーエージェントを調べる時に参考になるサイトのリスト(2011年7月)

スマートフォンからのアクセスを判断するために各機種のユーザーエージェントを調査。その際、参考になったサイトをピックアップ。

1. スマートフォンのユーザエージェントを纏めてみたよ « 色々やってみてはみる

2010年10月までの端末だったら、ドコモ、au、ソフトバンクの全てのAndroid端末と、iPhoneのUAが網羅されている。BlackberryとWindowsMobile端末、iPad、iPodは掲載無し。


2. iPhone,iPad,iPodのユーザーエージェント一覧 | 自由が丘で働くWeb屋のブログ

iPad、iPodのUAがまとめられている。


3. Javaアプリ開発(日本語情報)|BlackBerry® 開発者様用技術情報|NTTドコモ

ドコモのBlackberry端末のUA一覧。


4. FAQ|Windows Mobile®向けアプリケーション開発者様用技術情報|NTTドコモ

ドコモのWindowsMobile端末のUA一覧。


以下は、上記サイトに網羅されていても情報ソースとして有益なサイト。

5. FAQ|Android™向けアプリケーション開発者様用技術情報 | NTTドコモ

ドコモのAndroid端末のUA一覧がまとめられている。


6. 端末情報検索画面

ソフトバンクのAndroid端末のUAを検索して調べることが出来る。


au自身が運営しているAndroid端末向け技術サイトは見当たらず。う~む。auは「Android au」がキャッチコピーではなかったっけ?

2010年12月8日水曜日

Google eBookstoreで無料ePubをダウンロードしてGalaxy Tabで読んでみる

Google eBookstoreがオープン。

残念ながら書籍を購入できるのはUSオンリーで、日本からは無料のお試し書籍を閲覧することしかできないが、現時点で300万もの書籍データが用意されている。
Discover more than 3 million Google eBooks from your choice of booksellers and devices - Official Google Mobile Blog

Google Booksプロジェクトそのものは、2004年から書籍データのデータベース化などを始めたようだが、ようやくストアのオープンに至ったようだ。Googleはいくつものプロジェクトを矢継ぎ早にリリースしているイメージがあるが、その裏では、研究や準備を何年も続けているものもあるのだろう。


GoogleのeBookstoreの特徴は、一冊の本を、PC、iPad、iPhone、iPod Touch、Android OS端末など、複数のデバイスで閲覧できることだろう。

Androidアプリをダウンロードしようとしたが、日本国内からAndroid Marketでダウンロードしようとすると、残念ながらアプリが見つからないというエラーが表示され、アプリのダウンロードはできないようだ。

しかし、無料のお試し書籍にePubデータがあるので、このePubデータをダウンロードしてGalaxy Tabで読んでみた。使用したのは、デフォルトでインストールされていたアプリ「ブック(eBook)」。

ePubデータをインポートして開いてみたところ。

フリップでページをめくり、単語の長押しで辞書検索や、WikipediaやGoogle検索、ハイライト表示、コピーなどができる。


出版社だけでなく、もし個人レベルでもGoogleのeBookstoreで書籍販売ができるようになれば、今後面白いことになりそうだ。

2010年12月4日土曜日

Galaxy TabでBloggerへの記事投稿はPC並に便利にできるのか?

Galaxy Tab標準搭載のブラウザを使って、Bloggerへの投稿がPCと変わらない程度で出来るか試してみた。

結論としては、記事を作成することはできるが、文字入力があまり便利ではないので、Galaxy Tabのブラウザを使ってBloggerの記事を積極的に書こうとは思えない、という感じ。

どう便利でないかというと、文字を入力しようとすると、文字を入力している箇所でなく、テキストボックス下部に強制的にフォーカスが移動してしまうので、入力している文章を見るために、わざわざテキストボックス上部へ移動しないといけないのだ。

ある程度文章を入力した後だったらフォーカスが下へ移動してもいいのだが、書き出し始めはとても不便だ。


文字を入力しようとすると、

テキストボックス下部へフォーカスが移動して、入力中の文字が見えなくなる。


しかし、ここ数日、Galaxy Tabをゲットしてヘビーに使ってみているが、画面が大きいのに動作が速く、非常に重宝している。iPadだとケースを付けると重すぎて長時間使うには腕が疲れて嫌になってしまったが、Galaxy Tabだと軽くて腕が疲れず、長時間使っていられる。

リッチなFlexアプリケーションも利用できるし、Flash再生も問題ない。JavaScriptプログラムを含んだPCサイトも問題なく表示、動作可能だ。

現状、PCでやっていたことは、開発以外は、ほとんどTabで出来ている。


ソフトバンクがiPadのキャンペーンを始めたこともあり、巷ではiPad熱が再燃するかもしれないし、TechCrunchではiPadの方がGalaxy Tabより愛されるとも書かれているが、私は断然Tab派です(*^_^*)。

2010年11月15日月曜日

iTouch Glovesは素手と同じ操作感

picnic inc.から販売されている「iTouch Gloves」を買ってみました。
iTouch Glovesアイタッチグローブ -スマートフォンなどのタッチパネル式携帯で使える手袋-

ちなみに、iTouch GlovesでiPad上のGoogle Mapsを操作しているところを、ビデオで撮ってみました。



素手と同じ感覚で操作できます。

そして当然ですが、温かい(^^)。

手触りは普通に手袋で、思ったより柔らかかったです。

難点を強いてあげるとすれば、タイピングの時にローマ字入力を選択していると、素手で操作している時よりもミスタイプが増えるかなという点と、既に少しほつれが出てきたという点でしょうか(^^;)。
言うても、1,890円ですからね。


しかし、既にこういうものも・・・。
着けたままiPhoneを使えるおしゃれな手袋「EVOLG」 - Touch Lab - タッチ ラボ




こちらの方がカラフルでカワイイかも・・・。

でも、プライベートではいいけれど、ビジネスでははめていけないじゃないと思って、自分を納得させました(^^;)。

マップ上データのビジュアル表現で参考になるサイト

マップ上にデータをマッピングする時のビジュアル表現として、参考になるサイトやアプリケーションを幾つかリストアップ。


1. The Open PV Project

The Open PV Project - Time Map
全米各地の太陽光発電システムの導入を、ヒートマップのようにプロットしている。Google Map API+Flashを使用。


2. A World Of Tweets

a world of tweets
Twitter Streaming APIとYahoo! Placemaker APIを使ってツイートの密度をヒートマップや煙のような雲で表示している。HTML5のCanvasを使用。


3. Magic Fiddle, Glee, Magic Piano, Ocarina by Smule

Smuleが作っているiPhoneやiPadアプリでの地図上のデータ表現は、どれも直感的で美しく、参考になる。

Magic Fiddle by Smule - Experience Social Music

Glee by Smule - Experience Social Music

Magic Piano by Smule - Experience Social Music

Ocarina by Smule - Experience Social Music

2010年1月30日土曜日

iPadお披露目プレゼンでジョブズのプレゼンに唸る

先日、Appleが行ったiPadの発表イベント。
Apple - QuickTime - Apple Special Event January 2010

1時間半ほどの長い動画だが最後まで飽きずに見ることができた。

なにより、スティーブ・ジョブズが以前より元気そうで安心した。
しかし、彼はプレゼンがうまい。見る度にいつも感心する。

話と映像をあわせるタイミングなど、事前にかなり練習しているようだが、情報が気持ちよく頭に入っていく。言葉が多すぎず、程よい間があり、平易な言葉を選ぶ。でもキーワードは何度も繰り返して記憶に残そうとする。大変参考になる。上達するには上手な人を見るに限る。

以下、iPadの発表イベントで印象に残ったもの。

00:17:16
・フォトアルバムの表現が素晴らしい
フォトアルバムの初期状態は、無造作に写真が集まっている状態。集まりの一つ一つがアルバムになっている。選んだアルバムをピンチアウトすると、ザザッとiPadの画面いっぱいにアルバム内の写真が広がる。その状態で再びピンチインすると、また無造作に写真が集まった状態に戻る。これは実際に操作すると気持ちが良さそうだ。操作している時の快感を大事にするAppleらしい作り。

00:22:30
・iPadでストリートビューを表示させると迫力がありそうだ
マップを操作している時にストリートビュー表示にスイッチできるのだが、iPadの大きな画面で実際にストリートビューを表示させてみると、iPhoneの何倍もの迫力がありそうだ。今みている景色がiPadの中でリアルタイムにエミュレーションされているような、不思議な感覚になるのではないか。

00:31:00
・アプリはシングルピクセルかダブルピクセルか表示を選べる
App StoreでダウンロードしたアプリはiPhoneサイズなので、iPad側でオリジナルサイズか2倍に拡大したサイズか「1x」「2x」ボタンで選べるようだ。レースゲームをiPadでデモしていたが、迫力はiPhoneの比ではない。テレビを膝の上に置いてプレイしているようだった。

01:05:00
・iWorksのテキスト折り込みのヌルヌル感がすごい
画像を挿入したときのテキストの送り込みで、画像をドラッグするとリアルタイムに文字の位置がヌルヌル~っと変わるのだ。デモでは、首から上のキリンの画像が使われていたが、機能を伝えるのに、その選択もとても効果的だった。この方面は従来、DTPと言えばAdobeと言われたように、Adobeが得意としていた分野だが、Appleはその領域でも技術的に秀でてしまったようだ。

01:30:55
・Our most advanced technology in a magical & revolutionary device at an unbelievable price.
最後に、ジョブス氏が強調して繰り返し語っていた言葉。3つのポイントが含まれている。

最新鋭の技術で、
魔法みたいでビックリする、革新的なデバイスで、
驚きの価格

を実現する。
どれも外せない。大事なポイントだと。

この内容を見れば納得です。

2010年1月28日木曜日

アップルのタブレット型モデルiPadではiPhone用アプリもできる

アップルのタブレットPC「iPad」が発表された。
アップル、タブレット型モデル『iPad』を発表〜3月下旬発売・$499から - iPhone・iPod touch ラボ

商品名は「iPad」か?、いや「iSlate」か?と騒がれていたが、結局「iPad」にしたらしい。

個人的には、発音もスペルもiPodとかなり似ているから、「iSlate」(slate=石版の意味)の方が間違われないし、ステキなんじゃないかと思っていたんだけど・・・。

Apple - iPad - Features - The best device for web, email & photos.
アップルのiPadサイトを見てみたら、ビデオがとても刺激的だった。ジョブズは常に「説得するのではなくインスパイアする」ことを意識しているらしいが、このビデオにはかなりインスパイアされた。

発表前は、どうせ大きいiPhoneでしょ、って思っていたのだが、大きいiPhoneでもそれを実際に体験できた時の感覚はとてもスゴそうだ。

まず、薄くて軽い。
フルブラウザのブラウジングも、iPhoneの操作と同じようにスムーズにできる。でも、キーの幅が広くてiPhoneより格段にタイピングはしやすそう。

そして、フォトビューがスゴイ。
この大きい画面でフリップしながら写真を見たり、置いておいてスライドショー表示したりできると、デジタルフォトフレームはもはや要らなくなるかもしれない。

しかもメールもできるし、iPodで音楽も聞ける。iPhoneでもiPadでもiTunesで音楽管理できるので、楽曲データが同期できるのもいい。

YouTubeも見られる。この大きな画面でビデオが見られると迫力が違うんじゃないか。是非iPadでTahnyaのビデオを見てみたい。

地図も見られるし、ノートも取れる。私が学生でiPadを持っていたら、ノートはiPadでとるんじゃないか。

注目を集めていた電子書籍。価格は$9.99(1,200円)らしい。防水対応だったら、iPadをお風呂に持ち込んで、ゆっくり半身浴でもしながら本が読めるのになぁと思う。日本では防水対応携帯も多いのでそういった発想になり易いが、アメリカではどうなのだろう。


そして個人的に予想外だったのはApp Storeで購入したiPhone用のアプリも動作することだ。これには驚いた!これまでiPhone用のアプリで使っていたものはツール系が殆どでゲームにはあまり興味がなかったが、この画面サイズだとゲームをする気が起きるかも。アプリを作る際も、iPadでの利用シーンを考えてアイデアが出せそうだ。

今年はAndroidが注目を集めそうなので、アップルは何をしてくるのだろうと思っていたが、iPhone用アプリが利用できるiPadを出して、アプリが動作する環境を拡げることで、アップルのプレゼンスを高めたのではないだろうか。


iPadを買ったら、ベッドルームでもリビングでもトコトコ持ち運んで手離せなくなりそう。
早く日本でも出ないかな。
日本でリリースされるとしたら、やっぱりソフトバンクから出るのかな?
多分、孫さんもiPad、気に入るんじゃないかな(^^)。