投稿日:

チャットボット構築サービス「Dialogflow」を使ってみた

チャットボットを調べる機会があったので「Dialogflow」でサービスを作ってWEBサイト上で動かすまでをまとめてみました。

１．「Dialogflow」サイトへ行き(GoogleアカウントでDialogflowを開始して)CREATE AGENTします。

２．AGENT情報を入力します。名称と言語とタイムゾーンを入力してCREATE

３．Intents画面になるのでCREATE INTENTS

４．Intentsのタイトルを入力してSAVE

５．Training phrasesとResponsesを入力してSAVE

６．右のパネルでテストしてみます。応答がありました

７．動作が確認できたのでチャットボットをWEBサイトに設置します。IntegrationsのページからDialogflow Messangerを選択します。

８．htmlに張り付けるソースコードが表示されるのでコピーします

９．適当さWEBサイト（今回は私が課題制作しているlocalhost上のWEBサイト）を用意します

１０．該当のhtmlソースにコピーしたスクリプトを貼り付けます

１１．WEB画面を開いてみます。チャットボットが現れます

１２．質問すると応答があります

以上です。

バス移動・通勤を便利にするサービスを構築している中でチャットボットを＋αの便利機能として付加させてみました。今後はIntentsを増やして対応する路線、停留所を増やす。Entity（同義語登録）を増やして音声入力に対応する。ほかサービスとの連携。など拡充していきます。

投稿日:

Laravelの不具合をサクッと解決！

Laravelを使っていると、開発中にエラーや不具合にぶつかることがあります。ここでは、よくある問題とその解決方法をわかりやすく紹介します。

1. Class “App\Http\Controllers\XxxController” not found

原因

コントローラーが見つからないときは、名前空間のミスやファイルの配置ミスが原因のことが多いです。

解決策

  • app/Http/Controllers/ にファイルがあるか確認。
  • namespace App\Http\Controllers; を追加。
  • composer dump-autoload を実行。
composer dump-autoload

2. .env の変更が反映されない

原因

.env を編集しても変更が反映されないのは、キャッシュが影響している可能性が高いです。

解決策

  • キャッシュをクリアする。
php artisan config:clear
php artisan cache:clear
  • サーバーを再起動する。
php artisan serve --port=8000

3. マイグレーションエラー (`SQLSTATE[HY000] [1045] Access denied for user`)

原因

データベースの接続情報が間違っている可能性あり。

解決策

  1.  .env  の DB_HOST ,  DB_DATABASE ,  DB_USERNAME ,  DB_PASSWORD  を確認。
  2. 変更後、以下のコマンドで設定を反映。
    1. php artisan config:clear
      php artisan migrate
  3. mysql -u ユーザー名 -p  で手動ログインし、アクセス権限をチェック。
     

4. 419 Page Expired エラー

原因

CSRFトークンが送信されていないか、セッションが切れている可能性。

解決策

  • フォームに  @csrf  を追加。
<form action="/submit" method="POST">
    @csrf
    <input type="text" name="name">
    <button type="submit">送信</button>
</form>
  • セッションをクリア。
php artisan session:clear
  •  config/session.php  の  SESSION_DRIVER  を  file  に設定。

5. Route [xxxx] not defined.

原因

指定したルートが定義されていない可能性あり。

解決策

  •  routes/web.php  や  routes/api.php  を確認。
  • ルートを適切に記述。
Route::get('/dashboard', [DashboardController::class,'index'])->name('dashboard');
  • ルートのキャッシュをクリア。
php artisan route:clear

まとめ

Laravelでよくあるエラーとその解決策を紹介しました。エラーが発生したら、

  1. .env 設定やキャッシュを確認
  2. コマンドを実行して設定を更新
  3. 公式ドキュメントもチェック

この流れで対応すれば、大体の問題は解決できます！

投稿日:

PANTONE COLOR OF THE YEAR 2025はMocha Mousse（モカムース）

