at backyard

Color my life with the chaos of trouble.

2020という文字を🐭🐭🐭🐭に変換するbabel pluginをnpm publishしようとしたら、npmにspam判定されてpublishできなかった

babel npm

あけましておめでとうございます。2020年もよろしくお願いします！

さて、今年も書き初めと称してコードを書きました。
2020という文字を\\uD83D\\uDC2D\\uD83D\\uDC2D\\uD83D\\uDC2D\\uD83D\\uDC2D(🐭🐭🐭🐭)に変換するbabel pluginです。

github.com

作成したついでにnpmにpublishしたところ、下記のようなエラーが出ました。

403 Forbidden - PUT https://registry.npmjs.org/2020-to-mouse-babel-plugin - Package name triggered spam detection; if you believe this is in error, please contact support@npmjs.com

エラーメッセージで調べてみたところ、下記のstack overflowが検索に引っかかりました。

stackoverflow.com

ざっくり要約すると、私のpackage名がスパムだと判定されたようです。
詳細はリンク先のコメントを見ていただきたいのですが、ダッシュと数字を組み合わせた既存のパッケージ名は疑わしいと判断されることが多いようで、特に今回書いた自分のものなんて、2020 という文字やbabel-pluginという文字が含まれているのが、良くなかったのかななどと思っています。

まあ、ジョークみたいなものなので、しょうがない、という一言で済ませました。

というわけで、以下、作成したbabel-pluginの使い方だけざっくり説明。

# npmにpublishしていないのでgithubから直接インストールしてください
npm install --save https://github.com/shinshin86/2020-to-mouse-babel-plugin.git

.babelrcに下記のように設定してください。

{
  "plugins": [
    [ "module:2020-to-mouse-babel-plugin"]
  ]
}

実行するには@babel/coreと@babel/cliも必要です。

npm install --save @babel/core @babel/cli

例えば下記のようなコードが有る場合、

console.log('Hello 2020')

babel越しに実行すると、ネズミ絵文字のコードに変換されてしまいます。

node_modules/.bin/babel index.js
# => console.log("HELLO \uD83D\uDC2D\uD83D\uDC2D\uD83D\uDC2D\uD83D\uDC2D");

yarnを使った際に、Incorrect integrity when fetching from the cacheというエラーが出たとき

Yarn 備忘録

今年最後のポストはエラー解決の備忘録となった。
意外とすぐに解決できなかったので、一応書き残しておく。

yarnでcreateした際に、Incorrect integrity when fetching from the cacheというエラーが出た。

ちなみに実行したときのコマンドは下記。
yarn create create-react-app を試したときのことだ。

yarn create react-app hogehoge --template typescript

実行すると下記のようなエラーが出た。

Incorrect integrity when fetching from the cache

下記のissueを参考に、このコマンドで解決しようとしたが、それでもエラーは出る。。。

github.com

yarn cache clean

手探りで色々試してみようと思い、結果 create-react-app を削除してみた。

rm -rf ~/.config/yarn/global/node_modules/create-react-app
rm  ~/.config/yarn/global/node_modules/.bin/create-react-app

再度試してみても、それでもエラーは変わらない。。。
ためしにyarn自体の再インストールを試してみたら、解決できた。

npm uninstall yarn -g
npm install yarn -g

たいてい　yarn cache clean で解決できるイメージだったが、どうしても出来ないときは再インストールが良いのかもしれない。
原因までは追求できていない。

PayPal.meやPayPayを使って、Fusumaで投げ銭を受け付けられるようにする

PayPal PayPay 投げ銭 Fusuma

Fusumaを使って投げ銭できるようにする

MarkdownやJSXを使ってスライドが作れる Fusuma というオープンソースのツールがあります。

github.com

こちらに今回 PayPal を使って投げ銭を実現させようと思いました。

少し前に(※)こちらのブログでも PayPal.Me について調べていたりしたのはこのためでもあるのです。

※ずっと下書きのままとなってしまっていたため、もう半年前のこととなってしまいました。

shinshin86.hateblo.jp

shinshin86.hateblo.jp

きっかけ

始まりはこちらの hiroppyさん とのツイートがきっかけ

Fusumaでどのように投げ銭を実現させるか？

投げ銭的に使うなら PayPal.Me のURLをQRCode化してスライドに貼るのが一番カンタンそうです。
これならばスライドを作る作業の中で気軽に行うことができます。
(最初はpaypalのAPIなどを使ったりして、実現しようかと考えましたが、QRCode越しにやれるなら画像貼るだけのほうがユーザにとっても直感的でわかりやすいかもと思った次第です。ただ、当たり前過ぎてもう皆やっているとかだったら、以下の文章はあまり価値がなくなります😢😂)

