Google Data Studioのスクリーンショットを定期的にSlackに投稿するツールを作った - 日直地獄
サービスを運用していく上でメンバーに数字感を身に付けてもらったり、リリースした機能の利用状況、狙い通り正常に動作しているかを把握してもらったりすることはとても大事です。 同じオフィスにいる場合には、常時モニタに表示するなど工夫が可能ですが、リモートワーク下においてはそれも困難になりました*1。 これにまつわる、いくつかの課題を解決するためにGoogle Data Studio *2の任意のページのスクリーンショットを定期的にSlackに投稿するGoogle Apps Scriptを書きました。 利用開始する前にはSlack側でAppを作成したりそれなりに準備が必要なのですが、一度設定したら、あとは手がかからなくなるので、費用対効果はいいと思います。 詳しい導入方法などは下記を参照してください。 https://github.com/airreader/datastudio-2-slack
JenkinsにHeadless Chromeを入れて定期的にスクショをSlackに投げデザイン崩れがないかチェックする - Qiita
Headless Chrome（ヘッドレス Chrome)がついに、Chrome 59に搭載されました。 GUIのないLinux環境でも簡単にChromeが実行できるようになりました。 これでリリース後にデザイン崩れをチェックしたり、毎日のサイトチェックなんかにも利用できます。 試しに、Yahoo! JAPANのトップのニュース確認という体で毎時にスクショを撮ってみます。 Google ChromeをUbuntuにインストール 今回はUbuntuの環境だったのでapt-getを使います。 apt-getでChromeをインストールできるようにする $ echo "deb http://dl.google.com/linux/chrome/deb/ stable main" | sudo tee -a /etc/apt/sources.list deb http://dl.google.co
GUIのスクリーンショットを読み込むと必要なコードを生成する仕組みでスタートアップが人工知能を活用
by Gwydion M Williams デンマークのIT系スタートアップであるUIzard Technologiesが人工知能(AI)を利用して、グラフィカルユーザーインターフェイス(GUI)のスクリーンショットを読み込ませると、そのGUIに必要なコード(storyboardファイルやHTMLファイル)を出力するというアプリケーションを開発しました。YouTubeではそのデモンストレーション映像が公開されています。 pix2code - YouTube 「pix2code」はGUIのスクリーンショットからコードを生成します。 まず用意したのはモバイル端末向けのGUI。単なるスクリーンショットのPNG画像です。 これをpix2codeに読み込ませます。pix2codeではターゲットとなるプラットフォームを「iOS」「Android」「Web」の3つから選べるようで、ここではiOSを選んで
スクリーンショットを撮影した後、枠を描いたりテキストを書くことができ、その後Slack,imgur等にアップロードできるchrome拡張作った - 日直地獄
作った。すげー便利です。 chrome.google.com 使い方紹介動画 作った理由等 例えば、ページの全体を撮影して、そこに解説を書き込みたいと思った時に、何らかの手段でスクリーンショットを撮影して、ローカルにダウンロードし、プレビューかなんかで枠を記載し再アップロードする*1というという手順が必要になる。そうすると、ローカルのスクリーンショットファイルはものすごい勢いで増えていくし、なんだかすげー大変だったので、これが続くよりも拡張を書いたほうがトータル効率が良いと思い、趣味で書いた。 その後、興が乗り、便利な機能・不要だけどいい感じの機能を実装できたので満足している。特にスクリーンショットに任意の画像をスタンプとして貼り付けられる機能は、コラ作成に便利そうだけど、仕事で活躍する未来は見えない。 ちなみに下記の機能を実装しています。便利なのでどうぞご利用ください。 スクリーンショッ
Nightmare + GraphicsMagick + AVA でUIテストの差分を可視化する
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127
docker コンテナ + capybara-webkit でウェブサイトのスクリーンショットを撮影する - Qiita
FROM ruby RUN apt-get update && apt-get install -y libqt4-dev libqtwebkit-dev xvfb fonts-ipafont fonts-ipafont-gothic fonts-ipafont-mincho RUN gem install capybara-webkit --no-ri --no-rdoc ADD fonts.conf /etc/fonts/fonts.conf ADD /capture.rb /capture.rb ADD /capture.sh /capture.sh RUN chmod +x /capture.sh ENTRYPOINT ["/capture.sh"] libqt4-dev と libqtwebkit-dev はヘッドレスブラウザを立ち上げるために必要なやつ。 xvfb はヘッドレス
flexboxのバグに立ち向かう（flexboxバグまとめ） - Qiita
注）本文中の「コンテナ」「アイテム」について 本文中でいう「コンテナ」「アイテム」は、flexコンテナとflexアイテムのことを指しています。 コンテナ display: flexや、wrap指定などをする 複数のアイテムを含む アイテム flex: 1 0 0%などの指定をする 1. アイテム潰れる問題（Safari） Chrome Safari 潰れてますね。 起きる条件 Safari なぜ コンテンツの最小サイズを尊重してくれない模様 どうすればいいのか flex-shrinkに0を指定 flex-basisにautoを指定（デフォ値なので、指定がなければそのままでOK） Safari10にて修正済み（つまり、SierraとiOS 10以降では対応不要） 2. align-items:center はみ出す問題 Chrome IE11 はみ出てますね。 起きる条件 IE10-11 f
Firefoxの開発ツールでページ全体のスクリーンショットを作成する - Qiita
Firefoxの32より開発ツールにページ全体のスクリーンショットを撮影する機能が追加され、アドオンなしで、ページ全体のスクリーンショットを作成することができるようになりました。 このエントリでは、スクリーンショットを作成する手順を記述します。 開発ツールの設定(①)を開き、「ページ全体のスクリーンショットを撮影する」(②)にチェックを入れます。チェックを入れると、カメラのアイコンが表示されます。 カメラのアイコンをクリックすると、ブラウザーの既定のダウンロードフォルダーにファイルが保存されます。アイコンをクリックした時の押した感があまりありませんが、スクリーンショットはちゃんと取れているので連射しなくても大丈夫です。
GitHub - teampoltergeist/poltergeist: A PhantomJS driver for Capybara
Poltergeist - A PhantomJS driver for Capybara Poltergeist is a driver for Capybara. It allows you to run your Capybara tests on a headless PhantomJS browser. If you would like to run your tests on headless Chrome there's another project Cuprite claims to be compatible with Poltergeist. If you're viewing this at https://github.com/teampoltergeist/poltergeist, you're reading the documentation for th
Chromeでフルサイズのスクリーンショットを撮るためのパッチ - Qiita
※ 固定値 次のようにページ全体のサイズがブラウザーの縦横ともに大きいと想定します。 この時、scroll_width, scroll_height, row_count, col_count = 0に初期化します。 ページの右端に当たるまでスクリーンショットを撮って画面の横幅の分スクロールするのを繰り返していきます。 横にスクロールする度にcol_countを増やします。 必須うではないですがtmp_imageのファイル名はtmp_{row_count}_{col_count}.pngとかにすると後でファイルだけ見た時にわかりやすいです。 tmp_imageをstitched_imageにscroll_widthとscroll_heightの位置に貼り付けます。 スクロールサイズがページの残りサイズを超えたら残りの分だけ切り出してtmp_imageに保存しstitched_imageに貼
[Selenium]スクリーンショット画像取得方法一例 - Qiita
# vi /etc/hostname //→ 自分の好きなホスト名に # (ホストOS側でダウンロードした jdk-8u65-linux-x64.tar.gz をゲスト側に転送し /tmp/ に置いた) # cd /tmp # tar xvfz jdk-8u65-linux-x64.tar.gz # mv jdk1.8.0_65 /opt/ # cd /usr/local/bin # sudo ln -s /opt/jdk1.8.0_65/bin/java java //→ /usr/local/bin/java # java -version //→ java インストール確認 # cd /tmp # sudo aptitude install xvfb xserver-xephyr firefox firefox-locale-ja fonts-ipaexfont-gothic fon
![[Selenium]スクリーンショット画像取得方法一例 - Qiita](https://cdn-ak-scissors.b.st-hatena.com/image/square/a7c8e035f72aeb434a6cf7069e4deb83939a5397/height=288;version=1;width=512/https%3A%2F%2Fcdn.qiita.com%2Fassets%2Fqiita-fb-fe28c64039d925349e620ba55091e078.png)
さくっとデスクトップを録画するならロイロ ゲーム レコーダーが超便利 – プログラミング生放送
昨日の記事 では、エディター画面を動画化しましたが、Windows でデスクトップ画面を録画するには、無料で最強のゲーム録画「ロイロ ゲーム レコーダー」が、超便利です。ゲーム実況用を推していますが、もちろんその他の録画用途でも使えます。 ウィンドウをクリックして録画ボタンを押すだけ 録画方法は、対象のウィンドウを選択して、録画ボタンをクリックするだけです。 映像は MotionJPEG、音声は PCM、コンテナー形式は AVI のようです。 細かな設定もできます。 2013年に登場したようで、登場以前のアプリでは、うまく録画できないことが多く、たいへんだった記憶があります。覚えておきたいアプリです。 録画アプリは無料提供し、動画編集アプリのロイロスコープ2を販売する戦略のようです。 LoiLoScope2 動画編集、ＤＶＤ、ブルーレイ、ディスク作成ソフト 結婚式、運動会も1本でＯＫ！ さ
Redmineチケットを作るための三種の神器 - KAYAC Engineers' Blog
はじめまして。技術部の中村です。 今日はRedmineチケットを作るための三種の神器ということでお送りします。 Google検索エンジン Redmineのチケットを書く際には、調査のためにGoogleで検索することがよくあります。Chromeで検索するときによく使う小技を紹介します。 ""で括る 例えば問題を調査していてサーバのログにエラーメッセージが出ていた時、エラーメッセージでググるわけですが、そのままだと関係ない結果がいっぱいヒットしてしまう場合があります。 そんなときは""で括ってググります。特定の環境に依存する文字列が含まれる場合はそれは除去して、その前後をそれぞれ""で括ってググります。 site:で特定のサイトに限定してググる 公式情報を探すため、本家のサイト内に限定してググりたい時などは、site:example.comのようにドメイン指定を追加してググります。 その他の検
Google製スクリーンキャプチャー拡張 "Screen Capture" に乗り換えた！ - Gadget Girl
Vitsoe design store | Otl Aicher exhibition / EVERYDAYLIFEMODERN 以前、WindowsでもSkitch的に使えるChrome拡張として Awesome Screenshot を紹介しました。ウェブページのスクリーンショットをとって、説明を入れることができます。 ただ、最近使ってみたところ、なぜか一部の機能がうまくいかなかったのです。 そこで今日は、 Awesome Screenshot から乗り換えた Screen Capture (by Google) を紹介します。 Chrome ウェブストア - Screen Capture (by Google) 使い方は、Awesome Screenshotと同じです。 ページの一部を切り取る ページの見えている部分を切り取る 見えていない部分も含めてページ全部を切り取る を選べます
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
GitHub - nenadg/traquer: Records and reproduces user's in-page behavior
How to take a screenshot with Selenium WebDriver?
Seleniumで撮ったスクリーンショットがブラウザごとにばらばら問題 - Qiita
GitHub - YahooArchive/kobold: Visual regression testing framework, comparing screenshots from multiple builds
GitHub - juliangruber/review: Visual regression testing tool for responsive websites
Generating a screen capture on exception thrown with Selenium 2