2021年01月08日 に更新

Laravel + Vue で法人情報を自動入力する機能をつくる

こんにちは❗フリーランス・コンサルタント＆エンジニアの 九保すこひ です。

さてさて、世の中にはウェブサービスと呼ばれるものが多数あり、作業の効率化のためよく利用する方も多いと思います。

私自身、日頃からそういったサービスに助けられているのですが、この間あるサイトをつかっているときに「こんなことできるんだ！」と驚いたものがありました。

それは・・・・・・

法人情報の自動入力

です。

はじめ見たときは、会社情報がどこから来るのか疑問に思いましたが、ちょっと調べてみたところ、なんと国税庁が法人データを提供してくれており、しかもAPIまで用意してくれているとのことでした。（全く知りませんでした）

そこで❗

今回はこのAPIを使って法人を検索し、その情報を自動入力できるようにしてみます。

ぜひ何かの参考になりましたら嬉しいです😊✨
（最後に実際に開発したソースコード一式をダウンロードできますよ）

「徐々にIT化が進んでますね👍」

開発環境： Laravel 8.x、Vue 3、Bootstrap 4

事前登録する

APIを使うには個別のAPIキーが必要になります。
そのため、以下のURLから事前登録をしておいてください。（法人、個人どちらでもOKですよ）

📝 アプリケーションIDの発行届出フォーム

アプリケーションIDが郵送されてくる

私の場合、登録してから数日で次のような封筒が郵送されてきました。（担当者さん、ありがとうございました😊✨）

そして中には専用のアプリケーションID（13桁）が書かれていました。

では、このIDを.envにセットし、実際に法人情報の自動入力機能をつくっていきましょう❗

.env

TAX_AGENCY_APPLICATION_ID=*************

ルートをつくる

まずはルートをつくります。
以下の２つを追加してください。

routes/web.php

<?php

// 省略

// 👇 ここを追加してください
Route::get('company_search', [\App\Http\Controllers\CompanySearchController::class, 'form']);
Route::post('company_search', [\App\Http\Controllers\CompanySearchController::class, 'search']);

上が入力フォームで、下がAjaxで法人検索をするルートです。

コントローラーをつくる

まずはLaravel側にコントローラーをつくります。

php artisan make:controller CompanySearchController

すると、ファイルが作成されるので中身を以下のように変更してください。

<?php

namespace App\Http\Controllers;

use Illuminate\Http\Request;
use Illuminate\Support\Facades\Http;

class CompanySearchController extends Controller
{
    public function form() {

        return view('company_search.form');

    }

    public function search(Request $request) {

        $app_id = env('TAX_AGENCY_APPLICATION_ID');
        $company_name = urlencode($request->company_name);
        $api_url = 'https://api.houjin-bangou.nta.go.jp/4/name'.
            '?id='. $app_id . // アプリケーションID
            '&name='. $company_name . // URLエンコードした会社名（検索）
            '&change=1'. // 過去の情報も含める
            '&type=02'; // Unicode
        $response = Http::get($api_url);
        $csv_data = $response->body();

        $data = [];
        $loop = 0;
        $fp = tmpfile();
        fwrite($fp, $csv_data);
        fseek($fp, 0);

        while($company_data = fgetcsv($fp)) {

            if($loop > 0) {

                $data[] = [
                    'id' => $company_data[1], // 法人番号
                    'name' => $company_data[6], // 法人名,
                    'post_code' => $company_data[15], // 所在地（郵便番号）,
                    'prefecture' => $company_data[9], // 所在地（都道府県）,
                    'city' => $company_data[10], // 所在地（市区町村）,
                    'street' => $company_data[11], // 所在地（丁目番地等）,
                    'address' => $company_data[9] . $company_data[10] . $company_data[11]
                ];

            }

            $loop++;

        }

        return $data;

    }
}

この中でやっていることは以下のとおりです。

form()

ブラウザから直接アクセスしてくる部分です。
後ほどつくることになるビューをセットします。

search()

Ajaxでアクセスするメソッドになります。

この中では、Laravel 7.xから追加されたHTTP Clientを使ってAPIにアクセスしています。（HTTP Clientは、Gazzleを使いやすくしたものです）

なお、取得できるデータはCSV形式ですので、以下の流れでデータを切り出し、配列にしています。（XML形式もありますが、どうやらjsonはありませんでした・・・😂）

  1. 一時ファイルに取得したデータを保存
  2. 一行ずつ配列で取得
  3. 必要なデータだけを $data へ格納していく

⚠ １点気をつけないといけないのが、１行目が会社データではなくヘッダー情報だというところです。そのため、$loopを使って２行目からデータを集めるようにしています。

ビューをつくる

では、ここからがメインの部分になります。
以下のファイルをつくって保存してください。

resources/views/company_search/form.blade.php

