Chrome の loading="lazy" を試す | バシャログ。
どうもfujiharaです。梅雨の時期がやってきましたね。 皆さん梅雨の対策はしていますか？私はしていません。 本日は Chrome の img のプロパティ loading を試しましたので、 ご紹介します。 Loading Attribute 今まで画像の遅延読み込みする場合は img タグに クラスをつけて、 疑似画像を出しておき、スクロール範囲に入ったらローディングして表示などしていましたが、 これがあると自動で遅延読込してくれます。(Chrome) 既存のイメージと動画の遅延読み込み 確認 4月くらいでしたか、Chrome 75 からと言われていましたが、クロームのステータスを見ると 76になってますね。当初使えると思ってやってみたんですが、chrome:flags で Enable lazy image loading を Enabled にしてあげないと有効になりませんでした
ブラウザで特定のドメインをブロックする方法 (Chrome 小ネタ) | バシャログ。
どうもfujiharaです。あつすぎて氷ばっかり食べちゃいます。 本日は社内ネットワークから特定のドメインへのアクセスが許可されていない状況を擬似的に作る方法をご紹介いたします。 背景 Webページに YouTubeの埋め込み動画を表示するサイトで、環境によってはYouTubeドメインへのアクセスが許可されていない場合が あるのでその場合はスライドショーを表示して欲しいという要望がありました。 発見 どうやってこの状況を作るかってときにネットを探すと hosts を書き換えればできるよってことでなるほどと思い書き換えました。 そうしたら、「あれ？つながってる」。。ブラウザを一旦閉じるとうまくいきました。 確認方法ですが、Chromeの開発ツールでネットワークタブを見てブロックしたいNameのstatusを確認していました。 何気なく右クリックしたら、なんとありました！ 赤枠部分が上の画像で
Headless Chrome を触ってみた。 | バシャログ。
どうもfujiharaです。今年の寒さは例年とちょっと違いますね、多分。 昨年の寒さを覚えていないのですが、朝が寒すぎて辛すぎる思いが去年より強いです。 本日は発表されてだいぶ経ちますが、触ったことがないHeadless Chromeの基本的な使い方を紹介します。 Chrome59 から搭載されたUIを使用しないでChromeを実行でき、コマンドラインでChromeの各機能が使えるものです。 参考：Headless Chrome 使い方 今回は参考URL内で紹介されているDomの出力とPDF、スクリーンショットをご紹介します。今回の実行はMacで行いました。 chromeコマンドをaliasに登録してあげると楽です。 ~/.bashrc内追記 alias chrome="/Applications/Google\ Chrome.app/Contents/MacOS/Google\ Chro
Chromeで保存しているパスワードはインポート・エクスポートできる！2018年1月版 | バシャログ。
前回のChromeで保存しているパスワードはインポート・エクスポートできる！2017年11月版を書いた後、よしよし次はCanaryから通常のバージョンに設定が反映されたらだな、と思ってはいたのですがすっかり忘れていました。えへへ(・ω<) どうやら通常バージョンにもその設定がやって来たようなので、一応まとめます。 Mac版のChrome（バージョン: 63.0.3239.132）で確認しました。 新しい手順はどうなったか（2018年1月版） 通常のChromeを立ち上げる パスワードが保存されているGoogleのアカウントでログイン パスワードを同期させる。 設定＞パスワードを管理をクリック。 「どの端末からでもpasswords.google.comでパスワードにアクセスできます」のリンクをクリック。 ここで再度パスワードを入力。 ※二段階認証している場合はここでも聞かれます。 「chr
Chromeで保存しているパスワードはインポート・エクスポートできる！2017年8月版 | バシャログ。
最新版 2018年1月版のChromeで保存しているパスワードはインポート・エクスポートできる！はこちらをどうぞ。 2017年11月版のChromeで保存しているパスワードはインポート・エクスポートできる！ はこちらをどうぞ。 先日、以前の記事Chromeで保存しているパスワードはインポート・エクスポートできる！ についてお問い合わせいただきましたyanagimachiです。 一週間前に投稿したばかりなのですが、お問い合わせいただいた件が他の方にも為になることでしたので、ご紹介します。 パスワードのインポートとエクスポートのボタンが表示されません 前回の記事の手順を踏んで、会社の自分のPC（Mac / Chromeの60.0.3112.90 (64-bit)）で確認したところ、本当に表示されませんでした。 ググってみた どうやら、マテリアルデザインに変更された時に隠し機能のボタンが追加され
chrome デベロッパーツールのマルチデバイス開発向け機能「デバイスモード」 | バシャログ。
朝晩が寒くなりつつあり、戦々恐々としている kimoto です。寒いの嫌い。暑いのも嫌いだけど。 さて、すでに知っている人はもちろん沢山いると思いますが、chrome のデベロッパーツールの中の「デバイスモード」が便利なので、さらっとご紹介。 デベロッパーツールとは デベロッパーツールは右上の「三」みたいなアイコンから、「その他ツール」→「デベロッパーツール」で使えます。 デベロッパーツールは、HTML 構造の確認や読み込み時間の測定、JavaScript のデバッグツールなど、機能は多岐にわたります。 その中で今回紹介するのは「デバイスモード」です。 デベロッパーツールの左上の携帯アイコンからデバイスモードに入れます。 デバイスモードのここが便利！いろいろなデバイスをシミュレートできる デバイスモードに入ると、画面はこんな感じになります。 左上の「Device」というところのプルダウンを
全てのタブを瞬時に非表示にするChrome拡張「PanicButton」 | バシャログ。
先週末はひたすらクッキーを焼いていたfukasawaです。こんにちは。 何故、貴重な休日をあのブラウザゲームに費やしてしまったのか…。 さて、今回は全てのタブを瞬時に非表示にするChrome拡張「PanicButton」のご紹介です。これを使えば、人前でこっそりクッキーを焼いていてもササッと隠すことができます。 Web開発には全く関係ない機能ですが、セキュリティ上あまり見られたくないサイトを閲覧しているときにも使えるのではないでしょうか。 PanicButton インストール Chromeから下記のURLにアクセスし、[+無料]をクリックしてインストールします。 PanicButton インストールに成功すると、ツールバーにボタンが表示されます。 使い方 ボタンを押すとタブが非表示になり、もう一回押すと表示されます。 一度非表示にしたタブを再び表示すると、画面がリロードされます 別ウインド
Chrome で複数のユーザを使い分ける | バシャログ。
昨日の帰り空を見たら、北の空ではピカピカと雷が光ってるのに南の空には丸い月が出ていて、不気味ながらも幻想的な雰囲気を味わった kimoto です。 このまま世界が終わりが来るのかと思ったけど朝が来て良かったです。 最近、chrome がユーザを複数持てる事を今更ながら知りました。 ほんと今更ですみません。 これを使えば、同じ Web サービスにそれぞれ違うユーザでログインすることもできるので、開発中のサイトの確認などがとても楽になります。 もっと早くに知ってれば…！ ということで、書いておきます。 使い方は簡単。Chrome の「設定」の「ユーザ」で「新しいユーザを追加」するだけです。 あとはアイコンと名前を設定してやれば OK。 ちなみにユーザ名は、Chrome が最初適当なのを入れてくれてますが、これがランダムで変わるので結構面白いです。 ユーザが複数設定されていると、タブの左側に現在
Weblioのポップアップ辞書を表示するChrome拡張機能 | バシャログ。
暑いからとエレベーターの中で冷たいペットボトルを両脇に挟んでいたら、途中で人が乗ってきて若干気まずい思いをしたfukasawaです。こんにちは。 今回ご紹介するのはWeblioのポップアップ辞書を表示させるChrome拡張機能「Weblio エクステンション」です。Web開発とはあまり関係が無いのですが、ニュース等を読んでいてわからない言葉がでてきたときによく使わせていただいています。 インストール Chromeから下記のURLにアクセスし、[+CROMEに追加]をクリックしてインストールします。 Weblio エクステンション 使い方 調べたい言葉を選択し、Ctrlキーを押下するとポップアップ辞書が表示されます。 ポップアップでは辞書の一部しか表示されませんが「>>続きを読む」をクリックすると全て読むことができます。 英語を調べたい場合 上記でご紹介したWeblioエクステンションでも英
jQueryのセレクタを試せるChrome拡張機能 | バシャログ。
進撃の巨人の新刊が今週発売になりますね。fukasawaです。こんにちは。 今回はChromeの拡張機能「jQuery Debugger」のご紹介です。この拡張機能を使うことで何ができるかというと、jQueryのセレクタを簡単に試すことができます。 jQueryのセレクタを登録し、選択すると… そのセレクタで拾える要素がハイライトされる といった感じです。 インストール Chromeから下記のURLにアクセスし、[+CROMEに追加]をクリックしてインストールします。 jQuery Debugger 使い方 1. セレクタを試したいページにアクセスし、[F12]キーを押してDeveloper Toolsを起動します。 2. 右端の方に[jQuery Selector Inspector]が表示されているのでそれをクリック 3. テキストボックスに試したいセレクタを入力し、[ + ]ボタンク
短期集中連載：はてなブックマークのユーザースタイルシートで遊んでみるVol.01「はてなブッ旧マーク」テーマ | バシャログ。
関東は昨日、稀に見る大雪。雪だるまを娘と作りましたishidaです。 みなさん、無事に出社できましたでしょうか？ さてさて年明け早々は、新はてなブックマークの話題で持ちきりな感じですね。 こちらに便乗して僕も新はてなブックマークを書き換えるユーザースタイルシートを作ってみました。 個人的にリニューアル前のデザインが好きだったので、ほぼ以前のスタイルに戻すような感じにしてます。 全体像はこんなんです。題して、 「はてなブ旧マーク」 ネーミングセンスなくてごめんなさい。 大きくは、以下のような点を変更してます。 ヘッダー部分のレイアウトを旧デザインに極力変更 ブックマーク数はデフォルトの赤いヤツに変更 テキストリンクもデフォルトのブルーに変更 サムネイルは動画カテゴリ以外は非表示 直近コメントを非表示 デフォルトの右カラムは非表示にして、動画カテゴリを掲載 新着ニュース、はてなブログの人気エン
Chrome Developer Tools を使いこなす！必読エントリー5つ | バシャログ。
こんにちはLatinです。もうすぐ世界が終わるらしいのでバシャログ。も今回が最後のエントリーになりそうです･･･。 あ、万が一終わらなかったらもちろんブログは継続していきます。（汗） 今回はChrome Developer Tools のエントリーのまとめです。 私自身はこれまで Firefox の Firebug を使っていましたが、やはりあの重たいブラウザ動作がイヤになり、 自然と Chrome を立ち上げる機会が増えていきました。 Firebug も Chrome Developer Tools も基本的に出来る事は同じなのですが、UI が変わっただけで結構最初は使い辛い印象をもったりしますよね。 そんな使い初めの時に参考にさせていただいたエントリーを紹介とともに、まとめさせていただきました。皆様、ありがとうございますです。 ～入門編～ 動画レッスン Chrome Developer
ブラウザのリロード要らず？ WebStorm/PhpStormのLiveEdit機能 | バシャログ。
全然Hotな話題ではなくなりましたがiPhone5をようやく手に入れました。LTEは速いです。リリースから1ヶ月以上経っていて、同じバシャログ。メンバーから「あ、まだ手に入れてなかったんだ」的な目で見られた…などということはありません。 本日はまだまだマイナーなWeb系IDE WebStorm / PhpStormの便利機能 LiveEditを紹介します。 LiveEditとはどんな機能か PhpStorm 5.0で組み込みの機能になったもので、もともとは"Instant HTML Editing" プラグインと呼ばれていたものだそうです。大きく分けて2つの機能があります。、1つ目はHTML/CSS/JavaScriptの修正を即座にブラウザ表示に反映させる機能、2つ目は、エディタのカーソルがある位置の要素をブラウザ上でハイライトさせる機能です。現時点ではChrome専用です。文で説明する
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
