PHP phar拡張モジュールの素敵な仕様

久しぶりにやってくれたPHP。
気づかず同じところに引っかかる人が出ると思ったので書いておきます。

今回PHPで.tar.gz圧縮/解凍を実装することになりまして、
phar拡張モジュールが対応しているということなので、素直にこれで実装したところ動作確認中にエラーが発生しました。

再現のための最小コードがこちらになります。

PharDataは内部でファイルパスをキーとして静的な領域にデータをキャッシュする実装になっているようで、上記のように同じファイルパスだと、複数PharDataを作成しても同じデータを指すことになり、2回目のcompressを実行しようとしたタイミングで「それはもう有るよエラー」ということです。

逆に以下のようなコードで1つのファイルを複数のPharDataで操作出来ます(意味は無い)

この現象については報告されていたのですが、ソースとかディスカッションを見るに
意図して実装されており、良い悪いは別として仕様な気がします。

https://bugs.php.net/bug.php?id=75101

1処理中に同じファイルパスで複数回ファイルを作り直すみたいなのはレアケースだと思うので遭遇する確率は低いと思いますが、記憶の片隅に留めておくとよいと思います。

Laravel Sailで記事投稿フォームを作成してみた

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

前回はLinuxについて書きましたが、今回は少し前に学習していたLaravel Sailについてまとめました。

●Laravel Sailとは
Dockerを使った開発環境であり、ターミナルでコマンド実行するだけで、DockerでLaravel環境を一発で作ってくれる便利なコマンドラインツールです。
Laravel Sailを使うメリットは次の通りです。

・開発に最低限必要なツールを一度にインストールでき、インストールの手間を省ける
・本番環境と同じ環境を手元に用意して、動作を確認できる
・PHPのバージョンが異なる複数のプロジェクトの管理が楽にできる
(Laravel 8.x からLaravel Sailは標準でインストールされています。)

●なぜLaravel Sailを使っているのか?
Laravelの学習するときに使用していた技術書がLaravel Sailでの環境構築、実装方法を紹介しているのを見て、docker環境との連携も取りやすいと思ったため、復習を兼ねてSailの紹介をやってみようと思いました。


使用したテキスト:『Laravelの教科書』

Laravel Sailのセットアップ及びLaravelトップ画面の表示
1.Docker Desktopをインストール
Dockerのインストールです。Dockerの公式サイトからDocker Desktop のインストーラーをダウンロードします。

2.Laravel Sailをインストールするディレクトリを予め作成しておきます。
今回はtest-projectフォルダを作成しました。

3.Laravel Sailのインストール
Ubuntuまたはターミナルで、次のコマンドを実行します。(今回はUbuntuを使用)

4.途中でパスワードが求められたらPCのパスワードを入力。

5.下記メッセージが出たらインストール完了です。

6.「test-project」ディレクトリへ移動します。

7.Dockerコンテナを起動します。

これによりLaravel Sailが使用する複数のDockerコンテナが起動します。
起動したコンテナについて、Docker Desktopのウィンドウで確認してみましょう。

※./vendor/bin/sail コマンドを毎回入力するのは大変です。
これを「sail」だけで使えるようにするため、エイリアス登録を行います。

以降は sail コマンドとして記載していきます。

8.マイグレーションコマンドを実行して、初期テーブルを作成する。

9.ブラウザで「http://localhost/」 へアクセスするとLaravelのスタート画面が表示されます。※Ubuntuまたはターミナルを開いたまま、ブラウザでアクセスしてください。

今回は、Laravelの復習として過去に作成したフォームの一部を紹介したいと思います。
『件名』『本文』にテキストエリアがあり、フォームの下に『送信する』ボタンがあるフォームを作成していきます。

1.モデルとマイグレーションファイルを作成
まずは、モデルとマイグレーションファイルを作ります。下記コマンドを実行して、Postモデルとマイグレーションファイルを作ります。

このコマンドを実行すると、database/migrations 配下と app/Modelsにファイルが作成されます。次にdatabase/migrations 配下に作成されたマイグレーションファイルに、postsテーブルを作成するためのtitleカラムとbodyカラムを設定します。

