【令和最新版】令和のWebスクレイピング(クロール)【ベストプラクティス】
こんにちは、株式会社FP16で結構コードを書いている二宮です。 最近Webスクレイピングのコードを色々な方法で書いているので、そこで得た知見をここに残しておこうと思います。 ほぼ毎日なにかのWebスクレイピングコードを書いています。 Webスクレイピング手段 Webスクレイピングには色々な方法があります。 私が最近主に使っているのはこの5つの手段です。 cheerioでHTMLを解析 Playwrightなどで要素指定でデータを取得する APIを見つけて叩く（バックエンドとの通信を再現してデータを取得） LLMでサイト構造を解析してデータを取得する Next.jsからのレスポンスに含まれているデータを解析して取得する これが令和のWebスクレイピングのベストプラクティスだと思っています。 これらの方法を、目標に合わせて使い分けています。 使い分け方 CheerioでHTML解析 JavaS
令和のHTML / CSS / JavaScriptの書き方50選
Web制作の技術は日々進化しており、会社やプロジェクトによっては昨今の環境に適さない書き方をしているケースも時折見受けられます。 そこで今回は「2024年のWeb制作ではこのようにコードを書いてほしい！」という内容をまとめました。 質より量で、まずは「こんな書き方があるんだ」をこの記事で伝えたかったので、コードの詳細はあまり解説していません。なので、具体的な仕様などを確認したい方は参考記事を読んだりご自身で調べていただけると幸いです。 1. HTML 画像周りはサイトパフォーマンスに直結するので、まずはそこだけでも取り入れていただきたいです。また、コアウェブバイタルやアクセシビリティも併せて理解しておきたい内容です。 Lazy loading <img>にloading="lazy"属性を付けると画像が遅延読み込みになり、サイトの読み込み時間が早くなります。
Webサイトにアニメーションは必要あるのか。ないのか。どっちなのか。｜Takumi HASEGAWA (unshift Inc.)
まえがきアニメーションを多く取り入れたWebサイトが好きかどうかのアンケートを取ると、ネガティブな票が多く占めることがよくありますが、それに関して思うところがあったので「Webサイトにアニメーションは必要あるのか」というテーマで自分の思っていることを言語化してみました。 X (Twitter)で「動くWebサイト 嫌い」で検索 Xでちらっと検索しただけでも動くサイトが嫌い、という方は結構いそうですね。もし「アニメーションはすべて悪」と思っている人がいたらぜひ読んでいただきたいです。 この議論はアプリなどにも言えることですが、私の主なお仕事はWebサイトのフロントエンド実装なので、Webサイトについて書かせていただきます。 また、保険をかけているわけではないですが、私はUI (ユーザーインターフェース) の研究をしている専門家でもないんでもないので、この記事の内容に学術的なものは一切ありませ
月10万円の売上を目指して、個人開発でやったこと全てを公開 - Qiita
何の話 エンジニアの勉強として始めたWebサービスの個人開発。 せっかくやるなら収益化をしようと思い、個人開発2作目にして、売上月10万円を目標にサービスをリリースしました。まだ目標の売上は達成出来てないですが、その収益化モデル、サービス内容の確定、デザイン、システムアーキテクチャ、など全てを公開しようと思い、本ブログを書きました。 私はつよつよ個人開発者ではなく、1年前に組み込みエンジニアからWeb系に飛び込んだ若輩者なので、悪しからず。 [公開したサービス] オンライン動画学習のランキングサイト | Tech Course Rank 後半で詳しく本サービスについて、説明します。 プロフィール 大学卒業後、セキュリティ製品のサポートエンジニア -> Webエンジニア -> ロボット系の組み込みエンジニア-> Web系のエンジニアという経歴です。現在30才。 得意言語は、Python。フロ
「餃子を焼くと焦げるフライパン」だけ集めたWebサイト、味の素が公開 全国の3520枚を3Dデータ化
冷凍餃子を焼くと焦げてしまうフライパンだけを集めたWebサイトが登場した。味の素冷凍食品が10月13日に公開したもので、全国から提供を受けた3520枚ものフライパンの3Dデータを閲覧できる。 サイトは「冷凍餃子フライパンチャレンジ」というプロジェクトの一環で作成されたもので、「味の素の冷凍ギョーザがフライパンに張り付いた」というTwitter（X）に投稿された声をもとに、同様の経験があるユーザーからフライパンを提供してもらい、研究開発に生かすことを目的としている。キーエンスの協力を得て3Dデータ化し、「我々の研究の途中報告」としてWebサイトで公開したものという。 サイトにはユーザーから提供された各フライパンが並んでおり、クリックすると3Dスキャンされたフライパンを360度自由に見ることができる。提供エリア、直径、フライパンの厚み、重さなどを一覧で表示。「焦げ付き」という項目もあるが、大半
静的サイトジェネレータ「Astro 3.0」正式リリース。JavaScriptなしでSPAのようなアニメーションの画面遷移など新機能
静的サイトジェネレータ「Astro 3.0」正式リリース。JavaScriptなしでSPAのようなアニメーションの画面遷移など新機能 オープンソースで開発されている静的サイトジェネレータ「Astro」の最新バージョンとなる「Astro 3.0」が正式にリリースされました。 Astro 3.0 is out now! 30% faster and more powerful than ever. View Transitions, Image Optimization, JSX Fast Refresh, and so much more. https://t.co/vOi44246Hg — Astro (@astrodotbuild) August 30, 2023 Astroは、ReactやVue、Svelte、Alpine.js、TypeScriptなどのさまざまなフレームワークやライ
API設計まとめ - Qiita
はじめに 自分は2021年に新卒でWeb系の開発会社にフロントエンジニアとして入社し2022年で2年目になります。 実務ではReact×TypeScriptを利用したフロント周りとNode.js(Nest)やRailsを用いたバックエンド(API)の開発をしています。 その中で使っていたAPI設計について改めて学び直したのでまとめて行きます。 この記事の対象者 エンジニア初心者から中級者 APIについて学びを深めたい人 この記事の目標 APIについて学ぶ 我流ではなく正しいAPI設計について学ぶ この記事でやらないこと 具体的にコードを用いたAPI設計の書き方の説明に関しては下記の記事で解説をしています。 APIについて APIとは APIは"Application Programming Interface"の略で、直訳すると「アプリケーションを使プログラミングを使ってつなぐ」という意味
（基礎編）jQuery使いのエンジニアがReactとNext.jsでWebサイト制作するために最低限押さえておきたいコード
なぜ書いたか 筆者もWebサイト制作をそこそこ長くやってきておりいまは業務でVueを書いたりちょっとReactを書いたりSvelteを書いたりしていますが、2年前くらいまではReactやES6の構文すら書いたことがありませんでした。 WordPressでのサイト制作が多く、機能が少ないサイト制作会社ではjQueryで充分なことも多く、恥ずかしながら業務時間外での学習や外部の情報を追うこともしていなかったため、開発系の技術スタックに慣れるのにかなり時間がかかりました。 まずはよく使うコードを見て解説しながら答えの一つを示し、よく出てくるコードをざっくり理解して書けるようにすることで、実務でReactを取り入れる取っ掛かりになればいいなぁという思いでこの記事を書いています。 続編は多分今月中に書きます。 こちらは基礎編です。 対象者 普段jQueryでWebサイトを制作している 生のJSはあん
2023年のWebアクセシビリティ | gihyo.jp
あけましておめでとうございます。株式会社ミツエーリンクスの中村直樹です。昨年と同じく、2022年のWebアクセシビリティに関連する出来事を振り返りつつ、2023年のWebアクセシビリティの展望について俯瞰していきたいと思います。 WCAG 2.2 2022年9月版のWCAG 2.2で、文書のステータスとしてはようやく勧告候補（Candidate Recommendation）にまでたどり着き、仕様文書として完成する勧告（Recommendation）が見えてきた…と思っていたところですが、12月になって達成基準4.1.1構文解析を削除するという話が急浮上してきました。 達成基準4.1.1がどういったものなのか、改めて振り返ってみましょう。この達成基準については、もとはWCAG 2.1（原文、参考日本語訳）と同じものであり、WCAG 2.0とも同一です。達成基準4.1.1は、マークアップ言語
書籍「いちばんやさしいWeb3の教本」は本当に酷い内容だし、Web3界隈の人は一致団結して間違いを指摘して、インプレスは回収して内容修正するべき
2022年7月26日追記：インプレスの「いちばんやさしいWeb3の教本」回収判断についてという記事を書きましたので、こちらもあわせてご覧ください。 著者の方には申し訳ないのですが、下記のツイートで存在を知った「いちばんやさしいweb3の教本」という書籍が本当に酷い内容です（内容が気になる人は、2022年7月31日までインプレスのサイトで1、2章が無料公開されていますので、ぜひご覧ください） 。 Web3の説明ではだいたいGAFAがディスられるけど、「TCP/IP、SMTP、HTTPはGoogleやAmazonに独占されてる」というのはさすがに理不尽すぎる pic.twitter.com/amgEU3Gmpg — catnose (@catnose99) July 19, 2022 #いちやさWeb3 実在する技術用語をやさしく噛み砕いているようで実際のところ意味不明なワードサラダなので悪質
モバイル幅で作成されたWebサイトの特徴と作例
2022年7月20日 CSS, Webデザイン, スマートフォン モバイルは幅が狭く、デスクトップは幅が広いので、それぞれのデバイスにあわせてWebサイトの幅も可変させたりしますよね。しかし最近、デスクトップで見てもモバイル幅のまま表示させている国内のWebサイトをちょこちょこ見かけます。今回はそんなモバイル幅のWebサイトを見ていこうと思います。 ↑私が10年以上利用している会計ソフト！ モバイル幅Webサイトの特徴 デスクトップで見ても狭いコンテンツの幅 よくあるWebサイトでは、コンテンツ部分の枠がデバイスの幅によって変化します。例えばモバイルサイズでは幅が狭くなり、デスクトップサイズでは幅が広がって画面中央に表示されます。このブログでもそうですよね。しかし、昨今見られるようになったレイアウトでは、デスクトップサイズで見てもコンテンツ枠の幅は狭いままで表示されています。画面中央に表示
SPA, SSR, SSGって結局なんなんだっけ？
【2023/11/14追記】 SPA, SSRの説明を訂正、および不必要な箇所の削除を行っています。 また、この記事はNext.js等の、具体的にフレームワークで使用されている各概念を説明するものではないので、ご留意ください。 概要 SPA, SSR, SSGという技術用語を、業務の中でも、ネットの記事の中でもよく耳にするのですが、こういう感じかな？といううっすらとした理解のままだったので、今回整理しました。 内容に誤りがあった場合はご指摘いただけますと幸いです。 (MPA) -> SPA -> SSR -> SSG という順に説明をしていきます。 SPA SPAの要旨を述べると、最初に、HTML, CSS, JSなどの必要なassetsをWebサーバーから取得し、その内のJSをもとに具体的なUIを描画し、またページ遷移の際のUIの変化も、JSをもとに再描画を行うアーキテクチャとなります。
Mouseflow公式パートナー - エクスチュア セッションリプレイ、ヒートマップ、ファネル分析、フォーム分析ツール、フィードバック分析ツール
コンバージョンを増やす Mouseflowはマーケティングのためのツールです。 Mouseflowを使って、訪問者の行動に基づいたアクションを取りましょう。 セッションリプレイ サイトに来た訪問者は何をしているのか Mouseflowは訪問者のマウスの動きやクリック、スクロール等の行動をレコーディングし、各訪問者が取った行動を再生して見ることが出来ます。また、フィルター機能を使って特定の条件にマッチした訪問者を抽出することが可能です。 これによって、今までのように勘に頼ることなく、訪問者の実際の行動に基づいたアクションを選択することが出来るようになります。 Mouseflowの計測結果は安全かつ即座に反映され、購入ページや会員ページ等も計測可能です。 詳細はこちら ヒートマップ そのページは期待通りに機能しているか ヒートマップを使うと、訪問者がページのどこをクリック/タッチしているか、マ
本当は教えたくないWebデザイン参考ギャラリーサイト37選
ウェブサイト制作には、常に新しいアイデアやインスピレーションが必要ですが、決まらずに悩んでしまうことも。 そんな状況を打開するには、たくさんの優れたデザインの実例を見ることで、次のアイデアを生み出してみましょう。 ここでは、最新ウェブデザインをいち早くチェックできるオススメWebギャラリーサイトを厳選してご紹介。 インスピレーションとしてはもちろん、クライアントの打ち合わせやイメージの共有にも活用できます。 積極的にインプットを増やし、デザインの引き出しを増やしてみましょう。 このリストは2年ぶりにまとめ直したアップグレード版となります。 コンテンツ目次 【2024追加分】最新Webギャラリーサイト landing.love Design Spells Godly BentoGrids 404s Footer Navbar Gallery 国内Webギャラリーサイト SANKOU! URA
インラインSVGのSEO的実験：「title属性」 or 「aria-label」｜Re:design News
さてさて、最近気になったことがひとつあるんです。 HTMLにSVGをインライン埋め込みにした場合、GoogleさんにSVGの「<title>」や「aria-label」が検索エンジンにインデックスされるのかテストしてみました。 それのメモです。 Contents 結論：インデックスされないただの文字列となる 詳細：<title>を入れた場合 詳細：aria-labelを入れた場合 上記の実験をしている途中で見つけた海外サイト まとめ 結論：インデックスされないただの文字列となる <img>タグでSVGを読み込む時はaltをつけられるので、それに関してはGoogleのテキスト検索の方も、画像検索の方もちゃんと認識されるので問題ないのですが、それがインラインSVGの場合は、結論としてはただのXMLのテキスト＝検索エンジンには認識されないことが検証の結果わかりました。 <title>に関しては、
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Web To Figma
Webページの特定テキストへ直接ジャンプしてハイライトするリンクの作り方／「Chrome」「Edge」は標準機能で、「Firefox」は「Link to Text Fragment」拡張機能で【レビュー】
ポン太のインターネット教室
HyperForm
<title> — the SVG accessible name element - SVG: Scalable Vector Graphics | MDN