e-Gov金融機関サイト表示APIでの苦労

e-Gov 連携サービス開発者の集い
https://peatix.com/event/737034

Transcript

1. freee 株式会社

   2019.08.01
   @ymrl
   金融機関サイト表示APIでの苦労

   

   View Slide

2. 慶應SFC修士課程修了後、ソーシャルゲーム系ベンチャーを
   経て2014年よりfreeeに参画。

   2015年より人事労務freee（当初は給与計算freee）の開発に携
   わる。

   人事労務freeeでe-Govを使った労働保険年度更新の機能開
   発に関わったほか、次期e-Govの仕様について会議するCode
   for e-Govにも参加しています。

   現在はUIデザインを専門に取り組むチームに所属しているの
   で、業務的にはe-Govにはほぼ関わりがありません。

   

   2
   @ymrl

   freee株式会社 UIエンジニア

   

   View Slide

3. エクスキューズ

   ● きょうお話するのは、4年前、2015年頃の話です

   ● 当時とはe-Gov自体やe-Govを取りまく環境が異っている可能性があります

   ● 発表者は長らくe-Gov APIを使った開発からは離れています

   

   View Slide

4. freeeについて

   

   View Slide

5. 5
   創業からIPOまで、中小企業活性化のためのサービスを一気通貫で提供 

   freee会社概要

   ❂ 納税する

   ↗ 育てる

   ↻ 運営する 

   ✩ はじめる

   会社設立 freee
   

   開業 freee

   クラウド会計ソフト freee
   

   人事労務 freee
   

   (マイナンバー管理 freee 含む)
   

   クラウド申告 freee
   

   161億603万円 (資本準備金等含む
   )
   従業員数
   事業内容
   クラウド型バックオフィスサービスの開発・販売
   資本金
   設立年月日
   2012年7月
   505名（2019年1月末時点）
   「働きがいのある会社」
   2017年 ランキング3位
   2018年 ランキング8位
   2019年 ランキング4位
   

   View Slide

6. 人事労務freeeのご紹介

   マイナンバー管理
   マイナンバー
   勤怠管理
   勤怠管理、有給・残業管理など
   給与計算
   給与計算ソフト
   保険・行政手続
   入退社手続、給与支払報告書、算定基礎届
   明細発行
   給与明細、源泉徴収票など
   従業員名簿管理
   従業員情報、従業員振込口座情報など
   給与計算・労務管理に関するさまざまな機能をご提供

   

   

   View Slide

7. SmartHRとも連携

   https://smarthr.jp/release/13950
   

   View Slide

8. 人事労務freeeとe-Gov API

   2015年5月にe-Gov APIを利用した 労働保険の年度更新 の機能をリリース

   https://corp.freee.co.jp/news/e-gov-api-4047.html
   

   View Slide

9. 年度更新とは？

   

   View Slide

10. 労働保険 = 雇用保険 + 労災保険（+ 一般拠出金）

    雇用保険料は従業員と使用者が負担、労災保険料は使用者が負担 

    

    View Slide

11. 労働保険の年度更新とは

    ● 労働保険料は年度ごとに概算値を前もって納付してある

    ● 毎年7月ごろに前年度分の確定保険料と今年度分の概算保険料を計算して、前
    年度分の精算分と今年度分を申告して納付する

    ● 保険料の計算を人事労務freeeで行い、e-Govで保険料を申告し、さらにe-Govで
    保険料の納付まで行うことができる

    

    View Slide

12. 最後に使うのが

    金融機関サイト表示API

    

    View Slide

13. 金融機関表示APIについて

    

    View Slide

14. 仕様を見てみよう

    https://www.e-gov.go.jp/shinsei/interface_api/download.html
    

    View Slide

15. View Slide

16. View Slide

17. View Slide

18. 金融機関サイト表示APIのここがすごい

    ● XMLじゃなくてHTMLが返ってくる（API……？）

    ● エラーもHTMLに書いてある（API……？）

    ● Google Chromeで開くとフリーズする（2015年当時）

    ○ 当時のChromeのバグで、現在は (Chromeが) 改善されています

    

    View Slide

19. 金融機関サイト表示APIのHTML（抜粋）

    <br/>function link() {<br/>document.Form.submit();<br/>var agent = navigator.userAgent;<br/>// Submit処理完了前の後続処理動作を抑止<br/>(Safari)<br/>var count = 0;<br/>var timer = setInterval(<br/>function() {<br/>count++;<br/>if(count == 1) {<br/>clearInterval(timer);<br/>// closeできるブラウザ(IE,Safari)の場合、画面を閉じる ※FireFoxは設定に依存<br/>window.open('about:blank','_self').close();<br/>// closeできないブラウザ(FireFox,Chrome))の場合、空白Pageに遷移(replaceにて[戻る]を抑止)<br/>location.replace('about:blank');<br/>}<br/>}, 500);<br/>}<br/>
    
    
    
    
    
    
    
    

    

    View Slide

20. 当時のChromeで動作しなかった

    ポップアップブロックを食らった上でCPU使用率が100% 

    

    View Slide

21. 金融機関サイト表示APIのHTML（抜粋）

    <br/>function link() {<br/>document.Form.submit();<br/>var agent = navigator.userAgent;<br/>// Submit処理完了前の後続処理動作を抑止<br/>(Safari)<br/>var count = 0;<br/>var timer = setInterval(<br/>function() {<br/>count++;<br/>if(count == 1) {<br/>clearInterval(timer);<br/>// closeできるブラウザ(IE,Safari)の場合、画面を閉じる ※FireFoxは設定に依存<br/>window.open('about:blank','_self').close();<br/>// closeできないブラウザ(FireFox,Chrome))の場合、空白Pageに遷移(replaceにて[戻る]を抑止)<br/>location.replace('about:blank');<br/>}<br/>}, 500);<br/>}<br/>
    
    
    
    
    
    
    
    

    

    View Slide

22. このJavaScriptがやっていること

    ● 新しいウィンドウを開き、

    ● Pay-easyっぽいWebサーバーに何かをPOSTしたうえで、

    ● 自身のウィンドウは閉じる←ここでフリーズする

    

    View Slide

23. 僕はこう思ったッス（2015）

    ● フリーズしてしまうのはたぶんChromeが悪い

    ● でもなんでウィンドウ開いたり閉じたりするん？

    ● （Pay-easyとの繋ぎ方に何か事情があるのかな……）

    ● （というか、そもそもいい感じにXMLでください……）

    ● 仕方ないのでJavaScriptを回避してPOSTする実装をした

    

    View Slide

24. ウワサの次期e-Govでは……

    いい感じのJSONが貰えると最高なんですけどね 

    

    View Slide

25. スモールビジネスを、

    世界の主役に。
    

    View Slide