PANTONEからカラーオブザイヤー2025が発表されました。
→PANTONE COLOR OF THE YEAR 2025

2025年のトレンドカラーは「PANTONE 17-1230 Mocha Mousse（モカムース）」。
その名の通り、美味しそうなチョコレート色ですね。

思慮深い贅沢さを表現しています。洗練されていて豪華でありながら、同時に気取らないクラシックなPANTONE 17-1230 Mocha Mousse は、控えめで落ち着いたブラウンのイメージから、野心的で贅沢なブラウンのイメージまで、私たちのブラウンのイメージを広げています。
まろやかなブラウンの色合いに注目しています。その色調が持つ豊かさと感覚的で心地よい暖かさは、快適さを求める気持ちや、贈ったり他の人と共有したりできるシンプルな喜びへの耽溺にまで広がります。

カラーデータ

HEX　#A47864
sRGB　164, 120, 100
LAB　54.79, 17.05, 18.56

Photoshopのカラーピッカーではこんな感じです。

PANTONE CONNECT

Mocha Mousseを元にしたカラーパレットやシェードも用意されています。
→PANTONE CONNECT（要会員登録）

投稿日:

LaravelのPipelineについて

今回はLaravelのPipelineについて調べてみました。
Laravelの公式ドキュメントには以下のように記されています。

LaravelのPipelineファサードは、一連の呼び出し可能なクラス、クロージャ、またはcallableを通して与えられた入力を
「パイプ」する便利な方法を提供し、各クラスに入力を検査または修正する機会を与え、パイプライン内の次のcallableを呼び出します

簡単にざっくり説明すると「Pipelineに何らかのデータを入れてそれに対して指定したクラスの処理をさせるもの」です。

基本となるPipelineのコードは以下の通りです。

Pipeline::send(/* 処理させたいクラスに渡すデータ */)
    ->through(/* 処理させたいクラスの配列 */)
    ->then(/* 最終処理 */);

処理させたいクラスに渡すデータ
処理させたい対象のデータです。
文字列やQuery、オブジェクトなどなんでも渡せます。

処理させたいクラスの配列
sendメソッドで渡されたデータを処理させたいクラスを以下のように配列形式で指定します。

Pipeline::send(/* 処理させたいクラスに渡すデータ */)
    ->through([
        ClassA::class,
        ClassB::class,
        ClassC::class,
    ])
    ->then(/* 最終処理 */);

ClassA → ClassB → ClassCの順番で処理が実行されます。

最終処理
thenメソッドに実装された処理は必ず実行される処理です。
実行されるタイミングはthroughメソッドの処理が完了した後です。

実装例

class Pipeline
{
    public function handle()
    {
        $string = "abcde";
        $string = Pipeline::send($string)
            ->through([
                SubStr::class,
                AddString::class,
            ])
            ->thenReturn();
        var_dump($string);
    }
}
class SubStr
{
    public function handle($string, $next)
    {
        $string = substr($string, 1, 4);
        return $next($string);
    }
}
class AddString
{
    public function handle($string, $next)
    {
        $string = $string . "123";
        return $next($string);
    }
}

このような実装をすると先にSubStrクラスで２文字目〜４文字のみ取得され、”bcde”が$stringにセットされます。
次にAddStringクラスで”bcde”の後ろに”123″が文字列結合され最終的に「bcde123」が返されます。

以上、Pipelineが何か気になり調べた結果をまとめてみました。

投稿日:

たった1行でローディングアニメーションが実装できるCSSジェネレーター

HTML1行だけで、様々なローディングアニメーションを実装できるCSSジェネレーターを紹介します。
⇒CSS Loaders

よくありそうなシンプルなものから、CSSだけで表現されているとは思えない複雑なものまで、バラエティ豊かに用意されています。

使い方はとても簡単。
HTMLはたった1行です。

<div class="loader"></div>

 
cssは対象をクリックしてコピペするだけ。

中身はこんな感じ。

