<script src="jquery.js"></script>
<script src="myscript.js"></script>
<script src="jquery-mobile.js"></script>

myscript.jsに記載の初期値設定

//初期設定オプション

$(document).bind("mobileinit", function(){
//ページ切り替えエフェクトの設定（デフォルトはpop）
      $.mobile.defaultTransition = "none";
//Ajaxの設定（デフォルトはtrue）
      $.mobile.ajaxEnabled = true;
//ページ遷移のAjaxの設定（デフォルトはtrue）
      $.mobile.ajaxLinksEnabled = true;
//formのsubmitの際のAjaxの設定（デフォルトはtrue）
      $.mobile.ajaxFormsEnabled = true;
//戻るボタンの設定（デフォルトはfalse）
      $.mobile.page.prototype.options.addBackBtn = false;
//戻るボタンのテキストの変更
      $.mobile.page.prototype.options.backBtnText = "戻る";
//閉じるボタンのテキストの変更
      $.mobile.dialog.prototype.options.closeBtnText = '閉じる';
      $.mobile.selectmenu.prototype.options.closeText= '閉じる';
//Loadingメッセージの変更
      $.mobile.loadingMessage = "しばらくお待ちください";
//Loadingエラーメッセージの変更
      $.mobile.pageLoadErrorMessage = "読み込みに失敗しました";
//リストのSearch filteringメッセージの変更
      $.mobile.listview.prototype.options.filterPlaceholder = "キーワードで絞り込む";
});

上記の他にも色々設定可能な値がありますが、とりあえずこの辺りは変えたいなと思う箇所を抜粋しています。
詳しくは初期値設定 - jQuery Mobile 1.0b1 日本語リファレンスをご参照ください。

当ブログをデモとしてスマートフォンサイト化しました。

/* devicePixelRatio=1（iPhone3～3GS）とdevicePixelRatio未対応ブラウザ */

.className {
     width: 100px;
     height: 100px;
     background: url(image@1x.png); /* 等倍サイズの画像 */
}

/* devicePixelRatio=1.5 （Android系に多い）*/
@media only screen and (-webkit-min-device-pixel-ratio: 1.5),
only screen and (min-device-pixel-ratio: 1.5) {

     .className {
          background: url(image@1.5x.png); /* 1.5倍サイズの画像 */
          -webkit-background-size: 100px 100px; /* WebKit */
          background-size: 100px 100px; /* WebKit以外 */
     }
}

/* devicePixelRatio=2 （iPhone4）*/
@media only screen and (-webkit-min-device-pixel-ratio: 2),
only screen and (min-device-pixel-ratio: 2) {

     .className {
          background: url(image@2x.png); /* 2倍サイズの画像 */
          -webkit-background-size: 100px 100px; /* WebKit */
          background-size: 100px 100px; /* WebKit以外 */
     }
}

• Facebook内で完結するタイプ
• ECサイトへ遷移させて決済に進むタイプ

Facebook内で完結するタイプ

こちらはFacebook内で決済完了まで完結するタイプになり、既存ECと連動できない、または連動する際に工数が多く発生するケースが多いです。
中にはiframeなどで既存システムと連携して決済完了まで進めるタイプもあります。
海外ではこのFacebook内で完結するタイプのアプリがあるようですが、国内ではまだあまり見られていません。
有償になりますが、EC-CUBEなどと連動できるソーシャルゲートウェイであれば上位プランでこのタイプに対応しています。

SocialGateWay(ソーシャルゲートウェイ)

CAGOLAB./EC-CUBE/マルチドメインカート/Googleショッピング用フィード
のデータをFacebookに組み込めるアプリ。無料版と有料版があります。
http://www.facebook.com/socialgateway?v=app_7146470109

既存ECとの連携が難しい場合は独自開発となるケースが多いです。

また、既存ECシステムと連動せず、Facebook内だけのECシステムとして使うのであれば「storelike」といった無料のアプリなどもあります。

storelike

Facebookページで使える無料のショッピングカート。
PayPalなどに対応している。
http://www.storelike.net/

FaceBook Commerce

