iOS7におけるMobile Safariの主な変更点
iOS7上のSafariがどのように変化したかについて、Maximiliano Firtman氏（@firt）がブログで詳細に解説しています。 この記事では、同氏のブログから、Web制作者／開発者にとって重要と思われる情報を引用して、Web技術者にとっても大きな影響を持つこのアップデートについて紹介していきたいと思います。 元記事は非常に長大、かつ詳細なため、全てのポイントを紹介することはとてもできません。素晴らしい記事ですので、関心のある人は、ぜひ元記事を参照してください。 ちなみに、最初にガッカリさせることになってしまいますが、@firt氏によれば、「1.0以降最もバグの多いバージョンだ」（this is the buggiest Safari version since 1.0）だそうです… UIが大幅に変更、フルスクリーン（に近いサイズ）がデフォルトに Webブラウジングをしている
これがスマートフォン向けサイトを作るときの viewport 設定３パターンだ
スマートフォン向けの Web サイトを作るとき、viewport の設定次第で使い勝手が大幅に変わる。 最近はレスポンシブ Web デザインが流行してるけども、その大前提として viewport の設定パターンを抑えておくのは重要だろう。 この記事では、viewport の設定によって、見た目・使い勝手がどう変わるかを解説する。 パターン1: 何も考えずに HTML を書く まずは、viewport を指定せずに、単純な HTML をスマートフォンで表示してみる。 <!DOCTYPE html> <head> <meta charset="utf-8"> </head> <body> <img src="/images/logo-ja.png"> <p>色んな素材がごった煮になった様子をお椀で表現しています。 湯気が<strong>「てっく」</strong>に見えるのが隠し味になっていま
【WordPress】スマホ対応必須！User-agent(UA)判定ロジックのサンプルコードとPC/Macからのテスト方法を紹介します - アナザーディメンション
User-agent（UA）とは User-agent（UA、ユーザーエージェント）はブラウザなどが持っている情報で、WEBブラウザでの通信に使用するHTTPプロトコルに含まれる。例えばこんなものだ、 ●iPhone Mozilla/5.0 (iPhone; U; CPU iPhone OS 5_0 like Mac OS X) AppleWebKit/534.46 (KHTML, like Gecko) Mobile/9A334 Safari/7534.48.3 ●iPod Touch Mozilla/5.0 (iPod; CPU iPhone OS 5_0_1 like Mac OS X) AppleWebKit/534.46 (KHTML, like Gecko) Version/5.1 Mobile/9A405 Safari/7534.48.3 ●iPad Mozilla/5.0
WordPressのお手軽なスマートフォン対応！ | 世界中の1%の人々へ
WordPressでお手軽に携帯＋スマフォサイト対応するなら、Ktai Style＋WPtouchが便利！ Webサイトを利用するのがPCに限らない時代になってくると、かつてのように異なるブラウザで1ピクセルたりとも同じレイアウトに見えるWebデザインが無意味となってきました。代わって、様々なデバイスで正しく情報が伝わり、使いやすいことがWebサイトに求められてくるようになり、「プログレッシブエンハンスメント（Progressive Enhancement）」という考え方が主流になってきているわけです。 今後、ますますスマートフォン人口は増え、PCよりもスマートフォンでWebを見る人が増えてくることは間違いないでしょう。そこで、Webサイトのスマートフォン対応が必要になってくるわけですね。 スマートフォン対応といっても、いろいろやり方があるわけですが、今日のブログでは「お手軽なスマートフ
iPhoneだけでWordPressブログ更新するために導入した厳選した超便利アプリ10個｜男子ハック
@JUNP_Nです。男子ハックとしてはモブログはしない方向でしたが、方針の転換を図りモブログの先生に知り合えたのでiPhone環境を少しずつ整え厳選したアプリを利用し、サッとブログを書くことができるようになりました。
SeleniumでiOSシュミレーターを動かし、iPhoneのブラウザ越しのテストをする - Yamashiro0217の日記
テストしてますか！ スマホブラウザ対応の結合テストとか辛いですね。そうですね。 というわけでSeleniumでiOSシュミレーターのブラウザを動かして見ました。 Seleniumには、iPhone driverというのがあるのでそれを使いますです。 http://code.google.com/p/selenium/wiki/IPhoneDriver 以下の行動をとります。もちろんMac上です。 XCode の4.2以上を入れます #git clone https://code.google.com/p/selenium/ #cd selenium #./go iphone #open iphone/iWebDriver.xcodeproj #Xcode が立ち上がるはずなので、適切なiPhoneを選択し、Runします 上記が全部うまくいくと、Xcodeのシュミレーター上で、RemoteD
iPhoneやiPadのハメ込み画像が簡単に作れる「iPhone Screenshot Maker」 | ライフハッカー・ジャパン
iPhoneアプリを開発してる方には便利なサービスかもしれません。 「iPhone Screenshot Maker」はiPhoneやiPadに画像をハメ込めるサイトです。商品イメージなどでよく見る、スクリーンショットをiPhoneやiPadにハメ込んだ画像を作りたいときに便利ですよ。 以下、使ってみた様子をご紹介します。 まずiPhone Screenshot Makerへアクセスしましょう。 まずはどの製品にはめこむかを決めましょう。色も指定できます。縦か横かも選べますよ。なぜかゲームボーイもありますね。 ステータスバーの設定なども行えます。あとは画像をアップロードすれば完成。 このようにアップロードした画像にiPhoneのフレームを合成することができました。はめこむ画像次第ではありますが、一見ハメ込みと分からない仕上がりです。iPhoneやiPadのフレームをつけたいときにはぜひご活
サービス終了のお知らせ - NAVER まとめ
サービス終了のお知らせ NAVERまとめは2020年9月30日をもちましてサービス終了いたしました。 約11年間、NAVERまとめをご利用・ご愛顧いただき誠にありがとうございました。
スマートフォン用ページがドラッグ＆ドロップで簡単に作成できるサービス「shutto」 | ライフハッカー・ジャパン
「shutto」は、スマートフォン用ページを簡単に作成できるサービスです。PC用サイトのURLを入力して、スマートフォンで表示させたいコンテンツをドラッグ＆ドロップするだけで作れます。 以下に使ってみた様子を載せておきます。 まず、shuttoへアクセスしましょう。スマートフォン用に変換したいサイトのURLを入力します。 次に、スマートフォンで表示させたいコンテンツをドラッグ＆ドロップで配置します。 文字の色や背景色も自由に変更できます。操作が分かりやすくて良いですね。 このようなスマートフォン用ページができました。URLも自動的に割り振られます。あとは、友人にメールなどで共有すればOKですね。 スマートフォン向けにカスタマイズしたページを作りたいときにどうぞ！ shutto （カメきち）
Youtubeの動画を背景に
Introduction In the ever-evolving landscape of web browsing, staying abreast of the latest technologies is crucial. HTML5, the fifth and current version of the Hypertext Markup Language, has revolutionized the way we experience the web. With its advanced features and enhanced capabilities, HTML5 has become the cornerstone of modern web development, offering a more seamless and interactive user exp
スマートフォン向けサイトの作り方 | ユージック
スマートフォン向けサイトの作り方 2011年1月22日 iPhoneとAndroid両方に対応するスマートフォン向けサイトの作り方をまとめてみました。 スマートフォン向けサイト作成にあたっての基本概要 まず最初にスマートフォン向けサイトを作成する際に気になる点は画像の扱いだったりすると思います。 横幅ですが、解像度は機種によって様々ですが、縦向きで320px～640px、横向きで480px～960pxが主流となります。 標準となるものを設けるとなると、320px(横)/480px（縦）を標準として良いかなと思います。 ※iPhone4、4Sは640px/960pxの解像度ですが、内部解像度で320px/480pxと解釈してくれるため。 ですので、クライアントに見せるデザインカンプなどを作成する際も縦を標準とする際は320px（横）で作成すれば問題ないといえますが、iPhone4、4SやAn
iPhone/iPad用サイト作成時に使えるスワイプイベント実装jQueryプラグイン「TouchSwipe」:phpspot開発日誌
iPhone/iPad用サイト作成時に使えるスワイプイベント実装jQueryプラグイン「TouchSwipe」 2011年02月17日- Skinkers Labs : TouchSwipe iPhone/iPad用サイト作成時に使えるスワイプイベント実装jQueryプラグイン「TouchSwipe」。 タッチパネルを触って左にスライド、右にスライドといった操作をスワイプといいますが、このイベントを取得するjQueryプラグインのご紹介です。 1本指だけではなく、2本指でスワイプした際のイベントを取ることも出来ます（それぞれ区別可能） ブラウザ上でiPhoneアプリっぽい動作を簡単に実現できますね。 demoをiPhone等で見てみましょう(違和感なくスワイプできるはずです） 1本指スワイプのデモ 2本指スワイプのデモ スワイプを使った画像ギャラリー 実装はjQueryベースということでや
iPhoneサイト制作に役に立ったサイト « Demence/Cup
突然振られたiPhone対応サイト制作。 普通のPCサイトの作りとはまた違う点がちょいちょいあるという風にはネットで見ていたので、どこから手をつければ良いのか適当にググってみました。 その中で本当にiPhoneサイトを作ったことの無い人への初心者用参考サイトとして見て役に立つなぁと思ったサイトのメモメモです。 iPhone対応サイト作成 画面サイズに合わせる device-width http://kaworu.jpn.org/kaworu/2010-06-16-1.php とりあえずサイトのロゴを作って表示してみたら、なんかサイズの比率が合わない！iPhoneのサイズは380pxと480pxと書いてあるのにあきらかにもっと解像度があるように見える！（>_<。）って感じで困っていたときに参考になったサイトです。iPhoneサイトはMetaタグでviewportというのを設定するのが基本らし
【Webアプリ】iPhone4 で画像をきれいに表示する色々な方法【試行錯誤編】
iPhone4 がついに届いて興奮気味のgunjiです。 2週間待ちでした！ 待ってる間に、iPhone4も対象としたWEBアプリ（ネイティブアプリのweb view を含む） のコーディングで気をつけることについておさらいしていたところ、 Retinaディスプレイに画像を最適化させるのって意外とめんどいよね！ という現実に打ちのめされたので、まとめてみます。 そもそもRetinaディスプレイってなんでしたっけ？ はいはい、iPhone4の目玉のひとつで、今までの2倍の解像度で 画面がとってもキレイに見えるんですよね！ 拡大しなくても小さな文字が読めるなんてサイコー！ ところが、今までiPhone向けに作ったサイトをこのiPhone4で見るとちょっと 不思議な状態になってることがあるのです。 iPhone4で見たらなんか画像がにじんでるように見える・・・？！ こういうイメージです。 そう、
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 OS 4.0でvideo要素を使うと、ページに動画を埋め込める[追記あり] - EC studio デザインブログ
[追記]2010/07/27 すでに販売されているiPhone4（iOS4）でサンプルを検証したところ、埋め込みで再生はできなくなっていました。iOS4のリリース以前の3GS+iOS4では可能であったことを確認していますので、仕様の変更があった可能性があります。あらためて方法が分かれば記事におこしたいとおもいます。 iPhoneのMobile SafariではHTML5が使えるというのは以前に書いた記事でも紹介したことがあるのですが、HTML5の各要素がすべて完全に使えるというわけではありません。 その中の一つであるvideo要素はマークアップ上使うことは可能ですが、いざ動画を見ようとするとQuicktimeが起動するのでvideo要素を使うメリットがほとんどありませんでした。 しかしvideo要素はOS4.0からページに埋め込まれる形で再生できるようになります。 iAdの衝撃 皆さんiA
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
HTML、CSS、JSでiPhoneアプリのプロトタイプが作れる「Ratchet」:phpspot開発日誌
初心者でも分かるiPhoneサイト制作で参考になるサイトのまとめ - iPhoneデザインボックス
HTML5とCSS3を使ってスマートフォン向けサイトを構築 － iPhone版Yahoo!JAPANトップの開発事例紹介
http://e0166nt.com/blog-entry-864.html
