物置小屋

メモ置き場

TravisCIを使ってGitでタグ付けしたら自動でストアとGitHubReleaseにアップロードする

はじめに

ブラウザ拡張機能を公開するのにChrome Web StoreとGitHubReleaseを使っています。
本来は手動でファイルをアップロードして公開しないといけないけど、毎度自前でビルドしてアップロードしにいくのも面倒なのでTravisCI使って自動化したいという話です。

前提としてvue-web-extensionで作ったものを公開するものという形でいきます。

使うもの

使い方

chrome-webstore-upload-cliを入れる

$ npm i -D chrome-webstore-upload-cli

package.jsonscriptsに下記を追加する。

"release": "cd dist && webstore upload --auto-publish"

TravisCI上でGitHubリポジトリを追加する。

ここは普通にやるだけ。

TravisCIに必要な環境変数を追加する

ここを参考にGoogle API Keyを取得する。

TravisCIのリポジトリセッティングのEnvironment Variablesに下記のような組み合わせで追加する。

CLIENT_ID: clientId
CLIENT_SECRET: clientSecret
REFRESH_TOKEN: refreshToken
EXTENSION_ID: 拡張機能のID

Travis CI command line client を入れる

gemとやらを使うので事前にRubyを入れておく必要がある。

$ gem install travis

これでOK

Gitプロジェクト上でtravis.ymlをセットアップする

事前にプロジェクトディレクトリに.travis.ymlという空ファイルを作っておく。

$ travis setup releases
Username: username
Password for username: passwd
File to Upload:
Deploy only from username/project? |yes|
Encrypt API key? |yes|

最初のUsernamePasswordGitHubのを入力する。
その後色々と出てくるけどとりあえず全部エンターする。設定は後でファイル弄って変えれば良い。

そうすると以下のようなファイルが生まれる。

deploy:
  provider: releases
  api_key:
    secure: なんか長いやつ
  file: ''
  on:
    repo: username/project

これを下記のように変えた。

language: node_js
node_js:
- '8'
install:
- npm install
script:
- npm run build:dev
- npm run build
- npm run build-zip

deploy:
  - provider: releases
    skip_cleanup: true
    api_key:
      secure: 長いやつ
    file_glob: true
    file: dist-zip/*.zip
    on:
      repo: username/project
      tags: true
  - provider: script
    skip_cleanup: true
    script: npm run release
    on:
      branch: master
      tags: true

上のscriptの部分は普通にビルドしてるだけ。
skip_cleanup: truescriptでビルドしたファイルをそのまま残すことができる。(書かないとdeployのとこに入る前に消されちゃうっぽい)
file_glob: trueワイルドカードを有効にし、file: dist-zip/*.zipでパッケージ化したzipファイルをGitHubReleaseにアップロードしている。
on: tags: trueでタグ付きの場合のみアップロードする設定になっている。

下のscript: npm run releasepackage.json内のreleaseScriptを呼び出しているだけ。

あとはローカルでタグをつけてPushする、もしくはGitHubRelease上で適当にnew releaseすればTravisCIが勝手にアップロードしてくれる。


で、設定してみたのが下記のリポジトリ。きっと楽になるはず(ちゃんと動作してくれれば…)

github.com

終わりに

以上、メモを兼ねた記事でした。
Firefoxの方でもやりたいので調べ中。。

VRChatのフレンドがオンラインになった際に通知するようにアップデートした[VRCFriendCheck]

はじめに

VRChatのフレンドのオンライン状況等を手軽に確認できるChrome, Firefox拡張機能を作っています。

mnao305.hatenablog.com

今回アップデートを行い、フレンドがオンラインになった際に通知する機能を追加したのでそれの紹介です。

この記事は追加機能のみの紹介です。
その他実装済みのものについては前回の記事を参照してください。

内容

f:id:mnao_305:20190429162446p:plain

こんな感じにフレンドがオンラインになった際に通知してくれる機能を追加しました。
5分おきに新しくオンラインになったフレンドがいるか確認し、新しくオンラインになったフレンドがいる場合、そのユーザのユーザ名最大10人まで表示します。

設定

通知機能はデフォルトではオフになっています。使用するにはオプションからオンにする必要があります。
以下オンにする方法を書きます。

デフォルトオンになりました。

f:id:mnao_305:20190429163925p:plain

右上のアイコンを右クリックするとオプションという項目があるので、それをクリックします。

f:id:mnao_305:20190429164051p:plain

するとこんな感じの画面が出るので、「フレンドがオンラインになった際に通知する」をONにして下の保存ボタンを押してください。
また、「通知するのはお気に入りフレンドのみにする」をONにすると、お気に入りに設定したフレンドのみを通知できます。

以上で設定については完了です。

終わりに

今回のアップデートの内容の紹介はこれで終了です。

何かあればGitHubのIssuesTwitterまでお気軽にどうぞ。

リンク

mnao305.hatenablog.com

chrome.google.com

addons.mozilla.org

github.com