ただし、条件としては投げ銭を行う人が自身のPayPalアカウントを持っている必要があります。
これはちょっと敷居を上げてしまっています。
PayPal.Meの機能でPayPalアカウントを持っていなくとも投げ銭が行えれば、完璧なのですが....

ひとまず敷居の高さには目をつぶりつつ、実際にFusuma上で投げ銭できるスライドを作ってみます。

Fusumaでのスライドの作り方

以下CLIで操作していきます。
yarnを使って操作していきます。
(もちろん globalインストールしたり、npxでやることも出来ますので、そこらへんはお好みで)

# セットアップ
yarn add fusuma --dev
yarn fusuma init

# 投げ銭機能のタイトルだけ作成
echo '# 投げ銭サンプル💸' > slides/0-title.md

# 試しに起動
yarn fusuma start

これで下記のようなサンプルが表示されます。
あとは公式のドキュメントを参照しながら作成していくだけ。

f:id:shinshin86:20190721173437p:plain

投げ銭用のQRCodeを作成する(PayPal.me)

PayPal.MeのQRCode生成法についてはPayPal.Meことはじめを参照していただけたらと思います。
こちらで作成したQRCode画像をスライドの中に組み込んで、fusumaの作成に従ってスライドを作れば実現できます。

# 投げ銭サンプル(PayPal.me)💸

こちらから投げ銭が可能です↓

<img src="../images/paypal-me.png" alt="投げ銭用QRCode(PayPal.me)" />

ちなみに最初画像のパス指定をmarkdown形式で書いていました。

![投げ銭用QRCode](../images/paypal-me.png)

ですが、これだと画像の読み込みに失敗します。
なぜかな？と思いつつ、結局原因を解明できなかった夏の日...しかも、そのままこの作業自体フェードアウトしてしまったのですが、その後issueがgithubにあがっていました。
今思えば、自分がきっちり調査してissue上げておかなかったことを軽く後悔しつつ、issue見て、あ、imgタグで指定すれば、とりあえずは実現できたなと気づいた今日このごろです。

github.com

PayPayで投げ銭を行うためのQRCodeを作成する

上に書いた例の場合、投げ銭を行うためにはPayPalのアカウントを持っていることが必須となります。
でも、正直日本でPayPalのアカウントを持っている人というのはそこまで多くはない印象です。少なくとも、PayPayよりは少ないかと思います。

というわけで、上で書いたPayPal.meのサンプルのQRCodeをそのままPayPayのものにしてしまえば、こと日本においては、より投げ銭利用率を上げることができるのではないでしょうか？

というわけで試してみます。

PayPayの受け取る画面から、受け取り用のリンクを生成します。
もしくはここに表示されているQRCodeをキャプチャして、画像としてそのまま貼るでも良いかもしれません。
(試しに上で取得したキャプチャをFusumaスライド上に貼って妻のPayPayアカウント経由で読み込ませてみたところ、送金は行えるようでした)

PayPayの受け取り用のリンクについては下記のような仕様となっているようです。

https://qr.paypay.ne.jp/{なんらかの文字列}

このURLを以前も書いたQRCode化するスクリプト(PayPal.Meことはじめ参照)に食わせれば、QRCodeは生成できます。

その画像をPayPal.meと同様にFusumaのほうで直接表示させてあげれば、Fusumaで生成したスライド内で投げ銭自体は実現できそうです。
こちらも実際に妻のiPhoneのカメラで読み込ませたところ、勝手にPayPayアプリが起動し、私宛の送金画面に遷移しました。
(もしPayPayアプリが入っていない場合は、App storeが開くとかするのかもしれませんが未検証です)

ちなみにPayPayで普通に投げ銭的な機能はよく知られているようで、利用規約的にどうなのか？という話については下記のブログで説明されていましたので、リンク貼ります。

bitcoinhold.net

最後に

文章はこれで以上となります。
調査開始からとてもとても時間をかけてしまい申し訳なさも感じながら筆を置きますが、
Github sponsorsなどを始め、様々な支援の形が出てきている昨今、例えばエンジニアの登壇の締めとして、こういう投げ銭用の１枚を表示させるというのも、試みとしては面白いのかななどと思っています。

