くりにっき

フルスタックキュアエンジニアです

chrome-gitlab-notifier v2.0.0をリリースした

今年初のビッグバンリリースです

chrome.google.com

tl;dr

既存のコードを全て捨てて全部書き直しました

書き直した経緯

  • GitLab API v4に対応するにあたって、既存のコードベースでv3とv4両方対応するのはいろいろつらそうだったため
    • 特にjQueryでDOMをゴリゴリ操作してるところとか
  • テストを書いてないことはなかったけど、jQueryでDOM操作してるviewや定期的にGitLab APIをたたいてポーリングしてるバッググラウンド処理のテストが全然なくて、かつ今までの経験上一番不具合起こってた場所だったので手厚くテストを書きたかった

主な変更点

https://github.com/sue445/chrome-gitlab-notifier/blob/master/CHANGELOG.md#200-20170504 からの抜粋です

  • 全てのjsをES6で書き直した
    • Chromeはトランスパイル不要でES6がそのまま動かせるので、あえてBabel系のツールは使っていません
    • Chrome拡張はChrome以外のブラウザを考慮不要なのが非常によい
    • classとアロー演算子便利
  • jQueryに依存してた処理を mithril.js に移植
    • Twitter BootstrapがjQueryに依存してるためjQuery自体は捨てていませんが、プロダクトコードでのjQuery依存は全部なくしました
    • mithril v1を使ってたのですが、日本語サイト がv0系のままで苦労した記憶(mithril移植終わったくらいで日本語サイトもv1対応してた)
  • Jasmineでやってたユニットテストmocha に変更
    • 最初 ospec っていうmithril付属のテスティングフレームワーク使ってたのですが、あまりにも機能が少なすぎたので断念
    • 一番最初にテスト書いてた当時(4年前くらい)はJasmineとmochaほぼ同じくらいのシェア(主観)だったのですが、今はmochaが優勢な気がした(主観)のでmochaを採用
  • ESLint 導入
    • 仕事でrubocopをよく使ってるのでjsでも使いたいと思って探していたらESLintに行き着いた
  • yarn 導入
    • Travis CIでnpm installしたパッケージのキャッシュを効かせるにはyarnが必要っぽかったので導入
  • せっかくなので使ってるライブラリも諸々アップデート
  • その他細かいバグ修正など

差分

プルリクエストだと差分しかなくてワケワカメなので細かいdiff読むならマイルストーンがおすすめ

f:id:sue445:20170504024921p:plain

プルリクエスト上だとライブラリのアップデート内容も含まれてるので無駄に差分が大きいですが、書き直したソースの差分だけならこんな感じ

$ git diff --stat 1.4.3...2.0.0 -- src/
 src/avatar_cache.js       |  69 +++++++--------
 src/background.js         | 356 +++++++++++++++++++++++++++++++++++------------------------------------------
 src/background_init.js    |  42 ++++++++++
 src/base_cache.js         |  19 +++++
 src/config.js             | 348 ++++++++++++++++++++++++++++++++++-----------------------------------------
 src/gitlab.js             | 313 ++++++++++++++++++++++++++++++++++++++------------------------------
 src/notification.js       | 130 +++++++++++++++-------------
 src/notification_cache.js |  71 ++++++++--------
 src/options.js            | 489 +++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++---------------------------------
 src/options_init.js       |  42 ++++++++++
 src/popup.js              | 235 +++++++++++++++++++++++++++------------------------
 src/popup_init.js         |  36 ++++++++
 src/util.js               |  61 --------------
 13 files changed, 1237 insertions(+), 974 deletions(-)

$ git diff --stat 1.4.3...2.0.0 -- test/
 test/avatar_cache_test.js       |  56 +++++++++++++++++++++
 test/background_test.js         | 273 ++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++
 test/base_cache_test.js         |  38 ++++++++++++++
 test/notification_cache_test.js |  65 ++++++++++++++++++++++++
 test/notification_test.js       | 148 ++++++++++++++++++++++++++++++++++++++++++++++++++++++
 test/options_test.js            |  31 ++++++++++++
 test/popup_test.js              |  63 +++++++++++++++++++++++
 test/stub/projects.json         | 112 +++++++++++++++++++++++++++++++++++++++++
 8 files changed, 786 insertions(+)

$ git diff --stat 1.4.3...2.0.0 -- spec/
 spec/SpecRunner.html                   |   63 ---
 spec/gitlab_spec.js                    |   98 ----
 spec/lib/jasmine-1.3.1/MIT.LICENSE     |   20 -
 spec/lib/jasmine-1.3.1/jasmine-html.js |  681 ------------------------
 spec/lib/jasmine-1.3.1/jasmine.css     |   82 ---
 spec/lib/jasmine-1.3.1/jasmine.js      | 2600 --------------------------------------------------------------------------------------------
 spec/lib/jquery.mockjax.js             |  587 ---------------------
 spec/lib/run-jasmine.js                |   86 ----
 spec/notification_spec.js              |   94 ----
 spec/spec_helper.js                    |    4 -
 spec/stub.js                           |   89 ----
 11 files changed, 4404 deletions(-)

