i_20220622– Author –

最近はCopilotやChatGPTなどのAIツールを使えば、Express + TypeORM のバックエンドAPIが数分で動くコードとして生成されます。でも、「動いてはいるけど中身がわからない」状態は危険です。バグが出たとき、機能追加したいとき、自分のコードなのに手が出...

AWS IVS（Amazon Interactive Video Service）は、ライブ動画配信をアプリやウェブサイトに簡単に組み込むためのマネージドサービスです。 AWS IVS 概要 APIコール一つでゼロからライブ配信環境を立ち上げられる Low-Latency Streaming（低レイテンシーの...

v-data-table は Vuetify が誇る高機能テーブルコンポーネントだが、グルーピングとソートを組み合わせた途端に「あれ、思った通りに動かない」という壁にぶつかることが多い。この記事では、公式ドキュメントだけでは辿り着きにくい実践的なテクニックを...

個人開発で使っているNext.js + Express + React Viteの構成、デプロイまわりがかなり場当たり的になっていたので、GHCRを軸にCI/CDを整理し直すことにした。進捗あれば随時追記していく。 そもそもDockerイメージビルド（GHCR）を使用したデプロイとは Do...

Vue.jsで開発していると、「このコンポーネントのpropsやdata、今どうなっている？」と確認したい場面は日常的にあります。Vue DevToolsを使うのが一般的ですが、DevToolsが使えない環境や、コンソールから素早く値を確認したいケースもあるでしょう。 こ...

validate() メソッドを使用したシンプルな場合 // バリデーションを実行（コントローラー） public function store(Request $request) { // バリデーションを実行 $validated = $request->validate([ 'title' => 'required|max:255'...

Shopify始め方 https://www.shopify.com/jp にアクセス 「無料で始める」クリック 2025年12月現在Shopifyは、登録してから3日間は無料、その後も最初の3ヶ月は月額150円程度で使えます。 依頼者に確認すべき項目 Shopifyの保守・修正案件を受注する際、事...

mysqlのインストールについて オープンソース版と商用版の違い MySQL Community Edition（オープンソース版） 無料 GPLライセンス 基本的な機能は全て使える コミュニティサポートのみ MySQL Enterprise Edition（商用版） 有料（サブスクリプション） Ora...

LightSailでの問題内容 LightSailでWebアプリケーションをデプロイしているのですが、サイトに接続できない事象が発生します。 再起動すれば解消されるのですが、、 LightSailのWebコンソールからssh接続をしようとすると下記のメッセージです インスタン...

8 . 0 . 33 ↑ ↑ ↑ メジャー マイナー パッチ (Major) (Minor) (Patch) パッチバージョンアップ（8.0.40 → 8.4.6）ではどのリリースノートの確認すればいいか 8.0.40から8.4.6へのアップグレードについて、以下のリリースノートを確認します。 MySQL 8.4 Re...

Web開発プロジェクトでMySQLを扱う際、設定ファイルの構造を理解しておくとトラブルシューティングがスムーズになります。 メインの設定ファイル MySQLの設定はmy.cnf(Linux/Mac)またはmy.ini(Windows)で管理されます。これがメインの設定ファイルです。 ...

VPNの基本的な仕組み VPN（Virtual Private Network）は、インターネット上に仮想的な専用回線を構築し、安全な通信を実現する技術です。企業のリモートワークや個人のセキュリティ強化において欠かせないツールとなっています。 SSHトンネルとVPN SSHトン...

A5M2（A5:SQL Mk-2）とは A5M2（A5:SQL Mk-2）は、日本製の無料のデータベース開発ツールです。 主にMicrosoft SQL Server、Oracle、MySQL、PostgreSQLなどのデータベースを管理・操作するためのGUIツールとして使われています。 A5M2のインストール方法 ...

そもそもSVNとは SubversionはApache財団が管理しているバージョン管理システムです。以前広く使われていたCVS（Concurrent Versions System）の後継として開発されました。 現在では、GitやGitHubの普及により、新規プロジェクトではGitを使うことが多く...

WebSocketとは WebSocketは、「サーバーとブラウザを常時つなぎっぱなしにして、お互いに好きなタイミングでデータを送り合える技術」といえます つまり「双方向通信を行うためのプロトコル」です 従来のHTTP通信は一方通行（「クライアントがリクエスト」...

そもそもLaravelではどのようにDB操作しているのかを確認 LaravelでのDB操作は、書いたコードがそのままDBに届くわけではなく、裏側で翻訳されてから届きます。 Eloquentクラスの機能を使う User::find(1) 「SQL」ではなく「PHPのクラス」でDB操作をコーデ...

導入手順 UserモデルにSoftDeletesを追加 Laravelのモデルについての確認 Laravelのモデルとは基本的には「モデル ＝ データベースのテーブル」と考えてOK クラス（User） は、「usersテーブル全体」を表します。 インスタンス（$user） は、「テーブルの...

