SNSでURLをシェアしたときに表示される「OGP画像」。この表示が「ある」か「ない」かで、クリック率や視認性は大きく変わります。本記事では、OGP画像の基本知識から、デザイン、コードの設定方法まで、徹底的に解説します。 【第1章】OGP画像とは OGP (Open Graph Protocol) はFacebookが...

はじめに こんにちは。今回は、私が実際に開発しているSNSプロフィール集約サービス「Procom」の実装中に遭遇したエラー、「PagePropsに関するエラー」とその解決方法について詳しく紹介します。 Next.jsのApp Router（app/ ディレクトリ）を使っている方、あるいはTypeScriptでしっかり型...

こんにちは。今回は、SNSプロフィール集約サービス「Procom（プロコム）」で、Google検索やSNSシェア時に最適化された表示を実現するためのSEO対策について、実際の実装内容を交えて詳しくご紹介します。 技術スタックは Next.js（App Router）をベースに構築しており、以下のような対策を施しました。...

はじめに Next.jsはReactベースのフレームワークとして、Webアプリケーションの開発をより効率的かつ柔軟に行えるよう設計されています。その中でも大きな特徴として挙げられるのが「ルーティング」の仕組みです。 Next.jsには従来のPages Routerと、2023年に登場した新しいApp Routerという...

こんにちは、Procom開発チームのものです。 2025年7月5日。今日は“影のアップデート”が大量に積み重なった一日でした。一見地味な修正ばかりに見えて、実は「SNSでシェアしたときの顔（OGP画像）」や「ユーザーの愛を可視化する機能（推しボタン）」など、Procomというサービスの“第一印象”を大きく変える要素に向...

〜公式Widgetの使い方から動的埋め込みまで徹底解説〜 こんにちは。今回は「X（旧Twitter）のポスト（ツイート）」をあなたのWebサイトやアプリに埋め込む方法について、JavaScriptでの実装方法を丁寧に解説します。 「HTMLに貼るだけじゃなくて、動的にURLを変えて埋め込みたい」「ReactやNext....

〜恋もタスクも、忘れずに〜 こんにちは！エンジニア見習いの海老氏です。 今回は、JavaScriptの基本を楽しく学びたい方にピッタリな練習テーマとして…なんと、「恋するToDoリスト」を作ってみました！ 「ToDoリストって普通じゃない？」と思ったあなた。今回のリストは違います。💘 タスクを追加すると「好き…」と言わ...

こんにちは、Webエンジニアの海老氏です！ 今回は、**誰でもすぐに試せる「JavaScriptの練習コード」**を紹介します。しかも…全部 “ちょっと感動する” やつだけを厳選しました。 初心者でも「JavaScriptおもしろっ！」と感じられる内容ばかりなので、プログラミングのモチベーションを爆上げしたいあなたにお...

Webアプリに「QRコードで情報を共有したい」「URLやテキストを簡単に配布したい」といったニーズはよくあります。この記事では、QRコードの生成と画像としてのダウンロードをJavaScriptで実装する方法を、ライブラリ選定からコード実装まで順を追って解説します。 ✅ 使用ライブラリ：qrcode まず、QRコードの生...

こんにちは！今回は僕がずっと開発してきたパフォーマー・クリエイター向けSNS「Procom」を、ついに公開できたご報告です。実際に使ってみたい方は、ぜひ下記リンクからアクセスしてみてください。 👉 公式サイト：https://procom-next.onrender.com/ ■ Procomとは？ 〜ダンサー・You...