【本日のできるネット】 【Chrome拡張】Webページ全体のスクショを撮るならこれ! 注釈も書き込める「Awesome Screenshot」
なにこれ、スゴすぎる！ブラウザで行った操作を記録し、さらに完全再生もできるChromeの機能拡張 -Wildfire
ページをどのくらいスクロールし、どこをクリックするのか、マウスやキーボードをどのように操作し、コンテンツを見るのか、ブラウザで行った操作を記録し、さらに完全再生もできるChromeの機能拡張を紹介します。 ユーザビリティテストに利用するだけでなく、操作を編集・再生することもできるので、プレゼンなどでページの操作を再現することも可能です。 Wildfire Wildfireの特徴 Wildfireのインストール Wildfireの使い方 Wildfireの特徴 Wildfireはユーザーがページをどのように操作するのか、どのように見るのか、手軽にユーザビリティテストができるChromeの機能拡張です。また、アクションをシミュレーションし、新しいデザインの確認にも利用できます。 ブラウザで表示したページのアクションを記録します。 記録したアクションは、すべて再生可能。 アクションを編集し、シミ
知っていると少し幸せになれる、Chrome検証機能の小技まとめ - Qiita
みなさんブラウザは何を使っていますか。 僕はchromeです。 今回はchromeの検証の便利な機能を紹介したいと思います。 各種ショートカットキーはMacのものです。 何か便利小技が増えたら、ここに追記していこうかと思います。 1. 拡大縮小 拡大：「command」 + 「shift」 + 「+」 縮小：「command」 + 「-」 元の大きさに戻す：「command」 + 「0」 通常のブラウザの拡大・縮小と同じ 2. 上下キーで値の変更 Shift+↑ 10の増減 Alt+↑ 0.1の増減 3. 色をカラーピッカーから選択 カラーピッカーから色を選択できます。 さらに以前はchromeの拡張機能からしかできなかったような、サイト上から色を選択してとってくることもできます。 透明度も変更できる 4. minify化しているファイルを整形 minify化されているようなファイルを整形
JavaScriptを補完してウェブを高速化する「WebAssembly」をChromeがついに実装したので実行速度を試してみた
「WebAssembly」は、JavaScriptの生みの親のブランダン・アイクが「ゲームチェンジャー」と表現するほど期待されているウェブ向けのバイナリフォーマットです。モバイル端末やIoT端末の普及が見こまれる中、マシンパワーの劣る端末でも効率よく実行できるように、ウェブの標準言語と言ってよいJavaScript以外の言語をコンパイルするためのユニバーサルなローレベルバイトコードが求められていましたが、ブラウザ開発者はそれぞれ独自にツールを開発する状況でした。 そんな中、2015年6月にMozilla、Google、Microsoft、Appleなどのウェブブラウザの主要プレイヤーが標準フォーマットとして開発に合意したのがWebAssemblyで、プロジェクトを推進するWebAssembly Community Groupが結成され、まずはC/C++をコンパイルしてJavaScriptエ
iOS版「Chrome」がついにWKWebViewに対応、飛躍的に安定・高速化 - ライブドアニュース
米Googleは1月27日(現地時間)、iOS用「Chrome」ブラウザのバージョン48の提供を開始した。レンダリングを担うWebView機能が「UIWebView」から「WKWebView」に変わり、前バージョンよりも飛躍的に安定して、かつ高速に動作するようになった。 WKWebViewはiOS 8からサードパーティの利用が可能になっていたが、Cookie管理APIやプロトコルハンドラーの不備を理由にGoogleはChromeで対応していなかった。WKWebViewにスイッチしたことで、WebViewに起因するクラッシュが大幅に減少し、Chromeチームによるとクラッシュ数はUIWebViewを利用していたChrome 47より70％も少ない。また、IndexedDBのサポートなどWeb標準対応も向上し、HTML5テストのスコアが「391」から「409」に上がった。他にも、バックグラウン
Chrome開発者ツールの小技集 | POSTD
最近、普段以上にChromeの開発者ツールを使うことに時間をかける機会がありました。その過程で、自分が今まで気づいていなかった機能をいくつか見つけました（少なくとも今までその機能を探す必要に迫られていなかった、とも言えるのですが。例えばブラックボックス化や非同期のスタックトレースなど）。そのため、開発者ツールでとても気に入っているいくつかの機能についてまとめてみたくなったのです。 小さな虫眼鏡ののアイコンは、特定の要素やCSSプロパティに対して、「どのCSSファイルに書かれているどのセレクタ/クラスが最終的なスタイルを決めているか」を示してくれます。例えば、どれかDOM要素に対して「要素を検証」を選び、右側の「Computed」というタブを選びます。確認したいCSSプロパティを見つけてその虫眼鏡アイコンをクリックすることで、すぐさま右側に正しいCSSファイル内のクラス/セレクタを表示してく
Chrome で今見ている Web サイトでどのような技術が使われているのかを調べる拡張機能 BuiltWith Technology Profiler
Web 開発者の方であれば今開いている Web ページにどのような技術が利用されているのか気になる事がありますよね。ソースを表示したり Developer Tools を起動したりして調べるのも良いですがさくっと確認するだけであれば BuiltWith Technology Profiler という拡張機能を利用するのが便利です。 この拡張機能を入れるとメニューバー上にアイコンが表示されるので、調べたい Web ページを開いてアイコンをクリックするだけです。 例えばこのブログだと上記のような感じに表示されます。 かなーり縦に長いので文字で書きますが以下のような情報を取得しています。 Web サーバの種類, バージョン ネームサーバ ホスティングしているサーバ CMS の種類, バージョン 使用しているフレームワーク 広告の種類 ユーザ統計情報(Google Analytics 等) Jav
Google Sites: Sign-in
Not your computer? Use a private browsing window to sign in. Learn more about using Guest mode
Chrome デベロッパーツールの使い方: プロのように華麗に使いこなすための20のテクニック
Chromeのデベロッパーツールをプロのように使いこなすための20のテクニックを紹介します。 いやー、本当にデベロッパーツールは機能が豊富ですね。 How to use Chrome DevTools like a Pro 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様に許可を得て翻訳しています。 HTMLの要素をクイック編集 指定した行番号に移動 すべての子ノードを展開 デベロッパーツールの位置を変える CSSのセレクタによるDOM検索 Material Designとカスタムカラーパレット 複数のカーソル 画像をData URIとしてコピー 疑似クラスのトリガー 複数のコラムをドラッグで選択 「$0」で現在の要素を手に入れる 要素の表示 「Event Listeners」の表示 イージングのプレビュー Media Queriesの検証 ネットワークをフィルム
Chrome 45のセキュリティ改善により、開けないサイトが現れる(更新) | スラド セキュリティ
Chrome 45ではセキュリティ改善のため、クライアントサイドでのTLS 1.0へのフォールバックが廃止されたため、HTTPS経由で繋がらないサイトが現れている(ただしHTTP経由で開けるものは多い)。 これは、バギーなサーバーが、仕様に反してTLS 1.0よりも新しいClientHelloを無視するために起こるもので、Chromeは「SSL サーバーが古い可能性があります。」というエラーメッセージを表示する。 ざっと確認したところ、 ヤマト運輸のクロネコメンバーズ、 ミスタードーナツ、 ダスキン、 出版社共同ネット、 競輪、 J-CASTの東京バーゲンマニア、 神奈川県教育委員会ネットワークシステム、 東京学芸大学、 太平洋フェリー などがHTTPS経由で開けないようだ。 編注: タレこみにあった日本自動車連盟、UCカード、UR都市機構については、他のWebブラウザーでも正常にアクセス
CSSの修正が捗る「リアルタイムコーディング」とは
Web制作の「時短」に役立つChromeデベロッパーツールの活用法を紹介する本連載。第2回は、Webページの修正をリアルタイムで反映する「Elements」パネル、「Sources」パネルの使い方を説明します。 細かい修正の手戻りにもさくさく対応したい！ コーディングが完了したあとで、「やっぱりフォントサイズを大きくして」「下の余白をもう少し小さくして」と、クライアントやディレクターから細かい修正を求められることはよくありますよね。さらに、修正後、「やっぱり元に戻してくれる？」「もっと小さくしてできる？」と手戻りが発生し、作業時間がどんどん伸びてしまうこともあります。 どんなに確認のステップを踏んでも、この手の手戻りは完全にゼロにはできないもの。そこで、Chromeデベロッパーツールを使って、リアルタイムでページをさくさく修正する方法を説明します。 Elementsパネルの起動方法 Goo
まとめブログでよく見る「アンテナサイト」をふっ飛ばすChrome拡張機能を作ってみた | Ledge.ai
はいどうも。中村です。 唐突ですが、2chまとめ系のブログなんかを見ていて「気になるリンクをクリック！」てやった時に、リンク集というかアンテナサイトというか、なんかこうイラッ☆とするサイトにふっ飛ばされた経験ありません？ で、「あれー？さっきクリックした記事はどれだー？」て探しながらスクロールするんだけど、大抵どれだかわからない。 しかも見てるうちに別の記事が気になったりしてさらにクリック ⇒ またしてもアンテナサイトにジャンプ … という謎のループ。 僕なんかもう1日1回はこの迷路に迷い込んでるような気がします。 なのでアンテナサイトを自動で吹っ飛ばす（リダイレクトする）Chrome拡張機能を作ってみたAntenna Skipper（アンテナスキッパー） はい。というわけで作りましたよ。アンテナ系サイトふっ飛ばし拡張機能「Antenna Skipper（アンテナスキッパー）」です。 Ch
進化するWebプラットフォーム！Chrome OSとFirefox OSが変えるWebの未来
近年、ネイティブのアプリをHTML5だけで開発できるOSが、注目を集めています。本記事では、2014年内に日本での製品発売が期待されるGoogleのChrome OSとMozillaのFirefox OSの概要を紹介します。 PCの利用時間の大半をWebに費やしている人や、Webブラウザ以外のアプリは使用しないという人は少なくありません。Chrome OSはこのように、WebのためにPCを利用するユーザーにとって、最適なブラウズ環境を提供することを目的として開発されたOSです。米NPDの調査によれば、Chrome OSを搭載したノートPCであるChromebookは、2013年内に米国で販売されたノートPCの21％を占め、着実にシェアを伸ばしています。 Chrome OSのアーキテクチャ Chrome OSは、Chromium OSというオープンソースのOSを、Chromebookに最適化
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
【やじうまWatch】日本の特殊性が一目瞭然、ここ数年の世界のブラウザーシェア推移をまとめた地図画像
【やじうまWatch】クロネコメンバーズなど一部のHTTPSサイト、最新のChromeで表示できない現象が発生