CSS3のMedia Queries（メディア クエリ）を使用して、デスクトップのブラウザ用をはじめiPhone, iPadなどのモバイル用にスタイルシートを分けるためのフレームワークを紹介します。 Hardboiled CSS3 Media Queries [ad#ad-2] スタイルシートの分け方は2種類あります。 プロパティ単位 ファイル単位 プロパティ単位でデバイスごとにスタイルシートを設定 「/* Styles */ 」の箇所にスタイルシートを記述。 スマートフォン（（縦長・横長）

SnoopyはJavaScript製のフリーウェア（ソースコードは公開されている）。iPadやiPhoneの最適化サイトを構築していて面倒なのが、HTMLソースの閲覧機能がないことだ。シミュレータですら閲覧できないのでデバッグがしづらい。ユーザエージェントを変えればPCからでも見られるが、完全に真似する訳ではない。 プロパティ 必要なのは、iPhone/iPad上でその場でHTMLソースを見る機能だ。今表示されている内容をそのままソース表示する、そんなブックマークレット型ソフトウェアがSnoopyになる。 Snoopyは自分でサーバを立てても良いし、Snoopy配布サイトにあるブックマークレットを使っても良い。いずれにしてもiPhone/iPad上で実行するとフローティングウィンドウが表示される。文字コードやHTML構成についての情報が閲覧できる。 こちらは生成されたHTMLソース そして

TVOutManagerはiPad用のフリーウェア（ソースコードは公開されている）。iPhoneアプリは便利だが、PCがあるとついそちらを使ってしまう。専用アプリの便利さはあるが、あの画面の大きさでは積極的に使っていこうという気がそがれてしまう。 iPad側の画面 その点iPadの画面サイズであれば皆で見られて便利だろう。だが外部モニタが欲しいと思うケースもあるはずだ。iPadは画面の外部出力に対応している。自作アプリで対応するにはTVOutManagerを参考にするといいだろう。 TVOutManagerは今表示されている内容を外部モニタに出力するモックアプリだ。外部モニタ出力はバックグラウンド動作は無理なようで、各アプリで実装する必要があるとのこと。iOS4または3.2がサポートされるとのことだが、iPhone自体は対応していないようだ（少なくとも筆者の3GSは）。 さらにプライベート

こんにちわ。4-ROOMSが終了なんてショック過ぎ！やしこです。 最近iPadのデザインに関わる機会がありまして、情報がまだまだ少なかったのでまとめてみました これからiPadのデザインをする方のお役に立てばうれしいです 今回はTwitterクライアントやリーダーで主流な２カラム型のアプリデザインです ePub（電子書籍）の作り方は先月のMDNで特集されていました iPadにしか見られない（WEBにない）仕様 縦横で画面構成が変わる iPadはiPhoneと同じく持ち方によって画面レイアウトが変形します。 縦横２パターンデザインする必要があります 意外とデザインをモニタの中だけで詰めていくと忘れる動きなので はじめにワイヤーに盛り込まれているか確認した方が良いと思います。 PopOver 項目の詳細を見たいときは画面遷移ではなくてPopOverとよばれる吹き出しのようなものがオーバーレイし

iPadのようなタブレット型のタッチＵＩ端末では、PCでは見られなかった特徴的なユーザ行動が見受けられます。今回は、弊社の調査で見られたiPadにおける特徴的なユーザ行動と、デザイン上のポイントについてご紹介します。 【ポイント１】 ユーザはスクロールが苦ではない 弊社のユーザ調査にて、iPadで画面が切り替わる度にスクロールしてみようと画面をドラッグするユーザがよく見受けられました。ユーザは画面をスクロールしたがる傾向があるようです。 確かにiPad上で画面をスクロールすると、指に吸い付くようにスムーズに画面が動くため、直感的で心地よい感じがします。iPad上での快適なインタラクションは、ユーザにとってポジティブなフィードバックを与え、スクロールも苦になりにくいと考えられます。 情報は極力たくさん並べよう 調査で用いたショッピング用のアプリでは、iPadの縦１画面内におさまるだけの商品し

An Illustrator Wireframing Toolkit | eleqtriq iPadやスマホのテンプレが詰まったイラレ用のワイヤーフレーム作成キット。 次のようなデザインのワイヤーフレーム作成キットが公開されています。 イラレなので拡大してもクオリティは損なわれないところがメリットですね。 iPad、スマホだけではなく通常のPC用も含まれているので幅広く使えそうです。 紙に印刷してハイクオリティな資料をサクッと作る場合に活用できるかも。 関連エントリ WEBサイトのクールなワイヤーフレームを作成する際に使えるPSD オンラインでワイヤーフレームが描画できる「HotGloo」がかなり便利

業界初のHTML5モバイルアプリ用フレームワーク Sencha Touchを使えばタッチスクリーンを装備したApple iOSや Android端末上でネイティブアプリのようなWebアプリが開発可能です。 Web標準技術に準拠 Sencha TouchはHTML5、CSS3、JavaScriptに特化した世界初のアプリケーションフレームワークです。SSencha Touchはこれらの技術が持つ力を最大限に引き出し、かつ柔軟で最適化されたアプリケーション開発を可能にします。Sencha Touchでは、音声や動画を組み込む為のコンポーネントやデータをオフラインでも利用可能にするlocalStorageプロキシーなどでHTML5の機能が利用されています。またSencha TouchのスタイルシートではCSS3を最大限活用してとても堅牢なスタイリングレイヤーを実現しています。 このライブラリはそ

はじめに Google chromeのエクステンションのページを巡回していたら、絶賛されているエクステンションがありましたので本日紹介致します。 この拡張は今現在Google chromeで見ているページをエクステンションボタンをクリックするとiPhoneやiPadそしてiPod Touchにリンクが送信され、iPhoneですぐにページを見る事ができます。 Chrome to IPhone リンクをiPhone、iPad,そしてiPod Touchに送る事ができる。 複数のPCで利用可能（Chromeインストールされたもの） 複数のiOSデバイスで利用可能 YouTubeリンクは直接YouTubeアプリが起動 Google Mapリンクは直接Google Mapアプリが起動 使い方 Chrome to iPhoneをインストール。 上記の画面が出てきます。（クリックで拡大） iPh

iPhoneやiPadにも対応した、モニター サイズに自動的に合わせて拡大表示 してくれるjQueryプラグイン、Touch- Galleryのご紹介です。Lightbox系の スクリプトは沢山ありますが、こちらも 一つの選択肢として思えておくといつか 役に立つかも、と思ってエントリー。 PCは勿論、iPhoneやiPadでも、そのモニターサイズの幅に合わせてLightbox風にフルスクリーン表示してくれます。特に設定も不要なのは楽で良い感じ。というか、iPhoneやiPad向けに作られたっぽいですね。 Touch-Gallery ↑ モニターのサイズに自動で合わせて拡大表示してくれるjQueryプラグインです。 ↑ PCで見るとこんな感じ。基本的には普通のLightbox系の拡大表示です。 ↑ iPhoneで見てもモニターサイズに合わせて拡大表示します。 ↑ 横にしても自動的に横幅に合わ

PADILICIOUS: How to Add Finger-Swipe Support to Your Webpage iPadのブラウザ上で電子書籍風のめくる操作を可能にするJavaScript。 左から右、右から左、上から下、下から上といった指でのスライドアクションをiPadのブラウザ上で検知して好きなJavaScriptコードを実行するようにできます。 これで、本当にブラウザ上で電子書籍を読むようなインタフェースを実現できます。単純なクリックよりもよりアプリ寄りのUIがブラウザ上で実現できますね。 デモページをiPadで見てみると、それぞれ指でスライドするとページの背景色が変わるはずです。 関連エントリ iPad向けのリッチなサイトが超簡単に作成できるフレームワーク「jqpad」 iPadのサイト開発、アプリ紹介等のエントリ色々 iPad用のサイト作成に覚えておくこと色々

Build an iPad-Themed Image Slider with jQuery | Design Shack これはいい！iPadテーマのjQuery画像ギャラリー。 画像ギャラリースクリプトは色々ありますが、iPadの中に映し出されたようなブラウザ上で動作する画像ギャラリーです。 デモページを見れば、細かなデザインにもAppleっぽさが取り入られているが分かります。 ちょっと変わったことをしたい場合や、iPadに関連するサイトやアプリ紹介ページなんかで使えるかもしれませんね。 関連エントリ 画像ギャラリーを作る際に使えるFlashやJavaScriptを活用したライブラリ＆サンプル集 超クール画像ギャラリーが作れるJavaScriptライブラリ どんな写真も指定サイズにまとめてギャラリーにできるjQueryプラグイン「Image Scale Carousel」 画像ギャラリー