Flutterの自作パッケージを作る

この記事はFlutter 全部俺 Advent Calendar 24日目の記事です。

このアドベントカレンダーについて

このアドベントカレンダーは @itome が全て書いています。

基本的にFlutterの公式ドキュメントとソースコードを参照しながら書いていきます。誤植や編集依頼はTwitterにお願いします。

自作パッケージを作ることの意義

Flutterでパッケージ(他の言語でいうライブラリ)を作るのはとても簡単です。 パッケージ化することで、自分が関わっている複数のプロジェクトで共通の処理を再利用できたり、Flutterコミュニティに 資産を還元することができたりします。特に後者に関してはFlutterのような発展途上のフレームワークにとって最も重要なことです。

シンプルな実装やニッチなユースケースでも、どこかに同じような課題を抱えている人は必ずいますし、 パッケージができるだけ多く存在すること自体がコミュニティにとっていい影響を与えます。積極的にコードをパッケージ化していきましょう。

パッケージの種類

Flutterのパッケージには大きく分けて2種類あります。packagepluginです。パッケージの種類の中にpackageがあるのが ややこしいですが、そういうものだと思って飲み込んでください。

パッケージの作り方

パッケージ作成の最も簡単な始め方は、flutterコマンドの雛形から作り始めることです。 packagepluginで少し作り方が違うので別々に紹介します。

packageの場合

以下のコマンドでプロジェクトの雛形が作られます。

$ flutter create --template=package sample

作られたプロジェクトを開くと、以下のようなディレクトリ構成になっているはずです。

パッケージのプロジェクト構成

パッケージの実装はlib/sample.dartに書いていきます。ファイル名はプロジェクト名と同じにします。

lib/sample.dartには以下のような実装がサンプルとして書いてあります。

library sample;

/// A Calculator.
class Calculator {
  /// Returns [value] plus 1.
  int addOne(int value) => value + 1;
}

1行目はパッケージを作るためのキーワードなのでそのままにしておいて、 あとは自由に共通化したいDartのコードを書いていくだけです。

コードの動作確認はテストコードで行うことになるので、test/sample_test.dartに書いておきましょう。

packageの準備はこれだけで、あとは公開するだけです。

pluginの場合

以下のコマンドでプロジェクトの雛形が作られます。

$ flutter create --template=plugin sample

pluginのプロジェクト構成

pluginはネイティブのAPIにアクセスするためプロジェクト構成が少し複雑です。

libtestディレクトリは先ほど説明したpackageにあるものと全く同じだと考えていいです。

android/iosディレクトリは、通常のプロジェクトと同じでそれぞれのプラットフォームのプロジェクトが丸ごと入っています。 ここに、Android/iOSのネイティブAPIを使うコードを書いて、lib/sample.dartにDartとのブリッジを書くのが pluginの基本的な作り方です。

ネイティブAPIにアクセスするコードの書き方については、13日目の記事14日目の記事を読んでください。

さて、これでpluginを実装することができましたが、テストコードで動作検証ができるpackageに対して、 ネイティブのAPIへのアクセスが必要となるpluginはコードだけで検証することはできません。

そこで、pluginの雛形にはexampleプロジェクトが用意されています。exampleディレクトリ以下は通常の Flutterプロジェクトなので、そこでpluginのコードをインポートして実際にアプリを動かしながら開発をしていきます。

$ cd example
$ flutter run

パッケージを公開する

さて、パッケージの実装が終わったら後は公開するだけです。まずは最短で公開してみましょう。

ライセンス文を追加する

パッケージを公開するためにライセンス文が必須です。雛形のLICENSEファイルは空欄になっているので、 各自適切なライセンス文を貼付しましょう。dartではBSD licenseが推奨されていますが、 必ず内容を自分で確認しましょう。

Googleアカウントを用意する

DartのパッケージはGoogleアカウントに紐づいてpub.devに公開されます。そのためGoogleアカウントが必要です。

pub.devに公開する

あとは以下のコマンドでpub.devにアップロードされます。 初回は認証のためにターミナルの指示に従ってurlを開いてGoogleログインをする必要があります。

flutter pub publish

アップロードが終わったらpub.devにログインして、My packagesに追加されていることを確認しましょう。

pub.devのスクリーンショット

パッケージのスコアをあげる

パッケージを公開すると、pub.devに以下のように専用のページが作られます。

https://pub.dev/packages/flutter_circle_color_picker

