ページ 2

2025年新入社員ブログ高田04 [郵便番号から住所自動入力機能]

こんにちは、2024年4月に入社した高田です。
社内研修の一環として、Laravelを使って会員登録フォームを作成しました。その中で、住所登録時に郵便番号から住所を自動入力する機能を実装することになり、対応方法をいくつか調べてみました。
調査の結果、いくつかの実装方法があることがわかりました。今回はその中から以下の2つの方法を選び、それぞれを実際に実装してみたので紹介したいと思います。

1. YubinBango.jsを使用する方法
2. Zipcloud APIを使用する方法

まず、実装の下準備として、郵便番号、市区町村、その他を入力するテキストボックス、および47都道府県を選択するプルダウンメニューを作成しました。以下にそのコードを記載します。

<form action="" method="post">
    <!-- 郵便番号 -->
    <label for="postcode">郵便番号（必須）</label>
    <br>
    <input type="text" id="postcode" name="postcode" placeholder="ハイフンなし" value="">
    <br><br>

    <!-- 都道府県 -->
    <label for="prefecture_id">都道府県（必須）</label>
    <br>
    <select id="prefecture_id" name="prefecture_id">
        <option value="">-</option>
        <option value="1">北海道</option>
        <option value="2">青森県</option>
        <option value="3">岩手県</option>
        <option value="4">宮城県</option>
        <option value="5">秋田県</option>
        <option value="6">山形県</option>
        <option value="7">福島県</option>
        <option value="8">茨城県</option>
        <option value="9">栃木県</option>
        <option value="10">群馬県</option>
        <option value="11">埼玉県</option>
        <option value="12">千葉県</option>
        <option value="13">東京都</option>
        <option value="14">神奈川県</option>
        <option value="15">新潟県</option>
        <option value="16">富山県</option>
        <option value="17">石川県</option>
        <option value="18">福井県</option>
        <option value="19">山梨県</option>
        <option value="20">長野県</option>
        <option value="21">岐阜県</option>
        <option value="22">静岡県</option>
        <option value="23">愛知県</option>
        <option value="24">三重県</option>
        <option value="25">滋賀県</option>
        <option value="26">京都府</option>
        <option value="27">大阪府</option>
        <option value="28">兵庫県</option>
        <option value="29">奈良県</option>
        <option value="30">和歌山県</option>
        <option value="31">鳥取県</option>
        <option value="32">島根県</option>
        <option value="33">岡山県</option>
        <option value="34">広島県</option>
        <option value="35">山口県</option>
        <option value="36">徳島県</option>
        <option value="37">香川県</option>
        <option value="38">愛媛県</option>
        <option value="39">高知県</option>
        <option value="40">福岡県</option>
        <option value="41">佐賀県</option>
        <option value="42">長崎県</option>
        <option value="43">熊本県</option>
        <option value="44">大分県</option>
        <option value="45">宮崎県</option>
        <option value="46">鹿児島県</option>
        <option value="47">沖縄県</option>
    </select>
    <br><br>

    <!-- 住所1 -->
    <label for="address1">住所1（必須）</label>
    <br>
    <input type="text" id="address1" name="address1" placeholder="市区町村" value="">
    <br><br>

    <!-- 住所2 -->
    <label for="address2">住所2（必須）</label>
    <br>
    <input type="text" id="address2" name="address2" placeholder="その他" value="">
    <br><br>
</form>

<br>

<br>

</select>

<br>

<br>

</form>

ブラウザで表示すると以下のようなフォームが表示されます。

方法1：YubinBango.js

YubinBango.jsは、郵便番号から住所を表示する機能を簡単に実装できるJavaScriptのライブラリです。使用方法は非常にシンプルで、指定されたclass属性をHTML要素に追加するだけで機能します。
実際に実装したコードは以下の通りです。

<!-- ライブラリを埋め込む -->
<script src="https://yubinbango.github.io/yubinbango/yubinbango.js" charset="UTF-8"></script>

<!-- フォームに class="h-adr" をセット -->
<form action="" method="post" class="h-adr">
    <!-- 国名のspanタグに class="p-country-name" をセット -->
    <span class="p-country-name" style="display:none;">Japan</span>

    <!-- 郵便番号のinputタグに class="p-postal-code" をセット -->
    <label for="postcode">郵便番号（必須）</label>
    <br>
    <input type="text" class="p-postal-code" id="postcode" name="postcode" placeholder="ハイフンなし" value="">
    <br><br>

    <!-- 都道府県のselectタグに class="p-region-id" をセット -->
    <label for="prefecture_id">都道府県（必須）</label>
    <br>
    <select id="prefecture_id" name="prefecture_id" class="p-region-id">
        <option value="">-</option>
        <option value="1">北海道</option>
        <option value="2">青森県</option>
        <option value="3">岩手県</option>
        <option value="4">宮城県</option>
        <option value="5">秋田県</option>
        <option value="6">山形県</option>
        <option value="7">福島県</option>
        <option value="8">茨城県</option>
        <option value="9">栃木県</option>
        <option value="10">群馬県</option>
        <option value="11">埼玉県</option>
        <option value="12">千葉県</option>
        <option value="13">東京都</option>
        <option value="14">神奈川県</option>
        <option value="15">新潟県</option>
        <option value="16">富山県</option>
        <option value="17">石川県</option>
        <option value="18">福井県</option>
        <option value="19">山梨県</option>
        <option value="20">長野県</option>
        <option value="21">岐阜県</option>
        <option value="22">静岡県</option>
        <option value="23">愛知県</option>
        <option value="24">三重県</option>
        <option value="25">滋賀県</option>
        <option value="26">京都府</option>
        <option value="27">大阪府</option>
        <option value="28">兵庫県</option>
        <option value="29">奈良県</option>
        <option value="30">和歌山県</option>
        <option value="31">鳥取県</option>
        <option value="32">島根県</option>
        <option value="33">岡山県</option>
        <option value="34">広島県</option>
        <option value="35">山口県</option>
        <option value="36">徳島県</option>
        <option value="37">香川県</option>
        <option value="38">愛媛県</option>
        <option value="39">高知県</option>
        <option value="40">福岡県</option>
        <option value="41">佐賀県</option>
        <option value="42">長崎県</option>
        <option value="43">熊本県</option>
        <option value="44">大分県</option>
        <option value="45">宮崎県</option>
        <option value="46">鹿児島県</option>
        <option value="47">沖縄県</option>
    </select>
    <br><br>

    <!-- 市区町村のinputタグに class="p-locality" をセット -->
    <label for="address1">住所1（必須）</label>
    <br>
    <input type="text" class="p-locality" id="address1" name="address1" placeholder="市区町村" value="">
    <br><br>

    <!-- その他の住所のinputタグに class="p-street-address" をセット -->
    <label for="address2">住所2（必須）</label>
    <br>
    <input type="text" class="p-street-address" id="address2" name="address2" placeholder="その他" value="">
    <br><br>
</form>

<span class="p-country-name" style="display:none;">Japan</span>

<br>

<br>

</select>

<br>

<br>

</form>

ライブラリを埋め込み、class属性を指定する事で実装することができました。
実際にブラウザで確認すると以下のように、郵便番号（例：1080073）を入力した段階で郵便番号以降の項目（都道府県、市区町村、その他）が自動入力されます。

方法2：Zipcloud API

Zipcloudは、日本郵便が提供する郵便番号検索APIです。入力された郵便番号に基づいて対応する住所情報（都道府県、市区町村、町域など）を取得するためのサービスです。無料で利用可能で、JSONP形式で住所データを取得できます。

以下のURLにアクセスしてください。

https://zipcloud.ibsnet.co.jp/api/search

ブラウザにはこのように表示されます。

続いて以下のURLにアクセスしてください。

https://zipcloud.ibsnet.co.jp/api/search?zipcode=7830060

先ほどの画面とは異なり、ブラウザには住所が表示されています。

「https://zipcloud.ibsnet.co.jp/api/search」は、APIにリクエストを送信するための特定のURLであり、エンドポイントと呼びます。クライアントは、エンドポイントに対してリクエストを送信します。リクエストはインターネットを通じて送られ、APIサーバーに届きます。リクエストを受け取ったAPIサーバーは、内容を解析し、必要なデータをデータベースから取得します。
APIサーバーは、取得したデータを整理し、JSON形式などでレスポンスを作成します。作成したレスポンスはクライアントに送られます。
クライアントは受け取ったデータを解析し、画面に表示します。

今回のように、エンドポイントに「?zipcode=7830060」というクエリパラメータ（リクエストに含まれる追加情報）を付け加えてリクエストを送信すると、郵便番号「7830060」に対応する住所データを取得できます。

Zipcloud APIを使用して、郵便番号から住所自動入力機能を作成すると以下のようなコードになります。

<!-- jQueryライブラリを読み込み -->
<script src="{{ asset('assets/js/jQuery/jquery-3.7.1.min.js') }}"></script>

