未分類

[LinuC]Linuxのパーミッションについて

2024年4月入社の吉岡です。以前から「Linuxはコードを書くよりも直感的でないし自分にサーバ・インフラ関係はよくわからない…」と苦手意識を持っていたのですが、苦手なまま避け続けるのは精神衛生によくないと感じ取り組んでみることにしました。現在はLinuCレベル1の取得を目指しており、LinuC公式のテキストとPing-tに取り組んでいます。その中で学んだLinuxのファイルやディレクトリのパーミッションについてまとめさせていただきました。

誰向けの記事か：プログラミング諸学者向け

パーミッションとは
ディレクトリのパーミッション設定例
特殊なパーミッション
デフォルトパーミッションの設定

〇パーミッションとは

パーミッションはアクセス権限のことであり、主に用いられるパーミッションとして、読込権限・書込権限・実行権限の3種類があります。各パーミッションを所有者・グループ・その他ユーザごとに設定することでセキュリティを高め、システムの目的に沿った使用がされやすくなります。

各パーミッションで可能になる動作を下記の表にまとめました。

パーミッション	ファイルの場合	ディレクトリの場合
読込権限(r\|4)	ファイルの内容を表示	ファイルのリストを表示
書込権限(w\|2)	ファイルの上書き	ファイル作成・削除
実行権限(x\|1)	ファイルの実行	ディレクトリ内に入れる

「$ls -l ファイル名」または「$ls -dl ディレクトリ名」で10桁のパーミッションコードを確認することができます。
パーミッションコードの左から1番目の記号はファイルの種類を表しており、左から2~4番目が所有者のパーミッション、左から5~7番目がグループのパーミッション、左から8~10番目がその他ユーザのパーミッションを表しています。

パーミッションコード例： -rwxr-x–x
ファイルタイプ：「ファイル」
所有者のパーミッション：「読込権限・書込権限・実行権限」
グループのパーミッション：「読込権限・実行権限」
その他ユーザのパーミッション：「実行権限」

ファイルタイプ記号	ファイルタイプ
–	ファイル
d	ディレクトリ
l	シンボリックリンク
c	キャラクタデバイス(キーボードなど)
b	ブロックファイル()
s	ソケット(双方向)
p	FIFO(一方向)
?	その他

パーミッションを変更したい場合は、chmod コマンドで8進数またはシンボルで変更後のパーミッションをしてすることができます。

・8進数で指定する場合
付与したいパーミッションを読込権限(4)、書込権限(2)、実行権限(1)とした時の合計値でsi表現する。3桁の8進数で指定する場合は左から所有者のパーミッション・グループのパーミッション・その他ユーザのパーミッションを設定し、4桁の場合は左から特殊パーミッション・所有者のパーミッション・グループのパーミッション・その他ユーザのパーミッションを設定する。

・シンボルで指定する場合
付与したいパーミッションを読込権限(r)、書込権限(w)、実行権限(x)、で表現する。所有者のパーミッション(u),グループのパーミッション(g),その他ユーザのパーミッション(o)に対してそれぞれ設定したいパーミッションを設定する。

〇ディレクトリのパーミッション設定例

個人的にディレクトリのパーミッションは動作を行うことができるのかわかりづらいと感じたので、いつくか具体的な例を挙げさせていただきます。

例1:ディレクトリに読込権限はあるが実行権限がない場合
読込権限があるのでディレクトリ自体の情報は参照できるが、実行権限がないのでディレクトリの中には入れずディレクトリのリストの中身を表示できません。

実行権限を付与したら、リストの中身を取得できます。中身を追加していないのでカレントディレクトリと親ディレクトリのみです。

例2：ディレクトリに読込権限と書込権限はあるが実行権限がない場合
ディレクトリの中に入ることができないので、touch コマンドやリダイレクトを用いてファイルの作成やファイル内容の更新や削除はできない。

*ただしディレクトリ中に入る必要がないので、ディレクトリ名の変更はできる。

実行権限を付与したら、ファイルの作成やファイル内容の更新や削除ができるようになりました。今回は「>」を用いて文字列の標準出力先を指定ファイルにリダイレクト(宛先ファイルが存在しなければ新規作成/存在すれば上書き)を行い、「>>」を用いてファイルの中身へ追記を行いました。

例3：権限のないファイルの削除
sample2 ディレクトリ : 読込権限と書込権限と実行権限がある。
sample2/sampleA.txt : 読込権限と書込権限と実行権限がない。
この状態でファイルの削除をしようとすると…削除ができてしまうんです！

