Webブラウザの操作をJavaScriptで自動化。Headless Chromeのフレームワーク「Puppeteer」がバージョン1.0に到達。ChromeのDevToolsチームが開発
UIを持たずスクリプトから操作可能なWebブラウザのHeadless Chromeを利用するためのフレームワーク「Puppeteer」がバージョン1.0に到達した。Webアプリケーションの自動テストなどに利用可能だ。 GoogleのWebブラウザ「Chrome」は、ユーザーインターフェイスを持たずコマンドラインやリモートデバッグ機能を通じてWebブラウザを操作できる「Headless Chrome」機能を備えています。この機能は2017年6月にリリースされた「Chrome 59」から実現されたものです。 Headless Chromeを利用すると人間がWebブラウザをマウスやキーボードで操作することなく、プログラムでHeadless Chromeを起動し、特定のWebページを読み込み、画面キャプチャの取得や、指定された場所をクリックし、値を入力し結果を取得する、といった操作を自動的に行わせ
2018年のWeb標準 | gihyo.jp
🚩 about:configにてdom.moduleScripts.enabledを有効した時のみ。 デスクトップ環境については、開発が終了しているIE11を含め、EdgeとFirefoxがサポートしていないので、しばらくはポリフィルであるwebcomponents/webcomponentsjsの利用が前提になるでしょう。一方で、モバイル環境についてはAndroidとiOSにおいてほぼすべてを占めるChromeとSafariがこれらの仕様をサポートしており、既にモバイルWebにおいてはWeb Componentsを充分に利用できる状況にあると言えます。モバイルWebをターゲットとしているサービスであれば積極的に導入していけるのはもちろんのこと、ターゲットブラウザを限定しているWebアプリケーションなどでも試してみる価値はあります。 React、Angular、Vueといったライブラリに
フロントエンドエンジニアが2017年触ったWebの技術まとめ(非フロントエンド含む) - Qiita
Deleted articles cannot be recovered. Draft of this article would be also deleted. Are you sure you want to delete this article? 2017年ももう終わりなので、自分用のメモも兼ねて今年触った技術をざっとメモしてみる。 フロントエンドに対しては大凡モダンなものを使っているけれど、他についてはその限りではないので、自分が古いと感じるものについては来年以降移行したいもの、手をつけたいものもあわせてまとめる。 ちなみに今年のGitHubで見えるだけのアクティビティとしてはこんな感じ。そこそこコードは書いた。 技術の分類 とりあえず以下でカテゴライズしておく。そこそこその他はありそう。 Webフロントエンド Webバックエンド その他Node周り インフラ / ミドルウェア
次のリリースであるwebpack 4の主な変更点まとめ - 技術探し
移行ガイド abouthiroppy.hatenablog.jp ドワンゴのアドベントカレンダーの17日が空いているので本来その予定で書かれた記事ではないですが、そこに埋めます。 2日連続になってしまった。。 qiita.com Happy Xmas, Noders! #Nodejs pic.twitter.com/Rsxr8SbeUz— hiroppy😶 (@about_hiroppy) 2017年12月24日 さて、今年は、webpack3.0.0が2017/06にリリースされました🎉 (現在、3.10.0) medium.com After we released webpack v2, we made some promises to the community. We promised that we would deliver the features you voted
WebAssembly対応、主要ブラウザChrome/Firefox/Edge/Safariで整う。Webアプリの開発言語としてJavaScript以外の選択肢は広がるか？
主要なWebブラウザでのWebAssembly対応が整った。これによりJavaScriptを超える高速なWebアプリケーションの実行に加え、JavaScript以外の言語によるWebアプリ開発の選択肢が開かれることになる。 WebAssemblyは、Webブラウザ上でネイティブコードに近い実行速度で高速に実行できるバイナリフォーマットを実現しようと、マイクロソフト、Google、Mozilla、Appleなどの主要なWebブラウザベンダがW3CのWebAssembly Community Groupなどを通じて共同で開発に取り組んでいる技術です。 主要なWebブラウザによるWebAssembly対応が整う 1年前の2016年11月には、各社が足並みをそろえてWebAssemblyの試験的実装を発表し、2017年2月にはWebAssembly APIとバイナリフォーマットについて主要ブラウザ
ISUCON7予選のNode.js参考実装を担当させていただきました - Qiita
ISUCON7のNode.js版の参考実装の作成を担当させていただきました。 参加者のときとは全然別視点で、得られたことが沢山ありました。 Twitterでもつらつらと書いてたのですが、まとめた振り返りを書きたいと思います。 なお参考実装のリポジトリはこちらからご確認いただけます。 — ISUCON7 予選問題の公開と解説 : ISUCON公式Blog 自分のISUCON歴 ISUCON5, 6と二回参加し、どちらも予選敗退してます。 ちなみに過去二回ともGoでの挑戦で、Node.jsで挑んだことはありませんでした。 なぜやったか 自分は参加メンバーを集めきれなかっため、 Node.js版で参加したいという知り合いから「Node.js版に清き一票を！！」と推されて一票入れ、 あとは今年のISUCONには関わらず終わりかなと思っていました。 ISUCON参加予定者にアンケートです。PHP,
GitHubでもっとも人気の言語はJavaScript、フォークされたのはTensorFlow。GitHubが今年の統計情報「The State of the Octoverse 2017」を発表
GitHubでもっとも人気の言語はJavaScript、フォークされたのはTensorFlow。GitHubが今年の統計情報「The State of the Octoverse 2017」を発表 GitHubは、2017年10月時点でのGitHubの利用者数やリポジトリ数などGitHubの統計情報をまとめた「The State of the Octoverse 2017」を発表しました。 今年で10年となるGitHubのユーザー数は2400万人、組織数は1500万。リポジトリ数は6700万個。過去1年で10億回コミットが実行され、1250万のアクティブなイシュー、130万回の新規プルリクエスト発行などが明らかにされました。 また、もっとも人気のある言語はJavaScriptが圧倒的で、次がPython、Javaが続いています。 もっともフォークされたプロジェクトはTensorFlow、次
The State of Web Components
2017年9月24日に開催された HTML5 Conference 2017 の「The State of Web Components」のセッション資料です。
Google Chrome 61で追加されたscroll-behaviorを考える | フロントエンドBlog | ミツエーリンクス
2017年9月26日 Google Chrome 61で追加されたscroll-behaviorを考える UI開発者 泉口 9月21日にStable ChannelのGoogle Chromeがバージョン61にアップデートされました。 Webサイト開発において嬉しい機能はwindow.visualViewportによるビューポートの数値取得や、<script type="module">によるJavaScriptモジュールのネイティブサポート、JavaScriptからAndroidネイティブアプリへのURL共有が可能になるWeb Share APIなどがありますが、Chrome 61ではWebアプリケーションからUSBデバイスを直接操作するWebUSB APIが搭載され、外部デバイスの操作までできるとなると、もはやブラウザの範囲を超えた印象を持ちます。 今回はscroll-behavior
thank-you-starsで利用しているnpmパッケージに気軽にスターを送る - teppeis blog
先週、こういうツイートを見て、 OSSを使っているなら、GitHubのリポジトリにそっとスターをつけると開発者のキャリアにわりと直接的に貢献できるのでお薦めです。少額の寄付より効果があるかも— Taro L. Saito (@taroleo) 2017年8月15日 共感したのでサクッと作った。 github.com package.jsonと同じディレクトリで実行するだけで、depsとdevDepsのパッケージのGitHubリポジトリにスターできる。 事前にパーソナルトークンをホームディレクトリに保存しておく必要があるけど、その辺はREADMEを読んでくれ。 依存に入れて使っているということは、それなりに恩恵を受けているということなので、問答無用でスターを送ってしまって良いと思う。 孫依存のパッケージにも送るか迷ったけど、npm的にそこ含めると一気に数が膨れてしまうのでやめた。 これでみん
もうReactのフォームで消耗したくないので、HoCベースのフォームライブラリを作った - wadackel.me
2017 年。React のフォームに消耗しました。 いくつか良さそうなフォームライブラリはありますが、個人的に満足のいくものが無かったので、とあるプロジェクトで実装したものをベースにしてライブラリにまとめました。 作ったもの react-drip-form という、HoC ベースで React のフォームコンポーネントを構築するライブラリを作りました。元となるコードを書いている時、「さくっとフォームの実装を済ませてゆっくりコーヒーでも飲みてぇ…」という気持ちがかなり高まってたので、コーヒーを連想させる名前にしてみました。 wadackel/react-drip-form https://github.com/wadackel/react-drip-form ドキュメントのページでは、Create React App を使った Quick Start もあるので、さくっと試すことが出来ると
2017年JavaScriptのテスト概論 | POSTD
本稿は、JavaScriptのテストについて最も重要な根拠、用語、ツール、アプローチなどの知識を身に着けることを目的とした簡略版ガイドブックです。本稿で検討する数々の側面に関する最新の秀逸な記事も紹介しつつ、私たちが経験的に得たことも多少付け加えたいと思います。 Facebookによるテスト用フレームワークであるJestのロゴをご覧ください。 見てお分かりのように、このフレームワークは「苦痛のない」JavaScriptのテストをスローガンに掲げています。しかし、 “次のように言う人” もいます。 苦痛のないテストなんてあり得ない。 実際、Facebookはこのスローガンを掲げるだけの素晴らしい理由があります。一般的にJSのデベロッパは Webサイトのテストにあまり満足していません 。JSのテストには制限があり、実装が難しく、低速である傾向があります。 一方、正しい戦略を立てて適切にツールを
SPAにおけるCSSについて、ひとつの解（追記あり） - エンジニアをリングする
SPAにおけるCSSのありかたについてずっと悩んでたけど昨日今日で一筋の光明が見えた— よしこ (@yoshiko_pg) 2017年4月7日 この話を簡単にまとめておこうと思います。 結論を先に書くと「今のところtemplate literal内にCSSを記述する形式のCSS in JSがいい感じ。Reactならstyled-componetnsが良かった」という感じです。 悩んでいたこと コンポーネント指向でSPAを作っていく上で、CSS（というかスタイリング）はどう書いていったらいいんだろう？ということに結構悩んでいました。 HTMLとJSがコンポーネントとしてまとまっていく中でCSSだけは今まで通り別物として扱い、BEMなどでグローバルスコープと戦うのか？はたまたCSSの枠をはみ出てJSコンポーネントの粒度に合わせたコンポーネント化をするのか？ 加えて、見た目も挙動も複雑なアプリケ
Selenium禁止 - Qiita
こんにちは！ 今日もAPIがアレなWebサービスをアレしてますか！ W3C WebDriverでは、WebDriverによるアクセスを禁止できる 実は、W3Cが規定するWebDriver規格では、WebDriverによる自動アクセスであることを判別できるAPIが定義されています。 https://www.w3.org/TR/webdriver/#interface 具体的には、Webブラウザー上のJavaScriptですと navigator.webdriver の値で判別できます。この値は、現在の実装状況を見る限りでは、次のように動作することがデファクトになっているようです。 WebDriverによる自動アクセスの場合は true 自動アクセスでない、ユーザー操作の場合は undefined この値を応用すれば、WebDriverによるアクセスを禁止できるということになります。 例えば次
WebmentionがW3C勧告に | フロントエンドBlog | ミツエーリンクス
2017年1月12日、WebmentionがW3C勧告になりました。 WebmentionはTrackbackに類似したプロトコルのひとつで、サイト上での言及を任意のURLに通知する方法です。 通知の受信側からみれば、他サイトにおいて言及された際、その通知を受信する方法の1つです。 Webmention仕様は、Pingback仕様の簡略版として策定が始まりました。 今ではPingbackのモダンなアップデート版であると言及されています。 WebmentionはHTTPとx-www-form-urlencoded（パーセントエンコーディング）を用いた、HTMLにおけるformの形式で送信されます。 これが、XML-RPCを用いているPingbackとの大きな違いであり、簡略化されているといわれるゆえんです。 すでにWordPressのプラグインが存在している（GitHub）など、各方面での実
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
WebUSBでレイヤーが低まるWeb開発 - Speaker Deck
SlackでのJavaScriptからTypeScriptへの移行
TwitterによるReactベースのモバイルWebスタックはネイティブのパフォーマンスに匹敵する