pure function

愛せないコードを書くには人生はあまりにも短い

IPOの申し込みとステータスを管理するアプリを作ったので、その技術メモ

技術

これは何

私は数少ないお金のうちいくらかをIPOに突っ込んでいるんですが、ステータスを管理するやつはあれど、申し込みを手助けするやつがなかったので作りました。

デスクトップアプリ版をElectronで、web版をSPA構成で作っています。
Electronに触ったのは約2年ぶりくらい。
ここでは技術的な話をメモ書きとして残しておきます。

システム構成

サーバレス構成。
AWS amplifyを使っている関係でApp syncを使っています。
リアルタイム同期の機能はいらなかったので、subscriptionは使っていないですが、ぱっとGraphQL使いたいならおすすめ。
また、amplifyを使うと自ずとIaCができるのもよかったです。
(実態はcloud formationによるインフラ管理)
multi stage機能もあり、developで作成したリソースをproductionにも適用、みたいなこともやりやすかったです。

課金の機能も実装したので、stripeともつなぎこんでいます。
sripeのdocやダッシュボードはわかりやすくてかなり気に入りました。

f:id:re_fort:20200407013124p:plain

関連リポジトリ

5個くらい作ってました。
だいたいprivate。

内訳：

  • IPOの最新情報取得するスクリプト1つ
  • アプリケーション2つ
  • リリースファイルをコピペするスクリプト1つ
  • リリースファイル公開用1つ

f:id:re_fort:20200407023832p:plain

技術メモ

  • アプリケーションはElectronもwebもreact/redux/TS/styled-component/GraphQLというよくある構成
  • コンポーネントはAnt Designを使用。
  • アプリケーションのコードはほとんど同じなので、1st releaseまではシンボリックリンク貼って開発すると便利という知見。Electronに入れた修正は大体webにも入れなきゃいけないのでその二重修正を回避できる。デメリットはシンボリックリンク使ってるとファイルのwatchがうまく動かないときがあること。
  • ElectronでChromeのサインインがセキュリティ的にできない問題はかなりハマった。セキュリティ設定見直したり、アプリパスワードを設定してみてもダメ。Google HelpのスレッドにUAに「Chrome」って文字列だけ渡すとうまくいく、というレスがついているのを見て試したらうまくいった。なんじゃそれ。
  • Electronでamplifyのauthで認証しようとするとエラーになるので、browser windowでweb版のログイン画面呼び出してtoken払い出されたらそれを持ってきてElectron側でセットするみたいな力技で無理やりログインを実装。
  • Electron9(現時点ではbeta)からはPDFサポートが復活。chromiumでも使ってるPDFiumというのを使うようにしたみたい。
  • electron-builderは前もお世話になったけどとても便利。GitHub Actionでリリース物作る機能は感動した。ただ権限的にAリポジトリのGitHub ActionでBリポジトリのリリースにファイルを追加というのはできない*1みたいで、自作でコピースクリプト書いた。GitHub API叩いてリリースファイルを一時DL、それを別リポジトリにあげる、という愚直な実装。
  • Electronの最新ビルドを手元で試そうと思うと、node-abiに依存するライブラリのバージョンを上げて回らないといけなくてfork祭りだった(そうしないとそんなElectronのバージョンないけど？っていうエラーで落ちる)
  • 証券口座のログイン情報周りは、クラウド上には保存せず、node-keytarを使って各OSの適切な場所に保存するようにした。例えばMacだとkeychain。Windowsなどで動作確認するときここでなにか起きるだろうな、と思っていたけどすんなりいけた。いいライブラリ。
  • Electronのapp icon作成はIconionで枠だけ作ってそこに画像重ねるのがおすすめ。
  • 貧民なのでMacのcode signingはもちろんしてない。
  • netlifyとherokuは貧民の味方。
  • Google Domainsでドメインとってみたが他ドメイン取得サイトのようにUIがごちゃついてなくていい。ドメインの更新時にすべてGoogle Domainsによせていきたい。
  • FAQとお問い合わせはtayoriを使ってみた。FAQでテーブルとかで書こうと思っても課金しないとできなくてぐぬぬ。
  • 課金してなかったら広告表示、みたいなのをきれいにやる方法あったら知りたい。SSRするのが一番筋的によさそうだが、それだけのためにSSRやるのはめんどくさい。課金状態取得してからあとでscript差し込むのは気持ち悪くてうーん、という感じ。
  • マネックス証券はUAをチェックしててUAにElectronが入ってるとアクセスを拒否される、という知見を得た。
  • 仕事の合間をぬってコツコツ開発してきて、ちゃんとリリースまでするのはえらい。すごいすごいすごい！

*1:全権限付与したpersonal token渡してダメだったからそう判断した