ブラウザにファイルをドロップしてはいけない - ぼくはまちちゃん！
こんにちはこんにちは！！ 先日、CROSS 2013っていう、エンジニア向けのビール飲み放題のイベントに行ってきました！ そこの「HTML5×セキュリティ」っていうコーナーで、ちょっと喋ってきたんですが、 その時の小ネタを紹介しておきます。 最近、ブログとかのWebサービスで写真をアップロードする時に、 ファイルをドラッグ＆ドロップするだけでできたりしますよね。 いちいちダイアログから選ばなくていいから便利です。 こんなやつ。 この手の仕掛けって、ドラッグ時にボーダーカラーを変えたりして 「いまドラッグ＆ドロップ状態ですよ〜」ってわかりやすく表示されますが、 それって別に、ブラウザが警告の意味で出してるんじゃなくて、 あくまで、Webサービス側が親切で表示してるだけなんですよね。 ってことは ・ドラッグされても特にボーダーラインなどを表示せず ・画面上のどこでもドロップを受け入れるようにし
CSSスプライトをブラウザにD&Dで速攻作れる「Instant Sprite」:phpspot開発日誌
Instant Sprite - Generate CSS Sprites Instantly CSSスプライトをブラウザにD&Dで速攻作れる「Instant Sprite」 D&D対応ブラウザ（Chrome等で）ローカルから複数ファイルをドラッグ＆ドロップしてみましょう。 ドロップした時点でCSSスプライトが完成してしまいます。 ２枚の画像をアップした結果。 すぐにCSSスプライトとして利用可能 要らないファイルがあったら、その場でクリックですぐ消せたりと色々便利です 関連エントリ CSSスプライト実装が誰でも簡単にできるツール「Spritebox」 CSSスプライトでカッコイイボタンを作るチュートリアル CSSスプライトを使ったナビゲーションメニュー作成サンプルとチュートリアル jQueryで行うFlashみたいなスプライトアニメーションのチュートリアル
各ブラウザ毎のICCプロファイルの対応がよく判る画像
各ブラウザ毎のカラーマネージメントの対応が克明に判る画像が紹介されていたので取り上げてみたいと思います。 先ずは上の画像、どのように見えますか？ 紫っぽく見えるのなら、あなたが今使っているブラウザは画像に埋め込まれたICCプロファイルの読み込みに対応していないブラウザということになります。 以下は左上からSafari5, IE9, Firefox12、左下からMaxthon3, Chrome19, Opera11、の各ブラウザをWindows7マシンでそれぞれテストした結果だそうです。 さて、ICCプロファイルに関しての詳しい説明はここでは省略しますが、要は各デバイス間で色の見え方の差をなくすために付加される情報のことで、ブラウザがこれに対応しているか否かによって表示される色は違って見えるということ。 （上の画像はそれを判りやすく判別するためにわざと大げさな差を付けたものです） ただし、こ
面白い！JavaScript+Canvasによる画像差分表示·JS-ImageDiff MOONGIFT
JS-ImageDiffはJavaScript+Canvasタグを使って二つの画像の差分表示を行うライブラリです。 GitHubでは差分をWebブラウザ上で閲覧できますが、その時に画像の差分表示も行えるのを知っているでしょうか。スライダーで動かしたりして差分を確認できるのですが、その一つの差分表示をオープンソースで再現するのがJS-ImageDiffです。 サンプルです。上が元、中間が変換後そして下が差分となります。どこが違うのか一目で分かります。 左が影無し、右が影ありです。一致している部分だけが表示されています。 サイズが違う場合の差分表示です。 JS-ImageDiffはCanvasタグを使って画像を読み込み、その差分を表示しています。各ピクセル単位で画像を比較して同じであれば黒、違う場合はうまく表示するというやり方でここまで見事に表示できるのが面白いですね。 JS-ImageDif
JavaScriptでスクリーンショットが取れるライブラリ「html2canvas」:phpspot開発日誌
html2canvas - screenshots with JavaScript JavaScriptでスクリーンショットが取れるライブラリ「html2canvas」 サーバサイドでブラウザを動かしてスクリーンショットを取るというより、利用者のブラウザ上でスクリーンショットをJavaScriptとcanvasを使って生成しちゃおうというものらしいです。 canvas非搭載ブラウザはflashcanvasやExplorerCanvas等の代替が必要とのこと。 html2canvasでレンダリングされたサンプルも見ることが出来ます。 frameやobjectのサポートはしていない点に注意。 スクリーンショットを取る仕組みをサーバに仕込むとタイムラグがあったりサーバ側は大変だったりで色々問題点を抱えていますが、クライアント側でやれば画像を受け取るだけでいいので便利です。 クライアントごとの表示
ウェブデザインで効果的に半透明とオーバーレイのテクニックを使う方法とその実例
半透明とオーバーレイのテクニックは効果的に使用すると、奥行きとリアリズムを作り出し、退屈なウェブデザインにモダンな印象を与えます。 Onextrapixelから、ウェブデザインにおいて効果的に半透明とオーバーレイのテクニックを使う方法とその実例を紹介します。 Opacity and Overlay Techniques in Web Design [ad#ad-2] 下記は各ポイントを意訳したものです。 Dark Overlay Light Overlay Color Mixes Dark Overlay ブラック、あるいは暗いグレーを使ったオーバーレイ。最近のウェブデザインでよく見かけるタイプです。見た目はスタイリッシュになり、画像やスライドショー、ナビゲーションなどによく利用されています。 このテクニックを利用する際は、CSSでの透過をサポートしていないブラウザがまだあるため、PNGで
どんなテキストボックスへもドラッグアンドドロップで画像・テキストをアップロードできる拡張機能「Drag2Up」 | ライフハッカー・ジャパン
Chrome用：「Drag2UP」は、画像やテキストを、ドラッグアンドドロップでテキスト入力欄へアップロードできる拡張機能です。ファイルへのリンクが、テキストボックスへすぐに埋め込めます。 ドラッグアンドドロップした画像ファイルは「Imgur」、テキストファイルは「Github」へアップロードされ、そこへのリンクが即座にテキストボックスへ貼り付けられる、という仕組みです。Gmailなどの、ドラッグアンドドロップでファイルをアップする方式が好きな方は、Drag2UPも気に入ると思います。 非常に上手く機能するので、将来的には、より多くのファイル形式への対応が期待されます。Drag2UPは、Chrome用の無料拡張機能です。情報を提供してくれた、antimatter15氏に多謝。 Drag2Up [Chrome Extension Gallery via #tips] Jason Fitzpa
サムネイル画像にオンマウスするだけで自動的に拡大表示できる「Hover Zoom」 | ライフハッカー・ジャパン
Chrome用：Chromeで画像をブラウジングしていて、小さなサムネイル画像をクリックして拡大する時間がもったいない！ と思ったら「Hover Zoom」を使うといいですよ。Hover Zoomは、クリックしなくても、サムネイル画像にオンマウスするだけで、自動的に画像を拡大してくれる拡張機能です。 AmazonやFlickr、Facebookなど、サムネイル表示されている画像が、直接拡大画像にリンクされているようなサイトを見ている時、Hover Zoomは、オンマウスだけで自動的に拡大表示してくれます。 特定のサイトでは拡大表示したくない、いつどのように拡大表示するかなど、ポップアップや表示時間などの、細かい設定もできます。ホットキーの割り当てもできますので、ホットキーを押した時だけサムネイル画像を拡大表示する、といったことも可能です。 Hover Zoom は無料でダウンロードでき、す
IE6で透過pngを表示させるオススメscript、「DD_belatedPNG.js」
＞＞ 詳細な使用法と注意点を追加エントリーしました。 いまだ絶大なシェアを誇るIE6（Internet Exproler 6）ですが、WEB制作者ならご存知の通り、さまざまなバグ・不具合を内包しております。 ・CSSでfloatしたブロックのmarginが倍になる。 ・後方互換モードの場合、text-alignが子要素にまで影響する。 ・透過png画像が透過されない。 上記以外にも、それはいくつもの制作者泣かせの問題があり、業界内では「IE6氏ねばいいのに」とまで言われているブラウザですが、前述の通りシェアは絶大なので、対応しないワケにもいかず。 すでにいくつもの対応策が出回っておりますが、その中でも自分的に一番オススメするのが、「DD_belatedPNG.js」を使用する方法です。 有名どころの対応策を併記・比較しながら、どこがオススメなのかを含めてエントリーしたいと思います。 有名な
WEBページのスクロールキャプチャーがカンタンかつ多機能なChrome拡張「Screen Capture」
WEBページ全体をキャプチャーするには、試行錯誤したり、特定のツールをダウンロードしたりするものですよね。 今回は、そんなページのスクロールキャプチャを、カンタンにとれてしまうChrome拡張機能をご紹介します。 組織のマインドマップツールをマインドマイスターにすべき理由 伸びてる産業、会社、事業を紹介しまくるStrainerのニュースレターに登録!! スクロールキャプチャがカンタンなChrome拡張「Screen Capture」 「Screen Capture」は、Googleによって作成された、カンタンにWEBページ全体のスクロールキャプチャーをとれてしまうGoogle Chrome 拡張機能。 キャプチャーだけでなく、ハイライトやテキストの追加、隠したい部分を消すための黒塗りなどの処理もブラウザ上で行うことができます。 ３種類のブラウザ キャプチャー機能 ↑「ブラウザ表示部分」「選
[JS]超軽量・超高性能のコンテンツスライダーのスクリプト -Sudo Slider
クロスブラウザ対応、各パネルのブックマークやスクリプトのオフ時も配慮されたアクセシブルで超軽量・超高性能のコンテンツスライダーのスクリプトを紹介します。 Sudo Slider jQuery Plugin デモページ Sudo Sliderの主な特長 リスト要素で簡単にスライダーを実装。 AJAXで画像やHTMLをロード。 スクリプトのオフ時でもコンテンツが可能。 マルチプルなスライダーにも対応。 標準的なスライドからフェードまで多彩な表示を用意。 各パネルへの直接リンクが可能（ブックマーク可）、ブラウザの「前へ」「次へ」をサポート。 パネル内は画像、テキスト、動画、フォームなどさまざまなHTMLコンテンツを表示可能。 自動再生でスライドショーも可能。 ループ再生も可能。 セットアップは簡単で、カスタマイズも簡単。 IE6+, Fx, Chrome, Safari, Opなど主要ブラウザの
画面キャプチャを素早く保存・編集できるChrome拡張「Lightshot」
画面キャプチャをおこなえるソフトやブラウザの拡張機能はたくさんありますが、ここまで軽くて、サクっと編集画面へ移動したり、保存できるものはなかなかないのでは？ 今回は、Google Chromeでの画面キャプチャを便利にしてくれる拡張機能をご紹介します。 組織のマインドマップツールをマインドマイスターにすべき理由 伸びてる産業、会社、事業を紹介しまくるStrainerのニュースレターに登録!! 画像キャプチャをサクっと編集・保存できるChrome拡張機能 「Lightshot (screenshot tool)」は、Google Chromeでの画面キャプチャを、カンタン・便利にしてくれるChrome 拡張機能。 保存や編集画面への遷移がショートカットキーでおこなえるのも非常に便利です。 早速使ってみます ↑まず、キャプチャのボタンを押します。 ↑キャプチャ範囲選択時に、サイズがリアルタイム
サイト公開前に役立ちそうなフリーのツールやWebサービスいろいろ
Webサービス公開前にサイトをチェック Webサイトを制作して公開する際は おかしいところが無いか、不備は 無いか不安になったり、という方も 少なくないのではないかと思います。 Webサイトを制作して公開する際は おかしいところが無いか、不備は 無いか不安になったり、という方も 少なくないのではないかと思います。 そこで、公開前に色々と確認出来たり、 最適化できる様なフリーのサービスや フリーソフトをご紹介します。 ここで言う「公開前」とは「サーバーにアップする」事ではなく、公開を告知したり、プレスリリースを出す前の状態とお受け下さい。ローンチ前と書くべきだったかもしれませんね。。誤解を与えていたら申し訳ないです。 では、ブラウザチェックツール、モニタ別表示チェック、表示スピードチェックツール、cssや画像の最適化ツール、などなどご紹介していきます。 ブラウザチェック各ブラウザでどのように
任意のサイトの画像リンクをLightbox風に表示する·Image Preview MOONGIFT
Image PreviewはGoogle Chrome機能拡張のフリーウェア。ブログやアルバムサイト、CMSなどで多数利用されているLightbok。画像をクリックすると元画像を画面遷移することなく表示してくれる便利なライブラリだ。これに一度慣れると手放せなくなる。 画像をクリックすると画面遷移せずに拡大表示 逆にその画像表示を使っていないサイトにいくとストレスを感じるほどだ。運営者が対応してくれれば良いが、その気配が感じられないのであれば自分だけでも対応してしまおう。任意のサイトでLightbox風表示を実現するのがImage Previewだ。 これをインストールするともう手放せなくなる。他のブラウザでも欲しくなる機能だ。Image Previewをインストールした後、任意のサイトでサムネイル画像をクリックすると、背景が暗くなって大きな画像が表示されるようになる。 もちろん画像以外の部
2ちゃんねるを見やすく表示するChromeアドオン「壺ノ鍵」 :教えて君.net
Google Chromeで2ちゃんねるを開いたときに、スレッドを読みやすいようにカスタマイズして表示するのが「壺ノ鍵」だ。２ちゃんねるからのリンクをすべて直リンクにしたり、画像や動画をスレッド内に表示するといった機能があるぞ。 「壺ノ鍵」は２ちゃんねるのスレッド表示をカスタマイズするエクステンションだ。2ちゃんねるからのリンクは、いったん広告ページを経由してからアクセスするようになっているが、壺ノ鍵を使えば直リンクに変更される。また、画像ファイルへのリンクやYouTubeの動画へのリンクは、スレッド内に画像や動画を表示するのでリンク先に飛ばなくても内容を確認できるようになる。 また、動作が非常に軽いのも特徴。2ちゃんねる専用ブラウザ並の表示速度なので、人気のある板のスレッドを読み込むときも非常に快適だぞ。 ■ Chromeで2ちゃんねるのスレを見やすく改造 「壺の鍵」の配布サイトへCh
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
[JS]大量ページの本やマンガをiPad/iPhoneで表示できる -Diva.js
HugeDomains.com
IDEA * IDEA
Amazon商品画像の拡大画像をダウンロードできる拡張機能「Amazon Imaget」*二十歳街道まっしぐら（FC2ブログ時代）
Chromeを高機能な画像加工ツールに変身させてしまう「Instant Image Editor」*二十歳街道まっしぐら（FC2ブログ時代）