By Shannon Hauser Google Chromeは世界で最も多く使われているウェブブラウザであり、「Chromeがないと仕事にならない！」という人も多いはず。そんな日常的に使うChromeをさらにレベルアップさせる5つの使い方をPopular Scienceが解説しています。 Five advanced Google Chrome hacks to level up your browsing | Popular Science http://www.popsci.com/advanced-google-chrome-hacks ◆1：仕事とプライベートでユーザーを切り替える ChromeではWindowsやMacと同じように、複数のユーザーを設定することができます。設定したユーザーにはそれぞれに異なるブックマークやブラウジング履歴を保存できるため、仕事用のユーザーには仕事で

2017年6月度のWindows Updateを適用すると、Internet Explorer(以下、IE)で印刷が正常にできなくなる問題ですが、Microsoftは印刷の修正パッチとなるKB4032782を公開しました。 EdgeデベロッパフォーラムでMicrosoftのJames M.氏はこの問題を『修正しない』とマークしていましたが、内部統制が取れていないのか彼の勝手な独断だったようですね。 それはさておき、印刷の修正パッチKB4032782についてですが、いくつか注意点があります。 ①　Windows Updateクライアントには降ってきません。Microsoft UpdateカタログのWebページに飛んで手動でダウンロードする必要があります。 ②　IEのパッチは複数の脆弱性の修正を含んだパッチですが、KB4032782を適用すると情報漏えいの危険性を持った脆弱性(CVE-2017

(frameは、コンテナーとは独立したコンテンツが表示されるWebページまたはブラウザーウィンドウの一部です。frameは独立してコンテンツ読み込むことができます) この問題は、Internet Explorer 11と、IE Webブラウザーコントロールをホストするアプリケーションの両方で発生します。 現在、この問題に対する回避策はありません。ただし、Webページ全体を印刷すると、正常に印刷されます。 マイクロソフトでは、この問題について現在調査中です。詳細については、わかりしだいこの資料に掲載する予定です。 しかし、Microsoftから回避策が提示されることもなく、2017年6月度の配信日から修正されないまま8日が経過しました。 こうやって問題として掲載するくらいなので、おそらく修正する気はあるものと思われますが、EdgeデベロッパフォーラムでMicrosoftのJames M.氏は

2017年6月度のWindows Updateで、Internet Explorer(以下、IE)の印刷に関する不具合が見つかりました。2017年6月度のパッチを適用していると、フレーム(iframe)のあるページをページ内の印刷ボタンなどから印刷ができなくなります。(空白のページが表示されたり　「404 - ファイルまたはディレクトリが見つかりません。」　などと表示されるようになります) この問題はMicrosoftのEdgeデベロッパフォーラムで報告されましたが、Microsoftからは IE11に関するご意見をお寄せいただきありがとうございます。私たちは、このポータルを通じてIEに関するフィードバック（セキュリティに関連しない限り）をもう受け入れていません。このウェブサイトを通じてMicrosoft Edgeに関するご意見をお待ちしております。 との返信があり、この問題を『修正しない

Chrome DevToolsを使いこなそう！ Web開発に必須なブラウザ開発ツールによるデバッグの基本 開発者ツール（DevTools）とは、ブラウザに搭載されているデバッグツールです。多岐にわたる技術の集合体であるWebページやWebアプリケーション、いわゆるフロントエンドの開発において、なくてはならないツールです。 皆さん、どうもこんにちは。今回で3度目のエンジニアHubの登場となる大竹智也です。春の季節もそろそろ終わりを迎え、新生活を迎えた人たちも新たな環境に慣れてくる時期だと思いますが、元気にお過しでしょうか。 前回までエディタの話ばかりしてきましたが、今回はエディタから離れてWebブラウザ（以下、ブラウザ）の話をしたいと思います。ただ、ブラウザの話といっても、エンジニアHubは開発者向けの媒体なので、ブラウザに搭載されている開発者ツール（Developer Tools）のお話を

ブラウザ上で繰り返し同じ操作をしている場合、マクロを組んで自動化できたら便利ですよね。 そこで本記事では、操作を記録して自動クリックを設定できるChrome向け拡張機能「Wildfire」を紹介します。 Chrome上で操作したカーソルやタブ、キーボードの動きを記録し、忠実に再現できます。 専門的なコード知識がなくても、カンタンに設定できるのが魅力です。

JavaScript,jQueryの爆速コーディング、デバッグ方法論の勧め～実践向け逆引き(windows,chrome向け)～JavaScriptjQuery ※2017/4/21にオンロード時のデバッグ方法8を追記しました！ こんにちは！エイチーム引越し侍の加藤です！ みなさんJavaScript書いてますか？ console.logめっちゃ使うよねーって人は目からうろこのデバッグ方法を、 ケース毎に紹介していこうと思います。(僕はconsole.log使いません) サーバーにデバッグ用のコードをアップロードすること無いので、 消さずに意図に反してリリースしてしまう危険性がないのもお勧めです。 前提知識 F12で出てくるデベロッパーツール(Elements, Console, Source, Network)の知識 Ctrl+Shift+Fで外部ソース(js,css)に対して一括検索が

有名なライブラリーを読み込んだり、リアルタイムでプレビューしたり。サクッとコードを書いて確認できる「Web Maker」はオフラインで使えるCodePenライクな開発環境。フロントエンド開発者におすすめのChrome拡張です。 この記事では、筆者のKushagra Gourが自ら開発したWeb Makerについて紹介します。Web Makerはブラウザーの拡張機能で、フロントエンド開発者向けの爆速のオフライン開発環境です。 フロントエンド開発者なら、CodePen、JSBin、JSFiddleなど既存のコード開発環境を使ったことがあるでしょう。どれもすばらしいもので、必要な機能を備えています。私は主に、直面している問題を解決するときやスニペットについて仲間と議論するときに使っていました。しかし、インターネットを経由する必要があり、立ち上げて使えるようになるまでの遅れを避けられないことに、多

Chromium派生ブラウザでChromeウェブストアを見たら、右上の『CHROMEに追加』が無くて拡張機能(CRXファイル)がインストールできない。そんな経験ありませんか。あまりないとは思いますが、もし、そういったブラウザにめぐり合ってしまったときは、直接アドレスを指定して拡張機能をダウンロードをしましょう。 方法は簡単です。ベースとなるアドレスは https://clients2.google.com/service/update2/crx?response=redirect&prodversion=48.0&x=id%3D【ここに拡張機能のアドレスの最後の文字列を入れる】%26installsource%3Dondemand%26uc

めったに使わないけど、使いたいときに使えないと困る機能、「エンコード」。 開発者としては、HTMLで指定した文字コードの通りに表示されているか調べるときに使います。 しかし、Google Chromeは、メニューから「エンコード」を無くしてしまいました。 今までは、ここにあるはずだったのですが......、 この通り、ありません。 「どこにいったんだよ」と、Googleで検索してみたら、この記事がヒットしました。 テキストが適切に表示されない - Chrome ヘルプ Chromeの公式ヘルプです。ここさえ見れば大丈夫です。よかった、よかった。 「Chrome の右上で、メニュー ＞ [その他のツール] ＞ [エンコード] の順にクリックします。」とあります。 ……おい。そこに無いから困っているんだが。 いろいろ探した結果、この記事にたどり着きました。Googleの開発者さんのツイートです

[この記事は米国 Hacks ブログで公開された "Firefox 49 fixes sites designed with Webkit in mind, and more" の抄訳です] 最近 Hacks で公開したいくつかの記事で、 ブラウザー互換性を意識したウェブ制作の重要性 と、優れた開発者がブラウザー互換性を考慮してどのようにウェブを制作しているか について述べてきました。すべての人がウェブを利用できるかどうかは、開発者にかかっています。今日の時点で、多くの 互換性に関する機能 が Firefox のレンダリングエンジンである Gecko に搭載されています。これは WHATWG の定める最新の互換性標準 によるものです。 Firefox の今回行われた更新で、特筆すべき変更が加えられました。それはいくつかの -webkit- のついた属性と、WebKit に固有なインターフェ

Firefox には、よく知られているものの他に、青いキツネのアイコンや、濃紺のものなどがあるのはご存じですか？ これらを私たちはリリースチャンネルと呼んでいます。今回は、それぞれのリリースチャンネルの位置付けと特徴についてご紹介します。 まず、よく見かけるオレンジ色のアイコンの Firefox は、「リリース版」と呼ばれています。Firefox の新機能は、作成されてすぐリリース版に搭載されるわけではありません。新しい機能は、まず Nightly 版へと実装されます。そのあと各リリースチャンネルでさまざまな方に使っていただき、不具合の発見と修正が行われ、問題があらかた修正されるとリリース版へと組み込まれます。 それぞれのリリースチャンネルは、テスト用という以外にも特徴があります。それらを順番にご紹介します。 Firefox Beta公式リリースの前に次期バージョンをテストするためのチャン

READMEやメモ書き等でよく使われるMarkdown記法ですが、これをブラウザで表示できるようにする方法について紹介します。 Firefox Firefoxを起動します。 Markdown Viewer – 🦊 Firefox (ja) 向け拡張機能を入手より、アドオンを追加します。 Google Chrome, Vivaldi Google Chrome (Vivaldi) を起動します。 Markdown Preview Plus - Chrome ウェブストアより、アプリを追加します。 chrome://extensionsにアクセスします。 チェックを入れます。 をクリックします。 Optionsをクリックします。 チェックを外します。 共通 mdファイルの関連付けをブラウザに設定します。

chrome 34 あたりから警告出るようになりました。 chrome 33-35 の周辺で警告が出続けます。 CRX 、 拡張子UserJSもダメです。 以前は、拡張子 sample.user.js を放り込んでいけばユーザーJSが使えて便利でしたが。ソレもできなくなりました。 自分で作った野良拡張機能をChromeに放り込めなくなっています。 強制的に disabled にされます。 開発者モードでもダメです。 警告が出続けます。 警告くらいべつにどってことないけど、起動時に毎回出るのはツライ。 対処法 chrome のチャンネルを変える。 beta チャンネルを使う（← 使えない。2016-05-08確認 dev チャンネルを使う（← JS の互換性エラーでバグるサイトが多すぎ ex ドコモ） その他のブラウザを使う vivalid （←オススメ Chromium Comodo Dr

以前、Githubに上げる際のMarkdownを手軽に確認したいと下記のような記事を書いた GithubのMarkdownを手軽に確認したかった - 沖の雑記帳 だが、実はChromeの拡張機能にMarkdown Preview Plusというのがあってこれが結構手軽で便利だった。 本当にちょっと確認するだけならこちらのほうが手軽かもしれない。 使い方は簡単だけどローカル環境で試すときは少し注意点がある。 まず、GithubのMarkdown確認用に使うときはオプションのDefault CSSのドロップダウンからGithubを選んでおくと良い。 また独自のCSSを使用することも可能となっている。 ローカル環境で試す際には必ず下記の設定を行なっておく必要がある。 拡張機能に入りMarkdown Preview Plusの下にある「ファイルのURLへのアクセスを許可する」にチェックを入れておく