画像の扱いについて、当初のS3利用からDB保存へ移行し、さらにその実装方式を最適化しました。これまでの3つの変遷をまとめます。 1. AWS S3 ストレージ 外部ストレージ（S3）に実体を保存し、DBにはパス（URL）のみを保存する一般的な構成です。 こちらで...

この記事では、Vue環境における主要なリッチテキストエディタライブラリとその特徴、実装のポイントをまとめます。 主要なライブラリの選択肢 現在、Vueコミュニティで特に支持を集めているライブラリがいくつかあります。 Tiptap (現在の本命) 現在最も人...

React Hook Form は、Reactでフォームを扱うためのライブラリです https://react-hook-form.com フォームの入力内容はuseStateで管理しない 通常フォームの入力内はuseStateで入力内容変更のたびに再レンダリングされて、いつでもアクセス可能な値として管...

状況はお名前ドットコムで取得したドメインをさくらインターネットで使用 さくらインターネットのコントロールパネルで、お名前ドットコムで取得したドメインを追加 さくらのレンタルサーバ ホーム ドメイン/SSL > メール > Webサイト/データ > ドメイン/S...

TinyMCEとは リッチテキストエディタのJavaScriptライブラリです。 WordPressクラシックエディタで標準で搭載されている点からも、安心して使用できるライブラリかと思います TinyMCE エディタ構造 ブラウザ ツールバー B I U 画像 表 リンク 編集エリア (...

ファイルの所有者とパーミッション アクセス権 読み取りr書き込みw実行権x 権限ファイルの適用ディレクトリに適用読み内容を参照内容を参照書き書き込みファイルの新規作成、削除、名前変更実行ファイルを実行ディレクトリのファイルにアクセス、ディレク...

1）テーマのディレクトリ作成する wp-content/themes/ ディレクトリ内にテーマ名のディレクトリを作成します。 public\wp-content\themes\テーマ名 2）テーマに必要なファイルの作成（最小構成） 最小構成 テーマ名ディレクトリ直下にstyle.cssとindex.php...

Next.js 13以降では、@next/third-partiesの使用が推奨 タイミングの問題： インラインスクリプトは即時実行されますが、loadingクラスを使用して可視性を制御しています 2000msのタイムアウトが設定されており、その間にGTMが正しく初期化されない可能性...

ネットワークセキュリティ OSアプリケーションの定期的な更新セキュリティホール（プログラムの不具合のよるセキュリティ上の弱点）を防ぐためネットワークデバイスの物理的な保護鍵付きのラックに保護ユーザに対するセキュリティ教育FW、IDS/IPS、ウィル...

1）CSSファイルを用意 下記のように実際の表示に近いスタイルをあてれるよう記載 https://siennahare23.sakura.ne.jp/e-style/editor.css h2.wp-block-heading { font-size: 1.3rem; border-top: 1px solid var(--main-color); border-bottom: 1px solid v...

完成イメージ このチュートリアルでは、以下のような機能を持つギャラリーを作成します ソースファイル imageGallery.tsx // src/components/imageGallery.tsx 'use client' import { useState } from 'react' import { X, ChevronLeft, C...

ダミーテキスト https://webtools.dounokouno.com/dummytext この文章はダミーです。文字の大きさ、量、字間、行間等を確認するために入れています。この文章はダミーです。文字の大きさ、量、字間、行間等を確認するために入れています。この文章はダミー...

Twitterタイムラインの埋め込み https://publish.twitter.com/# こちらのページに行き、タイムラインを表示したいツイッターアカウントのURLを入れて、エンターキーを押します。 次に、左側の「Embedded Timeline」をクリックします。 コードが表示される...

コンピュータの主要な5大機能 入力装置 キーボード・マウス 出力装置 ディスプレイ・プリンタ 記憶装置 メモリ・HDD 演算装置 計算実行 制御装置 全体を コントロール 制御装置他の4つの装置を協調して動作させる装置。全体をコントロールする。演算装置計...

CCNAとは 「CCNA（Cisco Certified Network Associate）」は、世界最大手のネットワーク関連機器メーカーであるシスコシステムズ社が実施する、ネットワークエンジニアの技能を認定する試験です。 同社の主力商品であるCiscoルータ、Catalystスイッチに関...

Googleアドセンスに申請 https://snow-monkey.2inc.org/forums/topic/googleadsense%e3%81%ae%e8%a8%ad%e5%ae%9a%e6%96%b9%e6%b3%95%e3%81%ab%e3%81%a4%e3%81%84%e3%81%a6/

HTTP HTTP（Hyper Text Transfer Protocol）とはクライアント（Webブラウザなど）とWebサーバ間でデータを送受信するためのプロトコルです HTTPの仕組み クライアントが「HTTPリクエスト」を送信し、それに応じてWebサーバが「HTTPレスポンス」が返信され...

ICMP ICMP（Internet Control Message Protocol）はエラー通知や問い合わせ情報を転送するためのプロトコル。 ベストエフォート型のため通信状況やエラーの確認を行わないIPを補う役割を担い、IPとセットで用いられる。 インターネット層のプロトコルであ...

OSI参照モデル OSI参照モデルとは、コンピュータネットワークに求められる機能（通信機能）を7階層の構造に分割し定義したものです。 ＜OSIとTCP/IPの比較＞ TCP/IPOSI参照モデルよりも運用重視 物理層 ビット列（0と1の情報）と物理的な電気信号を変換 ht...

MACアドレスはコンピュータのNIC（network interface card：LANケーブルを挿す穴がくっついている、パソコンに合体させる部品のこと）やネットワーク機器の各ポートに対して製造時に割り当てられます。 フレームの送信元や宛先を識別するためにデータリン...

イーサネット（Ethernet）は物理層〜データリンク層を規定するネットワーク規格の一つ。 イーサネットにはDIXイーサネットとIEEE 802.3の2つの企画が存在する。 通信速度 Ethernetは最大10Mbpsの速度に対応しているインターフェイスです。ネットワーク図で...

オリジナルプラグイン作成 ソースファイル wp-content/ 　┣　plugins/ 　　　　┣　simple-image-search/ 　　　　　　　┣　simple-image-search.php 　　　　　　　┣　js/search.js 　　　　　　　┗　css/style.css simple-image-search.php 下記のように...

セキュリティ対策 ユーザーアカウントの権限レベル AAA AAAとはAutentication（認証）、Authorization（許可）、Accounting（アカウンティング）の頭文字を繋げたものです。これら3つのセキュリティ機能を提供する仕組みを表しています。 認証：ユーザの識...

構成管理ツール ネットワーク上のサーバなどに対して、アプリケーションの自動インストールや設定の自動化を行うツールを構成管理ツールと呼びます。 代表的な構成管理ツール Ansible リモードデバイス通信にSSHを使用します。 Puppet Chef 比較項目Ansibl...

Service Worker とは Webアプリケーションのバックグラウンドで動作するスクリプト ブラウザのメインスレッドとは別に動作 オフライン動作が可能 プッシュ通知を受信可能 バックグラウンドで同期処理が可能 プッシュ通知の流れ Service Workerのライフサイ...

サーバ仮想化 1台の物理マシン上に複数の論理サーバを構成して運用することをサーバ仮想化といいます。サーバ仮想化を導入するには、仮想マシンを構成管理するソフトウェア（ハイパーバイザ）を物理マシンにインストールします。 仮想マシンごとにそれぞれ...

CDP CDP ( Cisco Discovery Protocol ）はCisco社独自のプロトコルであり、データリンク層で動作します。 デフォルトで60秒ごとに機器の情報をマルチキャストで送信しています。送信間隔を早めれば、隣接デバイスの認識が早まる。 ＜CDPのコマンド＞ 特定...

ネームサーバーの設定 ネームサーバーとは ネームサーバーは、どのサーバーを使用するか決定するためのアドレス、とお考えください。例えば、Xserverドメインで取得したドメインを他社のサーバーで使用する際に、Xserverアカウントよりネームサーバーを他...

ワイヤレスLAN 半二重通信 CSMA/CA「Carrier Sense Multiple Access with Collision Avoidance」でコリジョンを防ぐ 2.4GHz帯→障害物に強く、電波が遠くまで届きやすい電波干渉が起こりやすいので不安定で速度低下が起きやすい。 5HzG帯→障害物が多いと電...

WAN WAN（Wide Area Network）は地理的に離れたLANとLANを相互に接続する広域ネットワークです。 【主なWANサービス】 WANサービス特徴、主なサービス名称プロトコル専用線・シリアルインターフェイスを使用・1対1で常時接続、ポイントツーポイント・コス...

NAT（Network Address Translation） プライベートIPアドレスをグローバルIPアドレスに変換する技術とされています。 IPアドレスを節約することができます。 内部ネットワークのIPアドレスを隠蔽することができます。 外部ローカルアドレスと外部グローバ...

そもそも認証とは 認証とは、「あなたが本当にあなたであること」を確認するプロセスです。 ユーザー アプリ 認証プロバイダー (GitHub/Google/Email等) 1. ログイン要求 2. 認証リクエスト 3. 認証情報返却 主な認証方式: - ソーシャルログイン: GitHub, ...

IPv6 ISP（Internet Service Provider）…エンドユーザーにIPv6の割り当てをしている IPv4のアドレス枯渇問題を解決するため32ビットから128ビット（16ビットずつ8個のフィールドでフィールドでフィールドで16進数で表記）に拡張 ヘッダの簡素化 ブロードキ...