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

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

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

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

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

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

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

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

パッケージの種類

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

package Dartのみで書かれた一般的なパッケージ。HTTP通信用のクラスなど、Flutter用に限らず様々な種類がある。
plugin Dartで書かれたコードに加えて、Android/iOSなどのネイティブAPIにアクセスするライブラリ。 exampleプロジェクトが用意されていて実際にアプリを動かしながら作ることができるので、 FlutterのWidgetを提供するパッケージもpackageではなくこちらの雛形で作る。

パッケージの作り方

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

`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にアクセスするためプロジェクト構成が少し複雑です。

libとtestディレクトリは先ほど説明した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.yamlのauthorとして書いてある人が登録されていましたが、最近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