- ランプの中身(Ruby on Railsのシステム開発)
- ランプの中身(Ruby on Railsのシステム開発)では、株式会社ケイビーエムジェイのRuby on Railsエンジニアが蓄積したノウハウを公開しています。Ruby on Railに関する技術解説や実践的なノウハウなど、開発現場の技術に則したコンテンツを随時追加していきます。 初心者の方でもわかりやすい技術解説を心がけています。リクエスト、ご質問も受け付けいますので、お気軽にコメントを記述して下さい。
< Rubyを使ってPaSoRi経由でSui... | メイン | iPhoneを確保しました >
-
- 2008.06.10
社内SNSをiPhoneで快適に見るためのCSSを書いてみた
KBMJの佐藤です。 ついにiPhoneが日本国内で発売されますね。
時間がない人のための、「WWDC 2008 基調講演」が5分でわかるハイライト
昨日はジョブズの講演に関する情報を リアルタイムで最初から最後までネットでチェックしていました。
興奮さめやらず、今日は昼食をデスクでとりながら、 社内SNS(SNS構築パッケージ「SNSエンジン」にて構築)を iPhoneのSafariに最適化する実験を行なってみました。



実験機材として使用したのはiPod touchです。

iPhoneのSafariはPCサイトも表示できるけど…
iPhoneのSafariはPCサイトも表示できるのですが、 iPhoneの画面はPCに比べて小さいこともあり、 そのまま快適に閲覧できるとは限りません。 PCのブラウザで表示した内容がそのまま縮小されて表示されるようなイメージになります。
iPhoneでは指先でリンクをクリックする必要がありますので 操作もしづらくなります。
いくつかの解決策があるのですが、 今回はiPhoneのSafari向けにCSSを作成することにしました。
iPhone向けのCSSを書く
HTMLからiPhone向けのCSSを参照するには、以下のようにします。
user-scalableをnoに設定すると、2本指による拡大・縮小などができなくなります。 ここは考え方にもよるのですが、拡大・縮小の操作を無効化することによって、 上下にスクロールするだけで閲覧可能な、 見やすいiPhone向けサイトを作成することができます。
<link media="only screen and (max-device-width:480px)"
href="small-device.css" type="text/css" rel="stylesheet">
<link media="screen and (min-device-width:481px)"
href="not-small-device.css" type="text/css" rel="stylesheet">
などとすることによって、PC向けとiPhone向けでCSSを切り替えられるようです。
iPhoneらしいデザインのCSSを書く
今回はiPhoneらしいデザインのCSSを記述しました。 iPhoneの設定画面などのデザインと合わせることによって、 統一感のあるサイトを作成できます。
画像の表示
基本はiPhoneの画面幅に合わせた解像度で表示すると良いでしょう。 Safari上で画像ファイルのURLを指定して表示した場合は 2本指による拡大縮小ができます。 コンパクトデジカメなどで撮影した高解像度の画像も表示できるようです。
iPhoneに最適化したサイトのメリット
iPhoneの売りであるタッチ操作によって、非常に快適にサイトを閲覧することができるようになります。
サイト表示にかかる時間は回線状態によって変化?
iPhone 3GではHSDPAなどによる高速なデータ通信が可能になると思われますが、 無線LANにて接続した場合に比べて通信速度は遅くなることが予想されます。 よって、iPhone向けのサイトでユーザービリティを追求すると CSSによる表示切り替えだけではなく、 場合によってはHTMLや画像の情報量削減が必要かもしれません。
Safari上にて回線接続状態を取得してHTMLなどの情報量をコントロールできれば良いのですが、 この辺の細かい仕様については更なる調査が必要です。
さいごに
いかがでしたでしょうか?
今日は各地のソフトバンクショップでiPhoneの予約が殺到したと聞きます。 私もiPhone 3G 16GBを2台ほど予約確保しました。
日本国内の携帯市場でiPhoneがどれだけのシェアを押さえられるのかはまだまだ未知数ですが、 iPhoneで見やすいサイトというのは今後確実にニーズが出てくるかと思います。
次回はもう少し踏み込んだ内容で、iPhoneに関する技術記事を書きたいと思います。
RSSの購読をお忘れなく!!
TOPICS
2008/08/14
「ZD Net Builder」の連載記事です。第七回は「Rubyでどう書く?:RubyCocoa+Core Animationでお手軽アニメーション」が掲載されました。
2008/08/06
「ZD Net Builder」の連載記事です。第六回は「Rubyでどう書く?特別編:Matzからのお題」が掲載されました。
2008/07/29
「アットマーク・アイティ」にケータイWebアプリ開発、9つの注意点が掲載されました。
2008/07/11
「ZD Net Builder」の連載記事です。第五回は「Rubyでどう書く?:RubyでWord文書を作成する」が掲載されました。
ssatoの最新記事一覧
カテゴリ
全体のRoR最新ブログ一覧
- CSSハック〜モダンブラウザ(IE、Safari)編
- railsの開発用サーバを使ってみよう。
- apacheの構文チェックをしよう。
- rakeをバージョン指定して実行してみる~undefined method `last' for {}:Hash~
- partialについて
- Railsのlayoutファイルについて
- Rmagickのロード
- linux locateコマンドについて
- REXML の脆弱性
- macユーザーのための便利なエクセル(excel 2004)ショートカット集
- svnが超便利なわけ
- Rubyの例外処理
- Rubyでどう書く?:RubyCocoa+Core Animationでお手軽アニメーション
- Rubyでどう書く?特別編:Matzからのお題
- ntpをインストールする
- Rak(grepの検索結果を見やすくする方法)
- ruby on railsのActionControllerにモジュールでbefore_filterを実装する方法
- postfixのaliasでメールを転送してみよう。
- カーネルの再構築
- splitで文字列を分割してみよう。
- ウォームスタンバイの復旧手順
- nfkで文字コードを変換してみよう。
- RDBMSでトランザクション処理をしてみよう。
- apacheでhttpsからhttpsへのリダイレクト方法
- SSL更新時のエラー 改行コードの注意点 for mac
- bondingでNICを冗長化しよう。
- Net/HTTPで圧縮ファイルをダウンロードしよう。
- PostgreSQL8.3でウォームスタンバイの設定
- capistranoでmongrel,apache,rsync
- Cybozuのスケジュールをmobileme経由でiPhone 3Gに取り込む
- 今週のRuby on Rails最新情報
- Rubyでどう書く?:RubyでWord文書を作成する
- iPhoneを確保しました
- Edge Railsの最新情報
- Rubyのセキュリティ脆弱性
- mysqlでレコードの中身を一括置換する方法
- 同じappでDBを使い分ける
- Rubyでどう書く?:重複したRSSをまとめる
- TABLEに直接データを入れる便利な方法
- 社内SNSをiPhoneで快適に見るためのCSSを書いてみた
- phpmyadminをセキュアにアクセスする方法
- Rubyプログラムの組み方から、Exeファイルの作成まで
- Ruby、Railsインストール for MacOSX
- will_paginageを使ってみた
- dmgファイルの作り方
- PHP携帯電話の機種情報取得
- Rubyでどう書く?:Rubyで特定URLの画像パス一覧を表示する
- リファラでアクセス制限をしてみた。
- 奇妙な演算子
- RJSを用いて、日付プルダウンメニューを書き換える (2
- railsの実行モードの設定 RAILS_ENV
- postgresでのユーザ権限付与(psql, grant)
- ドロップダウンに簡単にオートコンプリート機能を追加する方法
- Vimの自動補完
- IE6 以前で float に指定した margin が 2 倍になる現象を解消する
- サーバ監視ソフトウェア「ganglia」を使ってみる
- 監視ツールcactiについて
- Rubyでどう書く?:RubyでPDF履歴書を作成する
- グラフを作ってみるか!?
- clearfixでfloat解除
- SELinux無効にしてみる
- Rubyのソースコードから HTML Helpを生成してみよう!
- IEでダイジェスト認証をかけるとエラーになった。
- muninのインストール 〜監視ツールって〜
- Rubyでどう書く?:連続した数列を範囲形式にまとめたい
- RJSを用いて、日付プルダウンメニューを書き換える
- Passenger (mod_rails for apache)での色んな設定値について調べてみた
- docomo の罠
- ローカルで動画変換をする方法
- MacOSにpostgreSQL 8.3をインストール
- Postgres8_3⇔8_1の性能比較してみました
- rake db:migrate すると undefined method `last' for {}:Hash と出る
- ケータイWebサイトに携わっている方へ
- MySQL最大バッファサイズの設定
- railsのand/orを使った機能
- Railsライクなフレームワーク「CakePHP」②
- エラー表示で意図しない改行を解消する−fieldWithErrors、ActionView::Base、field_error_proc
- [mysqlのベンチマーク]MyBenchの設定
- Rubyのコマンドライン引数と環境変数について(初心者向け)
- Rubyを使ってPaSoRi経由でSuicaの乗車履歴を取得し、GoogleMapsやGoogleEarthで表示する
- 簡単&便利 Capistranoのススメ (導入編)
- Rails的コメントアウト
- 使えるvalidate一覧
- せっかくなので、Thin を使って実践
- Xenを用いてCentOS上に仮想CentOSを2つインストールする
- aptanaでrailsをデバッグ実行する
- empty?とblank?の違いって?
- ローカルでコマンドを打つとアスタリスクで囲まれたエラーが出る
- rubyの便利ツールirbをカスタマイズしてみた
- 実行モード "environment"設定の基本
- JRubyを触ってみた
- mongrelとの戦い〜503エラー?mongrelが死んだってことさ…
- sshでrootログインの禁止
- database.ymlの設定方法
- Railsライクなフレームワーク「CakePHP」①
- Rails導入でRuby標準クラスへ追加される関数達(String編)
- Rubyのマニュアルを手軽に参照する方法
- railsで画像などファイルをアップロードする方法
- 遠隔地のチョロQを操縦する方法 with JavaScript, AJAX, Rails, Gainer, Webカメラ, and USTREAM.TV
- Ruby on Railsで作られたradMineのカスタマイズ1 ~インストール編~
- MacBook AirのレビューとLet's noteとの比較
- Rails プラグイン : CSS Graphsの使い方(そしてちょっとだけ改造)
- Railsの開発でscreenを使う理由
- ActiveRecordのconditionsを綺麗に書くTips2つ
- [Rails 2.0]起動時のファイルの読み込みの順番がわかった!
- RailsのActionMailer(Tmail)でドットの連続などのRFC違反している携帯メールアドレスに対応する
- スパムを消して消して、もう消しまくって こうなりました。
- Ruby on Railsでacts_as_paranoidを使い倒す
- fastladderをrailroadで図を作ってみる。
- [書評] 他言語開発経験者でも、初心者でも、本屋で「チラ見」して確認してみよう
- ヘルパーメソッド
- Ruby標準csv遅い
- Linux2.6系の脆弱性でroot権限奪ってみた
- railsで開発したダイエットサイトとそのソースコード
- fastladderを試してみました ~rails2.0~
- HeartBeatの設定
- Railsの手動インストール
- Railsで「Lost connection to MySQL server during query」に遭遇した場合の対策
- RadiantCMSのインストール(2)
- Linuxとかのbashで使えるショートカットキーをまとめた一覧
- 長い文字列をカットして表示するプログラム
- SLこまんどの設定
- Rails プラグイン : Rails Widgets >Tabnavの使い方
- Scaffoldはどこからくるの? 後編
- ローカルメールサーバーでRailsでのメール受信のテストを便利に
- HTMLエスケープ
- aptanaのインストールと使い方について
- railroadを用いたER図作成
- RailsでAmazon APIを利用する
- ちょっとしたスペルミスなどで、時間を無駄にした経験があるなら ( カラー表示で編集しやすく )
- ちょー入門、Webサーバ構築で知ってて損をしない用語(2)
- Ruby on Rails ってなになに?
- 最近!流行りの、「Ruby」 知ってますか?
- RubyGems って単語よく出てきますよね?
- CentOS5とaptanaを使ったWindows開発環境 1
- gemコマンドの紹介
- ちょー入門、Webサーバ構築で知ってて損をしない用語(1)
- RadiantCMSのインストール(1)
- RubyでActiveRecordを使わないでDBに接続する方法
- Railsのキャッシュ機能を用いて動的ページを静的ページにする方法を紹介
- Rails 2.0のセキュリティ面の変更点
- DRBDのインストール
- Rails プラグイン : ColumnCommentsの使い方
- Scaffoldはどこからくるの? 前編
- RMagickの使い方
- Ruby on Rails インストール for Windows
ssatoのアーカイブ
プロフィール
- ssato
- 佐藤伸吾(akio0911)です。2008/01からWeb業界に入りました。フィジカルコンピューティングやユビキタスコンピューティングに興味があります。





