pub.dev に自分のパッケージを登録しよう #Flutter

はじめに

この記事はFlutter Advent Calendar 2019 7日目の記事です。

前日は @kikuchy さんの自動コード生成を駆使してFlutter開発を楽にするでした。知らないことだらけだったので、勉強になりました。

どうも、たくチャレです。

7日目はpub.devに自分が作ったパッケージを登録する方法を紹介します。

ただ登録するだけだったら一瞬で終わってしまうので、

公式オススメのファイル構成の紹介
パッケージの自動テスト・カバレッジ取得
verified publisher のなり方

も合わせて紹介します。

私は先日非常にシンプルなdot_pagination_swiperを登録してみました。画面の下部にドットのページネーションを実現するだけのパッケージです。これを登録した時の流れを紹介します。

pub.dev とは

Flutterでアプリを作ってる人に説明は不要かと思いますが、pub.devはDartの公式パッケージリポジトリです。FlutterやWeb向けのDartのパッケージを一覧・検索・登録を行うことができます。

pub.devで面白いと思ったのは、パッケージがPopularity、Helth、Maintenanceの3項目をもとにスコアリングされていることです。他の言語・プラットフォームのパッケージリポジトリは知らないのですが、こういう目安があるとユーザがパッケージを選ぶ基準になりますね。

パッケージ登録の流れ

流れは以下の通りです。

パッケージ作成 (flutter create --template=package hello)
パブリッシュの dry run (flutter publish --dry-run)
エラーがなければパブリッシュ (flutter publish)

iOS/Android のネイティブの機能を使う必要がある場合は、--template=pluginを指定してください。パッケージの作成はAndroid Studio などGUIで行えますが、publishする方法は分かりません…

パッケージ登録の流れ自体は簡単ですが、1. のパッケージ作成が一番大変でしょうね…笑

初めてパブリッシュした時に以下のような文章が出てきます。yを入力して、表示してあるURLをブラウザにコピペしてAllow accessを押してください。Google アカウントに紐づいてパブリッシュされます。

console

Looks great! Are you ready to upload your package (y/n)? y

Pub needs your authorization to upload packages on your behalf.
In a web browser, go to https://accounts.google.com/o/oauth2/auth?access_type=offline&approval_prompt=force&response_type=code&client_id=xxxxxxx.email
Then click "Allow access".

現在のコマンドラインツールの仕様上、後述するverified publisherにいきなりパブリッシュすることはできず、一度自分の Google アカウントに紐づけてパブリッシュした後にverified publisherに移管する形になります。こちらのNoteを参照してください。一度移管してしまえば、更新は直接行えます。

ファイル構成

公式ドキュメントからの引用ですが、以下はenchiladaという名のパッケージのファイル構成例です。

enchilada/
  .dart_tool/ *
  .packages *
  pubspec.yaml
  pubspec.lock **
  LICENSE
  README.md
  CHANGELOG.md
  benchmark/
    make_lunch.dart
  bin/
    enchilada
  doc/
    api/ *
    getting_started.md
  example/
    main.dart
  lib/
    enchilada.dart
    tortilla.dart
    guacamole.css
    src/
      beans.dart
      queso.dart
  test/
    enchilada_test.dart
    tortilla_test.dart
  tool/
    generate_docs.dart
  web/
    index.html
    main.dart
    style.css

*がついているファイルは自動生成されるファイルなので、VCS には入れないでください。
**のpubspec.lockはアプリケーション以外では VCS に入れないでください。

