-
Amazon Bedrockの開発環境構築とAPI活用ガイド
はじめに Amazon Bedrockの活用方法は、コンソールのプレイグラウンドだけではありません。開発環境を構築し、外部APIと連携することで、より高度な機能の実装が可能になります。 従来のAmazon Bedrockのコンソール画面からの基本的な操作 AWSマネジメント... -
CORSエラー（Cross-Origin Resource Sharing Error）とは？「Access-Control-Allow-Origin」「プリ フライト リクエスト」
CORSエラーとは CORSは「異なるオリジン（ドメイン、プロトコル、ポート）間でのリソース共有」を制御するセキュリティの仕組みです。 そのため異なるオリジン間でリソースをリクエストしようとする際にブラウザが制限をかけることにより、CORSエラーが発... -
デジタルイラスト制作ツール徹底比較：Adobe Fresco vs Procreate vs CLIP STUDIO PAINT
はじめに デジタルイラストの世界では、様々な制作ツールが存在します。今回は、主要な3つのソフトウェアの特徴と違いを詳しく見ていきましょう。 Adobe Fresco 主な特徴 Adobe Creative Cloud との完璧な連携 ライブブラシ機能による水彩やオイルの自然な... -
Chrome開発者ツールで学ぶCookie・セッション管理完全ガイド – 実践的なデバッグ手法と活用例
はじめに Webアプリケーション開発において、Cookie・セッション管理の適切な実装は、セキュリティと快適なユーザー体験の両立に不可欠です。本記事では、Chrome開発者ツールを使用した実践的なデバッグ手法と、一般的な実装上の注意点を詳しく解説します... -
Amazon Bedrock Amazon Titan（AIモデル）を使用して、シンプルなチャットプログラムの作成、応用（テキスト校閲）
ローカル環境 Node.jsアプリ - 質問入力 - 回答表示 AWS Bedrock Amazon Titan - テキスト生成 - 自然言語処理 質問を送信 回答を受信 シンプルなチャットプログラムの作成 Node.jsのプロジェクトを初期化 npm init -y @aws-sdk/client-bedrock-runtime Be... -
【Next.js】ハイドレーションエラーSuspenseで解決
非同期データの取得はuseEffectかSuspenseで管理 ハイドレーションエラー ハイドレーションの流れとエラー 1. SSR HTMLを生成 {"name": "John"} {"time": "12:00"} 2. 初期HTML表示 ブラウザ表示 {"name": "John"} {"time": "12:00"} 3. ハイドレーション ... -
Laravelの主な認証方法
Laravelの主な認証方法たち ① Laravel Breeze 🐣 シンプルな認証スターターキット。 Blade or Inertia（Vue/React）対応。 ログイン、登録、パスワードリセットなど、基本機能がすぐ使える。 学習目的・小〜中規模アプリにぴったり！ ② Laravel Jet... -
Amazon Bedrockとは
Amazon Bedrockとは Amazon Bedrockは、さまざまなAIモデルを簡単に利用できるようにするAWSのサービスです 料金 基本的な課金構造 入力トークン数と出力トークン数で別々に課金 1,000トークンあたりの料金で計算 実際の使用量のみ請求（最低利用額なし） ... -
【WordPress PHPエラー】Fatal error: Allowed memory size of xxx bytes exhausted
Fatal error: Allowed memory size of 268435456 bytes exhausted (tried to allocate 430080 bytes) in /home/xxxx/public_html/xxxxx.com/wp-includes/wp-db.php on line xxxx WordPressで固定ページを編集しようと編集をクリックすると上記エラーが発生... -
さくらインターネットのデータベースにさくらのWebサーバ以外からAPI経由でアクセスする方法
さくらインターネットのWebサーバー外部から直接アクセスできない 直接MySQLへの接続はブロックされています（セキュリティ対策） 解決策：API経由の接続 ローカルPC Next.jsアプリ さくらサーバー PHP API MySQL データベース ❌ 直接接続は制限さ... -
LaravelでMySQLを使用したシンプルな認証システム （さくらインターネットDB作成手順）
MVCのルーティングの流れ 処理の流れ： ブラウザからリクエスト： ユーザーがURLにアクセス Routeが処理を振り分け： URLに合わせて適切なControllerを呼び出し ModelでDBアクセス： 必要なデータを取得/保存 Viewで画面を作成： HTMLを生成 ブラウザに結... -
Cursor始め方 セットアップ （日本語化 プライバシーモード）料金プラン比較
ダウンロード https://www.cursor.com インストーラーで初期設定 ダウンロードしたインストーラを起動 「Autocomplete Preferences（自動補完設定）」に関する設定画面 GH Copilot …従来のもの CursorのCopilot++（デフォルト） …より強力なバージョンの... -
WinSCPのインストール方法、隠しファイル表示
インストール 下記サイトよりhttps://winscp.net/eng/download.php 「DOWNLOAD WINSCP」をクリック ダウンロードしたインストーラーを実行 自分のみの利用の為、「現在のユーザー用にインストール」 使用許諾を「許諾」 標準的なインストール インターフェ... -
【Docker】ApacheのSSL証明書せって「mkcert」 「Let’s Encrypt」
Dockerで始めるセキュアな開発環境：HTTPS/SSL設定 Docker環境でのSSL接続設定について詳しく解説します。 HTTPSとSSL/TLSの関係って？ HTTPS（Hypertext Transfer Protocol Secure）は、Webブラウザとサーバー間の通信を安全に行うためのプロトコルです。... -
「PHPMailer」使用手順、セキュリティ（機密情報設定ファイルは別配置等）、Docker開発から本番環境へアップロード
ローカルDocker環境でPHPMailerを使用する初心者向けの手順 1）プロジェクトディレクトリ project-dir ├dockerfile └docker-compose.yml 2）Dockerfile作成 Dockerfileについて Dockerfileに記述された指示に従って、Dockerイメージ（設計図）を作成します... -
「ローカルとさくらインターネット」をssh接続、「さくらインターネットとGitHub」をssh接続の手順
「ローカルとさくらインターネット」をssh接続の手順 本手順はパスワード認証方式 パスワード認証方式公開鍵認証方式手段パスワード「公開鍵」など生成したファイル安全度低いパスワード流出で第3者にログインされる恐れがあります高い作業について簡単複... -
【VSCode連携】「GitHub Copilot」使い方
「GitHub Copilot」の特徴 VSCodeと連携可能（その他エディターも） 「GitHub Copilot」の費用 GitHub Copilot Individual サブスクリプションは、月単位または年単位のサイクルで利用できます。 毎月の支払いサイクルを選択すると、カレンダー月ごとに 10... -
Rubyインストール手順（Windows）
Rubyインストーラーをダウンロード RubyInstallerのダウンロードページhttps://rubyinstaller.org/downloads PCのビット数を確認し、インストーラーを選択 ▽設定→システム→バージョン情報より確認できます インストーラーを実行 1）「Install for me only... -
【WordPressエラー】Warning: Cannot modify header information – headers already sent by
エラー内容 functions.phpを作成し、編集していたところエラー発生。 「functions.php」の1行目のコメントアウトを削除したところ解消しました。 <!-- カスタムフィールドの値をタイトルに自動で反映 --> <?php add_action('acf/save_post', 'rep... -
【WordPressエラー】「Warning: Undefined variable $post in …」「Warning: Attempt to read property “ID” on null in …」
PHP7.3からPHP8.0に変更がありWordPressでエラーメッセージが発生しました。 表題のエラーがPHP8.0より通知ではなく、独立エラーとして扱われるようになった為です エラー内容 「get_the_terms」記事に基づくタクソノミーの取得のための下記の記述でエラー... -
【Googleタグマネージャー】「Page Path」で設定したが正しく発火しない
▽タグを作成したが発火しない トリガーの設定は「Page Path」 トリガーの設定は「Page Path」で「含む」です。 パスはドメインの後ろの文字列です 「パス（/○○/）」の文字も間違いなく、サイトと一致しているのにもかかわらず発火しない 発火しない理由 「... -
「Advanced Custom Fields」の内容を自動でタイトルに反映させたい
カスタムフィールドの値を自動でタイトルに反映させたい ▽投稿画面の編集項目をカスタムフィールドの値のみ（お知らせ内容のテキスト）にしています。 ▽タイトルがないので、（タイトルなし）となります。そこで「カスタムフィールドの値を自動でタイトル... -
All-in-One WP Migration Unlimited Extensionにて「Unlimited Extension は最新バージョンではありません。使用前にプラグインを更新する必要があります。」
アップデート手順 1）「All-in-One WP Migration」をインストール、有効化 2）「all-in-one-wp-migration-unlimited-extension」をインストール ▽プラグインを有効化 3）バージョンを更新 ▽「アップデートを確認」か「更新」をクリック Maximum upload fil... -
【生成AI】【illustrator】テキストからベクター生成の使い方（バージョン28.0～新機能）
テキストからベクター生成の使い方 ▽長方形ツールで表示させたい場所に作成 ▽「ウィンドウ」→「プロパティ」をクリックするとプロパティ、「テキストからベクター生成（Beta）」が表示されます ▽プロンプトに生成したい画像の検索ワードを入力するとバリエ... -
【WordPress】本文入力欄を非表示にする方法
「カスタム投稿タイプ」、「カスタムフィールド」を利用しているときに、本文入力欄が不要な場合があると思います。 非表示にする方法の紹介です functions.phpを編集する // 本文入力欄非表示 add_action( 'init' , 'my_remove_post_support' ); function... -
【Googleサーチコンソール】検索画面で表示させたくない「Googleのインデックス削除」
Googleのインデックス削除とは Googleのインデックス削除を申請すると検索画面で該当ページが表示されなくなります 不要なページのインデックス削除はSEOの観点からも重要 Googleサーチコンソールでインデックス削除の手順 ▽削除したいURLのあるサイトのプ... -
【Googleサーチコンソール】プロパティタイプ「ドメイン」と「URLプレフィックス」違い
「ドメイン」と「URLプレフィックス」の2種類のプロパティタイプ Googleサーチコンソールでプロパティを追加する場合「ドメイン」と「URLプレフィックス」の2種類のプロパティタイプがあります。 それぞれの特徴は下記の通り プロパティタイプが「ドメイン... -
【初心者】WordPressでjQuery使用するときの注意「Uncaught TypeError: $ is not a function」
Uncaught TypeError: $ is not a function WordPressでjQueryを使用し「Uncaught TypeError: $ is not a function」と表示され、処理がされないとなりました。 そもそも「$(function(){})」とは 「$(function(){})」の記述によって中の処理はHTMLを読み込... -
ネームサーバーをLOLIPOPに設定していて、DNSレコード設定がしたい場合（Googleサーチコンソールのプロパティの確認で必要）
Googleサーチコンソールでプロパティを追加する際にプロパティタイプをドメインを選択した場合、DNSレコードの確認が必要になります。（↓所有権の証明） そこでDNSレコードの設定をすることになるのですが、LOLIPOPではできません。 ですが、LOLIPOPのサー... -
Xserverドメインで取得した独自ドメインをロリポップで使用
手順 ▼Xserverレンタルサーバの管理画面にログインし対象のドメインを選択 ▼ドメインの契約情報のネームサーバー設定の「設定変更」を選択 ▼その他のサービスで利用するを選択しネームサーバー1、ネームサーバー2に下記の通り入力 ネームサーバー1uns01.lo... -
【LOLIPOP】サブディレクトリにインストールしたWordPressをドメイン直下で表示
インストール手順 ＜サーバーの管理画面＞WordPressのインストール ▼インストール先にwpディレクトリを指定 ▼インストール履歴 ＜WordPress管理画面＞ ▼「/wp」を削除し、画面左下の「変更を保存」ボタンをクリック ※この変更に時点でドメイン直下に下記.h... -
LOLIPOPサーバーで「All-in-One WP Migration」のアップロードファイルサイズ変更方法
ロリポップサーバー ユーザー専用ページ ▼ユーザー専用ページの「サーバーの管理・設定」→「PHP設定」を選択 ▼CGI版のPHPに変更 ▼設定項目のupload_max_filesizeが「2M」、「2M」しか設定できません そのため.htaccessに設定を追記する方法で行います ▼php... -
【お名前.com】Googleサーチコンソールで「所有権を証明できませんでした」の対応
起きていること ▼Googleサーチコンソールでプロパティを追加する際、下記の通り 対応方法 ▼お名前ドットコムにログインしドメイン設定を選択 ▼「DNS設定/転送設定」を選択 ▼該当ドメイン選択後、次へクリック ▼DNSレコード設定を利用するの「設定する」を... -
【WordPress】パンくずリスト作成（プラグインBreadcrumb NavXT）
Breadcrumb NavXT インストールして有効化 パンくずにホームページを含める。等設定をする テンプレートファイル編集 ファイルの表示したい箇所に下記コード <div class="breadcrumbs" typeof="BreadcrumbList" vocab="https://schema.org/"> <?p... -
Laravelの開発環境をDockerで構築し、さくらインターネットにデプロイする方法
大まかなフロー ローカルでDockerで作成した環境にLaravelをインストール srcフォルダをGithubにリポジトリを作成 ローカル環境 laravel-project/ │ ├── docker/ │ ├── php/ │ │ └── Dockerfile │ └── nginx/ │ └── default.conf │ ├── docker-compose.yml... -
【GTM】サンクスページがないフォームの計測
フォーム送信完了のイベントの作成 タグの作成 名前：問い合わせ完了2 タグの種類：Google アナリティクス: GA4 イベント イベント名：generate_lead イベントパラメータ イベントパラメータ：form_type、値：contact2 イベントパラメータ：form_complete_... -
【Googleタグマネージャー】バナー表示イベント
バナークリックイベントの作成 ↓ページ下部のようなIDが付与されているバナーの表示イベントを考えます。 ▼Googleタグマネージャーの変数より【Click Element】があるか確認、なければ追加します タグの作成 下記記事のボタンAクリックをコピーして作成し... -
【CSS】flexボックスでjustify-content: center;だけど子要素は左寄せにしたい場合
↑下の行を左寄せにしたい display: grid; display: flex;ではなくdisplay: grid;にする .grid { display: grid; grid-template-columns: repeat(auto-fit, 80px); justify-content: center; max-width: 400px; grid-gap: 30px; background: #f2f2f2; paddi... -
WordPressでdrawer.js実装
CDN読み込み 公式サイト：https://git.blivesta.com/drawer ▼一部参考 https://www.miso.blog/jquery-drawer 公式サイトよりCDNの記述をコピーしてheadタグ内に張り付け ▼functions.php <?php add_action('wp_head', function () { ?> <!-- drawe... -
【WordPress】カラーパレット追加方法
【Wordpress】カラーパレット追加方法 ▼functions.php function my_wp_theme_json_data_theme( $theme_json ){ $new_data['version'] = 2; // カラーパレット カスタマイズ 既存パレットに追加（単色） $new_data['settings']['color']['p... -
【Googleタグマネージャー】ボタンのHTML要素ID属性からイベント設定
クリック対象にID付与する理由 Googleタグマネージャーでボタンのクリック計測するとき、IDを付与することにより正確に計測が可能です WordPress編集画面でボタンにIDを付与する Button-A <div class="wp-block-snow-monkey-blocks-buttons smb-buttons... -
【Googleタグマネージャー】内部リンククリックイベント作成手順
1）組み込み変数の設定 ▼Googleタグマネージャーで変数を選択し組み込み変数の設定をクリック ▼Click URLとClick Textを追加 2）タグの作成 タグの設定 名前：内部リンククリック（任意のもの） タグの種類：Google アナリティクス: GA4 イベント イベント... -
【Google Tag Manager】サンクスページ到達イベントの作成
準備 今回はプラグイン「コンタクトフォーム7」でフォームを作成、サンクスページを下記記事参考で作成しました https://wpmake.jp/contents/plugin/contact-form7/thanks-page タグの作成 ▼サイドメニューのタグを選択し新規をクリック ▼タグの設定を下記... -
GoogleアナリティクスGA4
指標、ディメンション 指標…数字 ディメンション…分析軸（指標の切り口） 代表的な指標 指標名内容アクティブユーザ数ユニークユーザー数表示回数ページビューセッションWebサイトへの訪問回数エンゲージメント率ユーザーにとって価値のある訪問の割合※10... -
【Next.js】ライブラリ使わないでカルーセルスライダー
demo（Next.jsの静的ビルドファイルをiframeで表示したもの） Next.jsを使って無限ループ機能付きのシンプルなカルーセルを実装します（画像スライドショーの基本的な機能をおさえつつ、メンテナンスしやすいコードを目指します） このカルーセルには以下... -
【WordPress】アクションフック、フィルターフック使用方法
アクションフックとは 処理の追加が可能です functions.php で add_action や add_filter を記述していきます ※本サイトはWPcodeにて行いました 参考サイト：https://idasalon.com/?p=250#index_id3 add_action('フック名', func... -
「Googleタグマネージャー」アカウントを作る→「GA4」を設定する方法
Google Tag Manager（GTM）とは Google Tag Managerで扱うタグとはWebサイトとマーケティングツール間で情報をやりとりするためのコードです Googleアナリティクス、Google広告など、、 <script></script>のような形式で記述される場合が多い... -
Googleアナリティクス導入
Googleアナリティクスとは 無料で使用可能で、非常に高機能なツールです。 サイト全体のアクセス数、ページ別、流入元の状況など、数多くのデータが確認できます。 UAとGA4 GA4（第四世代）が2020年登場、UA（従来のGoogleアナリティクス）は2023年7月にサ... -
ホームページ制作の流れ
ホームページ制作フロー ホームページ作成の依頼をうける 業務内容をヒアリングする サーバ契約、ドメインの取得 ワイヤーフレーム、デザインカンプ、参考のサイト、ロゴ、画像、テキストの有無 制作の流れを共有確認 デザインがない場合 既にWordPressを... -
React でアプリ作成
StackBlitz githubで認証試すが利用できない JavaScriptにてtodoアプリ 追加 未完了のTODO 完了のTODO React VSCode インストール 参考記事：https://teto-tech.com/article/react-start1 Node.jsのインストール ▼「my-app」を作成 → この中に環境が構築...
