0
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 1 year has passed since last update.

秋月電子の通販で買い物かごロスト事故を防ぐウェブアプリを作った

Last updated at Posted at 2023-06-01

皆さんは 秋月電子通商 を利用してますか?
僕は通販も八潮店もバチクソお世話になっています。

10年ほど前まではマイコンやロジックICなどデジタル系がメインな感じでしたが、最近はアナログICや受動部品も豊富で、日本の電子工作シーンにおいては割と有名な電子部品屋かと思います。

秋月に無ければ後はもうMouserかDigi-Keyか、というくらい、ここ数年で品揃えが増えた感じがします。
(お金は貰ってないですよ!)

48時間

このように便利な秋月ですが、通販を利用したことがある人の中には、もしかすると悲しい出来事が起きてしまった人もいらっしゃるのではないでしょうか。

買い物かごロスト

欲しい部品を買い物かごに入れて、後日決済しようと思い数日後に開いたら...買い物かごはまっさら。

そう、秋月通販はCookieが 48時間で失効 してしまうのです。

セキュリティの関係でログインセッションのライフタイムを制限するのは理解できますが、どうして買い物かごまで...

商品コードを抽出

それは流石に無慈悲すぎると思い、買い物かごページから商品コードを抽出するウェブアプリを作りました。

秋月通販は、複数の商品コードをテキストで一括入力して買い物かごへ放り込める機能があります。

その際のテキストフォーマットは以下となります。

(商品コード)(半角スペース)(個数)(改行)

ウェブアプリは、買い物かごページのテキストから商品コードと個数を正規表現で抽出し、一括入力フォーマットへ変換します。

また、商品名や金額も取得できるので、より完全な買い物かごの中身をJSON形式で出力する機能も試験的に実装しました。

後はSNSの自分宛DMに保存するも良し、テキストとしてローカルに保存するも良し、買い物かごを復元するのはコピペで済みます。

免責とか

秘密裏に開発中のプロトタイプの購入部品リストが漏れた、とかなっても責任は負えません。
公式から何らかのお咎めがあった場合は予告なく閉鎖します。

技術的な部分

特に凝った事はしていませんが、今回は小規模なのでフレームワークは使わずにSPA風なUIを自作してみました。

とても便利だと感じたのは、最近のCSSで実装された 動的ビューポート指定 でした。
単位は dvhdvw で、特にスマートフォンでスクロールした時にアドレスバーが見え隠れしても動的に必ず正しい割合を算出してくれます。

毒林檎iPhone対応が必要なプロジェクトには待ちに待った朗報ではないでしょうか。
かくいう僕も過去に高さ100%のiPhone対応で無限に苦しめられましたからね、いい加減WebKit縛りやめたらどうですかねAppleさん今時くだらない囲い込みは流行らないですよ

おっといけませんわオホホ...

他にも地味な部分ですが、いちいち入力フォームにコピーしたりペーストするのは面倒なので Clipboard API を使いクリップボードの中身を直接操作できる仕組になっています。

初回のみパーミッションのプロンプトが出ますが、次回以降は記憶されるので、特に問題はありません。

今後の改善としては、外部に保存せずとも LocalStorage に保存できるようにしても良いかな、とか考えています。
機密情報ではないし LocalStorage に突っ込んでも大丈夫でしょう...

ギャラリー

Screenshot_20230601-142404_Chrome.jpg
Screenshot_20230601-142415_Chrome.jpg

0
0
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
0
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?