Bluesky に伏せ字投稿ができる Web ア プリの作り方 2024-02-21 Yasuyuki ENDO 1

GitHub リポジトリ https://github.com/eyasuyuki/bluespoiler/ 2

説明すること どうやって伏せ字投稿するのか なぜ作ろうと思ったのか なぜWeb サービスやモバイルアプリとしてリリースしなかったのか なぜFlutter で書いたのか 画像サイズチェック Bluesky への接続とテスト 記事URL の推測 今後の展開 3

説明しないこと fusetter の伏せ字アルゴリズムを勝手に推測する Flutter のライブラリの使い方 Riverpod Freezed go_router flutter_hooks image_picker_web Rich Text でURL をリンクさせる 4

詳しくは Zenn に書きました。 https://zenn.dev/eyasuyuki/articles/825b28b0ec0a4c ※ イイネください.... 5

どうやって伏せ字投稿するのか https://eyasuyuki.github.io/bluespoiler/ [ と] の間の文が○ になる(fusetter の再発明) ネタバレの本文は画像のALT に入る 6

伏せ字投稿 ネタバレ ALT 7

デモ https://youtu.be/eZX9s03MDQc?si=bgW2A1EWXn87TGWZ 8

なぜ作ろうと思ったのか Bluesky にはfusetter がないので だがfusetter みたいに自前サーバーを持つのは面倒 画像のALT なら1000 文字まで入れられる( 邪道) 自前バックエンドは持たずにBluesky とだけ通信すればいい 9

なぜ Web サービスやモバイルアプリと してリリースしなかったのか Web サービスは維持費がかかるし無料枠だとしても維持するのが大 変 当初はモバイルアプリ版も作ろうと思った Web アプリとして公開してiPhone のホーム画面に追加してみた。ア プリ必要ないじゃん 失敗したのは何もログを取っていないこと( ユーザーにとってはメリ ット) 10

なぜ Flutter で書いたのか 当初はモバイルアプリ版も出そうと思っていた React やVue などWeb クライアントサイドの流行を追うのは大変 Flutter ならモバイルもWeb もデスクトップも同時開発できる Flutter は2 年ぐらい触ってないのでキャッチアップしたかった Bluesky.dart の情報がすぐに見つかった 11

画像サイズチェック 976.56KB を超える画像をアップロードするとエラーになる 976.56KB 以下に圧縮を試みたがWeb クライアントサイドでは無理 そう 単に警告するだけにした 12

画像選択部分のコード ※ Dart は new を省略できます。 13

Bluesky への接続とテスト Article クラス 14

Bluesky への投稿 15

テスト とりあえず本当に接続してテストする 本物のID/ パスワードを隠蔽するために flutter_dotenv を使う .gitignore に .env を追加する プロジェクトルートに .env ファイルを作成 16

テスト main 17

画像投稿のテスト ※ 本当に投稿されます。 18

記事 URL の推測 Bluesky にPost すると例えばこんな結果が返る。 {"uri":"at://did:plc:dptps7rgxju4nrg6qskop2wz/app.bsky.feed.post/3kjmvo7ocl62e", "cid":"bafyreihxcb3n6hxucw3hdeb3kylhzkoumitkx4hygoy24tyxt4hemajdde"} Bluesky の記事URL はこんな感じ。 https://bsky.app/profile/javaopen.org/post/3kjmvo7ocl62e 3kjmvo7ocl62e が記事のID っぽい javaopen.org の部分は session.data.handle で取得できる 19

記事 URL の生成 20

投稿後の画面 21

今後の展開 認証方法の改善(Bluesky 待ち) ログをとる(Google Analytics?) 伏せ字投稿ランキング? 発表させていただきありがとうございました。 22