あと、個人的な話となりますが、私自身は社内の発表会を除けば、登壇というのは今までしたことがないため、来年はFusumaを使って初の登壇を目指してみようかなと思いました。来年の目標が一つ見えました。

久しぶりにbottleを試してみるまで - 2019年(導入備忘録)

Python Bottle 備忘録

過去に何度かbottleは触っていたが、また久しぶりに触ってみようと思った。
bottleをセットアップして、触り出すまでの備忘録。

https://bottlepy.org/docs/dev/

bottleでのアプリ開発セットアップ

今回はpipenvを使って試していく

使用するPythonのバージョンは 3.7.2

pipenv --python 3.7.2

pipenvを使ってbottleをインストール

pipenv install bottle

まずはbottleを動かしてみるために、公式にあるhello worldを動かす。

from bottle import route, run, template

@route('/hello/<name>')
def index(name):
    return template('<b>Hello {{name}}</b>!', name=name)

run(host='localhost', port=8080)

Pipfileに下記の２行を追加する

[scripts]
dev = "python3 main.py"

あとは下記のコマンドを実行して、http://localhost:8080/hello/world にアクセスしてみる

pipenv run dev

ここまでで最初の動作確認はOK

Pythonでもフォーマットと文法チェックをサクッと行いたい

ここの設定についてはどこかの記事を参考にさせていただいていたと思うが、参照先を失念してしまった。
検索して上の方に出ていた記事だったとは思うので、見つけたら後ほど貼っておく。

flake8 autopep8 flake8-import-order をインストールする

pipenv install --dev flake8 autopep8 flake8-import-order

そしてfmtコマンドと lint コマンドをそれぞれ定義

[scripts]
dev = "python3 main.py"
fmt = "autopep8 -ivr ."
lint = "flake8 --show-source ."

コードフォーマットしたいときは pipenv run fmtを叩くことでフォーマットしてくれる
文法チェックしたいときは pipenv run lint を叩くことでチェックしてくれる。

これで最低限の開発はスタートできそう。

pre-commitについて

pre-commitというPython製のツールを見つけた。
ちなみにPythonだけじゃなく、例えばNode.jsとかでも使えるらしい
git hooksの仕組みを使ったツール？みたいで試してみようかと思ったが、セットアップがちょっと長くなりそうだったのでここではやめた。

pre-commit

fmtやlintが通ったときのみ、コミットできるようにしておくのは良いかもしれない。
今度試してみよう。

Array.map.filter(Boolean)で繋げば、mapの返り値にundefinedを含めることもなくなる (JavaScript)

JavaScript 備忘録

JavaScriptのmapを使ったときにundefinedがついてきてしまうときの対応法を備忘録がてら書く。

例えば下記のようなコードを書く。

const userList = [
  {id:1, name:'Test1', isAdmin: true},
  {id:2, name:'Test2', isAdmin: true},
  {id:3, name:'Test3', isAdmin: false},
  {id:4, name:'Test4', isAdmin: false}
];

const users = userList.map(user => {
    // サンプルということでシンプルに省略
    if(user.isAdmin) return { ...user };
  });
  
console.log({users});
/*
[ { id: 1, name: 'Test1', isAdmin: true },
  { id: 2, name: 'Test2', isAdmin: true },
  undefined,
  undefined ]
*/
// => user.isAdmin === falseのデータについてはundefinedになってしまう。

こういうとき、空要素除去にはfilterが使える。 下記のQiita記事がとても参考になるし、分かりやすい。

qiita.com

上の記事にあるコードを参考に空要素除去パターンのfilterを書いてみる。

const arr = [1,2,false,undefined, 5, '']
const filteredArr = arr.filter(Boolean);
console.log({filteredArr});
// => { filteredArr: [ 1, 2, 5 ] }

上でのやり方をmapでの処理にそのまま繋げれば、下記のようにいい感じにかける。

const userList = [
  {id:1, name:'Test1', isAdmin: true},
  {id:2, name:'Test2', isAdmin: true},
  {id:3, name:'Test3', isAdmin: false},
  {id:4, name:'Test4', isAdmin: false}
];

const users = userList.map(user => {
    // サンプルということでシンプルに省略
    if(user.isAdmin) return { ...user };
  }).filter(Boolean);

  
console.log({users});
/*
[ { id: 1, name: 'Test1', isAdmin: true },
  { id: 2, name: 'Test2', isAdmin: true } ]
*/

mapの後にそのままつないでfilter(Boolean) すれば良いのだということに、今更ながら気づいた年の瀬である。。。

