見出し画像

XとBlueskyへ、同時にポストできるWebアプリを作っています![途中経過]

2024年2月、Blueskyが誰でも使えるようになりました。
Xとよく似ているSNSということで早々にアカウントを作り、Xとの同時運用をしていくことに。
とはいえ、同じことを2つのSNSへポストするのはじゃまくさい。
なので、どちらへも同時にポストできるしくみをWebアプリで作ることにしました。

この記事ではその途中経過をお伝えします。
どんなWebアプリができあがるのか気になる方は、ぜひ最後まで読んでみてくださいね。

Webアプリの構想

どんなWebアプリにしようかと、考えた結果、

  • XとBlueskyの両方へ、同じ内容を同時にポストしよう

  • そういえば、ぜんぜん更新してないInstagramがあるから、そっちにも同時にポストしちゃう?

  • 下書きをためておけたら便利だよね

  • 日時を指定して予約ポストできたらさらに便利になるなぁ

  • 複数のアカウントを運用できるようになると、神も目指せるんじゃね?

とりあえずはこんな感じになりました。
後で思いついた便利機能も付け足すことができます。
Webアプリを自作する楽しさのひとつです。

そして、X・Bluesky・Instagramの3つへ同時にポストできるWebアプリということで、「PostPostPost」と名付けました。
一応付け足しますが、ポストできるSNSが増えても、名前はこのままですからね。

制作過程

中身見せるの、なんか恥ずかしい(笑)

このWebアプリは見た目をHTMLとCSS、内部で動くしくみを主にPHP、一部をJavaScriptで作っています。
CSSはBootStrapを使って工期短縮することにしました。

それぞれのSNSにはAPIというしくみが用意されていて、Webアプリとの橋渡しをしてくれます。
XとBlueskyのAPIにはライブラリーを使い、Instagramには直接接続しています。

BootStrapってなに?ライブラリーってなに?って方へ
材料買ってきて手作りでカレーを作るよりも、レトルトのを買ってきて温めるほうが、手間がかからないですよね。
プログラミングには、無料で食べられるレトルトのカレーみたいなのがありまして、それを使ってる感じです。

現在の状況

実はこのWebアプリ、すでに実用レベルまでできあがってきています。
なので動作テストも兼ねて日頃のポストにも使っています。

ポスト内容の新規作成

左:新規ポスト作成中  右:ポスト結果
  1. 画像を使う場合は「ファイルを選択」から画像を選び、「Upload」をタップ。

  2. 「ネタ」に文章を記入。140文字へのめやすが緑色の帯で表示されます。

  3. 「スレッド」をタップすると、記入欄が追加され、さらに140文字のネタを入力が可能。これにより、300文字(Blueskyのポスト1回分)までの文章を作ることができます。

  4. ポストしたいSNSを選択。

  5. 「ポスト」をタップしてポストします。いずれのSNSも選択していなかった場合は下書きに保存されます。

  6. 画面が切り替わってポスト結果を表示。実際の文字数やポストが正常におこなわれたか、エラーがなかったか表示されます。
    Webアプリを使ったXのポストには、24時間あたり50回までの制限があるため、残りのポスト数を表示しています。

ポストした結果

左:X  右:Bluesky

同じ内容が同じ時間にポストされているのがわかりますね。
Xのポストを画像付きにするのがなかなか難しく、つい最近やっとできるようになりました。
そしてこの2つのSNS、本当によく似ていますね。

その他の実装済み機能

[下書き]
下書きに保存したネタは、後で取り出してポストできます。
また、画像を追加したり書き直したりした後、再度下書きに保存しておくことも可能。
もちろん下書きを削除する機能もあります。

[アカウント変更]
複数のアカウントを運用できるようにしました。
ポスト先はもちろん、下書きや今後実装される履歴の表示もアカウントごとに表示されます。

今後追加する機能

日時指定ポスト

このWebアプリを思いついたときは、ささっとポストすることを想定していました。
計画的なSNS運用を考えたWebアプリを別で作っているからです。
でも「このポストは後にしよう」って時がよくあるので、このWebアプリでも日時指定できるように機能を追加します。

履歴一覧表示

「履歴」のボタンがすでにあるのですが、今はタップしてもなにも起きません(笑)
作ろうとしているのは、これまでにポストした履歴を表示できるだけ、なんてかんたんなものではないです。

例えば

  • 過去のポストをリポストや引用ポスト、返信ができる

  • Xにだけポストしていたけど、同じ内容をInstagramにもポストする

などの使い方ができるようになります。

よくあるかもしれない質問集

そもそもWebアプリって何?

Webサーバー上で動作するアプリのことです。
EdgeやGoogle Chrome、Safariなどのブラウザーからアクセスして利用します。
銀行の口座残高を確認したり振り込みをしたり、ホテルや新幹線の予約をしたり、noteの記事を書いたり、さまざまなところで使われています。

このWebアプリはどうしたら自分も使える?

現在は作成途中のため、配布・販売などはおこなっていません。
安定した動作が続き、どなたでもかんたんに使えるWebアプリに仕上がるよう、引き続き作成を続けていきます。

使えるようにするのはかんたん?

正直言いまして、ちょっと難しいです。
使えるようにするまでのマニュアルを用意しますが、丸1日かかることも想像できます。
WordPressをインストール・設定するのと同じか、もう少し多くの労力が必要です。

無料で使えるようになるんですか?

Webアプリの配布は無料でできるように検討中です。
しかし、Webサーバーが必要なため、レンタルサーバーを使う費用がかかると思います。
すでにWordPressを使われているなら、同じサーバー上で動作できます。
独自ドメインはなくても大丈夫です。

追加してほしい機能をリクエストできる?

この記事のコメントやこのページの一番下「クリエイターへのお問い合わせ」からリクエストをお送りください。
すべてのリクエストを採用できるかはわかりませんが、精いっぱい考えてみます。

まとめ

X・Bluesky・Instagramへ同じ内容を同時にポストできるWebアプリ「PostPostPost」について、構想や現在の状況、今後追加する機能をご覧いただきました。
まだまだ制作途中ということで、引き続きの情報をお待ちいただけるとうれしいです。
また、細かな情報や経過などをXやBlueskyでお届けするかもしれません。
ぜひ、フォローしておいてみてくださいね。

X:https://twitter.com/narumeron_1212
Bluesky:https://bsky.app/profile/narumeron.xyz

この記事が参加している募集

つくってみた

この記事が気に入ったらサポートをしてみませんか?