構築型のFコマース作成アプリ。
既存ECシステムからCSVを吐き出してそれを基に構築するタイプ
http://www.facebook.com/pages/FaceBook-Commerce/106935659401827?sk=app_139555282788416

ECサイトへ遷移させて決済に進むタイプ

下記で紹介するASPのFコマースアプリの大部分がこのタイプとなります。
商品情報のみをFacebookアプリ内に表示させて、商品購入ステップは既存ECに遷移するタイプになります。
ASPタイプのものであれば、多くのアプリが無料で使用できます。

ASPタイプのFコマースアプリ

fshopping（エフショッピング）

無料のYahooショッピングのデータをFacebookに組み込めるアプリ。
http://www.facebook.com/fshops

おちゃのこネット

おちゃのこネットのデータをFacebookに組み込めるアプリ。
http://apps.facebook.com/ocnkshop/

カラミーショップ

カラミーショップのデータをFacebookに組み込めるアプリ。
http://apps.facebook.com/cmsp_app/

Carrito（カリット）ECプラグインシステム

Saas形式のECシステム。MTのプラグインとしても使える。
https://www.facebook.com/carrito.jp?sk=app_194609953900455&gclid=CPn2krjl-KkCFYRDpAodgEeKYg

PRECS f-commerce

ASPタイプのECシステムであるPRECS(プレックス)のFacebookアプリ。
http://apps.facebook.com/precsapp/

他にも色々ありそうですが、とりあえず現時点で調べた結果のものを掲載しています。
国内EC市場で過半数を占める楽天などのFacebookアプリもあれば便利ですよね。

パーミッションマーケティング

ユーザーの許可を得て行うマーケティング活動。 Facebookの場合、「いいね！」を押してもらう事でユーザーの許可を得て、より信頼や安心感を得られた状態でのコミュニケーションを行う事ができます。ですので、通常の一方的なメッセージを投げかけるマス的なマーケティングメソッドをそのまま行うとうまく機能しないこともあります。

エンゲージメント

ユーザーと企業との関係性の深さ度合。人間関係のようなものだと解釈しています。 Facebookの場合、コメントのやりとりや「いいね！」を押してもらうというアクションによってその関係性を構築できる。 人間関係でも挨拶したり、会話したりと何かのアクションを起こさないとなかなか人間関係が深まらないですからね。

ソーシャルメディアマーケティングで大切な5つの事

耳を傾ける

ユーザーの投稿や写真などを積極的に見る

話をする

ユーザーの投稿や写真にコメントを入れたり、メッセージのやり取りを行う

活気付ける

コンテストやイベントなどのプロモーションを行うことでユーザー同士の活動を活性化させる

支援する

ユーザーが知りたいと思うような有意義な情報を積極的に提供する

統合する

ユーザーの意見やアイデアを取り入れ、新しいものを生み出す活動がエンゲージを高める秘訣となる

※参考文献　グランズウェル ソーシャルテクノロジーによる企業戦略

シャーリーン・リー ジョシュ・バーノフ
翔泳社
売り上げランキング: 1802

Amazon.co.jp で詳細を見る

 

運営計画を立てることが重要

上記の図のような3W1Hメソッドでの運営計画を立てる事が重要です。

運営フェーズごとのアクション

上記のようにフェーズごとに打つ手を決めることがコストダウンにつながり効果的なプロモーション活動を行う事ができる。
※図下の数字（○○人）はファン数を示しています。

ファン数やエンゲージメントを高めるには？

Facebook広告の出向

Facebook広告（スポンサー広告として表示）

広告主が出向する広告形式になります。タイトル、画像、広告文を設定することができます。各ページの右側に表示されます。

• サムネイル画像：110×80（横×縦　単位:pix）程度が良いとされている
• タイトル：14文字
• 本文：135文字

スポンサー記事

自分の友達がとある企業や団体との間にFacebookを介したやり取りが発生した場合に発生する広告。各ページの右側に表示されます。表示される記事の種類は、Facebookページの「いいね！」、アプリのやり取り、スポットへのチェックイン、Facebookページの投稿などがあった場合になります。
記事のタイプ

• Facebookページのいいね！に関する記事
• Facebookページの投稿に関する記事
• Facebookページの投稿へのいいね！に関する記事

