つぶやきブログプラットフォームを作りました🐱‍💻 #個人開発

Last updated at 2024-11-12Posted at 2024-11-10

Nonsense.BuzzというSNSライクなソーシャルメディアプラットフォームを個人開発しています。

X（ツイッター）のような所謂SNSに似た、短文投稿を特徴としたアプリとしています。
文字数制限はなく、マークダウン記法（+ MDX・React）が使えて、リンクや画像・音声や動画の挿入も制限をしていません。

アプリのトップページより、「Nonsense.Buzz、3行で」を以下に引用します。

Nonsense.Buzz（ナンセンス・バズ）は、SNSライクなマイクロブログ・プラットフォーム

ソーシャルメディアの要素もあるけど、個人のためのプライベートな場所

ひとりひとりが主役、自分だけのSNS

（Nonsense.Buzz トップページ）

理念：「3つのイズム（主義）」

アプリ開発においては、「3つのイズム（主義）」に焦点を当てました。

個人主義 🐾
1人にフォーカス。「つながり」より「自己表現」 を大切にできる人が集まれる場所。

機能主義 💻️
無制限のブログ（サブアカウント）作成、Markdown（HTML・MDX）による自由なライティング体験。

共有主義 🐕️
他SNSや埋め込みでの投稿拡散・シェアまで考えられた設計。だからUI・UX・SEOは業界最高水準。

「機能性」

生成AIが台頭し、ブロガー達はWordPresで長文の記事投稿を都度行うことに関して意気消沈しています。

さっとぱっと思ったことを投稿できて、でもSEOや可読性を犠牲にしない。それがビルトインで提供されます。

（Nonsense.Buzzのトップページでは投稿画面のデモが提供されています）

特徴的な他の機能としては以下の通りです。
どれも現存する主要SNSには無いような機能です。

投稿の編集が自由
サブアカウントを無制限に作成可能 → 始め方 > ブログの作成
個別投稿の非公開化・タイムライン非表示・ブログ間移動・予約投稿 *1
Googleアナリティクス埋め込み可能・アプリ内での簡易ブログ閲覧数推移表示 *1
音声投稿の自動文字起こし・マイクロポッドキャスト機能 *1
前後の投稿が見れる
個別のブログに壁紙（背景画像）を設定できるなど

また、タグは全体タイムラインへのリンクではなく、自分の投稿一覧にリンクされます。
タグページ・タイムライン・個別投稿ページにはそれぞれに固定投稿を設定でき、
宣伝やアフィリエイトも可能な活用の幅があります。

（@shou > 投稿一覧（全てのタグ））

「自己表現」

X（ツイッター）をはじめとする所謂「SNS」は、ソーシャル・ネットワーキング・サービス、つまり「ネットワーキング・人脈作り」が主たる趣旨となります。

私見ではありますが、Xには多くの「なんか小難しい一人議論をしている人」みたいな、
「それブログとかでやった方がいいのでは…？」的な方が散見されます。

自分の精神世界を持つことはほぼ全ての人に必要であると考えます。ですが中には、
それを主たる時間の過ごし方とする方もいるのが多様性の事実です。（当方もそちら寄りである一人です）

Xで鍵垢にせず、メモ帳に書くわけでもなく公開としているということは、
「必ずしも反応や肯定・批判を貰いたいわけではないが発信・記録をしたい」という、どちらかと言えば 「ブログ寄り」なニーズがあるのではないかと私は常々よく考えていました。
つまり、原点回帰した 「つぶやき」 の概念です。

「SEO」

SEOは私の主たる関心領域でもあり、もっとも力を入れている箇所の一つです。

アプリには以下のようなSEO強化施策を盛り込んでいます。

タイトルとメタディスクリプションの長さ・文章区切りをAIにより最適化 → 主なSEO > タイトル最適化
似た投稿を独自の高精度アルゴリズムにより自動で表示 → 主なSEO > 関連投稿・類似投稿のアルゴリズム
OG画像（SNS共有時に表示される画像）の自動生成 → 主なSEO > OG画像の自動生成
全動的生成ページ（SSRルート）のSSG化 → 主なSEO > revalidation最適化
Schema.org（Schema Markup・Structured Data・JSON-LD）に準拠（SocialMediaPostingなど）
robots indexのAI判定・Googleインデックス最適化
サードパーティクッキーの排除などプライバシーフレンドリー性の向上

