結論から言うとjavascriptでUserAgentを参照して振り分けるしかない。 linkやcss内の@mediaでどうにかなるもんだと思ってましたが。 <link rel="stylesheet" media="only screen and (max-device-width: 1024px)" href="../ipad.css" type="text/css" /> どうやら↑では”iPadオンリー”は無理です。 結局UserAgentを見るしかない。 var iPad = /iPad/.test(navigator.userAgent); if(iPad){ //iPadだけに適用させたい記述 } 長くなるので無理な理由、検証、iPadだけにcssを適用させるjsは以下に。 目次 最初に調べたエントリー linkタグのmedia属性で判別する方法 landscapeモード
久しぶりに不定期コラムです、こんばんは。 最近 「カイ士伝」 のカイさんと考えることが ダブってきていて、カイさんがいれば私は要らないんじゃ ないかと思ったりするのですが(おい)、 ■ぼくがiPadを買わない理由 - カイ士伝 http://blogging.from.tv/wp/2010/06/04/3828 iPadに「手を出していない」理由 について、 いくつかのポイントを挙げながら考察されています。 私も似たようなことをずっと考えていました。 念のため先に断り書きを入れておくと、これは「iPadがダメな理由」 といったお話では全くなくて、あくまでカイさん個人にとって 現時点でiPadがあまり必要にならない理由、というお話のことです。 その中で私も共感した部分についてピックアップしてみます。 ただ個人的にモバイルの線はないなと思っていて、発売当初の「見せびらかしたいニーズ」が終了する
1ヶ月ほどまでにiPhoneのsafariでどこまでリッチなサービスが作れるのかを試してみたくて、女の子画像ブックマークサービス「4U」のiPhone用ビューアを作ってみました。 i4U - beauty image viewer このサービス、扱っているコンテンツが最高なのは勿論なのですが、safariでリッチなインターフェースを実現するために使っているテクニックがなかなか面白い、というか苦労の結晶なのでとりあえず解説用の記事を書いておこうと思う。 iPhone用のwebサイトを作ろうとするとiui.jsとか使うのが多いみたいですが、これだとアプリっぽいインターフェースになるので、果たしてサイトとして使いやすいのかは疑問です。 iPhone 3G用のWebページを作る3 -[JavaScript]All About iui - Google Code 画像のビューアとしては次々とスライド
iPhoneに搭載されているWebブラウザ「Safari」は、WindowsやMac OS X向けのWebブラウザとほぼ同等の機能を備えている。そのため、PC向けに制作されたWebページはiPhoneでもPCで閲覧する場合とほぼ同じレイアウト・挙動で表示できる。しかし、iPhoneはPCに比べて画面サイズが小さいため、iPhone版Safariに向けた専用のレイアウト・機能を用意しておくと、iPhoneから利用した場合のユーザビリティが大幅に向上する。後編では、このような「iPhone専用ページ」の作成例を紹介する。 よりiPhoneでの閲覧に適したWebサイトを作る 一般的なPC向けWebサイトでも、本記事前編で紹介したような修正を加えるだけでiPhoneからの閲覧がしやすいWebサイトになる。しかし、これはあくまでPC向けのWebページをiPhoneでも閲覧しやすくするだけのものである
こんにちは。普段からiPhoneを愛用している橋本です。 最近、「せっかくiPhone持ってるんだし、iPhone向けのアプリ作ってみようかしら?」と思い立ったのですが、iPhoneのネイティブアプリを作るには、"Objective-C"と、"cocoa Touch"というiPhone/ipodTouch向けのフレームワークを理解する必要があり、また、自分で開発したアプリを実機に入れて動かしてみるには、そこそこの費用と各種手続きが必要だったり(iPhoneエミュレータ上で動かす分には問題ないのですが…)と、何かと大変です。 「何かもっと手軽にiPhone特有の機能を活かしたアプリを作る方法はないかなぁ。。」と考え、思い立ったのがWebアプリ。Webアプリなら、今までの知識+αでアプリを作成することが出来るのではないかと。そこで、今回から数回に渡ってiPhoneとjavascriptを使って
iPhone特有の操作としては、指で左右に弾くことで次のページ・前のページを表示できる操作があります。 前回のJavaScriptによるイベント取得と、jQueryおよび、Spry framework for Ajaxを組み合わせるとWebアプリでもこの操作が可能です。方法を紹介しましょう。 デモプログラムはこちらから まずは、iPhone用のページテンプレートを作ります。iPhone site extensionを使うと便利です(笑 <!DOCTYPE HTML> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <title>iPhoneでスライドを作るサンプル</title> <meta name="viewport" content="width=device-widt
弊社代表の著書、「iPhoneとツイッターで会社は儲かる」の出版記念と、巷で話題の「基礎文法最速マスター」ブームに便乗して、iPhone(iPod Touch)向けサイト構築における基礎とプラス応用のネタと、参考になるリンク集をまとめました。 2010/11/18追記: iPhone向けサイト制作の書籍を執筆しました! 既存のデスクトップ向けサイトをモデルにした iPhoneに最適化したサンプルサイトの紹介と コードの解説をしています。 iPhone向けサイト制作の入門書に最適です。 「HTML5+CSS3で作る 魅せるiPhoneサイト」 基礎編 対象ブラウザはMobileSafariです レンダリングエンジンはSafariと同じwebkitですが、MobileSafariの方にはiPhone向けの一部独自拡張(CSS)があります。検証の際は、通常のSafariのウィンドウサイズを狭くし
こんばんは。LatLongLabの河合(@inuro)です。 ようやくiPadが日本でも発売されましたね。入手された方もたくさんいらっしゃることかと思います。 ヤフーではこのiPad国内発売にタイミングを合わせ、Yahoo!ラボで「yubichiz」というiPad専用の地図Webアプリを公開しました。 Yahoo!ラボ - yubichiz(ゆびちず) 詳しい機能はリンク先ページを見ていただくとして、 地図に書かれた文字(大塚家具、とか紀伊國屋書店、とか)をタップするだけでその店舗の詳細情報が表示されます 地図を指でなぞるだけで、なぞったラインの距離を測定できます 同様に地図を指でなぞるだけで、道沿いのお店を検索できます といった特徴があります。 またyubichizは、App Storeからダウンロードするいわゆる「アプリ」ではなく、HTML5を用いてiPadのSafari上で動作するW
いまさら聞けないiPhone/iPadアプリの作り方の基礎:SDKで始めるiPad/iPhoneアプリ開発の勘所(1)(1/4 ページ) 初めてiPhone/iPadアプリ開発に挑戦する人が、迷わず短時間でアプリを作れるように、数多くの情報の中から要点をグっと絞った開発の勘所を紹介する入門連載です 迷わず短時間でiPhone/iPadアプリを作れるように 皆さんのお気に入りのiPhone/iPadアプリは何でしょうか。筆者は、Googleカレンダーと同期してくれるスケジュール管理アプリがお気に入りです。いまでは目的のアプリを探すのも大変なほど、日々多くのiPhone/iPadアプリが登場しています。 6月8日にはiPhone 4の発表があり、マルチタスクやモバイル広告ネットワーク、ゲーム開発など、iPhone OS改め、iOS 4で実現できる機能がたくさん追加され、さらに魅力的になりました
<link rel="stylesheet" media="only screen and (max-device-width: 1024px)" href="ipad.css" type="text/css" /> /* 好ましくない例 */ これを使うことで横幅1024px以下のデバイスでアクセスされた場合に、ipad.cssを読み込むということはできるんですが、PCの場合でもこの程度の解像度のものはありますし、なおかつ利用しているブラウザが最近のものであれば、このコードを理解してしまいます。 つまり、「iPadだけ」に適用させるということは実質できないということになります。 この点はご注意ください。 デバイスの幅に左右されないリキッドレイアウトにする 前述のユーザーエージェントの話に次いで、レイアウトの話です。 iPadのデバイスとしての画面サイズはポートレート(縦向き)であれば 横
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く