Chrome 34ではimgタグで解像度に応じた複数の画像を出し分けられるよう、レスポンシブイメージ対応に
スマートフォンのような小さな画面からデスクトップPCのディスプレイまで、Webに対応するデバイスの画面の大きさや精細度の多様性は高まってきています。 多くのWebデザイナーは、こうした多様な画面に合わせてレイアウトなどを変えることで見やすくするよう努力してきましたが、こうしたダイナミックなレイアウトを実現する上で大きな課題だったのが画像の扱いです。画面の大きさや精細度に合わせて適切な画像を表示させようにも、そのための標準的な方法がないのがその理由です。 Chrome 34ではその、いわゆるレスポンシブイメージへの対応としてimg要素に新機能を実装することを明らかにしました。。 img要素のsrcsetで、画面解像度ごとに表示すべき画像ファイルを複数指定できるようになります。 <img alt="A rad wolf." src="pic1x.jpg" srcset="pic1x.jpg 1
『nodeベースでGUIアプリを開発する「node-webkit」』
1 pixel｜サイバーエージェント公式クリエイターズブログ サイバーエージェントのクリエイターの取り組みを紹介するオフィシャルブログです。最新技術への挑戦やサービス誕生の裏話、勉強会やイベントのレポートなどCAクリエイターの情報が満載です。 こんにちは。Ameba事業本部の杉本と申します。 業務では「天下統一クロニクル」というチームでフロントエンドのディベロッパをしています。 今回は、「node-webkit」という一風変わったアプリケーションを紹介させていただきます。 私達は普段、gruntといったnode.js製のツールを使ってJavaScriptの結合や圧縮、画像の減色といった処理を自動化していますが、node-webkitはこれらnodeのモジュールを使ってGUIアプリケーションを作れるツールです。nodeの資産をそのまま利用できるので、私のようなディベロッパには嬉しいですね。
橋本商会 » node-webkitでNHK Newsを連続自動再生するアプリ作った
あまりにも世情にうといので作った。 NHKのRSSを定期的にチェックして、新着ニュースの動画を連続自動再生する。 とてもテレビっぽい。おかげで4日後にオリンピックが開催されるという事を知れた。 ソースコード https://github.com/shokai/nhk-news-app zipでダウンロード https://github.com/shokai/nhk-news-app/releases node-webkitはネイティブアプリ作成のためにwebkitが改造されたwebブラウザで、HTML/JavaScript/CSSが実行できるだけでなくnode.jsのAPIもそのまま呼び出せる。 つまりjQueryでDOM操作すると同時にnodeのライブラリを使うような処理が、同じプログラムファイルにまとめて書ける。変にブリッジを書く事なくいつものnodeのように require(‘モジュ
WebKit／Google Chrome開発者に聞く、HTML5最前線 － ＠IT
2010/05/12 「グーグルのエンジニアがSafariのためにコードを書くこともあるんですよ。WebKitコミュニティの中では、そのほうが物事の進みが速いという不文律のようなものがあるんです」 こう語るのは、グーグルでChrome開発に携わるソフトウェア・エンジニアの鵜飼文敏氏だ。鵜飼氏はChromeに機能を追加するために、WebKitコミュニティでWebSocketの設計、実装なども行なっている。 WebKitは不思議なプロジェクトだ。よく知られているように、Google ChromeとApple Safari（およびiPhoneやiPadに搭載されるそのモバイル版のMobile Safari）は、オープンソースベースで開発が進む「WebKit」というコードベースを共有している。ここにさらに、WebKitを統合したGUI開発フレームワーク「Qt」を抱えるノキアや、搭載ブラウザをWeb
-webkit-text-size-adjust: none を絶対に設定してはいけない理由
PC 版の Google Chrome や Safari で見たときにユーザビリティーが落ちるから。 以上。 で終わってしまうと記事にならないので、ちゃんと説明しておく。 そもそも -webkit-text-size-adjust とは何か iPhone や Android のブラウザーは、縦向き (Portrate mode) と横向き (Landscape mode) の文字サイズを自動調整する機能がある。 これを制御するのが CSS の -webkit-text-size-adjust である。 文字サイズ自動調整の具体例 次のような HTML をスマートフォンで表示してみる。 <!DOCTYPE html> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width,initial-
OperaがWebKit＋V8エンジンに移行することを発表、18年の歴史に幕
全世界で3億人のユーザーを持ち、独自のHTMLレンダリングエンジン「Presto」を開発し続けていた「Opera」がGoogle ChromeやSafariと同じWebKitに移行することを発表しました。JavaScriptエンジンはV8になるとのことなので、見かけはOpera、中身はGoogle Chromeみたいな感じ(オープンソースのChromiumを使うため)になるようです。 Opera Developer News - 300 million users and move to WebKit http://my.opera.com/ODIN/blog/300-million-users-and-move-to-webkit この新生Operaの最初の製品として、モバイル向けのOperaが今月末のバルセロナで開催される「Mobile World Congress」にてデモが披露され
ブラウザのしくみ: 最新ウェブブラウザの内部構造 - HTML5 Rocks
How browsers work Stay organized with collections Save and categorize content based on your preferences. Preface This comprehensive primer on the internal operations of WebKit and Gecko is the result of much research done by Israeli developer Tali Garsiel. Over a few years, she reviewed all the published data about browser internals and spent a lot of time reading web browser source code. She wrot
サンプルで学ぶDreamweaver CS6！「レスポンシブWebデザイン」に挑戦してみよう
Dreamweaverとは Adobe Dreamweaver（以下、Dreamweaver）は、Webページを作成・更新・管理するためのソフトウェアです。Dreamweaverにはいくつかの編集モードがあり、コードビュー（HTMLコードやCSS、JavaScriptファイルなどコードを直接編集できる画面）、デザインビュー（Webページをブラウザで表示した形に近い状態で編集できる画面）の両方で編集できます。 さらに、Dreamweaver CS4で登場したライブビュー（レンダリングエンジンに利用しブラウザに非常に近い状態での表示確認ができる画面）では、SafariやGoogle Chromeと同じWebkitというレンダリングエンジンを採用しており、実際の画面を確認しつつ作業を進めることができます。 デザイナーにとっては、HTMLやCSSのコードをオートコンプリート（自動補完）してくれる機
-webkit-border-radius なんて書いているWeb開発者は腹を切って死ぬべきである - hogehoge @teramako
地獄の火の中に投げ込むものである。 いや、まあそんなネタはどうでも良くて... そのベンダー接頭辞はいつまで書くの？ | Unformed Building 書いてあることは至極真っ当なこと。もろ手をあげて賛成である。 また、 ベンダー拡張プリフィックスはそれそのものがWebを破壊することはないし、ベンダー独自のプロパティーや関数が数万追加されて使われまくったとしても本当はWebは壊れない。またその文法が変更されても修正または追加すれば対応できるし、その余裕は十分にある。つまり壊れるのはほとんど全てのケースで開発者の怠慢に過ぎないので、ちゃんと仕様と実装を理解して必要ならば寝る間を惜しんで修正作業に血眼になるべき。みたいな実践を伴わない意識を僕は持っている。 なので憂うべきこの現状は、IE6が拡散して残り続けたことと同じようにベンダー側ではなくWeb開発者側に非があると思っている。 ベンダ
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