spec/ 全消しなのはJasmineを捨ててmochaに乗り換えたためです

mithril.jsを採用した経緯

実は最初Vue.jsを使って書き直してたのですが、Vue.jsの中で使ってるevalがChrome拡張だとサンドボックスモードを有効にしないと使えなくて、サンドボックスを有効にすると今度はChromeのlocalStorageにアクセスできなくてVue.jsは断念しました。

が、後日Twitterでのやりとりで事前に全部コンパイルしているとChrome拡張でもVue.jsが使えるということが判明。

jp.vuejs.org

次にChrome拡張作る時はVue.jsワンチャンありそう

開発期間とか

前述のVue.js時代から含めるとかれこれ2ヶ月くらいかかって全部のコードを書き直しています

あとビッグバンリリースと銘打ってますが、TDDのこころ に従って1ファイルずつ地道にES6化&テスト追加しています

1ヶ月くらい自分のローカルで動かしてたので致命的なバグはないはずです。

今日から使える!OSSプルリク集 #megurorb

昨日 Meguro.rb#2 2017/04/20(Thu) でLTをしたのでその時の資料を公開したいと想います

megurorb.connpass.com

スライド版

sue445.github.io

リポジトリhttps://github.com/sue445/megurorb-02

ブログ版(内容はスライドとほぼ同じです)

OSSにプルリク出す時のあるあるネタを実用例を交えて紹介


1. ドキュメントのtypoなどを修正

  • これが一番プルリクの難易度は低い

https://github.com/gitlabhq/gitlabhq/pull/7534

  • GitLabのwebhookで実装はされているが、リファレンスから漏れているパラメータがいくつかあったので追加
  • 「◯◯(プルリク番号)で追加されているけどその時にリファレンスに更新されていないよ!」って言えればベスト
  • GitLabはAPIの実装とリファレンスの差異が結構多いので狙い目

2. .travis.yml に新しいRubyのバージョンを追加

rvm:
  - 2.1
  - 2.2.2
  - 2.3.1
  # ここに2.4を追加したい

CI against ruby 2.4

https://github.com/sue445/index_shotgun/pull/28/files

f:id:sue445:20170420010405p:plain


英文の元ネタ

https://github.com/amatsuda/database_rewinder/commit/6a1f87c3a0729391bd24c68f38d28622d385479b

f:id:sue445:20170420010438p:plain

「CI against 〜」は使いやすいので定型句として覚えていていい


3. gemの新しいバージョンが出たので依存を緩めたい

f:id:sue445:20170420010449p:plain


https://github.com/activeadmin/activeadmin/pull/4722

  • kaminari v1系が出た直後に、activeadminでkaminari 1系使うために依存を緩めたかった

f:id:sue445:20170420010458p:plain


英文の元ネタ

https://github.com/activeadmin/activeadmin/commit/7a861b723bd65ea174541cf2f23048143575cba8

f:id:sue445:20170420010506p:plain

「Relax ◯◯ dependency for △△△」も使いやすいので定型句として覚えていていい


4. activesupportactiverecordに依存してるgemでRuby 2.2未満系でコケるので5系未満使うようにする

  • 1年以上ビルドしてないようなリポジトリだと久しぶりのPRでビルドがコケる原因第1位

f:id:sue445:20170420010518p:plain

https://travis-ci.org/railsware/global/jobs/198722120


Gemfileにとりあえずこれ書いとけば bundle install できるのでPR送る

if Gem::Version.create(RUBY_VERSION) < Gem::Version.create("2.2.2")
  # activesupport 5+ requires MRI 2.2.2+
  gem "activesupport", "< 5.0.0"
end
  • Ruby 2.2.2未満で動かんからとりあえずサポート切ったわ!」っていきなりPR送るのは穏やかじゃないので、Ruby 2.2.2未満だったらCIでactivesupport 5系使わないようにしてCIを正常な状態に戻すのが平和
  • 実際にRuby 2.2.2未満のサポート切るかどうかはリポジトリオーナーの判断に委ねる

Tips:バージョンは文字列比較ではなく Gem::Version で比較した方がいい

"2.1.10" > "2.1.2"
#=> false

Gem::Version.create("2.1.10") > Gem::Version.create("2.1.2")
#=> true

"5.1.0" > "5.1.0.rc1"
#=> false

Gem::Version.create("5.1.0") > Gem::Version.create("5.1.0.rc1")
#=> true

5. Railsのrc出たからとりあえずビルドしようぜー!

https://github.com/mitaku/komachi_heartbeat/pull/22