エッジランクを高める

友達のウォールの表示形式にはハイライトと最新情報という2つの形式があり、デフォルトではハイライトになっています。 ハイライトというのはFacebookが独自のエッジランクというスコアのアルゴリズムによって掲載の有無や順位が設定されています。 すなわち、「いいね！」を押してもうだけでは、エッジランクが低い場合、ウォールに表示されないという事もありうるのです。

エッジランクの仕組み

エッジランクを算出するアルゴリズムには大きく3つの仕組みがあります。

1.affinity score（アフィニティスコア, 親密度）

その記事を見る人と作者とのあいだの親密度。あるフレンドに大量のFacebookメッセージを送ったり、その人のプロフィールをしょっちゅう見たりしていたら、その人との親密度は、たとえばここ数年話をしたこともない旧知の人よりも高い。

2.weight（ウェイト）

エッジのタイプ別に与えられる重み。たとえば、コメントはLikeよりも重要など。

3.time（タイム）

エッジの古い新しいを表す経過時間。古いエッジほど重要性が低いと見なされる。

参考：Facebook News Feedの記事を選ぶEdgeRankアルゴリズム F8で相当詳しく説明

インサイトの活用

• Facebookページ全体の訪問してくれたユーザー数、コメント、「いいね！」の数などを解析できる
• 投稿ごとのコメント、「いいね！」の数などを解析できる

上記のインサイトのデータを参考にコンテンツ作りを行うと効果的です。
例えば、投稿ごとコメント数やいいね！の数を一覧形式で見ることができるので、「いいね！」やコメント数の高い記事を参考にしてコンテンツを提供していくという手がエンゲージメントやエッジランクを高めるために効果的になります。
また閲覧数の急激な増加などが発生した際もインサイトで確認することができるので、どこからのトラフィックなのかがわかります。
どこからのトラフィックかを判明できれば、訪問元の対策や類似の入り口を増やすなど色々な対策を打つこともできるでしょう。

またカスタムタブなどのページであれば、GoogleAnalyticsなどの解析タグも計測可能なので、検索エンジンや外部サイトなどからの外部のトラフィックの解析も行うことが可能です。

以前書いた記事Facebookページ作成についての覚書にてJavascriptSDKを使ってiframeのページの高さを調整してスクロールバーを消すやり方のページの方法をご紹介しましたが、コンテンツの内容が変わるたびに高さの設定をしないといけないので、ページの高さを自動で取得して代入するやり方を考えてみました。

アプリ作成時にiFrameサイズの設定をAuto-resizeにチェックします。読み込ますFacebookページに下記JSをheadに外部読み込みします。

<script type="text/javascript" src="http://connect.facebook.net/en_US/all.js"></script>

bodyタグの直後に下記タグとJSを記入

<div id="fb-root"></div>
<script type="text/javascript">
FB.init({
		appId : 'アプリケーションID',
		status : true, // check login status
		cookie : true, // enable cookies
		xfbml : true, // parse XFBML
		logging : true
});
FB.Canvas.setAutoResize();
</script>

jQueryを利用する方法

jQueryの.height();を利用するので、head内でjQueryを読み込んでおいてください。

<script type="text/javascript" src="jquery.js"></script>

iframe版 Facebookページのスクロールバーを消す方法で記載されている以下のコード部分を

<div id="fb-root"></div>
<script>
  FB.Canvas.setSize({ width: 520, height: 800 });
</script>

以下のコードに書き換えれば完了です。

<div id="fb-root"></div>
<script>
$(window).load(function(){
var pageHeight = $(document).height();
FB.Canvas.setSize({ width: 520, height: pageHeight });
});
</script>

まず最初にスマートフォン向けサイトを作成する際に気になる点は画像の扱いだったりすると思います。

横幅ですが、解像度は機種によって様々ですが、縦向きで320px～640px、横向きで480px～960pxが主流となります。

標準となるものを設けるとなると、320px(横)/480px（縦）を標準として良いかなと思います。
※iPhone4、4Sは640px/960pxの解像度ですが、内部解像度で320px/480pxと解釈してくれるため。

