jQuery Mobile でスマートフォンサイトを作ってみた
これだけ世間が「スマートフォン」「スマートフォン」といっているとやはりスマートフォンサイトは無視できないということもあり、jQuery Mobile を使って作ってみることにしました。 今ごろスマートフォンサイトを作っているのでは遅いくらいかもしれませんけど… といってもスマートフォンを持っていないので確認ができない 🙂 もちろんブラウザーの User Agent を変えれば、おおまかな確認はできる。 iPhoney というシミュレータを使う方法もあるし、Xcode and iOS SDK の iPhone Simulator.app や Android SDK を使えば問題なく確認はできると思います。 ただ、私の環境では諸事情があり iOS SDK も Android SDK もインストールしていません。 iPhoney は手軽でいいのですけど、”It’s the perfect 32
MdN Design｜総合情報サイト
スマートフォンと違い、iPadなどのタブレットに最適化された表示を行っているサイトはまだまだ少ない。 そこで今回は、LESSON 13同様、別HTMLを用意せず、同じHTMLにJavaScriptとCSSを使用して、タブレットタイプ用に表示を最適化させる。 タブレット用にするからといって特別にHTMLの作り方を変える必要はなく、正しくマークアップできていれば基本的に問題ない。 ただ、あまりにも無駄に多い入れ子構造や、レイアウトは避けたほうがよい。あくまでも(X)HTML/CSSを意識して作ろう。 今回はタブレットにも使用されるので、HTML5やCSS3を駆使してPC用も作ってよいが、IEなどの未対応ブラウザへの対応が発生するので注意が必要だ。 【1】のような、ブログ形式のPCページ構成をベースに構築していく。 使用するCSSは ・PC用CSS（デフォルト） ・スマートフォン用CSS ・タブ
スマートフォンサイト用に、フリック・スワイプ対応が簡単に出来るjQueryプラグインいろいろ | Web活メモ帳
最近スマートフォン対応やタブレット対応の案件が増えてきて、スワイプに対応させたいと言われる事が結構多いです。 知ってる人も居るかもしれませんが、スワイプが出来るようになるjQueryプラグインをまとめてみました。 画像ギャラリー専用のものから、ページ全体をスワイプで区切るものまで色々ありますよ。 参考になれば幸いです。 jQuery Touchwipe iPhone、iPad、Android用にスワイプでスライドショーを移動できます。 スワイプした時のイベントが簡単に取得できるので、画像切替意外にも色々使えそう。 PCの場合には、アンカーテキストで画像の切替ができます。 サイズも1kB程度なので、モバイル端末に優しいですね。 PhotoSwipe jQuery Mobile対応の全画面イメージギャラリー。 写真を大きく表示させて、ツールバーで操作するタイプです。 jquery.flicks
Dreamweaver CS5.5でスマホアプリ作ってみた (1/3)
たった1年で新バージョンの登場となったDreamweaver（関連記事）。5月下旬発売の「Dreamweaver CS5.5」はCS5からのアップグレードでも1万5750円という価格設定に驚かされる。だが、ベータ版を触って価格以上に驚いたのがスマートフォン対応機能の“本気度”だ。 Dreamweaver CS5.5では、オープンソースのJavaScriptフレームワーク「jQuery Mobile」をテンプレート的に利用することで、iPhoneやAndroidに最適化されたスマートフォンサイトをわずか数ステップで作れてしまう。jQuery Mobileは、iPhone/Android/Windows Phone/BlackBerryなどで利用できるクロスプラットフォーム設計のフレームワーク。以下のようなシンプルなスマートフォンサイトなら、PhotoshopもFireworksも使わず、Dr
iPhone、Android ユーザーを虜にするかもしれないブックマークレットにまつわる２つのプロダクトをリリースしました。
こんにちは。坪内です。 最近、にわかにブックマークレットがブームのような気がしてなりません。昨日もブックマークレットがキャズムを超えた夢を見ました。 先日、AppBank さんが以下のような記事をアップされていましたが、風が吹いた！と感じました。 AppBank ：ブラウザ「Safari」の使い方。 Safariを格段に強化する「ブックマークレット」編。 機は熟しました。 フェンリルのブックマークレットプロジェクト、始動です。 さて、先日の記事で、リリースを予告した Tapmarklets が晴れてリリースされました。 iPhone、iPad、Android のブラウザで利用できるブックマークレットを紹介するサイトで、ひとつひとつのブックマークレットが登録しやすいように、紹介されているのが特徴です。「このブックマークレットを試す」というリンクを押せば、ブックマークレットを登録する前に、どう
ブラウザ「Safari」の使い方。Safariを格段に強化する「ブックマークレット」編。 | AppBank
ブックマークレットの使い方 一度作ってしまったら、あとはとても簡単です。 まず、ブックマークレットを使いたいと思ったページを開きましょう。開きましたか？ 開いたら、ブックマークレットをタップ！これでブックマークレットが機能します。 ブラウザに戻るとほら！ページが下までスクロールされています。 それでは以下に、便利なブックマークレットをどんどん紹介していきます。自由に活用下さい！（また、「このブックマークレットも追加すべきだ！というものがあれば@toshism0331までご連絡下さい！ アプリと連動するブックマークレット ＊iPhoneでコピーをする場合、テキストは右端よりも右にとび出してコピーできないという声を頂いております。その場合、次の行のテキストまでコピーして、最終行を削除するという方法でコピー下さい。（例えば、「読んでいるページをGoogle Readerに追加」のブックマークレッ
デザインと技術のフェンリル - フリーソフトでユーザーにハピネスを
フェンリルのプロダクトSleipnir タブの切り替えさえも1フリックで片付く。 最速タブのモバイルブラウザ。 東海旅客鉄道株式会社EX アプリ 新幹線の指定席予約、変更等が行える 「エクスプレス予約」「スマート EX」の公式アプリ フェンリルのプロダクトNILTO 磨き込まれたインターフェースで、 チームの理想を実現するヘッドレスCMS。 フェンリルのプロダクトBrushup イラスト・写真・動画などのレビューを効率化。 高速コミュニケーションツール。 株式会社大丸松坂屋百貨店 株式会社JFR情報センター大丸・松坂屋アプリ 全国14店舗の「大丸」「松坂屋」の 便利でお得なアプリ。 日本放送協会NHK ニュース・防災 ニュースや災害情報、防災に役立つ 情報などをいち早く届ける、NHKの公式アプリ。 九州旅客鉄道株式会社 JR九州コンサルタンツ株式会社トンネル検査支援アプリ トンネル検査の省
iPhone で 「position:fixed」をスムーズに実現する 「Scrollability」
しかし、残念ながらiOS4.Xは position:fixed; は指定できません。そこで紹介したいのが「Scrollability」です。「Scrollability」は JavaScript で要素が画面最下部へ固定できます。
レスポンシブ Web デザインのテストツール「Responsive Design Testing」
レスポンシブWebデザイン の為のツール Responsive Web Design でウェブサイトを作製するときに、複数の画面サイズを一覧で確認できなくて困った事はありませんか？ そんな時に、「Resposive Design Testing」は最適なツールです。 このツールは、スクリーンキャプチャーのURLボックスに、確認したいファイルのパスを入力すれば、横幅240px、320px、480px、768px、1024px のそれぞれのデザインを確認することができます。 ウィンドウサイズを自分で変更する必要がないのは時間を短縮することができます。 また、この「Responsive Design Testing 」はダウンロードしてローカルで利用することもできます。 まとめ 「Responsive Design Testing」のようなツールが最近では、見られるようになりました。やはり、レス
新しいスマホ版Googleにみる、スマホサイトの未来 « H2O Blog.
大げさなタイトルをつけてみましたが、先日Googleが本家のスマホ版サイトをリニューアルしました。主に「Google+」の追加が主ですが、面白いロジックが仕込まれていて、スマホサイトの未来を垣間見る気がします。いくつか紹介しましょう。 固定ツールバー これまで、スマホサイトの構築では「要素を固定できない」というのが常識でした。 CSSの「position:fixed」が効かない上に、スクロール中は一切のスクリプト操作や、アニメーションGIFですらもストップしてしまうため、要素を固定したりすることはできなかったのです。 そこで、これまでは固定したい要素は「スクロールの開始直後にいったん消え、スクロール終了後に再度表示される」というのが一般的でした。jQuery Mobileの fixed toolbarがそのつくりです。 しかし、リニューアルしたGmailでは、スクロール中も固定したツール
iPhone等での表示をPCで確認出来るAir製のシミュレーター・Mobilizerがローカルファイルにも対応出来るし、割と良かった
iPhoneや、BlackBerryなどでのWebサイトの表示をPCで確認出来るシミュレーターです。Air製で無料で使えます。まだ使い始めたばかりなんですが起動も軽く、ユーザーエージェントもそのデバイスごとに設定してくれてるみたいです。 シミュレーター（エミュレーター？よくわからｎ）はいくつかありますが、選択肢の一つとして。WinでもMacでもOKです。完璧ではないですけど、今までで一番良かった気がしました。もともと優れたシミュレーターはまだ無い気がしますしね・・・あるのかな？ｗ 動画あったので貼っておきました。iPhone4は勿論、Plam PreやBlackBerry、HTCなど4種のデバイスを同時に確認出来ます。ローカル上のHTMLも動作確認出来ますよ。Airアプリなので動作にはAdobeAirが必要です。 4つ同時に起動可能 日本なら、基本的にiPhoneとAndroidだけあれば
.htaccess だけで簡単キャリア判定してみる | バシャログ。
まだ 6 月だってのに早くも今年初あせもができちゃったよ！かいーの nakamura です。 サイトのモバイル、スマホ対応もすっかり一般的になってきた今日この頃、みなさんいつもどんな方法でキャリア判定を実装しているでしょうか。がっつりフレームワークなどを使っていればさほど難しくはありませんが、ほとんどプログラムが動いていないような静的なサイトの場合はちょっと面倒ですね。今日はそんな時に有用な .htaccess を使ったキャリア判定の方法をご紹介します。 仕様 今回、ルートディレクトリ / は PC 用サイト、/m/ 以下がモバイルサイト、/sp/ 以下がスマホサイトとして以下の仕様を元に記述方法を考えていきます。 PC で /m/, /sp/ 以下にアクセスしたら / にリダイレクト。 モバイル、スマホで PC サイトにアクセスしたらそれぞれ /m/, /sp/ にリダイレクト。 モバイ
スマートフォンサイトをデザインする上で知っておくべき10のTIPS
スマートフォンサイトをデザインする上で知っておくべき10のTIPS iPhoneやAndroidのスマートフォンの仕様を知らないけどデザインしなくちゃいけなくなったというデザイナーさんに知っておいてもらいたい10(+1)のTIPSです。 1.実機で確認する 当たり前のことですが作成したデザインを実機で確認して下さい。スマートフォンとPCでは目からの距離やDPIが違いますので、PCでは十分に見れたからといって実機で確認すると文字が小さすぎることなどがよくあります。書きだしたJPGをFTPでアップして確認してもいいですし、メールでスマートフォンに送って確認してもいいです。個人的にはDropboxで転送するのが手軽でおすすめです。 2.横幅は320pxもしくは640pxでデザインする スマートフォンでは基本横幅が320pxで表示されるのでデザインする際も320pxでデザインしましょう。ただ、Re
既存のスマートフォンARアプリと位置情報アプリを使ったキャンペーン｜Aroma of Tokyo｜Chivas18 presentes | mifdesign_antenna
ホーム > Web > 既存のスマートフォンARアプリと位置情報アプリを使ったキャンペーン｜Aroma of Tokyo｜Chivas18 presentes 新しい 古い Aroma of Tokyoはシーバスリーガル18年で作られたカクテル。 東京23 区内の18軒のバーで、それぞれのお店オリジナルのAroma of Tokyo を楽しめるキャンペーンを今日から展開。おもしろいのが、既存のスマートフォンアプリ（iPhoneアプリ/Androidアプリ）をいくつか使っている点。 ざっくりと流れを説明すると、 1.スマートフォンにARアプリ「Layar」をインストール。 2.「Layar」を立ち上げ、Layarsタブから「Aroma of tokyo」と検索。 3.「Layar」でカメラを起動し近くのBARを探す。 4.近くにバーがあればポイントが出現。ポイントがたまるランドマークも現れる
スマートフォン用ページに振り分けるときはrel=”canonical”を設定する
iPhoneやiPad、Android端末の普及でスマートフォン専用のページを用意するサイトも増えてきています。 スマートフォンからのアクセスに対して「リダイレクトによってスマートフォン専用のURLに振り分けるとき」の注意点を今日はお伝えします。 rel=”canonical”タグで、対応するデスクトップ用ページのURLを指定してください。 重複コンテンツの発生を防止するためです。 現状GoogleはデスクトップPCとスマートフォンを区別せず同等に扱います。 スマートフォン用の検索結果も用意していません。 共に、ウェブクローラのGooglebotがクローリングします。 ※従来のモバイル端末はモバイルクローラのGooglebot-Mobileがクローリングします。詳しくはこちらの記事を参照。 スマートフォン用のコンテンツはデスクトップ用のページと、完全ではないにしてもほぼ同じになるはずです。
初心者のためのスマートフォンサイトを作るときに見ておきたいサイト｜WEB Drawer -WEB制作に関するメモサイト-
スマートフォンサイトを本格的に作るようになってきたので、いろいろ基本的なことから調べてみました。 自分はコーディングがメインなので、HTML/CSS/JSが主になっています。 制作する前に仕様の確認 スマートフォンの仕様が載っています。一通り目を通すと、製作してる時に「これができない！」などの問題が回避できるかもしれません。 ASCII.jp：サイト制作の前に知りたいiPhone/Androidの仕様｜実践！iPhone＆Androidサイト制作ガイド ASCII.jp：サイト制作の前に知りたいiPhone/Androidの仕様｜実践！iPhone＆Androidサイト制作ガイド スマートフォンサイトの制作 – 基礎編 – – ぺーぺーエンジニアのおぼえがき スマートフォンサイトの制作 – 基礎編 – – ぺーぺーエンジニアのおぼえがき iPhone iPad向けサイトを制作するためのいろ
わずか10分でスマートフォン用サイトが無料で作成できるウェブサービス「smart4me」を使ってみた
リリースされたばかりですが、スマートフォン用のサイトを手軽に作れると言う事で早速試してみました。 普通のウェブサイトなら話題のabout.meであなたのプロフィールページを1分で作ってみようを参考にしてみるといいかもしれないです。 smart4meってどんなサービス？ 以下引用を参考に。 smart4me（スマート フォーミー)とは？iPhoneやAndroidなどスマートフォン向けサイトが無料で、簡単に公開できる、世界初のWebサービス！ ブログ感覚で、ユーザー自身のスマホサイト（スマートフォン向けサイト）を簡単に公開が可能。 TwitterやBlogなどのソーシャルメディアとも連携可能なので、あなたの最新情報をすべて集約できるなど、使い方はあなたのアイディア次第です! 早速ユーザー登録してみよう smart4me ユーザー登録はちゃちゃっと終わります。 登録したメールアドレス宛にメール
Safariの開発者メニューでスマートフォン開発
Safariの開発者メニューでスマートフォン開発 AndroidやiPhoneのスマートフォンのサイト作成を行う際にSafariの開発者メニューを利用すると便利です。 開発者メニューは環境設定の詳細タブから設定が可能 「メニューバーに"開発"メニューを表示」にチェックを入れることでメニューバーに開発者メニューが追加されます。 開発者メニューではユーザーエージェントの切り替えができるので、ユーザーエージェントで処理を変えている場合もSafariで検証が可能です。 iPhoneやiPod touch、iPadなどだけではなく「その他」から任意のユーザーエージェントも選べます。複雑なユーザーエージェント分岐を行っていなければ「Android」などと入力するだけでAndroid用の処理が実行できます。 また、Webインスペクタを起動することでFirebugに似たデバッグツールが利用できるようになり
スマートフォンコーディング : ノウハウコラム ： HTML/XHTML、CSSコーディング最安保障～クロノドライブ～
iPhoneブラウザの特徴の一つとして、画面を左右に90度傾けると画面の中もそれに合わせて回転する機能があります。 そのため、画面幅に合わせて伸縮するリキッドレイアウトとしてデザイン・コーディングしますが、中にはそれだけでは難しいものもあります。 そこで、傾きに合わせてbodyのclassを切り替えるjqueryのjavascriptを紹介します。 サンプル サンプル ※iPhoneで見てみてください。 ダウンロード tilt.zip 使い方 ダウンロードしたtilt.jsをjquery.jsと一緒に読み込むだけで動作します。 用途 縦横でボックスの幅を切り替える 縦横で背景色を切り替える 縦（または横）の場合だけ表示する文章や画像を設置する 縦に最適化されたサイズのまま、横の場合はそれを中央寄せにして表示する 等々... 仕組み 仕組みはとても単純でwindow.orientatio
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
http://www.phonegap.com/
