yposiのブログ

Web開発日記

Chrome Extension 「DevMark」が公開された

先週、「Dev Mark」を審査にだしたところで記事を書いたのですが無事に公開されました。

審査出したときに勢いで書いた記事がこれ。
yposi2.hateblo.jp

f:id:yposi2:20210412141630p:plain

インストールしたらユーザー数が即時反映されるのかな?と思って仕事で使用しているPCに入れてみたところ即時反映はされませんでした。
気づいたときには反映済でした。
反映される瞬間に立ち会うことができず残念です。

作って数日が経ち、見てすごく地味に感じているので周りに広めるのはちと恥ずかしいのでひっそりブログに書いてみます。
その辺りどう向き合っていいのか検討事項かなと思いました。

とりま、Google Analyticsの設定は進めたいと思います。
https://analytics.google.com/analytics/web/

Chrome Extension 「DevMark」が審査中

お久しぶりです。

最近本業がそこまで忙しくないので早上がりしてChrome Extensionの開発して審査に出してみました。
審査に最大30日かかるらしいのでその間に記事を書きたいと思います。

何を作ったのか?

サイトにアクセスした際に上からドーンとラベルをのせる開発ツールです。

「Development環境、Staging環境、QA環境、本番環境」が乱れている現場にいる人は今自分がどこの何を見ていたっけ?

あっやべ。
うっかり本番を触っていた。となることがあると思ったんですね。

実際に現場で何回か遭遇した光景です。

それを視覚的にどうにか改善したいと思ったのが今回の開発です。

また、私はRuby on Railsの開発をいくつかしたことがあったのですがrack-dev-markというのが有名です。

github.com

だけど、複数リポジトリ持っていたり、設定したりと面倒だったので開発者以外でも使える様にしてみました。

実装はHTMLとCSS(Bootstrap)とJavaScriptjQuery)を使ったすごく簡単なものだったのですが、Chrome Extensionの開発ははじめてだったので少し時間がかかってしまいました。

開発時間はざっと15時間くらいです。
みんな実装できると思います。

開発にあたり参考にしたサイトは以下です。 developer.chrome.com

初っ端つまずくのはdebug。 こちらを参考にして解決しました。

dev.classmethod.jp

chrome-extension://{エクステンションID}/new.html

この辺が解決すると残る課題がstorage系だと思うのですがそれらはしっかりドキュメント読めば簡単なものは多分作れます。

開発が終わったら次はChrome Web Storeに登録しにいくのですが、 雰囲気を理解するためにこちらを参考にさせてもらいました。

qiita.com

UIが結構変わっているけどもページに課金してたどり着ければ僕はOKでした。 アプリの紹介を英語で書いて終わりです。

アプリのzipはMacの右クリックから圧縮でやりました。

現在がこんな感じです。 f:id:yposi2:20210406220912p:plain

残っている改良点は

  • ラベルの位置を複数指定できる様にする。
  • 見た目をかっこよく。けっこう雑魚いので。
  • bootstrapのスポイドを使える様にしたけどもpopup.htmlからサイト内の色の取得ができないので修正。
  • 手入力が面倒なのでコピー機能があってもいいかもしれません。

使っているライブラリーのアップデートがあるタイミングでこれらの課題を1つずつ改善したいと考えています。

アプリのフィードバックをもらえる様に今回は全部オープンにしているから審査に通ったら試してもらえたら幸いです。

続: 公開されました。 yposi2.hateblo.jp

EpocCam Proがいい

作業中Macクラムシェルモードで使用しています。

Mac ノートブックの内蔵ディスプレイを閉じた状態で、外付けのディスプレイを使う方法について説明します。 Mac ノートブックの内蔵ディスプレイを閉じて、外付けのディスプレイやプロジェクタをつないで使うことができます。 この内蔵ディスプレイを閉じた使用形態を「クラムシェルモード」と呼びます。


f:id:yposi2:20210318202048j:plain:w400

配線が汚いけどもこんな感じです。

Macを立てているのはこれ。

モニターにカメラがついていないのでwebカメラを探したのですがあまり気に入るものがない。

調べる軸は以下でした。

  • 値段が安い
  • 高画質

iPhoneiPadのカメラを使えないかを調べたところいくつか見つかったので試してみました。
試したものはこちらになります。

iVCam コンピュータカメラ

iVCam コンピュータカメラ

  • e2eSoft
  • ユーティリティ
  • 無料
apps.apple.com

EpocCam Webcam for Mac and PC

EpocCam Webcam for Mac and PC

  • Corsair Components, Inc.
  • 写真/ビデオ
  • 無料
apps.apple.com


EpocCam Webcamera for Computer

EpocCam Webcamera for Computer

  • Corsair Components, Inc.
  • 写真/ビデオ
  • ¥980
apps.apple.com


その中で一番良かったのが本投稿の「EpocCam Pro」。

上記「EpocCam Webcamera for Compute‪r‬」からダウンロードして課金すればOKです。
最初は「EpocCam Webcam for Mac and P‪C」でスペックのしょぼい版を試してみてもいいと思います。

EpocCam Proのいい点

  • 980円とwebカメラ自体を買うより安い、買い切り