グループやその他のユーザでも同様なので、ファイル自体のパーミッションを適切に設定していても、ディレクトリのパーミッション次第でファイルの削除ができてしまいます…
例：
sample2 ディレクトリ :所有者 linuc グループ linuc
sample2/sampleA.txt : 所有者 linuc グループ linuc

適切なパーミッション管理のために、特殊なパーミッションを使用することができます。

〇特殊なパーミッション

・Sticky Bit

設定方法：パーミッション指定で1000番台を指定またはその他ユーザの権限に「t」を付与する。
例：
sample2 ディレクトリ : 読込権限と書込権限があり、実行権限にSticky Bitが設定されている。
sample2/sampleB.txt : 読込権限と書込権限と実行権限がない。
Sticky Bitを設定したディレクトリ内は、root権限ユーザまたは作成したユーザーのみが削除できる。

sudo コマンドを用いればrootユーザでなくても削除することは可能です。
sudo コマンドを使用可能かはユーザが「wheel」グループに所属しているかどうかで確認できます。「wheel」グループに所属していない場合、sudo コマンドを使用できません。

rootユーザで「wheel」グループに所属を追加

sudo コマンドでStick Bitを設定しているディレクトリ内のファイルを削除

パーミッションを設定する際はファイルやディレクトリだけでなく、ユーザのグループにも注意が必要です。

Sticky Bitを設定してあるファイル・ディレクトリを探したい場合
$find / -user root -perm -o=t -type f 2>/dev/null

その他の特殊なパーミッション
・SUID(Set User ID)
プログラムが実行されると、そのファイルの所有者の権限でユーザーが実行されるようにする。実行権限がある場合は「s」、実行権限がない場合は「S」で表記される。
設定方法：パーミッション指定で4000番台を指定またはユーザーの権限に「s」または「S」を付与する。

例：passwd コマンドファイルのSUID
passwd コマンドを用いてパスワードを設定すると /etc/shadow ファイルに変更後のパスワードを書き込みを行います。passwd コマンドを用いる場合、root権限でのみ/etc/passwd ファイルと /etc/shadow ファイルへの書き込みができます。(*ディストリビューションによってパーミッションは異なる場合があるので注意してください)

SUIDを剥奪して passwd コマンドでパスワードを設定しようとすると、/etc/passwd ファイルと /etc/shadow ファイルへの書き込み時にエラーが発生します。(rootユーザまたはsudo コマンドを用いるとエラーは発生しません)

SUIDを付与すると正常にパスワードを設定できるようになりました。

SUIDを設定してあるファイル・ディレクトリを探したい場合
$find / -user root -perm -u=s -type f 2>/dev/null

・SGID(Set Group ID)
ファイルが実行されると所有グループ権限でユーザーが実行できるようにする。
設定方法：パーミッション指定で2000番台を指定またはグループの権限に「s」を付与する。
SGIDを設定したディレクトリ内でファイルを作成すると、作成されたファイルのグループにディレクトリのグループが自動的に設定される。
例：
SGIDが設定されたディレクトリ名: sample3
SGIDが設定されたディレクトリのグループ名: yoshioka
ログインユーザ名: linuc

SGIDを設定してあるファイル・ディレクトリを探したい場合
$find / -user root -perm -g=s -type f 2>/dev/null

〇デフォルトパーミッションの設定

デフォルトパーミッションとはコマンドで明示的にパーミッションを指定せずにファイルやディレクトリを作成した際に付与されるパーミッションのことです。基本パーミッションからマスク値を引くことで設定されます。

・umask コマンド
umask コマンドでマスク値を表示・設定することができます。

基本パーミッションからマスク値を引いた値がファイルやディレクトリ作成時のデフォルトパーミッションです。

	ファイル	ディレクトリ
基本パーミッション	666(-rw-rw-rw-.)	777(drwxrwxrwx.)
マスク値	022	022
デフォルトパーミッション	644(-rw-r–r–.)	755(drwxr-xr-x.)

・デフォルトパーミッションの変更

例1：このシェルセッションでのデフォルトパーミッションを変更したい場合
umask コマンド実行する
8進数でマスク値で指定する。

シンボルでマスク値を指定する。シンボルは8進数に変換され後に各基本パーミッションから引かれます。

例2:ユーザごとにのデフォルトパーミッションを変更したい場合
変更したいユーザのホームディレクトリ/.bashrc のumask値を変更する。
変更前

