投稿日:

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：いくつもインスタンスを作成したくない場合ってどんな状況？

設定管理

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

データベース接続

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

ロギング

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

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

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

キャッシュ

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

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

投稿日:

【Laravelでcronを実装してみた！】

今回は、特定の処理を決まった時間に定期的に実行したいと思い。
Laravelのcron機能を実装してみたので、その備忘録も兼ねて、まとめていきたいと思います。
（Laravelのscheduleクラスを利用しております。）
https://readouble.com/laravel/10.x/ja/scheduling.html
※今回のLaravel バージョンは10です。

目次
――――――――――――――――――――――――――――
① 「cron」とは
② 基礎
③ 発展
④ まとめ
――――――――――――――――――――――――――――

①『cron』とは
cronとは、「定期的にタスクを自動実行するための機能」です。
「クーロン」と読みます。cronを利用すると時間を指定して、あらかじめ決まった時間にタスクを実行してくれます。

以下、「cron」の使用例です。
例）毎分ごとに特定のディレクトリを参照し、ファイルを読み込みたい。
例）日付が変わるタイミングで特定の処理をしたい。
例）毎月初めにステータスをリセットしたい。

②基礎
[１]まずは実行するプログラムを作成します。
・Laravelのコマンドでファイルを作成します。
php artisan make:command SendEmails

上記のコマンドにより、Commandsディレクトリにファイルが作成されます。
project
├─ app
│ ├─ Console
│ │ ├─ Commands
│ │ │ └─ SeendEmails
│ │ ├─ Kernel.php

[２]つぎにファイルを追記していきます。
・「$signature」変数にコマンド名を格納します。
例）protected $signature = ‘command:sendEmails’;

・「$description」変数に処理の内容を格納します。
例）protected $description = ‘メールを配信する。’;