<script>
    $(function () {
        $('#postcode').on('input', function () {
            const zip = $(this).val().trim();
            // 郵便番号が7桁のときにのみ実行
            if (zip.length === 7) {
                // Zipcloud API取得
                $.getJSON('https://zipcloud.ibsnet.co.jp/api/search?callback=?', { zipcode: zip })
                    .done(function (data) {
                        // 中身が空でなければその値を住所欄に反映
                        if (data.results) {
                            const result = data.results[0];
                            const prefecture = result.address1; // 都道府県
                            const city = result.address2; // 市区町村
                            const area = result.address3; // その他

                            $('#prefecture_id option').each(function () {
                                if ($(this).text().trim() === prefecture.trim()) {
                                    $(this).prop('selected', true);
                                    return false; // ループ終了
                                }
                            });

                            $('#address1').val(city); // 市区町村
                            $('#address2').val(area); // その他
                        } else {
                            // 該当する住所がない場合、入力フィールドをクリア
                            $('#prefecture_id').val('');
                            $('#address1').val('');
                            $('#address2').val('');
                        }
                    })
            }
        });
    });
</script>

<form action="" method="post">
    <!-- 郵便番号 -->
    <label for="postcode">郵便番号（必須）</label>
    <br>
    <input type="text" id="postcode" name="postcode" placeholder="ハイフンなし" value="">
    <br><br>

    <!-- 都道府県 -->
    <label for="prefecture_id">都道府県（必須）</label>
    <br>
    <select id="prefecture_id" name="prefecture_id">
        <option value="">-</option>
        <option value="1">北海道</option>
        <option value="2">青森県</option>
        <option value="3">岩手県</option>
        <option value="4">宮城県</option>
        <option value="5">秋田県</option>
        <option value="6">山形県</option>
        <option value="7">福島県</option>
        <option value="8">茨城県</option>
        <option value="9">栃木県</option>
        <option value="10">群馬県</option>
        <option value="11">埼玉県</option>
        <option value="12">千葉県</option>
        <option value="13">東京都</option>
        <option value="14">神奈川県</option>
        <option value="15">新潟県</option>
        <option value="16">富山県</option>
        <option value="17">石川県</option>
        <option value="18">福井県</option>
        <option value="19">山梨県</option>
        <option value="20">長野県</option>
        <option value="21">岐阜県</option>
        <option value="22">静岡県</option>
        <option value="23">愛知県</option>
        <option value="24">三重県</option>
        <option value="25">滋賀県</option>
        <option value="26">京都府</option>
        <option value="27">大阪府</option>
        <option value="28">兵庫県</option>
        <option value="29">奈良県</option>
        <option value="30">和歌山県</option>
        <option value="31">鳥取県</option>
        <option value="32">島根県</option>
        <option value="33">岡山県</option>
        <option value="34">広島県</option>
        <option value="35">山口県</option>
        <option value="36">徳島県</option>
        <option value="37">香川県</option>
        <option value="38">愛媛県</option>
        <option value="39">高知県</option>
        <option value="40">福岡県</option>
        <option value="41">佐賀県</option>
        <option value="42">長崎県</option>
        <option value="43">熊本県</option>
        <option value="44">大分県</option>
        <option value="45">宮崎県</option>
        <option value="46">鹿児島県</option>
        <option value="47">沖縄県</option>
    </select>
    <br><br>

    <!-- 住所1 -->
    <label for="address1">住所1（必須）</label>
    <br>
    <input type="text" id="address1" name="address1" placeholder="市区町村" value="">
    <br><br>

    <!-- 住所2 -->
    <label for="address2">住所2（必須）</label>
    <br>
    <input type="text" id="address2" name="address2" placeholder="その他" value="">
    <br><br>
</form>

100

101

102

103

104

105

106

107

108

109

110

111

112

113

114

