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=*************

ルートをつくる

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

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 へ格納していく

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

ビューをつくる

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

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>

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

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

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

テストしてみる

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

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

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

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

すると・・・・・・

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

成功です✨😊👍

ちなみに

今回利用した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