ですので、クライアントに見せるデザインカンプなどを作成する際も縦を標準とする際は320px（横）で作成すれば問題ないといえますが、iPhone4、4SやAndroid端末といった解像度でも綺麗に画像を表示させるように対応するとなると640px(横)で作成するほうが後々の画像切り出しの際に困らないので良いかと思います。

また解像度だけではなく、横向きにも対応しようとするのであれば、極力CSS3の角丸やグラデーション、ドロップシャドウなどを利用したリキッドレイアウトのデザインにするのがベターといえます。

横幅一杯を使うメイン画像などはwidthを100％に指定するか、PNGをうまく使って背景をリピート画像で用意しておくなどのテクニックが有効になります。

フォントサイズやボタンサイズなどを設計する際は一度AppleのiOS Human Interface Guidelinesに目を通して置くことをオススメします。
リンク元サイトは英語ですが、日本語に翻訳されたPDFファイル（【PDF】iOSヒューマンインターフェイスガイドラ イン）があります。

Apple公式のユーザビリティに関するガイドラインなので実験結果に基づいた信頼性の高い情報です。

たとえば、指先で行うクリック領域において

「ユーザ体験ガイドライン」の「ターゲットを指先サイズにするの項目」より
アプリケーション内のタップ可能な要素には、約44 x 44ポイントのターゲット領域を割り当てる

44ポイントは最低必要だよといった具体的な指標なども記載されています。

スマートフォン独自の仕様について

スマートフォンでの可視領域やズームなどの設定をするmeta要素がviewportです。

viewportの各プロパティ

width(幅)

可視領域の幅。デフォルト値は980px。
200pxから10000pxまでの範囲を指定できる。

height（高さ）

高さ。デフォルト値はwidthの値とデバイスのアスペクト比から算出される。
233pxから10000pxまでの範囲を指定できる。

initial-scale（ズームの詳細設定）

ページが可視領域内にフィットするように計算された値がデフォルト値となる。
minimum-scaleからmaximum-scaleによって定義された範囲の値が指定できる。
最初にページが表示されるviewportの値のみが指定可能。
user-scalableにnoを指定していなければズーム操作が可能になる。
ズームの範囲はminimum-scaleとmaximum-scaleの範囲内に制限される。

minimum-scale（最小縮小比率）

viewportの最小scale値。
デフォルト値は0.25。
0から10.0までの範囲を指定できる。

maximum-scale（最小拡大比率）

viewportの最大scale値。
デフォルト値は1.6。
0から10.0までの範囲を指定できる。

user-scalable（ズームの有無設定）

ユーザーがズーム操作できるかどうかをyesとnoで指定する。
デフォルト値はyes。
noを指定するとテキスト入力フィールド内でのスクロールも制限される。

viewport指定の一例

<meta name="viewport" content="[プロパティ]=[値], [プロパティ]=[値], [プロパティ]=[値]">

幅はデバイスに準拠、ズームはさせないという設定であれば下記のように記述する。

<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1, maximum-scale=1">

iPhone、Androidでのバグや仕様などの情報

スマートフォンサイトを作成する際にかならずつまづくであろうiPhoneやAndroid特有のバグや仕様などの情報をまとめてみました。

iPhone特有のバグや仕様のまとめページ
つまづきがちなiPhoneコーディングのTips（JS多め）

Android多めのバグや仕様のまとめページ
スマｰﾄフォン(iPhone, Android)のバグまとめ

Androidブラウザではviewportのwidthに数値が指定できない
Androidブラウザでviewportのwidth指定［to-r］

横幅のはみ出し対策
スマホサイトの作り方で、あんまり書かれてないことを書いてみた
Androidにおけるコンテンツフィットと「overflow:hidden」

解像度や画像表示比率について

携帯サイトでVGAとQVGAでディスプレイの解像度が違うので画像サイズを比率の数値で出力を制御するツールなどがありますが、iPhone3G-3GS1（480×320ドット）とiPhone4（960×640ドット）では4倍の解像度の違いがあります。
また、Android端末も機種によって解像度は異なります。iPhoneやAndroidのWebKit系のブラウザはdevicePixelRatioというプロパティが定義されています。
この要素の値によって画像の1pxが何pxで表示されるかを知る事ができます。
CSSでdevicePixelRatioの値によって書き分ける方法は当ブログのスマートフォンで解像度ごとに最適な画像サイズにするdevicePixelRatioの設定でご紹介しています。