./database/migrations/(年)_()_(日)_(時刻)_create_posts_table.php

マイグレート実行し、データベースにpostsテーブルを作成

2.ビューファイルの作成
次にビューファイルを作ります。resources/viewsの中にpostフォルダを作り、その中に create.blade.phpファイルを作ります。create.blade.phpファイルの中には以下のコードを追加します。

create.blade.php

3.ビューファイル表示用コードを追加
次にコントローラです。下記コマンドを実行して、PostControllerを作成。

コマンド実行後、app/Http/Controllerの中のPostController.phpを開きます。先ほど作成した resources/views/post/create.blade.phpファイルを表示するためと投稿データ保存のために、下記のように記述します。

PostController.php

4.ルーティングの設定(ビューファイル表示用のルート設定)を追加
ルート設定の作成です。routes/web.phpの中に、下記のuse宣言とフォーム表示用のルート設定と投稿データ保存用のルート設定を加えます。これにより今回作成したフォームがブラウザに表示されます。

web.php

これまで記述したコードによって、次の流れが実現します。

  1. ユーザーがログイン後にhttp://localhost/postにアクセスする
  2. ルート設定により、PostControllerのcreateメソッドに処理が割り振られる
  3. 処理が実行され、resources/views/post/create.blade.phpの内容がブラウザに表示される

    実際に作成したもの