f:id:sue445:20170420010531p:plain


.travis.ymlで複数gemfile対応してるのであればgemfile作って1行追加するだけ

gemfiles/rails5_1.gemfile

source "https://rubygems.org"

gem 'rails', "~> 5.1.0.rc1"

gemspec path: '../'

.travis.yml

gemfile:
  - gemfiles/rails4_1.gemfile
  - gemfiles/rails4_2.gemfile
  - gemfiles/rails5_0.gemfile
  - gemfiles/rails5_1.gemfile # <- 1行追加

正式版じゃないのでallow_failuresにしておいて、ビルドコケるのは許容する

matrix:
  allow_failures:
    # NOTE: There are unstable versions
    - rvm: ruby-head
    - gemfile: gemfiles/rails5_1.gemfile # TODO: Remove this after rails5.1 is released!

6. Travis CI対応してないリポジトリに .travis.yml 投げつける

f:id:sue445:20170420010539p:plain


Let’s contribute! :innocent:

備考

今回スライド作成に reveak-ck を使っていますが、reveal-ckはOGP対応していなかったのでOGP対応してプルリク投げています

github.com

発表に使ったスライドもプルリク投げたブランチでビルドしています

# frozen_string_literal: true
source "https://rubygems.org"

gem "rake"
# gem "reveal-ck"
gem "reveal-ck", github: "sue445/reveal-ck", branch: "meta_contents"

https://github.com/sue445/megurorb-02/blob/68f69bcd4de980969e9b0fa42fed9e6c262b8b69/Gemfile

OGP対応の結果はこちらになります sue445.github.io

2017/4/24追記

reveal-ckに僕のプルリクが取り込まれたやつが v3.6.0 としてリリースされています! https://github.com/jedcn/reveal-ck/blob/master/CHANGELOG.md#360–2017-04-23

誕生日に有給でプリ充してきた

プリ充 = リア充プリキュア版みたいなの

Togetterでもよかったんだけどはてなブログの方がはてブ通知受け取れて便利なのでこっちで。

プリキュアドリームスターズ@TジョイSEIBU大泉

キラキラ☆プリキュアアラモード

誕生日なので有給とってプリキュア映画見にきた

なんだかんだで5回目でした。1つの映画でこれだけ見るのはおそらく最多

とはいえ、5回目でもいろいろ新しい発見があってよかった

展示

Go!プリンセスプリキュア

魔法つかいプリキュア

キラキラ☆プリキュアアラモード(3人)

カスタードかわいい

Instagram

スイパラプリキュアコラボ@池袋スイパラ

www.sweets-paradise.jp

去年か一昨年も誕生日に有給とってスイパラ行きましたが、平日昼間だと予約なしで並ばずに入れてよいですね

キラパティ感ある

ペコリン

以降飯テロ注意

りすプリン!ハッピーバースデー俺!

キュアカスタードのオレンジフロート

ごちそうサマンサタバサ

こちらからは以上です

35歳になった

とうとう定年の歳です *1

例年のごとくこの日は有給とってプリキュアの映画を見に行く予定です。

例のリスト

http://www.amazon.co.jp/registry/wishlist/3HH1FL88AQAG8/

ご査収ください

*1:「エンジニア35歳 定年」でググってください

rubicure v1.0.0リリースノート

rubicureのこれまでとこれから - くりにっき でも書きましたが、大幅に変更が入っています!

sue445.hatenablog.com

詳しいことはCHANGELOGを読んで下さい https://github.com/sue445/rubicure/blob/master/CHANGELOG.md#v100

破壊的変更

長らくdeprecatedにしていたhumanizeメソッドを削除

humanize! を使ってください

Ruby 2.2.2以上必須にした

activesupport 5系との兼ね合いで2.2.2以上必須にしています

Ruby 2.2.2未満の時はGemfile側でactivesupport 4系を使ってもらうという選択肢(ドキュメントで補完)というのもあったのですが、どうせドキュメントなんて読まないだろうし「Ruby 2.1系でbundle installに失敗する」というissueに対して質問返すのも不毛なのでこの機会にバッサリ古いRubyのサポートを切りました。

キュアプリンセスの人間の時の名前を変更

後述の Girl#full_name メソッドとの兼ね合いで変更しました

  • 変更前:白雪ひめ(ヒメルダ・ウインドウ・キュアクイーン・オブ・ザ・ブルースカイ)
  • 変更後:白雪ひめ

Precure.all_starsメソッドの振る舞いを変更

既存コードの改修が必要という点ではこれが一番大きい変更です

今まで Precure.all_stars は基本的に全てのプリキュアを返していましたが、v1.0.0以降は初代〜魔法つかいプリキュアまでしか返さないようになりました。*1

これは、プリキュアオールスターズ が終わって プリキュアドリームスターズ! が始まったためです。

