--headless時代の本命？ Chrome を Node.jsから操作するライブラリ puppeteer について - Qiita
--headless時代の本命？ Chrome を Node.jsから操作するライブラリ puppeteer についてJavaScriptChromee2e puppeteer はHeadless Chrome をNode.jsで操作しやすくしたライブラリです。今日(※ 2017/8/17)一日で凄い勢いでGitHubのトレンド入りしており、TLでも話題になっていたので、早速触ってみました。 Node.jsでChromeを操作するというコンテキストにおいては、Nightmare.jsと同じレイヤに属するプロダクトですね。Nightmare.jsはElectronを介在させることで、Chromeの操作を実現していましたが、今年の5月にChromeでheadlessモードが利用可能になって以降1、headless Chromeを直接操作するライブラリが色々と出始めていますね。この系統は、chr
クリック1発でテトリスが遊べる「Chrome拡張機能」を、できるだけ簡単に開発してみた！
ふとしたきっかけで、急に「テトリス」が遊びたくなったので、いろいろ探してみたのですが良いのが見つからず…。 普段からChromeブラウザを愛用していることから、「Chromeウェブストア」も検索したのですが、お手頃感のあるモノが見つからず…。 結局のところ、探すのが辛くなってきたので、自分好みの気軽に遊べるテトリスを、「Chrome拡張機能」として可能な限り簡単に作ってみました。 ミニマムなChrome拡張機能を作る！そもそも「Chrome拡張機能」は、誰でも簡単に作れるように設計されています。 とりあえず、「アイコンをクリックして◯◯◯する…」みたいな拡張機能は、「HTMLファイル」「マニフェストファイル」「アイコン画像」を用意すればすぐに実現できます。 「HTMLファイル」は、普通にWebページを作る時に用意するモノがあればOKで、まずは以下のミニマムなHTMLを用意します。 inde
Chrome拡張の開発方法まとめ その1：概念編 - Qiita
Chrome拡張の開発に必要な知識とかの覚書です。 この記事では開発の前に知っておくべきChrome拡張の全容について解説していきます。 「実際に開発しながら学ぶ」形式の解説記事は多く見られるのですが、概念についてちゃんとまとめてある記事は見当たらず、そこらへんの理解で結構苦労した覚えがあるので、そういった人達の手助けになればと思います。 対象 Chrome拡張が作りたい人 Javascriptがまあまあわかる人 Chrome拡張の各概念がいまいちわかってない人 概要 まずはChrome拡張の大まかな構造について説明します。 Chrome拡張はHTMLとCSSとJavascriptで作られています。 必要なhtml,css,jsファイルなどと後述のManifest Fileを一つのフォルダにまとめたものが一つの拡張機能のまとまりとなり、zipで圧縮してアップロードすることでストアで公開する
今から３分で，Chromeブラウザの独自アドオンを自作してみよう （jQueryを使ったクローム拡張機能を，開発および動作テストする入門） - 主に言語とシステム開発に関して
今から３分で，Chromeブラウザのアドオン（拡張機能）を作ろう。 ここで作るのは，「表示したWebページの内容をjQueryで加工する」というChromeプラグインだ。 アドオン自作の入門，初歩の第一歩にうってつけ。 作成に必要なツールは，なんとメモ帳だけ。 JavaScriptやJSONなどの「Web系技術」を使って，ちょこっとコーディングするだけで完成してしまう。 わずか３分で作成とインストールを終えるので，今すぐに始めてみよう。 （１）フォルダを作ってjQueryを格納 （２）マニフェストを作成 （３）メイン処理を実装 （４）ブラウザにインストールする （５）動作テスト 使い終わったら 参考資料 （１）フォルダを作ってjQueryを格納 まず，どこでもいいので，適当な名前のフォルダを作成する。 フォルダ名は「hoge」でよい。 下記URLから，jQueryをダウンロード。 先のフォ
ブラウザの閲覧履歴で人生の棚卸し（embulk + elasticsearch + kibanaで可視化） - Qiita
この記事は「エムスリー Advent Calendar 2015」の 22日目の記事です。 はじめに こんにちわ。年末ですね。年末といえば一年を振り返るいい機会ですね。意識の高い人たちが「人生を棚卸しするいい機会ダヨッ★」なんて言っていたような気もします。 過去の自分を振り替えってみると、あーネットサーフィンに無駄な時間を過ごしたなぁ。。なんて後悔の念が湧いてきます。しかし、よく考えてみると、自分がブラウザで何を閲覧していたのか、きちんと振り返ったことがありませんでした。いい機会ですので、この記事では 自分の閲覧履歴を可視化して分析する基盤 を構築してみたいと思います。 ただ、一点ネックなのは、私は chrome => メインブラウザ firefox => ある特定の用途 といったように、2つのブラウザを戦略的に使い分けております。つまり、閲覧履歴データが分散しているわけです。分散してしま
ニコニコメソッドプレゼンを全社会議に取り入れてみたら会議が面白くなった - Uzabase for Engineers
技術チーム竹内([twitter:@chimerast])です。 作ったものが知らない間に記事のネタにされていたので、どんな仕組みで動いているか技術的なところについて書いてみます。どう使われているかの細かい話は、後日ブログ内に別の記事が上がる予定です。 （6/2 追記：「みんなの会」の動画配信システムについて記事を投稿しました。） tech.uzabase.com 全社会議で「ニコニコメソッドプレゼン」 作ったもの: Chrome機能拡張「NicoNico SPEENYA」 作るのに使ったもの Socket.IO Google Chrome機能拡張 Web Animations API Node.js + Express まとめ 宣伝 全社会議で「ニコニコメソッドプレゼン」 だいぶ昔にWeb業界界隈で話題になった(?)ニコニコメソッドプレゼンを、週一の全社会議で取り入れたところ、プレゼンの
service workerを実際のRailsで開発しているサービスに導入してみよう - Qiita
「service worker」とは？ Chrome ソフトウェアエンジニアの@nhiroki_さんによると、 ページのバックグラウンドで動くイベント駆動の JavaScript 環境 （ゆえに “Service” Worker） とのこと。 大きくは現在は2つ特徴がある。 Cache機能 (オフライン環境でのアクセスを可能に) Push機能 (アプリと同様にリエンゲージメントを高める) 引用:Service Worker の紹介 Service Workerのライフサイクルは上記。 - 引用: Service Worker hackathon 2015 - introduction talk 1秒ってのは、人がシームレスに感じる(=違和感なくかなり心地よい)秒数だが、実際今のmobileでの1秒の内訳は上記にある通り、コネクション張ったり通信を発生させる部分で既に大枠を使っている・・・w
Looks Tiqav To Misawa – レス画像を簡単に挿入できるChrome機能拡張
MOONGIFTはオープンソース・ソフトウェアを紹介するブログです。2021年07月16日で更新停止しました チーム内で使うとコミュニケーションがスムーズになりそうですね。 絵文字の流行、そしてアスキーアートの発展の中に生み出された（？）文化がスタンプやレス画像です。言い出しづらい罵詈雑言もマンガを通してなら穏やかに伝えることができたり、褒める際にもちょっとしたアクセントになります。 そんなレス画像をMarkdown形式の中にさりげなく放り込めるのがLooks Tiqav To Misawa（lttm-crx）です。一度使ってみると手放せなくなりますよ。 Looks Tiqav To Misawaの使い方 Chrome ウェブストアで配布されていますのでインストールします。 インストールが終わったら適当なテキストエリアに入力します。Markdownフォーマットで挿入されますので、Markd
ミクミクダンスや波紋、マスクなどリアルな3D表現を可能にするWebGLの作例いろいろ
踊る初音ミクや実物と見紛うほどリアルな水面の波の再現など、ブラウザベースで3Dグラフィックを表現できるWebGLに注目が集まっています。リアルタイムに描画されているとは思えないほどリアルなWebGLを見ることができるサイトをいくつかまとめてみました。 MMD on WebGL http://blog.misanyan.com/mmd.js-master/index.html MMD on WebGLはミクミクダンス(MMD)を踊る初音ミクをぐりぐりと動かすことができるサイト。サイトを開くと、フル3DCGで描かれたミクの姿と、操作方法などが表示されます。操作はキーボードの十字キーやスペースキーなどを使うか、マウスでドラッグして動かすようになっていました。 ということで、さっそくミクに踊ってもらいながらぐりぐりと動かしてみました。画面キャプチャの都合で少しカクカクした動きになってしまいますが、
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
