OpenGraphProtocolとは

今回はOpenGraphProtocolについてのおはなし。

「何それ?!きいたことなーい!」という方も中にはいらっしゃるでしょうか。
書くいううちも、その一人でした‥‥なので気にしないっ!

「OpenGraphProtocol」とは、
おもにソーシャル系のサイトなどで利用される、オープンソース版のメタタグだと思えばよいでしょう。
たとえば、これを書いておくと、facebook内で誰かがとあるサイトを「いいね!」したときに、
自動的にタイムラインに表示されるリンクに、自動的にページ説明やイメージ画像を取り込んでくれるというものです。

<meta property=”og:title” content=”スマホ向けサイト”>
<meta property=”og:description” content=”スマートフォン向けポータルサイトです。”>
<meta property=”og:image” content=”http://sevenseas.moo.jp/img/icon.png”>

サイトのヘッダ部にこういう記述を付けましょうねという議論です。
ソーシャル系サイトとの連携を考えているのであれば、今後は必須なのかもしれませんねえ。

AndroidのOSバージョン

AndroidのOSバージョンについて、まとめてみましょー。

2013/2時点の最新バージョンは4.2です。
AndroidOSはバージョン別に愛称がつけられてます。
愛称はアルファベット順に甘いものが並んでます。
話が通じる人にはそっちを話したほうがわかりやすかったりもします。

以下、日本で出回ったAndroid端末のOSバージョンを並べてみますね。
バージョン 愛称 特徴
1.6 Donut Docomoの最初のころの端末は1.6でした。今じゃほとんど見かけません。
2.1 Eclair 初代のXPERIAや初代のGALAXYが2.1です。Androidが騒がれ始めたころのもの。aにはアクサンがつきます。
2.2.x FroYo FrozenYogrutの略です。2010年頃のもの。
2.3.x GingerBread GBと略す人もいます。2011年ごろに市場に急速に浸透したAndroid端末はほとんどこれでした。
3.x HoneyComb タブレット専用にカスタマイズされたOSです。GBと同時に浸透しました。
4.0.x IceCreamSandwitch ICSと略されます。ここからハンドセットとタブレットで共通のOSとなりました。GalaxyNexusが最初のICS搭載機です。
4.1,4.2 JerryBean JBと略されます。現行の最新OSです。ICSのマイナーチェンジ版です。
4.? KeyLimePie 次のOSはキーライムパイだといわれています。

1桁目のメジャーバージョンが変わると、OSも大幅に刷新されます。
マイナーバージョンの変化でも、愛称が異なるとさまざまな違いがあると思ったほうがよいでしょう。

そのほかの用語や知っておくとお得な知識など。

ハンドセット:いわゆるスマートフォンとです。5inchを超えるようなのも登場していて、タブレットとの境界があいまいになってきてます
タブレット:7inchのタブレット機には、GBが搭載されたり、HCが搭載されたりしていて、その定義はあいまいです

ブラウザについて
現在のところ、Android搭載の標準ブラウザはOSのバージョンごとに異なっています。
次のバージョンであるKeyLimePieからは、ChromeForAndroidがAndroidの標準ブラウザとなるというお話です。
そうなると、OSのバージョンとは切り離された管理がなされることになります。
ただ、まだ現状ではAndroid2.3.xを利用するユーザーが多く存在します。
となると、極力多くの端末で閲覧できるように、努力しなきゃいけないという‥‥

iPhoneと違って、Androidは自由度が高い分、バージョンによって、メーカーによっていろんな部分が異なります。
全ての端末で綺麗に見えるものを目指すのは、html5をもってしても、なかなか難しかったりします‥‥。

viewportの設定

今回はhtml5でのhead定義のひとつ「viewport」についてです。
「viewport」は、おもにモバイルデバイスでのページ表示を制御するためのものだと考えてください。

「target-dencitydpi」

「target-dencitydpi」は、デバイス上での「見た目の解像度」の制御を行います。
この「見た目の解像度」って、なかなか理解しにくい概念です。
「見た目の解像度」ってなんだろう‥‥という方のためにも、
以下にその考え方をまとめてみました。

近頃は新旧のデバイスが百花繚乱、さまざまなユーザー環境がある中で、
できる限り見た目を統一するための技なのです。

「target-dencitydpi」の設定有無が影響しています。

http://blog.webcreativepark.net/2011/01/31-121759.html

