Slide 1
Slide 1 text
freee 株式会社
2019.08.01
@ymrl
金融機関サイト表示APIでの苦労
Slide 2
Slide 2 text
慶應SFC修士課程修了後、ソーシャルゲーム系ベンチャーを
経て2014年よりfreeeに参画。
2015年より人事労務freee（当初は給与計算freee）の開発に携
わる。
人事労務freeeでe-Govを使った労働保険年度更新の機能開
発に関わったほか、次期e-Govの仕様について会議するCode
for e-Govにも参加しています。
現在はUIデザインを専門に取り組むチームに所属しているの
で、業務的にはe-Govにはほぼ関わりがありません。
2
@ymrl
freee株式会社 UIエンジニア
Slide 3
Slide 3 text
エクスキューズ
● きょうお話するのは、4年前、2015年頃の話です
● 当時とはe-Gov自体やe-Govを取りまく環境が異っている可能性があります
● 発表者は長らくe-Gov APIを使った開発からは離れています
Slide 4
Slide 4 text
freeeについて
Slide 5
Slide 5 text
5
創業からIPOまで、中小企業活性化のためのサービスを一気通貫で提供
freee会社概要
❂ 納税する
↗ 育てる
↻ 運営する
✩ はじめる
会社設立 freee
開業 freee
クラウド会計ソフト freee
人事労務 freee
(マイナンバー管理 freee 含む)
クラウド申告 freee
161億603万円 (資本準備金等含む
)
従業員数
事業内容
クラウド型バックオフィスサービスの開発・販売
資本金
設立年月日
2012年7月
505名（2019年1月末時点）
「働きがいのある会社」
2017年 ランキング3位
2018年 ランキング8位
2019年 ランキング4位
Slide 6
Slide 6 text
人事労務freeeのご紹介
マイナンバー管理
マイナンバー
勤怠管理
勤怠管理、有給・残業管理など
給与計算
給与計算ソフト
保険・行政手続
入退社手続、給与支払報告書、算定基礎届
明細発行
給与明細、源泉徴収票など
従業員名簿管理
従業員情報、従業員振込口座情報など
給与計算・労務管理に関するさまざまな機能をご提供
Slide 7
Slide 7 text
SmartHRとも連携
https://smarthr.jp/release/13950
Slide 8
Slide 8 text
人事労務freeeとe-Gov API
2015年5月にe-Gov APIを利用した 労働保険の年度更新 の機能をリリース
https://corp.freee.co.jp/news/e-gov-api-4047.html
Slide 9
Slide 9 text
年度更新とは？
Slide 10
Slide 10 text
労働保険 = 雇用保険 + 労災保険（+ 一般拠出金）
雇用保険料は従業員と使用者が負担、労災保険料は使用者が負担
Slide 11
Slide 11 text
労働保険の年度更新とは
● 労働保険料は年度ごとに概算値を前もって納付してある
● 毎年7月ごろに前年度分の確定保険料と今年度分の概算保険料を計算して、前
年度分の精算分と今年度分を申告して納付する
● 保険料の計算を人事労務freeeで行い、e-Govで保険料を申告し、さらにe-Govで
保険料の納付まで行うことができる
Slide 12
Slide 12 text
最後に使うのが
金融機関サイト表示API
Slide 13
Slide 13 text
金融機関表示APIについて
Slide 14
Slide 14 text
仕様を見てみよう
https://www.e-gov.go.jp/shinsei/interface_api/download.html
Slide 15
Slide 15 text
No content
Slide 16
Slide 16 text
No content
Slide 17
Slide 17 text
No content
Slide 18
Slide 18 text
金融機関サイト表示APIのここがすごい
● XMLじゃなくてHTMLが返ってくる（API……？）
● エラーもHTMLに書いてある（API……？）
● Google Chromeで開くとフリーズする（2015年当時）
○ 当時のChromeのバグで、現在は (Chromeが) 改善されています
Slide 19
Slide 19 text
金融機関サイト表示APIのHTML（抜粋）
function link() {
document.Form.submit();
var agent = navigator.userAgent;
// Submit処理完了前の後続処理動作を抑止
(Safari)
var count = 0;
var timer = setInterval(
function() {
count++;
if(count == 1) {
clearInterval(timer);
// closeできるブラウザ(IE,Safari)の場合、画面を閉じる ※FireFoxは設定に依存
window.open('about:blank','_self').close();
// closeできないブラウザ(FireFox,Chrome))の場合、空白Pageに遷移(replaceにて[戻る]を抑止)
location.replace('about:blank');
}
}, 500);
}
Slide 20
Slide 20 text
当時のChromeで動作しなかった
ポップアップブロックを食らった上でCPU使用率が100%
Slide 21
Slide 21 text
金融機関サイト表示APIのHTML（抜粋）
function link() {
document.Form.submit();
var agent = navigator.userAgent;
// Submit処理完了前の後続処理動作を抑止
(Safari)
var count = 0;
var timer = setInterval(
function() {
count++;
if(count == 1) {
clearInterval(timer);
// closeできるブラウザ(IE,Safari)の場合、画面を閉じる ※FireFoxは設定に依存
window.open('about:blank','_self').close();
// closeできないブラウザ(FireFox,Chrome))の場合、空白Pageに遷移(replaceにて[戻る]を抑止)
location.replace('about:blank');
}
}, 500);
}
Slide 22
Slide 22 text
このJavaScriptがやっていること
● 新しいウィンドウを開き、
● Pay-easyっぽいWebサーバーに何かをPOSTしたうえで、
● 自身のウィンドウは閉じる←ここでフリーズする
Slide 23
Slide 23 text
僕はこう思ったッス（2015）
● フリーズしてしまうのはたぶんChromeが悪い
● でもなんでウィンドウ開いたり閉じたりするん？
● （Pay-easyとの繋ぎ方に何か事情があるのかな……）
● （というか、そもそもいい感じにXMLでください……）
● 仕方ないのでJavaScriptを回避してPOSTする実装をした
Slide 24
Slide 24 text
ウワサの次期e-Govでは……
いい感じのJSONが貰えると最高なんですけどね
Slide 25
Slide 25 text
スモールビジネスを、
世界の主役に。