以下はアプリ自体というよりインフラ上の最適化施策になります。

画像最適化・バンドルサイズ削減（ページ読み込み速度・TTFBの最適化）
Nginxでの部分的RAMディスクによるサーバーサイドキャッシング（サーバーレスポンスタイム最適化）

主なSEO

SEO施策に関しては以下の通り多少の長文となります。
関心の薄い方は読み飛ばして次項へ進んで頂ければ幸いです。

og画像の自動生成

XやFacebookはもちろん、DiscordでもLINEでも、リンクがシェアされた際にはリンク先サイトの画像が表示されることは周知されているかと思います。
これはOGP (Open Graphプロトコル)と呼ばれるウェブの仕組み（HTMLにおける通念上のルール）の一つであり、OGP情報に含まれる画像情報を取得（スクレイピング）することによりSNSやメッセージングアプリは当該画像をチャット上に表示しています。

OG画像の設定はコンテンツをより共有されやすく、目を引きやすく、また内容を視覚的に素早く伝達するために効果的な施策です。
しかし一方で、ブログ記事ごとに画像を作成する手間はブロガー達を悩ませる種の一つでもあります。ましてや、SNSやミニブログでの投稿ごとにOG画像を一つ一つ画像編集ソフトで作成するなんて、考えるだけでも大変そうですよね。
自動でこれで行われる機能が標準搭載されています。

（OG画像がどのように表示されるかは"投稿の詳細設定"画面にてプレビュー確認が可能）

生成されるOG画像は現段階では細かなカスタマイズができませんが、今後可能になる場合があります。（例えば枠の色や厚さを任意の値に変えられる、など）
※現段階では優先度が高くはありません

タイトル最適化

各投稿のタイトルとメタディスクリプションはAIにより投稿から自動で抽出されます。
文章の区切りがどこなのかをアルゴリズムにより判別し、綺麗な場所でスプリットされます。

なお、タイトル・メタディスクリプションは "投稿の詳細設定"から手動で設定することも可能です。

（例: タイトルが未指定の場合には自動で設定される）

（例: メタディスクリプションが未指定の場合には自動で設定される）

（詳細設定プレビュー画面では、「検索結果プレビュー（Google・Yahooなどの検索エンジン）」が利用可能）

revalidation最適化

Next.jsにはリバリデート（リバリデーション）という概念があり、これは静的サイト生成(SSG)されたページの代わりに、サーバーサイドレンダリング(SSR)を採択する（再評価する）ことをランタイムに伝えるものです。

つまり、本来はNode.jsによる（負荷の掛かるかもしれない）処理が必要なページ表示において、それをスキップし、ただのHTML（厳密にはプラス少しのJS）だけがシンプルにクライアントブラウザーへ送られます。
これはサーバー処理時間を減らし、ユーザーの待機ストレス軽減（および、もちろんSEO上のアドバンテージ）を可能とします。

このアプリ上では、ほぼ全ての動的生成ページ（本来は何もしなければSSRになるはずのページ）について、明示的なSSG優先施策を行っています。（Incremental Static Regeneration (ISR)・ res.revalidate）
つまり、可能な限りでめっちゃ早い。

ただし、サーバー側の負荷（計算コスト・処理の冗長性）は増えます。
運用サーバー（VPS）のCPUリソースと電気代の犠牲の上に成り立っているとお考えください。（あと実装の膨大な手間も…。）

この実装については、今後のユーザー数・投稿数・サイト全体のドメインオーソリティの向上度合いに応じてカットされる場合があります。（赤字になってしまいかねないため。）
※撤廃しても規模の経済により影響は誤差の範囲に収まると予測されます

始め方

アプリの使い始め方を簡単に紹介します。
以下のシンプルなステップで、Githubアカウントを既にお持ちであれば10秒で始められます。
（もし何か問題や出来ないなどあれば、お手数おかけしますがお知らせ頂けると助かります。）

