-
WordPress
【@wordpress/scripts】でオリジナルブロック作成(リッチテキストツールバー、動的CTAリンク)
@wordpress/scriptsとは @wordpress/scriptsは、WordPressのブロックエディタやプラグイン開発のためのビルドツールパッケージです。 React・JSXを使ったモダンなJavaScript開発環境をWordPressプロジェクトに簡単に導入できます! webpackやBabelなどの複... -
PHP
【Laravel】SQLアンチパターンを考慮したDB
LaravelのDB設計でもSQLアンチパターンの知識は非常に重要 SQLアンチパターンとは、データベース設計やSQL文の記述において、一見問題なく動作するが、実際には保守性・性能・拡張性などの面で問題を引き起こす悪い設計パターンのことです。 SQLアンチパタ... -
PHP
Laravelでtodoアプリを作成しながら、artisanコマンドを学習
MVC Model View Controllerパーツに分割して実装していくモデルです。 Model データの処理、DBとのやりとりを行う View ユーザーに画面を表示 ユーザからの入力を受け付ける Controller ユーザからの入力をModelに依頼 Modelが処理したデータをViewに表示... -
未分類
PostmanでPOSTリクエストをテストする方法
Postmanのインストール 自分の使用しているOS(Windows、Mac、またはLinux)を選び、「Download」ボタンをクリックします。 https://www.postman.com/downloads/ インストーラーを実行 アカウントを作成せずに使用する場合は「Skip and go to the app」を... -
AWS
AWS認定ソリューションアーキテクト-アソシエイトレベル
多すぎるAWSサービスはカラーで覚える!色から機能を連想する視覚記憶術 AWSのサービスは200以上。正直、全部覚えるのは無理ですよね。 でも実は、AWSのアイコンには「色によるカテゴリ分け」というルールがあります。この色を覚えておくだけで、初見のサ... -
Linux
【チートシート】Linuc Lv1-102 実務での使用例も解説
Linucとは Linuc(リナック)は、日本のNPO法人LPI-Japanが提供するLinux技術者向け資格試験です。2018年に開始され、従来のLPICに代わる新しい認定制度です。LPICを取得している人は簡単な手続きでLinuc資格を取得できます。 Linucの概要 Linucは、レベル... -
Web制作
ワイヤーフレーム、デザインカンプとは
ワイヤーフレーム ワイヤーフレームとはWebサイトのレイアウトを決めるものです。 デザインやコーディングに入る前に、作成し完成イメージを共有します。 デザインカンプ デザインカンプとは「Design Comprehensive Layout」の略です。 サイト制作では、ク... -
WordPress
Sass導入方法、WordPress に SCSS を導入
Sass Sassとは Scssのメリット CSSを効率よく書けることや管理、メンテナンスが楽になることがあります。 変数 ネスト記法 mixin 関数 Sass導入方法 SassはCSSと違いHTMLファイルで読み込めないので、CSSファイルにコンパイルする必要があります。 よく紹... -
Web制作
【VSCode】Visual Studio Code ショートカット、おすすめ拡張機能
ショートカットキー カーソルがある行を複製 macOS:Ctrl + Shift + ↑/↓、 Windows:Shift + Alt + ↑/↓ すべて折りたたむ Ctrl+K Ctrl+0 全て折りたたまれており一つずつ展開して使用すると素早く作業できます 何の閉じタグかを分かりやすくする方法 タグ... -
Figma
figma
ショートカットキー Fnキー + Fフレームの作成shiftキー + Fガイドの表示切り替えshiftキー + 矢印10pxずつ移動command + Gグループ化option + command + Gフレーム化command + [再背面へ移動 コピー&ペーストについて command + shift + V貼り付け先... -
Web制作
【CSS】フレックスボックスの一部の子要素だけ「絶対にこの幅でいてほしい」ってとき。
display: flex; 値row左から右への横並びcolumn上から下row-reverserowの逆column-reversecolumnの逆<flex-directionプロパティ> flex-shrink flexアイテムの縮小率を指定するプロパティです。親要素のflexコンテナからはみ出た要素を縮小することができ... -
WordPress
【WordPress】カスタムフィールド作成の仕方「ACF」Advanced Custom Fieldsの使用法
そもそもカスタムフィールドとは Wordpressの投稿画面にはタイトル、本文、抜粋といった項目がもともとありますが、カスタムフィールド機能はさらに追加で新しい入力項目を設定することができます。 Wordpressに詳しくない人でも編集がしやすくなります。 ... -
未分類
【初心者】Excelよく使う関数
業務の効率化を考える上で関数はすごく便利、とくによく使うものを今回ご紹介します。 DATE関数 「年」、「月」、「日」を引数に指定し、日付を作成する関数 =DATE(年,月,日) -
未分類
Word、Excelの小技
改ページ位置の設定 見出しとその内容が別のページに分かれてしまう場合があります。 見出しと内容をまとめて、次のページから開始するようにせっていすることができます。 ホームタブ → 段落グループ → 段落の設定 → 改ページと改行タブ → 次の段... -
基本情報技術者試験
インフラエンジニアとは
そもそもインフラとは インフラとはインフラストラクチャー(Infrastructure)の略です、普段の生活の基盤を意味します。 例えば公共交通機関、公共施設、電気・ガス・水道など、日々の暮らしにに欠かせない設備です。 インフラエンジニアとは インフラエ... -
WordPress
WordPressのデバッグログ設定と確認方法
wp-config.phpの設定 WordPressのデバッグ機能を有効にするために、wp-config.phpに以下の設定を追加します: デバッグモードを有効化 define('WP_DEBUG', true); define('WP_DEBUG_LOG', true); define('WP_DEBUG_DISPLAY', fals... -
Linux
リポジトリとパッケージ管理
パッケージ管理とは パッケージとはソフトウェアの実行プログラム、設定ファイルなどをまとめたです。 ソフトウェアのインストールはパッケージごとに行い、パッケージの管理方法はディストリビューションで変わってきます。 パッケージ管理システム パッ... -
Linux
GNUとUnixのコマンド
コマンドラインの操作 シェル 入力されたコマンドを受け付け、対応するプログラムを実行しているプログラムをシェルといいます。 シェル変数 変数を設定したシェル上でのみ有効な変数です。 exportコマンド シェル変数を環境変数に変更します。 操作シェル... -
Linux
ハードウェア、ディスク、パーティション、ファイルシステム
ハードウェアの基礎知識と設定 基本的なシステム、ハードウェア CPU コンピュータの中心的な処理装置、Linuxは多くのCPUに対応している。 メモリ コンピュータ内でデータを記憶する装置(メインメモリ、主記憶)です。電源が切れるとメモリの内容は消失し... -
WordPress
My-Snow-Monkey使用例、子テーマによるカスタマイズ
CSSファイルの読み込み My-Snow-Monkey プラグインをを有効化します FTPソフト等で下記の構成に wp-content/ ├── plugins/ │ └── my-snow-monkey/ # My Snow Monkeyプラグインのフォルダ │ ├── my-snow-monkey.php # プラグインのメインファイル │ └── ass... -
Linux
Linuxのインストールと仮想マシン・コンテナの利用 – 基本概念から【実践的なdocker-composeコマンド】まで
仮想マシン・コンテナの概念と利用 コンテナ型仮想化とは サーバ仮想化技術のひとつです。 コンテナの特徴(仮想マシンとの違い) 高速な起動と停止が可能 OSカーネルを共有する軽量な仮想化 アプリケーションレベルの分離 仮想マシンとコンテナの比較 仮... -
Linux
ファイル・ディレクトリの操作と管理
ファイルの所有者とパーミッション アクセス権 読み取りr書き込みw実行権x 権限ファイルの適用ディレクトリに適用読み内容を参照内容を参照書き書き込みファイルの新規作成、削除、名前変更実行ファイルを実行ディレクトリのファイルにアクセス、ディレク... -
Web制作
jQuery高頻度ライブラリまとめ(スライダー、lightboxなど)
jQueryとは JavaScriptのためのライブラリです。 JavaScriptの長い記述を短く書くことができ、複雑なJavaScriptを簡単に使うことができます。 jQueryでできること HTML、CSSの操作 表示、非表示 アニメーション jQueryのデメリット jQueryの読み込みによる... -
PHP
【PHP技術者認定試験問題】リクエスト情報、メールフォーム
スーパーグローバル変数 どのスコープでも有効で無常記念でアクセス可能 global命令不要 $_POST <form method="POST">タグでフォームから送信されたデータをポストデータといいます。 $_GET $_GET … クエリ情報 クエリ情報とはURLの末尾「~?」以... -
PHP
【PHP技術者認定試験問題】ユーザ定義関数、標準クラスライブラリ
ユーザ定義関数 ・ユーザ定義関数で引数、戻り値を明示的に指定すること・記述方法・型名 6 宣言型 function ファンクション名 (引数の型 引数, 引数の型 引数): 戻り値の型 { … } bool真偽値float浮動小数点数int整数string文字列callableコールバック関... -
React
Shadcn/UI 入門:React で洗練された UI コンポーネントを作る
こんにちは! 今回は、React のプロジェクトで洗練された UI コンポーネントを簡単に作成できる「shadcn/ui」について紹介します。Web 開発をしていると「もっとスタイリッシュなコンポーネントを作りたいけど、手間がかかるなあ…」と感じたことはありませ... -
WordPress
Docker 環境で WordPress を使用している場合「アップロードされたファイルが php.ini の upload_max_filesize ディレクティブを越えています。」について
「upload_max_filesize」と関連する設定を変更手順 1)カスタム php.ini ファイルを作成 custom-php.ini という名前のファイルを作成し、以下の内容を追加 ※docker-compose.ymlと同じディレクトリに作成 upload_max_filesize = 64M post_max_size = 64M me... -
PHP
PHPサンプルコード
標準入力 <?php // 標準入力がHelloの場合こんにちはを出力 $greeting = trim(fgets(STDIN)); if ($greeting == "Hello") { echo "こんにちは\n"; } ?> <?php // 1. 標準入力から文字列を 1 個受け取る // 2. その文字列が「... -
WordPress
All-in-One WP Migration
インポート容量を引き上げる方法 All-in-One WP Migrationではインポートの容量制限があるため、ファイルサイズが1GB以上のものは、データ移行ができません。 インポート容量上限をあげるには以下の方法があります。 有料版を使う 無料版の容量を上げる 有... -
PHP
PHP8準上級試験 合格のカギ、学習法
試験概要 準上級試験は、PHPの基本的な知識と実践的なスキルを証明する資格です。上級との主な違いは、出題範囲の深さと合格ラインにあります。 上級との比較: 準上級:合格ライン65%以上、基本的な実装力 上級:合格ライン70%以上、応用的な設計力 項目... -
未分類
Difyローカル開発環境セットアップガイド
https://dify.ai/jp ローカル環境で動かすメリット セキュリティ管理 機密データや会社の情報をローカルで完全に管理可能 カスタマイズの自由度 環境設定やモデルの詳細な調整が可能 必要に応じてソースコードの修正も可能 コスト管理 クラウド利用料金の... -
PHP
PHP
PHPの概要 PHPはサーバサイドスクリプト言語(Webサーバ実行される)です。 PHPの動作環境 CGI(Common Gateway Interface※)規格をサポートするWebサーバで機能します。 ※Webサーバでプログラムを実行する仕組み テキストと数の操作 ホワイトスペース ホ... -
未分類
Ctrl+Alt+Deleteの使い方完全ガイド
基本的な使い方 キーボードの「Ctrl」キー、「Alt」キー、「Delete」キーを同時に押します 画面が切り替わり、以下のメニューが表示されます: タスクマネージャー ログオフ パスワードの変更 タスクの切り替え シャットダウン 主な活用シーン 1. プログラ... -
TypeScript
【Next.js TypeScript 】React Swiper カルーセルスライダー実装、スライドが中央寄せにする方法
完成イメージ 手順 Next.js プロジェクトを用意します npx create-next-app@latest my-carousel-app プロジェクトに必要な依存関係をインストール Swiperと必要なアイコンライブラリをインストールします # Swiperのインストール npm install swiper # Fon... -
WordPress
WordPress自作、カスタマイズ
便利なプラグイン WP Multibyte Patch https://ja.wordpress.org/plugins/wp-multibyte-patch Show Current Template https://ja.wordpress.org/plugins/show-current-template テンプレートタグ テンプレートタグとはWordPressで用意されたカスタマイズす... -
WordPress
FTPソフトでホームページを公開
FTP(File Transfer Protocol) … ファイル転送プロトコル サーバにホームページのファイルをアップロードしたり、バックアップとしてダウンロードすることが可能 主なFTPソフト FileZilla FTPアカウント情報 FTPホスト名(FTPサーバー名) FTPユーザー... -
未分類
生産管理システム
生産管理システムの成果 業務効率の向上 時間短縮(在庫確認、発注、変更登録、製造履歴検索) 管理精度向上 発注量 在庫管理 生産管理 クラウド管理 → いつでもどこでも管理可能 生産管理の定義 生産計画の作成 出荷指示書 ピッキング 荷造り 配送先仕... -
基本情報技術者試験
【基本情報】表計算
相対 相対(セル, x, y)セルの行番号にx、列番号にy移動 例)相対(B3,3,2) 整数部 引数を超えない一番大きな整数を返す 整数部(-2.9)→-3 余剰 割り算の余を求める 剰余(8,3)→2 剰余(40,7)→5 切上げ 切上げ(算術式,桁位置) 切上げ(429,0) → 429 切... -
基本情報技術者試験
【基本情報】アルゴリズム、プログラミングを効率化するフローチャート
擬似言語 分岐 選択処理 条件式が真 → 処理を実行する 繰り返し 処理を実行する前、条件式が真の限り処理を繰り返す 処理を実行後、条件式が真の限り処理を繰り返す 条件式が真の間、繰り返し処理開始時に初期値を格納し、繰り返すたび増分を加える 解答... -
基本情報技術者試験
【基本情報】データベース
データベースとストレージの違い ストレージとデータベースの違い ストレージ (Storage) 特徴: 単純なデータ保存の仕組み 構造化されていないデータ 基本的なファイル操作のみ 例: ハードディスク SSD USBメモリ クラウドストレージ データベース (Databas... -
WordPress
【Snow Monkey】Googleサーチコンソール登録
Googleサーチコンソール登録手順 1)【Googleサーチコンソール】HTMLタグの値を確認 ▼Googleサーチコンソールにログイン「設定」→「ユーザーと権限」を選択 ▼三点ドットを選択→「所有権の確認の詳細」をクリック ▼HTMLタグが確認できます 2)【Snow Monkey... -
PHP
【Laravel】Sail開発環境、file_put_contents(…): Failed to open stream: Permission denied
Laravel + Docker(Sail)構築手順 – Windows版 Laravelインストール手順 VSCode起動してターミナルを起動してUbuntsを選択します 【VSCodeの場合】Ubuntu(WSL)に切り替えるターミナル右上の + 横の 下矢印ボタン ⏷ をクリック 実際にダウンロードされる... -
WordPress
「WordPress」をDockerで環境構築、WP本体をドキュメントルート直下ではなくサブディレクトリ配置する場合やphp.iniカスタムについても解説
【簡単】WordPress環境をDockerで構築手順 1)作業フォルダを作成 2)1)内に「docker-compose.yml」を作成 services: db: image: mysql:8.0 volumes: - db_data:/var/lib/mysql restart: always environment: MYSQL_ROOT_PASSWORD: somewordpress MYSQL_D... -
基本情報技術者試験
【基本情報】テクノロジ
ハードウェア AND演算(論理積) 入力入力出力000010100111 NOR演算(否定論理和) 入力入力出力001010100110 NAND演算(否定論理積) 入力入力出力001011101110 XOR演算(排他的論理和) 入力入力出力000011101110 データベース https://ntorelabo.com/?p... -
未分類
Photoshop
デザインのコツ 黄金比を意識した縦横比 1.618で割るもしくはかける メニューバー イメージ 色調補正 カラーバランス レイヤー 切り抜き等で生じた、境界線の不自然な状態を調節します。 メニューバーのレイヤー → マッティング → フリンジ削除、黒マ... -
HTML
要素(画像、動画、音声、フォーム)
media属性 media属性の値説明all全てのメディア(デフォルト)screen一般的なディスプレイprintプリンタprojectionプロジェクターhandheld携帯電話などの小さな機器braille点字ディスプレイembossed展示プリンタspeech音声読み上げソフトttyターミナルtvテ... -
さくらインターネット
さくらインターネットにGitHubからクローンする手順
ローカルからさくらインターネットにssh接続 .sshディレクトリ作成 .sshディレクトリとは? .sshディレクトリは、SSH(Secure Shell)に関する鍵や設定ファイルを保存するためのディレクトリです。SSHでの安全な接続を確立するために、公開鍵や秘密鍵が必... -
HTML
APIの基礎知識
マルチメディア・グラフィック系 SVG ベクターイメージ(情報を数値化して記録) → 複雑な画像の表示は処理速度が低下 XML 拡大・縮小後も画像が劣化しない 描写した図形はDOM要素 → JavaScriptで操作可能 ストリーミング配信 HLS、MPEG-DASH ダウンロ... -
HTML
レスポンシブ、マルチデバイス
Mobile First Luke Wroblewski氏が提唱 制約が大きいモバイルサイトにおいての利用を優先的に設計 メディアクエリ メディアクエリによって、条件にあわせてCSSを適用するかどうか指示を出すことができます。 論理積and論理和,(orは使用しない) ■link要素... -
Web制作
CSS
CSSの基礎知識 セレクタ セレクタ { プロパティ名 : 値 ;} link要素 <!doctype html> <html> <head> ..... <link rel="stylesheet" href="style.css"> </head> ..... style要素 <!doctype html> <html> <hea...