Beagles、それからAirpods、少し前のこと

Beagles 音楽 Airpods

どちらも少し前のことになりますが、書いていきます。

SoundCloudにBeaglesの曲をアップしました。kushamidomという曲です。

数ヶ月前にBeagles名義で作っていた楽曲、kushamidomという曲を今晩SoundCloudにアップしました。
ぜひ聴いてみていただけたらと思います。

soundcloud.com

Airpodsからある日突然音が出なくなった

こちらも数ヶ月前のこと、Airpodsから急に音が出なくなったので、下記の記事にあるAirpods自体のリセットをしてみたら無事に聞こえるようになりました。
お、ついに動かなくなったかと思いましたが、全然まだまだ使えそうです。

AirPods・AirPods Proに繋がらない、途切れる、聞こえないなど調子が悪いときに試したい8つの対処方法 | りんごの使い方

ちなみに自分が使っているのはProではない方のAirPods、今のところは最新の世代になるでしょうか。
よく耳にさしたまま服を脱ごうとして引っ掛けて落とすということを繰り返していますが、いまのところ故障もなくいい感じに活躍してくれています。

最後に

話は変わりますが、クリスマスが終わると一気に年末感がでてきますね。空気がもう年末といった感じ。空気がしんと冷たくて最高です。

クリスマスイブと簡単な今年の仕事に関する振り返り

日記 npm

もう目新しくもなんともないですが、npm xmas を。

npm xmas

                     ★
                    ／＼
                   ／ &＼
                  ／    ＼
                 ／｡   & ＼
                ／     ⸮  ＼
               ／｡⸛   @@   ＼
              ／i@&i  ⸛⁂ ｡ ⸛＼
             ／   &    ｡   ⸮ ＼
            ／   ⸮ ⸛⸮     i｡&⁂＼
           ／ ⸮｡ ｡⸮@ ｡     ｡i｡ ＼
          ／    i     i⁂⁂ ⸛ @  ⸛＼
         ／ &⁂     ⸛⸮⸛  ⁂⁂       ＼
        ／ i  ⸛｡   ⸛  ⸮   ⸛  i  ⸛&＼
       ／&⸛   ｡⸛  ⸮⸮      i       i＼
      ／   @ ｡    ⸛@ ｡  i  & i  ⸮｡  ＼
     ／ ⸮     ⁂  ｡ ⸛&⸛ ⸮i⸛⸮  ｡ ⸮&@  i＼
    ／   i ｡  ｡ ⸮   ⁂ ｡  ⁂@     ⸮i⸮i ⸛＼
   ／｡   ｡@⁂ ⸛｡ ⸛⁂      ⸛  ⸛     ⁂｡i ⸮⁂＼
  ／i@⸮｡ &   ｡⸛ &  i  ⁂&     &&   ⸮     ＼
 ／@@    &  @@｡   ⸮  i    ⸛   @   ⸮⸮     ＼
 ^^^^^^^^^^^^^^^^^^^|  |^^^^^^^^^^^^^^^^^^^
                    |  |

npm loves you Happy Xmas, JavaScripters!

今年はずっとJavaScript(Node.js含む)メインで生きてきました。
まだまだ未熟感は多々ありますが、それでも一つの言語をずっと触っていると見えてくることも多々ありで、とても勉強になった一年でした。

また、去年は自身が携わっている、とあるサービスのローンチを目標にスピード重視でガリガリ開発をしていましたが、今年はまた次のフェーズに移り、自身が去年スピードを犠牲にたくさん生み出してきた技術的負債とどう向き合いながら、どうやってさらなるサービスの拡張と充実を図っていくかをガッツリ考えさせられた一年でもありました。
技術的負債とよく言いますが、あああ、これがそうなんだな、と自分が過去に書いた汚いコードと向き合いながらしみじみしたりしました。

より良い設計とはどういうものかで頭を悩ませたりもしたし、ビジネス的な側面とシステム的な側面に対してどう折り合いをつけて、開発を進めていくべきなのかもよく考えたりしました。

こうやって振り返ると、なかなか充実した一年を過ごすことが出来たと思います。
子供が生まれるにあたって、リモートワークに移行したりもしました。 また去年とは違ったいろいろな景色を見ることが出来、良い一年だったなと改めて思います。
そういう機会を与えてくれた会社には、とても感謝です。

クリスマスのことをサラリと書いて終わるつもりが、ちょっとした今年一年の振り返りになりました。