Upgrade to Pro — share decks privately, control downloads, hide ads and more …

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

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で公開してしまって、悩みをぶつけてしまおうと思った次第です。

Kazuya Sugimoto

December 14, 2019
Tweet

More Decks by Kazuya Sugimoto

Other Decks in Technology

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 full-size 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 full-size 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 full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size 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 full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide