Build with Chrome Learn how Chrome works, participate in origin trials, and build with Chrome everywhere.
ご無沙汰しております。ウェブボウズを立ち上げて 1 年が経ちました。皆さま如何お過ごしでしょうか。私は、この 1 年間ひとつもブログポストできていません。さらには私の坊主頭(スキンヘッド)にちなんでウェブボウズという名前をつけた個人ブログでありましたが、5 年間共にしたこの Hair-less style から心機一転して 2019 年は髪を育んでいく方針を固めましたので、もはやボウズでもなくなってます。変わり続けることだけが普遍であると胸に刻んで今年も強く生きていきたいと考えております。 さて、最近 Signed HTTP Exchanges やら Performance Budget やらさまざまな面白いことに関わらせていただいて忙殺と幸せを噛み締めている中でも、Chrome Dev Summit 2019 でも大きくフィーチャーされました Portals という新しい HTML 要素
色盲や色弱の人がどのように見えているかシミュレートできるオンラインサービスはいつかありますが、テストサーバーやローカルで利用できないのが残念なところです。 色盲・色弱の人の見え方をシミュレートできるChromeの機能拡張を紹介します。
ブラウザ拡張Selenium IDEで ユーザー操作を記録・再現できる! UIテストの自動化に活用しよう Selenium IDE(セレニウム・アイディーイー)とは、ブラウザ操作を記録・再現できるChrome、Firefoxで利用可能な拡張機能(アドオン)です。 手軽に記録・再現ができるため、アイデア次第で色々な使い方ができます。筆者は、会社の打刻操作(社内サイトへアクセス → ログイン → 打刻ページへ遷移 → 打刻ボタンをクリック)を記録し、自動実行することでいち早く出社ができるようにしていました。 その他にも開発時に繰り返し行うようなデバッグ作業やルーティーン作業を記録することで、以下のような活用もできます。 入力フォームなどに文字を入力する操作を記録しておき、自動入力させる。 ゲームやSPAのデバッグ時に、スタート画面からデバッグしたい画面までの移動操作を記録しておき、任意の画面へ
Not your computer? Use a private browsing window to sign in. Learn more about using Guest mode
Show navigationWhat is V8?V8 is Google’s open source high-performance JavaScript and WebAssembly engine, written in C++. It is used in Chrome and in Node.js, among others. It implements ECMAScript and WebAssembly, and runs on Windows, macOS, and Linux systems that use x64, IA-32, or ARM processors. V8 can be embedded into any C++ application. Latest posts and feature explainersJavaScript's New Sup
2018/12/8追記: 残念ながらこの方法はChrome 71以降で廃止されました。もはや慣れない新デザインで馴染んでいくしかございません・・・。残念。 ------------ Google Chrome 69で、GUIが大きく変更 昨日、Google Chrome 69がリリースされました。 forest.watch.impress.co.jp 米Googleは9月4日(現地時間)、「Google Chrome 69」を正式公開した。初めてのベータ版リリースからちょうど10年という節目を迎えた本バージョンでは、すべてのプラットフォーム(デスクトップ、Android、iOS)で新しいデザインが導入されたほか、さまざまな機能強化や改善が行われている。 気に入らないデザイン 私のchromeも69が降ってきたので、更新してみました。PC版です。 むむ、タブのデザインが変わっている。最近のフ
Headless Chromeのリリースをうけて、PhantomJS のメンテナーが開発の終了を宣言したりとか、ちょっと話題になった Headless Chrome について試してたことをメモっておく。 試したやつのリポジトリ:https://github.com/cyokodog/headless-chrome 概要 ヘッドレス(GUIを表示しない状態)で実行できる Chrome の機能 Chromium と Blink が提供する機能をコマンドラインで利用できる Chrome 59 から利用可(2017/06/08時点ではMAC、Linuxのみ) 活用例 ウェブページのテスト 表示・動作テスト、画像やPDFによる画面のスクリーンショット スクレイピング 認証が必要なサイトでも対応 ヘッドレスで起動する --headless フラグと --disable-gpu フラグ(そのうち指定不要
はじめに DI部のおおたきです。Headless ChromeがWindowsをサポートしたのでWindows上で動かしてみました。 環境 Windows7 Google Chrome 62.0.3202.75 Python 3.6.3 Pleiades 4.7.1 準備 Pythonはすでにインストールしてある前提で進めたいと思います。まずpipでライブラリをインストールします。 C:\Users\ootaki.kentaro>pip install selenium Collecting selenium Using cached selenium-3.6.0-py2.py3-none-any.whl Installing collected packages: selenium Successfully installed selenium-3.6.0 次にWebDirverをここか
指定したページが一般的なブラウザやデバイスでどのように表示されるか、1クリックで確認できるChromeの機能拡張を紹介します。 WindowsからSafari, iOSの確認、macOSからIE, Edge, Androidの確認もできます。 Multi-browser Screenshots Multi-browser Screenshotsで対応しているブラウザ・デバイスは、下記の通り。 ※2018年5月現在 それぞれ、WindowsからでもmacOSからでも利用できます。 Edge 15.0(Windows 10) IE 11.0(Windows 10) Chrome 50.0(Windows 10) Firefox 45.0(Windows 10) Safari 9.1(OS X El Capitan) IE 10.0(Windows 7) IE 9.0(Windows 7) IE
対象ソフトウェア/ハードウェア:Google Chrome 50以降、Opera 37以降、Safari 10以降、iOS 10以降を搭載のiPhone/iPad/iPod touch、Android OS搭載スマートフォン/タブレット、Windows PC、Mac 解説 スマートフォンやタブレットではGPSなどで現在地を検出できることを利用して、今や多くのWebサービスが現在地を活用した便利な機能を提供している。例えば、ユーザーが今いる場所から最も近い飲食店を案内したり、現在地の天気予報を自動的にお知らせしたり、といった具合だ。 ところが、2016年4月ごろからはGoogle Chrome(PC用を含む)で、また2016年9月ごろからはiOS(iPhone/iPad/iPod touch)上のブラウザやMacのSafariで、こうしたWebサービスにアクセスすると現在地の周辺地図が正しく
はじめに 今回は若干組み込みよりですが、使用する言語はCoffeeScriptです。 htmlやcss、JavaScriptなどブラウザで動作する技術を使用し、組み込み機器と通信しよう!という試みです。 あーるえすにーさんにーしー? RS-232C(あーるえすにーさんにーしー)です。 http://ja.wikipedia.org/wiki/RS-232 モデム等と通信するために設計された通信方式です。古いPCには必ずといっていいほどついていましたが(D-SUB 9pin(でぃーさぶきゅーぴん)ってやつですね)、今や、ついている機種のほうが少ないと思います。ただ、組み込み業界ではまだまだ現役です。 PCについていない場合、以下のような変換をケーブルを使うのが一般的じゃないでしょうか。この変換を使用することでUSB通信がRS-232Cレベルの通信に変換されます。PCから見るともともと実装され
ChromeでうごくAmiga 500エミュレータで気分は80年代2015.12.18 22:0010,729 abcxyz Googleの研究者Christian Stefansenさんが、80年代に人気を博したパソコンCommodore Amiga 500のエミュレーターを作っちゃいました。Chromeブラウザ上で動き、ちゃんと機能もします。こちらで試すことができますよ。 このAmigaエミュレーターは、「コンパイルされたCとC コードをブラウザ上で効率的かつ安全に走らせるためのサンドボックス」であるNative Clientで動くようになっています。エミュレーターのコードはOpen Source Universal Amiga Emulatorをベースにしており、「大体40万行くらい」のコードで書かれているとか。 サイトのF&Qでは「メインページではAmigaを起動し、フロッピーディ
その名もFontface Ninja。 以下のように、調べたいページで拡張忍者アイコンをクリックすると、そのページで使われているフォント名と、フォントサイズ、幅なんかをさらっと調べてくれる。 Chrome拡張 ダウンロードはこちら これで忍者をChromeに住まわせることができます。 あとは調べたいページで追加したアイコンをクリック。 すると以下のように手軽に調べることができます。 特に海外のサイトだとすんごい気になるフォントがたまに出てくるので非常に有用なツールです。 ただまぁ・・・その・・・日本語フォント名がうまいこと表示されないです。単純に忍者アイコンが好きで試したんですけどね。 ここまで書いておいてあれですけど、Webデザイナーなら入れていて当然と言えるツールのCSSViewerのが日本語フォントもちゃんとわかるので便利ですけどね・・・。 CSSViewer 気に入ったら是非おため
Chromebookを久しく使っていないみなさん。Chromebookが大きく進化を遂げたことを知っていますか。でも、Chrome OSを試してみたいというだけの理由で、わざわざお金を払って新しいノートPCを買う必要はもうありません。『CloudReady』というアプリケーションのおかげで、ほぼどんなノートPCにもChrome OSをインストールできるのです。 正確には、インストールできるのはChrome OSではなく、そのオープンソース版である『Chromium OS』です(Google社が設計したものなので、心配は無用です)。しかも、Neverware社のCloudReadyを使えば、たいていのノートPCに、これ以上ないくらい簡単にChromium OSをインストールできます。ドライバーをあれこれいじったり、対応するハードウェアを探したりする必要もありません。クリックするだけでインスト
RSSリーダーを作成中。 Google Chrome Extensions でRSSリーダーを作成する ・・・といっても、ひとつのサイトしか見れないですが。 RSSデータを取得して表示するところまではうまくいったのですが、 リンクをクリックしても反応がないです。 リンクがクリックされたとき、新しくタブを開きblogを表示するようにしてみます。 manifest.json 新しくタブを作成するには、 「chrome.tabs.create」 というメソッドを使用します。 拡張機能の考え方として、基本的に全ての機能はDeny。 使用したい機能があればmanifest.jsonにAllowの設定を入れる。 という方針のようで、初期状態ではこのメソッドは使用できません。 manifest.jsonのpermissionsに"tabs"という記載を追加して、 chrome.tabs.createが使
chrome.storage の API を使う localStorage を使うとこれはこれで動くのですが、もう少し扱いやすい方法がないか調べたところ、chrome.storage という localStorage に似た方法を見つけました。 chrome.storage – Google Chrome localStorage の場合、background.js を通して Message Passing でデータのやり取りを行う必要がある。 これに対し chrome.storage では background.js なしで、ダイレクトに content_scripts 等から chrome.storage のデータにアクセスできます。また、chrome.storage.onChanged.addListener の API で、データ変更に対するコールバックを簡単に登録できて便利。 以
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く