iPhoneの最近のブログ記事

2012年2月27日、日本サッカー協会とアディダス ジャパン株式会社は、日本代表のサポーターのためのスマートフォンアプリ「サッカー日本代表STADIUM」をリリースしました。

本アプリは、世界の頂点を目指すSAMURAI BLUEとなでしこジャパンを応援するサポーターが結束し一つになるために開発されました。
SAMURAI BLUE・なでしこジャパンの試合をテレビ観戦する際に、Twitter/mixi上の友達同士、サポーター同士がつながり、興奮や感動を共有することができます。

楽天トラベルのiPhoneアプリ、誕生!

| コメント(1)

楽天トラベルのiPhoneアプリ

2009年1月15日、楽天トラベルが iPhone 3G/iPod touch向けの旅行予約アプリケーション「楽天トラベルiPhoneアプリ」を公開しました。

GPS機能を利用し、現在地や目的地周辺の宿泊施設を検索・予約が可能となります。また、閲覧履歴やブックマーク機能を新たに追加し、一度検索した宿泊施設の価格やプランなどを比較して選択することができます。またiPhoneならではの、なめらかで使いやすい画面操作の特性を生かしたストレスフリーのデザインも特徴的です。これにより急な出張などで近場の施設予約をしたい時でも、簡単な操作で安心してご利用いただけます。

CSSiPhone

CSSでレイアウト・デザインされたiPhoneサイトのデザインギャラリー「CSSiPhone」が公開されています。

iPhone利用動向に関する調査結果

| コメント(1)

2008年11月19日、株式会社IMJモバイルが「iPhoneユーザーのiPhone利用動向とその評価」という調査結果を公表しました。日本国内412名からの有効回答があったそうです。

  • iPhoneユーザーの5割が、他の携帯と併用ユーザー
  • 購入理由は、刷新的な機能と充実したデザイン性
  • 音楽再生機能とネット機能に高い評価、一方でカメラ・メール・通話機能に不満
  • 大半のユーザーの期待を裏切らない評価
  • 総合評価に最も影響するのは、「機能全般」「操作性」「タッチパネル」
  • iPhoneが最も特徴的に使われるのは移動時間
  • 併用ユーザーは、「通話・メール」と「メディア再生・WEB閲覧」機能を使い分け
  • iPhoneで使っているメールアドレスは「iPhoneドメイン」
  • 雑誌・屋外メディアとの相性が良いiPhoneユーザー
  • iPhoneユーザーは、消費意欲の旺盛なインフルエンサー

iPhone GUI PSD

iPhone用サイトをデザインする際に役立ちそうなpsdファイル「iPhone GUI PSD」。
パーツごとでレイヤーに分かれており、テキストの変更もできます。

楽天トラベルのiPhone用サイト

楽天トラベル

楽天トラベルがiPhone用のサイトを開設しました。
http://travel.rakuten.co.jp/とアドレスバーに入力すると、iPhoneに最適化されたページにリダイレクトされます。

「iPhoneテンプレートfor MT」導入しました。

iPhone

cremadesignさんで公開されている「iPhoneテンプレートfor MT」を導入してみました。

iPhone表示テストのまとめページ

iPhone端末

いままでiPhone関連のエントリーを書いてきましたが、表示テストで作成したサンプルHTMLをまとめたページをアップしました。

iPhone用にCSSを適用させる

CSS3のmedia queryを使います。
たとえば、PC向けに「pc.css」、iPhone向けに「iphone.css」を適用させたいと思った場合、以下のように記述します。

iPhoneでキャプチャーをとる方法

iPhone

iPhoneでキャプチャー(スクリーンショット)をとる方法が、「iPhone・iPod touch」ラボで紹介されています。

viewportの表示を検証してみました

| コメント(3)

昨日のエントリーで、iPhone / iPod touch向けのHTML作成におけるmeta要素の「viewport」について書きました。

ただ、文字だけじゃわかりづらいので、「viewport」について簡単にHTMLを作成しました。そしてiPhone端末でキャプチャをとりましたので、それらをまとめてみました。

iPhone / iPod touch 向けのmeta要素 viewport

| トラックバック(1)

iPhone / iPod touch(以降、iPhoneと表記させていただきます)のスクリーンサイズは320x480ピクセルです(Safariのアドレスバーなどを除いた表示領域は320x356ピクセル)。
かといって、iPhone向けにHTMLを作成する場合、コンテンツの横幅(width)を320ピクセルに固定してしまうだけだと、かなり小さく表示されてしまいます。

iPhoneキャプチャ

これはiPhone用のSafariがページを表示する際に、デフォルトで縮小表示をするからです。横幅980ピクセルまで縮小されます。iPhone端末を縦向き(portlateモード)にしても、横向き(landscapeモード)にしても、横幅980ピクセルです。

しかし、この状態のままでは文字サイズが小さく、1回1回拡大しなければいけません。iPhone向けにページを作成する場合は、meta要素のname属性「viewport」で最適化することにより、iPhone向けにきれいに表示されるようになります。

プロフィール

林大輔 写真
林 大輔
旅を売るWebデザイナー / ジャム男子
楽天トラベルでWebデザイナーとして働いています。ごくたまに個人でもWebサイト作ってます。趣味ではジャムをつくる自称・ジャム男子。
著書「FireworksレッスンブックCS6対応」「ガレリアCSS

詳しいプロフィールを見る

最新のエントリー