Flutter パッケージを開発し、公開し、そして Reddit で 100 Upvote された話
先日、 Flutter で使える画像切り抜きパッケージ crop_your_image を公開しました。
crop_your_image は「画像切り抜き機能」を自由な UI でアプリに組み込めることを目指したパッケージで、最低限の UI を提供する Widget である Crop と、それを操作する CropController で成り立っています。
crop_your_image パッケージ自体の詳しい説明はこの記事ではなく pub.dev の README ページに任せることにしつつ、この記事では Flutter パッケージのプロジェクト作成から公開、コミュニティでの発信まで、自分が体験したことをざっとまとめてみたいと思います。Flutter のパッケージ開発に興味がある方が全体的な流れをイメージできることを目指した内容になっています。
なお、この記事では概要のみをかいつまんで書いていますので、具体的な方法や注意点などについてはリンク先（主に公式サイト）を参照してください。
Flutter パッケージ作成から公開までの全体的な流れ
Flutter パッケージを開発する一連の方法は公式ドキュメントの以下のページにまとまっています。
これを読むと分かりますが、パッケージのプロジェクトを作成して公開する手順はとても単純です。
- プロジェクトを作成して
- プログラムを書き
-
README.mdやpubspeck.yamlを埋めて - 公開用のコマンドを実行する
これだけです。それぞれの手順について、もう少し詳しく書いていきます。
プロジェクトを作成する
まずは、以下のコマンドでプロジェクトを作成します。
$ flutter create --template=package [package_name]
pub.dev に公開するために必要なファイルやディレクトリ構成は全て自動生成されますので、とても手軽に開発がスタートできるようになっています。この状態から後述するメタデータを少し書き換えてしまえば公開できてしまう、というくらい必要なファイルは最初から整っています。
ただし、中身のないパッケージを公開することは規約で禁止されています。
上記の規約によると、例えば pub.dev 上でパッケージ名を確保する目的で「とりあえず公開」することは明確にポリシー違反とされていますので、プロジェクト作成した時点のコードをとりあえず勢いで公開してしまわないように注意しましょう。
その他、命名に関するポリシーや一度公開されたパッケージが非公開にできない点など、ポリシーページには大事なことがいろいろ書かれていますので、公開コマンドを実行する前までに確認しておくと良いでしょう。
プログラムを書く
当然のことながら、プロジェクトを作成したらパッケージの中身を開発しなければなりません。
開発の進め方はパッケージの内容（Flutter パッケージなのか Dart パッケージなのか、PlatformChannel は使うのか、など）により異なりますが、例えば crop_your_image の場合は以下のように進めていました。
crop_your_image プロジェクトを VSCode でコーディングする
パッケージ開発とは言っても、通常のアプリ開発における共通 Widget や共通クラスを作るのと感覚的には大差ありません。
プロジェクトを作成すれば lib の下に自動でひとつ .dart ファイルが生成されますので、そこにプログラムを書いても良いですし、 Dart の文法に従ってファイルを分割しても大丈夫です。パッケージ内のファイルの分割方法やフォルダ分けなどについては自分がよく使う他のパッケージを参考にしてみると良いでしょう。
最初の .dart ファイルを出発点として、実現したい機能を持ったクラスを使い慣れた IDE で 1 から書いていきます。
パッケージを取り込むサンプルアプリプロジェクトを別で作って開いておく
Flutter パッケージの場合、パッケージのプロジェクト単体ではアプリとして実行できません。そのため、それを取り込んで動作確認できるサンプルアプリのプロジェクトを別で作成します。
pubspec.yaml にパッケージの記述を追加する際、まだパッケージは pub.dev に公開されていない状態ですので、 pubspeck.yaml の dependencies には通常とは違い「ローカルのパッケージを取り込む」ための以下の記述を入れます。
dependencies:
flutter:
sdk: flutter
crop_your_image:
path: ../path/to/package/crop_your_image
基本的に、パッケージをローカルから取り込む場合でも pub.dev から落として利用する場合と同じように利用できます。必要に応じてパッケージ側のコードを修正したり、使う側のアプリのコードを修正したりしながら開発を進めると良いでしょう。
動作確認をする
さて、パッケージ側、アプリ側ともコード書けたら動作確認です。動作確認の方法は通常アプリを開発する場合と特に変わりはありません。
1点だけ、パッケージ側のコードの修正は Hot reload では反映しない ことに注意が必要です。Hot reload ではなく Hot restart すると反映されますので、パッケージのコードを修正した場合は忘れず Hot restart すると良いでしょう。
またこれは自分のやり方が間違ってるのかもしれませんが、パッケージ側のクラス名やプロパティを変えたり追加したりした際、アプリ側にそれを認識させるためにはいちいち VSCode を閉じて開き直す必要がありました。（このあたり、どなたか正しい方法をご存知でしたらコメントください！）
というわけで、こんな感じでコードを書いて動作確認をして、を繰り返しながらパッケージとして公開したい機能を実現していく形になります。
所定のファイルの必要な部分を埋める
プログラムを書いたら、次にパッケージのメタデータとなるファイルを書いていく必要があります。ざっくり以下の通りです。
- README.md
- README です。ここに書いた内容がそのまま pub.dev の "ReadMe" のタブに表示されます。
- CHANGELOG.md
- 変更履歴をマークダウンで記載するファイルです。ここに書いた内容は pub.dev の "ChangeLog" のタブに表示されます。
- LICENSE
- ライセンスです。pub.dev では右側の "License" 部分にこのファイルの内容が表示されます。
- pubspec.yaml
- パッケージ名、説明、バージョン、ホームページや依存関係などを記載します。これも pub.dev の所定の場所でそれぞれ表示されます。
- crop_your_image の場合（というかおそらくほとんどの場合）、ホームページは GitHub のリポジトリ URL を書いています。
いろいろありますが、事前準備をしないと埋められないような内容は特にないため、頑張ってひとつずつ順番に埋めていきます。何か不備があれば公開する段階でエラーで教えてくれますので、他のパッケージを参考にしながら書きつつエラーの内容を修正していけば何とかなると思います。
公開する
さて、ここまでできたら公開します。
pub.dev に公開したパッケージは基本的に非公開に変更することはできません。とは言え公開したらその瞬間からたくさんの人に使われるというわけでもないため、いきなり完璧を目指さずとも公開してから少しずつバージョンアップしてより良いものにしていけば良いでしょう。
公開用のコマンドは以下の通りです。
$ flutter pub publish
末尾に dryrun をつけることで、「もし公開した場合」にどうなるかだけを教えてくれる「ドライランモード」で実行できます。ファイルの不備などのエラーも出してくれますので、まずはドライランで実行してみると良いでしょう。
dryrun 無しのコマンドが正常に完了すると、そのまま pub.dev に内容が反映され https://pub.dev/packages/[パッケージ名] でアクセスできるようになります。
自分で作ったパッケージが pub.dev に載ったのを確認できたら、客観的な視点で他のパッケージの内容と比べてみたりしつつ、修正した方が良さそうな部分を修正してもう一度 flutter pub publish すると良いでしょう。ただし、バージョンを変えずに publish することはできないという点には注意してください。
ともあれ、これでパッケージが公開され、世界中の誰もが pubspeck.yaml に1行書くだけでパッケージを取り込める状態になりました！ pub.dev に自分のパッケージが並ぶのを見るとテンションが上がりますね。
コミュニティで宣伝する
さて、ある程度パッケージが使える状態になったら、次は実際に誰かに使ってもらわなければパッケージ開発の意味がありません。
日本人向けの発信であれば Twitter や Qiita, Zenn.dev など、普段使ってるプラットフォームで発信すれば良いのですが、README やコメントを英語で書いておけば海外の開発者でも使えるものになるはずです。
海外に向けて発信する方法を考える時に役に立つのが以下のページです。
このページには、世界中の Flutter アプリ開発者が利用しているプラットフォームがまとまっています。
プラットフォームの一覧
ざっと自分が確認したところ、特にこの中で簡単なテキストでパッケージを宣伝できるのは以下のプラットフォームでした。
- Gitter
- Slack
- Discord
この中で、Reddit 以外のプラットフォームはチャット形式で情報をやりとりするための場です。
Slack, Discord はトピックごとにチャンネルがわかれていたり、それぞれのルールが見やすい場所にまとまっていたりしますので、これらを使う場合は目を通すと良いでしょう。
Gitter はひとつのチャンネルで全ての話題を進めていくようなチャットツールです。特にルールのようなものの記載はありませんでしたが、軽く質問してみたところ「Flutter に関係してれば何でも良いよ」とのことでした。
どのプラットフォームにも同じように自作のパッケージやアプリの宣伝をしている人がたくさんいますので、それらを眺めながらいい感じに空気を読んだり英語を真似たりして発信すると良いでしょう。
反応がよかったのは Reddit
同じ内容を複数のプラットフォームにそれぞれ投げている方が多い様子だったため、自分も同じように crop_your_image を上記の4つのプラットフォームで宣伝してみたところ、一番反応がよかったのは Reddit でした。
Reddit はチャットツールというよりは掲示板のようなサービスで、テキストやリンクにタイトルをつけて投稿し、それを見た他のユーザーが Upvote したりコメントしたりするような作りになっています。
どのくらい反応がよかったかというと、他のプラットフォームではアイコンが1つ2つ付いただけだった宣伝内容が、Reddit だけ投稿した直後から複数の Upvote がつき、さらに "これはいいね！作ってくれてありがとう！" のコメントがいくつもつき、最終的には 1 日で Upvote が 80 、コメントも 5, 6 個つくような良い反応でした。
この記事を書いている時点では投稿から 2, 3 日たってじわじわ Upvote が 100 に到達した状態です。
そのおかげか、 pub.dev の数値を Reddit で発信する前後で比較すると LIKE が 3 -> 55, POPULARITY が 14% -> 55% と大きく増え、 "crop image" での検索結果も上から 4 番目まで上がってくるようになるなど、やはり Reddit での発信は大きな効果があったと言えそうです。
もちろん他のプラットフォームも反応が薄いだけでみんな見てる可能性はあるので、可能な限り色々な場所で発信すると良いでしょう。
英語で記事が書けるようであれば、 Medium や dev.to、 Hashnode なども選択肢に入ると思います。
まとめ
以上、Flutter のパッケージを new project してから開発・公開して宣伝するまでの体験談をまとめてみました。
crop_your_package 自体の内容や設計についてはまた別の記事で詳しくまとめたいと思います。もし「画像切り抜き機能」に興味がある方、必要としている方はぜひ以下のリンク（再掲）から試してみてください！
またとりあえずサンプルコードを見てみたい、という方は以下のリポジトリでサンプルアプリを公開（＆プルリク募集）していますので、ぜひ Clone して実行しながらコードを読んでみてください。
ちょっとした経験にと試しに始めたパッケージ作りですが、やってみて公開してみて実際に反応をもらうのには今まで全く経験したことのなかった楽しさがあるのが新たな発見でした。この記事がみなさんのパッケージ開発への第1歩を踏み出すきっかけになれば嬉しいです。
Discussion