たとえば、「target-dencitydpi」の定義を省略したとします。
この時、ブラウザ上ではデフォルトである「medium-dpi」で表示されます。
これが「high-dpi」などと定義されたページを表示した後、
ブラウザバックで戻ってくると、
何も定義がないdメニュー側で表示が崩れるというお話です。

この問題はICSでのみ発生し、GB、JBでは起きないようです。
英文ですが、まさにこの問題を記述した記事を拾っておきました。

http://randomstrings.blogspot.jp/2012/10/android-ics-and-target-densitydpi.html

上記記事では対処法として、
「トップページにだけ”medium-dpi”って書いちゃいなよ」
とまとめてますが、
もし構築済みのページにこれを追記しようと考えているのであれば、
見た目の崩れが起きないかどうか、慎重に確かめたほうがよいかもしれません。

html5のhead要素

今回はhead要素に記述するべき内容についてまとめてみます。

html5では、html4のころと違って、head要素で一部のページ構成を指定することを推奨します。
これらは主に、Androidやiphoneなどの、モバイルデバイスで画面の表示を適切にするための技でもあります。
具体的には、「」「vieport」などの指定を行います。

viewportとは、デバイスの画面表示を設定するための定義です。
viewportには以下のような設定があります。
「user-scalable」
「target-dencitydpi」

それぞれの詳細な解説は次回以降に‥‥

手書きが好きな人のためのHTML5、スマートフォン向けサイト構築φ(・ω・ )メモ

Android用Webサイトの開発にあたっての覚書や、Android関連の諸々の情報をまとめてみます。

これまでHTML4でせっせとウェブサイトを構築してきたうちですが、
そろそろいい加減「HTML5」でサイトを書き直してみたいなーと考えてます。
もちろん、スマホ向けにもページを最適化なんかしちゃったり。

「HTML5」や「スマホ向け」ではいろんな情報が錯綜しています。
いったいどんな情報をもとにして進めてけばいいのか、なかなか難しいところがあります。
たとえばうちみたく、手書きでページを作成していたりなんかする場合、
「HTML5」についてはなんとなく理解はできますが、
「スマホ向け」はなかなか理解できないところがたくさんあります。

おしごとの関係でスマートフォンと「スマホ向け」サイトをたくさん触ってきたうち。
せっかくだから、自分のウェブサイトも再構築しながら、誰かの助けになるように、
構築しなおすための考える手順みたいなものをまとめられたらいいなーと思ったのでした。
あと、ウェブサイトを作ったことがない!手で書いたことないー!という方にも
ある程度知識を増やしていただけるように、ちょっとやさしめに書いていこうと思います。

Title Photo by © Noodle93 2010

構築のための環境

html4に慣れ親しんだ方がスマートフォン向けサイトを構築するにあたって、
知っておかなきゃいけないことや、
スマートフォン向けサイトの構築にまつわる様々な技術情報を掲載しています。

言い換えるならば、自分自身の備忘録・・・でもありますが。

さてと、何から書き始めましょうか。
準備しておくもの、準備しておいたほうがいいかなーと思うものを並べてみましょうか。

・PC
 ‥‥いうまでもないですよねえ。
 たぶん一番よく使われてると思われる、Windows7を念頭に置いて書いていきます。

・テキストエディタ
 使い慣れたものでいいです。うちはひでまる愛用してます。

・ブラウザ
 モダンブラウザは一通り準備しておくことをおすすめします。
 Chrome、Firefox、InternetExplorer、Safari、Operaなどです。
 ChromeはPC上でAndroidの動作をある程度再現するためにも必要です。
 Firefoxはデバッグのしやすさで一番のお気に入り。
 InternetExplorerはある程度のユーザー数がありますから、準備はしておきましょう。
 SafariはiPhoneの動作をある程度再現する意味でも用意しておきたいところ。
 Operaは余裕があればでOKかもです。
  (※ ブラウザの動作確認についてはこちらでも記述しています。)→将来追加)

・Androidエミュレーター
 いきなり何のことやらかもですが‥‥
 PC上でAndroidの画面動作などを確認するためのソフトです。
 手元にAndroidのスマートフォンがあったとしても、導入しておくことをお勧めします。

・スマートフォン
 手持ちのスマホがあればぜひ用意しておいてください。
 Android、iPhone、両方あるとなお素敵ですが‥‥