そのページのタブの一つにスコアがあります(下の画像の「76」部分)。

pub.devのスコアタブ

このスコアはパッケージのメンテナンス状況やユーザー数、ドキュメント充実度などによって自動で算出されている値で、 これが高いとユーザーに安心して使ってもらいやすくなります。

この値を上げて行きましょう。

README.mdを書く

プロジェクトの雛形にREADME.mdファイルがあるので、そこにパッケージのドキュメントを書きましょう。このファイルはGitHubだけでなく、 pub.devのページにも表示されるので、ここが充実しているかはユーザーにとっても大きな指標になります。

README.mdの差分

https://github.com/itome/flutter_circle_color_picker/commit/30c08d5b5f43fdf28e2740280ae9e3b050bc7aa4

CHANGELOG.mdを書く

バージョンごとの差分を書くCHANGELOG.mdも指標になります。こちらもREADME.mdと同様に書いておきます。

CHANGELOG.mdの差分

https://github.com/itome/flutter_circle_color_picker/commit/0f3625cad2934e5b28b92ae07302e8e3af29e32c

pubspec.yamlを書く

pubspec.yamlの情報はpub.devに表示されるので、きちんと書いておきましょう。

pubspec.yamlの差分

https://github.com/itome/flutter_circle_color_picker/commit/f5ce89ac1b047dec68dccd33d308bec6ae8ed272

verified publisherになる

pub.devに登録されているパッケージの作成者ははこれまでpubspec.yamlauthorとして書いてある人が登録されていましたが、 最近authorの項目が非推奨になり、代わりにverified publisherという仕組みを使うことが推奨されるようになりました。

verified publisherは、認証された独自ドメインをユーザーに紐づけることによって、オーナーの信頼性をより高くする仕組みです。 有料のドメインは誰でも無料で取得できるGmailアドレスよりも取得が難しいのでハードルは上がりますが、その代わり公式の認証を受けることができます。

verified publisherになると、パッケージの作成者欄に公式のマークと登録したドメイン名が表示されます。 TwitterやInstagramの公式マークのようなものですね。

verified publisherのマーク

公式の認証というとかなり大仰に聞こえますが、独自ドメインさえ持っていれば誰でも取得できます。

まず、pub.devにログインして、以下のページに自分のドメインを入力します。

https://pub.dev/create-publisher

すると、以下のようにエラーが出ると思います。要約するとGoogleがこのドメインの所有権が自分にあることを確認できていない旨が書かれています。

verified publisherの作成エラー

指示に従ってGoogle Search Consoleを開きます。開いたページの左の欄に自分のドメインを打ち込むと、 DNSの設定をするための手順が表示されるので、ドメインのホストサイトでTXTレコードの編集を行います。

このとき、Google Search Consoleにログインしているアカウントが pub.devに登録しているGoogleアカウントと同じであることを必ず確認してください。

Google Search Console

これで完了です。しばらくするとDNSの設定がGoogle Search Consoleに反映されます。 反映が終わったら、先ほどのCreate Publisherページでもう一度ドメインを入力します。

ここでエラーが出なければアカウントとドメインが紐付けられて、晴れてあなたもverified publisherです。

パッケージを公開するときの注意点

パッケージを公開する手順は以上で終わりですが、一点公開前に注意しなければいけないことがあります。 それは、「一度公開したパッケージは絶対に削除できない」ということです。

たとえばパッケージ公開を試してみるためだけのhogeのような適当な名前のパッケージを公開したら、 それを削除することが一切できなくなります。

discontinuedというパッケージのメンテナンスをやめるバッジをつけることはできますが、 パッケージのサイトにDISCONTINUEDと表示されるだけで引き続きダウンロードも閲覧も可能なままです。

また、パッケージをアップデートしても過去のバージョンは全てpub.devからダウンロード可能です。 そのため、秘密の情報などをアップロードしてしまうと取り返しがつかなくなります。

パッケージを公開する前には必ずダブルチェックを行い、公開してはいけない情報が含まれていないか確認しましょう。

参考資料

https://flutter.dev/docs/development/packages-and-plugins/developing-packages

https://dart.dev/tools/pub/publishing

23日目: Flutterのアプリ設計(Mobx) :

https://itome.team/blog/2019/12/flutter-advent-calendar-day23

25日目: Flutter for Webを理解する :

https://itome.team/blog/2019/12/flutter-advent-calendar-day25