読者です 読者をやめる 読者になる 読者になる

すたらブログ

文系Webプログラマの備忘録

GitHubで公開中のjQueryプラグインをCDNで配信するためにjsDelivrへ登録した

最終更新:
下記の方法は現在では古いようです。
最新の方法は公式の情報を確認してください。
https://github.com/jsdelivr/jsdelivr/blob/master/CONTRIBUTING.md

目次


今回登録したもの

// 単体で
<script src="https://cdn.jsdelivr.net/jquery.add-input-area/4.8.4/jquery.add-input-area.min.js"></script>

// jQueryと合わせてひとつのHTTPリクエストで
<script src="https://cdn.jsdelivr.net/g/jquery@3.2.1,jquery.add-input-area@4.8.4"></script>

(ひとつのHTTPリクエストにまとめる方法の詳細)


必要なもの

  • *.min.js(最小化されたファイル): 必須。
  • info.ini: 必須。
  • update.json: jsDelivrが自動で登録・更新してくれるので、作ったほうが良い。
  • バージョンタグを付けたリリース: (GitHubで公開している場合)

手順

私の場合、推奨されている「Web Interface (Recommended)」の手順ではどうもうまくいかなかったので、「Advanced」の手順を採りました。


minファイルを作成する

ファイルの最小化は、下記を利用すればいいと思います。

バージョンタグを付ける

コマンドラインでは下記のように。

# タグを付ける
git tag v1.0.0

# タグをリモートに送信する
git push origin --tags

GitHubのウェブサイトでは下記のように。

jsdelivrをフォークする

Forkボタンを押すだけで完了です。

info.iniを作成する

フォークしたレポジトリのfile/の下に新たにフォルダを作るため、+をクリックします。

パッケージ名の後に/(スラッシュ)を入力すれば、自動で階層化してくれます。

私のinfo.iniは以下のように書きました。

author = "Yuusaku Miyazaki"
github = "https://github.com/sutara79/jquery.add-input-area"
homepage = "http://www.usamimi.info/~sutara/sample/add-input-area"
description = "jQuery plugin for adding or deleting Form elements."
mainfile = "jquery.add-input-area.min.js"

update.jsonを作成する

「info.ini」と同じ階層で新たにファイルを作成します。

私のupdate.jsonは以下のように書きました。

{
  "packageManager": "github",
  "name": "jquery.add-input-area",
  "repo": "sutara79/jquery.add-input-area",
  "files": {
    "include": [
      "jquery.add-input-area.min.js"
    ]
  }
}

注意: includeのファイルはプロジェクトのルートからのパスで記述します。
ファイルが全て共通のサブディレクトリ内にあるなら、別途basePathを設定するのも手です。

プルリクエストを送る

下記の画像の通りに進めていきます。

本家と比べて、どのファイルをプルリクエストすべきなのかを自動で選んでくれます。

完了

これで完了です。
jsdelivr/files/jquery.add-input-area/には他にバージョン番号が名前となったフォルダがありますが、これはjsDelivrが自動で作成したものです。
登録が完了したら、notifications@github.comから通知が届きます。


うまくいかないときは

登録に失敗した場合も何らかの通知が届きます。
それに従って修正すればいいでしょう。

実は、私はminファイルを作ってコミットしたものの、それにタグを付け忘れていました。
jsDelivrが古いバージョンを登録しようとして、それにはminファイルが含まれていなかったのでエラーとなりました。
新たにタグを付けてそれをjsDelivrに報告したら、あちらの方が手動でマージしてくださったようです。
お手数かけました…orz


感想

自分のミスのせいでかなり時間がかかったものの、手続き自体はとても簡単です。
公式サイトの説明を読むと、どうやら自前でサーバを用意しているわけではなく、有名な既存のCDNをいくつか組み合わせて運営しているようです。
その中にはjQuery本家がCDNの設置先として使っているMaxCDNも含まれていますし、自身のプログラムの配信だけでなく、jsDelivrに登録されている他のパッケージの利用についても安心できそうだと感じました。