【令和最新版】令和のWebスクレイピング(クロール)【ベストプラクティス】
こんにちは、株式会社FP16で結構コードを書いている二宮です。 最近Webスクレイピングのコードを色々な方法で書いているので、そこで得た知見をここに残しておこうと思います。 ほぼ毎日なにかのWebスクレイピングコードを書いています。 Webスクレイピング手段 Webスクレイピングには色々な方法があります。 私が最近主に使っているのはこの5つの手段です。 cheerioでHTMLを解析 Playwrightなどで要素指定でデータを取得する APIを見つけて叩く（バックエンドとの通信を再現してデータを取得） LLMでサイト構造を解析してデータを取得する Next.jsからのレスポンスに含まれているデータを解析して取得する これが令和のWebスクレイピングのベストプラクティスだと思っています。 これらの方法を、目標に合わせて使い分けています。 使い分け方 CheerioでHTML解析 JavaS
デザイナーにもお勧め！ CSSもThree.jsもタイムライン編集を可能にするTheatre.jsが凄い - ICS MEDIA
デザイナーにもお勧め！ CSSもThree.jsもタイムライン編集を可能にするTheatre.jsが凄い ウェブサイトの演出を作る上でアニメーションの実装は欠かせません。一般的には、CSSアニメーションやJavaScriptのライブラリ（GSAPジーサップなど）を用いてコードベースで動きをつけることが多いと思います。ですが、完全にコードだけでアニメーションを調整するのは大変だと思ったことはないでしょうか？ 一度実装したことがある方は共感いただけるかもしれませんが、少し直そうにもコードに戻って調整し、反映されたブラウザ画面を確認して、もう一度コードを直して…と往復していると結構大変です。また、アニメーションさせるプロパティや要素が複数ある場合には、コードを解読する難易度も上がります。 本記事ではそんな悩みを解決できる、GUIからアニメーションを調整できるライブラリ「Theatre.jsシアタ
Chromeの拡張機能を自作する - 虎の穴開発室ブログ
こんにちは。虎の穴ラボのH.Hです。 突然ですが、皆さんは普段使っているブラウザは何でしょうか？ 私は普段からChromeを使っており、このブログもChromeを使って書いています。 先日ある拡張機能をChromeに入れるにため機能の説明を読んでいました。 説明の中にGithubのURLが記載され拡張機能のソースコードが公開されており、JavaScriptなどの知識があれば作成可能とわかりました。 またGoogleから簡単な拡張機能を作成するチュートリアルも公開されていました。 そこで、チュートリアルで公開されている拡張機能の実際に作ってみることにしました。 今回は拡張機能の作成した時の手順とデバッグの方法を説明していきます。 Chromeの拡張機能とは Chrome機能はChromeウェブストアなどからChromeに追加することで、標準には無い機能の追加を行うものです。 chrome.g
Lambda Layersにnode.jsの自作関数を追加する - Qiita
re:Invent 2018で発表されたAWSのLambda Layersを触ってみたので備忘録兼ねての投稿です。 まだLayers + node.jsの話が詳しくまとまってるところがあんまりなかったのでちょっとでも参考になれば幸いです。(pythonはちょいちょいあった) なお、筆者は普段Androidエンジニアで実際のところ門外漢なので、用語とか理解とか間違ってたらマサカリ投げてください。 泣きながら直します。 Lambda Layersとは ざっくりいうと共通のモジュールをまとめといて複数のLambdaで使い回せるよって機能。 Layers + node.jsのディレクトリ構成 こんな感じ hoge-layer ├── layer │ └── nodejs │ ├── node_modules │ │ └── (入れたいモジュールたち) │ ├── package
Electronよりもお手軽に！NW.jsならデザイナーでもデスクトップアプリが作れる
Webの技術でデスクトップアプリが作れるフレームワークといえばElectronが有名ですが、より手軽に使えるのがNW.jsです。デザイナーでもちょっとしたデスクトップアプリならすぐに作れちゃいますよ。 NW.jsは、HTML、JavaScript、CSSといったWeb技術を使ってネイティブアプリを作るフレームワークです。一番単純なケースだと、手慣れたワークフローでWebアプリを作り、最後にジェネレーターですべてをコンパイルして、ブラウザー同様にWebアプリを表示できるネイティブアプリを作ります。このようなアプリケーションは「ハイブリッドアプリ」と呼ばれます。 ハイブリッドアプリがすばらしいのは、単になじみのある言語（HTML、JavaScript、CSS）で書けるというだけでなく、本質的に次のような普通のWebアプリよりも優れた点があるからです。 ブラウザーの種類とバージョンをコントロール
Googleの音声認識エンジンを使って音声ファイルから文字起こししてみた
Googleがクラウドサービスとして提供している「Google Cloud Platform」の中に、「Cloud Speech-to-Text」というサービスがあります。このサービスは音声ファイルをAIが認識して文字にしてくれるというものなのですが、一体AIはどれくらい正確に文字起こししてくれるものなのか実際に使って試してみました。 Cloud Speech-to-Text - Speech Recognition | Cloud Speech-to-Text API | Google Cloud https://cloud.google.com/speech-to-text/ まず、GoogleのクラウドサービスであるGoogle Cloud Platformの登録を済ませておきます。まだ登録していないという人は以下の記事の冒頭部分を参考に登録しておいてください。 無料でGoo
NW.jsでデスクトップアプリの夢を見る！ - Qiita
はじめに 僕はNode.js製のこんなソフトを開発しているのですが、このソフトをユーザーの方に使っていただくには... ユーザーにNode.JSをインストールしてもらわないといけない 設定ファイルにパスワードがべた書きでセキュリティに不安がある そもそも導入長ぇ！ ...と、到底使ってもらえそうなものではありません。 そこで今回は、 ユーザーにNode.JSをインストールしてもらわないといけない 設定ファイルにパスワードがべた書きでセキュリティに不安がある を解決するためにNW.jsを使ってネイティブアプリ化をしていきます！ NW.jsとElectronの比較 NW.jsとは、JavaScriptを用いてWindows上で動作するアプリケーションを実装できるフレームワークです。似たようなものではElectronがVisual Studio Codeなどでも利用されており、こちらのほうが有名
分割代入 - JavaScript | MDN
分割代入 (Destructuring assignment) 構文は、配列から値を取り出して、あるいはオブジェクトからプロパティを取り出して別個の変数に代入することを可能にする JavaScript の式です。 const [a, b] = array; const [a, , b] = array; const [a = aDefault, b] = array; const [a, b, ...rest] = array; const [a, , b, ...rest] = array; const [a, b, ...{ pop, push }] = array; const [a, b, ...[c, d]] = array; const { a, b } = obj; const { a: a1, b: b1 } = obj; const { a: a1 = aDefault,
あなたがReactを使うべき理由 - mizchi's blog
最近フロントエンドでfacebook/reactをずっと使っている。世界的には一部のエンジニアの間で流行っているのだが、国内だとqiitaのタグ等を見てもどうも少ない。みんなもっと使うべきだと思うので、宣伝かねて意見をまとめてみる。 複雑化するデータバインドに対する懸念 MVWのVに対して思いを馳せると、だいたい次のことに行き着く。すなわち、「ある構造体の入力に対して、必ず一意なビューを生成したい」 {items: [1, 2, 3]} を入力とすると、 1, 2, 3のli要素になってほしい。これは単純な例だから問題に成り得ないように見えるが、アプリケーション全体の状態を一つのjsonとして定義し、 そこから常に0から組み立てればアプリケーションの健全性が確保できると考えたことはないだろうか？ 現実の問題 UIのだいたいの状態は遷移で表現される。遷移の差分をプログラマが記述する。jQue
JavaScriptでセキュアなコーディングをするために気をつけること – cybozu developer network
（著者：サイボウズ kintone開発チーム 天野 祐介） kintoneはJavaScriptを使って自由にカスタマイズすることができます。 カスタマイズにより独自のリッチなUIを構築したり、新しい機能を追加したりできるようになりますが、セキュアなコーディングをしないとクロスサイトスクリプティング脆弱性を作り込んでしまう危険性があります。 この記事では、JavaScriptでセキュアなコーディングをするための基本的な点を解説します。 主な原因 脆弱性を作り込む主な原因になるコードは、要素の動的な生成です。特に、レコード情報などのユーザーが入力した値を使って要素を生成するときに脆弱性が発生しやすくなります。 対策 document.write()やelement.innerHTMLを使って要素を生成するときは、コンテンツとなる文字列をかならずHTMLエスケープするようにしましょう。 以下は
Tumblrの投稿をサイトの新着情報として読み込んでみる–JSON– | ねむ。。
今回はJSONのご利用です。 そして、読み込む対象はテキストだけ！ jsとかそうゆうHTMLじゃないものはなんとなくしか分からん程度の人です。私。 昔、若かりし頃は、VBとかASPとかの時代に3ヶ月くらい学校かよってましたが 言語もちゃうし、自分ではもうさっぱりかけない。 ◆スクリプト これを記述したい箇所にいれるだけー。 http://yayoix.tumblr.com/api/read/json?num=5&type=text ↑ 1行目の「yayoix.tumblr.com」ここを自分のに変える。 じゃないと私のステキなはずかしい記事が投稿されちゃいますよと。 json?num=5&type=text これは、テキストを5件表示ですという意味。 空タイトル対応していません。はい。なせなら、テキストしか読み込まないからです。 写真とかは、たぶん予想、regular-titleに対応する
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
