PayPal.meやPayPayを使って、Fusumaで投げ銭を受け付けられるようにする
Fusumaを使って投げ銭できるようにする
MarkdownやJSXを使ってスライドが作れる Fusuma というオープンソースのツールがあります。
こちらに今回 PayPal を使って投げ銭を実現させようと思いました。
少し前に(※)こちらのブログでも PayPal.Me について調べていたりしたのはこのためでもあるのです。
※ずっと下書きのままとなってしまっていたため、もう半年前のこととなってしまいました。
きっかけ
始まりはこちらの hiroppyさん とのツイートがきっかけ
投げ銭機能💸
— Yuki Shindo (@shinshin86) June 21, 2019
ふむふむ、なるほど！paypal使った案がシンプルで分かりやすく良さそうですね！こっちの方向で調べてみます🙌
— Yuki Shindo (@shinshin86) June 21, 2019
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
これで下記のようなサンプルが表示されます。
あとは公式のドキュメントを参照しながら作成していくだけ。
投げ銭用のQRCodeを作成する(PayPal.me)
PayPal.MeのQRCode生成法についてはPayPal.Meことはじめを参照していただけたらと思います。
こちらで作成したQRCode画像をスライドの中に組み込んで、fusumaの作成に従ってスライドを作れば実現できます。
# 投げ銭サンプル(PayPal.me)💸 こちらから投げ銭が可能です↓ <img src="../images/paypal-me.png" alt="投げ銭用QRCode(PayPal.me)" />
ちなみに最初画像のパス指定をmarkdown形式で書いていました。
ですが、これだと画像の読み込みに失敗します。
なぜかな？と思いつつ、結局原因を解明できなかった夏の日...しかも、そのままこの作業自体フェードアウトしてしまったのですが、その後issueがgithubにあがっていました。
今思えば、自分がきっちり調査してissue上げておかなかったことを軽く後悔しつつ、issue見て、あ、imgタグで指定すれば、とりあえずは実現できたなと気づいた今日このごろです。
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で普通に投げ銭的な機能はよく知られているようで、利用規約的にどうなのか？という話については下記のブログで説明されていましたので、リンク貼ります。
最後に
文章はこれで以上となります。
調査開始からとてもとても時間をかけてしまい申し訳なさも感じながら筆を置きますが、
Github sponsorsなどを始め、様々な支援の形が出てきている昨今、例えばエンジニアの登壇の締めとして、こういう投げ銭用の１枚を表示させるというのも、試みとしては面白いのかななどと思っています。
あと、個人的な話となりますが、私自身は社内の発表会を除けば、登壇というのは今までしたことがないため、来年はFusumaを使って初の登壇を目指してみようかなと思いました。来年の目標が一つ見えました。