全てのプリキュアを取得したい場合は後述の Precure.all_girlsPrecure.all を使ってください。

機能追加

Girl#full_nameを追加

白雪ひめやトワ様のように人間界の名前とは別に自国での名前が存在する場合があるので取得できるようにしました

Cure.princess.human_name
=> "白雪ひめ"

Cure.princess.full_name
=> "ヒメルダ・ウインドウ・キュアクイーン・オブ・ザ・ブルースカイ"

Cure.scarlet.human_name
=> "紅城トワ"

Cure.scarlet.full_name
=> "プリンセス・ホープ・ディライト・トワ"

別名がないキャラで full_name を使った場合は human_name (通常の人間時の名前)が返ります

Cure.miracle.human_name
=> "朝日奈みらい"

Cure.miracle.full_name
=> "朝日奈みらい"

Precure.all_girls を追加

Precure.all_stars が全てのプリキュアを返さなくなったため、代わりに all_girls が返ります。

all_girls と違ってデフォルトでキュアエコーが含まれます Precure.allエイリアスとして存在しているので好みに応じて使ってください

キラキラ☆プリキュアアラモードを追加

  • Precure.a_la_mode
  • Precure.alamode
  • Precure.kirakira_precure_a_la_mode
  • Precure.kirakira_precure_alamode

のいずれかで取得できます。

Precure.a_la_mode
#=> {:series_name=>"a_la_mode", :title=>"キラキラ☆プリキュアアラモード", :started_date=>Sun, 05 Feb 2017, :girls=>["cure_whip", "cure_custard", "cure_gelato", "cure_macaroon", "cure_chocolat"]}

Precure.a_la_mode.girls.map(&:precure_name)
#=> ["キュアホイップ", "キュアカスタード", "キュアジェラート", "キュアマカロン", "キュアショコラ"]

余談ですが今期の嫁はキュアカスタードです

Precure.dream_starsを追加

映画プリキュアドリームスターズ! に登場する Go!プリンセスプリキュア魔法つかいプリキュア! キラキラ☆プリキュアアラモードプリキュアが返ります

Precure.dream_stars.map(&:precure_name)
#=> ["キュアフローラ", "キュアマーメイド", "キュアトゥインクル", "キュアスカーレット", "キュアミラクル", "キュアマジカル", "キュアフェリーチェ", "キュアホイップ", "キュアカスタード", "キュアジェラート", "キュアマカロン", "キュアショコラ"]

余談

正式リリース前のバージョンのpreは、プレビュー(preview)の preプリキュア(precure)の pre の両方にかかっています

https://rubygems.org/gems/rubicure/versions

f:id:sue445:20170312133855p:plain

*1:厳密にはキュアフェリーチェプリキュアオールスターズには含まれません

勉強会のスライドにもマンガルーが使えそう

tl;dr

HTMLにマンガルーのタグを埋め込む形式であれば勉強会のスライドにも利用可能

マンガルーとは?

マンガのコマをwebサイトやSNSに貼り付けることができるサービスです

mangaloo.jp

このサイトのすごいところは「権利者より正式に許諾を受けた作品」を使えるということです

ある予感がしてFAQを読んでみた

http://mangaloo.jp/info/faq.html

コマをSNSにシェアするにはどうすればよいですか?

「コマをつくる」のコマの範囲確定後、または「コマをさがす」でコマをクリックした際に出るポップアップから、下図赤丸の「共有URL」をコピーしてSNSにはりつけてください。twitterfacebookなどのOGP(リンクからの画像表示機能)に対応しているSNSであれば、コマをタイムラインに表示することができます。


マンガ画像を保存して使いたいのですが

申し訳ありません。コマは埋め込みもしくは共有用URLでのご利用のみ可能です。 ダウンロードやスクリーンショットなどで保存、利用することは禁止させていただいております。

パワポやpdfへの画像埋め込みはアウツだけど、HTML形式のスライドならマンガルー使っても大丈夫ではという気づき

実際に問い合わせてみた

問い合わせたメール

こんにちは。FAQを読むとwebサイトやブログに貼り付けることを想定しているようですが、HTMLにマンガルーのタグを埋め込む方式であれば公開先は何でもいいのでしょうか? 私は勉強会で発表するためのプレゼンスライドをHTMLで書いてwebに公開しているのですが、そのような場合でもマンガルーが使えるかどうか気にしています。具体的には http://sue445.github.io/omotesandorb-10/ のような形式のスライドにマンガルーのタグをHTMLとして埋め込んで使うことを想定しています

返信メール *1

f:id:sue445:20170301234557p:plain

ご利用方法として問題なさそうなので

まとめ

勉強会のスライドにwebで拾ったマンガのコマを貼り付けるよりもこういうサービス使うのが健全ですね

*1:ブログでのメールのやり取りの公開は予め許可をもらってます