Puppeteerでスクレイピング | きるこの日記帳
静的サイトから 30 ページぐらいのテキストを抽出して json にしたかったため、 Puppeteer でスクレイピングをすることにした。 なぜPython3 + Selenium + BeautifulSoupじゃないのか このブログがフロントエンドの備忘録のため。 Puppeteerとは https://github.com/GoogleChrome/puppeteer Chrome / Chromium を動かす Node のフレームワーク。 デフォルトは Headless（GUI を持たず、コマンドで操作できる）で、ブラウザを出しての操作も可能。 インストール てきとうなプロジェクトを作成し、Puppeteer をインストール。 const puppeteer = require('puppeteer') (async () => { const browser = await
即時関数(function(){ ... })()の別の書き方いろいろ - 泥のように
JavaScriptでよく使われるコード片に即時関数というものがあります。無名関数を宣言して即実行することで、ブロックスコープの存在しないJavaScriptにおいて擬似的にブロックスコープを再現します。 var a = "global"; (function(){ var a = "local"; alert(a); //local })(); alert(a); //global 一番有名なのはこの(function(){ ... })()の形式なのですが、なぜfunctionの外側にカッコが必要なのか不思議に思ったことはないでしょうか？ ためしにfunction(){ ... }()と書いてみると、Syntax Errorが発生します。 なぜfunction(){ ... }()はSyntax Errorなのか JavaScriptにはfunction文とfunction式があって、
【jQuery】input要素のname属性値にブラケット[]が使われているとき - Tomcky's blog
<input type="text" name="foo[]"> こんな感じの要素をjQueryでセレクタ指定したいとき、 $('input[name=foo[]]') ではダメ。 ダブルクォーテーションで囲うか、 $('input[name="foo[]"]') バックスラッシュを2つをブラケット [] の前に付ける。 $('input[name=foo\\[\\]]')
![【jQuery】input要素のname属性値にブラケット[]が使われているとき - Tomcky's blog](https://cdn-ak-scissors.b.st-hatena.com/image/square/22cee6e8c9254126c3ce81138bf721ceb917bdbc/height=288;version=1;width=512/https%3A%2F%2Fogimage.blog.st-hatena.com%2F12704830469095764139%2F26006613536301225%2F1584925746)
JavaScriptでiframe内のDOM要素を取得したり操作する | オウンドメディア | 大阪市天王寺区ホームページ制作｜合同会社デザインサプライ-DesignSupply.LLC-
あまり使う場面はないと思うのですが、触る機会があったので豆知識的な感じで残しておきたいと思います。通常、iframeは外部のリソースを読み込むため、直接iframeのDOM要素にアクセスできません。そこでjavascriptを使ってifr…
環境構築なしでブラウザの自動操作を行う - Qiita
Deleted articles cannot be recovered. Draft of this article would be also deleted. Are you sure you want to delete this article? 環境構築なしでブラウザの自動操作を行う はじめに ブラウザの自動操作といえばSeleniumとか、UWSCとかが有名です。 ですがSeleniumは環境構築がだるかったり、既存起動ブラウザにアタッチできなかったり、面倒ごとが多いです。 UWSCは操作がアナログすぎてしんどいです。 結局は、javascriptを直接実行するのが環境構築なしでできて動かすのも気軽で一番楽だったりします。 やる目的 最近、JCBプレモカードを買うと10%得するキャンペーンがあったので、JCBプレモカードを買いました。 それにともない、アマゾンギフト券注文して
Google SpreadSheet のGAS(JavaScript)でスクレイピング(Webデータゲット) - Qiita
Google SpreadSheet はとても便利にWebのデータ取得ができます。 どのようにやるのかまとめておきます。 Importxml は不要 セルの中身に、=Importxml を記載してワークシート関数を使ったやり方で手軽にデータ取得できますが、そのやり方ではすぐに限界がきます。 一番の問題点は、低速すぎることです。シートを開いたときに全件読みにいくので、すぐに遅くなって実用的じゃなくなります。 また、他の問題点としては、細かな制御ができないこと、です。 軽く何か試しに動かすなら Importxml を使うのもいいのですが、実用的なものを作ろうとすると限界があります。 ですので、SpreadSheet のマクロとして使える Google Apps Script(GAS) と呼ばれる、JavaScript を使ってデータを取得します。 このあたりは、Excelのワークシート関数を使
初心者のためのGoogle Apps Scriptプログラミング入門 - libro
※ページが正常に表示されない場合 AddBlockなどの広告ブロックツールがONになっていると、ページの一部が表示されないことがあります。これらのツールをOFFにしてみてください。
新参の超軽量JavaScript非同期ローダー3種を徹底比較 | ゆっくりと…
JavaScriptの読み込み・実行は、それより下にある画像など外部リソースの読み込みと表示をブロックするため、「ページ読み込み時間を短縮するJavaScriptローダー：LABjs」 や 「CSS/JavaScriptのAsynchronous Loadingをめぐる熱い論議」 で紹介したように、多数の JavaScript ローダーが開発されてきました。 これらのローダーは、「非同期スニペットのスタート ガイド – Google Analytics」 に代表される、script 要素を直接 DOM に挿入する方法が主流となっています。またそのタイプは、単一のスクリプト・ファイルを対象とした小規模なものと、Head JS、LABjs、ControlJS などに代表される、複数ファイルの依存関係をハンドリングする機能をもつものに大別されるかと思います。 後者のタイプは最小でも3KBytes
Gentallela - プログラマでも美しく管理画面を作成できるBootstrapテーマ | ソフトアンテナ
「Gentellela」はBootstrap 3を使った無料の管理画面用テンプレートです。デフォルトスタイルのBootstrap 3をベースとして多数のパワフルなjQueryプラグインやツールを組み込んだもので、美しい管理用パネルやダッシュボードを簡単に作成することができます。 テーマにはチャートや、カレンダー、フォーム検証ライブラリ、ウィザードスタイルのインターフェイス、ナビゲーションメニュー、テキストフォーム、スライダー、プログレスバー、通知メニューなどたくさんの有用なライブラリが組み込まれています。 今回はオンライン上で確認できるデモサイトを元に、どのような画面が実現できるのかスクリーンショットとともに紹介したいと思います。 ダッシュボード ▲ダッシュボードのデモでは多様なチャートが表示できることが確認できます。テーマはレスポンシブ対応で画面サイズに応じて適切に描画されます。 フォー
10年のツケを支払ったフロント界隈におけるJavaScript開発環境（2016年4月現在）。 - 日々、とんは語る。
2015年はCSSが普及した以来となる10年に1度のフロントエンド大変革期で、それまでのツケが一気に回ってきたと個人的に感じていました。目まぐるしく状況が変化していきましたが、2016年になり、個人的にだいぶ落ち着いてきたと感じているので、ここらへんでまとめておきたい思います。 最初に結論を書いておくと、 『React + Redux + react-router + material-ui + axios + ES2015 + Babel + webpack + ESLint + Airbnb JavaScript Style Guide』 という組み合わせが、いま僕の採用しているJavaScriptの環境です。 主要ライブラリは React A JavaScript library for building user interfaces | React 去年、一気に普及したReact
ソーシャルボタンが重い…非同期読み込みでページの表示速度を改善させる！
2012.04.24 IEでコールバックが動作しない不具合がありましたので修正しました（参考 : 外部JavaScriptの動的ロード – 0xFF）。 ソーシャル全盛期の昨今、どのWebページにも設置されているソーシャル系のシェアボタン。僕のブログにも設置していますが、Facebook、Twitter、Google+1、はてな…と数が増えて重い重い。記事の一覧ページでそれぞれにボタンを表示させたらそれはもうすごく重い。これではせっかくページに来てくれたユーザーも離脱してしまいますね。 非同期読み込みとは どうにか速度を改善できないか調べていたところ、下記のような記事を発見。 ようは、普通に下記のようにJSを読み込むと、読み込みが完了するまでその下のページの表示が止まってしまうと。 <script type="text/javascript" src="http:..."></script
【jQuery】 IE/Chrome-proofな、リストボックス用インクリメンタルサーチ機能を作ってみた: RemovableType
【jQuery】 IE/Chrome-proofな、リストボックス用インクリメンタルサーチ機能を作ってみた IEやChromeだと、リストボックスのOPTION要素をjQueryのshow()やhide()でオン／オフできないのがちょっとアレなので、最初に完全な子要素集合を取っておいて、keyup()イベントで毎回フィルターしたものに差し替えるようなロジックで実装してみた。子要素数が大きいと、メモリ使用量がちょっと心配かも。何かおかしいところがあったら指摘くだしあ(o^o^o)∩ なお、検索ボックスに全角文字を入力した際の挙動だが、以下のとおり、ブラウザによって微妙に異なる。 IE未確定の時点でも問題なく絞り込まれる。 Chrome未確定の時点でも問題なく絞り込まれる。 Firefox文字を確定させた時点で絞り込みが起きる。 Opera文字を確定させた後、IMEがキャプチャーしないキーを押
jQuery、長いドロップダウンリストをインクリメンタルにしぼりこむサンプル with migemoっぽいもの
jQuery、長いドロップダウンリストをインクリメンタルにしぼりこむサンプル with migemoっぽいもの 説明 たくさんのアイテムの中からひとつ選びたいというケース。 対象の名前は知ってる。でも検索するのもだるい。 単なるドロップダウンだとどこにあるかわからなくて困る。 というケースにどうぞ。 ユーザビリティメモ: jsが無効な人は恩恵を受けられないので代替手段を何とかしたほうがいいんじゃないっすかね。 ついでにmigemoっぽい検索する機能もつけてみた。 入力されたローマ字を元に正規表現作って読みデータ(ひらがな)を検索するだけ。 ちょっとかしこいハイライト機能つき。 操作: 上下キーで移動、Enterで確定、ESC or 検索窓がフォーカス失うとキャンセル。 Windows XP上のOpera 9.64、Firefox 3.0.10、IE 7.0で動作確認。
jQueryコーディングの基本的なことからプラグイン化までの注意書き（Webデザイン）
jQuery でのプログラミングの、基本的なことからプラグインを作るところまで、初心者の頃につまずいた部分を中心にまとめてみました。公式ドキュメントなどで使われている、少し難しい印象の専門用語も織り交ぜながら書きました。jQuery で Webデザインのパーツを作るときの注意書きという感じです。 Webサイトを作るとき、私的にはとってもよく使っている jQuery。jQuery を勉強しだしたころは、自分の書いたコードが動いたりするのが、とっても楽しくて嬉しかった覚えがあります。私はあまり JavaScript でのコーディングが得意ではないので、今でもよく jQuery を使ってコーディングしてます …。 以前：CSSは分かるけど jQuery は苦手 … という人が jQuery に親しんでくれるといいなーと思って書きました という記事を書いたのですが、今回はその復習 & jQuery
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
How can I wait for network idle after click on an element in puppeteer?
クリップボードのデータを入力フォームに投入するブックマークレット - Qiita
googla apps script（GAS) セル内のリンクを開くコードが検索してもわからない
GASで指定したURLを別のウィンドウ（タブ）で開く
【jQuery】submit前に処理を行う方法 - Qiita
サイオステクノロジー株式会社