変更
$vi ~/.bashrc で個人設定ファイルを開き、umask コマンドを追加して保存し、再度読み込む。

変更後
変更したユーザ(ユーザ名：linuc)のマスク値は0111に変更されているが、変更していないユーザ(ユーザ名：yoshioka)のマスク値は0022のままである。

例:3ユーザ全体のデフォルトパーミッションを変更したい場合
/etc/login.defs のumask値を変更する
変更前
$sudo vi /etc/login.defs

変更

変更後
すべてのユーザーのデフォルトパーミッションが0111に変更されている。(rootユーザのマスク値も変更になっているので使用する際は注意が必要だと思われます)

終わりに

自分がLinuxに苦手意識を持ったきっかけがこのパーミッションだったのですが、取り組んでみるとと理解できる部分が意外と増え苦手意識が少し薄れたと感じています。だれてしまわないように目標を設定して、Linuxやサーバ・インフラ関係のインプットとアウトプットを続けていきます！

3度目の基本情報技術者試験を終えて

2024年4月入社の吉岡です。今年の初めに入社して初めて案件にアサインして頂き、必死になっていたらいつの間にか春でした。右も左も分からない状態から少しずつ理解できることが増えるとやりがいを感じ、「もっと理解できることが増えたらもっと充実感を得られるだろう！」と思うようになりました。
そこで昨年度の目標であり未達成に終わってしまった基本情報技術者試験の取得に再度挑戦してきました。自分は情報処理系専門学校(夜間部)の2年次から資格取得に取り組んできましたので、2年間分の反省をしつつ基本技術者試験そのものについてと取得に向けてどのような取り組みをしてきたかについて記事にさせて頂きます。

基本情報技術者試験とは

ITを活用したサービス、製品、システム及びソフトウェアを作る人材に必要な基本的知識・技能をもち、実践的な活用能力を身に付けた者を対象とした国家試験です。基本情報技術者試験は情報処理技術者試験の試験区分のひとつであり、スキルレベル2に位置づけられています。ITの安全な利用を推進する情報セキュリティマネジメント試験(スキルレベル1)や応用的な知識・技能を測る応用技術者試験(スキルレベル3)、各分野の専門知識が問われる高度試験(スキルレベル4)があります。
下記に基本情報技術者試験の受験に関する情報をまとめておきます。

受験に必要な資格はない
比較的安価な受験料(税込7500円 2025/04/30 時点)
通年で試験を実施されている(再受験の場合は前回の受験から30日後)
試験方式は原則CBT方式(全国の試験会場を選択し会場のあるコンピュータ上で実施)
科目A試験と科目B試験を同日受験しそれぞれ60%以上の得点で合格(科目A試験免除制度*を利用する場合を除く)
試験終了後採点結果が画面に表示され、受験の翌月にIPAのウェブサイトに合格者が発表される
取得後の更新期限がない

*科目A試験免除制度はIPA（情報処理推進機構）が認定した所定のカリキュラムの受講を修了し、かつIPAが提供する修了試験に合格することで科目A試験免除になります。この制度を利用することで科目A試験と科目B試験の同日受験をせずによくなりますが、カリキュラムの受講費用および免除試験の受験費用が掛かります。

試験内容について

〇科目A試験(90分 60問)
ITに関する幅広な知識を測る試験で、テクノロジ分野とマネジメント分野とストラテジ分野から計60問が出題されます。

テクノロジ分野(約70%)
回線の使用率計算やビット計算などの基礎理論・コンピュータの仕組み・ネットワークの仕組みなどに関するITの仕組みや技術について問われます。
マネジメント分野(約10%)
プロジェクトマネージメントやサービスマネジメント、システム監査などに関するプロジェクトやサービスのPDCAサイクルについて問われます。
ストラテジ分野(約20%)
システム戦略や企業活動、法務などに関するITと企業の関わりについて問われます。

〇科目B試験(100分 20問)
アルゴリズム分野に関する問題が16問とセキュリティ分野に関する問題が4問出題されます。

アルゴリズム分野
行うデータ操作についての説明がなされそれを実現するプログラムの穴埋めまたは処理後の結果について出題されます。
セキュリティ分野
情報セキュリティの確保に関する問題が出題されます。

**2023年4月以降CBT方式となり出題された問題の公開がされなくなりました。2024年10月以降はシラバスが改訂され、情報セキュリティに関する用語(例 PCI DSSやSOC など)やビジネスインダストリに関する用語(例生成AIやハルシネーションなど)が追加され、出題範囲が広がりました。

