Blueskyに伏せ字投稿ができるWebアプリの作り方

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

Blueskyに伏せ字投稿ができるWebアプリの作り方

Blueskyに伏せ字投稿ができるWebアプリの作り方

ENDO Yasuyuki

More Decks by ENDO Yasuyuki

Other Decks in Technology

Featured

Transcript