初出：2008年6月20日 12:51
7/11に入手できるかどうかも怪しいってのに、身の回りを着々とiPhone仕様にしていってます。とは言っても、携帯の有料サイトを解約したくらいか…。いやいや、それだけじゃ手落ちだ。今、携帯で何をやっているかを洗い出し、ひとつひとつiPhone仕様へ移行していかなくてはならない。そこで着手したのが、携帯サイトのiPhone化計画です。
そうは言っても、Googleにせよ、YouTubeにせよ、ほぼほぼ既にiPhone化されちゃっているんですよね。自力でやるのはどれだろう…と思ったときに、真っ先に思いついたのがp2、Webサーバで動かす2ちゃんブラウザです。Mac用の2ちゃんブラウザも出来の良いのが何種類かありますが、p2のようなサーバ／クライアント型だと、履歴やらお気に入り、ログなどのデータがサーバに溜まるので、どのマシンや携帯で見ても常に同じ状態が保持されるんですね。これはなかなか便利。
Safariでアクセスすればいいんだから、本来はiPhone用なんて何も考えること無いんです。でもだ、PC用のp2インターフェイスって、今時なのにframeタグで区切った3ペイン構造。iPhoneの小さな画面で操作するのは相当ツライ。そこで携帯用のページにアクセスしたんですが、こちらは完全なテキストベースなので「前」「次」などナビゲーション系の文字が押しづらい。あと、一行が長い書き込みだと、iPhoneで横スクロールさせるか、縮小して小さな文字を読まなきゃいけない。なんとも面倒くさい。
そこで、p2のテンプレートを改造して、iPhoneでバシっと見られるレイアウトに修正しましたよ。ポイントは以下のような感じ
- 横スクロールが一切発生しない
- ページ操作系は、指でタッチしやすいようにする
- iPhone本体を横回転させたら、文字の大きさはそのまま、横長レイアウトになる
PHPのスクリプトをゴリゴリいじれば、もっと凄いことができるんでしょうけど、p2がバージョンアップしたときがイチイチ大変なのでCSSでの変更のみにしました。で、出来たのがこれ。
まあまあ、良い感じでしょう？ 使ってみると、さらに良い感じ。携帯電話と同じ情報を表示するものなのに、携帯よりも視認性が高く、操作もスムーズ。やはりiPhoneは素晴らしい。
以下、既存のページをiPhone化する際の備忘録です。
- いじるのは「index_print_k.inc.php」「sb_header_k.inc.php」「read_header_k.inc.php」
- iPhone化したいページのヘッダー部分に以下のコードを記述
<meta name="viewport" content="minimum-scale=1.0, width=device-width, maximum-scale=1.0">
<link media="only screen and (max-device-width: 480px)" href="style/read_iphone.css" type="text/css" rel="stylesheet" /> - CSSの記述で、「min-width: 300px;」「max-width: 460px;」「-webkit-text-size-adjust:none;」を定義してやる。こうすると本体を縦にしても、横にしても、バシっと収まり、テキストも拡大表示されないようになる
本日のBGM
★印があったら「これは聴いてみてほしい！」という推薦曲です。曲名をクリックするとiTunes Storeへジャンプします。
'; // loop through the songs in the array and get 4 fields that I want to see foreach ($songs as $song) { $output .= 'Recent Post
- MRS - 元春レイディオショー iPhone App 開発の記録 〜 初めてのプログラミングからApp Storeリリースまでの40日
- MRS - 元春レイディオショー iPhone Appサポート・ブログ
- iPadを初めて触りました。Umm... ここまでデバイスは自由になれるのか。
- 「ランブリン」を巡る途 #4 - Ramblin Round
- 「ランブリン」を巡る途 #3 - Ramblin on my mind
- 「ランブリン」を巡る途 #2 - Rambling Man
- 「ランブリン」を巡る途 #1 - Everyday, Rolling and Rambling
- iPodの「次」がiPhoneで、その「次」はいったいどうなるんだろう？
- 水曜どうでしょうの副音声をiPhoneやApple TVで再生するTips
- iPhoneアプリ「Top 100s by Year」がかなり楽しい
- iPhoneで60GB分の音楽にアクセスする方法
- iPhone故障！ 〜 交換までの顛末記
- iPhone、2週間使ってだんだんこなれてきました
- iPhone Tips : 日々の予定や行動をGoogleドキュメントに入れる
- iPhoneとMobileMe、プッシュのタイミング
- iPhoneで、MobileMeのエイリアスをメールアドレスとして使う方法
- iPhone 3G、第一印象＆フィールドテスト
- iPhone 3G入手までの騒乱レポ
- iPhone 3G、7/11日本発売
- iPhone、日本上陸にあたって気になるところ
Now & Then
Twitter Updates
-
OAuthRequest('https://api.twitter.com/1.1/statuses/user_timeline.json','GET',array('screen_name' =>$search_word,'count' =>'3'));
//Jsonデータをオブジェクトに変更
$oObj = json_decode($vRequest);
//var_dump(json_decode($vRequest));
//オブジェクトを展開
for($i_tweet = 0; $i_tweet < sizeof($oObj); $i_tweet++){
$screen_name = $oObj[$i_tweet] -> {'screen_name'};//ユーザーID
$profile_image_url = $oObj[$i_tweet] -> {'profile_image_url'};//プロフィール画像のURL
$text = $oObj[$i_tweet] -> {'text'};//ツイート
$date = $oObj[$i_tweet] -> {'created_at'};//時間
$tweet_time=strtotime($date);//Unixタイムスタンプ形式に変換
$now_time=time();//現在の時刻をUnixタイムスタンプで取得
$relative_time=$now_time-$tweet_time;//つぶやかれたのが何秒前か
if($relative_time<60){//ss
$displayTime = $relative_time.'秒前';
}elseif($relative_time>=60 && $relative_time<(60*60)){//mm
$displayTime = floor($relative_time/60).'分前';
}elseif($relative_time>=(60*60) && $relative_time<(60*60*24)){//hh
$displayTime = floor($relative_time/(60*60)).'時間前';
}elseif($relative_time>=(60*60*24)){//日付
$displayTime = date('n月j日',$tweet_time);
}
//表示
echo '
- ' . $text .'' . $displayTime . ' '; } ?>