4.件名(title)と本文(body)を入力し『送信する』ボタンを押すことで、PostControllerにフォーム(http://localhost/post)を通じて値が送信される
5.ルート設定により、PostControllerのstoreメソッドに処理が割り振られる
6.処理が実行され、件名が$request->titleに、本文が$request->body にそれぞれ入っているため、Post::create() に渡してやることでpostsレコードの対応するフィールドに値がセットされる
7.returu back()によっての元ページに戻る

いかがでしょうか。

今回は振り返る形でLaravel Sailのことを書きました。
今後も学んだことを忘れないようにLaravelやLinux、業務で行った作業なども復習する形でブログ更新していきたいと思います。

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

今年度を振り返って… 紙屋06

お疲れ様です!
’23年度入社の紙屋です!

まだ寒い日も続きますね。
私は2月の一時期暖かくなった時から花粉症が出てきました…
今年の花粉症は目がとても痒いです……(泣)
薬の眠たさと闘いつつ、目の痒みとも闘いつつ、日々仕事に取り組んでいます!
早く気候も落ち着いてほしいです!

気づけばもう3月になりましたね。
先日の社内技術者定例会では新年度に向け、新入社員への対応の話も出ていました。
まだまだ新入社員でいたい気持ちもありますが、今年度を振り返って来年度に備えようと思います。


2023年4月は全くこの業界を知らないで入社しました。
入社当初は外部研修に参加させていただき、MySQL、PHP、Laravelを中心に学びました。プログラミングをやってみたい気持ちはありましたが、知れば知るほど難しく、私の固い頭では理解が追い付きませんでした。研修中は「なんで?」が多く、講師の先生へ質問を多く投げていました。今思えば、自分でも調べて質問すればよかったのですが、自分の癖もありよく調べもせずにすぐに人に聞いてしまっていました。嫌な顔をせずなんでも答えてくださった講師の先生にはとても感謝しています。

外部研修を終えて会社に戻ってからは、参考書で勉強し、課題に取り組みました。参考書はSQLドリル、PHP独習、LinuCを一通り勉強しました。研修でも触れたSQLやPHPは前向きに取り組めましたが、案件の前準備として勉強したLinuCはとても苦手意識が強かったです。ですが、案件に入った今ではよく見直してコマンドにはお世話になっています!

10月あたりからOJTでご指導いただきながら実際の案件に入りました。最初は資料の確認からでしたが、少しずつ実際のシステムの保守にも携わらさせていただきました。外部研修から社内での課題は会員登録システムを難易度をあげて取り組むものでしたが、実際の案件は扱うテーブル数もコードもとても多く、フレームワークも違って難易度がぐーんと上がりました。そこで一度「自分には無理かも…」と思ってしまい、苦手意識が生まれてしまいました。分からない点は質問すると答えてくださいますが、自分の聞きたいことがまとまらず、うまくニュアンスも伝えられず、モヤモヤすることも多かったです。

このままではいけないと、取り組む姿勢を見直しました。
それは、
① 質問する前には必ず調べ、自分の考えをしっかりと整理すること
② 活用できるメモをとること
③ アウトプットすること

です。

まずは質問する前には必ず調べ、自分の考えをしっかりと整理することですが、調べないと方向性の違う質問をしてしまったり、返答いただいてもその内容を理解できないことが多かったりしたからです。よくネット検索を活用しますが、調べたいことにたどり着けなかったり、とても時間がかかったりしてしまい、自分の考えを整理するまでに時間を要すので、これはまだまだ取り組みが必要です。

次に、しっかりとメモをすることです。教えていただく中で「前にも伝えたと思いますが」という言葉を耳にします。メモを取ることは新人にとっては当たり前ですが、メモしてもそれを活かせないのであればメモの意味がありません。私はメモを取るときは、必ず日付を書くこと、チケット番号など見出しや題名をつけること、メモの書く場所を注意する、内容によって社内業務なのか、案件のものか、期限付きのものなのかを意識して場所も分けるように書いています。todoリストのように□の枠を書いて目立つようにしたり、レビュー中(画面共有中)はコードの中にコメントとして入力し、指導者へもメモ内容が見えるように意識しています。電子媒体でメモを取りたいなとは思っていますが、まだまだアナログな私は紙媒体でのメモが主流です。技術面で新しいことを教えていただいた時には紙媒体でのメモは後で見返してもよく整理ができないので、教えていただいた後すぐに自分なりの手順書を作っていつでも見返すことができるようにしています。

あとは、アウトプットをすることです。このブログもそのひとつですが、小さな取り組みとしては、なるべく声に出すようにしています。1対1のLINE上のやりとりももちろんあるのですが、文章ではニュアンスも伝えにくく、文章ではうまく伝えられなかったが、通話でやり取りするとそこまで考えが乖離していなかったということが時々ありました。これはこれで文章力を鍛える必要がありますが…(汗)。また朝礼や終礼での報告時も集団の中であえて質問など声にだすことで、自分の考えを知ってもらえれば、その考えがどうなのかを確かめられたり、それを繰り返すことによって自信につながったりすると思っているからです。今はレビューいただいたときは必ず結果の要約や次回までにすべきことを自分の言葉で繰り返して指導者へ伝えるように努力しています。

他にも意識して取り組むべきことはあると思いますが、とりあえずはこれらを意識しています。まだまだ学習やプログラミングに触れる機会を増やす必要があると思っています。
来年度は実際にコードをかくことはもちろんですが、
① 基本情報技術者試験に挑戦!(ITパスポートは無事合格しました!)
② PHPカンファレンスなどの勉強会にも参加する!(2023年度のPHPカンファレンスは近所で開催されていたのに情報収集が足りずに開催直後に気づきました…)
③ 通勤中の時間を使って、ポットキャストで初心者向けのプログラミング番組を聞く!(現在継続チャレンジ中で習慣化へ!)
と思っています!

このブログも使ってこれからの成長した姿もお伝えできればと思います!
今年度の残りも、来年度からもまだ頑張りますので、応援、ご指導よろしくお願いいたします!
では!!

新入社員ブログ 松井(第5回)

こんにちは。松井です。もうすぐ2月になりまだまだ寒い時期が続きますね。

今回はOJTについて紹介します!内部研修が終わって、8月からOJTに参加しています。OJTということで、案件に参加していますが、私の場合は基本設計から参加しました。難しい作業を割り振られることはありませんが、とにかく仕事に慣れることに苦労しました。1月末までどんなことをやってきたか、簡単になりますが紹介します!

基本設計・詳細設計

お客様との打ち合わせや社内会議を聞いてメモを取ったり、画面設計書を見ていました。また、先輩社員がテーブル定義の物理カラム名の名前をつけていました。画面設計書やテーブル定義について「おかしい!」と思ったところは迷わず先輩社員に質問していきました。例を2つ挙げると画面設計書に書いてあることがテーブル定義に書かれていないといった資料での漏れとテーブル定義には必須扱いになっているにもかかわらず画面設計書では必須ではないといった資料間による矛盾です。冷静に資料を見比べることで漏れや矛盾が無いかチェックをしていましたので、該当する部分が資料内にあるか探すのが大変でした。しかし、設計段階で漏れや矛盾を減らしたということにおいてはやりがいを感じられました!

API仕様書・詳細設計書作成

簡単な処理のAPI仕様書・詳細設計書を作成しました。最初はやり方が分からず簡単そうな画面を先輩社員に教えてもらいながら一通り作成しました。最初は簡単な仕様の詳細設計書を書きましたが、やり方が分からず先輩社員が作成した詳細設計書を参考に書くようにしました。ある程度詳細設計書を書いたら「内容は違っても他の詳細設計書にも同じことを書ける」ということを意識するようにしました。その際に自分たちが作った設計書をもとに実装されるので、「仕様が違う」ということが無いように気を付けるようにしました。

API実装・テスト

今は作成したAPI仕様書や詳細設計書を元にAPIを実装しつつ、テストして想定した挙動になっているか確認しています。研修で学んだLaravelで実装しておりますが、実際に仕事として使うのは始めてでプログラムの書き方に戸惑うことがあります。しかし公式ドキュメントやQiita等で使い方を調べて出来る限り自力でプログラムを組めるように努力しています!

今回はここまでです。次回はフォローアップ研修について紹介します。最後まで読んで頂きありがとうございます!

SQLの不思議… 紙屋05

’23年度入社の紙屋です!
2024年もよろしくお願いいたします。

新年一発目の投稿です。
無事に新年を迎えることができました!
昨年は少し実際の案件にも携わらせていただきました。少しずつできることも増えてきたことはうれしいです!
2024年もできることを着実に増やしながら成長したいと思います!

今回はその案件の中であるデータの差分の調査を行っているときに不思議に思ったことを検証してみようと思います。
それはSQLである一定の期間のデータを抽出しようとしたときに、何気なく使っていたある演算子で躓きました。最初は気づかなかったのですが、調査結果のデータ数がおかしいことの指摘もあり気づきました。
それは『BETWEEN』の使い方です!

—————————————-
式 BETWEEN 値1 AND 値2
—————————————-
BETWEEN演算子では、値が「値1以上かつ値2以下」の場合に真になる

と参考書ではあります。
私は1か月分のデータを抽出したかったので、

というSQL文を作成し抽出しました。
特に疑問に思うこともなく作業を続け、他で分からないところがあったので、質問したときに、指導者とのSQL文の違いに気づきました。

「ん?演算子ちがうけど、まぁいっか、同じことだし…」
「でも、結果も違うんだよなぁ…、どうしてだろう?」
と思ったことで調べるとどうやらデータ型がdatetime型であることも関係しているらしいということが分かりました。
そこでダミーデータを作って検証してみることにしました。

今回、ダミーデータはLaravelのマイグレーションとシーダーを利用して’2023/11/01 00:00:00’から’2023/12/31 23:59:59’までのデータを100件作成しました。
そして、同じ条件式で行数をカウントしました。

この条件式の結果は、条件式1は50件、条件式2は56件と件数の差が出ました。
ちなみに、抽出条件の範囲を変えると、条件式3は53件、条件式4は3件でした。
抽出する条件のデータ型がdatetime型だったので、範囲指定には注意が必要そうです。

ちなみにdate型でもデータ数のカウントを行いましたが、時間が無い分、選ぶ演算子での差はみられませんでした。
今回の始まりは演算子の疑問で始まりました。
BETWEENを使う際は抽出される範囲とデータ型を十分に理解したうえで使う必要があります。
私みたいな初学者や不慣れな方は、データの範囲を指定して抽出する場合はまず比較演算子を利用する方が良いということを覚えておきましょう!

今回は文献を調べるだけでなく、自分でも実際のデータを使って結果の違いを理解できたので、引き続き今回のように検証しながら自分の理解を深めたいと思います。

では、また次回!!

ヘルパー関数のあれこれ!紙屋03

おつかれさまです!
‘23年度入社の紙屋です!
9月に入って朝晩の暑さがすこーーしずつ和らいでいたような気がしますね。早く日中の暑さも和らいでいくといいですね。

8月で課題の会員登録のアプリケーションを作り終えました。
外部研修でもLaravelでwebアプリケーションをつくりましたが、そのときはとりあえずの実装を優先して、「この関数がどんな仕事をしているのか、どんな機能があるのか」ということを考えていませんでした。
そこで、今回はLaravelにおけるヘルパ関数に焦点をあてて振り返ろうと思います!

ヘルパ関数とは?
Laravelに搭載されている独自の関数のことで、いろいろなところで呼び出せる便利な関数です。

Laravelの公式ドキュメントをみえると数えただけで213個ありました(今回Laravel ver9で実装)。
まだまだ分からないことが多いので、今回は使ったものに触れながら振り返ります!
今回の会員登録フォームで使用したヘルパ関数は、
・view ・redirect ・route ・request ・session
・old ・dd ・dump ・config
でした。
Contollerや入力フォーム、処理の確認で使うものが多く、外部研修でも使っていたので、コードレビューいただく前から使っていました。しかし、config関数は教えていただいてからの導入でした。

よくアドバイスいただく内容として、同じコードで内容量が多く、その処理を複数個所で使用する場合は、可読性や再利用性を考えてコーディングした方が良いと教えていただきます。
今回config関数をどこに用いたかというと、formタグで会員情報の登録や編集を行う箇所でバリデーションを実装するときに、バリデーションの中身は同じものなので、バリデーション時にコードが冗長にならないように利用しました。

まずは、config関数の公式ドキュメントを確認します。
config関数は設定変数の値を取得します。設定値はファイル名とアクセスしたいオプションを「ドット」記法で指定します。
とあります。

となっており、「/config/(.phpファイル)」内に記述されている配列を呼び出します。
では、私はどのように実装したかというと、
Controller内には以下のように記述し、

「/config/mySetting.php」ファイル内に

と記述しました(教えてもらいながらですが…)。

これでバリデーションチェック時の項目をController内に何度も記述する必要が無く、バリデーション内容の変更・修正時も配列の中身を記述することでスッキリします。

ちなみに、ヘルパ関数がどんな処理をしているのかは、「/vender/laravel/framwork/src/illuminate/Foudation/helpers.php」ファイル内に記述してありました。

確かに配列があればキーを返してくれているみたいです。

ちなみに、今回使用した「ドット記法」についてちょっと触れると、配列からの値の取得時にキーを「.」でつなげることで、多次元配列の場合、より深い階層へネストし値を取得してくれます。
例えば、Arr:get()関数の公式ドキュメントを参照すると、

となっています。$arrayのような多次元配列から値を取得したい場合は、第2引数のキーの部分をドット記法で、欲しい値までネストしていきます。
ちなみにArr::get()関数に第3引数をセットすると、第2引数に指定したキーが存在しない場合の値を返してくれます。

改めて振り返ってみると、「なるほど!」と思いました!
今後も、いろいろと忘れないようにまとめていきたいと思います。
では、また次回!!


パスワードはハッシュ化する!!紙屋02

こんにちは!
’23年度入社の紙屋です!
日に日に暑さが増すなか、台風もやってきて大変ですね。
私は出身が鹿児島県なので台風には慣れっこです。
学生のうちは台風が来ると「学校が休みになるんじゃないか」とそわそわしていましたが、社会人になると「台風きたら出勤どうしよう…」と不安でそわそわしてしまいます(笑)

現在は、課題として会員登録フォームをPHPでの実装、その後フレームワークを使った実装がひと段落終えたところです。調べながら、分からないところが教えていただきながらの実装だったので、ちょっとずつまとめをしていこうと思います。

まずはとりあえず機能の実装を!と考え、新規登録フォーム、検索機能、編集・削除機能を実装しました。その中でセキュリティ対策への考えはまだまだ足りず、データベースへ登録する際に、エスケープ処理を行わなければならないことは覚えていましたが、パスワードに対しては何も処理をしていませんでした。
レビューいただいた際に、「え・・ハッシュ化って?」「まだ処理がいるの?」と混乱しました…。なので、今回はハッシュ化について調べてみました。

今回、PHPプログラミングで実装した内容は、

です。
最初は直観的に

をそのままDBに登録していました。

レビューいただいた際に、このままでは、DBを攻撃された場合、個人情報が盗まれてしまう危険性があると教えていただきました。

確かに!ログイン情報を盗まれてしまったらなりすましなんて簡単にできますね。

password_hash関数をマニュアルで調べてみると、


◦$passwordには登録するパスワードの値が入って、
◦$algoにはハッシュ化に使用するパスワードアルゴリズム定数が入って、
◦$optionsには各アルゴリズムがサポートするオプションが入る
とのこと!

アルゴリズム定数のPASSWORD_BCRYPTを使うと
◦”$2y$” crypt フォーマットを使ったハッシュになる
◦長さは常に 60 文字
◦オプションのcostは省略時はデフォルトの10が入り、ハードウェアの性能が許容できるなら高くも設定可

とのことでした。
上記のpassword_hash()関数で登録しなおすことで、

ちゃんとハッシュ化されていました。
これで一安心です!

知らないことが多くて調べて、コーディングして、エラーと闘う日々です。
今後も、いろいろと忘れないようにまとめていきたいと思います。
では、また次回!!

WordPressのデフォルトアバターが表示されない(404エラーになる)問題

WordPressでデフォルトのアバターを表示させると、以下のようなGravatarのURLを生成します。

https://secure.gravatar.com/avatar/?s=60&d=mm&r=g

このURLが2023年8月9日現在404エラーとなっています。

次のようにパラメータの順番を変更すると正常に表示されます。

https://secure.gravatar.com/avatar/?s=60&r=g&d=mm

さすがにこれが仕様ということは無いと思うので、何かしら不具合が発生していると思われます。

Gravatarにお知らせしたいのですが、不具合を報告したり、お問い合わせするようなフォームが見つけられなかったので諦めました。

Gravatarの中の人ー!見てたら直してくれー!

Workaroundとしては、WordPressが生成するURLのパラメータを並べ替えることが考えられます。

以下のようにURLの生成箇所に用意されているフィルターでパラメータを並べ替えればよいでしょう。

Gravatarが修正されるまでの一時的な物なのでプラグイン化するほどではないかなと思います。

お使いのテーマのfunctions.phpに入れればよいのではないでしょうか。

新入社員ブログ 中島06『chatGPTでカレンダーアプリを作ってみた』 

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

今回は、最近流行りのChatGPTを使ってプログラムをやってみました。
それを簡単にまとめましたので、紹介したいと思います。

ChatGPTとは?
ChatGPTは、高度なAI技術によって、人間のように自然な会話ができ、無料で利用できるAIチャットサービスです。2022年11月に公開されてから、多種多様な質問に対する返答が面白いとSNSなどでバズっています。

実際に使ってみた
プログラムについてもできると聞いたので、簡単なプログラムが作れるのか実際に使ってみました。
仕様としては
・『ブラウザ上で見られるスプリクトで、
 カレンダーの日にちをタッチすると赤色になるプログラムを作ってください』
と入力しました。

出てきたプログラムがこちらです

<!DOCTYPE html> <html> <head> <meta charset=”UTF-8″> <title>Calendar</title> <style> /* カレンダーのセルをスタイル付け */ td { padding: 10px; border: 1px solid black; text-align: center; cursor: pointer; } /* 赤い背景色を追加 */ .selected { background-color: red; } </style> </head> <body> <table> <thead> <tr> <th colspan=”7″>March 2023</th> </tr> <tr> <th>Sun</th> <th>Mon</th> <th>Tue</th> <th>Wed</th> <th>Thu</th> <th>Fri</th> <th>Sat</th> </tr> </thead> <tbody> <tr> <td></td> <td></td> <td></td> <td></td> <td>1</td> <td>2</td> <td>3</td> </tr> <tr> <td>4</td> <td>5</td> <td>6</td> <td>7</td> <td>8</td> <td>9</td> <td>10</td> </tr> <tr> <td>11</td> <td>12</td> <td>13</td> <td>14</td> <td>15</td> <td>16</td> <td>17</td> </tr> <tr> <td>18</td> <td>19</td> <td>20</td> <td>21</td> <td>22</td> <td>23</td> <td>24</td> </tr> <tr> <td>25</td> <td>26</td> <td>27</td> <td>28</td> <td>29</td> <td>30</td> <td>31</td> </tr> </tbody> </table> <script> // カレンダーのすべての日付セルを取得 const dateCells = document.querySelectorAll(‘tbody td’); // カレンダーの各日付セルにクリックイベントを追加 dateCells.forEach(cell => { cell.addEventListener(‘click’, () => { // クリックされたセルに ‘selected’ クラスを追加 cell.classList.add(‘selected’); }); }); </script> </body> </html>

それをブラウザで開くとこんな感じです。

日付をクリックしたら赤くなるカレンダー


入力通りのものができました。
ですが、これでは赤色にしてしまうと元の戻らないので、仕様を追加します。

・上記のプログラムに以下の仕様を追加してください
 『日付がクリックされるたびに 赤→青 青→白 白→赤に切り替わる』

出てきたプログラムがこちらです

<!DOCTYPE html> <html> <head> <meta charset=”UTF-8″> <title>Calendar</title> <style> /* カレンダーのセルをスタイル付け */ td { padding: 10px; border: 1px solid black; text-align: center; cursor: pointer; } /* 赤い背景色を追加 */ .red { background-color: red; } /* 青い背景色を追加 */ .blue { background-color: blue; } </style> </head> <body> <table> <thead> <tr> <th colspan=”7″>March 2023</th> </tr> <tr> <th>Sun</th> <th>Mon</th> <th>Tue</th> <th>Wed</th> <th>Thu</th> <th>Fri</th> <th>Sat</th> </tr> </thead> <tbody> <tr> <td></td> <td></td> <td></td> <td></td> <td>1</td> <td>2</td> <td>3</td> </tr> <tr> <td>4</td> <td>5</td> <td>6</td> <td>7</td> <td>8</td> <td>9</td> <td>10</td> </tr> <tr> <td>11</td> <td>12</td> <td>13</td> <td>14</td> <td>15</td> <td>16</td> <td>17</td> </tr> <tr> <td>18</td> <td>19</td> <td>20</td> <td>21</td> <td>22</td> <td>23</td> <td>24</td> </tr> <tr> <td>25</td> <td>26</td> <td>27</td> <td>28</td> <td>29</td> <td>30</td> <td>31</td> </tr> </tbody> </table> <script> // カレンダーのすべての日付セルを取得 const dateCells = document.querySelectorAll(‘tbody td’); // カレンダーの各日付セルにクリックイベントを追加 dateCells.forEach(cell => { cell.addEventListener(‘click’, () => { if (cell.classList.contains(‘red’)) { cell.classList.remove(‘red’); cell.classList.add(‘blue’); } else if (cell.classList.contains(‘blue’)) { cell.classList.remove(‘blue’); } else { cell.classList.add(‘red’); } }); }); </

それをブラウザで開くとこんな感じです。

日付をクリック色が切り替わるカレンダー

今度こそ思い通りのものができました。
このように仕様を途中から追加しても、ちゃんと入れてくれます。
このプログラムを基盤に書き換えながら別のプログラムを作れます。

まとめ
いかがでしたか?
今回は、話題となっているChatGPTを使ってみました。
私は、ここ最近わからないことがある時にChatGPTを使って聞いていますが、会社で使う際は、直接仕事の具体的な情報を入力しないように心がけます(これは先輩からもよくよく言われています)。仕事と関係なく、サンプル的なアプリを作る時は、非常に便利なのでChatGPTを使いながらプログラムを学んでいきたいと思います。

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

virtualboxでPHPの環境構築を作成してみた

皆さん、こんにちは入社2年目の鹿倉です。今回は、virtuakboxでPHPの環境構築を作成してみました。

何故:virtualboxでPHPの環境構築を構築しようと考えたのか。

 PHPを学習し始めた人々や研修を受けた人々では、PHPで環境構築する際に、xampp やmampなどのパッケージを利用してPHPを学習している人は、多いと思っています。
 しかし、私がこれまで、関わっていたプロジェクトでは、xampp やmampを使用して開発は、1度もありませんでした。では、何を使って開発しているのでしょうか。
 結論から言えば、プロジェクトによります。しかし、私の経験上、最も開発環境構築で利用したのは、virtualboxで環境構築を作成するケースが多かったです。そこで、今回はvirtualboxでPHPを環境構築を作成しようと考えました。

開発手順

事前定義:今回のPHPの環境構築では、以下の条件を元に作業を行う。また、VirtualBox,Vagrant,centOSは、インストールされた状態とする。

・VirtualBox バージョン6.1
・Vagrant バージョン2.2.18
・centOS バージョン7.8
・PHP バージョン 5.4

1.作業ディレクトリから仮想環境に接続までの手順
1-1.作業ディレクトリの作成
仮想環境に必要なディレクトリを用意する。ディレクトリは、以下の例で作成する。
[crayon-670e0dcb30606545348112  ]$ mkdir  F:\space_php[/crayon]

1-2.Vagrantfileを作成
ディレクトリを作成したらcdコマンドで移動して、vagrant initのコマンドを実行してVagrantfileを作成します。Vagrantfileとは、IP、ポートなど構築時に設定を記述する事が出来るファイルです。


[crayon-670e0dcb30614427607512  ]$ vagrant init[/crayon]

1-3.仮想環境を起動します。
以下のコマンドを実行する事で、Vagrantを起動します。

1-4.仮想環境にssh接続を
sshで接続するコマンドを実行します。ssh接続をする事で、仮想環境上で、PHPやApacheのインストールなど仮想環境上で操作を行う為にssh接続で仮想環境に接続します。



2.仮想環境でのサーバー構築
2-1.PHPとApacheのインストール
ssh接続に成功したら、いよいよ、仮想環境にPHPとApacheのインストールを行います。
以下のコマンドでインストールを実行します。

2-2.Vagrantfileの設定
Vagrantfileでネットワークの設定を行い、ローカルから仮想マシンを見られる様に、編集します。その為に一旦、ssh接続を解除します。以下のコマンドで解除出来ます。
[crayon-670e0dcb30629587247919  ]$ exit[/crayon]
Vagrantfileで以下の記載されている内容を#を外してコメントアウトします。


コメントアウト後、再起動を行い、再び,ssh接続を行います。


ssh

2-3.Apacheのファイル編集
phpを表示させる為、Apacheファイルを修正をします。
以下のコマンドでファイル内を閲覧します。


移動後、ファイル内で以下の記載されているのか確認をします。。
[crayon-670e0dcb30643913599385  ]AddType application/x-compress .Z [/crayon]
[crayon-670e0dcb3064b175645196  ]AddType application/x-gzip .gz .tgz[/crayon]
上記の2行を発見したら以下の内容に変更します。


[crayon-670e0dcb30657738218732  ]AddType application/x-httpd-php-source .phps[/crayon]
この変更をする事でApacheは拡張子がPHPのファイルをPHPプログラムとして処理を行う事が出来ます。

2-4.phpファィル作成と動作確認
これで、設定を完了しました。最後に、phpファイルを作成して、ブラウザで表示されるか動作確認を行います。以下のディレクトリに移動して、phpファイルを作成します。



test.phpは以下の内容を記載しました。

記載後、ブラウザで

でこんにちは、PHPと表示されたら成功です。

最後に

 今回の環境構築を作成してみて、構築は簡単ではないですか、作業をする事でどの様にして、ブラウザで表示されるには、どの様な条件でなければならないのか理解するいい経験でした。
 しかし、プログラマーの年数が上がるにつれて、今度は、開発環境で、何か必要なのかを見極める事が必要なのだと考えています。
 今度、Laravelの導入だったり、Chefを使った自動構築など色々調べて学習を継続する事が今度、未来の私が困った時にその経験が助けになると考えています。

それでは、また次の記事でお会いしましょう。アディオス😃