試験対策について

〇科目A試験対策

対策テキストで内容をじっくり把握し、過去問道場で実際に出題された問題を解いて理解を深めていくやり方が効率的だと思います。
自分は最初に問題集付きの基本情報技術対策テキストを購入したのですが、学習を始めたころは説明が不足で理解するのに時間がかかり、学習を進めていくうちに内容が物足りないと感じるようになりました。説明に比重を置いている対策テキストをお勧めします。

加えて自分はITや情報処理についての知識不足ゆえに理解が進まない箇所が多くあったので、より広く浅く学ぶためITパスポートのテキストを購入して取り組みました。ITパスポートの取得をしてから再度基本情報技術者試験の対策テキストに取り組むとスムーズに内容を理解できるようになりました。基本情報の対策に取っつきにくいと感じている場合は、ITパスポートのテキストや過去問を参考にしてはどうでしょうか。

科目A試験は必要とされる知識の範囲が広いので学習しても忘れてしまう箇所が出てくると思いますが、何度も復習をすることが近道だと思います。自分はシラバスを単語帳代わりにたびたび復習を行うようになって知識が定着しやすくなったと感じました。(基本情報技術者試験（レベル2）シラバス)

〇科目B試験対策

アルゴリズム分野
いかに素早く処理をトレースできるかが鍵です。説明文で「この値を操作を行ったらこういう結果になった」と示されていればそれをアルゴリズムにあてはめ、示されていなくても自分で値を設定してアルゴリズムを追いかけるやすくなります。
科目A試験の範囲であるデータの構造(例木構造、キュー、スタックなど)やデータの操作方法(例二分探索、バブルソート、逆ポーランド記法など)の知識がないと解答時間が足りないと思います。逆にデータの構造やデータの操作方法ごとの特徴を知っていると、ほとんどトレースせずに解けてしまう問題もありました。
セキュリティ分野
「こういうシステム体制の企業があり、どのようなセキュリティ対策がとれるか」のような出題のされ方が多く、科目A試験の知識があれば解答できる問題です。
説明の文章は長めなので、先に問題文と選択肢を確認してから説明文を読むとキーになる箇所が確認しやすいと思います。また完全に自分の好みなのですが、セキュリティの問題を解いてからアルゴリズムの問題に解く方が心理的に楽でした。

自分の試験結果

1回目(入社前) 科目A:620点/科目B:410点/結果:不合格
2回目(昨年度) 科目A:550点/科目B:715点/結果:不合格
3回目(今年度) 科目A:810点/科目B:685点/結果:5月中旬結果公開

実際どのくらい実務に役立つか？

基本情報技術者試験の資格が直接実務の役立つ機会は少ないと思います。独占業務がなく取得者も多く実務にあたってより専門的な知識・技能を身に着ける必要があるからです。
資格取得そのものが目的というよりも、プログラマ・エンジニアとしての成長を加速させてくれる土台作りのために資格取得を目指すことは無駄でないと思います。実際に案件にアサインされるようになって「大まかに仕組みや流れがイメージできる！」「この部分が問題なのは…ここら辺がネックになっているのかな？」というような機会がありましたし、少なくとも根気強さは身につきました。

おわりに

ITや情報処理に触れはじめて3年が経ちました。何度も挫折をしつつ、いろいろな方の手助けしていただき励ましていただき何とかやっていけています。体力と単純記憶力があるうちに、応用的な試験やインフラに関するような知識・技能・資格を身に着けてより充実した日々を送っていきます！

2025年新入社員ブログ高田06 [MySQLバックアップ・リストア方法まとめ]

こんにちは、2024年4月に入社した高田です。
入社してから数ヶ月が経ち、社内研修を終えて、少しずつ実際の業務に携わるようになりました。最近は、実務の単体試験の一環としてMySQLのデータベース操作を行う機会があり、その中でデータベースおよびテーブルのバックアップとリストアを行いました。
今回は、MySQLのバックアップ・リストア方法について、手順やポイントを説明します。

MySQLのバックアップ方法

1. 単一のデータベースをバックアップ

以下のコマンドを使用すると、特定のデータベース全体をバックアップできます。
なお、「-h ホスト名」は、リモートサーバーに接続する場合に指定します。ホスト名が「localhost」の場合は、-h localhost を省略してもデフォルトで「localhost」に接続されます。