「ログイン」をクリックまたはタップ
Githubアカウントでログインし、「認証する（Authorize）」をクリック
マイページが生成されます

（「ログイン」ボタンをクリックし、Githubでログインします）

（oauth認証を許可します。 ※Githubのユーザー名・プロフィール画像などがアプリにて利用されます＊変更可能）

このテストで使用した私のGithubのサブアカウントは名前が「Lily」だったため、以下のような初期設定でブログが生成されました。

ブログ名: 「Lily のブログ１」
投稿者名「Lily」
ユーザー名「@ spider-gglsx8」（これはブログIDとイコールだとお考えください）

（ログイン後にリダイレクトされる画面）

ブログの新規作成（サブアカウント追加）

ログインした状態では、画面右上にユーザー名が表示されるようになります。
これをクリックすると、設定画面に移動することができます。

この画面にて、ブログを無制限に追加、アカウントごとに使い分けることが可能です。

👉️ SEO的には、ジャンルごとにサイトを分けることがベストプラクティスです。（より多くの方・関係性が深い方が見てくれるようになります） ※使い分け方はもちろん自由です

（例: "IT"と"料理"で分けてもいいし、"Python"と"WordPress"のようにより細かく分けてもいい）

（ブログの設定画面）

テックスタック

使用技術は以下の通りです。

Linux: Ubuntu 20.04 (デプロイ・ホスティング)
Conoha VPS (ゲートウェイ・エンドポイント)
Windows 10, VSCode (SSHリモート開発)
Docker, tmux, Nginx (リバースプロキシ)
Next.js (v14), React.js, TypeScript, JavaScript, Tailwind CSS
Python (内部API), ginza (日本語形態素解析NLP・自然言語処理ライブラリ)
dayjs (moment.js代替), pageresjs (OG画像生成), lite-youtube-embed (YouTube埋め込み最適化), next-auth (会員登録・oauthログイン実装), expressjs (CDN), schema-dts (構造化データタイプ支援) など

オープンソース化 / Githubでの公開

アプリのソースコードは、使い方・ビルド方法・コントリビュートとテストのガイド・ライセンス（BSD-3-Clauseの予定）などを入れて後日Githubに一般公開する予定です。

2週間程度目処までには公開、こちらの記事に追記を入れる予定です。それくらいでこちらまた見に来て頂ければ幸いです。

あるいは設定のち、Qiita上でいいねまたはストックをしておくと更新で通知が行くと思うので、そちらを活用されてください。

スター・プルリク・フォークなどお待ちしています。

最初の100ユーザーには超限定の激レア称号が…！？

20名ほどのユーザーが現在はおられるようで、この度のQiita投稿が初めてのリリース情報公開となります。
併せて後日、noteや当方のブログや関連メディアなどでも順次掲載をしていく予定です。

最初の100名の登録ユーザー（ログインし、2投稿以上したユーザー）には限定の金バッジ「N100」（なんかすごいレアなやつ。たぶん）が贈られます。

最後に（私の想い）

言葉は有限です。人に伝えたいことは、伝わるべき人に伝わるべきだと私は考えます。

従来のSNSでは、表面的・一時的には人に伝わっている感が得られるかもしれません。
インプレッションは分かりやすい指標でしょう。

しかし本当に伝えたいことがあるならば、ウェブには正しい使い方・ベストプラクティスが存在します。

諸SNS上での発信は良くも悪くも様々な人に（吟味されることなく）届いてしまいます。
これは質の低いトラフィックが主であり、高いコンバージョン・出口戦略が見据えられないストラテジーであることを意味すると私は考えています。

例えば、同じ価値観を持った友人が欲しいなら。あるいは、プロダクトや宣伝のリンクを踏んでLP上でアクションを起こしてほしいなら。レコメンドベースドのアーキテクチャはレピュテーションベースドのシステムに敵いません。

私は所有する10以上のメディアで月1万アクセス、2以上のブログで月10万アクセスを3年以内に達成しました。
他の所用もあり昨今のSEOトレンドには相変わらず追従できません。それでも成果を残すことが十分に可能な領域であるということです。

