今年もよろしくおねがいします
npmモジュールのアップデートのハードルを下げたい話
このエントリーはKMC Advent Calendar 2018の13日目の記事であり、はてなエンジニア Advent Calendar 2018の13日目の記事でもあります。クロスポストです。よろしくおねがいします。
12日目の記事はそれぞれ以下の記事でした。
npmモジュールのアップデートとの向き合い
皆さん、npmモジュールのアップデート、やっていっていますか?
npmモジュールのアップデートをやっていくこうとしても、フロントエンドで使っている結果としてブラウザを用いた動作確認が大変だったり、そもそもnpmモジュールに詳しくないと影響範囲が分からなくて敬遠されてしまった結果、詳しい一部の人がnpmモジュールのアップデートを気が向いたときにやって治安をなんとか維持しているという状況も少なくないと思います。
- npmモジュールのアップデートは頻繁に行いたい
- しかし、ChangeLogの追随や差分検証、動作検証など色々やることがあって億劫
- npmモジュールに対するコンテキストを有していないと、どれがどのように作用をするのかもイマイチ当たりがつかない
- なので、npmモジュールのアップデートは気合がある人が月1とかにガッとやる羽目になっていて、なかなか横展開できていない
- 依存性が高い
- 月1くらいだと積まれているモジュールも多いので、なかなかその状態からmajorアップデートもやるぞとはならない
こういったnpmモジュールのアップデートのコストが高いとメンバーが感じている状況を少しでも緩和するためのアイデアとそれを具体化するCLIツールを作ったのでご紹介です。
npm-safety-updater
上記のような問題について話していたときにこの問題に向き合うアイデアとして次のようなことが挙がりました
- ユーザーに配っているJSの中身が変わったら何はともあれ結局手で確認することからは逃れられない
- 逆に言うと、それに差分が無いときはリリースに載せても問題ないと判断して良さそう
- 今はここも手で上げてみて差分があるかないかを見ているので、それを自動化出来ると、人間は動作確認が必要だったり、複雑なメジャーバージョンアップに注力できそう
- また、buildやテストのプロセスが成功するかどうかもコマンドを叩いてみれば分かるはずなので自動化されたい
こういったアイデアを元に作ったのがnpm-safety-updaterです。
主な機能として以下のようなものがあります。
- アップデートしたいdepsの種類を指定できる
- 例えば、
devDependencies
だけを指定するということが出来ます
- 例えば、
- アップデートするバージョン差分をpatch,minor,majorから選択できます
- patchバージョンアップなら破壊的変更がない細やかな変更だけなので自動化できそうということで対象にするとか出来る
- テストコマンドを実行して成功したものだけアップデート
- 設定ファイルで諸々指定できます
- 失敗するとpackage.jsonやlockを巻き戻す
- npm ciなどのコマンドを使った掃除もやってくれます
例えば次のような設定ファイルを用意すると、初期状態でbuildしたものとjs,cssのdiffが無い場合に成功となった後にgitのcommitまでやってくれるような設定を書くことが出来ます。
{ "prepare": [ "yarn run build", "mkdir -p /tmp/safety-build", "cp -f public/dist/{admin,application}.{js,css} /tmp/safety-build" ], "testCommand": [ "yarn run build", "diff public/dist/admin.js /tmp/safety-build/admin.js", "diff public/dist/admin.css /tmp/safety-build/admin.css", "diff public/dist/application.js /tmp/safety-build/application.js", "diff public/dist/application.css /tmp/safety-build/application.css" ], "onlySuccess": [ "cp -f public/dist/{admin,application}.{js,css} /tmp/safety-build", "git add package.json yarn.lock", "git commit -m 'update %PACKAGE_NAME% to v%GOTO_VERSION%'" ] }
1つずつのモジュールをインストールしてはビルドし検証しnpm ci等で環境を整えというのが行われるので、実行自体には時間がかかりますが、それでも人間がちまちまと確認していたのを空き時間やJenkinsなどを利用して実行することが出来るので、まずはこのコマンドを叩いてみるだけでも、アップデート一部は出来るようになるので便利だと感じています。
また、この結果例えば@typesから持ってきているものがpatchバージョンアップで型定義が改善された結果buildに失敗するということにも気づけるので助かっています(こういったものは後で結果を見て人間が手で調整することになるのですが、それでも対象モジュールを手で眺めていくのに比べれば大きな進歩なのではないでしょうか)。
オススメはひとまず npx npm-safety-updater patch,minor --only-dev
を実行してみることです。普段なかなかアップデートしていないと初回は時間がかかりがちですが、2回目移行は数も減り、確認が本当に必要なものだけに注力できるようになると思います。
また、以前id:masawadaが紹介していたyarn-outdated-formatterとmackerelの組み合わせなどでアラートを出すようにして、そのタイミングでひとまずsafety-updaterを使うというのも良いのではないかなと思っています。
今後の展望について
- 現在、
npm|yarn outdated --json
の出力順に結果が依存しているのでなんか上手いこと順番に依存しないようにしたい - 設定ファイルの良い感じの雛形を提供したい
何かあれば是非GitHubのissueなどで教えてください → https://github.com/pastak/npm-safety-updater/issues/new
宣伝コーナー
京大マイコンクラブでは部内のシステムのアップデートをやっていきたい新入部員を年中無休で募集しています。京大生はもちろん、他学の大学生や社会人、高校生でも歓迎です。詳細は以下を御覧ください。
株式会社はてなではこのような開発における問題をエンジニアリングで解決するのが好きな方を募集しています。正社員はもちろん僕みたいなアルバイトでも歓迎です。まずはお気軽にランチでもどうですか?
masawadaといつでも一緒に写真を撮れるmasawada cameraをリリースしました
この記事はmasawada Advent Calendar 2018の11日目の記事です。10日目の記事はid:whywaitaさんのmasawada Advent Calendar 2018 10日目 - なぜにぽえむでした。
というわけで表題のものを作りました。 PCからだとレスポンシブが雑すぎてめちゃくちゃな体験になるので、スマホやタブレットがオススメです。
使い方はアクセスすると書いてありますが、画面真ん中のmasawada画像をタップすると画面に出てくるので、配置を変えたりリサイズしたり出来ます。撮影すると下の部分にギャラリーが出るので適宜保存したりしましょう。
ちなみにServiceWorkerを使って所謂PWAってやつにしてあるので、ホーム画面に追加しておけばオフライン時でも使えて便利です。
作品例
id:daiizくんに手伝ってもらいました。
皆さんも良い画像が撮れたら、是非推奨ハッシュタグの#masawada_cameraでTweetしてください。
おわりに
リポジトリも公開しています。
https://github.com/pastak/masawada-camera
画像を差し替えれば色んなカメラを作れるので、どうにか売り込めないかと画策しています。
明日はid:hitode909さんです。ちなみにこのカメラのアイデアはひとでさんがWebRTC経由でマイクを使っているのを見て、カメラ使えば良いやんってなったのでした*1。明日も楽しみですね。
*1:あとは色々あり、React-Konvaの使用感をチェックしていた
Uber Eatsのアカウント復活しました
事の経緯
とあるTGIF中にUber Eatsで注文する活動をしていると突然画面がリロード地獄に陥ったので、タブを閉じてcookieを消してログインし直そうとしたら次の画面になった。
助けてくれ!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!! https://t.co/6p2M5F2myt pic.twitter.com/YpkpvQ8NOE
— しみだれココアくん (@pastak) 2018年9月21日
まぁ放置すれば直るだろうと思っていてずっと放置してた。
正確にはメールで問い合わせたりしたいが検索しても電話番号しか出てこないので、電話はなぁと思って諦めていた。
気付き
昨日あたりに周囲の人のアカウントが凍結されていて、彼らのアプリの画面を見ると丁寧に http://t.uber.com/account-disabled を見るようにと書いてあった。僕もやってみるかと思ってアクセスすると、「アカウントの有効化」というページに飛んだので、フォームを埋めて送信したところ半日くらいで復活した。
一応、Uberの利用履歴のところに直近のUber Eatsの注文情報を書いたが、これが有効だったかは不明。
UberEatsアカウント復活最高!!!!!!!!!!!!!!!!!!!!! https://t.co/x1tQ87CrM4 pic.twitter.com/IANd7ZyPs8
— しみだれココアくん (@pastak) 2018年11月28日
アプリ入れてないから全く分からなかったけど、普通にUberのアカウント有効化フォームからやっていけば復活した https://t.co/1ecjytmBXj
— しみだれココアくん (@pastak) 2018年11月28日
PC版のログインフォームだと情報が無なので何も分からなかった…アプリは便利。
皆さんもお気をつけください。
北海道旅行に来ています
木曜日から北海道に来ています。様子のご紹介です。
木曜日
Peachに乗って新千歳へ。そして札幌市内へ。
hokkai7goさんのメモをもとに適当なモツ鍋とジンギスカンの店へ。店の写真を見て、ここ2年前にも来たなぁって気付いたので安心して入店。
ニラが大量に積まれているのを見て、これをするのはここしかないと完全に思い出した。
これはここに来るちょっと前に見たバニララッピングのバス。特に行き先とか無く停まっていた。
ナイアガラエールなどをいただいた。ボトルの種類も多くて、ウイスキーも豊富で静かなお店で良かったです。
金曜日
午前中は適当に札幌市内を散歩していたところ、HTBの取材クルーにインタビューを受けた。
onちゃんのウィンドブレーカーの取材陣からインタビューされました(これは同行の1人の様子です pic.twitter.com/XNx9NqMX59
— マジカルペンネくん🍝 (@pastak) 2018年11月2日
思ったより温かかったので、下にヒートテックを着つつもシャツとパーカーという感じの出で立ちだったので、「こんにちは〜。薄着ですね〜。どこから来られたんですか?今日の札幌は高温だというテーマで取材していて、インタビューよろしいですか?」という感じでインタビューを受けた。
放送されたかは不明。でも、京都から来たとか、思ったより暑かったので持ってきた上着は全部ホテルに置いてきたとかそういう話題をしたので多分使われていると思うので情報募集しています。
そしてこれはインタビューを受ける前に撮った紅葉とテレビ塔。
この日の昼はスープカレーを見ることにした。
野菜が大きくて良かったです。僕は辛さ1にしたけど、辛さ2にしたnonyleneとかは辛そうにしてたので2にしなくてよかったと思いました。
ここでサッポロクラシックの樽生を今回の旅行中では初飲みした。
札幌始まりました pic.twitter.com/CO9Lj4wwbi
— マジカルペンネくん🍝 (@pastak) 2018年11月2日
昼ごはんを食べているとき、nonyleneがさっきの取材をonちゃんを見たのを思い出して、onちゃんグッズが買いたいと言い出したので、すぐそこにあったHTBへ。
1階でグッズが売っていたが、どうでしょうのDVD発売キャンペーンをやっていて、それを見ると東急ハンズのステッカーが欲しかったので、nonyleneに東急ハンズでグッズを買うよう説得して東急ハンズへ向かうことに。
その前に北海道庁に立ち寄ることに。赤レンガ前広場でやっていた道北市みたいなので、森の雫が売っていたので購入。その時、何故か後ろにゆるきゃらが居た模様。
今日の出来事です pic.twitter.com/WgeK3tUOrG
— マジカルペンネくん🍝 (@pastak) 2018年11月2日
北海道庁 赤れんが庁舎で北方領土に関する展示や樺太に関する展示を見る。
北方領土といえばエリカちゃんですが、当然そこら中に居たし、アニメも見れた。
今から皆さんに、北方領土に関するクイズを出すピィ~♪
— 北方領土エリカちゃん (@hoppou_erika) 2015年2月9日
まずは初級編だピ!
【第1問】北方領土を不法に占拠しているのはどの国でしょう?
クイズを出すピィの鳥、こんだけ北方領土好きなら突然クイズ出しても仕方ないと思った pic.twitter.com/3oxk09BqWy
— マジカルペンネくん🍝 (@pastak) 2018年11月2日
あと1階のお土産売り場では今一部で話題沸騰、売り場にも今人気ですと書かれていたこれを購入。
北海道庁で人気のお土産買いました pic.twitter.com/jYerzKzcV3
— マジカルペンネくん🍝 (@pastak) 2018年11月2日
このあとは東急ハンズで高速にonちゃんグッズを買い、カフェで休憩しながらインターネットを吸引して、再び活動開始。
ミルク村という店へ。ここは特製アイスにリキュールをかけて食べられる店。
130種類くらいから選べる。オススメのAセットは1人2種類選んでそれにヨーグルトとかが付いてくる。3人で行ったので6種類選べた。
凝ったやつでマッカランリフレクションとかバランタイン30年とかも良かったが、シンプルにバタースコッチとかどんぐりとかが良かった。アイスも特製のバニラアイスにオレンジリキュールを含ませてあってそれだけでも美味しかった。
この日の夜は回らない方の花まるへ。回る方に行きたかったが列ぶ気合いがなかった。
美味かったが、アイスでお腹が膨れていてあんまり食べられなかったという反省がある。
そんなこんなしていると大学の先輩が合流するということで2次会へ。2次会は日本酒の店。と言っても地酒という感じではなかったがラインナップがいい感じだったので良かった。
ここで結構飲んで調子が良くなった。
そろそろ次ということでノースアイランドビールのビアバーへ。移転しているの知らなくてうっかり以前の情報の場所に行ってしまうところだった。
まずはIPA
今月の限定の紅潮。ラガーという感じで思ったより柑橘は後味にほんのりという感じだった。
一旦ここでゲストで入っていた忽布古丹醸造さんの良月の酒宴を飲む。忽布古丹醸造のブリュワーさんの1人は元ノースアイランドビールの方。
スタウトやヴァイツェンは人から一口もらって味わったので、最後はコリアンダーブラックにした。
朝にnonyleneが今日は夜に味噌ラーメンに行きたいと行っていたのを思い出し、ホテルに一度荷物を置いた後に近くの味噌ラーメンへ。時間も遅かったのでやってるとこ少なかったが、入ったらビールが売り切れていて悲しかった。札幌ラーメンとしてはまぁそこそこという印象。
土曜日
気合いがあれば新千歳空港国際アニメーション映画祭でリズと青い鳥観ようと思ってたがそんな元気は無かったので、ドーミーインで朝ごはんを食べ、余市へ。
ニッカウヰスキーの施設見学と試飲。適当なシングルモルトの小瓶を買った。こういう感じ。
そして今は定山渓ホテルに来て温泉に入った後にこうしてブログを書いています。
ちなみにさっきやったワニワニパニック王座決定戦ではnonyleneが大敗、僕が2位で優勝はsilloiくんでした。
明日はミッキマウス映画祭を札幌駅前の映画館で眺めた後洞爺湖に行きます。果たしてどうなるのか。水曜日までこっちには居る予定です。何かあればお知らせしますね。
3連休の思い出
たまには日記書く。
金曜日
TGIFやりました。
https://atnd.org/events/100365
来て下さった皆さんありがとうございました!!!!そしてウィッシュリスト経由でお酒下さった皆さんもありがとうございました!!!美味しくいただきました!
akiroomさんたちNOTAの皆さんからサプライズプレゼントもらったのも嬉しかった。ありがとうございます!
おめでとう! pic.twitter.com/gyhk01jwEo
— gocci 🚀 Nota (@kanakogooz) 2018年9月21日
誕生日祝いに頂きました!!!!ありがとうございます!! pic.twitter.com/fu0ibcOjv5
— マジカルペンネくん🍝 (@pastak) 2018年9月21日
誕生日TGIF全体的には得るものが多く大変素晴らしい会だったのですが、僕は失ったものもありました。それはUber Eatsのアカウントです。めっちゃ困っているので有識者の方いらっしゃいましたら助けてください。よろしくおねがいします。
助けてくれ!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!! https://t.co/6p2M5F2myt pic.twitter.com/YpkpvQ8NOE
— マジカルペンネくん🍝 (@pastak) 2018年9月21日
(なんか会計するときにプロモーションコード入れようとしたら突然セッションが吹っ飛んでそのあと、ログインしてくれみたいなのが無限に出まくってタブを閉じてcookieを消してログインし直そうとしたらこうなった・・・・・・)
土曜日
前日いっぱい飲んだのでぐったりしていた。諸事情でAdobe CCに課金をしてPremiereを導入。
夜はサークルの先輩が京都に帰ってきてたので遭遇しに行っていた。チーズフォンデュ見たが写真はない。
日曜日
この日も夜に予定があるという展開だったので日中はマンガを読むなどしてた。
『ムラサキ』、ストーリーは荒削りでコンテンポラリーダンスの説明も物足りない感じがするけど圧倒的に魅せる画面で凄い。特に翔之助のシーンは墨絵を彷彿とさせる迫力のある見開きはこれだけ大きく額縁に入れて飾りたいくらい。
(第5話より。このシーンに続くとこがめっちゃいいので買って読んでくれ)
夜はパーティに行った。人がいっぱい居てめでたい感じだった。
月曜日
『フリクリ オルタナ』そろそろ観たいということと「フリクリ POPUP STORE」見に行きたいということで活動予定を組んでやっていった。
まずは朝起きて心斎橋に移動。この前心斎橋の近くに所用で行ったときに友人が教えてくれた寿司屋に行った。
ランチは色々載ってて、小鉢と茶碗蒸しと赤出汁付いて1.5人前で900円。
友人にこの店は「うなぎバター」なるものが美味いと聞いていて、そのような暴力が世の中にあるのかと思い確認しに来たのだったので、単品で「うなぎバター」を注文した。
名前の通り、うなぎにバターが載ったものが出てきて、うなぎとバターの味がして当然のように美味かった。これは優勝です。
心斎橋OPAのHMVに「フリクリ POPUP STORE」を見に行ったが意外とこぢんまりとしてた。
まぁ欲しかったのは一通りあったので良かったですね。1つ失敗点は『オルタナ』を観てから行くべきであったということ(何故ならキャラデ表などが展示してあったから)
そのあとは心斎橋に特に用事もないので、シュッと京都に帰り17時から『フリクリ オルタナ』を観た。
http://flcl-anime.com/alterna/
世の中には賛否両論あるようですが、僕は圧倒的に賛でした。
以下は力強めの感想です。反論はあると思いますが特に募集はしていません。よろしくおねがいします。
(ここは引き返す用の改行です)
フリクリ オルタナ観た。賛否あると聞いてたので身構えてたけど、なかなか良かった。"フリクリ"ではないけど、フリクリの要素を使ったフリクリのための作品って感じで良かったと思う。上手くオリジナルへのアンサーにもなってたと感じた。途中少し退屈だったけど。
— マジカルペンネくん🍝 (@pastak) 2018年9月24日
フリクリオルタナ観て、インタビューとか読んでても本広克行は座組とか最低限のことしかやってないんだろうなと思ったので、プログレも安心して観れそう
— マジカルペンネくん🍝 (@pastak) 2018年9月24日
映画ドットコムのフリクリ オルタナの感想レビュー一通り読んだけど、世の中の人々はこう受け取ってるのなかなか厳しそう。プログレも受け入れられないだろうなあ
— マジカルペンネくん🍝 (@pastak) 2018年9月24日
フリクリの呪いというかあの頃のガイナというかに囚われてる人々が急に這い出てきたという感じだな
— マジカルペンネくん🍝 (@pastak) 2018年9月24日
そういったあれやこれやをギターを振り回してあの頃をふっ飛ばしてないといけない小学生たちが高校生になれてないだけじゃんってレビュー読んで思った
— マジカルペンネくん🍝 (@pastak) 2018年9月24日
フリクリ オルタナに怒ってる人多そうだから地雷踏まないように気をつけて行かないとな
— マジカルペンネくん🍝 (@pastak) 2018年9月24日
久しぶりのブログということでリハビリとしてはよく書けたと思うけどどうでしょう。フリクリの話は『プログレ』観終えたあとに気力があれば。それよりもまずは『若おかみは小学生!』観たいし、10月には大川隆法大先生の新作も待ち構えていますね。ではでは。