mysqldump -h ホスト名 -u ユーザー名 -p データベース名 > 出力ファイル名.sql

1	mysqldump -h ホスト名 -u ユーザー名 -p データベース名 > 出力ファイル名.sql

2. 特定のテーブルをバックアップ

特定のデータベース内の一部のテーブルのみをバックアップしたい場合は、以下のコマンドを使用します。

mysqldump -h ホスト名 -u ユーザー名 -p データベース名 テーブル名1 テーブル名2 > 出力ファイル名.sql

1	mysqldump -h ホスト名 -u ユーザー名 -p データベース名テーブル名1 テーブル名2 > 出力ファイル名.sql

MySQLのリストア方法

バックアップファイルから特定のデータベースにデータをリストアする場合、バックアップファイルが単一のデータベース全体であっても、複数のテーブルを含む場合であっても、以下のコマンドでリストアできます。「-h ホスト名」については、バックアップ時と同様です。ホスト名が「localhost」の場合は、省略してもデフォルトで「localhost」に接続されます。

mysql -h ホスト名 -u ユーザー名 -p データベース名 < 入力ファイル名.sql

1	mysql -h ホスト名 -u ユーザー名 -p データベース名 < 入力ファイル名.sql

実例

社内研修で使用した「laravelDB」というデータベースを使ってデータベースおよびテーブルのバックアップとリストアを実施します。
「laravelDB」データベースは「users」テーブルと「prefectures」テーブルの2つのテーブルを含んでいます。

データベースのバックアップ・リストア手順

1. データベースのバックアップ

mysqldump -u root -p laravelDB > /tmp/laravelDB.sql

1	mysqldump -u root -p laravelDB > /tmp/laravelDB.sql

2. リストア用のデータベース作成

# MySQLに接続
mysql -u root -p

# データベース作成
CREATE DATABASE laravelDB_restore;

# MySQLに接続

mysql -u root -p

# データベース作成

CREATE DATABASE laravelDB_restore;

3. データベースのリストア

mysql -u root -p laravelDB_restore < /tmp/laravelDB.sql

1	mysql -u root -p laravelDB_restore < /tmp/laravelDB.sql

以上の3ステップを実行すると、「laravelDB」データベースのバックアップデータを使用して、「laravelDB_restore」データベースに復元できます。復元後のデータベースには、バックアップ時点のデータやテーブル構造が再現されていることを確認できます。

テーブルのバックアップ・リストア手順

1. テーブルのバックアップ

mysqldump -u root -p laravelDB users prefectures > /tmp/laravelDB_tables.sql

1	mysqldump -u root -p laravelDB users prefectures > /tmp/laravelDB_tables.sql

2. リストア用のデータベース作成

# MySQLに接続
mysql -u root -p

# データベース作成
CREATE DATABASE laravelDB_restore_tables;

# MySQLに接続

mysql -u root -p

# データベース作成

CREATE DATABASE laravelDB_restore_tables;

3. テーブルのリストア

mysql -u root -p laravelDB_restore_tables < /tmp/laravelDB_tables.sql

1	mysql -u root -p laravelDB_restore_tables < /tmp/laravelDB_tables.sql

以上の3ステップを実行すると、「users」テーブルと「prefectures」テーブルのバックアップデータを作成し、新しく作成した「laravelDB_restore_tables」データベースに復元できます。データベース全体ではなく、特定のテーブルのみを対象としてバックアップ・リストアを行うため、復元後のデータベースにはバックアップしたテーブルのみが含まれ、それ以外のテーブルは存在しません。

まとめ

今回は、MySQLの基本的なバックアップおよびリストア手順について学びました。研修では、SELECT文、UPDATE文、DELETE文、CREATE文の使用方法を中心に学習しましたが、バックアップやリストアもコマンドを使用することで手軽に実行できると知りました。
本番環境のデータを扱う際には、事前にバックアップを取得し、万が一のトラブル時にも迅速にデータをリストアできるよう備えておくことが重要だと思いますので、今回学習した知識や技術をしっかりと整理し、必要なときに迅速に活用できるようにしていきたいと思います。

2025年新入社員ブログ高田05 [ローカル環境構築の利点と感想]

こんにちは、2024年4月に入社した高田です。
社内研修で Laravel を使用して会員登録フォームを作成しました。その際、ローカル環境は Docker を用いましたが、別の方法でも環境構築を試してみたかったため、Vagrant を使って同じ構成のローカル環境を構築しました。
今回は、ローカル環境構築における利点と、DockerやVagrantを学んだ感想について紹介したいと思います。