f:id:yposi2:20210318202635j:plain:w400

  • 画像が綺麗
  • 等倍、2倍がすでに設定済

f:id:yposi2:20210318203011p:plain:w400f:id:yposi2:20210318203000p:plain:w400

  • フィルターがついている

こんな感じにスタンドを使用しながら利用しています。

f:id:yposi2:20210318202249j:plain

だけども悲しいことに職場のzoomはカメラオンの状態が少ないんですよね。

EpocCam Proは3分あれば全体のセットアップが終わるのでおすすめです。

パパ活エンジニア参考になれば

久しぶりの投稿です。 やらしい方のパパ活でないことご了承ください。

今日は以下について書きたいと思います。 これから新米パパになるエンジニアの方の参考になれば幸いです。

  • 一人目の子供が生まれてくる予定の場合の転職はきつい
  • 子供が生まれるとわかっている状態でのペットの購入はきつい
  • 子供が1歳になるまで技術的な学習時間がものすごく削られる
  • 子供は原動力になる
  • アウトプットと虚無感の相対関係

一人目の子供が生まれてくる予定の場合の転職はきつい

妻の妊娠がわかって3ヶ月目頃、転職先が決まり転職しました。 転職する際に「育児休業制度」というものを知らなかったのです。

育児休業制度
子が1歳(一定の場合は、最長で2歳)に達するまで(父母ともに育児休業を取得する場合は、
子が1歳2か月に達するまでの間の1年間、申出により育児休業の取得が可能
また、産後8週間以内の期間に育児休業を取得した場合は、
特別な事情がなくても申出により再度の育児休業取得が可能

退職先で一緒に仕事をしているIくんが、Yさんは今退職すると「育児休業制度」とれないですねーと指摘していたにも関わらず転職を選びました。転職して5ヶ月後、子供が生まれました。コロナの中妻一人奮闘しかわいい男の子が生まれました。 生まれて6日くらいで退院して自宅に来ました。 それからというもの本当に仕事と両立するのが難しい。

  • 朝・昼・晩の妻の食事の準備
  • 買い物
  • 犬の散歩
  • 掃除、洗濯

これらの家事を1人でやることになりました。 洗濯は1人増えただけでなく清潔度が増すため2倍、3倍くらいになったと思います。

子供の成長って2の累乗みたいなもので 2 4 8 16 32 64 128 (日)みたいな感じで日々変化した感じです。 特に最初の16までが死ぬほど辛くて、所謂育休を取得できたのであれば2週間くらいはほしいです。 産後の女性が動ける様になるまで1ヶ月くらいなのでそれくらいとれるとかなり楽になります。

2ヶ月くらいなると眠りの感覚が変わってまた別の辛さが増えるのですが1ヶ月休むために1年働いているのかを考えて行動することは大事です。

幸い仕事について無理しないでいいよって上司が言ってくれたのはありがたかったです。 図々しく仕事最小限にすればよかったのですが考え方が古くそういうことができませんでした。 今思うと結構動揺していたんですよね。

子供が生まれるとわかっている状態でのペットの購入はきつい

コロナ下で近くのホームセンターに犬を見に行っていたんです。 いつも買いたいと思いつつ妻がとめてくれていたのです。 この関係が壊れることがありました。

f:id:yposi2:20210318122117p:plain

www.youtube.com

この子と出会ったんです。 もこちゃん♀です。妻も僕もハートを撃ち抜かれて即購入してしまいました。 ただやっぱり頭が狂っている人の行動なのでやらない方がいいです。

理由としては

  • お金がかかる
  • 時間がなくなる

お金については裕福なところであればさほど問題ではないですが、 子供の費用も結構かかりましたし、犬関連の費用も毎月1万くらいは増えます。 また年に1度予防接種等も発生するので生涯10年生きるとして

  • 犬 30万
  • 予防接種 5000 * 10 = 5万
  • 餌、トイレ等 3000 * 12 * 10 = 36万
  • トリミング、宿泊 10000 * 12 * 10 = 120万
  • 飛行機代 12万 6000 * 2 * 10 = 12万

ざっとこんな感じで200万くらいですかね。

時間についてはなんだかんだエンジニアって「一生勉強」だと思っていて、 勉強するとなると時間が必要でそうなると毎日散歩、掃除、遊びに1時間弱くらいとられるので時間を大事にしたほうがいいかたは再検討した方がいいです。

それでもやっぱり癒やされたら家族のお笑い担当なので家庭は明るくなったと思います。 生き物を買うということは結構大変なことなので何をOKとするか検討してみてはいかがでしょうか。 くれぐれも勢いで購入したり、その時だけ可愛かったという理由で飼うことがないようにしてあげたらワンちゃんも喜ぶと思います。

子供が1歳になるまで技術的な学習時間がものすごく削られる

これは僕の場合だと犬もなので双子がきた感じだったので普通の人は半分の労力で済む説はありますが、 とにかく言えることは今勉強できる人は今できるタイミングで勉強していた方がいいということです。 当たり前の様なことですが、仕事をしながら家事しながら勉強するという行為は達人技だと思います。

そういう先輩エンジニア達を尊敬します。 35歳定年説の用語は家庭環境も大きく影響している様な気もしております。

少子化対策の以前に家族が増えることは非常に嬉しいことなので自分の時間がなくなるからといって子供を作ることを諦めてほしくないし、実際に子供に食わせていく以上仕事もしていかないといけないので技術の貯金を作るでカバーする案を提案したいと思います。

この投稿に感化されて少しでも知識の貯金を作っていただけたら幸いです。

子供は原動力になる

最後大事なことです。 犬も子供もとっても可愛いです。 毎日笑顔を見ながら日々乗り切っている感じです。

エンジニア問わず世のおとうさま方ご苦労様です。

今日はゆるふわなアウトプットでした。

simpackerとRails.ajax

Rails界隈にいる人でsimpackerを採用されている方はいらっしゃると思います。
オールドスタイルな実装を行うにあたり少し躓いたところを残します。

simpackerじゃなくても躓いている内容です。

form_withでremote: trueにしたにも関わらず、respond_to部分でundefinedが起きた。

app/views/users/index.html.erb

<%= form_with url: users_search_path, method: :get, remote: true do |form| %>
  〜
<% end %>

app/controllers/users_controller.rb

def search
  respond_to do |format|
    format.js
  end
end

app/views/users/search.js.erb

$("#id").html("<%= j(render partial: 'table', locals: { users: @users }) %>");

すると、rails-ujsないことがわかった。 当然、simpacker使っているので自分で調整しないといけない。

Rails.ajaxはそもそもjQueryがないと動かないのでjQueryも一緒に追加した。

npmインストール

npm install --save jquery popper.js
npm install --save @rails/ujs

app/javascript/application.js に追加

import 'jquery/dist/jquery.js'
import 'popper.js/dist/popper.js'
import Rails from '@Rails/ujs';
Rails.start();

webpacker.config.jsを修正する

const webpack = require('webpack');

  〜
  plugins: [
    new webpack.ProvidePlugin({
      $: 'jquery/src/jquery',
      jQuery: 'jquery/src/jquery',
      Popper: ['popper.js', 'default'],
      Rails: ['@Rails/ujs']
    }),

github.com

キャッシュを親子に持たせるのは危険。子が死んでも親は残り続ける。

Rails.cacheの中でRails.cacheをするのは危険。 親子関係と呼ぶが正しい表現なのか?

子が死んでも親は残り続ける。

そんな悲しい話ある? プログラミングの話でもあれば悲しい話だと思った今日この頃。

なので子と親に差分があって、 更新系のあるデータを扱う場合でもそうでない場合でもやるな。 絶対やるなという話。

コンソール上で適当にやった

def caching_test(id)
  Rails.cache.fetch("user-caching-#{id}", expires_in: 1.day) do 
    lost_caching(id)
  end
end

def lost_caching(id)
  Rails.cache.fetch("user-child-caching-#{id}", expires_in: 60.seconds) do 
    User.find(id)
  end
end

user = caching_test(1)
=> #<User id: 1, ...>

Rails.cache.fetch("user-caching-1")
=> #<User id: 1, ...>

Rails.cache.fetch("user-child-caching-1")
=> #<User id: 1, ...>

1分たった後に

Rails.cache.fetch("user-child-caching-1")
=> nil

消えた。よし!

Rails.cache.fetch("user-caching-1")
=> #<User id: 1, ...>

いた。悲しい。

ちなみに更新系は値が変わらないで生き続けるので要注意。

あんまりRails.cache周りのコマンドを知らない人は参考になるサイト。
僕もあれって一瞬なったので、参考にさせてもらったサイト載せさせていただきます。

morizyun.github.io

sorceryのchange_password!の仕様が変わっているので注意

sorcery
sorcery

本番環境でパスワード変更ができなくなりました。辛い。

バージョン0.14の対応でsorceryのchange_password!の仕様が変わっておりました。

    # Clears token and tries to update the new password for the user.
    def change_password(new_password, raise_on_failure: false)
      clear_reset_password_token
      send(:"#{sorcery_config.password_attribute_name}=", new_password)
      sorcery_adapter.save raise_on_failure: raise_on_failure
    end

    def change_password!(new_password)
      change_password(new_password, raise_on_failure: true)
    end

github.com

世の中のブログで紹介されているsorceryの実装方法が上記変更を取り込んだ実装になっていないため更新時に例外が発生してします。

    if @user.change_password!(params[:user][:password])
      redirect_to(root_path, :notice => 'Password was successfully updated.')
    else
      render :action => "edit"
    end

サービス提供されている方はコードを見直すことをおすすめします。 あるいは、私の修正方法を取り込むことで改善できます。

修正前:

@user.change_password!(params[:user][:password])

修正後:

@user.change_password(params[:user][:password])

これでバージョン0.14より前の挙動と同じにすることができます。 例外を発生させなくするだけですが。。。

反省。。。

specがこの辺を拾える様になっていれば問題を起こすことなくgemのバージョンアップができたのですがそうなっていなかったので本番に影響を出してしまいました。 自戒の意を込めて「ちゃんとテストを書きましょう」と言いたいです。