・「handle()」メソッド内に処理を記載します。
例）public function handle() {

{
ここにしたい事を書く。
※今回は割愛します。
}

以上の手順にて、実行するプログラム（コマンド）を作成することができます。

③発展
基礎にてコマンドを作成したので、発展では定期的に実行できるようにタスクスケジュールをしていきましょう。

[１]　Kernelファイルにスケジュールを記載する。
・ConsoleフォルダにあるKernel.phpファイルに追記します。
project
├─ app
│ ├─ Console
│ ├─ Commands
│ │ └─ SeendEmails
│ ├─ Kernel.php

・Kernal.phpの$commandsに追記する。
例）protected $commands = [
\App\Console\Commands\SendEmails::class,
];

・Kernal.phpのschedule()メソッドにてスケジュールを指定できる。
例）protected function schedule(Schedule $schedule)
{
$schedule->command(‘command:sendEmails’)->everyTenMinutes();
}

以上の設定にて、10分ごとにsendEmailsコマンドを実行するように設定することができます。

[２]　スケジュールの種類

メソッド 説明
cron('* * * * *');
 カスタムcronスケジュールでタスクを実行
everySecond();
 毎秒タスク実行
everyTwoSeconds();
 ２秒毎にタスク実行
everyFiveSeconds();
 ５秒毎にタスク実行
everyTenSeconds();
 １０秒ごとにタスク実行
everyFifteenSeconds();
 １５秒毎にタスク実行
everyTwentySeconds();
 ２０秒ごとにタスク実行
everyThirtySeconds();
 ３０秒ごとにタスク実行
everyMinute();
 毎分タスク実行
everyTwoMinutes();
 ２分毎にタスク実行
everyThreeMinutes();
 ３分毎にタスク実行
everyFourMinutes();
 ４分毎にタスク実行
everyFiveMinutes();
 ５分毎にタスク実行
everyTenMinutes();
 １０分毎にタスク実行
everyFifteenMinutes();
 １５分毎にタスク実行
everyThirtyMinutes();
 ３０分毎にタスク実行
hourly();
 毎時タスク実行
hourlyAt(17);
 １時間ごと、毎時１７分にタスク実行
everyOddHour($minutes = 0);
 奇数時間ごとにタスク実行
everyTwoHours($minutes = 0);
 ２時間毎にタスク実行
everyThreeHours($minutes = 0);
 ３時間毎にタスク実行
everyFourHours($minutes = 0);
 ４時間毎にタスク実行
everySixHours($minutes = 0);
 ６時間毎にタスク実行
daily();
 毎日深夜１２時に実行
dailyAt('13:00');
 毎日13:00に実行
twiceDaily(1, 13);
 毎日1:00と13:00に実行
twiceDailyAt(1, 13, 15);
 毎日1:15と13:15に実行
weekly();
 毎週日曜日の00:00にタスク実行
weeklyOn(1, '8:00');
 毎週月曜日の8:00に実行
monthly();
 毎月１日の00:00にタスク実行
monthlyOn(4, '15:00');
 毎月4日の15:00に実行
twiceMonthly(1, 16, '13:00');
 毎月１日と１６日の13:00にタスク実行
lastDayOfMonth('15:00');
 毎月最終日の15:00に実行
quarterly();
 四半期の初日の00:00にタスク実行
quarterlyOn(4, '14:00');
 四半期の４日の14:00に実行
yearly();
 毎年１月１日の00:00にタスク実行
yearlyOn(6, 1, '17:00');
 毎年６月１日の17:00にタスク実行
timezone('America/New_York');
 タスクのタイムゾーンを設定

④まとめ
このようにLaravelでは、スケジュール機能にてcron機能を実装することができます。
とても便利な機能なので、ぜひ使用してみてはいかがでしょうか。

投稿日:

PANTONE COLOR OF THE YEAR 2024はPeach Fuzz（ピーチファズ）

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

2024年のトレンドカラーは「PANTONE 13-1023 Peach Fuzz（ピーチファズ）」。
ピンクに近い彩度が低めのオレンジ色ですね。
この数年間は彩度の低い、いわゆる「くすみカラー」が選ばれています。

PANTONEのCOLOR OF THE YEAR、Peach Fuzz 13-1023 は、自分自身と他人を育てたいという私たちの願望を表現しています。ビロードのような優しいピーチトーンで、すべてを包み込むスピリットが心、体、魂を豊かにします。
親密さとつながりに対する私たちの生来の憧れを反映する色合いを求めて、私たちは暖かさとモダンなエレガンスを備えた色を選びました。思いやりの心に共鳴し、触覚的な抱擁を提供し、若さと時代を超越したものを簡単に橋渡しする色合い。

カラーデータ

HEX　#FFBE98
sRGB　255, 190, 152
LAB　83.16, 22.40, 30.15

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

PANTONE CONNECT

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

投稿日:

Webシステムにて印刷のプレビュー画面を表示させ方法について

今回は、Webシステムで動的な情報を印刷プレビュー画面にて表示させる事があったのでその備忘録としてまとめたいと思います。

目次
――――――――――――――――――――――――――――
① 開発環境
② 実装方法
③ まとめ
――――――――――――――――――――――――――――

①開発環境
※今回の機能は特段、開発環境に依存は無い為、簡潔に記載いたします。
・Laravel
・JQuery
・Bootstrap

 

②実装方法
・まずはお好みで画像を用意します。

<canvas id="canvas" class="test_image"></canvas>

・次は以下の2つのJavaScriptを読み込みます。

<script src="https://cdnjs.cloudflare.com/ajax/libs/print-js/1.6.0/print.js"></script>
<script src="https://html2canvas.hertzen.com/dist/html2canvas.min.js"></script>

・次にボタンとスクリプトを設置します。
【button】

<a id="print" class="btn btn-default"></a>印刷

【javascript】

$('#print').on('click', (e) =&gt; {
html2canvas($('#modal_plot .modal-body')[0], {scale: 3}).then(canvas =&gt; {
var myImage = canvas.toDataURL("image/png");
printJS(myImage, 'image');
});
});

 

③まとめ
・今回は、Webシステムで動的な情報を印刷プレビュー画面にて表示させる方法についてまとめてみました。
公開されているJavaScriptのライブラリを使用すると様々なことを実装することができます。
今後も色々と調べていきたいですね。

投稿日:

Chrome拡張機能について

Chrome拡張機能とは

Chrome拡張機能(Chrome Extension)とは、Chromeブラウザに機能を追加することができるアドオンツールであり、Chromeウェブストアで様々な機能を検索してインストールすることができます。

また、自分自身でコーディングしてパッケージ化されていない拡張機能を作成することもできます。現場では、自作した拡張機能を使ってwebページの見た目を変更し、操作してはいけないページのデザインテーマの変更などを行っていました。

そこで今回は現場でも使われている「ページの見た目変更」を行える拡張機能をabridgeのホームページで再現し、ページが読み込まれた際にページの見た目と内容を少し変更する拡張機能を作成していきたいと思います。

用意するもの

拡張機能を作成するにあたって以下を準備します。

1,Chromeブラウザ
2,拡張機能を作成するためのフォルダ
3,コーディングするためのエディター（今回はVisual Studio Codeを使用）

実際に作成していく

１,まず初めに用意したフォルダをVisual Studio Codeで開き、「manifest.json」というファイルを作成し以下のように編集します。

manifest_version：マニフェストのバージョンを表しており、3と記述する。

name：拡張機能の名前を付けることができる。

version：作成する拡張機能のバージョンであり、任意のバージョンを付けることができる。

description：拡張機能の説明文を記載することができる

icons：  拡張機能のアイコンを設定することができる

content script：表示しているWebページの詳細を読み取ったりDOM操作を行ったりする今回は「matches」指定したURLを持つサイトに対して「js」で操作を行う。

2,次にmanifest.jsonファイルと同じディレクトリ内にabridge.jsを作成し、以下のように編集します。

こちらはfooterを持つ要素のバックグラウンドカラーを色コード#FF0000に、top_aboutを親要素に持つ要素のテキストを挨拶に変更するコードになっています。

今回は、文言の変更と一部背景色の変更を行うためにページフッターの背景色と一部文言を変更する機能を実装していきます。

拡張機能をインストールする

編集が完了した作成した拡張機能をChromeにインストールします。

Chromeを開いたら、ユーザーアイコンの右隣にある3点マークをクリックし「拡張機能→拡張機能を管理」を開きます。次に、ストアに公開されていない拡張機能を使用できるようにするために、右上のスイッチでデベロッパーモードをオンにします。

最後に以下の2通りのどちらかの操作を完了することで作成した拡張機能を使用することができます。

1,「パッケージ化されていない拡張機能を読み込む」をクリックし、拡張機能のファイルが入ったフォルダを選択する。

2,拡張機能のファイルが入ったフォルダをドラッグアンドドロップする。

拡張機能画面でこのようになれば拡張機能のインストール完了です。

拡張機能が実際に動くのか確認する

それでは実際に拡張機能が動いているのか見ていきたいと思います。はじめは拡張機能をオフにした状態でabridgeのホームページを開いていきます。するとこのような表示になっているはずです。

次に拡張機能をオンにした状態でもう一度abridgeのホームページを読み込んでいきます。すると以下のように表示が切り替わっているはずです。


最後に

このように、拡張機能を使うことで簡単にwebページの見た目を変更することができます。実際の現場ではwebアプリの改修などを行う際に本番環境と間違えてしまわないよう見た目を変えることに使われることがあります。また今回作成した拡張機能は指定のURLが読み込まれる度にスクリプトが働きページの表示内容を変更しているため、拡張機能をオフにしない限り私のPCでabridgeのホームページはこのような表示になります。

今回は拡張機能を自作しChromeにインストールしていきましたが、ストアには数多くの便利な拡張機能が公開されているので時間があるときに探してみてはいかがでしょうか。

今回は以上となります、次回の更新をお楽しみに。

投稿日:

Inertia.jsについて

Inertia(イナーシャ)とは

今回私がLaravelとVueを使ったWebアプリ作成の学習をしていた際に、Inertia.jsの存在を知った為ご紹介します。

Inertiaは日本時間 2023年1月27日にVersion1.0がリリースされました。クライアントサイドレンダリング、サーバーサイトレンダリングの両方を組み合わせたSPAの作成が可能となった仕組みです。

SPA開発時にはバックエンド側でAPIの開発をしたり、フロントエンドでルーティングを行うなど実装の複雑さがありました。ですが、Inertaを組み込むことにより、APIを構築することもフロントエンドでルーティングを行うこともなくなりSPAを作成できるようになりました。

勘違いされがちですが、Inertia(イナーシャ)はJavaScriptのフレームワークではないようです。

Laravelの開発者であるTaylor OtwellがXにて以下内容をポストしていました。

これはJSONプロトコルの仕様で、バックエンド（Laravelだけではありません！）がReact / Vue / Svelteのフロントエンドに、どのページをどのようなデータでロードするかを通信できるようにするものです。 Inertiaの様々なバックエンドとフロントエンドのライブラリは、基本的にこのプロトコルで動作するためのヘルパーを提供するだけです。 このように理解すれば、Inertiaは「完全なソフトウェア」である。

つまり、サーバーサイドとクライアントをつなぐ接着剤のようなものです。

Inertiaで何が出来るの

Inertiaはページ全体を再読み込みすることなく、一部分のみの切り替えでページ間の移動ができます。かつ、LaravelのBladeを使っているような感覚で、Vue(またはReact)を導入し、SPA開発を行うことができるようです。

Vue Routerなどを使わずにLaravelの機能だけでうまくいくってとても便利ですね。

一部分のみというのは、以下画像のように、ヘッダーとサイドメニューはそのまま。メインとなる中央部分のみ、切り替えることが可能となります。

Inertia Example Image

イメージとしてはSide内にリンクがあるとすれば、リンク押下すると、黄色枠内のみ表示が切り替わります。

ヘッダーとサイドを読み込まない分、高速な処理が可能となっています。

最後に

現在のサポート

現在サポートされているフレームワークは一部のみです。

フロントエンド

  • React
  • Vue
  • Svelte

サーバーサイド

  • Laravel
  • Rails

参考サイト

投稿日:

CMSとCRMの違いについて


今回はCMSとCRMの違いについて紹介しようと思います。
というのも、私がCMSとCRMがどっちがどっちか分からなくなることがあったのでまとめていこうと思いました。

目次
――――――――――――――――――――――――――――
① CMSとは
② CRMとは
③ まとめ
――――――――――――――――――――――――――――

① CMS とは
・「CMS」とは、「Contents Management System：コンテンツ・マネジメント・システム」の略で、簡単にいうとWebサイトのコンテンツを構成するテキストや画像、デザイン・レイアウト情報（テンプレート）などを一元的に保存・管理するシステムのことです。

② CRM とは
・CRM（Customer Relationship Management）とは「顧客関係管理」と訳され、顧客と良好な関係を構築・維持するための施策、あるいは施策を実現するためのシステムを指します。

③ まとめ
・このようにCMSはWebサイトの更新や管理を効率化するシステムであり、サイト運用を技術面でサポートします。 一方、CRMは顧客情報を一元管理するシステムであり、顧客が求めるWebコンテンツを内容面でサポートします。

以上、CMSとCRMについてまとめてきました。
次回の更新もお楽しみに〜

投稿日:

jQueryでselectboxの選択内容を引き継いでcloneする

jQueryでselectboxをcloneすると、optionのselectedが引き継がれないバグ（？）があります。
これをなんとかしてみました。

■修正前のもの

選択肢を「みかん」から「りんご」に変更してcloneボタンを押しても、cloneしたものは「みかん」のままです。

See the Pen
selectboxの選択内容を保持したままcloneする（できないver.） by matsu (@pochi__2828)
on CodePen.

■修正したもの

選択肢を「みかん」から「りんご」に変更してcloneボタンを押すと、cloneしたものも「りんご」になっています。

See the Pen
selectboxの選択内容を保持したままcloneする by matsu (@pochi__2828)
on CodePen.

■解説

クローン元のoption内のselectedの位置を記憶して、クローン先のoption内の同じ位置にselectedを追加することでselectedが引き継ぎできます。
クローンするときはclone(true)にすることで、クローン先のボタンも動作するようにします。

投稿日:

アクティビティ図について

【アクティビティ図（Activity Diagram）】

アクティビティ図とは、UML（統一モデリング言語）の一種で「システム実行の流れと条件分岐」を図解したものです。基本設計において、システムやその処理の流れを簡単な図で示すことで、図形の意味や、読み方さえわかれば、処理やシステムに対する理解度が向上します。

あらかじめ構成された要素(ノードだったりオブジェクトだったり)を配置し、それらを矢印でむずびつけることで、開始状態から何らかの終了状態への手順を示すことができます。

構成要素

構成要素として以下が挙げられます。※一部抜粋

初期ノード 記号　初期ノード：スコープ内での開始を意味します。

最終ノード 記号　終了ノード：スコープ内での終了を意味します。

最終制御 記号　最終制御：それまでのアクション(制御)で使用されたトークンをすべて破棄します。

♢　デジションノード/マージノード：条件によるフロー分岐または、複数のフローの合流を意味します。

などなど約15種類以上もの要素で表現可能です。

フローチャートとアクティビティ図の違いは？

ざっくりでいうと、全体的なシステムをアクティビティ図で表し、詳細な流れの部分をフローチャートで表します。

まとめ

もし、アクティビティ図やそのほかのUMLを理解できれば、システムの概要や、処理の詳細などのコードや文面じゃわかりにくい部分も図解することで大まかに理解できたりします。企業の基本設計書だったりにも使用されていたりするので、書き方や読み方など覚えておいても損はないと思い、紹介しました。