ローカル環境構築の利点

1. プログラムの動作確認が手軽に行える

Laravel を使って開発を進めるには、PHP や Web サーバー（Apache など）が動作する環境が必要ですが、一般的なWindows PCにはPHP や Web サーバーはインストールされていません。作成したプログラムを動かすには別途Webサーバーを用意し、Webサーバーにプログラムファイルをアップロードする必要があります。
しかし、Webサーバー用のPCを新たに用意するのは場所や費用の問題もあるので難しい場合があります。このような課題は、ローカル環境を導入することで解決できます。
ローカル環境を導入すると、自分のPC がサーバーとして動作するような状態となるため、新たにWebサーバー用のPCを用意する必要がありません。
また、同一PC内でWebサーバーが動作する形となるため、設定次第でWebサーバーにプログラムファイルをアップロードする手間を省くことができます。
ローカル環境を導入することにより、修正や確認のサイクルが短縮され、プログラム開発効率が大幅に向上します。

2. ローカル環境構築を通じたインストールと設定の習得

ローカル環境を構築する過程で、以下のようなWebアプリケーションを動かすための各種ソフトウェアについて、インストール方法や設定方法を学ぶことができました。
・PHP
・Web サーバー（Apache）
・データベース
具体的には、PHP を Web サーバーと連携させる仕組みや、MySQL などのデータベースとアプリケーションを接続する方法を学びました。コマンドでインストールを行うため、コマンドの使用方法についても復習出来ました。

3. 実務での開発安定化

ローカル環境を持たず、1つの開発サーバー上のファイルを複数人で直接編集すると、以下のようなトラブルが発生することがあります。
・他人が編集していることに気付かずにファイルを上書きしてしまう可能性がある
・誰がどの変更を加えたのか把握しにくくなる
ローカル環境を構築することで、上記のようなトラブルを防ぐことができます。結果として、安定した開発が可能になります。

Docker・Vagrant を学んだ感想

1. Linux、ネットワークの知識が必須

Docker や Vagrant を学ぶ上で、Linux やネットワークに関する基礎知識は不可欠だと感じました。基礎知識があることで、環境構築の全体像を把握しやすくなり、作業を効率的に進められます。さらに、エラーが発生した際や情報を検索する際も、技術記事の内容をスムーズに理解できるようになります。
一方で、Linux やネットワークの知識が不足していると、設定やエラー対応に時間がかかり、調べた情報を十分に活用できず、環境構築が思うように進まないことがあります。

2. 初心者が使用する場合はVagrantの方が簡単

Vagrantを使った環境構築は、手順がシンプルで初心者でも取り組みやすいと感じました。特に、Vagrantfileの記述だけで仮想マシンを構築できる点が大きな利点です。
仮想環境を使う場合、ホストOS（自分のPC）と仮想環境（VagrantやDockerなど）の間でファイルを共有するための仕組みとして「マウント」があります。マウントを設定すると、ホスト側で編集したファイルが仮想環境内にも反映されるため、設定が重要です。
ただし、Vagrantでマウントを設定する際、意図したとおりに機能しないことが多く、調べながら試行錯誤する必要がありました。初心者にとっては設定の難しさがハードルになりやすいと感じました。
Dockerを使用する場合、Dockerfileに加えて複数のコンテナを管理するためのdocker-compose.ymlファイルも必要になります。コンテナの仕組みや設定ファイルの記述方法を理解する必要があり、環境構築の経験が少ない初心者にとっては難易度が高いと感じました。
環境構築のしやすさを考えると、Vagrantの方が初心者には導入しやすく、理解しやすいと感じました。

まとめ

今回は、ローカル環境構築の利点と、DockerやVagrantを学んで感じたことを紹介しました。社内研修用に作成したローカル環境ですが、今後は実務でも新たにローカル環境を構築する機会が増えると考えています。
実務では、単にローカル環境を構築するだけでなく、メンバー間での手順やローカル環境ファイルの共有方法、複数人で進める際の利点にも注目しながら活用していきたいと考えています。

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 日本)

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では、認証機能やセッション管理に便利な仕組みが既に用意されており、活用することでより効率的かつ安全なログイン/ログアウト機能を実装できるようなので、実装方法をしっかり学習したいと思います。将来的に、ユーザーに安心して使ってもらえるシステム構築ができるよう引き続き学習していきます。

2025年5月
月	火	水	木	金	土	日
			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	31