上記ファイル全てが必要なわけではなく、pubspec.yaml、LICENSE、README.md、CHANGELOG.md、lib/*があればパッケージとして成立します。

それぞれを簡単に説明します。

pubspec.yaml

パッケージの情報を記載するためのファイルです。
flutter createした後description、author、homepageを追加すれば OK です。

更に詳しい情報はこちらを参照してください。

LICENSE

ライセンスの定義をしましょう。Flutter本体がBSD-3-Clauseを採用してるので、私もそうしてます。自身のポリシーに合わせてもらえれば良いと思います。

flutter createした直後はLICENSEに何も書かれていないのでちゃんと忘れずに書きましょう。私は忘れました。

README.md

GitHubなどでもトップページに表示される説明文ですね。pub.devでもパッケージのトップページに表示されるので、いろんな人に使ってもらいたい場合しっかり書きましょう。

CHANGELOG.md

pub.devのパッケージのChangelogタブに表示されます。ユーザが変更点を簡潔に知るための手段なのでしっかり書きましょう。

lib/*

パッケージのソースコード本体です。

パッケージの自動テスト・カバレッジ取得

ちゃんとビルドできるか、どれくらいテストカバレッジがあるかもユーザがパッケージを選ぶ指標の一つになると思います。ステータスバッジあるとかっこいいですしね！

テストの書き方に関しては、3日目の @chooyan_eng さんがWidget テストの「あれ、これどうやるんだろう？」集を書いてくれていますので、みんな要チェックです！

ここではGitHub Actionsを使った自動テストとカバレッジ取得の方法を紹介します。

設定ファイルをバーンと書いてしまうと次のようになります。flutterコマンドのversionとchannelを指定することができます。カバレッジ自体はflutter test --coverageで取れますが、それでは見にくいのでCodeCovで可視化してあげます。

.github/workflows/test.yml

name: Test

on: [push]

jobs:
  build:

    runs-on: ubuntu-latest

    steps:
    - uses: actions/checkout@v1
    - uses: takuyaohashi/setup-flutter@v1
      with:
        flutter-version: 'latest'
        channel: stable
    - name: install dependencies
      run: flutter pub get
    - name: analyze
      run: flutter analyze
    - name: test
      run: flutter test --coverage
    - uses: codecov/codecov-action@v1
      with:
        token: ${{ secrets.CODECOV_TOKEN }}

複数バージョンで行いたい場合以下のように記述できます。テスト部分以外は割愛。

.github/workflows/test.yml

jobs:
  test:
    runs-on: ubuntu-latest
    strategy:
      matrix:
        flutter: [ 'latest', 'v1.9.1+hotfix.6' ]
    steps:
    - uses: actions/checkout@v1
    - uses: takuyaohashi/setup-flutter@v1
      with: 
        flutter-version: ${{ matrix.flutter }}
        channel: 'stable'
    - name: test
      run: flutter test

詳しくは下記ブログに書いてあるので参照してください。

ちなみにflutterコマンドを使えるようにするアクション(takuyaohashi/setup-flutter)は自作しました。ああしたい、こうしたいがあれば気軽にissue/PRをください。

verified publisher のなり方

verified publisherになるとcloud_firebase の右にあるようなバッジがつきます。なんかかっこいいですね！！

verified publisherになる前提として自身が管理しているドメインを持っていることが必須です。私の場合takuchalle.devですね。ドメインさえもっていれば、パッケージを一つも登録していなくてもverified publisherになることができます。それでいいのかって感じですけど笑

まだ何もないけど、バッジをゲットした。 #flutter #pub pic.twitter.com/KuDfv3JCmi
— たくチャレ@めざせポケモンマスター (@takuchalle) November 20, 2019

手順としては簡単で、右上のアカウントのところのCreate publisherからポチポチ押していけばOKです。pub.dev で verified publisher になる方法に詳しい手順が書いてあるので参照してください。

まとめ

pub.devに自分のパッケージを登録する方法とそれに付随する周辺情報を紹介しました。

人のソースコードを読むのが好きなので、いろんな人がどんどんパッケージ化してオープンにしてノウハウを広めていって欲しくてこんな記事を書きました。ソースコードを読むためだけだったらGitHubを覗きに行けばいいのですが、良いパッケージがあれば自分のアプリに組み込んで楽をしたいし笑

もっとFlutterの勉強して私も貢献できるように頑張ります。

Flutterはフレームワークの良さもさることながら、pub.devなどのエコシステムもちゃんとしてるのが良いですね。Dartも普段C言語をメインに使ってる私からすると機能豊富だし、文末もセミコロンも気になりません。

明日は @mjhd-devlion さんのflutter webに関する記事です。楽しみですね！