Web開発

Node.jsとnpmのインストール Reactの開発にはNode.jsとnpm（Node Package Manager）が必須です。 公式サイトからNode.jsをダウンロード・インストールし、インストール後にターミナルやコマンドプロンプトで下記コマンドを実行してバージョン確認を行います。 node -v npm -v バージョンが表示されればインストール成功です。 Reactプロジェクトの作成 プロジェクトを作成したいディレクトリに移動し、以下のコマンドを実行します。 npx create-react-app プロジェクト名 必要なファイルやフォルダが自動生成されます。 プロジェクトディ…

こんにちは、にょろりんこの備忘録的な開発ブログです。 今日は「プロキシの使用量明細をもとに、アクセス不要なドメインを見極めてブロックする」という、地味ながらも効果絶大な最適化のお話です。 Puppeteerを使ってクローリングをしていると、ページにアクセスするたびに大量のリクエストが飛びます。 その中には、ページの表示や動画の取得に本当に必要なリソースだけでなく、分析用スクリプトや広告、外部フォントなど、アクセスしなくてもページが成り立つようなドメインも含まれています。 プロキシの使用量明細（usage report）を見ていると、どのドメインにどれだけ帯域を使ったかがわかります。 このうち、…

2025年5月頃、ChatGPTの画像生成AI（DALL·E）が密かに更新されました。 それにより、Sae-Pornsのマスコットキャラ「ティアラ」のあの独特な画風が、再現できなくなってしまったのです。 でもこれは、終わりではなく、進化の始まり。Stable Diffusion系のさまざまなモデルで、新しいティアラ像を探す旅が始まりました──。 こんにちは、にょろりんこです。 今日は「画像生成AIの進化」がマスコットキャラに与えた影響、そしてそれをどう受け止め、前向きに活かしていくかというお話です。 DALL·Eの画風、ある日を境に消える 私がSae-Pornsのキャラクター「ティアラ」を描く…

※全体のクローリング処理では Puppeteer を使用していますが、この記事で紹介するフィルタリング処理は Node.js 単体で完結しています。 こんにちは、にょろりんこです。 今回は、クローリング処理を高速化＆軽量化するために導入している、「事前URLフィルタリング」の仕組みについて紹介します。 髪を触るティアラ 私が開発・運用しているポルノ動画検索エンジン「SaePorns」では、Node.js + Puppeteer を用いて、動画ページのメタデータを自動抽出しています。 しかし、すべてのURLを律儀に開いていたのでは時間も帯域もいくらあっても足りません。 とくに以下のようなページは…

こんにちは、にょろりんこです。 今回は、「なぜ “Sae-Porns” という名前にしたのか？」というお話です。 ちょっとギョッとする名前かもしれませんが、これにはちゃんと理由があります。というか、最初はこういう名前ではなかったんです。 最初は「FairyWorks」という名前だった このプロジェクトを始めたとき、最初に考えた名前は FairyWorks（フェアリーワークス） でした。 「妖精のしごと」って、なんかちょっと素敵じゃないですか？ わたしが思い描いていたのはこんな検索エンジンでした： パーソナライズドされたおすすめなんかしない 学習もしない、追跡もしない ただ、妖精たちが人知れずコ…

こんにちは、にょろりんこです。 このブログは、私がひとりで開発している匿名検索サービス「Sae-Porns（えすえーいーぽーんず）」の進捗や裏話、試行錯誤の記録などを綴っていく場です。 初回は、「なんでそんなものを作ろうと思ったの？」という話から始めたいと思います。 ウェブに託していた、自分たちの自由な世界 そもそも、私はポルノサイトを作りたかったわけではありません。 私が本当にやりたかったのは、こういうことでした。 「追跡されないウェブサービスって、自分でも作れるんだろうか？」 たとえばDuckDuckGo（DDG）みたいに、ユーザーの情報を一切記録せずに動く検索エンジン。 ああいう思想に昔…

某SF映画をもじった仰々しいタイトルですが、今年（2025年）どこかへ旅に出る訳ではなくWeb開発の広い知識を学ぼうという決意のようなものです Web開発の世界に入って5年ほど経ちました 仕事の中で学びつつ開発を行ってきましたが、未だにちょっとしたところで知らないことや分からないことが出ることがあります その度に調べてふむふむなるほどと知っていることを増やしてはいるのですが、もっとスムーズに開発したいなとちょくちょく思うのです また先日、こちらの記事を読んでいる中で以下の画像を見て、Web開発の世界は広いぞと改めて感じたのです もちろん開発していて、この画像に載っていることに触れることもあるの…