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
   

   View Slide

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
   

   View Slide

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 を使いやすく」をミッションにクラウドデータ接続を標準化
   

   View Slide

4. © 2018 CData Software Japan, LLC | www.cdata.com/jp
   最近めちゃくちゃ触っていた スマレジ API
   

   View Slide

5. © 2018 CData Software Japan, LLC | www.cdata.com/jp
   部門 ロス 在庫履歴 入荷明細
   商品 ロス明細 取引 発注
   商品価格 出荷 取引明細 出庫明細
   商品予備項目 出荷明細 セール 発注
   商品取扱店舗 発注 セール商品 入庫明細
   在庫引当商品 発注配送先 セール店舗 棚卸情報
   商品予備項目
   ラベル
   発注商品 会員ポイント 棚卸ヘッダ
   会員 発注配送商品 店舗 棚卸明細
   在庫 入荷 日時締め 棚卸明細
   リソース一覧
   リソース一覧
   ・各種CRUD操作
   ・柔軟なフィルターサポート
   And, =, Like, <, >, <=, >=
   ・Order Byサポート
   ・バルク処理
   ・Webhook
   CRUD操作・柔軟なクエリサポートで素晴らしい
   

   View Slide

6. © 2018 CData Software Japan, LLC | www.cdata.com/jp
   ただ・・・
   

   View Slide

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もちょっと独特
   

   View Slide

8. © 2018 CData Software Japan, LLC | www.cdata.com/jp
   API 仕様書が PDF でつらみ・・・
   ・36テーブル数百カラム
   ・テーブル・カラム名は英語だがUI上
   では日本語名のみ
   ・コピペつらい
   （今後変わるかも？）
   

   View Slide

9. © 2018 CData Software Japan, LLC | www.cdata.com/jp
   これだっきゃ わが なんとかしねば まいね！
   （訳：これは私がなんとかしないといけません）
   

   View Slide

10. © 2018 CData Software Japan, LLC | www.cdata.com/jp
    Blazor で API Explorer 的なものを作ってみた
    

    View Slide

11. © 2018 CData Software Japan, LLC | www.cdata.com/jp
    デモ
    

    View Slide

12. © 2018 CData Software Japan, LLC | www.cdata.com/jp
    C#でクライアントサイド処理書けるのサイコー！
    

    View Slide

13. © 2018 CData Software Japan, LLC | www.cdata.com/jp
    でも・・・いくつか悩みも・・・
    

    View Slide

14. © 2018 CData Software Japan, LLC | www.cdata.com/jp
    Blazor お悩み相談室（私が参加者に相談）
    動的な入力フォームの
    INPUT維持・取得って
    どうすればいいの？
    ・BlazorはDOM API をサポートしていない
    ・DOM API にアクセスする JavaScript を Async で呼び出せるが、入力
    後の画面レンダリングで入力した値が打ち消される場合がある
    

    View Slide

15. © 2018 CData Software Japan, LLC | www.cdata.com/jp
    お悩みの回答
    きっと誰かが素晴らしい回答をくれるはず！
    なのでここに書く！
    （予定だったけど、時間が押していたので懇親会
    へ）
    

    View Slide

16. © 2018 CData Software Japan, LLC | www.cdata.com/jp
    CData スマレジ Driver リリースするってよ！
    

    View Slide

17. © 2018 CData Software Japan, LLC | www.cdata.com/jp
    Thanks!
    

    View Slide