Blazor で API Explorer を作って色々悩んだお話 #GyutanKaigi2019

# Session Title

Blazor で API Explorer を作って色々悩んだお話

# Event Info

牛タン会議 2019 #GyutanKaigi

https://vsuc.connpass.com/event/156131/

2019/12/14（土）

# Sumally

最近 Blazor を触り始めて、これは素晴らしい！　何か Web アプリを作って公開してみたいと考えていました。

そこで当時実装でよく悩んでいたスマレジのAPIを手軽に実行できるアプリを作ってみました。

まだ色々と足りないし、リファクタリングもまともにしていないんですが、色々とぶつかるところも多かったので、LTで公開してしまって、悩みをぶつけてしまおうと思った次第です。

Transcript

1. © 2018 CData Software Japan, LLC | www.cdata.com/jp Blazor で API Explorer を作って色々悩んだお話 2019/12 CData Software Japan Kazuya Sugimoto -Lead Engineer #GyutanKaigi 2019
2. © 2018 CData Software Japan, LLC | www.cdata.com/jp Speaker 杉本 和也：Kazuya Sugimoto • CData Software Japan, LLC Lead Engineer • Microsoft MVP for Business Solution(Dynamics CRM/365) Blog：Morning Girl http://kageura.hatenadiary.jp/ Twitter：@sugimomoto Facebook：sugimomoto
3. © 2018 CData Software Japan, LLC | www.cdata.com/jp About CData Software Bi-directional Access to Live App, Database, & Web API Data Through Standard Drivers ・CData Software, Inc. / Started: 1994 (/nsoftware) ・Location: Chapel Hill, NC a spin-off of /n software ・CData Japan: 2016/6 (JV with Infoteria) ・20年以上にわたりデータ関連コンポーネントを提供 ・200+ 対応データソース ・「API を使いやすく」をミッションにクラウドデータ接続を標準化
4. © 2018 CData Software Japan, LLC | www.cdata.com/jp 最近めちゃくちゃ触っていた スマレジ API
5. © 2018 CData Software Japan, LLC | www.cdata.com/jp 部門 ロス 在庫履歴 入荷明細 商品 ロス明細 取引 発注 商品価格 出荷 取引明細 出庫明細 商品予備項目 出荷明細 セール 発注 商品取扱店舗 発注 セール商品 入庫明細 在庫引当商品 発注配送先 セール店舗 棚卸情報 商品予備項目 ラベル 発注商品 会員ポイント 棚卸ヘッダ 会員 発注配送商品 店舗 棚卸明細 在庫 入荷 日時締め 棚卸明細 リソース一覧 リソース一覧 ・各種CRUD操作 ・柔軟なフィルターサポート And, =, Like, <, >, <=, >= ・Order Byサポート ・バルク処理 ・Webhook CRUD操作・柔軟なクエリサポートで素晴らしい
6. © 2018 CData Software Japan, LLC | www.cdata.com/jp ただ・・・
7. © 2018 CData Software Japan, LLC | www.cdata.com/jp API 仕様が独自フォーマットでつらみ・・・ POST /access/ HTTP/1.1 Host: webapi.smaregi.jp Content-Type: application/x-www-form-urlencoded Accept: application/json X_contract_id: XXXXX X_access_token: XXXXX proc_name=category_ref&params= { "fileds": ["categoryId","categoryName",], "conditions": [{"categoryId =": "111"}], "order": ["categoryId asc"], "limit": 100, "page": 1, "table_name": "Category" } ・「application/x-www-form- urlencoded」と 「application/json」の合せ技 ・シンタックスハイライトやバリデーショ ン泣かせ ・conditionsもちょっと独特
8. © 2018 CData Software Japan, LLC | www.cdata.com/jp API 仕様書が PDF でつらみ・・・ ・36テーブル数百カラム ・テーブル・カラム名は英語だがUI上 では日本語名のみ ・コピペつらい （今後変わるかも？）
9. © 2018 CData Software Japan, LLC | www.cdata.com/jp これだっきゃ わが なんとかしねば まいね！ （訳：これは私がなんとかしないといけません）
10. © 2018 CData Software Japan, LLC | www.cdata.com/jp Blazor で API Explorer 的なものを作ってみた
11. © 2018 CData Software Japan, LLC | www.cdata.com/jp デモ
12. © 2018 CData Software Japan, LLC | www.cdata.com/jp C#でクライアントサイド処理書けるのサイコー！
13. © 2018 CData Software Japan, LLC | www.cdata.com/jp でも・・・いくつか悩みも・・・
14. © 2018 CData Software Japan, LLC | www.cdata.com/jp Blazor お悩み相談室（私が参加者に相談） 動的な入力フォームの INPUT維持・取得って どうすればいいの？ ・BlazorはDOM API をサポートしていない ・DOM API にアクセスする JavaScript を Async で呼び出せるが、入力 後の画面レンダリングで入力した値が打ち消される場合がある
15. © 2018 CData Software Japan, LLC | www.cdata.com/jp お悩みの回答 きっと誰かが素晴らしい回答をくれるはず！ なのでここに書く！ （予定だったけど、時間が押していたので懇親会 へ）
16. © 2018 CData Software Japan, LLC | www.cdata.com/jp CData スマレジ Driver リリースするってよ！
17. © 2018 CData Software Japan, LLC | www.cdata.com/jp Thanks!