<html>
<head>
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css">
</head>
<body>
<div id="app" class="container p-4">
    <h1 class="mb-5">法人情報・自動入力機能</h1>
    <div class="row mb-4">
        <div class="col-12">
            <button type="button" class="btn btn-info" data-toggle="modal" data-target="#search_modal">法人情報を検索して自動入力する</button>
        </div>
    </div>
    <div class="row mb-4">
        <div class="col-4">
            <label>法人名</label>
            <input type="text" class="form-control" v-model="params.company_name">
        </div>
        <div class="col-4">
            <label>法人番号</label>
            <input type="text" class="form-control" v-model="params.company_id">
        </div>
        <div class="col-4">
            <label>所在地</label>
            <input type="text" class="form-control" v-model="params.company_address">
        </div>
    </div>
    <div class="row">
        <div class="col-12">
            <div class="bg-light text-secondary p-3">
                <small>
                    <div class="mb-1 font-weight-bold">（APIの規約上、この表記が必要です）</div>
                    このサービスは、国税庁法人番号システムのWeb-API機能を利用して取得した情報をもとに作成していますが、サービスの内容は国税庁によって保証されたものではありません。
                </small>
            </div>
        </div>
    </div>
    <!-- Modal -->
    <div class="modal fade" id="search_modal" tabindex="-1" role="dialog" aria-labelledby="searchModalLabel" aria-hidden="true">
        <div class="modal-dialog modal-lg" role="document">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title" id="searchModalLabel">&#x1F50D; 法人情報を検索</h5>
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                        <span aria-hidden="true">&times;</span>
                    </button>
                </div>
                <div class="modal-body">
                    <div class="row">
                        <div class="col-6">
                            <div class="input-group mb-3">
                                <input id="search_company_name" type="text" class="form-control" placeholder="例：株式会社Laravel" v-model="searchCompanyName" @keypress.enter="searchCompany">
                                <div class="input-group-append">
                                    <button class="btn btn-info" type="button" :disabled="searching" @click="searchCompany">検索する</button>
                                </div>
                            </div>
                        </div>
                        <div class="col-6 p-1" v-if="searching">
                            &#x23F3; 検索中...
                        </div>
                    </div>
                    <div class="row">
                        <div class="col-12" v-if="companies.length">
                            <div class="mb-2" style="max-height:350px;overflow-y:auto;">
                                <table class="table table-striped">
                                    <tbody>
                                        <tr v-for="c in companies">
                                            <td>
                                                <a href="#" @click.prevent="setCompany(c)">
                                                    @{{ c.name }}
                                                </a><br>
                                                <small class="text-secondary">@{{ c.id }}</small>
                                            </td>
                                            <td>
                                                <small class="text-secondary">
                                                    〒@{{ c.post_code }}<br>@{{ c.address }}
                                                </small>
                                            </td>
                                        </tr>
                                    </tbody>
                                </table>
                            </div>
                        </div>
                        <div class="col-12 text-secondary" v-else>
                            会社データはありません。
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/js/bootstrap.min.js"></script>
<script src="https://unpkg.com/vue@3.0.2/dist/vue.global.prod.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/axios/0.19.2/axios.min.js"></script>
<script>

    Vue.createApp({
        data(){
            return {
                params: {
                    company_name: '',
                    company_id: '',
                    company_address: ''
                },
                searchCompanyName: '',
                companies: [],
                searching: false
            }
        },
        methods: {
            searchCompany() {

                if(this.searching === false) {

                    this.searching = true;

                    const url = '/company_search';
                    const params = { company_name: this.searchCompanyName };
                    axios.post(url, params)
                        .then(response => {

                            this.companies = response.data;

                        })
                        .catch(error => {

                            console.log(error);

                        })
                        .finally(() => {

                            this.searching = false;

                        });

                }

            },
            setCompany(company) {

                this.params = {
                    company_name: company.name,
                    company_id: company.id,
                    company_address: company.address,
                };
                this.searchCompanyName = '';
                this.companies = [];
                $('#search_modal').modal('hide');

            }
        },
        mounted() {

            $('#search_modal').on('shown.bs.modal', () => {

                document.querySelector('#search_company_name').focus();

            });

        }
    }).mount('#app');

</script>
</body>
</html>

少しコードが長いですが、基本的なVueとaxiosの使い方をしているだけです。

流れとしては以下のようになります。

  1. ボタンをクリック
  2. モーダルが表示されて会社名で検索
  3. Ajax通信で会社データを取得し、リスト表示
  4. 表示された会社情報のうちどれかがクリックされたら自動入力

テストしてみる

では、実際にテストしてみましょう❗
「https://******/company_search」へアクセスしてください。

フォームが表示されるので「法人情報を検索して自動入力する」ボタンをクリックします。

すると、モーダルが表示されるので今回は超有名会社「ソニー」で検索してみましょう。

一覧が表示されるので、「ソニーエレクトロニクス株式会社」をクリックしてみます。

すると・・・・・・

はい❗
何も入力してませんが、自動で３つの入力ボックスに情報が入りました。

成功です✨😊👍

ちなみに

今回利用したAPIの詳細は以下のURLで確認できます。（APIバージョン4を使って開発しました）

WEB-API仕様書：
https://www.houjin-bangou.nta.go.jp/webapi/kyuusiyousyo.html

リソース定義書（応答結果の詳細）：
https://www.houjin-bangou.nta.go.jp/download/index.html#resource

ダウンロードする

今回実際に開発したソースコード一式を以下からダウンロードすることができます。

法人情報を自動入力する機能をつくる

※ CDNをつかっているのですぐ使えますよ👍

おわりに

ということで、今回は国税庁が提供してくれている「法人番号システム API」で法人情報の自動入力機能をつくってみました。

もしかすると法人名を検索するのは、決済などの特殊な場合だけかもしれませんが、アイデアしだいでは面白いものがつくれるかもしれません。

しかも、（データの正確性が保証されているわけではないですが）出処が国税庁ということなので、純度の高いデータと言っていいんじゃないでしょうか。

ぜひ、皆さんもいろいろと作ってみてくださいね。

ではでは〜❗

「こういう公的なデータって
他にもあるでしょうから
活用していかなきゃですね👍」

開発のご依頼お待ちしております 😊✨
開発のご依頼はこちらから: お問い合わせ
どうぞよろしくお願いいたします！
このエントリーをはてなブックマークに追加       follow us in feedly  

開発効率を上げるための機材・まとめ

合わせて読みたい