また、Android端末のdevicePixelRatioの一覧もまとめられています。
Android端末のdevicePixelRatio［to-r］

iPhone向けSafariでのみ有効な各種設定

全画面表示（yes）
デフォルトは「no」になっています。

<meta name="apple-mobile-web-app-capable" content="yes" />

ステータスバーのカラー設定（default / black /black-translucent）

<meta name="apple-mobile-web-app-status-bar-style" content="black-translucent">

電話番号、メールアドレスのリンクの自動検出設定（telephone=no）
自動検出はデフォルトで「on」の状態。telephone=noで「off」に設定できます。

<meta name="format-detection" content="telephone=no" />

ホーム画面に表示されるアイコンの指定

<link rel="apple-touch-icon" href="icon.png" />

スマートフォンサイトのベーステンプレート設計

• HTML＆CSS
  HTML5/CSS3が使用可能です。
  レイアウトは縦表示、横表示に対応出来るようにリキッドレイアウトで行うのがベターです。
• Javascripｔ
  実行速度は10秒まで。それ以降の処理は無効化されるとの事なので、JSの処理速度は重要になってきます。

HTML

<!DOCTYPE HTML>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1, maximum-scale=1">
<title>タイトル</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<header>
  <h1></h1>
</header>
<article>
  <section>
    <h2></h2>
    <p></p>
  </section>
</article>
<nav>
  <ul>
    <li><a href="#"></a></li>
    <li><a href="#"></a></li>
    <li><a href="#"></a></li>
  </ul>
</nav>
<footer>
  <p></p>
</footer>
</body>
</html>

リセットCSS

参考：iPhoneサイト制作（スマートフォンサイト制作）最適化のために最低限必要なreset.cssをつくってみよう

body {
    line-height:1;
    margin:0;
}

h1, h2, h3, h4, h5, h6, p {
	margin: 0;
}

article,aside,details,figcaption,figure,
footer,header,hgroup,menu,nav,section {
    display:block;
}

hr {
    display:block;
    height:1px;
    border:0;
    border-top:1px solid #cccccc;
    margin:1em 0;
    padding:0;
}

ul {
	list-style:none;
	padding:0;
}
li {
	padding:0;
}

input, select {
    vertical-align:middle;
}

a {
    display: block;
}

a {
    -webkit-tap-highlight-color:transparent;
}

ベースCSS

/* clearfix（任意で） */
*:after { display:block; clear:both; }
/* はみ出し対策 */
body { width:100%; overflow:hidden; }

/* ↓以下通常CSSを記載していく */

スマートフォンサイト作成で役立つJavascriptの紹介

jQuery mobile
スマートフォンサイト作成のためのjQueryベースのフレームワークです。
http://jquerymobile.com/
ちなみにjQuery mobileについては当ブログでも紹介しています。
http://www.u-ziq.com/blog/2010/11/jquery_mobile.html

iPhoneかAndroidかを判定してbodyにクラスを付けるjavascript
http://html-coding.co.jp/knowhow/smtp/000178/

iPhoneかAndroidで傾きに合わせてスタイルを切り替えるjavascript
http://html-coding.co.jp/knowhow/smtp/000140/

スマートフォン端末のユーザーエージェント

※2011年1月22日時点での情報を掲載。
解像度やスペックについての詳細は「スマートフォン比較表」がタイムリーにまとまっています。

PCでブラウザチェックをするためのシミュレーター

Windows

iBBDemo(iPhone&iPad)
http://labs.blackbaud.com/NetCommunity/article?artid=662

Android SDK(Android)
http://developer.android.com/sdk/index.html

Mac

iPhoneSDK(iPhone)
http://developer.apple.com/iphone/index.action

iPhony(iPhone)
http://www.marketcircle.com/iphoney/

Android SDK(Android)
http://developer.android.com/sdk/index.html