iOS 8 Mobile Safari の変更点を予測してみました - latest log
iOS 8 Mobile Safari の変更点を WebKit Changeset から予想してみました。 主な変更は、 HTML5 API Blob URL ( new URL("http://example.com").hostname -> "example.com" ) IndexedDB CSS -webkit-filter with SVGFilter CSS JIT 古い仕様に基づく CSS Variables が削除されました HTML <img srcset> <audio autoplay> <iframe seamless> に関わるコードが削除されました <input type="file"> に関わるコードが削除されました <style scoped> に関わるコードが削除されました Shadow DOM に関わるコードが削除されました DOM Events W
img要素のwidth,height属性は指定しない - EC studio デザインブログ
img要素におけるwidth,height属性の指定というのはHTMLを勉強しはじめたときから「必須」のものであると考える人が多いと思うのですが、 これは「必須」ではありません。 また弊社では社内のガイドラインとして 「img要素にはwidth,height属性は指定しない」としました。 この方が現状メリットが大きいと考えたからです。 width,height属性の指定が「必須」であるか「任意」であるか 結論からいうと、仕様書上「任意」とされています。 これは弊社サイトで多く採用されている XHTML1.0（Transitional）においてはもちろん、strictであれ、HTML4.01であれ「任意」とされているのは同じです。 しかしそれがなぜ「必須」というような流れになったか？ その大きな理由としてはNetscape Navigator 4.xのような今となっては古くなったブラウザへの
JavaScript/jQuery を使ったブラウザ判定 | Web Design Leaves
「UserAgent での判定」、「サポートしている機能での判定」、「使いたい機能が機能するかでの判定」などがあるので用途に合わせて利用。 UserAgent での判定 UserAgent の文字列からブラウザを判定する方法。バージョンが新しくなったりすると UserAgent の値も変更されるようでこれがどのぐらい使えるかは不明（確実性に疑問）。 UserAgent と そのバージョン等は以下で取得できる。 //ユーザエージェント var userAgent = window.navigator.userAgent; //バージョン var appVersion = window.navigator.appVersion; //名前 var appName = window.navigator.appName; //プラットフォームのタイプ var platform = window.n
ブラウザ内で安全に文字列からDOMを組み立てるためのRickDOMというライブラリを書いた - 葉っぱ日記
RickDOM - ricking DOM elements safety from string https://github.com/hasegawayosuke/rickdom ブラウザ内のDOMParserあるいはcreatHTMLDocument APIを使って不活性なDOMを組み立てたのちに、必要な要素と属性、スタイルだけを切り出して複製しているので、原理的にDOM based XSSの発生を抑えることができます。 使いかたも簡単。 var rickdom = new RickDOM(); var container = document.getElementById( "container" ); var elements; var i; // read allowings property to show default rule // div.textContent =
いまさらだけど、font-sizeを比較してみた - entacl Lab.
css font 投稿日： 2012.09.27 投稿者： 小平 yahoo YUIファンは、パーセントかな？ ピクセルはもうなかなかいないのかな？ emでやってると、結構らくちんなのかな？ remでやってるのは、css3できりすてなのかな？ などなど 思っていたら比較してみよってことで比較しました。 font-sizeの種類比較 各デモもつくってみました、なんとなくですがw ブラウザ間にてもきれいにサイズは表示できるようしている状態です。 ピクセル - px 往年のご隠居的存在ですね あえてピクセルを使う必要ってないですよね メリット ピクセルの世界のweb屋にとってはわかりやすい デメリット IEで文字拡大できない パーセント yahoo!YUIリセットcssなどを使用している場合は、わかりやすそうです。 とりあえず、↓のcssをデモしてみました→ body { font-size:
Webサービスのプログラミングに必要なことのだいたいは、スクレイピングに学んだ - Line 1: Error: Invalid Blog('by Esehara' )
この記事を読み始める前に Rubyでやるんだったら、ちょうどそういう本が出ているから、その本買えばいいのではないでしょうか。 Rubyによるクローラー開発技法 巡回・解析機能の実装と21の運用例 作者: るびきち,佐々木拓郎出版社/メーカー: SBクリエイティブ発売日: 2014/08/25メディア: 大型本この商品を含むブログ (1件) を見る はじめに プログラミングを勉強し始めて、だいたい基礎的な文法を覚えたあとに、次に何をしようかな、と悩む人も結構多いみたいで、明確に「これを作りたい」という場合は、それを作ればいいとは思うんですけど、場合によっては、別段作りたいものが無く、漠然としたプログラミングをしたい、という熱意によって勉強しているという人もいるのではないかと思います。 で、もちろん「作りたいものがないのに、プログラミング勉強してどうするの」という意見もあるかとは思いますが、往
「デザインにこだわる」とはどういうことか――Webブラウザ「Sleipnir」と歩んだフェンリルの10年
国産Webブラウザ「Sleipnir」の開発で独自の立ち位置を築いてきたフェンリル。自社プロダクトに加え、スマホアプリの共同開発も増えるが、一貫して変わらないのは「デザインにこだわる」という姿勢だ。 「デザインと技術でハピネスを」──国産Webブラウザ「Sleipnir」をネット黎明期から10年以上に渡り開発し続けているフェンリルの企業理念だ。印象的な言葉「ハピネス」は、単に見た目が整っているだけでなく、人の感情に訴えるものこそ美しいデザイン――という意味の言葉だという。デザインから始まるプロダクト開発にこだわり、日本のWeb業界で独自の立ち位置を築いてきた同社の、これまでとこれからを聞いた。 ネットユーザーの声を集めたWebブラウザ「Sleipnir」を、柏木泰幸社長が個人でリリースしたのは2002年のこと。柔軟なカスタマイズ可能な仕様、安定性・安全性などが評判を呼び、個人開発のブラウザ
興味深いテクニックを多々取り入れているHTML5+CSS3のフレームワーク -Gridless
当サイトの記事でも取り上げている数々のテクニックを取り入れている、IE6/7にも対応したHTML5+CSS3ベースのフレームワークを紹介します。 Gridless [ad#ad-2] Gridlessの主な特徴 CSSでユーザーのスクリーンサイズに最適なレイアウトを実現します。 参考：Media Queriesをしっかり身につけるチュートリアル クロスブラウザ対応（IE6/7も含む） CSS Resetには、Normalize CSSを使用。 参考：ブラウザのスタイルをリセットするスタイルシート -Normalize CSS 黄金比をベースにしたサイズと縦のリズムを使ったタイポグラフィ。 印刷時のスタイルをプリント時に最適化。 キャッシュの最適化。 HTML5+CSS3の採用。 安全なCSS Hack。 参考：IE9対応、IEの各バージョンごとに異なるスタイルシートを適用する方法のまとめ
Web制作者向け拡張「Appspector」で仕事を効率的に [Chromeの使い方] All About
Web制作者向け拡張「Appspector」で仕事を効率的に他のWebサイト分析をする際に活用できるのが、Appspectorです。こちらの拡張機能は、サイトを開くだけで使用しているCMSやアプリケーションなどの一部情報が分かります。昔は、Chrome snifferという名前でしたが、名前が変わったので再度ご紹介いたします。とにかく便利な機能なので、Web制作者の方はぜひ導入をおすすめいたします。 他のWebサイト分析をする際に活用できるのが、Appspectorです。こちらの拡張機能は、サイトを開くだけで使用しているCMSやアプリケーションなどの一部情報が分かります。昔は、Chrome snifferという名前でしたが、名前が変わったので再度ご紹介いたします。とにかく便利な機能なので、Web制作者の方はぜひ導入をおすすめいたします。 このChrome拡張機能の優れている点は、2点です。
![Web制作者向け拡張「Appspector」で仕事を効率的に [Chromeの使い方] All About](https://cdn-ak-scissors.b.st-hatena.com/image/square/9f3ac26e5fdc10d639dfbce659c1b0bee104572f/height=288;version=1;width=512/https%3A%2F%2Fimgcp.aacdn.jp%2Fimg-a%2F1200%2F900%2Faa%2Fgm%2Farticle%2F4%2F4%2F5%2F8%2F0%2F0%2Ftopimg_original.jpg)
意外と知らないChrome Developer Toolsの便利な機能 - Qiita
参考資料がすべて英語なので、日本語で情報がまとまってる場所が欲しいと思いこの記事を作りました。「俺もっと便利な機能知ってるぜ！」「こういうことできないの？」って思った人はコメント/編集リクエストをくれると僕の幸せのステージがどんどん上がります。 DevToolsの起動するショートカットキーは？ 開くだけ F12, Ctrl + Shift + I (Win, Linux) Opt + Cmd + I (Mac) 要素の検証(Inspect Element)と同じ状態で開く Ctrl + Shift + C (Win, Linux) Shift + Cmd + C (Mac) Consoleタブが開いた状態で開く Ctrl + Shift + J (Win, Linux) Opt + Cmd + J (Mac) DevToolsって下じゃなくて右に持ってこれないの？ Dock To Righ
Youtubeの動画を背景に
jQueryのtubularプラグインを使用してYOUTUBEの動画をブラウザの背景全体に再生させる（レスポンシブ対応）【jQuery連載01】 最近Webサイトでブラウザの背景全体に動画を配置してインパクトのあるサイトを見ることがありましたので、2回に分けて、YOUTUBEにアップロードした動画や自分のサーバー上の動画をvideo要素を使用して配置するサンプルを作成しました。 まず初回はYOUTUBEの動画を背景に表示させるjQueryの「tubular」プラグインを使用してインパクトのあるページが作れるサンプルです。 このプラグインでよく見かけるのはただ動画を背景に配置しただけのサンプルが多いので、今回はサイトのデザインとして使えるように、ロゴやナビゲーションやコンテンツ内容を入れてWebサイトのTOPページのデザインのようなサンプルを作成してみましたので、背景に動画を流したい場合にお
JavaScriptでvarを並べること - ワザノバ | wazanova
http://benalman.com/news/2012/05/multiple-var-statements-javascript/ 1 comment | 0 points | by WazanovaNews ■ comment by Jshiike | 約4時間前 まあ、好みの問題もあるので、嫌な人にとっては嫌なんでしょうが、、 JavaScriptで、例えば先頭で var をまとめて定義 & 値を代入する際に、 var foo = 1, bar = 2; でなく、 var foo = 1, var bar = 2; と、varを並べたほうが、メンテ性も見た目を揃えるにもよいのではないかという、Ben Almanの2年前のブログが最近いくつかtweetされてたので、チェックしてみました。 そもそも、 複数varを並べるのは無駄だし、初心者っぽい。 単独varの方が見た目がよい。
ディープリンク(deep link)とは | ディープリンク.jp
Webの世界に以前から存在していた「ディープリンク(deep link)」という言葉が、最近になって注目を集めています。 IT用語辞典では、ディープリンクは以下のように説明されています。 Webサイトのトップページ以外(たとえばニュースサイトの個別記事など)がリンク先になっているハイパーリンクのこと。目的のWebサイトの見たいページに直接アクセスすることができるため、うまく使えばユーザの利便性を向上させる効果がある。 ディープリンクとは 【 deep link 】 – 意味/解説/説明/定義 ： IT用語辞典 しかし、近年注目を集めているのは、スマートフォン及びモバイルアプリの登場によりその意味合いが再定義された、新しいディープリンクです。この新しいディープリンクとは、一言でいえばモバイルアプリ内の特定ページに直接遷移するためのリンクです。 モバイルアプリとリンクとの関係性 モバイルアプリ
ChromeのタブっぽいUIをブラウザ上で実現する「ChromeTabs」:phpspot開発日誌
Decad/chrometabs GitHub ChromeのタブっぽいUIをブラウザ上で実現する「ChromeTabs」 次のようなChrome風のタブをブラウザ上で実装できます。 ドラッグ＆ドロップで並び替えできたり、×ボタンを表示できたりと再現性はなかなか高いです。 関連エントリ レスポンシブなタブを実装できるjQueryプラグイン「Responsive-Tabs」 タブ切り替え時のエフェクトがクールなタブUI実装jQueryプラグイン「Tabulous.js」 電話番号入力時等に自動でタブを入力してくれるjQueryプラグイン「Autotab」 シンプルすぎるモバイルファーストなタブ実装jQueryプラグイン「Tabby」
ChromeでiPhone5やNexus5等にEmulateできる機能が便利:phpspot開発日誌
ChromeでiPhone5やNexus5等にEmulateできる機能が便利です。 個人的にFireMobileSimulatorを使っていましたが、Webkitなため再現度も高く、いつも使ってるChromeでエミュレートできるのは超便利！ Chrome32から使える機能のようで、デベロッパーツールはよく使っていたものの、分かりにくい位置にあることもあって、使っていない方も多いのでは？ということでご紹介。 デベロッパーツールの以下のカーソル位置をクリックします。 クリックすると次のように、更に下に分割されたフレームが開きますので「Emulation」のタブをクリック。 iPhone5, Nexus5、KindleFireなど、主要な端末へのエミュレートが可能。 端末を選択したら「Emulate」ボタンをクリックで画面のエミュレートが開始されます。 Yahooのサイト。は以下のようにエミュレ
Breach – HTML5時代のWebブラウザ
ちょっと前までのWebブラウザ戦争も落ち着きつつあります。IEが50％前後で落ち着き、Google Chromeのシェアが伸び、ついでFirefox/Safari/Operaなどが続いています。レンダリングエンジンとしてはWebKit系が躍進しています。 そんな中、紹介したいのがBreachです。Chroniumを使った全く新しい概念とも言うべきWebブラウザになっています。 Breachの使い方 Breachの特徴はモジュールベースの拡張、最下層がnodeベースという所にあります。ハックしやすい仕様になっていることで、Breachをベースに新しいWebブラウザを開発することもできるのではないでしょうか。機能拡張とはまた違う、面白い機能追加がされていきそうなWebブラウザです。 Breachはnode/JavaScript製のオープンソース・ソフトウェア（MIT License）です。 B
Opera Mini 8 のURLスキームでコールバックすると超便利です - W&R : Jazzと読書の日々
どうやら x-callback-url に準拠。 SafariからOpera Mini 8.0 を開くためのブックマークレット Opera が新しくなりました。Opera Coast で培った技術を還元。とてもシンプルで美しいWebブラウザに変わっています。サーバー側でデータを圧縮するテクニックも、今回は良いほうに出てるみたい... 新しい Opera Mini。盛り上がってますよねー、個人的にですけど。コールバックが付いた。ブラウザとして大きなことです。Webアプリを呼び出したり戻したり、柔軟なアプリ間連携の要所となる。そんなわけで、コールバックを使いこなしてみましょう。 iPhone 用 Opera Mini のダウンロード - Opera Software Opera Mini モバイル Web ブラウザ 8.0.0 分類: 仕事効率化,ユーティリティ 価格: 無料 (Opera S
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
IDEA * IDEA
dfltweb1.onamae.com – このドメインはお名前.comで取得されています。
[jQuery] ユーザーエージェントの判定 スマホ（iPhone、iPod、Android）、タブレット、IE11にも対応 | 5 LOG![[jQuery] ユーザーエージェントの判定 スマホ（iPhone、iPod、Android）、タブレット、IE11にも対応 | 5 LOG](https://cdn-ak-scissors.b.st-hatena.com/image/square/7600b8bd7209e2506afdfe6c6263f79c6cbba297/height=288;version=1;width=512/http%3A%2F%2F5log.jp%2Fwordpress%2Fwp-content%2Fthemes%2F5log%2Fimg%2Fog_img.png)
