iPhone

iPhoneStyleの登録者数が2400人を越えました。

iPhone対応の無料SNS『iPhoneStyle』は、2010年5月22日に登録者数が2400人を越えました。

これからも、世代を問わず楽しめるSNSを目指していきます。

iPhoneオーナーのためのSNS『iPhoneStyle』
http://iphone-sns.com/

iPhoneStyleの登録者数が2300人を越えました。

iPhone対応の無料SNS『iPhoneStyle』は、2010年5月11日に登録者数が2300人を越えました。

これからも、みんなに優しいSNSを目指していきます。

iPhoneオーナーのためのSNS『iPhoneStyle』
http://iphone-sns.com/

iPhone対応サイトの作り方(その3)

iPhone専用のページを用意して対応する方法

iPhoneからのアクセスの場合、iPhone用ページにリダイレクトする

■構成しているページがPHPの場合(.php)

$hua = $_SERVER[“HTTP_USER_AGENT”];

if(ereg(“iPhone”,$hua)){

header(“Location: https://digital-gate.com/i/”);

}


iPhone対応サイトの作り方(その2)

同じページでレイアウトのみを変更して対応する方法

iPhoneからのアクセスの場合、iPhone用CSSに自動的に切り替える

■構成しているページがhtmlの場合

javascriptを使ってスタイルシート(CSS)を切り替える方法

if(navigator.userAgent.indexOf(‘iPhone’) != -1){

document.write(‘<link rel=”stylesheet” type=”text/css” href=”./css/iphone.css”>’);

}else {

document.write(‘<link rel=”stylesheet” type=”text/css” href=”./css/pc.css”>’);

}

■構成しているページがPHPの場合(.php)

※ユーザーエージェントを取得

$is_iphone = strpos($_SERVER[‘HTTP_USER_AGENT’],”iPhone”);

または

$hua = $_SERVER[“HTTP_USER_AGENT”];

if(ereg(“iPhone”,$hua)){$is_iphone = 1;}

※iPhoneなら、iPhone用のスタイルシートを出力

if($is_iphone){

$css = ‘<link rel=”stylesheet” type=”text/css” href=”./css/iphone.css”/>’;

}else{

$css = ‘<link rel=”stylesheet” type=”text/css” href=”./css/pc.css” />’;

}

なお、いずれの場合も、PCでのアクセス用のコンテンツや広告等、iPhoneでは不要なものは、

その部分を

<div class=”for-pc”>PC用アフィリエイトコード等</div>

としておき、

iPhone用のスタイルシートに

.for-pc{display:none;}

としておくことで、無駄な表示を減らすことが可能。



iPhone対応サイトの作り方(その1)

同じページ、レイアウトも変更せず対応する方法

iPhoneでPC向けページを表示させた場合、デフォルトで横幅980pxを想定して表示するようになっている。

つまり、少し前に作られた横幅が750px等のサイトの場合、左右に無駄な余白ができ、さらに表示が小さくなる。

そういった場合、以下のメタタグを入れることにより、無駄な余白を無くすことが可能。

※サイトの左右が750pxの場合

<meta name=”viewport” content=”width = 750″ />

iPhoneStyleのPC版「カスタム配色」にJavascriptのカラーピッカーを追加

iPhone対応している無料SNS『iPhoneStyle』のPC版レイアウト用「カスタム配色」にカラーコード(6桁英数字)を入力するテキストボックスがありますが、それぞれのテキストボックス内でクリックすると、右側にJavascriptのカラーピッカーがポップアップして、色を確認しながら入力することができるようになりました。

左側のエリアに表示されている○と、右側のスライドエリアのバーを動かして、お好みの色を選んだら[OK]をクリックするだけ。
選んだ色のカラーコードはそれぞれのテキストボックスに入力されています。

prototype.js、scriptaculous、yahoo.color.jsを使用しています。

iPhoneStyleのフォームテキストボックスに「広」「狭」追加

iPhoneは、OS・Safariの仕様でフォームのテキストボックスで文字量が多く設定されているエリアを越える場合でもスクロールバーがつきません。

そのため、iPhoneでフォームの入力や修正時に不便です。

基本的な使い方としては、テキストフォームで文字が隠れてしまっていてる場合、フォームの中を二本指でスクロールすると、中身の文字だけスクロールさせることができますが、知らない人も多いと思います。

iPhoneで最も使いやすいSNSを目指しているiPhoneStyleでは、今回、新たにテキストフォームエリアに、「広」「狭」ボタンを追加しました。

文字量が多くて見えない時は、「広」ボタンをタップするとフォームエリアの天地が広がります。

※複数回タップするとさらに広がります。


これからもiPhoneStyleで、楽しいiPhoneライフを。