ウェブの進化
現在のウェブは、動画、写真、インタラクティブなコンテンツをふんだんに使用したウェブページやウェブ アプリであふれています。一般的にあまり知られていませんが、これらすべてを可能にしているのがウェブ技術とブラウザの相互作用なのです。.� ウェブ技術が徐々に進化するにつれて、ウェブ デベロッパーは便利で実体験のようなウェブ体験の新時代を築くことができるようになりました。今日のウェブは、オープンなウェブ コミュニティが、HTML5、CSS3、WebGL のようなウェブ技術の定義を支援し、あらゆるウェブ ブラウザでサポートされるように絶え間なく取り組んできた成果といえるでしょう。. このタイムラインのカラーの帯は、現在使用されている多くの優れたウェブ アプリケーションを実現した、ウェブ技術とブラウザの相互作用を表現しています。. もっと見る
これぞレスポンシブ確認ツールの決定版！OSを選ばずにウェブサイトをすぐに確認できる -Viewport resizer
ウェブページの表示サイズをデスクトップやスマフォ・タブレット用に変えてレスポンシブの確認をするツールはたくさんありますが、これはかなりおススメのツールです。 Viewport resizer Viewport resizerの特徴 Viewport resizerの使い方 Viewport resizerの高度な使い方 Viewport resizerの特徴 Viewport resizerはブラウザベースで動作するブックマークレットで、WindowsでもMac OSでも即時にツールを起動して、表示しているウェブサイトをあらゆるサイズに変更して確認できます。 フルカスタマイズが可能。 その場でサイズ変更してのカスタマイズも可能。 1クリックでスマフォやタブレットの縦・横向きを変更できます。 Media Queriesをサポート。 Metaのviewportタグを適合させます。 ページのリロ
閉じたタブを再び表示させる方法ほか...Chromeのショートカットキー40選＋α | ライフハッカー・ジャパン
今回はGoogle Chromeのショートカットキーの紹介です。ここでは、アドレスバーに文字列を入力するだけで「Amazon.co.jp」や「Flickr.com」のサイト内検索ができるようになる方法など、アドレスバーのショートカットキーを設定する方法も扱います。どれも便利なワザですので、ぜひマスターしてください。■Windows編 1. 「Ctrl＋H」...履歴ページを開く。 2. 「Ctrl＋D」...現在のウェブページをブックマークとして保存。 3. 「Ctrl＋Shift＋D」...開いているすべてのページを新しい1つのフォルダにブックマークとして保存する。 4. 「Ctrl＋J」...ダウンロードページを開く。 5. 「Shift＋Esc」...タスクマネージャを開く。 6. 「Ctrl＋Shift＋Del」...「閲覧履歴の消去」（履歴やキャッシュを消去できるページ）を開く。
PCで閲覧中のサイトをAndroidで見られる「Google Chrome to Phone」
アプリ名：Google Chrome to Phone（Ver.2.3.2） 金額：無料（2012年6月11日時点） カテゴリ：ツール 開発：Google Inc. 使用端末：Xperia acro SO-02C おすすめ度：★★★★☆ 「Chrome to Phone」は、PCブラウザのGoogle Chromeで表示しているウェブページを、Android端末で閲覧するためのGoogle純正アプリだ。Google Chrome上に表示されるボタンをクリックするだけで、閲覧しているウェブページのURLなどの情報を送信し、Android端末で自動的に開くことができる。 このアプリは、Android端末側のアプリと、PC側のGoogle Chromeに導入する機能拡張が揃うことで動作する。Google Chromeに機能拡張をインストールすると送信ボタンが表示されるようになるので、Androi
GoogleChromeから余計な機能を取り払いさらに軽量・高速化したブラウザ「Iron」 - GIGAZINE
GoogleChromeは実はオープンソースのコード「Chromium」から作られており、そこへいくつかの機能をGoogleが独自に実装することで完成させたブラウザとなっています。ということは、その余計な追加機能を外せばもっとプライバシーに配慮され、そして軽量化＆高速化ができるはずだ、ということで作られたブラウザが「Iron」となります。GoogleChromeと互換性があるため、GoogleChromeで動くスクリプトはIronでも問題なく動きます。 SRWare Iron - The Browser of the Future http://www.srware.net/en/software_srware_iron.php GoogleChromeとIronの差については下記ページに一覧表形式でまとめられています。 Chrome vs Iron http://www.srware.n
Facebook 向けウェブサービスは IE6 に対応すべきか ( 2011年12月の Facebook のブラウザシェア ) - IT戦記
はじめに みなさん、お元気ですか＞＜リリースも終わって、一息ついたあまちゃんです！ ヽ(´ー｀)ノわー さて今日は、最近「お花サプライズ！」というサービスをリリースしたのですが、そのときにちょっと面白いデータを見つけたのでそのいきさつも含めて紹介したいと思います。 （今日のテーマはこの円グラフ） フェイスブック系のサービスはどのブラウザに対応すれば良い？ よく、ウェブサービスを開発するときの悩みとして「古いブラウザでのデザインをどのくらいケアするか？」というものがあります。 「お花サプライズ！」でも、割と短い期間で実装することを目標としていたり、本番の HTML を書いた経験があまりないメンバーが多くいたことで「IE6 や IE7 への対応が鬼門なんじゃないか？」という心配が常にありました。 そこでよぎる甘い誘惑 このご時世、 IE6 とか IE7 に特別対応する必要なんてないんじゃね？
Firefoxがピンチ シェア低下、人材流出、Google契約打ち切りで【湯川】 | TechWave（テックウェーブ）
[読了時間：２分] 米ZDNetが人気ブラウザFirefoxの今後を憂う内容の記事を書いているので、内容を簡単に紹介したい。「Firefox faces uncertain future as Google deal apparently ends（Google 契約打ち切りでFirefoxが不透明な未来に直面）というタイトルの記事で、それによると今年はFirefoxと同ブラウザを開発・運用するモジラ財団にとって散々な年だったようだ。 まずブラウザ市場でのFirefoxのシェアが低迷し始めている。調査会社NetMarketShareの調査によると、2009年12月には25.02%あったFirefoxの市場シェアが2011年11月には22.14％にまで低下。一方で、Googleが独自開発したブラウザChromeのシェアは4.71%から18.1％にまで上昇している。来年早々にはChromeがF
もう専ブラは不要 Chromeを2chブラウザ化する拡張「read.crx」｜教えて君.net
Chromeウェブストアの開設以降、実用的な拡張が充実してきているGoogle Chromeだが、ついに2ちゃんねる閲覧の分野でも、決定的な拡張が登場。「read.crx」はサクサク動いて機能も充実した2chブラウザ拡張だ。これがあればもうほかの専ブラはいらないかも。 「read.crx」はChromeを2chブラウザにする拡張機能だ。 これまでFirefoxなどでもブラウザを2chブラウザに改造するアドオンは色々あったが、どれもこれも使い勝手はイマイチ。というのも、2chブラウザは「動作の軽さ」が非常に重要で、その点に関しては、長い競争と淘汰の末に生き残ってきた2ch専用ブラウザに一日の長がある。どんなに見た目がキレイで機能が充実していても、モッサリしているだけでアウト！というのは2chを常日頃見ている人には当たり前の感覚のはずだ。 「read.crx」では、2ch系拡張の最重要課題
「Firefox 8」正式版登場、メモリ使用量を引き続き削減＆新機能さらに追加
今回は新たにTwitter検索機能、タブを選択してから読み込みを開始、サードパーティによって許可なく追加されたアドオンを無効化、WebGLへのさらなる対応、HTML5で右クリックしたときのコンテキストメニューへ任意の項目を追加などの新機能が加わっており、メモリ使用量も前回のFirefox7に引き続き削減されています。また、Android版のFirefoxもパワーアップしています。 Mozilla Japan ブログ - Twitter 検索とブラウジングをさらに便利にする新機能を追加した Mozilla Firefox の最新版を公開 http://mozilla.jp/blog/entry/7466/ Firefox 8 の主な新機能を紹介します Mozilla Developer Street (modest) https://dev.mozilla.jp/2011/09/firefo
iPhoneアプリのようなリッチなUIをブラウザで実現！Web 2.0 Touchが凄すぎる！ » SHINGOLOG
iPhoneアプリのようなリッチなUIをブラウザで実現！Web 2.0 Touchが凄すぎる！ 2011年8月25日 in iPhone, Web Web 2.0 Touchは、WebKitエンジン上で動作するJavaScriptライブラリです。 2011/8/22に公開されたばかりの模様。 iPhoneアプリのようなリッチなUIをブラウザでも簡単に作ることができます。 iPhone・iPad・Androidに対応しています。 どんな動きが出来るのか、これを見ると一目瞭然です。 アニメーション 上下左右のフリップ(画面が反転する動き)、ポップイン、ポップアウト、上下左右のスライドが出来ます。 テーブル表示 お馴染みのテーブル表示もこの通り。角丸タイプのテーブルも作れるようです。 ボタンやタブ表示、吹き出し タブ表示は便利な機能ですが、自分ではとても作れないところなので、需要ありそう
要件に合わせたMedia Queriesの実装方法のまとめ | コリス
スマートフォン・デスクトップをはじめ、IE6などのレガシーブラウザ対応といった要件に合わせたMedia Queriesの実装方法を紹介します。 Techniques For Gracefully Degrading Media Queries [ad#ad-2] 下記は各ポイントを意訳したものです。 テクニック1：スマートフォンユーザーがメイン テクニック2：レガシーブラウザは非対象 テクニック3：スマートフォンユーザーのみ テクニック4：デスクトップユーザーがメイン テクニック5：レガシーブラウザも含める テクニック1：スマートフォンユーザーがメイン 最初に紹介するテクニックは、Media Queriesをそのまま使うものです。 CSS #container { _width: 460px; /* IE6用 */ max-width: 460px; } @media only scree
Google+が日本で流行らない理由 - ぼくはまちちゃん！
こんにちはこんにちは！！ いよいよ公開されましたね…Google+！ で、タイトルのGoogle+が日本で流行らない理由。 これなんだけど、 「UIが洗練されすぎている」 きっと、これに尽きますね！ 設計もそうだし、画面もそう、 トモダチの振り分けなんか、ブラウザなのにドラッグ＆ドロップでできちゃう。 これすごい。 だから流行らない。 え、なんでかって？ ふつうの人には、ブラウザ上でドラッグ＆ドロップで、 操作できるなんて思わないよ。 ぼくですら、すぐにわからなかった。 いや、ちゃんと文字では説明書いているんだよ。 「ユーザーをサークルにドラッグ＆ドロップしてフォローできます」 ってね。 でも読まない。 読んでも意味わかんない。 同じ洗練されたUI(?)でも、twitterくらいのコンセプトのシンプルさでギリギリかなって思う。 検索エンジンGoogleもそう、コンセプトがシンプルだからこそ
戻るボタンが押された際、ページのJavaScriptを途中の状態から実行させない方法
スマートフォンを含む最近のブラウザでは、戻るボタンで前のページに戻った際に、JavaScriptも含めて前回の最後の状態を復元します（Back Forward Cacheと呼ばれます）。これはとても便利なのですが、ページを作成する立場からすれば、余計なお世話であることもあります。 Back Forward Cacheの無効化はとても簡単に実現できます。ページの中にonunloadを書くだけです。 <!DOCTYPE html> <html><head><title>onunload test</title> <script> window.onunload = function() {}; window.onload = function() { var count = 0; var loop = function() { document.getElementById("num").in
スマートフォンコーディング : ノウハウコラム ： HTML/XHTML、CSSコーディング最安保障～クロノドライブ～
iPhoneブラウザの特徴の一つとして、画面を左右に90度傾けると画面の中もそれに合わせて回転する機能があります。 そのため、画面幅に合わせて伸縮するリキッドレイアウトとしてデザイン・コーディングしますが、中にはそれだけでは難しいものもあります。 そこで、傾きに合わせてbodyのclassを切り替えるjqueryのjavascriptを紹介します。 サンプル サンプル ※iPhoneで見てみてください。 ダウンロード tilt.zip 使い方 ダウンロードしたtilt.jsをjquery.jsと一緒に読み込むだけで動作します。 用途 縦横でボックスの幅を切り替える 縦横で背景色を切り替える 縦（または横）の場合だけ表示する文章や画像を設置する 縦に最適化されたサイズのまま、横の場合はそれを中央寄せにして表示する 等々... 仕組み 仕組みはとても単純でwindow.orientatio
国別・ブラウザ別でも計測出来るWebサイト表示スピード調査ツール・loads.in
よくあるWebサイトが表示されるまでの 時間を計測するツールですが、ブラウザ 別でも図れるのは珍しい気がするので 備忘録的にご紹介。大抵はFirebugで 事足りそうですけど、なかなかシンプル で便利そうなので覚えておいても損は しなさそうですよ。 デザインも凄く素敵。URLを放り込むだけのシンプルなツールです。 デザインかこいい。URLを放り込むとメーターのタイトルも変ってくれますよ。細かい部分へのデザインの配慮も参考になります。 ざっと特徴をご紹介。 機能 機能が結構充実してたりします。URLを入れて調査結果が上記のように出ます。JavaScriptエラーのほかに、表示されるまでの時間を5分割し、それぞれの表示状況をチェックできます。 ファイルごとのチェック 右側にWaterfall chartというリンクが出ますので、そこからファイルごとの速度も確認可能。ダウンロードする事も可能みた
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
スマートフォンブラウザ不具合特集
mdlab.jp
http://mofmof-js.googlecode.com/svn/trunk/0.1/test/showcase/particle/30000.htm
HugeDomains.com
Mozilla、Firefox 4正式版を公開、HTML5やCSS3、WebGLへ対応 