現存するSNSプラットフォーム上でつぶやきを重ねても、評価してくれるのはGoogleではなくそのプラットフォームです。
さもなくば投稿は容易く埋もれ、誰の目にも止まらなくなります。
そのプラットフォームの審査が通ってようやく、Google・Bing・Yahooが見てくれるかもしれない。そんなハンデを従来的な諸SNSのユーザー達は最初から背負っています。
WebマーケティングとSNSマーケティングは全くの別世界です。

言葉を闇雲に浪費するべきではありません。
すぐにインプレッションは増えないかもしれない。しかし賢者の投資とはいつも中長期を見据えるものです。
私はこのアプリが、未来のインフルエンサー達の新しいスタート地点となれることを空想してやみません。

Nonsense.Buzz（ナンバズ）は、あなたの参加をいつでもお待ちしています。

ここまでの長文駄文ご拝読、ありがとうございました。

宣伝など

a. お仕事、募集しています

少し前にフルリモートのフリーランス求人に登録し面談をして頂いたのですが、当方の経験には興味を持って頂けたものの、「個人開発ではなく、企業案件の経験・年数が乏しいと厳しいかも」とのことでした。（ポートフォリオは出していません）

運営サイトやサービスの収益や他の収益もあり、焦りもなかったためその一社しか対応して頂いてはいないのですが、当方の市場価値的なもの（？）を引き出してくださる方がおられれば、お声がけ頂ければ幸いです。

※一通りの言語は触れますが、原則としてNext.js案件のみでお願いします（ReactのみSPA・non TypeScriptな保守もNGです）

（一般公開用途のポートフォリオ・経歴は特に作っていないので、一般公開できる形式のものをこちら↓に後日にでも追記したいと思います。）

b. メディア・取材のご依頼をお待ちしています

これはアプリのユーザーが増えて口コミも散見されるようになったくらいからの話にはなると思いますが、メディア露出を増やすことを考えておりますため、インタビュー・コラボ・出演など積極的なお声がけ頂ければ幸いです。

c. 私のブログアカウント（ユースケース）

<Coding Notes /> @coding-notes

ちょっとしたプログラミングtipsの共有やコードスニペットのシェアを主としているつぶやきブログアカウントです。

音楽まとめ @shou-music

YouTubeなどのお気に入り音楽を集めてみたマイリスト・プレイリスト的な使い方をしているつぶやきブログアカウントになります。

d. Patreon（パトロン・ご支援）

もともとPatreon的マネタイズ・クラウドファンディングをする計画はなかったのですが、友人からの勧めもあり一応の開設・こちらでの追記とさせて頂きます。

Shou Arisaka (Social Media Dev 🐱‍💻) | patreon.com

ご支援者には以下のような特典・インセンティブを予定しています。
（金額や詳細についてはまだ考えられていないため、Patreonにて適時更新いたします。）

アプリ上でクレジット（ご支援者様の名前表示・サイト・リンク・ロゴなど）を表示
機能実装要望に優先的にお応え
限定グッズ・アプリ内称号の配布・NFTアイテムのプレゼントなど

免責・但し書き

アプリにはご利用規約・プライバシーポリシー事項・免責事項などを記載しています。ご同意・ご理解の上ご利用頂けますようお願いします。

例えば、アプリは常に開発を進めており、小さな変更から大幅な仕様変更まで行われる可能性があります。サービス上ではデータベースのバックアップを定期的に取り、ロールバックが可能な状態を維持することに努めてはいますが、データの損失をはじめとした潜在的な損害には一切の責任を負うことができず、ユーザー各人に利用とバックアップなどの判断を委ねています。

また（*1）に示すような一部の機能については開発段階で機能が未実装または不安定な場合があります。

Xからの移行先として考えて頂けるのは嬉しいことですが、旧ツイッターや既存のSNSには歴史に応じたノウハウが蓄積しています。企業努力とユーザベースは認められるべきであり、本記事や私の考えとして、従来的なSNSの存在意義に一方的な否定的立場を取るものではないことを明記しておきます。

参考文献（関連記事）

（ブログサイト個人開発）

（無料のブログ作成サービス）

（SNSサービス個人開発）

（他のSNSサービス）

You get articles that match your needs
You can efficiently read back useful information
You can use dark theme

What you can do with signing up