.loader {
  width: 50px;
  --b: 8px;
  aspect-ratio: 1;
  border-radius: 50%;
  background: #514b82;
  -webkit-mask:
    repeating-conic-gradient(#0000 0deg,#000 1deg 70deg,#0000 71deg 90deg),
    radial-gradient(farthest-side,#0000 calc(100% - var(--b) - 1px),#000 calc(100% - var(--b)));
  -webkit-mask-composite: destination-in;
          mask-composite: intersect;
  animation: l5 1s infinite;
}
@keyframes l5 {to{transform: rotate(.5turn)}}

 
CSSなので、色を変えるのも簡単です。

投稿日:

AWSの機能について調べてみた

【AWSの機能について調べてみた】

 

 

今回は、awsって沢山のサービスを提供しているということを知ったので、一部ではありますが、機能をまとめていこうと思います。

目次
――――――――――――――――――――――――――――
1 AWSとは
2 各機能について
3 まとめ
――――――――――――――――――――――――――――

1.AWSとは
AWSとは、【Amazon Web Services】の略称で、Amazonが提供しているクラウドサービスのことです。
公式サイト→https://aws.amazon.com/jp/what-is-aws/

2.各機能について
①DirectConnect
・AWS Direct Connect は、標準のイーサネット光ファイバケーブルを介して内部ネットワークを AWS Direct Connect ロケーションにリンクします。ケーブルの一方の端はルーターに接続され、もう一方の端は AWS Direct Connect ルーターに接続されています。この接続を使用すると、パブリック AWS サービス (Amazon S3 など) または Amazon VPC への仮想インターフェイスを直接作成し、ネットワークパス内のインターネットサービスプロバイダーをバイパスできます。 AWS Direct Connect ロケーションは、関連付けられているリージョン AWS の へのアクセスを提供します。パブリックリージョンで単一の接続を使用するか、他のすべてのパブリックリージョンでパブリック AWS サービス AWS GovCloud (US) にアクセスできます。

②TransitGateway
・Transit Gateway は、仮想プライベートクラウド (VPC) とオンプレミスネットワークを相互接続するために使用できるネットワークの中継ハブです。クラウドインフラストラクチャがグローバルに拡張されるにつれて、リージョン間ピアリングはAWSグローバルインフラストラクチャ AWS データセンター間のすべてのネットワークトラフィックは、物理層で自動的に暗号化されます。

③EC2
・Amazon Elastic Compute Cloud (Amazon EC2) は、Amazon Web Services (AWS) クラウドでオンデマンドでスケーラブルなコンピューティング能力を提供します。Amazon EC2 を使用するとハードウェア コストが削減されるため、アプリケーションをより迅速に開発および展開できます。Amazon EC2 を使用すると、必要な数の仮想サーバーを起動したり、セキュリティとネットワークを構成したり、ストレージを管理したりできます。月次または年次プロセスや Web サイト トラフィックの急増など、コンピューティング負荷の高いタスクを処理するために、容量を追加 (スケールアップ) できます。使用量が減ったら、容量を再度削減 (スケールダウン) できます。

④RDS
・Amazon Relational Database Service (Amazon RDS) は、AWS クラウドでのリレーショナル データベースのセットアップ、運用、拡張を容易にする Web サービスです。業界標準のリレーショナル データベースにコスト効率に優れたサイズ変更可能な容量を提供し、一般的なデータベース管理タスクを管理します。

⑤EFS

・Amazon Elastic File System (EFS) は、サーバーレスで完全に伸縮自在なファイルストレージを提供するように設計されており、ストレージ容量とパフォーマンスをプロビジョニングまたは管理しなくても、ファイルデータの共有ができる仕組みになっています。AWS のサービスおよびオンプレミスリソースで使用でき、アプリケーションを中断することなくオンデマンドでペタバイトまで拡張できるように構築されています。

⑥CloudWatch

・Amazon CloudWatch は、Amazon Web Services (AWS) リソースと、AWS で実行されているアプリケーションをリアルタイムでモニターリングします。CloudWatch を使用してメトリクスを収集し、追跡できます。メトリクスとは、リソースやアプリケーションに関して測定できる変数です。
CloudWatch のホームページには、使用している AWS の各サービスに関するメトリクスが自動的に表示されます。さらに、カスタムダッシュボードを作成してカスタムアプリケーションのメトリクスを表示したり、選択したメトリクスのカスタムコレクションを表示したりできます。
メトリクスを監視し、しきい値を超過したときに通知を送信したり、モニターリングしているリソースを自動的に変更したりするアラームを作成できます。例えば、Amazon EC2 インスタンスの CPU 使用率およびディスク読み取り/書き込みをモニターリングし、そのデータを基に、増加する負荷を処理する追加のインスタンスを起動すべきかどうかを判断します。また、このデータを使用して、十分利用されていないインスタンスを停止することで、費用を節約することができます。
CloudWatch により、システム全体のリソース使用率、アプリケーションパフォーマンス、およびオペレーションの状態において可視性を得ることができます。

⑦Route 53
・Amazon Route 53 は、可用性と拡張性に優れたドメインネームシステム (DNS) ウェブサービスです。Route 53 を使用すると、ドメイン登録、DNS ルーティング、ヘルスチェックの 3 つの主要な機能を任意の組み合わせで実行できます。

⑧WAF
・WAF（Web アプリケーションファイアウォール）とは、Web アプリケーションの通信をフィルター、監視、ブロックするためのソフトウェアまたは、ハードウェアのセキュリティ対策です。一般のファイアウォールや IDS/IPS との違いは、アプリケーションレベルで通信の中身を解析し、特定の条件にマッチする通信を検知・遮断する点です。WAF の代表的な用途には、SQL インジェクション、クロスサイトスクリプティングなど、アプリケーションの脆弱性を悪用した攻撃の遮断やアプリケーション層の DDoS 対策、不正なボットによるアクセスの遮断などがあります。

⑨S3
・Amazon Simple Storage Service (Amazon S3) は、業界をリードするスケーラビリティ、データ可用性、セキュリティ、パフォーマンスを提供するオブジェクト ストレージ サービスです。あらゆる規模と業種のお客様が Amazon S3 を使用して、データ レイク、Web サイト、モバイル アプリケーション、バックアップと復元、アーカイブ、エンタープライズ アプリケーション、IoT デバイス、ビッグ データ分析など、さまざまなユースケースで任意の量のデータを保存および保護できます。Amazon S3 には管理機能が用意されており、特定のビジネス、組織、コンプライアンスの要件を満たすようにデータへのアクセスを最適化、整理、構成できます。

3.まとめ
AWSには、今回の記事でまとめたサービス以外にもまだまだあります。
気になる方はご自身でも調べてみてはどうでしょうか。

投稿日:

【Laravel 11について】

今回は、2024年3月12日にリリースされた、Laravelのバージョン11について軽くまとめていきたいとおもいます。
公式サイト：https://readouble.com/laravel/11.x/ja/

目次
――――――――――――――――――――――――――――
① 変更点は？
② まとめ
――――――――――――――――――――――――――――

①変更点は？
・まず、welcomeページが大きく変わりました！！
※黒と赤がベースとなり、カッコ良くなっています。

【旧】

【新】

・ディレクトリ構造の変化
Laravel 11では、開発効率を高めるためにディレクトリ構造が一新されました。この変更により、プロジェクトファイルの構成がシンプルになり、以前のLaravelバージョンに含まれていた定型的なコードが削減されました。

【旧】
app
┣ Console
┣ Exceptions
┣ Http
┣ Models
┗ Providers
bootstrap
┣app.php
┗cache
artisan

【新】
app
┣ Http
┣ Models
┗ Providers
bootstrap
┣app.php
┗cache
artisan

②まとめ
・このようにLaravel 11では開発者の生産性やアプリケーションのパフォーマンスを引き上げるいくつもの革新的な機能が導入されており、カスタムが自由にやりやすくなっております。まだリリースされたばっかりなのでこらから修正も沢山はいるかと思いますが、皆さんも使ってみてはいかがでしょうか？
以上、Laravel 11についてでした。

投稿日:

HTMLのタグ1つだけで100種類のツールチップを実装できるCSSジェネレーター

タグ1つだけでcssをコピペするだけで、100種類のツールチップを実装できるジェネレーターを紹介します。
⇒CSS Generators: Tooltips & Speech Bubbles

シンプルなものからポップなものまで、しっぽの形や位置が違う100種類が用意されています。


使い方はとても簡単。
HTMLはたった1つのタグを記述するだけです。

<div class="tooltip">Your text content</div>

 
cssはツールチップをクリックしてコピペするだけ。

中身はこんな感じ。

.tooltip {
    color: #fff;
    font-size: 18px;
    max-width: 28ch;
    text-align: center;
}
.tooltip {
    /* triangle dimension */
    --b: 2em; /* base */
    --h: 1em; /* height */
    --p: 50%; /* triangle position (0%:left 100%:right) */
    padding: 1em;
    clip-path: polygon(0 100%,0 0,100% 0,100% 100%,
      min(100%,var(--p) + var(--b)/2) 100%,
      var(--p) calc(100% + var(--h)),
      max(0%  ,var(--p) - var(--b)/2) 100%);
    border-image: fill 0//var(--h)
      conic-gradient(#CC333F 0 0); /* the color */
}

 
上にあるスライダーを移動すると、好きな位置にしっぽを配置できます。

とても簡単ですので、活用してみてはいかがでしょうか。

投稿日:

HTTPステータスについて

今回は、Webサイトを閲覧しているときに404のエラーに遭遇した時、他の番号はどんなのがあるんのかな？と疑問に思ったため、【HTTPステータス】についてまとめていこうと思います。

 

目次

――――――――――――――――――――――――――――

  1. HTTPステータスとは
  2. ステータスコード一覧
  3. まとめ

――――――――――――――――――――――――――――

 

 ①HTTPステータス とは

HTTPレスポンスに含まれるWebサーバーの処理結果を表現する3桁の数字のことを指します。3桁の数字は「処理が成功した」、「リダイレクト（転送）がかかっている」、「エラーがある」、などさまざまな意味を持っています。

・100番台（Informational）：処理中

HTTPステータスコード 意味
100 Continue リクエスト継続可能
101 Switching Protocols プロトコル切り替え
102 Processing 処理中
103 Early Hints 早期に予想されるヘッダを伝達

②ステータスコード一覧

・200番台（Success）：成功

HTTPステータスコード 意味
200 OK リクエスト成功
201 Created リクエストが成功し、リソースの作成が完了
202 Accepted リクエストは受理されたが、まだ実行されていない
203 Non-Authoritative Information オリジナル以外の情報を含み信頼できない
204 No Content リクエストに対して送信するコンテンツがない
205 Reset Content リクエストのリセットを伝達
206 Partial Content 一部のリクエストが成功

 

・300番台（Redirection）：リダイレクト

HTTPステータスコード 意味
300 Multiple Choice リクエストに対し複数のレスポンスがある
301 Moved Permanently URLが永遠に変更されたことを示す
302 Found URLが一時的に変更されたことを示す
303 See Other リクエストに対するレスポンスが別URLにある
304 Not Modified リクエストしたリソースは更新されていない
307 Temporary Redirect 一時的なリダイレクト（302とほぼ同じ）
308 Permanent Redirect 恒久的なリダイレクト（301とほぼ同じ）

 

・400番台（Client errors）：クライアントエラー

HTTPステータスコード 意味
400 Bad Request リクエストが無効
401 Unauthorized 認証が必要
403 Forbidden クライアントにアクセス権がない
404 Not Found リソース・ページが存在しない
410 Gone リソース・ページが恒久的に削除された
411 Length Required リクエストにContent-Lengthヘッダーがない
429 Too Many Requests 一定時間内の大量リクエストによる拒否

 

・500番台（Server errors）：サーバーエラー

HTTPステータスコード 意味
500 Internal Server Error サーバー内部エラー
502 Bad Gateway ゲートウェイとして動作するサーバーが無効なレスポンスを受け取った
503 Service Unavailable サーバーの過負荷やメンテナンスにより利用不可

③まとめ

HTTPステータスコードは大きく分けると100番台、200番台、300番台、400番台、500番台の5つに大別できる。

100番台：情報処理中であるということを示すHTTPステータスコード

200番台：通信が成功したことを示すHTTPステータスコード

300番台：リダイレクト（転送）がおこなわれたことを示すHTTPステータスコード

400番台：クライアント側でエラーが起きていることを示すHTTPステータスコード

500番台：サーバー側でエラーが起きていることを示すHTTPステータスコード

 

以上でHTTPステータスについて　でした～。　

投稿日:

PHPにおけるシングルトンについて

はじめに

PHPのコードを色々触っている時に、シングルトンなるものに出会ったのでまとめます！

今回のシングルトンというものは、デザインパターンの一つです。
そのために、まずはデザインパターンについて、軽く紹介させていただきます！

デザインパターンとは

過去のソフトウェア設計者が発見し編み出した設計ノウハウを蓄積し、名前をつけ、再利用しやすいように特定の規約に従ってカタログ化したものである。引用元(Wikipedia)

プログラミングには、この場合はこの書き方が正解。というようなものがいくつかあります。そう言ったものをデザインパターンと呼びます。
その中の一つがシングルトンパターンです。

シングルトンパターンとは

とあるクラスのインスタンスを２つ以上作成できないようにし、どのクラスからアクセスしても同じインスタンスを参照されることを保証します。

１つしか作成できないように強制するような機能というような感じです。

設計者が「１箇所以外から呼び出したくない！」と考えていても、別の箇所から呼び出し可能であれば、設計者の意図をくみ取れないビギナーズが遠慮なく複数生成することがありますよね？(私がその中の1人です…汗)

この複数生成を防ぐためにあるのが、シングルトンです。

通常であれば、複数のインスタンスを作成することができるが、インスタンス作成を１つのみにしたい場合に使用します。

Q：いくつもインスタンスを作成したくない場合ってどんな状況？

設定管理

アプリケーションの設定情報を保持するクラスは、通常は一つのインスタンスだけで十分です。
設定情報はアプリケーション全体で共有されるため、複数のインスタンスを持つと各データの一貫性が失われる可能性があります。

データベース接続

データベース接続は、リソースを多く消費して、複数の接続を開くとパフォーマンスが低下する可能性があります。
シングルトンを使うことで、アプリケーション全体で一つのデータベース接続を共有し、リソースの使用を効率化できます。

ロギング

ログを記録するクラスは、アプリケーション全体で一つだけあれば充分です。
シングルトンを使用すると、ログの記録に一貫性が保たれ、パフォーマンスの問題を避けることができます。

ハードウェアインターフェースの管理

ハードウェアリソース（プリンターなど）へのアクセスを管理する場合、シングルトンは一つのインスタンスを通じてリソースを共有し、競合することを防ぎます。

キャッシュ

データキャッシュやオブジェクトキャッシュのようなリソースは、アプリケーション内で一貫性と効率を保つために、通常は単一のインスタンスで管理されます。

複数のインスタンスが存在すると、データの整合性の問題や無駄なリソースの使用、パフォーマンスの低下などさまざまな問題が発生します。
シングルトンは、これらの問題を解決する効果的な方法です。
ですが、使用する際にはその影響範囲と制約を理解して適切に利用できるよう意識することが大事です。