$(function () {

$('#postcode').on('input', function () {

const zip = $(this).val().trim();

// 郵便番号が7桁のときにのみ実行

if (zip.length === 7) {

// Zipcloud API取得

$.getJSON('https://zipcloud.ibsnet.co.jp/api/search?callback=?', { zipcode: zip })

.done(function (data) {

// 中身が空でなければその値を住所欄に反映

if (data.results) {

const result = data.results[0];

const prefecture = result.address1; // 都道府県

const city = result.address2; // 市区町村

const area = result.address3; // その他

$('#prefecture_id option').each(function () {

if ($(this).text().trim() === prefecture.trim()) {

$(this).prop('selected', true);

return false; // ループ終了

}

});

$('#address1').val(city); // 市区町村

$('#address2').val(area); // その他

} else {

// 該当する住所がない場合、入力フィールドをクリア

$('#prefecture_id').val('');

$('#address1').val('');

$('#address2').val('');

}

})

}

});

</script>

<br>

<br>

</select>

<br>

<br>

</form>

実装の流れは以下の4ステップで行われています。

1. 郵便番号の取得
ユーザーが郵便番号を入力すると、その値をjQueryで取得します。取得した郵便番号が7桁の時に次の処理が実行されます。

2. APIへのリクエスト
入力された郵便番号を基に、Zipcloud APIへリクエストを送信します。APIは指定した郵便番号に対応する住所データを返します。

3. レスポンスデータの解析
APIから返ってきたJSON形式のデータを解析し、都道府県、市区町村、その他の情報を取得します。

4. フォームへの値の反映
取得した住所データを、都道府県のプルダウンメニューや市区町村・その他の入力フィールドに設定します。

ZipCloud APIによる住所自動入力機能は、jQueryの基本的な構文の知識があれば実装可能です。

参考
郵便番号検索API – zipcloud
新卒エンジニアがWebAPIを超わかりやすく解説します #初心者 – Qiita
郵便番号の自動入力「YubinBango.js」の使い方と都道府県コードを使う方法 | 大阪のシステム開発なら株式会社ウィズテクノロジー
 【jQuery】郵便番号検索APIを使って住所を自動取得する（zipcloud） | eguweb(エグウェブ)
【Javascript】郵便番号から住所を自動入力する方法 #JavaScript – Qiita
【初心者向け】郵便番号で住所検索をする外部APIを叩く #JavaScript – Qiita
実践jQuery講座 Ajaxの実装方法 | Inoma Create

まとめ

2つの方法を実装しましたが、YubinBango.jsはとても実装が簡単でプログラミング初心者におすすめできます。Zipcloud APIはjQueryの知識が必須のため、jQueryの基本的な構造や書き方に慣れてから使う方がよいかもしれません。今後もAPIやライブラリをうまく使えるようにjQueryやAPIの仕組みなどしっかりと学んでいきたいと思います。

Docker Desktopを用いてLinux(Ubuntu)環境を作成しました。

こんにちは、2024年4月に入社した吉岡です。

Linuxの勉強のためVirtualBoxを用いた環境の構築を行ったことがありましたので、今回はDocker Desktopを用いてLinux(Ubuntu)環境構築を行いました。自分で実際に行った手順をブログにまとめました。

・使用したもの

Windows 11 Pro : 23H2
Docker Desktop 4.37.1 (178610)
Ubuntu 24.04.01 LTS

Docker Desktopインストール手順

1. 仮想化を有効にするために「Windowsの機能の有効化または無効化」を開き、「Linux用Windowsサブシステム」と「仮想化マシンプラットフォーム」を選択し、「ok」を押下する

2. 「Docker Desktop for Windows-86_64」をダウンロードする

Windows | Docker Docs

3. Docker DesktopInstaller.exeを起動する

4. デスクトップにショートカットを作成するか選択し、「OK」を押下する

5. インストールに成功したら「close」を押下する

6. Docker Desktopを起動する

7. サブスクリプションサービス同意画面で「accept」を押下する

8. DockerアカウントでサインインまたはDockerアカウントを作成する

9. Docker desktopにサインインすると、アンケート調査が表示されるので回答するまたは「skip」を押下する

10. Docker Desktopのホーム画面が表示されていることを確認する。

11. Windows Power Shellを開き、「docker version」と入力しEnterキーを押すとDockerのバージョン情報が表示されることを確認する。

12. Windows Power Shellを開き、「wsl -l -v」と入力しPCのEnterキーを押すとdocker-desktopが起動している。

仮想化コンテナの作成および実行手順

1. Windows Power Shellを開き、任意のディレクトリに移動する。

2. 任意のUbuntuのDocker imageを取得するために、「Copy」を押下しコマンドを取得する。

＊以下の例では、Ubuntu 24.04 LTSを使用する。

ubuntu – Official Image | Docker Hub

3. Windows Power Shellでコピーしたコマンドを入力し、PCのEnterキーを押下し、UbuntuのDocker Imageをダウンロードする。

4. Windows Power shellで「docker images」と入力し、Enterキーを押下してでDocker Imageを取得できたことを確認する。

＊Docker Desktopでも確認可能

5. コンテナを作成および実行するために「docker run -it -d –name 任意のコンテナ名任意のDocker image名」を入力し、PCのEnterキーを押下する。

＊以下の例では、コンテナ名「MyUbuntuContainer」、基となるDocker Image「ubuntu:24.04」

6. 「docker ps -a」と入力し、コンテナ作成および実行後を確認する。

＊Docker Desktopでも確認可能

7. 実行したコンテナ内に入るために「docker exec -itコンテナ名 bash」と入力し、PCのEnterを押下する。

8. 動いているUbuntuのバージョンを確認するために「cat /etc/issue」と入力し、PCのEnterを押下する

9. コンテナ内部から抜け出すため、「exit」と入力し、PCのEnterキーを押下する。

10. 実行したコンテナの「docker stop コンテナ名」を入力し、コンテナを停止させる。

11. 「docker ps -a」と入力し、コンテナが停止していることを確認する。

＊Docker Desktopでも確認可能

参考：

Windows | Docker Docs

ubuntu – Official Image | Docker Hub

LPIC試験について

こんにちは、2024年4月に入社した吉岡です。

私は社内研修で登録フォームの作成に取り組んできましたが、開発環境の構築を行う上でLinuxについての知識や触れる機会が不足していることを強く感じました。Linuxについての知識を体系的に深めるために、Linuxの試験であるLPIC-1 101試験(Ver5.0)の公式テキストに取り組みました。

今回の記事を通して、LPIC試験の概要とLPIC-1(101試験)の試験範囲や難易度および実際に学習した感想をお伝えします。

LPICとは

LPICは国際基準で認定されたLinux技術者認定資格であり、要求されるスキルレベルLPIC-1からLPIC-3までの3段階が設定されており、下位のレベルから受験していくことになります。ベンダー資格ではないのでLinuxの汎用的な知識について出題されます。

LinuCとの違い

Linucとは日本独自のLinux技術者認定資格であり、LPICをベースに日本市場で求められるスキルを基準に策定されています。要求されるスキルレベル1からレベル3、システムアーキテクチャの4段階が設定されています。

自分はまずLinuxの全体構造について知識を深めたかったので、LPICの方に取り組みました。

LPIC-1とは

LPICの最もやさしいとされる試験で、特にサーバーエンジニアやインフラエンジニアにとってメジャーな資格とされています。取得には101試験と102試験の2つを合格する必要があり、片方に合格してから5年以内にもう片方の試験を合格する必要があります。

LPIC-1(101)試験とは

試験時間は90分で、出題数は60問です。合格点は500点ですが、点数計算は正解率や問題の難易度によって1問の得点が決まるため、何問正解すれば合格できるかはテストの回によって変動します。

試験範囲は、システムアーキテクチャ、GNUとUnixコマンド、デバイス・Linuxファイルシステム・ファイルシステム階層標準です。102試験とは出題範囲が異なりますが、難易度としては同じくらいとされています。

勉強してみた感想

公式のテキストが500ページ近くあったのでとても大変でした。コツコツ勉強していき3,4か月掛けてテキストを一周したのですが、過去問を解いてみると知識があいまいなだったり抜けていたりするが箇所が多かったです。LPIC-1の資格取得はまだまだ遠いですが、学習前よりもLinuxに対しての親しみやすさを感じられようになったので取り組んでみてよかったです。また、Linucのレベル1だと仮想化やコンテナなどについても試験範囲になるそうなので、そちらについても勉強してみたいと思います。

参考：

LPI: 公式サイト

LPIC-1 Exam 101 学習テキスト

LPI :よくある質問

VirtualBoxを用いてLinux(Ubuntu)環境を作成しました

2024年4月に入社した吉岡です。

社内研修で登録フォームの作成に取り組んできましたが、開発環境の構築を行う上でLinuxについての知識や触れる機会が不足していることを強く感じました。Linuxに触れる機会を増やすために、VirtualBoxの仮想化技術を用いてLinux(Ubuntu)環境の構築しました。自分で実際に行った手順をブログにまとめました。

・使用したもの

Windows 11 Pro : 23H2

Oracle VM VirtualBox : 7.0.22

Ubuntu: Ubuntu Desktop : 24.04.1 LTS

VirtualBoxインストール手順

1. Oracle VM VirtualBoxマネージャーのインストーラーをダウンロードする

Oracle VM VirtualBox – ダウンロード| Oracle Technology Network | オラクル | Oracle 日本

2. インストーラーを実行する

3.セットアップ画面が表示されるので「Next >」を押下する

4. カスタムセットアップ画面でインストールする機能とインストールするディレクトリを選択し、「Next >」を押下する

5. 一時的にネットワークから切り離される警告が表示されるので、「Next >」を押下する

6. 4でVirtualBox Python Supportをインストールする機能に含めた場合、Pythonとpywin32をインストールしていないとインストールするかどうかの確認文が表示される。

Pythonとpywin32インストールする場合は「Yes」を押下し、インストールしない場合は「No」を押下する。

＊VirtualBox Python Supportは、APIでVirtualBoxを制御する機能

7. カスタムセットアップ画面でオプション機能を選択し、「Next >」を押下する。

8. 確認画面が表示されるので、現在までのセットアップでよい場合は「Install」を押下し、セットアップを変更したい場合は変更したい場所まで「Back >」を押下し変更する。

9. インストール完了画面でOracle VM VirtualBoxを起動するかにチェック入れて、「Finish」を押下する

10. Oracle VM VirtualBoxマネージャーが起動できることを確認する

〇仮想マシンを作成手順

1. 任意のISOイメージをダウンロードする。

以下の例では、Ubuntu Desktop 24.04.1 LTS を用いて説明します。

Ubuntuを入手する | Ubuntu | Ubuntu

2. ISOイメージがダウンロードできたことを確認する

3. Oracle VM VirtualBoxを起動する

4. 新規作成を選択する

5. 仮想マシン名を入力・タイプでLinuxを選択・バージョンでUbuntu(64bit)を選択する。「自動インストールをしない」を選択し、「次へ(N)」を押下する。

6. 仮想マシンのメインメモリとプロセッサー数を選択し、「EFIを有効にする」を選択し、「次へ(N)」を押下する。

＊以下の例ではUbuntu Desktop 24.04.1 LTSの推奨システムである、メインメモリ4G(2096MB)とデュアルコア以上(プロセッサ数2つ以上)に設定します。

8. 仮想マシンの仮想ハードディスクのセットアップ方法を3つから選択する。

(1) 新規に仮想ハードディスクファイルを作成する場合

「仮想ハードディスクを作成する(C)」を選択し、ハードディスク容量を選択し、事前割り当てを行うか否かを選択する。

(2) 既存の仮想ハードディスクファイルを追加する場合

「すでにあるハードディスクファイルを使用する(S)」を選択し、追加する仮想ハードディスクファイルを選択する。

(3) 仮想ハードディスクファイルを追加しない場合

「仮想ハードディスクを使用しない(D)」を選択する。仮想ハードディスク設定を選択したら「次へ(N)」を選択する。

＊以下の例ではUbuntu Desktop 24.04.1 LTSの推奨システムである、空きハードドライブディスク25GB以上に設定します。

9. 仮想マシンの設定の要約画面が表示されるので、このまま作成する場合は「完了(F)」を押下し、セットアップを変更したい場合は変更したい場所まで「戻る(B)」を押下し変更する。仮想マシンの作成をキャンセルしたい場合は「キャンセル(C)」を押下する。

10. 作成された仮想マシンが作成されたことを確認する。

仮想マシンの起動手順

1. 作成された仮想マシンを選択し、「起動(T)」を押下する。

2. メニュー画面が表示されるので「Try to Install Ubuntu」を押下し、インストール完了まで待つ。

3. インストール完了後、中央下部のアイコンを押下する。

4. 使用言語を選択し、「次」を押下する。

5. Ubuntuのアクセシビリティを設定し、「次」を押下する。

6. キーボードのレイアウトを選択し、「次」を押下する。

7. インターネットの接続法を選択し、「次」を押下する。

8. 「Ubuntuをインストール」を選択し、「次」を押下する。

9. 「対話式インストール」を選択し、「次」を押下する。

10. 開始時にインストールするアプリケーションを選択し、「次」を押下する。

11. コンピュータを最適化に関するソフトウェアをダウンロードする場合は選択し、「次」を押下する。

12. Ubuntuをインストールするディスクのセットアップ方法を選択し、「次」を押下する。

13. Ubuntuのアカウント名・コンピュータ名・ユーザー名・パスワードを入力する。

14. ログイン時にパスワードの有無とアクティブディレクトリの使用の有無を選択し、「次」を押下する。

15. タイムゾーンを選択し、「次」を押下する。

16. 確認画面が表示されるので、現在までのセットアップでよい場合は「インストール」を押下し、セットアップを変更したい場合は変更したい場所まで「戻る」を押下し変更する。

17. インストールが完了するまで待つ。

18. インストール完了後、「今すぐ再起動」を押下する。

19. PCのEnterボタンを押下する。

20. 作成したユーザー名を選択し、パスワードを入力し、PCのEnterボタンを押下する。

21. ログインに成功すると追加のセットアップ画面が表示されるので、「次へ(N)」を押下する。

22. Ubuntu Proを適用するか否か選択し、「次へ(N)」を押下する。

23. Ubuntuのシステムデータを共有するかどうか選択し、「次へ(N)」を押下する。

24. アプリケーションを追加する場合はアプリセンターを押下して任意のアプリケーションを導入し、追加しない場合は「完了(F)」を押下する。

25. 追加のセットアップが完了すると、ホーム画面が表示される。

・参考

Oracle VM VirtualBox User Guide for Release 7.0

Ubuntu | Ubuntu

(Oracle VM VirtualBox – ダウンロード| Oracle Technology Network | オラクル | Oracle 日本)

福岡生成AI 活用Meetupに行ってきました！

こんにちは。22年度入社の中島です。

2024/12/9(土)に福岡で開催された福岡生成AI 活用Meetup Vol.3に参加しました。カンファレンスや勉強会は前回参加したPHPカンファレンスのみだったので、どのようなイベントだったか簡単に紹介できればと思います。

福岡生成AI 活用Meetupとは

福岡生成AI 活用Meetupは、生成AIツールに焦点を当てその多様な可能性を探る集まりです。今回は3回目の開催で、Dify、v0、napkinなど、様々な生成AIプラットフォームの活用事例などといっしょに紹介するイベントでした。生成AIに興味はあるけど、具体的な活用方法がわからない方、先進的なAI技術のトレンドをキャッチアップしたい方、ビジネスへの応用例を学べる方にオススメのコミュニティです。

セミナーの規模と会場の雰囲気

会場は福岡ファッションビルの8階にあるGMOペパボ株式会社福岡支社さんのオフィスの一角を借りて行われました。参加人数はスタッフ合わせて約20人ほどだったかと思います。会場の雰囲気も前回のPHPカンファレンスの時のように、全体的に明るく和気あいあいとした雰囲気でした。

印象に残ったセッションとその内容

・コミュニティを活用した生成AIの組織定着

さまざまな生成AIが普及しているけれど、会社や仕事でAIを使う人はまだ少ない…効率化を図るために会社や仕事で生成AIを使う人を増やすためにはどうすべきかをテーマにしていました。このセッションでの結論は『学び続けられる教材(生成AIに入力する素材や議題)』と『教えられる人材』を増やすことで生成AIを使う人を増やし、効率を向上させるという内容でした。生成AIを使う人とそれを広める人を増やす方法をお話しされていて、生成AIの知識があまりない私にもわかりやすいセッションでした。

・生成AI時代のプロダクト開発と東洋思想──関係性・空・有機的生成

深層学習やLLM、マルチモーダルな生成AI等が驚くような速さで進歩している昨今、主に西洋近代的な考え方に基づいて、合理性や効率、コントロールを重視する考え方で行う開発手法や評価基準が進められています。このセッションでは『生成AIの時代におけるプロダクト開発を、東洋思想という視点から考え直す』をテーマにしていました。あえて東洋思想という別の視点から見ることで、生成AIを巡るイノベーションは、単なる問題解決や市場拡大にとどまらず、人・社会・文化・自然が交響し合う豊かな「場」を生み出せる可能性があることを提示されていました。福岡という土地柄で生成AIをやる意義を考えたときに、西洋思想だけではなく、東洋思想を元にプロダクト開発を行っていきたいという発表でした。「誰でも理解できるように」を中心に作る西洋思想と、「自分の心の中」を中心に作る東洋思想という考え方がとても印象に残ったセッションでした。

感想

今回、生成AIを勉強中のなか参加したのですが、AIエージェントのセッションでは、実際にAIを活用して自律エージェントの仕組みを使ったサービスの発表や、AI開発ツール Difyを使ったAIエージェントのデモなどがあり、趣味でAIを使うだけでなくビジネスへの応用例を学べることができ、とても良い時間を過ごすことができました。

今回のMeetupを通じて得た知識や経験を、今後の業務に活かせるように生成AIについての学習や調査、実際に使用して作成などしていきたいと思います。

今回はここまで
最後までご覧いただきありがとうございました！

2024年新入社員ブログ高田03 [jQuery UI カレンダー機能実装]

こんにちは、2024年4月に入社した高田です。
7月から社内研修で、
・フレームワークを使用しない会員登録フォーム
・フレームワーク（Laravel）を使用した会員登録フォーム
の実装を行ってきました。
どちらの会員登録フォームも会員登録時の入力項目は同じですが、
フレームワークを使用しない会員登録フォームでは、生年月日をinput要素のtype=”date”入力型で実装し、Laravelを使用した会員登録フォームでは、デザイン性・カスタマイズ性を重視しjQuery UIのカレンダーで実装しました。

2つの方法で生年月日のフォームを実装してみて、
jQuery UIを使用したカレンダーは、input要素のtype=”date”入力型のカレンダーと比べ、
・高度なカスタマイズ性
・ローカライズ対応
といった点で優れていると感じました。

特にカレンダーの表示に関するオプションは豊富で、細かな設定ができると知っておくだけでも設計・実装の幅が広がると感じました。
そこで今回は、jQuery UIを使用したカレンダーの導入方法と実装方法について紹介したいと思います。
私が実際に作成したものがこちらになります。

画像1　生年月日選択中カレンダー表示

画像2　生年月日選択後

年月日のテキストボックスを選択するとカレンダーが表示されます（画像1）。
カレンダー上の日付を押下するとテキストボックスに年月日が入ります（画像2）。
カレンダーは記事作成日時である今日（2024/12/06）までの日付が選択できるようになっています。

[実装方法]

1.　jQuery UIをダウンロード

jQuery UIを使用するためには、jQuery UIとそれに依存するjQuery自体を利用可能な状態にする必要があります。jQueryとjQuery UIには、CDN形式とダウンロード形式の2種類の利用方法があります。
CDN形式は、提供元のサーバーからライブラリを直接読み込む方法で、設定が簡単というメリットがあります。ただし、提供元のサービスが停止した場合に影響を受けるリスクがあります。
ダウンロード形式は、ライブラリをローカル環境に保存して利用する方法で、外部サービスに依存せず安定して利用できるという安心感があります。
今回は安定性を重視し、ダウンロード形式を選びました。

実際に公式サイトよりjQuery、jQuery UIそれぞれダウンロードしました。

必要なファイルをフォルダに配置し、それらを読み込む設定を行います。LaravelのBladeテンプレートでは、ファイルのパスを指定する際にasset関数を使用します。Laravelのasset関数は、アプリケーションのpublicディレクトリを基準としたパスを生成するため、プロジェクト内でのファイル管理が簡単になります。以下のように配置しました。

<!-- jQuery -->
<script src="{{ asset('assets/js/jQuery/jquery-3.7.1.min.js') }}"></script>
<!-- jQuery UI -->
<script src="{{ asset('assets/js/jQuery/jquery-ui-1.14.1.custom/jquery-ui.min.js') }}"></script>
<!-- jQuery UI CSS -->
<link rel="stylesheet" href="{{ asset('assets/js/jQuery/jquery-ui-1.14.1.custom/jquery-ui.css') }}">

これで、jQuery 、jQuery UIを使用する準備が完了しました。

参考：　【初心者向け】jQueryはじめの一歩 #JavaScript – Qiita

2.　inputタグへの設定

ダウンロードが完了後、jQuery UIの日本語リファレンス（Datepicker | jQuery UI 1.10 日本語リファレンス | js STUDIO）を参考にしながら、「年・月メニュー表示」のカレンダーを実装していきます。リファレンスの「年・月メニュー表示」のソースコードは以下のようになっています。

<!doctype html>
<html lang="ja">
<head>
    <meta charset="utf-8" />
    <title>jQuery UI Datepicker - Display month &amp; year menus</title>
    <link rel="stylesheet" href="http://code.jquery.com/ui/1.9.2/themes/base/jquery-ui.css" />
    <script src="http://code.jquery.com/jquery-1.8.3.js"></script>
    <script src="http://code.jquery.com/ui/1.9.2/jquery-ui.js"></script>
    <link rel="stylesheet" href="/demos/style.css" />
    <script>
        $(function() {
            $( "#datepicker" ).datepicker({
                changeMonth: true,
                changeYear: true
            });
        });
    </script>
</head>
<body>
<p>日付: <input type="text" id="datepicker" /></p>
</body>
</html>

<!doctype html>

<head>

<title>jQuery UI Datepicker - Display month & year menus</title>

$(function() {

$( "#datepicker" ).datepicker({

changeMonth: true,

changeYear: true

});

</script>

</head>

<body>

</body>

</html>

HTMLでは、<input>タグにid=”datepicker”が指定されており、このidを基にjQuery UIのdatepicker機能を適用してカレンダーを表示します。jQueryでは、指定したidを用いて要素を選択し、その要素に対してdatepickerメソッドを適用することで、簡単にカレンダー機能を追加できます。また、オプションを設定することで、月や年を選択できるプルダウンメニューを表示し、カレンダーの挙動を柔軟にカスタマイズすることが可能です。なお、idは任意の値に変更でき、<script>タグ部分はそのまま利用することで簡単にカレンダーを作成することができます。以下に実際のコード例を示します。

<script>
    $(function() {
        $("#birth").datepicker({
            changeMonth: true,  
            changeYear: true,
        });
    });
</script>

$(function() {

$("#birth").datepicker({

changeMonth: true,

changeYear: true,

});

</script>

この状態で画面を見ると、以下の画像のように年と月をドロップダウンで選択できるカレンダーが表示されます。

この状態でもカレンダーは十分に機能し、日付を選択することができます。しかし、さらに使いやすくするためにいくつかのカスタマイズを行います。

3.　使いやすいようにカスタマイズ

ステップ２で実装したカレンダーには、以下の2つの課題があります。
・月や曜日が日本語表記ではない
・生年月日用のカレンダーにも関わらず、今日以降の日付が選択できる
これらの課題を解決していきます。

・月や曜日が日本語表記ではない

datepickerの日本語化データはGitHubで利用できます。
下記のページを開いて（datepicker-ja.js）ダウンロードします。

GitHub：　jquery-ui/ui/i18n at main · jquery/jquery-ui · GitHub

ダウンロード後、必要なファイルをフォルダに配置し、ファイルで読み込みを行います。

<!-- jQuery UI日本語設定スクリプト -->
<script src="{{ asset('assets/js/jQuery/datepicker-ja.js') }}"></script>

1 2	<!-- jQuery UI日本語設定スクリプト --> <script src="{{ asset('assets/js/jQuery/datepicker-ja.js') }}"></script>

これだけで日本語化することができます。

・生年月日用のカレンダーにも関わらず、今日以降の日付が選択できる

この問題はオプションを設定することで解決することができます。JavaScriptで日付と年を取得し、それを基に maxDate オプションで選択可能な最大日付を今日に設定を行います。また、年の範囲も1900年から現在の年までに制限します。

続いてyearRange オプションを使って1900年から2024年(今年)まで選択可能状態に、maxDate オプションで選択可能な最大日付を今日に設定を行います。
以下が実際のコードになります。

<script>
    $(function() {
        const today = new Date(); // 今日の日付を取得
        const currentYear = today.getFullYear(); // 習得した日付の年を取得

        $("#birth").datepicker({
            changeMonth: true,        // 月を選択可能
            changeYear: true,         // 年を選択可能
            yearRange: `1900:{currentYear}`,   // 年の範囲を指定
            maxDate: today            // 今日までを最大日付に設定
        });
    });
</script>

$(function() {

const today = new Date(); // 今日の日付を取得

const currentYear = today.getFullYear(); // 習得した日付の年を取得

$("#birth").datepicker({

changeMonth: true, // 月を選択可能

changeYear: true, // 年を選択可能

yearRange: `1900:{currentYear}`, // 年の範囲を指定

maxDate: today // 今日までを最大日付に設定

});

</script>

JavaScriptのテンプレートリテラルを使用し${}を使って変数や式を埋め込むことで、取得したcurrentYearを範囲指定に利用しています。この方法により、yearRangeオプションが常に動的に現在の年に対応し、毎年手動で更新する必要がなくなります。

さらに、maxDate オプションでtoday を設定することで、カレンダー上で今日以降の日付が選択できなくなります。以下の画像は2024/12/06に実装・確認したもので、2024/12/07以降の日付は選択不可になっていることが分かります。

[まとめ]

jQuery UIを使うことで、手間をかけずに高機能なカレンダーを実装できたのは非常に良かったです。使い方がシンプルで、公式ドキュメントや日本語リファレンスも分かりやすく、初めて触れる初心者でも短時間で機能を実装できる点が優れていると感じました。また、柔軟なカスタマイズが可能であり、要件に応じた細かい調整がしやすいのも魅力です。例えば、カレンダーの日本語対応や選択可能な日付の範囲指定など、よくあるカレンダーの仕様にも簡単に対応できました。今後、実装する要件に応じて適切なライブラリやフレームワークを選択し、それを効率的に活用できるスキルを身につけていきたいです。

2024年新入社員ブログ高田02 [ログイン/ログアウト機能実装]

こんにちは、2024年4月入社の高田です。
第1回目の記事で会員登録機能を紹介しました。
今回の記事では前回の記事の延長としてログイン/ログアウト機能について紹介します。

ログイン機能

ログイン機能の実装は今回始めて行いました。普段は意識せずに使っていますが、実装者の立場で改めて考えてみると、どのようにしてログイン機能が実現されているか不明でしたので今回一から調べました。色々なwebサイトを参考に実装し最終的に以下のようなステップで実装を行いました。

1. メールアドレス、パスワード入力必須チェック
2. メールアドレスでのデータベース照会
3. パスワード認証
4. 認証成功時の処理

簡単にではありますが、ここからは上記の各ステップについて順に説明していきます。

1. メールアドレス、パスワード入力必須チェック

ログイン画面でメールアドレス、パスワードを入力し、「ログイン」ボタンを押下すると認証処理が始まります。この際、すべての項目が入力されているか確認し、未入力の場合は以下の画像のようなエラーメッセージが表示されます。

このように必要な情報が揃わない場合、次のステップには進めません。

2. メールアドレスでのデータベース照会

メールアドレスとパスワードの入力必須チェックが完了すると、入力されたメールアドレスを基にデータベースを参照し、該当するユーザーを探します。データベースには登録済みのユーザー情報が保存されており、入力されたメールアドレスと一致するユーザーが見つかった場合、そのユーザーのハッシュ化（※1）されたパスワードを取得します。このパスワードを用いて、次のステップであるパスワード照合に進みます。

（※1）ハッシュ化とは？
ハッシュ化とは、ハッシュ関数によって文字列を置換して、元の文字を推測できなくすることです。ハッシュ関数を用いてsaltと呼ばれるランダムな値をハッシュする値に追加することで、同じパスワードでも異なるハッシュ値が生成されます。データベースに保存されているパスワードはハッシュ化して保存されています。

ハッシュ化の例：
・パスワード：
!X9v#4hT8@pQ7wZ&2024

・ハッシュ値：f3f32592e1483974c378f46b4ab91500199b83b168ec87ed76ebdd66efe83452

※ 上記のようにハッシュ化されたパスワードをデータベースに保存します。

ハッシュ化の特性と利点：
ハッシュ化は一方向の変換であり、一度ハッシュ化されたデータを元に戻すことは極めて困難です。この特性を利用し、データベースに保存するパスワードをハッシュ化しておくことで、万が一データベースが攻撃されても、パスワードを直接利用されるリスクを大幅に減らすことができます。

参考：　PHP: パスワードのハッシュ – Manual

以上より、ハッシュ化はパスワードを管理するための重要なセキュリティ対策となります。

3. パスワード認証

パスワード認証では、データベースに保存されているハッシュ化されたパスワードと、ユーザーが入力したパスワードが一致するかを確認します。データベースに保存されているユーザーのハッシュ値からsalt値を抽出します。ユーザーが入力したパスワードと抽出したsalt値を使用して、新たなハッシュ値を生成し、新たに生成したハッシュ値と、データベースから取得したハッシュ値を比較します。一致すればパスワード認証が成功します。認証に失敗した場合、パスワードを空にして「メールアドレスまたはパスワードが一致しません」というエラーメッセージをログイン画面上に表示します。セキュリティの観点から、メールアドレスが正しいかどうかを利用者に知らせないようにするため、「メールアドレスまたはパスワードが一致しません」というメッセージにしています。以下の画像のように「メールアドレスまたはパスワードが一致しません」というメッセージを表示させます。

4. 認証成功時の処理

認証成功後、サーバー側とブラウザ側でそれぞれ以下の処理を行います。

[サーバー側の処理]

1. セッション情報の保存
サーバーは、ログインしたユーザーのID、名前、メールアドレスなどの必要な情報をセッションに保存します。これにより、ユーザーのログイン状態をサーバー上で管理します。セッション情報はサーバー側に安全に保存され、外部から直接アクセスすることはできません。

2. セッションIDの発行
サーバーは、ログイン状態を識別するための一意のセッションIDを発行します。このセッションIDは、サーバー内でセッション情報に紐付けられています。

3. ログイン後画面へのリダイレクト
認証成功後、ユーザーは検索画面などのログイン後画面にリダイレクトされます。

[ブラウザ側の処理]

1. セッションIDの保存
サーバーが発行したセッションIDは、ブラウザがCookieとして保存します。このCookieは、ブラウザ内に自動的に管理され、サーバーとクライアントのやり取りに利用されます。

2. セッションIDの送信
ブラウザは、保存したセッションIDをサーバーへのリクエストに自動的に添付します。この仕組みによって、サーバーはセッションIDを基にユーザーを識別し、ログイン状態を維持します。

参考：　PHPでセッションを使ったログインページを作ってみる|やまでぃーのブログ

以上がログイン機能についての説明でした。

ログアウト機能

続けてログアウト機能について説明します。
ログアウトは、ログイン状態でのみ行うことができます。
ログアウト処理は、以下のステップで進められます。

1. サーバー側のセッション変数の初期化
2. ブラウザ側のセッションIDの削除
3. サーバー側のセッションIDの無効化

各ステップの詳細は以下をご覧ください。

1. サーバー側のセッション変数の初期化
セッション変数の全データを空にし、セッション情報をリセットします。これにより、セッション変数が初期化され、ユーザー情報などのセッションデータが破棄されます。

2. ブラウザ側のセッションID削除
クライアントのブラウザ側にCookieとして記録されているセッションIDの破棄を行います。セッション管理にCookieを使用している場合はブラウザ側のCookieを削除しておかないとセッションIDが残ってしまいセキュリティ上よくありません。（実装段階では、調べが行き届いておらずブラウザ側でのセッションID削除は行いませんでした。）

3. サーバー側のセッションIDの無効化
セッション自体を破棄し、セッションIDも無効化して完全なログアウト状態にします。セッションの破棄が完了後、ログイン前の画面にリダイレクトします。今回の場合、以下の画像のようにトップ画面にリダイレクトします。

以上がログアウト機能についての説明でした。

参考：
PHP: session_destroy – Manual
PHPでセッションを完全に破棄する方法 – プログラマはサイコロを振らない

まとめ

ログイン/ログアウト機能を実装する際に、セッションやCookieの仕組みについて深く学ぶことができました。例えば、ChromeでAmazonにログインした後、EdgeでAmazonのURL（https://www.amazon.co.jp/）にアクセスした場合にログイン状態が維持されるのか、また、Chromeの別タブで同じURLを開いた場合にログイン状態が共有されるのかを検証しました。この検証を通じて、セッションやCookieがブラウザごと、またはタブごとにどのように扱われるかを具体的に確認しました。その結果、ログイン状態がどのように管理されているのかについて理解が深まりました。
今回学んだ知識を活かし、次はPHPフレームワークであるLaravelを使った実装に取り組んでいきたいと思います。Laravelでは、認証機能やセッション管理に便利な仕組みが既に用意されており、活用することでより効率的かつ安全なログイン/ログアウト機能を実装できるようなので、実装方法をしっかり学習したいと思います。将来的に、ユーザーに安心して使ってもらえるシステム構築ができるよう引き続き学習していきます。

Linux学習についてのまとめ 03 ファイルシステム

こんにちは。22年度入社の中島です。

前回はLinuC101試験に向けての学習の一環として、GNU/Linuxついての記事を作成しました。今回はLinuC101試験のファイルシステムについての内容をまとめました。この記事を通じて、ファイルシステムの基本的な内容、ファイルシステムのマウントとアンマウント、ファイルシステムのバックアップについて共有します。

1. ファイルシステムとは

ファイルシステムとは、コンピュータのストレージデバイス（HDD、SSDなど）上でデータを管理するための方法であり、データの保存、取得、整理を行います。ファイルシステムは、ファイルを格納する場所（ファイルシステムのブロック）とその情報を格納するメタデータを管理します。例えば、ファイルの名前、サイズ、作成日などです。

2. ファイルシステムの作成と管理

ファイルシステムを新しく作成するには、mkfsコマンドが一般的です。具体的な手順は以下の通りです。

ファイルシステムの作成

mkfs -t ext4 /dev/sdX1

1	mkfs -t ext4 /dev/sdX1

ファイルシステムの管理

作成したファイルシステムの管理には、tune2fs(extファイルシステム用)やxfs_admin(xfs用)といったコマンドが使用されます。例えば、tune2fsを使用してext4ファイルシステムの設定を変更することが可能です。

tune2fs -l /dev/sdX1

1	tune2fs -l /dev/sdX1

3. 一般的なファイルシステムタイプ

Linuxではいくつかのファイルシステムタイプがサポートされており、用途に応じて選択することが重要です。以下は代表的なファイルシステムタイプです。

コマンド	説明
ext3	ext3は、Linuxで広く使用されているジャーナリングファイルシステムで、ext2ファイルシステムの後継として登場しました。ジャーナリング機能により、システムクラッシュや突然の電源断からの回復が速くなります。
ext4	最も一般的なLinuxのファイルシステムであり、ジャーナリング機能を持ち、データの信頼性が向上しています。ext4は、安定性と速度のバランスが良いため、個人のPCやサーバーにも広く利用されています。
xfs	xfsは、大容量ファイルや高速な書き込みが必要なシステムで利用されます。特にデータベースやファイルサーバーに適しており、スナップショットやデータの圧縮機能を提供します。
btrfs	btrfsは、スナップショット機能や圧縮、自己修復機能を備えた新しいファイルシステムです。ファイルシステムの管理が容易で、ストレージの拡張性や効率性に優れています。
f2fs	フラッシュメモリ向けに最適化されたファイルシステムで、特にSSDやeMMCのようなフラッシュストレージに適しています。
iso9660	iso9660は、主にCD-ROMやDVD-ROMなどの光ディスクメディアに使用されるファイルシステム規格です。このファイルシステムは、光ディスクにおけるデータの標準的な配置方法を定めています。
UDF	UDFは、光ディスクやその他のストレージデバイス向けに設計されたファイルシステムで、iso9660の後継として登場しました。主にDVD、Blu-rayディスク、USBフラッシュドライブなどの書き込み可能なメディアで使用されます。

4. スワップ領域について

スワップ領域は、システムメモリ（RAM）が不足した際に使用されるディスク領域であり、仮想メモリの一部として機能します。スワップ領域を設定することで、システムがメモリ不足の際にハングアップせずに動作を維持することができます。

スワップ領域の作成例:

mkswap /dev/sdX2

1	mkswap /dev/sdX2

swapon /dev/sdX

1	swapon /dev/sdX

ここで、/dev/sd2はスワップ領域として使用するパーティションです。swaponコマンドでスワップを有効にすることができます。

5. ファイルシステムのマウントとアンマウント

ファイルシステムは、物理デバイス（ハードディスク、SSD、USBドライブなど）に格納されたデータにアクセスするために、システムに「マウント」して利用します。マウントとは、ファイルシステムを特定のディレクトリに接続し、そこからファイルにアクセスできるようにする操作です。アンマウントは、逆にファイルシステムを切り離し、デバイスを安全に取り外すための操作です。

Linuxでは、mountコマンドとumountコマンドを使ってファイルシステムをマウントおよびアンマウントします。

ファイルシステムのマウント

ファイルシステムをマウントするには、mountコマンドを使用します。マウントは、デバイスとマウントポイントというディレクトリを指定して行います。マウントポイントは、ファイルシステムが接続されるディレクトリで、通常は/mntや/mediaが利用されますが、任意のディレクトリを指定できます。

例えば、/dev/sda1というパーティションを/mntにマウントする場合、次のようにコマンドを実行します。

mount /dev/sda1 /mnt

1	mount /dev/sda1 /mnt

このコマンドを実行すると、/dev/sda1の内容が/mntディレクトリに表示され、そこからファイルを読み書きできるようになります。

例：ファイルシステムをマウントする

例えば、/dev/sda1という外部ドライブを/media/usbというディレクトリにマウントしたい場合、次のようにコマンドを実行します。

mount /dev/sdb1 /media/usb

1	mount /dev/sdb1 /media/usb

これで、/media/usbにアクセスすることで、外部ドライブ内のファイルを操作できるようになります。

マウントのオプション

mountコマンドには、さまざまなオプションを付けてマウントをカスタマイズできます。以下は代表的なオプションです

-t：マウントするファイルシステムのタイプを指定します（例：ext4、xfs）。bashコードをコピーする　

mount -t ext4 /dev/sda1 /mnt

1

mount -t ext4 /dev/sda1 /mnt
-o：特定のオプションを指定します。例えば、ro（読み取り専用）やnoexec（実行不可）など。bashコードをコピーする　

mount -o ro /dev/sda1 /mnt

1

mount -o ro /dev/sda1 /mnt
-v：詳細な出力を表示します。マウントの進行状況やエラーを確認できます。bashコードをコピーする　

mount -v /dev/sda1 /mnt

1

mount -v /dev/sda1 /mnt

永続的なマウント（/etc/fstabを使用）

一度マウントしたファイルシステムは、再起動後に自動的にマウントされるわけではありません。システムの起動時に自動的にマウントするためには、/etc/fstabというファイルに設定を追加する必要があります。

/etc/fstabファイルに、マウントするデバイスとマウントポイント、ファイルシステムタイプなどを記載します。例えば、/dev/sda1を/mntにマウントする設定は次のように記載します。

/dev/sda1 /mnt ext4 defaults 0 2

1	/dev/sda1 /mnt ext4 defaults 0 2

これで、システムが起動するたびに/dev/sda1が自動的に/mntにマウントされます。

ファイルシステムのアンマウント

ファイルシステムをアンマウントするには、umountコマンドを使用します。アンマウントは、ファイルシステムへのアクセスを停止し、デバイスを切り離す操作です。

アンマウントするには、マウントポイントまたはデバイスを指定します。例えば、/mntをアンマウントするには次のようにコマンドを実行します。

umount /mnt

1	umount /mnt

また、デバイス名を指定してアンマウントすることもできます。

umount /dev/sda1

1	umount /dev/sda1

アンマウント時の注意点

アンマウントを行う前に、マウントされているディレクトリ内のファイルが使用中でないことを確認する必要があります。ファイルが開かれていたり、プロセスがファイルシステムにアクセスしていると、アンマウントできない場合があります。
lsofコマンドやfuserコマンドを使って、ファイルシステムを使用しているプロセスを確認できます。

lsof /mnt

lsof /mnt

または

fuser -m /mnt

1	fuser -m /mnt

これらのコマンドを使って、ファイルシステムを使用しているプロセスを確認し、プロセスを終了させてからアンマウントすることができます。

6. ファイルシステムの整合性チェックと修復

ファイルシステムの整合性を維持するためには、定期的なチェックと修復が重要です。特に、システムがシャットダウン不完全であった場合や、ディスクの物理的な問題が発生した場合には、ファイルシステムが壊れることがあります。そのため、定期的なチェックと修復作業はシステムの安定性を保つために欠かせません。

Linuxでは、fsck（File System Consistency Check）コマンドを使用して、ファイルシステムのエラーをチェックし、修復することができます。fsckは、指定したファイルシステムに対して以下の作業を行います：

ファイルシステムのメタデータを確認し、破損している場合には修復
ファイルシステム内での不整合を検出し、修復
破損したファイルを隔離し、可能な限り復旧

fsckコマンドの使い方
ファイルシステムの整合性をチェックするためにfsckコマンドを使用します。例えば、/dev/sda1というパーティションのファイルシステムをチェックするには以下のコマンドを実行します。

fsck /dev/sda1

1	fsck /dev/sda1

このコマンドを実行すると、システムは自動的にファイルシステムを確認し、エラーが発見されると修復を試みます。

例: fsckの実行
例えば、次のようにコマンドを実行した場合、ファイルシステムにエラーがあったと仮定します。

fsck /dev/sda1

1	fsck /dev/sda1

出力例：

fsck from util-linux 2.34 e2fsck 1.44.5 (15-Dec-2018) Checking for unreferenced inodes.. Inode 123456789 not used (id=1234) ... /dev/sda1: 1/1000000 files (0.1% non-contiguous), 10000/1000000 blocks

1	fsck from util-linux 2.34 e2fsck 1.44.5 (15-Dec-2018) Checking for unreferenced inodes.. Inode 123456789 not used (id=1234) ... /dev/sda1: 1/1000000 files (0.1% non-contiguous), 10000/1000000 blocks

この場合、fsckはエラーを修復し、破損していないかを確認します。e2fsck（ext2/ext3/ext4ファイルシステムのチェックツール）は、実際に問題が見つかると、修復するかどうかを尋ねることがあります。たとえば、「修復するか？」という確認メッセージが表示されることがあります。

例文：

/dev/sda1: clean, 12345/1000000 files, 567890/2000000 blocks

1	/dev/sda1: clean, 12345/1000000 files, 567890/2000000 blocks

このメッセージは、ファイルシステムが正常であり、エラーがないことを意味します。

コマンドのオプション

fsckコマンドには、いくつかの便利なオプションがあります。例えば、-yオプションを使用すると、すべての修復を自動的に承認します。手動で確認することなく、エラーを修正する場合に便利です。
例文：

fsck -y /dev/sda1

1	fsck -y /dev/sda1

-nオプションを使用すると、修復せずにエラーメッセージを表示するだけになります。これを使うことで、実際に修復作業を行う前にエラーを確認できます。
出力例：

fsck -n /dev/sda1

1	fsck -n /dev/sda1

ブート時の自動チェック

多くのLinuxディストリビューションでは、システム起動時に自動的にファイルシステムのチェックを行います。もしファイルシステムに問題が発見されると、fsckが自動的に修復処理を行います。この処理が長時間かかる場合もあるので、定期的にディスク状態を確認しておくことが推奨されます。

例えば、システム起動時に「ディスクにエラーがあるため、fsckが実行されています」といったメッセージが表示されることがあります。

ファイルシステムの修復後

ファイルシステムが修復されると、fsckコマンドは修復後の状態を報告します。報告には、修復したエラーの数や修復内容が含まれます。例えば、次のような報告が表示されます。

/dev/sda1: 1000000/1000000 files (0.1% non-contiguous), 2000000/2000000 blocks

1	/dev/sda1: 1000000/1000000 files (0.1% non-contiguous), 2000000/2000000 blocks

これは、ファイルシステムに問題がなかったことを意味します。

ファイルシステムが修復できない場合

fsckがファイルシステムを修復できない場合もあります。その場合、手動でさらに調査したり、バックアップからの復元が必要です。例えば、物理的なディスク障害がある場合や、データが完全に破損している場合には、fsckでは回復できないことがあります。

そのため、定期的なバックアップと、fsckによる早期のチェックが非常に重要です。システムの信頼性を確保するために、バックアップの重要性を忘れないようにしましょう。

おわりに

今回の記事では、LinuC101試験に向けての学習の一環として、ファイルシステムの基本的な内容、ファイルシステムのマウントとアンマウント、ファイルシステムのバックアップなどについてまとめました。ファイルシステムの正しい管理は、Linuxシステムの安定性を保つために不可欠です。今回紹介したファイルシステムの作成と管理、各種ファイルシステムタイプ、スワップ領域の使用方法、マウントとアンマウント、整合性チェックとバックアップをしっかり理解し、実際の操作を繰り返すことで、LinuC 101試験にも十分に備えることができるでしょう。

今回はここまで
最後までご覧いただきありがとうございました！

2024年新入社員ブログ高田01　[PHP版会員登録機能実装]　

こんにちは、2024年4月入社の高田です。
入社から半年が経過しました。この半年間は外部研修、内部研修を受けていました。

外部研修では、泉岳寺のオフィスを離れ新宿のビルで他社の受講生の方々と一緒にITの基礎知識やHTML、CSS、JavaScript、PHP、Laravelを学びました。最終的にチームで旅館予約システムを作成し発表を行いました。私はITに関しては未経験でしたが、分かりやすく丁寧に教えていただきとても有意義な時間を過ごすことができました。

内部研修では、泉岳寺のオフィスに戻りSQLやPHP、Laravelを使用した会員登録フォームを作成しています。外部研修で学んだ知識はもちろんのこと、実務で欠かせない技術を少し盛り込みより実務に近い研修です。

今回は内部研修の一環としてPHPを使用し作成した会員登録フォームの会員登録機能について紹介します。会員登録フォームは以下の5つの機能で構成されています。

・会員登録機能
・ログイン/ログアウト機能
・会員一覧表示機能
・会員情報更新機能
・会員削除機能

今回は会員登録機能について説明していきます。
会員登録機能を実装するために以下の3つの画面を作成しました。

・入力画面
・確認画面
・完了画面

これら3つの画面を通して、ユーザーが情報を入力し、確認・登録まで行います。
各画面について詳細を説明します。

入力画面

ユーザーが名前、メールアドレス、パスワードなどを入力するための入力画面です。ユーザーがフォームに必要な情報をすべて入力し、POSTで確認画面に送信するための「確認」ボタンが用意されています。都道府県、性別についてはDBのテーブルから参照し、表示しています。また、確認ボタンを押下した際、入力値の保持を行いますが、パスワードに関してはセキュリティの関係上入力値を保持しないようにしています。バリデーションチェックを実施し、入力欄に適切な値が入力されなかった場合はエラーメッセージを入力画面上に表示します。

例えば、郵便番号入力欄に数字以外の文字を入力し「確認」ボタンを押下するとエラーメッセージが表示し、確認画面に遷移しないようになっています。

全項目のバリデーションチェックを突破したときに初めて確認画面に入力値をPOST送信し、確認画面に遷移することができます。

確認画面

入力した情報を確認する確認画面です。入力画面で「確認」ボタンを押下すると、確認画面に遷移し、POST送信されたデータが画面上に表示されます。ただし、パスワードに関しては、セキュリティを考慮して画面に表示されないようにしています。また、パスワードは確認画面に遷移した時点でハッシュ化を行っているため開発者ツールを使用してもハッシュ化前のパスワード値は確認できないようにしています。

この画面では、誤った情報が入力されていないかをユーザー自身が確認できるようにし、修正が必要な場合は「入力画面へ戻る」ボタンを押下し、入力画面に戻ることも可能です。入力画面に戻ってきた際に、パスワード以外の入力値が保持されています。また、1から入力する必要がなく、修正個所とパスワードの入力で確認画面に遷移可能です。開発者ツールを使用し、確認画面に送信された値をバリデーションエラーになるような値に書き換えて、「登録」ボタンを押下すると入力画面に遷移してエラー項目にエラー文が表示します。修正が必要ない場合は、「登録」ボタンを押下し、登録処理を確認画面で行い登録が終えたら完了画面に遷移します。

完了画面

ユーザー登録が完了したことを通知する完了画面です。完了画面は、DBにユーザー情報を保存した後に表示されます。DBにユーザー情報登録が成功した場合は、完了メッセージとともにトップページに移動するためのリンクが表示されます。また、完了画面に遷移した段階で、未ログイン状態からログイン状態となりヘッダーにログインユーザー名が追加されます。

学んだこと

・開発者ツールの使い方

サーバーに送信するデータを直前に書き換えることが可能です。
ブレークポイントを入れることで、JavaScriptの変数の中身を確認しながらデバック作業を行うことができます。

・変数名の命名規則

誰が見てもわかるような変数名を命名する必要があります。
キャメルケースやスネークケースといった命名規則が存在します。
コードの読みやすさを向上させるため、まず『リーダブルコード』という書籍を読んでみようと思います。この本は、読み手にとって理解しやすいコードを書くためのガイドで、わかりやすい変数名の付け方など詳しく解説されています。

・絵文字の保存方法

今回の会員登録機能は絵文字を保存できるようにします。
絵文字はUTF-8の通常のバージョン（utf8）ではサポートされないため、UTF-8の4バイト対応（utf8mb4）に設定する必要があります
MySQLの設定ファイルの一部修正や、DBとテーブル生成時にutf8mb4に対応するようにしておきます。

・デバッグ方法

会員登録機能を実装していくとよくエラーが発生します。
エラーを解決するためにデバッグ作業を行います。
error_log() を使ったデバッグ方法は、コードの進行がどこで止まっているかPOSTの値が渡っているかなどを調べます。このデバッグ方法のおかげで調べても解決できないエラーを解決することができました。

・セキュリティを考慮することの重要性

SQLインジェクション対策とクロスサイトスクリプティング（XSS）対策を行いました。
入力欄に悪意あるコードを埋め込み、それが実行されてしまうとテーブルにあるユーザー情報が削除されてしまいます。
入力欄に入力された悪意あるコードを無効化し、ただの文字列として認識させれば悪意あるコードは実行されません。

以上が会員登録機能についてでした。
現在、Laravel版の会員登録フォームの作成に取り掛かっております。
PHP版の会員登録フォームでは実装できなかったページネーション機能や郵便番号から住所自動入力機能などを追加し、内部研修の集大成としてスケジュールに気を付けつつPHP版で学んだことを生かしながら作成していきたいと思います。

Linux学習についてのまとめ 02 GNU/Linux

こんにちは。22年度入社の中島です。

現在、私はLinuCの101試験に合格するためにLinuxの学習を進めています。特にGNUに関する内容を理解することが重要であると感じ、これらの知識をブログとしてまとめました。この記事を通じて、GNU/Linuxの基本的な歴史やリチャード・ストールマンの貢献、さらにはLinuxのテキストフィルタコマンドについて共有します。

1. GNUの歴史について

GNUは「GNU’s Not Unix!」の略で、Unix互換のオペレーティングシステムを開発するために1983年にリチャード・ストールマンによって開始されたプロジェクトです。当時、ほとんどのソフトウェアがプロプライエタリ（専用）であり、ソースコードが公開されていませんでした。ストールマンは、ソフトウェアの自由な使用、改変、再配布を可能にすることを目指してGNUプロジェクトを立ち上げました。

GNUプロジェクトの最も重要な成果の一つは、GPL（GNU General Public License）です。GPLは、フリーソフトウェアに特化したライセンスであり、ユーザーにソフトウェアの自由を保障します。このライセンスは、ソフトウェアを自由に使用し、改変し、再配布することを許可しますが、改変や再配布されたソフトウェアも同様にGPLの下で公開される必要があります。この仕組みを「コピーレフト」と呼びます。コピーレフトは、ソフトウェアの自由を保護するための強力な手段であり、オープンソースソフトウェアの普及に大きく寄与しました。

コピーレフトの理念は、ソフトウェアが自由であるべきという考え方に基づいており、ユーザーがソフトウェアを制限なく利用できるようにすることを目的としています。このため、GPLはフリーソフトウェア運動の基盤となり、オープンソースコミュニティにも大きな影響を与えました。

GNUプロジェクトは、Unixと同様の機能を持つ多くのソフトウェアを開発しました。これらのソフトウェアには、コンパイラ（GCC）、テキストエディタ（Emacs）、シェル（Bash）などが含まれます。これらのツールは、現在も多くのユーザーに利用され、Linuxを含むさまざまなオペレーティングシステムで使用されています。

2. リチャード・ストールマンについて

リチャード・ストールマンは、フリーソフトウェア運動の先駆者であり、GNUプロジェクトの創始者です。1985年にフリーソフトウェア財団を設立し、ソフトウェアの自由を擁護する活動を続けています。彼の主張は、ソフトウェアがユーザーに自由を与えるべきであり、そのためにはソースコードが自由にアクセスできる状態でなければならないというものです。ストールマンの理念は、多くのフリーソフトウェアのライセンス（例：GPL）に反映されており、今日のオープンソースコミュニティに大きな影響を与えています。

3. GNUから生まれたLinux

GNUプロジェクトは多くのツールを開発しましたが、オペレーティングシステムの核となるカーネルは開発されていませんでした。1991年、リーナス・トーバルズによってLinuxカーネルが発表されました。GNUツールとLinuxカーネルを組み合わせることで、現在の多くのGNU/Linuxシステムが形成されました。このように、LinuxはGNUプロジェクトと密接に関連していますが、GNUそのものとは別の存在です。

4. GNU/Linuxのテキストフィルタコマンド

GNUシステムの基本コンポーネントには、GCC（コンパイラ）、glibc（ライブラリ）、Coreutils（コマンド）、GDB（GNUデバッガ)、Bashシェルなどが含まれています。
Coreutils（GNU Core Utilities）の中でも特徴的なのが、テキストデータを加工するコマンド群になります。シェル上でこれらのコマンドを組み合わせることで強力なデータ処理が可能です。

これらのテキストフィルタコマンドは、データ処理や分析において非常に役立つツールであり、試験勉強の一環として理解を深めることで、実際の業務でも役に立つと思いました。
業務で使うシーンを想定しながら、今回はそのコマンドと例文の一部をまとめようと思います。

代表的なテキストフィルタコマンド

コマンド	説明
grep	テキスト検索ツールで、指定したパターンに一致する行を抽出します。例: grep -i ’error’ application.log application.logファイル内で ‘error’ （大文字小文字区別なし）に一致する行を検索して表示します。
sed	ストリームエディタで、テキストの置換や削除、挿入を行います。例:sed ‘s/localhost/127.0.0.1/g’ /etc/hosts ホスト名をIPアドレスに置き換えます。設定ファイルを一括して修正する際に役立ちます。
awk	テキスト処理言語で、テキストのパターンマッチングと処理が可能です。例:awk ‘$3 == “root” {print $1}’ /etc/passwd /etc/passwdファイルからrootユーザーのユーザー名を抽出します。
sort	テキストデータをソート（並べ替え）します。例: sort -k3,3 -t, data.csv CSVファイルの3列目（例: 売上データ）を基準にしてソートします。
uniq	重複する行を削除します（通常はsortと組み合わせて使用されます）。例: sort access.log \| uniq -c アクセスログの重複するエントリを集計し、一意のリクエスト数を数えることができます。
cut	テキストの特定のフィールドを抽出します。例: cut -d ‘:’ -f 1 /etc/passwd /etc/passwdファイルからユーザー名のみを抽出します。
tr	文字の変換や削除を行います。例: echo ‘abc123’ \| tr ‘a-z’ ‘A-Z’ 出力結果の小文字を大文字に変換します。

これらのコマンドを使いこなすことで、テキストデータの効率的な処理と分析が可能になります。

おわりに

今回の記事では、LinuC101試験に向けての学習の一環として、GNU/Linuxの歴史やリチャード・ストールマンの貢献、そしてテキストフィルタコマンドについてまとめました。これらの知識を深めることで、Linuxシステムの理解がさらに深まったと感じています。特に、シェルスクリプトの作成や自動化されたデータ処理、システム管理業務において、これらのコマンドの組み合わせが強力なツールとなることを理解しました。また、実際の業務でのデータ処理や、エラーの迅速な検出・修正など、より効率的なシステム運用に役立つ点も大いに学ぶことができました。

今回はここまで
最後までご覧いただきありがとうございました！

2025年6月
月	火	水	木	金	土	日
						1
2	3	4	5	6	7	8
9	10	11	12	13	14	15
16	17	18	19	20	21	22
23	24	25	26	27	28	29
30