Google Apps Scriptでスクレイピングを極める【GAS】 🌴 officeの杜 🥥
今回使用するサービス等 スクレイピングサンプル - Google Spreadsheet Google Cloud Functions Puppeteer cheerio for Google Apps Script 以前、PuppeteerとCheerioを使ってテーブルデータをスクレイピングしましたが、参考になるかと思います。 Puppeteerでテーブルデータを取得する 事前準備 注意事項 Google Apps Scriptでのスクレイピングですが、Node.js + Puppeteerで作る場合と異なり、GASだけでスクレイピングする場合には色々と注意事項があります。主に 6分の実行時間制限がある Google Workspaceの場合、UrlfetchAppは100,000 回/1日の制限事項がある JavaScript多用の動的サイトのスクレイピングは出来ない（Puppete
【JS】タブがバックグラウンドになったイベントを取得する
document.addEventListener("visibilitychange", () => { if (document.visibilityState === "visible") { console.log("コンテンツが表示された"); } if (document.visibilityState === "hidden") { console.log("コンテンツがバックグラウンドになった"); } }); 🙆♂️ ナイス PC, Android, iPhone(safari, chrome)すべてタブ切り替えで発火する SP で別アプリやホーム画面への行き来で発火する 🙅♂️ イマイチ Mac で、同じデスクトップ内の別アプリケーションに切り替えても発火しない その２、focus, blur window.addEventListener("focus", (
配列を征する者はJSを制す。JavaScriptのスマートな配列操作テクニック - ICS MEDIA
JavaScriptでコードを記述する際、配列の各要素について処理をするケースは頻出します。開発の現場で配列操作の処理を見ていると、次のようなケースがよくあります。 配列の非破壊の望まれる場面が増えているが、元の配列を破壊操作している filter()やevery()など配列のメソッドで書けるところを、forEach()メソッドやfor ... of文を使ってコードを記載し、冗長になっている 記述しても効果のないArray.from()を使用している コード的には問題なく、アプリケーションは意図的に動作しているかもしれません。しかし、冗長な記述は可読性が低下し、予期せぬバグを誘発する可能性があるでしょう。 本記事では、配列操作でよく見かける冗長な記述を、簡潔な記述で置き換える方法について解説します。 本記事で紹介するJavaScriptの配列操作のチートシートを用意したので、まとめて読みた
GTMで送信されたFormからinputの値を取得する方法 | アユダンテ株式会社
JSでは「指定したForm内のinputの値」を抜き出す方法があります。 Googleタグマネージャでも同様で、「フォームの送信」トリガーと組み合わせることで「送信されたForm内のinputの値」を取得することが可能です。 「送信されたForm内のinputの値」を利用すると、例えば「カート追加ボタンを押された時の投入商品数を取得」できたり、「お問い合わせフォームで選択/入力された各値を取得して計測」もできます。 特に前者はGAの拡張eコマースでカート追加（add）や削除（remove）を計測する際に必須となりますので、今回ご紹介する内容をご参考ください。 JSでフォームのinputの値を取得する方法 GTMでフォームのinputの値を取得するには checkboxやselectなどは要注意 応用編：入力値をそのまま使わずにアレンジするには フォームのinputの値を取得する方法 JSで
PWA対応で実装したことまとめ (実物あり) - Qiita
まえがき こんにちは！PWAご存知ですか？とてもとても作ってみたかった。 検証兼ねてPWA対応サイト(オンラインツール)を作ってみたので、やったことをまとめました。 実際にリリースしてあるので、参考ついでに是非ご活用頂ければ幸いです！ 画像圧縮のあっしゅくま - https://imguma.com/ まずPWAとは 「PWA」とは、「Progressive Web Apps」の略。 ウェブサイトを アプリのように 使えるようにしたものです。 この 「アプリのように」 というのが肝。 PWAの機能、 アプリのようにとは ざっくり以下のような機能があります。 通信しない画面遷移 - AppShell, (SPA) アドレスバー非表示 - Web App Manifest プッシュ通知機能 インストール可能 - Web App Manifest オフライン動作 - Service Worker
治安の悪い Slack Emoji を作るツールを作った - Qiita
(治安の悪くない Emoji も作れます) 作ったもの ここで遊べます おもしろいところ GIF アニメのエンコードまですべて js で完結しているので、ありがちな「謎のサーバーに画像アップロードするといい感じに変換してくれる」的なサービスと違って、素性の知れたコードがクライアント側でサクサク動きます。 なにができるの？ 画像を 128px x 128px に変形 画像を、 Slack にアップロードできる（現状）最大サイズの 128px x 128px に変形します。 ローカルのファイルから選ぶか、画像の URL を入力できます。アップロードするわけではないので、デカい画像でもサクサクなのがお気に入りです。 変形は 正方形に引き伸ばし（アス比無視） 正方形いっぱいに拡大して、余ったところはトリミング（アス比維持） 正方形に収まるように縮める（アス比維持） から選べます。 テキストから画像
tracking.js - 画像/動画をトラッキング MOONGIFT
写真はテキスト以上に情報が含まれています。人物を撮影しただけでも、そこには背景があったり、洋服があったり、天気なども映し出されます。しかし、そのためには写真から情報を収集する技術が必要です。 tracking.jsはWebブラウザ上で人やオブジェクトを認識するJavaScriptライブラリになります。 tracking.jsの使い方 様々なデモが用意されています。まずは顔認識。 マウスオーバーで情報を出すこともできます。 顔認識に加えて目鼻の場所を特定するデモ。 顔の向きで見ている方向を変更するデモ。VRなどで使えそうです。 色を認識して、その色で枠を表示します。 動画の色を認識。 イラストの特徴点を認識。 人でもできます。 二つの画像を並べたときに（向きが異なる状態）、同じ場所を見つけ出します。 人でもできます。 tracking.jsは画像はもちろん、Webカメラや動画を使ってリアルタ
jsでスクリーンショットを比較してデザインデグレの自動検出をする - BppLOG
E2Eテストの自動化にトライしてみました。 今回はUIの細かい挙動のテストではなく、デザインのデグレ検出にフォーカスをしています。 Webデザインにおいて1pxへのこだわりは非常に重要です。大規模なサービスになると、1pxの違いで数億円の売上に影響することも珍しくありません。 www.nikkei.com 複数人のチームで開発を進めていて、意図せずデザインのデグレが発生していまうことがあります。この時、1px単位のごくわずかな差分の場合、肉眼では見落としてしまいがちです。しかしながら1pxの差が事業に影響を与える可能性があるので、デザインのデグレは防ぐ必要があります。 今回はUIの差分を自動検知する簡易ツールを作成してみます。 nightwatch.jsとresemble.jsを利用します。 ・Nightwatch.js | Node.js powered End-to-End testi
【JavaScript】超高機能なグリッドレイアウトを実装する［Packery］はドラッグによる並べ替えにも対応！
【JavaScript】超高機能なグリッドレイアウトを実装する［Packery］はドラッグによる並べ替えにも対応！ グリッドレイアウト採用時に、ぜひ導入したいJavaScriptのライブラリ［Packery］を紹介します。 百聞は一見に如かず。まずは動作サンプルをご覧ください。 Packery：動作サンプル ご覧いただいたように、任意のボタンをクリックすることで要素が追加され、ウィンドウサイズを変えるとアニメーションを伴って再レイアウトします。 また注目すべきメインの機能である「ドラッギングによる並べ替え」は動作も大変スムーズです。 その完成度は「超高機能」と呼ぶに相応しいでしょう。 似たようなプラグインでは、当サイトでも紹介している［Masonry］や［Isotope］がありますが、驚くべきことに、実はこれらのプラグインの開発者は同一人物なんです。 プログラマーの David DeSan
CSS in JS(Elm)したら想像以上に良かった - ジンジャー研究室
追記 最新の感想も合わせてご覧ください。 jinjor-labo.hatenablog.com React界隈では結構前から「CSS in JS」と言って、雑に言うと「CSSはイケてないからJSでインラインスタイルを書いてしまえ」という話がある。（ちゃんと知りたい人はこちら） 自分も前々からCSSは変数が使えないとか名前が被るとか諸々イケてないのは同意してたんだけど、じゃあJSで書くのが良いかと言われたら「いや流石にロジック汚れるんじゃね？」とか「CSSの便利機能を捨てて平気なの？」とか色々と懐疑的だったんだけど、１～２か月書いてみたら想像以上に良かったので感想を書くことにした。 まず一番に主張したい部分を先に言うと、こう。 （誤解）JSのコードがスタイル記述で汚れる （正解）JSのコードがスタイル記述から解放される 前提 実際に書いたのはJavaScriptではなくElmなので以下は全て
Javascriptのアニメーション処理を高速化するプラグインVelocity.jsの使い方 ｜ Tips Note by TAM
今回はjQueryのanimate()に比べて高速で高機能なプラグイン「Velocity.js」について調べてみました。 ■Velocity.js（公式/記事作成時最新バージョン 1.2.2） http://julian.com/research/velocity/ ■GitHub https://github.com/julianshapiro/velocity ■デモギャラリー http://codepen.io/collection/tIjGb/ Velocity.jsの主な特徴 animate()よりアニメーション処理が高速。 animate()と書き方に互換性がある。（velocity()） jQueryを読み込んでいなくても使用できる。（使用しない場合はIE8はサポート対象外） モック機能がある。 animate()よりオプションが柔軟で豊富。 ... Velocity.jsの
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
ml-random-forest
ユーザのブラウザで起きた JavaScript のエラーを収集する - Qiita
GitHub - groupon/testium: ⛔️ [DEPRECATED] see https://github.com/testiumjs/testium-mocha![GitHub - groupon/testium: ⛔️ [DEPRECATED] see https://github.com/testiumjs/testium-mocha](https://cdn-ak-scissors.b.st-hatena.com/image/square/f2cd596fc1cfebbb59c2ac9ed8abb6ae83c9a523/height=288;version=1;width=512/https%3A%2F%2Fopengraph.githubassets.com%2Fbd20995b51b82d2065512387ebea8b0bcee094e8723c52eb9e6c939535f4612b%2Fgroupon%2Ftestium)
Hubot Script Catalog