# ノベブロ / NOVEBLO > Webコーディング（HTML/CSS/JavaScript）やEC-CUBEカスタマイズ、Webアプリなど --- ## 投稿 - [【無料利用OK】Webビンゴツール（ルーレット）](https://noveblo.com/bingo/): このツールは ... 回 使われています... - [【GAS×JS】スプレッドシートの情報を取得してサイトに表示する方法](https://noveblo.com/gas-js-spreadsheet-display/): 前回、Google Apps Scrip... - [Webサイコロツール（6面と10面、1～10個同時振り対応）](https://noveblo.com/dice/): このツールは ... 回 使われています... - [【無料利用OK】Webくじ引きツール](https://noveblo.com/kujibiki/): このツールは ... 回 使われています... - [【GAS×JS】ボタンのクリック数をスプレッドシートに記録する方法](https://noveblo.com/gas-js-button-click-counter/): 「このボタン、何回押されたんだろう？」そ... - [【EC-CUBE 4】CSV出力／登録に新規項目を追加するカスタマイズ](https://noveblo.com/eccube-csv-customize/): EC-CUBE 4には、商品データをCS... - [【EC-CUBE 4】ページ管理のページの並び順を入れ替えるカスタマイズ](https://noveblo.com/eccube-page-sort/): EC-CUBE4の管理画面「コンテンツ管... - [iPhoneの写真を縮小→JPG変換→OneDrive(Googleドライブ)に保存する方法（ショートカットアプリ）](https://noveblo.com/shortcuts-image-upload/): 個人的によく使うショートカットアプリ。i... - [【無料利用OK】Webおみくじツール](https://noveblo.com/omikuji/): このツールは ... 回 使われています... - [【無料】ポモドーロ・マルチタイマー／0秒思考や筋トレにも](https://noveblo.com/pomodoro-timer/): このツールは ... 回 使われています... - [【自動計算】日数 / 開始日 / 終了日 を求める計算ツール](https://noveblo.com/auto-days-simulator/): このツールは ... 回 使われています... - [【自動計算】積立額 / 年利 / 期間 / 将来金額 を求める複利計算ツールと計算方法](https://noveblo.com/auto-investment-simulator/): このツールは ... 回 使われています... - [【EC-CUBE 4】価格帯から商品を検索できるブロックを作ってみた](https://noveblo.com/price-search-block/): フォームに価格を入力してボタンをクリック... - [【EC-CUBE 4】ショップメールがGmailなどで受信できない問題について](https://noveblo.com/mail-blocked/): 商品の購入や問い合わせなどを行った際、シ... - [【EC-CUBE/XServer】PHPのバージョン切り替え方法（コマンドライン）](https://noveblo.com/eccube-xserver-php-version/): XServer（新サーバーパネル）でPH... - [【GAS】スプレッドシートからメールを一斉送信（メールマージ）する方法](https://noveblo.com/gas-spreadsheet-mailmerge/): 本記事では、 方法を、実例を用いて紹介し... - [【GAS】Googleフォームの回答をスプレッドシートまたはスライドに自動転記する方法](https://noveblo.com/gas-form-spreadsheet-slide/): 本記事では、 方法を、実例（Google... - [Google Apps Scriptで業務自動化！〜GASの基本と業務で使える実践例〜](https://noveblo.com/google-apps-script/): Google Apps Script（G... - [【GAS】スプレッドシートからスライドに自動転記する方法](https://noveblo.com/gas-spreadsheet-slide/): 本記事では、 方法を、実例（スプレッドシ... - [【GAS】受信メールの内容をスプレッドシートに自動転記する方法](https://noveblo.com/gas-spreadsheet-gmail-transfer/): 本記事では、 方法を、実例（メールでの注... - [【GAS】スプレッドシートからメールの下書きを作成する方法](https://noveblo.com/gas-spreadsheet-gmail/): 本記事では、スプレッドシートのセルに入力... - [【EC-CUBE4】特定税率の商品詳細ページに共通のテキストやアイコンを表示する](https://noveblo.com/eccube-taxrate-icon/): 特定の消費税率を設定した商品の詳細ページ... - [【EC-CUBE 4】管理画面 / 商品管理のカスタマイズ（4）　～ ソート機能 ～](https://noveblo.com/eccube-adminpage-sortrecord/): 以下カスタマイズの続き・ソート（並び替え... - [【EC-CUBE4】よくある質問ページを作ってみた（2）](https://noveblo.com/eccube-faq-2/): アコーディオンUIを採用した、よくある質... - [【EC-CUBE4】よくある質問ページを作ってみた（1）](https://noveblo.com/eccube-faq/): ECサイトなどで見かける「よくある質問（... - [【YouTube】動画投稿を始める方向けのチャンネル開設手順（PC）](https://noveblo.com/youtube-starter/): YouTubeに初めて動画を投稿したい方... - [【無料利用OK】Web抽選会ツール](https://noveblo.com/lottery/): このツールは ... 回 使われています... - [【JS】効果音やBGM（サウンド）の実装方法](https://noveblo.com/js-audio/): 本記事では、以下のような効果音やBGMを... - [【自動計算】割り勘計算ツール（立て替え対応）](https://noveblo.com/calculate-split-bill/): このツールは ... 回 使われています... - [【JS&CSS】タスクの進捗状況を示すプログレスバーの実装方法](https://noveblo.com/js-css-progress-bar/): 本記事では、以下のようなプログレスバーを... - [【JS&CSS】ページ読み込み完了までローディングアイコンを表示する](https://noveblo.com/js-css-loadingicon/): 本記事では、以下のようなローディングアイ... - [【JS&CSS】画像をズームイン＆ふわっと切り替える方法](https://noveblo.com/js-css-zoomfadein-images/): 本記事では、以下のように画像がズームイン... - [【自動計算】合計から比率分割できるツールと計算方法](https://noveblo.com/calculate-ratio-divide/): このツールは ... 回 使われています... - [【JS&CSS】よくある質問（FAQ）を実装する（アコーディオン）](https://noveblo.com/js-css-accordion-faq/): 本記事では、以下のような「よくある質問集... - [【JS&CSS】タブ＆モーダルを組み合わせてお知らせ表示を実装する](https://noveblo.com/js-css-modal-notice/): 本記事では、以下のようなモーダルウィンド... - [【EC-CUBE4】特定タグの商品詳細ページに共通のテキストやアイコンを表示するカスタマイズ](https://noveblo.com/eccube-tag-notice/): 特定のタグが付いた商品の詳細ページ上部（... - [【EC-CUBE4】特定カテゴリーの商品詳細ページに共通のテキストやアイコンを表示するカスタマイズ](https://noveblo.com/eccube-category-notice/): 特定のカテゴリーに属する商品の詳細ページ... - [【EC-CUBE 4】商品一覧を複数ページに分割表示（ページネーション）するカスタマイズ](https://noveblo.com/eccube-pagination/): 本記事では、独自に作成した商品一覧ページ... - [【EC-CUBE 4】商品のソート（並び替え）オプションの実装方法](https://noveblo.com/eccube-sort-option/): 先日、商品一覧ページにある商品並べ替え（... - [【EC-CUBE 4】遭遇したエラー＆対処法まとめ](https://noveblo.com/eccube-error/): EC-CUBE 4のカスタマイズに際し、... - [【EC-CUBE 4】 商品一覧ページの並び順（ソート順）を新規追加するカスタマイズ](https://noveblo.com/eccube-product-list-sort-order/): 本記事では、以下のように商品一覧ページ右... - [【JS&CSS】ダークモード（テーマ）切り替えボタンの実装方法](https://noveblo.com/js-css-darkmode/): 本記事では、以下のようにボタンクリックで... - [【EC-CUBE 4】ヘッダーを上部に固定し、スクロールで追従させるカスタマイズ](https://noveblo.com/eccube-header/): 本記事では、以下のようにヘッダー（商品検... - [【JS&CSS】途中からフワッと表れて追従する固定ヘッダーの作り方](https://noveblo.com/js-css-header-fixed/): 以下のように画面をスクロールすると、ヘッ... - [【無料】メモ書きにも使えるToDoリストとその作り方](https://noveblo.com/to-do-lists/): Add Clear 使い方 ご利用にあた... - [【JS】ドラッグ＆ドロップで表示を入れ替えるUI](https://noveblo.com/drag-and-drop-ui/): 本記事では、ドラッグ＆ドロップで複数のア... - [【JS】ドラッグ＆ドロップの実装方法](https://noveblo.com/drag-and-drop/): 本記事では、以下のように直感的にアイテム... - [【JS】<iframe>の高さを引用先ページの高さに自動調節（別ドメイン）](https://noveblo.com/js-iframe-postmessage/): 先日、引用先ページが同一ドメインの場合の... - [【JS】<iframe>の高さを引用先ページの高さに自動調節（同一ドメイン）](https://noveblo.com/js-iframe-contentdocument/): タグを用いると、一つのWebページに別の... - [【CSS】レスポンシブデザインに役立つプロパティ＆関数一覧](https://noveblo.com/css-responsive-design/): PC、タッチパネル、スマホなど、大きさが... - [【CSS】aspect-ratioを使って画像や動画の縦横比を簡単指定](https://noveblo.com/css-aspect-ratio/): CSSのaspect-ratioプロパテ... - [【CSS】clamp()を使ったレスポンシブデザイン](https://noveblo.com/css-clamp/): clampはCSSで使われる関数。フォン... - [【JS】addEventListenerで使えるイベントタイプ一覧](https://noveblo.com/javascript-addeventlistener-eventtype/): addEventListener メソッ... - [【JS / Local Storage】To-Doリストを実装してみた](https://noveblo.com/javascript-todo-lists/): 先日、JavaScriptの「Local... - [【JS / fetch API】郵便番号から住所を検索して表示する方法](https://noveblo.com/javascript-fetch-api-zipcloud/): 先日、JavaScriptの「fetch... - [【JS】初心者ガイド：fetch API & DOMparser](https://noveblo.com/javascript-fetch/): JavaScriptの「fetch AP... - [【JS API】初心者ガイド：Local Storage](https://noveblo.com/javascript-local-storage/): 「Local Storage」とは、ブラ... - [【CSS】初心者ガイド：疑似クラスセレクター／:has()](https://noveblo.com/css-selector-has/): 特定の要素を選択するための「CSSセレク... - [【EC-CUBE 4】独自の定数（パラメータ）を設定・管理する方法](https://noveblo.com/eccube-yaml/): 数値などを一元管理することで、メンテナン... - [【EC-CUBE 4】注文内容に新しい項目を追加し、注文画面をカスタマイズしてみた](https://noveblo.com/eccube-order-customize/): 各注文には、その注文者や支払い方法、注文... - [【EC-CUBE 4】Twig Extensionを使って新しいフィルターを作成する](https://noveblo.com/eccube-twigextension-filter/): 本記事では、Twigテンプレートエンジン... - [【EC-CUBE 4】Serviceの役割・実装方法](https://noveblo.com/eccube-service/): 本記事では、特定の機能をまとめておけるS... - [【EC-CUBE 4】管理画面のログインIDとパスワードが分からないときの対処法](https://noveblo.com/eccube-admin-password/): 管理画面にログインしようとして、上図のよ... - [【EC-CUBE 4】wwwやindex.phpを含むURLから含まないURLへ自動転送する](https://noveblo.com/eccube-redirect/): EC-CUBEでは、以下のように「www... - [【EC-CUBE/Xserver】テスト環境を別ドメインに作成する](https://noveblo.com/xserver-eccube-test/): 本番環境で稼働中のEC-CUBEサイトを... - [【Git】ローカル開発／ブランチ開発でよく使うコマンド実施例](https://noveblo.com/git-branch-command-example-for-local/): 筆者の備忘録用に、ブランチ開発におけるG... - [【Git】ローカル開発／ブランチ開発でよく使うコマンド一覧](https://noveblo.com/git-branch-command-for-local/): 筆者の備忘録用に、ローカル開発におけるG... - [【Git】ローカル開発／基本操作でよく使うコマンド実施例](https://noveblo.com/git-command-example-for-local/): 筆者の備忘録用に、ローカル開発におけるG... - [【Git】ローカル開発／基本操作でよく使うコマンド一覧](https://noveblo.com/git-command-for-local/): 筆者の備忘録用に、ローカル開発におけるG... - [【ChatGPT × WordPress】コピペだけでWebアプリを作ってみた（パーセント計算ツール）](https://noveblo.com/chatgpt-wordpress-percentapp/): プログラミングをする上で、もはや欠かせな... - [【無料】画像に背景色を付与するWebツール](https://noveblo.com/background-color-change-image/): 選択した画像に好きな背景色を追加できる、... - [色見本からカラーコードを取得（コピー）するWebツール](https://noveblo.com/color-picker/): 好きな色をクリックまたはタップすると、そ... - [【自動変換 ＆ 一覧から取得】RGBとカラーコード](https://noveblo.com/color-code-tools/): コンピュータにとっては便利でも、人にとっ... - [【超便利】iPhoneの画像を背景白色／透明にする方法（ショートカットアプリ）](https://noveblo.com/no-background-iphone/): iPhoneに保存した写真（画像）の背景... - [【無料】画像サイズを小さくできるWebツール](https://noveblo.com/resize-image/): 選択した画像を1. 0～0. 1倍サイズ... - [【CSS】テキストなどの要素をスライド表示するアニメーション](https://noveblo.com/css-slidein-animation/): 本記事では、以下のように指定したテキスト... - [【JS&CSS】画像をクリックしたら拡大表示する方法（モーダルウィンドウ）](https://noveblo.com/javascript-css-modal-image/): 画像をクリック または タップすると、画... - [【EC-CUBE 4】PDF資料のダウンロードボタンを作る](https://noveblo.com/eccube-pdf-download/): こちら の公式ページを参考に、注文書のP... - [【JS&CSS】モーダルウィンドウの作り方](https://noveblo.com/javascript-css-modal-window/): ボタンクリックで、画面中央にフワッと別ウ... - [【EC-CUBE 4】ゲスト購入に会員情報を後から紐づける方法](https://noveblo.com/eccube-order-related-to-member/): 会員登録をせずゲストで発注した注文情報に... - [【EC-CUBE 4】商品をスライダー（カルーセル）で表示する方法](https://noveblo.com/eccube-slider-display/): 商品一覧をスライダー（カルーセル）表示す... - [【EC-CUBE 4】Twig まとめ(4)　～ マクロについて ～](https://noveblo.com/eccube-twig-macro/): 本記事では、Twigテンプレートでコード... - [【自動計算】BMI / 身長 / 体重 の計算ツール](https://noveblo.com/calculate-bmi/): このツールは ... 回 使われています... - [【自動計算】素因数分解の計算ツールと計算方法](https://noveblo.com/calculate-prime-factorization/): このツールは ... 回 使われています... - [【自動計算】分数の約分ツールと計算方法](https://noveblo.com/calculate-fraction-simple/): このツールは ... 回 使われています... - [【EC-CUBE 4】マスターテーブルを新規に作成し、管理画面で操作する方法](https://noveblo.com/eccube-create-mtb/): この記事では、オリジナルのマスターテーブ... - [【EC-CUBE 4】管理画面 / 商品管理のカスタマイズ（3）　～ 編集・削除 ～](https://noveblo.com/eccube-adminpage-editrecord/): 前回・前々回、管理画面の商品登録に新メニ... - [【EC-CUBE 4】管理画面 / 商品管理のカスタマイズ（2）　～ データ追加 ～](https://noveblo.com/eccube-adminpage-addrecord/): 前回、管理画面の商品登録に新メニュー【メ... - [【EC-CUBE 4】管理画面 / 商品管理のカスタマイズ（1）　～新メニュー追加～](https://noveblo.com/eccube-adminpage-customize-basis/): この記事では、以下のような管理画面の商品... - [【EC-CUBE 4】デフォルトのRepositoryを拡張するカスタマイズ](https://noveblo.com/eccube-repository-custom/): この記事では、既存のリポジトリを拡張して... - [【EC-CUBE 4】EntityTypeを使ってフォームを追加する方法](https://noveblo.com/eccube-entitytype/): 以下記事の応用編として、EC-CUBE管... - [【EC-CUBE 4】既存テーブルと新規テーブルを連携（リレーション）するカスタマイズ](https://noveblo.com/eccube-linking-default-table/): 以下記事（新規作成した2つのテーブルを連... - [【EC-CUBE 4】複数のテーブル同士を連携（リレーション）するカスタマイズ](https://noveblo.com/eccube-table-linking/): この記事では、以下のように2つのテーブル... - [【超便利】iPhoneの写真をワンタッチでPDFに変換する方法（ショートカットアプリ）](https://noveblo.com/pdf-iphone/): iOS 13から標準装備となっている『シ... - [【自動計算】分数の計算ツール（足し算・引き算・掛け算・割り算）](https://noveblo.com/calculate-fraction/): このツールは ... 回 使われています... - [【自動計算】確率を求める計算ツールと計算方法](https://noveblo.com/calculate-probability/): このツールは ... 回 使われています... - [【EC-CUBE 4】商品ページに在庫数を表示する方法](https://noveblo.com/eccube-stock-display/): 商品登録では商品ごとに「在庫数」が設定で... - [【自動計算】比を簡単にするツールと計算方法](https://noveblo.com/calculate-ratio-simple/): このツールは ... 回 使われています... - [【自動計算】利益率 / 売価 / 原価 を求める計算ツールと計算方法](https://noveblo.com/profit-auto-cal/): このツールは ... 回 使われています... - [【自動計算】割合(パーセント)の計算ツールと計算方法](https://noveblo.com/calculate-percentage/): このツールは ... 回 使われています... --- ## 固定ページ - [【Webアプリ】利用規約](https://noveblo.com/terms-of-service/): ノベブロ（以下、当ブログ）で公開している... - [学習用デモページ（引用先）](https://noveblo.com/reference-page/): 実装例作成のため、本ページは以下2つのペ... - [TOP](https://noveblo.com/): NEW｜新着記事 Youtube｜ワンポ... - [自己紹介](https://noveblo.com/profile/): 本サイトの管理者「ひろ」です。 1986... - [プライバシーポリシー](https://noveblo.com/privacy-policy/): ノベブロ（以下、当ブログ）のプライバシー... - [ノベブロについて](https://noveblo.com/site_profile/): ノベブロにお越しいただき、ありがとうござ... - [お問い合わせ](https://noveblo.com/inquiry/): --- # # Detailed Content ## 投稿 ### 【無料利用OK】Webビンゴツール（ルーレット） - Published: 2025-05-28 - Modified: 2025-05-28 - URL: https://noveblo.com/bingo/ - カテゴリー: Webアプリ このツールは ... 回 使われています。 PCやスマホの画面上で、手軽にビンゴができるルーレットツールを作成しました。1～75までの数字がランダムに出ます（一度出た数字はリセットするまで出ません）。気軽にご利用ください。 ご利用にあたっては、本Webアプリの 利用規約 も合わせてご確認ください。 Webビンゴ ルーレット ? ルーレットを回す 出た数字 効果音あり 効果音なし 出た数字の並び順 出た順 小さい順 大きい順 リセット イベントツールにオススメのWebアプリ その他のWebアプリ（... --- ### 【GAS×JS】スプレッドシートの情報を取得してサイトに表示する方法 - Published: 2025-05-23 - Modified: 2025-05-23 - URL: https://noveblo.com/gas-js-spreadsheet-display/ - カテゴリー: GAS, HTML/CSS/JavaScript 前回、Google Apps Script(GAS)＋ JavaScript を連携し、Webサイトのボタンクリック数をGoogleスプレッドシートに記録する方法を紹介しました。 今回は、スプレッドシートに保存したデータをWebサイトに表示する方法を紹介します。 実装例 現在のカウント: 読み込み中... メッセージ: 読み込み中... クリック！ 取得先のスプレッドシート（カウントは10の時） スプレッドシートのB1、B2セルのデータを取得して、カウント数とメッセージを表示する。 ボタンをクリ... --- ### Webサイコロツール（6面と10面、1～10個同時振り対応） - Published: 2025-05-20 - Modified: 2025-05-28 - URL: https://noveblo.com/dice/ - カテゴリー: Webアプリ このツールは ... 回 使われています。 Web上でサイコロを振れるWebツールです。サイコロの種類（6面か10面）サイコロの数を選択（1～10個）し、「サイコロを振る」ボタンを押すと、ランダムに数字が表示されます。10面サイコロの出目は 0～9 です。 6面サイコロ 10面サイコロ 1個 2個 3個 4個 5個 6個 7個 8個 9個 10個 サイコロを振る 効果音あり 効果音なし 最小値 - 最大値 - 期待値 - ご利用にあたっては、本Webアプリの 利用規約 も合わせてご確認ください。... --- ### 【無料利用OK】Webくじ引きツール - Published: 2025-05-16 - Modified: 2025-05-28 - URL: https://noveblo.com/kujibiki/ - カテゴリー: Webアプリ このツールは ... 回 使われています。 PCやスマホの画面上で、手軽にくじ引きができるツールを作成しました。気軽にご利用ください。 ご利用にあたっては、本Webアプリの 利用規約 も合わせてご確認ください。 Webくじ引き 効果音あり 効果音なし 待ち時間： 秒 くじ引きを作成 内容を変更 くじを引く ？？？ 抽選履歴 くじを戻す 初期化 Webくじ引きの使い方 入力エリアにくじの内容を入力する。 くじの内容は1行に1つずつ入力します。くじの内容は、必ず1行に1つずつ入力してください。空行は... --- ### 【GAS×JS】ボタンのクリック数をスプレッドシートに記録する方法 - Published: 2025-04-23 - Modified: 2025-05-23 - URL: https://noveblo.com/gas-js-button-click-counter/ - カテゴリー: GAS, HTML/CSS/JavaScript 「このボタン、何回押されたんだろう？」そんなときに便利なのが、Google Apps Script(GAS)＋ JavaScript で作る簡単な記録システム！本記事では、クリック数をスプレッドシートに記録する方法を、コード付きで紹介します。 準備するもの Googleスプレッドシート（B1セルを記録用として使用） GAS（Webアプリとして公開） Webサイト（HTML＋JavaScript） JavaScriptでクリックイベントをGASに送信 スプレッドシートとGASの設定 新規のスプレッ... --- ### 【EC-CUBE 4】CSV出力／登録に新規項目を追加するカスタマイズ - Published: 2025-04-15 - Modified: 2025-04-16 - URL: https://noveblo.com/eccube-csv-customize/ - カテゴリー: EC-CUBE 4 EC-CUBE 4には、商品データをCSVで出力したり、CSVファイルをアップロードして一括で修正・登録できる便利な機能があります。しかし、標準では用意されていない独自の項目（たとえば「生産地」「JANコード」「ブランド名」など）をCSVで扱いたい場合、少しカスタマイズが必要になります。 そこで本記事では、以下のように「生産地（production_area）」という新しい項目を追加し、CSVからの読み込み・保存ができるようにする具体的なカスタマイズ手順をご紹介します。 商品テーブル（dtb_p... --- ### 【EC-CUBE 4】ページ管理のページの並び順を入れ替えるカスタマイズ - Published: 2025-04-10 - Modified: 2025-04-14 - URL: https://noveblo.com/eccube-page-sort/ - カテゴリー: EC-CUBE 4 EC-CUBE4の管理画面「コンテンツ管理 → ページ管理」では、ページの並び順を変更する機能が標準では備わっていません。多数の固定ページを管理する際、任意の順序でページを整理できると、作業効率が向上します。この記事では、独自の「並び順（sort_no）」カラムを追加し、管理画面でページの順序を自由に設定できるようにするカスタマイズ方法を紹介します。 ▼▼▼カスタマイズ（順番入れ替え）後▼▼▼ 【動作環境】EC CUBEのバージョン：4. 3. 0サーバー：XServer カスタマイズの手順 カ... --- ### iPhoneの写真を縮小→JPG変換→OneDrive(Googleドライブ)に保存する方法（ショートカットアプリ） - Published: 2025-04-09 - Modified: 2025-04-13 - URL: https://noveblo.com/shortcuts-image-upload/ - カテゴリー: ショートカット, 画像処理 - タグ: iPhone 個人的によく使うショートカットアプリ。iPhoneで撮影した写真をそのままOneDriveなどに転送するとかなり重いので（特に複数写真の場合）、 写真を小さく（軽く）する 写真をJPGに変換する そのままだとHEIFと呼ばれる形式になり、Windows PCなどで操作しづらい OneDriveやGoogleドライブに保存する この一連の操作に対応したショートカットを作ってみたので、本記事で公開します。 ▼▼▼本記事は以下記事の応用編です▼▼▼ 無料アプリ『ショートカット』とは？ 簡単にいうと、決... --- ### 【無料利用OK】Webおみくじツール - Published: 2025-04-04 - Modified: 2025-05-28 - URL: https://noveblo.com/omikuji/ - カテゴリー: Webアプリ このツールは ... 回 使われています。 PCやスマホの画面上で、手軽におみくじを行えるツールを作成しました。気軽にご利用ください。（当サイトでは広告が表示されますが、おみくじ実施中に広告が表示されることはありません） ご利用にあたっては、本Webアプリの 利用規約 も合わせてご確認ください。 Webおみくじ 新しいおみくじを追加する % × % × % × この内容でおみくじを作成 おみくじの内容をリセット おみくじ 当たる確率 (%) 効果音あり 効果音なし 抽選待ち時間： 秒 おみくじを... --- ### 【無料】ポモドーロ・マルチタイマー／0秒思考や筋トレにも - Published: 2025-03-25 - Modified: 2025-04-22 - URL: https://noveblo.com/pomodoro-timer/ - カテゴリー: Webアプリ このツールは ... 回 使われています。 作業時間 / 休憩時間（インターバル） / 繰り返し回数を入力し、作業開始と終了のタイミングをアラームで知らせます。ポモドーロ・テクニックだけでなく、筋トレや0秒思考などにもご活用いただけます。 作業時間： 分 秒 休憩時間： 分 秒 繰り返し：回 サウンドなし チャイム ゴング 音量： 開始 タイマー拡大表示 リセット 01:00 00:00 ※ESCキーまたは「閉じる」ボタンで解除できます。 閉じる スマホでのご利用時、稀に音が鳴らないバグが発生す... --- ### 【自動計算】日数 / 開始日 / 終了日 を求める計算ツール - Published: 2025-03-17 - Modified: 2025-04-22 - URL: https://noveblo.com/auto-days-simulator/ - カテゴリー: Webアプリ このツールは ... 回 使われています。 生まれた日 / 入学・入社した日 / 結婚した日から、今日までは何日？数字を入力するだけでサクッと計算できる日数計算ツールです。 開始日 終了日 日数 ～ 日 ～ 日 ～ 日 クリア いずれかの入力フォーム2つに日付 / 数値を入力すると、残りの1つが自動的に算出されます。 ご利用にあたっては、本Webアプリの 利用規約 も合わせてご確認ください。 生まれてから死ぬまでの日数 厚生労働省の「簡易生命表（令和5年）」によると、2023（令和5）年の日本人... --- ### 【自動計算】積立額 / 年利 / 期間 / 将来金額 を求める複利計算ツールと計算方法 - Published: 2025-03-16 - Modified: 2025-04-22 - URL: https://noveblo.com/auto-investment-simulator/ - カテゴリー: Webアプリ このツールは ... 回 使われています。 毎月1万円・年利4%で10年間運用する場合、将来金額はいくらになるか？数字を入力するだけでサクッとシミュレーションできる複利計算ツールです。拠出は毎月末、複利は月次での計算結果です。 毎月の投資額 年利 年利(%) 運用期間(年) 将来金額 % 詳細 % 詳細 % 詳細 % 詳細 クリア 「詳細」ボタンを押すと、ここに推移グラフが表示されます。 いずれかの入力フォーム3つに数値を入力すると、残りの1つが自動的に算出されます。「詳細」ボタンでグラフ化もで... --- ### 【EC-CUBE 4】価格帯から商品を検索できるブロックを作ってみた - Published: 2025-03-11 - Modified: 2025-04-14 - URL: https://noveblo.com/price-search-block/ - カテゴリー: EC-CUBE 4 フォームに価格を入力してボタンをクリックすると、その価格に合った商品を検索して一覧表示してくれるブロックをトップページに実装してみたので、その手順を公開します。 実装内容 トップページに価格検索ブロック（search. twig）を設置 価格検索ブロック：「最小価格」「最大価格」の入力フォームと「商品を探す」ボタンを設置 検索した商品一覧を表示するページ（search-list. twig） 入力した価格レンジに当てはまる商品一覧が表示される 【動作環境】EC CUBEのバージョン：4. 3. ... --- ### 【EC-CUBE 4】ショップメールがGmailなどで受信できない問題について - Published: 2025-02-18 - Modified: 2025-02-18 - URL: https://noveblo.com/mail-blocked/ - カテゴリー: EC-CUBE 4 商品の購入や問い合わせなどを行った際、ショップから送信されるメールに以下のような「注意喚起」が表示されたり、最悪相手に届かなかったり（拒否されたり）することがあります。 「このメールにはご注意ください」という警告が表示された受信メール あたかも詐欺メールのような表示になっており、受け取った相手を不安にさせてしまいます。 サイトから送信したメールが、Gmailにブロックされたことを通知するエラーメール 「Undelivered Mail Returned to Sender」というタイトルのメール... --- ### 【EC-CUBE/XServer】PHPのバージョン切り替え方法（コマンドライン） - Published: 2025-01-27 - Modified: 2025-03-14 - URL: https://noveblo.com/eccube-xserver-php-version/ - カテゴリー: XServer, EC-CUBE 4 XServer（新サーバーパネル）でPHPのバージョンを変更するには、 サーバーパネルのメニューから「PHP」を開く 「PHP Ver. 切替」をクリック バージョンを変更したいドメインの「編集」をクリック 変更したいバージョンをプルダウンから選び、「設定する」をクリック という手順で超簡単にできます。（変更手順詳細は公式サイト こちら にて） しかし注意が必要なのは、この手順で変更されるのはWebサーバーのPHPバージョン（ブラウザで動作するPHPスクリプト）であり、SSHで使用するCLI（コ... --- ### 【GAS】スプレッドシートからメールを一斉送信（メールマージ）する方法 - Published: 2025-01-21 - Modified: 2025-01-22 - URL: https://noveblo.com/gas-spreadsheet-mailmerge/ - カテゴリー: GAS 本記事では、 スプレッドシートに入力した複数のメールアドレス宛に 共通のテンプレートを使って ワンクリックで一斉送信する 方法を、実例を用いて紹介します。 このようなメール一斉送信ツールを作成できます 名前、メールアドレス、メールの件名と内容をまとめたテーブルを用意 別シートにはメールのテンプレートを用意   ボタンをクリックすると、テーブルの内容およびテンプレートに基づいてメールを自動作成し、送信まで行う   Gmailの送信済みボックス 実装の流れ スプレッドシートの準備（ここへ飛ぶ） Ap... --- ### 【GAS】Googleフォームの回答をスプレッドシートまたはスライドに自動転記する方法 - Published: 2024-12-24 - Modified: 2024-12-24 - URL: https://noveblo.com/gas-form-spreadsheet-slide/ - カテゴリー: GAS 本記事では、 Googleフォーム送信時に 「任意のスプレッドシートのセル」または「任意のスライドのシェイプ（テキストボックスなど）」に フォームの回答を自動転記する 方法を、実例（Googleフォームで作成したユーザー登録を送信した時、指定したスプレッドシートおよびスライドに自動転記）を用いて紹介します。 このようなフォームの自動転記ツールを作成できます フォームを入力して送信すると・・・ スプレッドシートに回答を転記 指定したスプレッドシートのセルに回答がセットされます！ スライドに回答を転... --- ### Google Apps Scriptで業務自動化！〜GASの基本と業務で使える実践例〜 - Published: 2024-12-21 - Modified: 2025-05-23 - URL: https://noveblo.com/google-apps-script/ - カテゴリー: GAS - タグ: pickup Google Apps Script（GAS）は、Googleが提供するスクリプト開発環境です。GASを使用すると、Google Workspace（旧称：G Suite）の各種サービス（Gmailやスプレッドシートなど）をプログラムで操作し、業務を自動化することができます。何より嬉しいのは、GASはブラウザから直接利用可能で、専用のソフトウェアをインストールしたり開発環境を用意したりする必要がなく、Googleアカウントさえあれば無料ですぐ利用できる点です。 本記事では、プログラミング初心者に... --- ### 【GAS】スプレッドシートからスライドに自動転記する方法 - Published: 2024-12-17 - Modified: 2024-12-23 - URL: https://noveblo.com/gas-spreadsheet-slide/ - カテゴリー: GAS 本記事では、 スプレッドシートの各セルに入力された値を スライドのテキストボックスやテーブルのセルに ワンクリックで自動転記する 方法を、実例（スプレッドシートに入力した月毎の売上データを、会議資料となるスライドに自動転記）を用いて紹介します。 このようなスプレッドシート自動転記ツールを作成できます 「スライドに転記」ボタンをクリックすると・・・ スライドのテキストボックスやテーブルに、値が自動的にセットされます！ 実装の流れ スプレッドシートとスライドの準備（ここへ飛ぶ） Apps Scrip... --- ### 【GAS】受信メールの内容をスプレッドシートに自動転記する方法 - Published: 2024-12-10 - Modified: 2025-01-21 - URL: https://noveblo.com/gas-spreadsheet-gmail-transfer/ - カテゴリー: GAS 本記事では、 特定の受信メールに記載された内容の一部を スプレッドシートの各セルに ワンクリックで転記する 方法を、実例（メールでの注文を受けた際、その内容を項目ごとに分解してスプレッドシートに取り込む）を用いて紹介します。 このようなスプレッドシート自動転記ツールを作成できます 「受信メールから注文内容を取り込む」ボタンをクリックすると・・・ Gmail検索ウィンドウが表示され、 ヒットしたメールから注文内容を取得して、B列の各セルに転記されます！ 受信メールに決まったフォーマットがある場合に... --- ### 【GAS】スプレッドシートからメールの下書きを作成する方法 - Published: 2024-12-07 - Modified: 2025-01-21 - URL: https://noveblo.com/gas-spreadsheet-gmail/ - カテゴリー: GAS 本記事では、スプレッドシートのセルに入力した内容を元に、ボタンクリックでメール下書きを自動生成する方法を紹介します。 このようなメール下書き自動生成ツールを作成できます 「メールを作成」ボタンをクリックすると・・・ スプレッドシートの内容を元に、メール下書きを自動作成！ 実装の流れ スプレッドシートの準備（ここへ飛ぶ） Apps Scriptを起動してコードを記述（ここへ飛ぶ） メール作成ボタンの設置（ここへ飛ぶ） ボタンをクリックし、Gmailアカウントと連携（ここへ飛ぶ） STEPスプレッド... --- ### 【EC-CUBE4】特定税率の商品詳細ページに共通のテキストやアイコンを表示する - Published: 2024-11-22 - Modified: 2024-11-22 - URL: https://noveblo.com/eccube-taxrate-icon/ - カテゴリー: EC-CUBE 4 特定の消費税率を設定した商品の詳細ページ（detail. twig）のみに、共通のテキストやアイコンを表示するには？本記事では、「8%」の軽減税率を設定した商品ページに以下のようなアイコンを表示させる手順を紹介します。 「軽減税率8%」というタグを作成し、商品ごとに手動で登録する方法が一番簡単ではありますが、見落としたり誤って登録してしまったりといったヒューマンエラーが発生してしまいます。本記事では、税率8%を設定した商品に自動でアイコンが表示されるため、そのようなミスを防ぎつつ登録の手間も省け... --- ### 【EC-CUBE 4】管理画面 / 商品管理のカスタマイズ（4）　～ ソート機能 ～ - Published: 2024-11-15 - Modified: 2025-03-21 - URL: https://noveblo.com/eccube-adminpage-sortrecord/ - カテゴリー: EC-CUBE 4 以下カスタマイズの続き・ソート（並び替え）機能までを含んだ実装方法（コード）を紹介します。 カスタマイズ完了後の管理画面 ステップ ① 管理画面に新規メニューを実装 メニューの追加まで実装 ステップ ② 保存データの一覧表示 & 新データ追加機能の実装 「dtb_maker」に保存されているメーカーを一覧表示。また、新しいメーカーを追加するためのフォームを設置。 フォームを入力して「新規作成」をクリックすると、新しいメーカーが登録されて一覧も更新される。 ステップ ③ 保存データの編集や削除機能... --- ### 【EC-CUBE4】よくある質問ページを作ってみた（2） - Published: 2024-11-11 - Modified: 2024-11-28 - URL: https://noveblo.com/eccube-faq-2/ - カテゴリー: EC-CUBE 4 アコーディオンUIを採用した、よくある質問（FAQ）ページの作成・続編です。 実装までの手順 『１』新規ページ（よくある質問ページ）を作成する（別記事 1ページ目） 『２』CSS & JavaScript でアコーディオンUIを作成する（別記事 2ページ目） 『３』よくある質問をデータベースで管理する（本記事） 『４』よくある質問を管理画面にて登録・操作する（本記事 2ページ目） 【動作環境】EC CUBEのバージョン：4. 2. 2サーバー：Xserver 『３』よくある質問をデータベースで管... --- ### 【EC-CUBE4】よくある質問ページを作ってみた（1） - Published: 2024-11-07 - Modified: 2025-01-28 - URL: https://noveblo.com/eccube-faq/ - カテゴリー: EC-CUBE 4 ECサイトなどで見かける「よくある質問（FAQ）ページ」を実装してみたので、本記事にて実装までの手順を公開します。 実装後の画面（動画） よくある質問（FAQ）ページを作成するメリット ユーザーサポートの向上 顧客が疑問に感じやすい質問とその回答を一括で提供することで、ユーザーが自己解決できる機会を増やし、問い合わせ数を減らすことができる。 顧客満足度の向上 気軽に疑問を解消できる環境を提供することで顧客満足度が上がり、リピーターになってもらいやすくなる。 購入促進 「購入前に疑問を解消したい」... --- ### 【YouTube】動画投稿を始める方向けのチャンネル開設手順（PC） - Published: 2024-11-05 - Modified: 2024-12-18 - URL: https://noveblo.com/youtube-starter/ - カテゴリー: YouTube YouTubeに初めて動画を投稿したい方向け！動画投稿用のチャンネルを新規作成＆カスタマイズの手順を纏めました！（操作環境はPCです） 【STEP 1】Googleアカウントにログイン（ログイン済の場合はスキップ） 【STEP 2】動画投稿用チャンネルの作成 【STEP 3】チャンネルのカスタマイズ STEPGoogleアカウントにログイン（ログイン済の場合はSTEP2へ） まずWebサイトで「YouTube」を開きます。 右上のプロフィール（アイコン）をクリックします。 ログイン画面が表示され... --- ### 【無料利用OK】Web抽選会ツール - Published: 2024-10-26 - Modified: 2025-05-28 - URL: https://noveblo.com/lottery/ - カテゴリー: Webアプリ このツールは ... 回 使われています。 PCやスマホの画面上で、手軽に抽選会を行えるツールを作成しました。気軽にご利用ください。（当サイトでは広告が表示されますが、抽選会実施中に広告が表示されることはありません） 更新履歴 2025/05/25：くじを引いてから当選するまでの時間を0. 5秒刻みで設定できるようになりました。（最大10秒） 2025/04/08：当選時の背景を選択できるようになりました。 2025/03/28：抽選会中に当選数を増減できるようになりました。 2025/03/2... --- ### 【JS】効果音やBGM（サウンド）の実装方法 - Published: 2024-10-12 - Modified: 2024-12-25 - URL: https://noveblo.com/js-audio/ - カテゴリー: HTML/CSS/JavaScript 本記事では、以下のような効果音やBGMを実装する方法を紹介します。 効果音（ボタン） 効果音(1) 効果音(2) 効果音(3) BGM 再生 停止 最初から 音量: 本記事で使用している効果音やBGMは、以下サイトより無料でダウンロードできます。たくさんのサウンドがあるので、使いたいものを事前にダウンロードしておきましょう。 効果音 効果音ラボ（https://soundeffect-lab. info/） BGM DOVA（https://dova-s. jp） ボタンクリックで効果音やBGM... --- ### 【自動計算】割り勘計算ツール（立て替え対応） - Published: 2024-10-10 - Modified: 2025-04-22 - URL: https://noveblo.com/calculate-split-bill/ - カテゴリー: Webアプリ このツールは ... 回 使われています。 割り勘の自動計算ツールです。合計金額と人数を入力するだけで、一人当たりの支払い（受取り）金額や、立て替えを加味した複雑な計算を行います。 支払金額： 円 割る人数： 人 一人当たりの支払い金額を計算 立て替えがある場合 立て替えを加味して割り勘計算 使い方 支払いの合計金額と、その金額を割る人数を入力します。 緑色のボタンをクリックすると、一人当たりの支払い金額（平均）が算出されます。 立て替えがある場合は、続けて緑色のボタンをクリックします。 立て替... --- ### 【JS&CSS】タスクの進捗状況を示すプログレスバーの実装方法 - Published: 2024-09-27 - Modified: 2024-09-27 - URL: https://noveblo.com/js-css-progress-bar/ - カテゴリー: HTML/CSS/JavaScript 本記事では、以下のようなプログレスバーを作る方法を紹介します。 不定型プログレスバー（indeterminate） 決定型プログレスバー（determinate） Task 1 Task 2 Task 3 不定型プログレスバー（indeterminate） バーが進んでいるように見えるが、具体的な進捗は示さないタイプ。主にローディングアイコンとして使われ、ユーザーに何かが進行中であることを視覚的に伝えられます。 決定型プログレスバー（determinate） 進行状況が視覚的に分かるタイプ。上の... --- ### 【JS&CSS】ページ読み込み完了までローディングアイコンを表示する - Published: 2024-09-25 - Modified: 2024-09-30 - URL: https://noveblo.com/js-css-loadingicon/ - カテゴリー: HTML/CSS/JavaScript 本記事では、以下のようなローディングアイコンを作る方法（CSS）と、ページの読み込みが完了するまでローディングアイコンを表示する方法（JavaScript）を紹介します。 回転する円 複数のドットがリズム良く拡大縮小 不定形プログレスバー ローディングアイコンの実装コード（HTML / CSS） CSSのアニメーション（@keyframes）を使うことで、動きのあるローディングアイコンを実装できます。 1. 回転する円 borderを使って円の一部分だけを濃い色にし、その部分を回転させることでロ... --- ### 【JS&CSS】画像をズームイン＆ふわっと切り替える方法 - Published: 2024-09-20 - Modified: 2024-09-20 - URL: https://noveblo.com/js-css-zoomfadein-images/ - カテゴリー: HTML/CSS/JavaScript 本記事では、以下のように画像がズームインしつつ、一定時間で別の画像に切り替わっていく実装方法をご紹介しています。 HTML / CSS / JavaScript コード HTMLCSSJavaScript . container { position: relative; width: 800px; height: 450px; overflow: hidden; margin: 0 auto; } . container img { position: absolute; top: 0; le... --- ### 【自動計算】合計から比率分割できるツールと計算方法 - Published: 2024-09-10 - Modified: 2025-04-22 - URL: https://noveblo.com/calculate-ratio-divide/ - カテゴリー: Webアプリ このツールは ... 回 使われています。 とある数値（合計）を、指定した比（2つ / 3つ / 4つ）で分割計算する無料のWebアプリです。※100を「2:3」に分割したい →「40:60」のように自動で計算できます。 2つの比で分割計算3つの比で分割計算4つの比で分割計算 合計 比率 ： 計算する 結果 使い方 合計値（分割前の数値）を入力します。 ①で入力した値を分割する比率を入力します。直接値を入力するか、プルダウンより比率を選択します。 「計算する」をクリック／タップすると、①を②の比... --- ### 【JS&CSS】よくある質問（FAQ）を実装する（アコーディオン） - Published: 2024-09-06 - Modified: 2024-09-20 - URL: https://noveblo.com/js-css-accordion-faq/ - カテゴリー: HTML/CSS/JavaScript 本記事では、以下のような「よくある質問集」の実装方法をコード付きで紹介しています。 よくある質問_その1 よくある質問_その1の答え よくある質問_その2 よくある質問_その2の答え よくある質問_その3 よくある質問_その3の答え 質問をクリックすると、その答えがフワッと表示されます。 HTML / CSS / JavaScript コード HTMLCSSJavaScript よくある質問_その1 よくある質問_その1の答え よくある質問_その2 よくある質問_その2の答え よくある質問_その... --- ### 【JS&CSS】タブ＆モーダルを組み合わせてお知らせ表示を実装する - Published: 2024-09-04 - Modified: 2024-09-04 - URL: https://noveblo.com/js-css-modal-notice/ - カテゴリー: HTML/CSS/JavaScript 本記事では、以下のようなモーダルウィンドウを使った「お知らせ表示」の実装方法を、HTML / CSS / JavaScriptのコード付きで紹介します。 お知らせ 1 お知らせ 2 お知らせ 3 閉じる HTML / CSS / JavaScript コード HTMLCSSJavaScript お知らせ 1 お知らせ 2 お知らせ 3 閉じる ul. notice-list { list-style-type: none; padding: 0; } li. notice-item { text... --- ### 【EC-CUBE4】特定タグの商品詳細ページに共通のテキストやアイコンを表示するカスタマイズ - Published: 2024-08-28 - Modified: 2025-04-10 - URL: https://noveblo.com/eccube-tag-notice/ - カテゴリー: EC-CUBE 4 特定のタグが付いた商品の詳細ページ上部（商品名の上）に、共通のテキストやアイコンを表示するには？ 本記事では、以下のように「おすすめ商品」タグが付いた商品の詳細ページに「オススメの商品です！」というテキストを表示する方法を紹介します。管理画面の操作のみで完結するので、プログラミングに慣れていない方でも簡単に実装できます！ Before After 特定のカテゴリーや税率を有する商品詳細ページのカスタマイズについては以下記事で紹介しています。 【動作環境】EC CUBEのバージョン：4. 2. 2... --- ### 【EC-CUBE4】特定カテゴリーの商品詳細ページに共通のテキストやアイコンを表示するカスタマイズ - Published: 2024-08-28 - Modified: 2025-04-10 - URL: https://noveblo.com/eccube-category-notice/ - カテゴリー: EC-CUBE 4 特定のカテゴリーに属する商品の詳細ページ上部（商品名の上）に、共通のテキストやアイコンを表示するには？ 本記事では、以下のように「新入荷」カテゴリーに属する商品の詳細ページに「新入荷の商品です！」というテキストを表示する方法を紹介します。管理画面の操作のみで完結するので、プログラミングに慣れていない方でも簡単に実装できます！ Before After 特定のタグや税率を有する商品詳細ページのカスタマイズについては以下記事で紹介しています。 【動作環境】EC CUBEのバージョン：4. 2. 2サ... --- ### 【EC-CUBE 4】商品一覧を複数ページに分割表示（ページネーション）するカスタマイズ - Published: 2024-08-21 - Modified: 2025-04-10 - URL: https://noveblo.com/eccube-pagination/ - カテゴリー: EC-CUBE 4 本記事では、独自に作成した商品一覧ページを以下のように複数ページに分けて表示する、ページネーションのカスタマイズについて紹介します。 デフォルトの商品一覧ページ（カテゴリー別の商品一覧を含む）には、商品を20件 / 40件 / 60件ごとにページを分けて表示させるページネーションが実装されています。本記事では、これとは別にオリジナルの商品一覧ページ（タグ別の商品一覧など）にページネーションを導入する方法について紹介します。 1ページ目 2ページ目以降 最終ページ 商品一覧の下側にある矢印ボタンを... --- ### 【EC-CUBE 4】商品のソート（並び替え）オプションの実装方法 - Published: 2024-08-16 - Modified: 2024-08-21 - URL: https://noveblo.com/eccube-sort-option/ - カテゴリー: EC-CUBE 4 先日、商品一覧ページにある商品並べ替え（ソート）オプションのカスタマイズ方法について解説しました。 本記事では、以下のような新しく作成したページに、同様の商品並べ替え（ソート）オプションを追加する方法について解説します。 実装例 右上にソート順（並び替え）が選べるドロップダウンリストを設置。 選択した内容に応じて、商品の表示順が入れ替わる 【動作環境】EC CUBEのバージョン：4. 2. 2サーバー：Xserver 特定のタグが付いた商品を表示するページに、ソートオプションを実装する 以前本サ... --- ### 【EC-CUBE 4】遭遇したエラー＆対処法まとめ - Published: 2024-08-10 - Modified: 2025-03-17 - URL: https://noveblo.com/eccube-error/ - カテゴリー: EC-CUBE 4 EC-CUBE 4のカスタマイズに際し、筆者が遭遇したエラーとその対処法について記録を残しています。（随時更新中）同じようなエラーに遭遇したときの参考になれば幸いです。 名前空間とファイルの保存先が異なる ／ ファイル名とクラス名が異なるケース Compile Error: Cannot declare class Customize\Controller\Admin\SampleController, because the name is already in use 名前空間（namesp... --- ### 【EC-CUBE 4】 商品一覧ページの並び順（ソート順）を新規追加するカスタマイズ - Published: 2024-08-08 - Modified: 2025-04-10 - URL: https://noveblo.com/eccube-product-list-sort-order/ - カテゴリー: EC-CUBE 4 本記事では、以下のように商品一覧ページ右上に表示される並び順（ソート順）の種類を増やすカスタマイズについて紹介します。 新たに「更新順」というソート機能を追加した画面。更新順を選択すると、更新日（update_date）が新しい順に商品が並び替えられる。 【動作環境】EC CUBEのバージョン：4. 2. 2サーバー：Xserver STEPマスタデータ管理にて、並び替え（ソート）オプションを追加 まず、EC-CUBE管理画面 → システム設定 → マスタデータ管理より、新しい並び替えオプション... --- ### 【JS&CSS】ダークモード（テーマ）切り替えボタンの実装方法 - Published: 2024-08-05 - Modified: 2024-08-05 - URL: https://noveblo.com/js-css-darkmode/ - カテゴリー: HTML/CSS/JavaScript 本記事では、以下のようにボタンクリックでライトモード（背景：白）とダークモード（背景：黒）を切り替える実装方法を紹介します。 ダークモードに切り替え サンプルテキスト サンプルテキスト サンプルテキスト モードの設定がブラウザに保存される（ページを再訪問したとき、前回設定したテーマが適用される）ようになっています。 ライトモード／ダークモードとは Webページやアプリの外観を変更する設定。それぞれ以下のような特徴とメリット・デメリットがある。 ライトモード 多くのデバイスやアプリでのデフォルト設... --- ### 【EC-CUBE 4】ヘッダーを上部に固定し、スクロールで追従させるカスタマイズ - Published: 2024-08-02 - Modified: 2025-04-10 - URL: https://noveblo.com/eccube-header/ - カテゴリー: EC-CUBE 4 本記事では、以下のようにヘッダー（商品検索・ログインナビ・カート）を上部に固定し、スクロールに合わせてヘッダーが付いてくるカスタマイズ方法を紹介します。 カスタマイズではCSSとJavaScriptを利用しますが、すべてEC-CUBEの管理画面から実装でき、ファイルサーバーやデータベース、コマンドプロンプトの操作は不要です。（CSSとJavaScriptのカスタマイズ方法については以下記事にて） 【動作環境】EC CUBEのバージョン：4. 2. 2サーバー：Xserver 固定・追従ヘッダーを... --- ### 【JS&CSS】途中からフワッと表れて追従する固定ヘッダーの作り方 - Published: 2024-08-01 - Modified: 2024-09-27 - URL: https://noveblo.com/js-css-header-fixed/ - カテゴリー: HTML/CSS/JavaScript 以下のように画面をスクロールすると、ヘッダーがフワッと表示されて追従（トップに固定）するヘッダーの作り方を紹介します。（JavaScriptとCSSを使います。） 仮ロゴ Menu 1 Menu 2 Menu 3 仮ロゴ Menu 1 Menu 2 Menu 3 スクロールできます。スクロールできます。 スクロールできます。スクロールできます。 スクロールできます。スクロールできます。 スクロールできます。スクロールできます。 スクロールできます。スクロールできます。 スクロールできます。スクロ... --- ### 【無料】メモ書きにも使えるToDoリストとその作り方 - Published: 2024-07-26 - Modified: 2025-03-17 - URL: https://noveblo.com/to-do-lists/ - カテゴリー: Webアプリ, HTML/CSS/JavaScript Add Clear 使い方 入力フォームに To Do を入力して「Add」ボタンをクリックすると、To Do が追加される。複数追加も可能。 各To Doはドラッグ＆ドロップで順番を入れ替えられる。 追加された To Do には完了判定用のチェックボックスがあり、チェックを入れると取り消し線が付く。 「Clear」ボタンをクリックするとアラートが表示され、「OK」をクリックするとTo Doがリセットされる。 追加 / 完了チェックしたTo Doは Local Storage に保存されるため、... --- ### 【JS】ドラッグ＆ドロップで表示を入れ替えるUI - Published: 2024-07-25 - Modified: 2024-08-02 - URL: https://noveblo.com/drag-and-drop-ui/ - カテゴリー: HTML/CSS/JavaScript 本記事では、ドラッグ＆ドロップで複数のアイテムの順番を入れ替える実装方法を解説します。 実装例）To Do リストの順番を入れ替える Task 1 Task 2 Task 3 Task 4 HTML / CSS / JavaScript コード HTMLCSSJavaScript Task 1 Task 2 Task 3 Task 4 . container { margin:0 auto; padding: 20px; border-radius: 20px; width: 50%; min-... --- ### 【JS】ドラッグ＆ドロップの実装方法 - Published: 2024-07-22 - Modified: 2024-08-02 - URL: https://noveblo.com/drag-and-drop/ - カテゴリー: HTML/CSS/JavaScript - タグ: Study Notes 本記事では、以下のように直感的にアイテムを操作できるドラッグ＆ドロップの基本的な実装方法について紹介します。 こちらのブロックをドラッグできます。 ドラッグしたブロックは以下エリアにドロップできます。 元に戻す HTML / CSS / JavaScript コード HTMLCSSJavaScript . draggable { width: 100px; height: 100px; background-color: lightblue; cursor: grab; } . draggabl... --- ### 【JS】<iframe>の高さを引用先ページの高さに自動調節（別ドメイン） - Published: 2024-07-10 - Modified: 2024-08-02 - URL: https://noveblo.com/js-iframe-postmessage/ - カテゴリー: HTML/CSS/JavaScript - タグ: Study Notes 先日、引用先ページが同一ドメインの場合のの高さ（height）を、引用先ページの高さに揃える方法について紹介しました。 ただしこの方法は、引用先ページが別ドメインの場合は「クロスオリジン制約」によってブロックされ、利用することができません。ただ、postMessageを使った通信を行うことでクロスオリジン制約を回避できる場合があります。（引用先ページにスクリプトを記述する必要があります。） 本記事では、引用先ページが別ドメインの場合に高さを揃える方法を紹介します。 実装例とコード 以下はで引用し... --- ### 【JS】<iframe>の高さを引用先ページの高さに自動調節（同一ドメイン） - Published: 2024-07-08 - Modified: 2024-08-02 - URL: https://noveblo.com/js-iframe-contentdocument/ - カテゴリー: HTML/CSS/JavaScript - タグ: Study Notes タグを用いると、一つのWebページに別のHTMLページを埋め込むことができます。他のサイトはもちろん、Youtube動画やGoogleマップなどを表示することもできます。は独自のスクロールバーを持ち、埋め込まれたコンテンツを完全に独立した環境で表示するため、外部サイトの一部を安全かつ簡単に組み込むことが可能です。 本ページでは、の高さ（height）を引用先ページの高さに揃える方法について紹介します。親ページ（別サイトを埋め込むページ）にJavaScriptを記述するだけで実装できるので簡単です... --- ### 【CSS】レスポンシブデザインに役立つプロパティ＆関数一覧 - Published: 2024-07-04 - Modified: 2024-07-04 - URL: https://noveblo.com/css-responsive-design/ - カテゴリー: HTML/CSS/JavaScript PC、タッチパネル、スマホなど、大きさが異なるデバイスに対応するための「レスポンシブデザイン」は今や欠かせません。本記事では、レスポンシブデザインに便利なCSSプロパティと関数を纏めました。 vh & vw vh（viewport height）とvw（viewport width）は、ビューポートの高さと幅を基準にした単位です。ビューポートのサイズに応じて、要素のサイズを動的に調整できます。これにより、どのデバイスでもビューポートに応じたサイズ調整が簡単に行えます。 ビューポート（vierpo... --- ### 【CSS】aspect-ratioを使って画像や動画の縦横比を簡単指定 - Published: 2024-06-27 - Modified: 2024-07-04 - URL: https://noveblo.com/css-aspect-ratio/ - カテゴリー: HTML/CSS/JavaScript - タグ: Study Notes CSSのaspect-ratioプロパティを使って、画像や動画などのメディア要素の縦横比（アスペクト比）を一定に保つ方法を紹介します。特にレスポンシブデザインにおいては、メディアクエリ（@media）を使うより簡単 かつ 直感的に実装できるのがポイントです。 aspect-ratioプロパティの基本構文 . element { aspect-ratio: 16 / 9; } ここでは、elementクラスを持つ要素の縦横比を16:9に設定しています。この設定により、要素の幅（高さ）が変更されると... --- ### 【CSS】clamp()を使ったレスポンシブデザイン - Published: 2024-06-24 - Modified: 2024-07-04 - URL: https://noveblo.com/css-clamp/ - カテゴリー: HTML/CSS/JavaScript - タグ: Study Notes clampはCSSで使われる関数。フォントサイズなどの値に最小値と最大値を設けたうえで、理想値を指定できるツールです。特にレスポンシブデザインでは、メディアクエリより高い柔軟性と簡潔さから注目されています。本記事では、この関数の使い方を実例を交えつつ簡単に説明します。 clamp関数の基本構文 clamp(min, preferred, max) /* min: 最小値 preferred: 理想値 max: 最大値 */ レスポンシブデザイン関連の記事はこちら clamp関数の実装例 実際の用... --- ### 【JS】addEventListenerで使えるイベントタイプ一覧 - Published: 2024-06-18 - Modified: 2024-08-02 - URL: https://noveblo.com/javascript-addeventlistener-eventtype/ - カテゴリー: HTML/CSS/JavaScript - タグ: Study Notes addEventListener メソッドで使用できるイベントハンドラー（イベントタイプ）のうち、代表的なものをカテゴリ別に紹介します。一部を除き、実装例も載せました。また、個人的に違いが分かりにくいものについては後半で簡単解説も。 マウスイベント：10個 マウスのクリックや移動に伴って発火するイベントタイプです。各ボタン毎に異なるイベントタイプをセットしており、ダイアログが表示されます。 click要素がクリックされたとき click dblclick要素がダブルクリックされたとき dblcl... --- ### 【JS / Local Storage】To-Doリストを実装してみた - Published: 2024-06-15 - Modified: 2024-08-02 - URL: https://noveblo.com/javascript-todo-lists/ - カテゴリー: HTML/CSS/JavaScript - タグ: Study Notes 先日、JavaScriptの「Local Storage」の基本的な使い方について記事をまとめました。 今回は、より実践的な使い方として「To Do リスト（ページを更新したり閉じたりしても内容が保存される）」を実装してみたので、その手順を公開します。 To-Do リスト Add Clear 入力フォームに To Do を入力して「Add」ボタンをクリックすると、To Do が追加される。複数追加も可能。 追加された To Do には完了判定用のチェックボックスがあり、チェックを入れると取り消し... --- ### 【JS / fetch API】郵便番号から住所を検索して表示する方法 - Published: 2024-06-12 - Modified: 2024-08-02 - URL: https://noveblo.com/javascript-fetch-api-zipcloud/ - カテゴリー: HTML/CSS/JavaScript - タグ: Study Notes 先日、JavaScriptの「fetch API」の基本的な使い方について記事をまとめました。 今回は、より実践的な使い方として「郵便番号から住所を取得する」というよくあるシチュエーションを実装してみたので、こちらの実装方法を公開します。 郵便番号を入力して検索ボタンをクリックすると、該当する住所が表示されます。 - 検索 HTML / CSS / JavaScript コード - 検索 . container { height: 120px; margin: 0 auto; text-alig... --- ### 【JS】初心者ガイド：fetch API & DOMparser - Published: 2024-06-10 - Modified: 2024-08-02 - URL: https://noveblo.com/javascript-fetch/ - カテゴリー: HTML/CSS/JavaScript - タグ: Study Notes JavaScriptの「fetch API」を使うことで、Webサイトやアプリからデータを取得したり、サーバーにデータを送信したりすることができます。本記事では、「fetch API」の簡単な例を挙げつつ、基本的な使い方について記述します。 例）同じドメインの別ページのデータを取得して表示させる こちら（https://noveblo. com/reference-page/）にデータ取得先ページを作成しました。「fetch API」を使って、上記ページに表示されているテキストを取得して表示させ... --- ### 【JS API】初心者ガイド：Local Storage - Published: 2024-06-06 - Modified: 2024-08-05 - URL: https://noveblo.com/javascript-local-storage/ - カテゴリー: HTML/CSS/JavaScript - タグ: Study Notes 「Local Storage」とは、ブラウザ内にデータを半永久的に保存できるJavaScript APIです。データはキーとバリューのペアで保存され、ブラウザを閉じても保持されます。容量は約5MBあり、以下のような入力データの保存や、ユーザー設定の保存に適しています。 名前を入力してください： 保存 クリア ページをリロードしたりブラウザを閉じたりしても、入力した内容が保存されて「こんにちは、〇〇」という形で表示されます。（クリアボタンを押すと保存内容がリセットされます。） HTML / Jav... --- ### 【CSS】初心者ガイド：疑似クラスセレクター／:has() - Published: 2024-06-05 - Modified: 2024-07-11 - URL: https://noveblo.com/css-selector-has/ - カテゴリー: HTML/CSS/JavaScript - タグ: Study Notes 特定の要素を選択するための「CSSセレクター」には、要素の状態や位置に基づいてスタイルを適用できる疑似クラスセレクター（:hoverなど）があります。本記事では、その疑似クラスセレクターの中でも比較的新しく実装された:hasについて解説します。 そもそも疑似クラスセレクターとは？ 疑似クラスセレクター（pseudo-class selector）とは、特定の条件においてスタイルを適用できるCSSの機能。「疑似」とは、その要素自体の状態や位置に基づいてスタイルを適用できるため、実際のHTMLには存... --- ### 【EC-CUBE 4】独自の定数（パラメータ）を設定・管理する方法 - Published: 2024-05-31 - Modified: 2024-06-03 - URL: https://noveblo.com/eccube-yaml/ - カテゴリー: EC-CUBE 4 数値などを一元管理することで、メンテナンス性の向上やバグの防止に役立ちます。EC-CUBEのフレームワークであるSymfonyでは、yamlという設定ファイルを利用する方法が推奨されており、EC-CUBEでも様々な値が設定されています。（「app/config/eccube/packages/eccube. yaml」など。） YAML（YAML Ain't Markup Language、ヤムル or ヤメル）とは？ 人が読みやすく、構造化されたデータを表現するためのデータ形式。主に設定ファイ... --- ### 【EC-CUBE 4】注文内容に新しい項目を追加し、注文画面をカスタマイズしてみた - Published: 2024-05-29 - Modified: 2024-06-07 - URL: https://noveblo.com/eccube-order-customize/ - カテゴリー: EC-CUBE 4 各注文には、その注文者や支払い方法、注文日時などを保存しておく「dtb_table」があります。このテーブルに独自のプロパティを追加し、注文時には入力フォームから保存できるようにしておくことで、各注文に独自のオプションなどを設定することができます。 本カスタマイズの手順 dtb_orderテーブルに新規プロパティを追加（拡張）する フォームを拡張（OrderTypeExtensionを作成）する Twigテンプレートにフォームを追記する（必要に応じてメールテンプレートや管理画面も修正する） 【動... --- ### 【EC-CUBE 4】Twig Extensionを使って新しいフィルターを作成する - Published: 2024-05-25 - Modified: 2024-05-25 - URL: https://noveblo.com/eccube-twigextension-filter/ - カテゴリー: EC-CUBE 4 本記事では、Twigテンプレートエンジンの機能を拡張できるTwig Extensionを使って、新しいフィルターを作成する方法について紹介します。 Twig Extensionとは？ Twigテンプレートエンジンを拡張するための仕組み。カスタムフィルターや関数をテンプレート内で呼び出すことで、Controllerを介さずとも特殊な機能を実装できます。 【動作環境】EC CUBEのバージョン：4. 2. 1サーバー：Xserver 新規フィルターの実装例①：赤字＆太字にする まずは、指定した文字列... --- ### 【EC-CUBE 4】Serviceの役割・実装方法 - Published: 2024-05-23 - Modified: 2025-03-18 - URL: https://noveblo.com/eccube-service/ - カテゴリー: EC-CUBE 4 本記事では、特定の機能をまとめておけるServiceの使い方と実装方法について紹介します。 Serviceを使うことで、特定の機能をControllerなどから分離することができます。これにより、コードの再利用性と保守性が高まり、管理が容易になります。EC-CUBEでは、支払いやカートに関する機能をまとめたServiceがデフォルトで多数実装されています。 【動作環境】EC CUBEのバージョン：4. 2. 1サーバー：XServer 特定のテキストを表示するServiceを作成し、Contro... --- ### 【EC-CUBE 4】管理画面のログインIDとパスワードが分からないときの対処法 - Published: 2024-05-15 - Modified: 2024-05-18 - URL: https://noveblo.com/eccube-admin-password/ - カテゴリー: EC-CUBE 4 管理画面にログインしようとして、上図のように表示されるとかなり焦りますよね。管理画面のログインIDはすぐ確認できますが、パスワードはセキュリティ面から暗号化されており、良くも悪くも簡単に確認することができません。本記事では、そんな困った状態を解決する方法を紹介します。 この対処法の過程では、一時的ですがセキュリティレベルが下がってユーザー操作に影響を及ぼします。本番環境のサイトを操作する場合は、事前にメンテナンスモードを設定しておくと安心です。（メンテナンスモードの設定方法は こちら。） 全体の... --- ### 【EC-CUBE 4】wwwやindex.phpを含むURLから含まないURLへ自動転送する - Published: 2024-05-13 - Modified: 2024-05-14 - URL: https://noveblo.com/eccube-redirect/ - カテゴリー: EC-CUBE 4 EC-CUBEでは、以下のように「www」や「index. php」が含まれたURLでもサイトにアクセスできてしまいます。 https://ドメイン/ https://www. ドメイン/ https://ドメイン/index. php https://www. ドメイン/index. php 上記のいずれのURLでも、同じトップページにアクセスできます。 このままでもサイト運営上は特に問題ないように思えますが、Googleサーチコンソールでは以下のように重複コンテンツの指摘を受ける原因になって... --- ### 【EC-CUBE/Xserver】テスト環境を別ドメインに作成する - Published: 2024-05-09 - Modified: 2024-05-10 - URL: https://noveblo.com/xserver-eccube-test/ - カテゴリー: XServer, EC-CUBE 4 本番環境で稼働中のEC-CUBEサイトをがっつりカスタマイズする際、そのまま運用中のサイトを触ってしまうのはリスクがあります。一般的にはローカルなどにテスト環境を用意し、そちらで実装を完了してから本番環境に反映する、というのが自然な流れですよね。 すでに本番環境であれこれ弄ってきた筆者ですが、このたび本番サイトを複製して別ドメインにテスト環境を構築してみたので、備忘録を兼ねてその方法を共有します。環境によって方法が異なると思いますので、あくまでも参考に自己責任で行っていただくようお願いします。 ... --- ### 【Git】ローカル開発／ブランチ開発でよく使うコマンド実施例 - Published: 2024-04-10 - Modified: 2024-04-10 - URL: https://noveblo.com/git-branch-command-example-for-local/ - カテゴリー: Git 筆者の備忘録用に、ブランチ開発におけるGitのコマンド実施例を纏めました。 Gitはインストール済、以下のプロジェクトディレクトリ（フォルダ）を用意し、エディタはVSコードを使います。 テスト用に準備したプロジェクトディレクトリ（Git-Practice） Git-Practice/├── index. html├── css/│ └── style. css└── js/└── script. js 【git branch / git checkout】ブランチの新規作成 ＆ ブランチの移動 ... --- ### 【Git】ローカル開発／ブランチ開発でよく使うコマンド一覧 - Published: 2024-03-29 - Modified: 2024-05-22 - URL: https://noveblo.com/git-branch-command-for-local/ - カテゴリー: Git 筆者の備忘録用に、ローカル開発におけるGitの基本コマンド（ブランチ編）をまとめました。 Gitをインストールし、Git管理対象となるプロジェクトフォルダを用意したあとの基本操作をまとめています。 そもそもブランチとは？ ブランチとは、特定の開発作業（サイトに特定の機能を追加する、など）を独立して進めるための作業領域のこと。特にチーム開発では欠かせないツールで、個人開発においても組織的なコード管理と効率的な開発フローを実現できます。 ブランチでの作業が完了したら、その変更を主ブランチに「マージ」... --- ### 【Git】ローカル開発／基本操作でよく使うコマンド実施例 - Published: 2024-03-25 - Modified: 2024-04-10 - URL: https://noveblo.com/git-command-example-for-local/ - カテゴリー: Git 筆者の備忘録用に、ローカル開発におけるGitの基本コマンド実施例を纏めました。 Gitはインストール済、以下のプロジェクトディレクトリ（フォルダ）を用意し、エディタはVSコードを使います。 テスト用に準備したプロジェクトディレクトリ（Git-Practice） Git-Practice/├── index. html├── css/│ └── style. css└── js/└── script. js Git 初期化～初期コミットまで STEPVSコードでターミナルを表示する まず、Gitの... --- ### 【Git】ローカル開発／基本操作でよく使うコマンド一覧 - Published: 2024-03-22 - Modified: 2024-05-08 - URL: https://noveblo.com/git-command-for-local/ - カテゴリー: Git 筆者の備忘録用に、ローカル開発におけるGitの基本コマンドをまとめました。ブランチ開発のコマンド一覧は こちらリモートに関するコマンドについては別記事に纏める予定です。 Gitをインストールし、Git管理対象となるプロジェクトフォルダを用意したあとの基本操作をまとめています。 Gitの基本コマンド一覧 【git init】リポジトリを初期化（新規作成）する git init 新しいプロジェクトをGitで管理するにあたり、最初に行うコマンド。このコマンドを実行すると、管理対象のフォルダ（ディレクト... --- ### 【ChatGPT × WordPress】コピペだけでWebアプリを作ってみた（パーセント計算ツール） - Published: 2024-03-15 - Modified: 2024-03-22 - URL: https://noveblo.com/chatgpt-wordpress-percentapp/ - カテゴリー: AI プログラミングをする上で、もはや欠かせなくなった超便利AI『ChatGPT』を使って、簡単なWebアプリを作ってみました。アプリの作成とWeb公開は WordPress が使えるので、ブログサイトなどを作ったことがある人なら誰でも気軽にチャレンジできます。 本記事では、ChatGPTの有料版「ChatGPT 4」を使い、【パーセント計算ツール】を作る過程を公開しています。プログラミング初心者でも簡単に実装できるので、ぜひ真似してみてください！ パーセント計算ツールの概要 「ある数は全体の何%？」... --- ### 【無料】画像に背景色を付与するWebツール - Published: 2024-02-29 - Modified: 2024-10-26 - URL: https://noveblo.com/background-color-change-image/ - カテゴリー: Webアプリ, 画像処理, 色 選択した画像に好きな背景色を追加できる、無料のWebアプリです。PNGなどの背景が無い（透過している）画像のみ対応しており、背景色変更後の画像はJPEG形式で取得できます。 背景の透過に対応していない（JPEG形式など）／すでに背景がある画像では変更できません。 背景を追加したい画像を選択 背景色を選択 カラーピッカーで選ぶカラーコードを入力する 「# + 6桁」で入力してください。例）#ff0000, #123456 カラーコードは以下のWebツールでも取得できます。 色見本からカラーコードを... --- ### 色見本からカラーコードを取得（コピー）するWebツール - Published: 2024-02-27 - Modified: 2024-10-26 - URL: https://noveblo.com/color-picker/ - カテゴリー: Webアプリ, 色 好きな色をクリックまたはタップすると、その色のカラーコード（16進数）をコピーできるピッカーツールです。 ご利用にあたっては、本Webアプリの 利用規約 も合わせてご確認ください。 16進数カラーコードとは？ HTMLやCSSなどで色指定するときに使われるコードで、『#FF0088』といった ＃(ハッシュ)記号と6つの英数字で構成されます。以下例のように、色によっては3つの英数字で表すこともできます。 Webページなどのモニターで表示される場合、色はRGBで表現します。R（赤）・G（緑）・B（青... --- ### 【自動変換 ＆ 一覧から取得】RGBとカラーコード - Published: 2024-02-22 - Modified: 2024-10-26 - URL: https://noveblo.com/color-code-tools/ - カテゴリー: Webアプリ, 色 カラーコードを調べたい！ 色見本からカラーコードを取得したい！ コンピュータにとっては便利でも、人にとってはピンとこない16進数カラーコードを簡単に取得できるツールを作成しました。自由に使ってみてください！ より多くの色見本からカラーコードをコピーできる、無料のWebツールを公開しました。 「RGB」または「カラーコード」の値から、相互に自動変換するツール R / G / B のそれぞれに0から255までの値（半角のみ）を入力すると、カラーコードと色見本が表示されます。（逆にカラーコード（3桁ま... --- ### 【超便利】iPhoneの画像を背景白色／透明にする方法（ショートカットアプリ） - Published: 2024-02-18 - Modified: 2025-03-26 - URL: https://noveblo.com/no-background-iphone/ - カテゴリー: ショートカット, 画像処理 - タグ: iPhone iPhoneに保存した写真（画像）の背景を消して、白色または透明で保存できます！ 元画像 背景白（JPG形式） 背景透明（PNG形式） 被写体が鮮明でない場合は、うまく背景を切り取れないこともあります。 iOS 13から標準装備となっている『ショートカット』というアプリを知っていますか？初期設定が少し面倒ですが、その後はワンタッチで好きな画像から背景を消したり白にしたりできるようになります。 本記事では、このショートカットアプリを使って画像から背景を削除 or 透明にする方法を紹介します。 ショ... --- ### 【無料】画像サイズを小さくできるWebツール - Published: 2024-02-15 - Modified: 2024-10-26 - URL: https://noveblo.com/resize-image/ - カテゴリー: Webアプリ, 画像処理 選択した画像を1. 0～0. 1倍サイズまで縮小できる、無料のWebアプリです。（0. 5倍を選択した場合：W2,000px × H1,500px → W1,000px × H750px） 画像形式はJPG、PNG、Webp、HEIFなどに対応しており、リサイズ後の画像はJPEGまたはPNG形式で取得できます。（等倍サイズを選択した場合、画像形式の変換のみになります。） リサイズしたい画像を選択 リサイズ後のサイズ 画像サイズを選択 等倍 9/10 8/10 (4/5) 7/10 6/10 5/... --- ### 【CSS】テキストなどの要素をスライド表示するアニメーション - Published: 2024-02-12 - Modified: 2024-02-13 - URL: https://noveblo.com/css-slidein-animation/ - カテゴリー: HTML/CSS/JavaScript 本記事では、以下のように指定したテキストなどをゆっくり／徐々に表示するアニメーション（スライドイン）の実装方法を紹介します。（ボタンをクリックすると、実装したアニメーションが開始されます。） テキストが左から右へ、ゆっくり／徐々に表示されます。 アニメーションを開始 HTML / CSS コード ページを表示（更新）したときに、上記のアニメーションが実行されるコードです。本実装例のように「ボタンを押したときにアニメーションを実行させる」場合はJavaScriptが必要です。 テキストが左から右へ... --- ### 【JS&CSS】画像をクリックしたら拡大表示する方法（モーダルウィンドウ） - Published: 2024-02-01 - Modified: 2024-08-02 - URL: https://noveblo.com/javascript-css-modal-image/ - カテゴリー: HTML/CSS/JavaScript 画像をクリック または タップすると、画面中央に原寸大の画像をフワッと表示する方法を紹介します。（右のレインボーの画像をクリック または タップしてみてください。） 画像を原寸大* で画面中央に表示するコードです。オリジナルの画像自体が小さい場合は、拡大されません。 ※表示画面より大きいサイズの場合、適正サイズまで縮小 クリック or タップで拡大します。もう一度クリック or タップで閉じます。 HTML / CSS / JavaScript コード src 属性には、拡大表示したい画像ファイ... --- ### 【EC-CUBE 4】PDF資料のダウンロードボタンを作る - Published: 2024-01-17 - Modified: 2024-01-17 - URL: https://noveblo.com/eccube-pdf-download/ - カテゴリー: EC-CUBE 4 こちら の公式ページを参考に、注文書のPDFファイルをダウンロードできるボタンを設置してみました。 ダウンロードボタン設置後のトップ画面 中央のダウンロードボタンをクリックすると、ダウンロードさせたいPDFファイルが開きます。 ダウンロードボタンの作成手順 管理画面の「コンテンツ管理」→「ファイル管理」より、PDFファイルをアップロード。 ダウンロードをTwigテンプレートに記述。 assetの第一引数には、ダウンロードしたいPDF名を記述します。 target="_blank" を合わせて記述... --- ### 【JS&CSS】モーダルウィンドウの作り方 - Published: 2023-12-26 - Modified: 2024-09-05 - URL: https://noveblo.com/javascript-css-modal-window/ - カテゴリー: HTML/CSS/JavaScript ボタンクリックで、画面中央にフワッと別ウィンドウを表示させる方法（モーダルウィンドウの作り方）について、HTML / CSS / JavaScriptコードを公開します。 モーダルウィンドウ表示 ダミーテキスト／ダミーテキスト／ダミーテキスト／ダミーテキスト／ダミーテキスト／ダミーテキスト／ダミーテキスト／ダミーテキスト／ダミーテキスト／ダミーテキスト／ダミーテキスト／ダミーテキスト／ダミーテキスト／ダミーテキスト／ダミーテキスト／ダミーテキスト／ダミーテキスト／ダミーテキスト／ダミーテキスト／... --- ### 【EC-CUBE 4】ゲスト購入に会員情報を後から紐づける方法 - Published: 2023-12-19 - Modified: 2023-12-19 - URL: https://noveblo.com/eccube-order-related-to-member/ - カテゴリー: EC-CUBE 4 会員登録をせずゲストで発注した注文情報に、後から会員情報を紐づける方法について。 EC-CUBE で2年ほどショップ運営をしていますが、初回の購入は会員登録をしないゲスト購入の割合がかなり高く、後から会員登録をするケースも見られました。そんなとき、非会員時の注文に会員情報を紐づけたい場面も出てきました。 ただ、EC-CUBE の管理画面では、以下のように会員IDは「非会員」となっており、ここに会員IDを割り当てることができません。 ここを変更するには、データベースの内容自体を書き換える必要がある... --- ### 【EC-CUBE 4】商品をスライダー（カルーセル）で表示する方法 - Published: 2023-12-01 - Modified: 2023-12-01 - URL: https://noveblo.com/eccube-slider-display/ - カテゴリー: EC-CUBE 4 商品一覧をスライダー（カルーセル）表示する方法を紹介します。 EC-CUBEには「Slickスライダー」というjQueryプラグインが使われており、これを利用することで複雑なコードを書かなくても（管理画面でTwigテンプレートを修正するのみで）スライダー表示を実装できます。 トップページのメイン画像のような表示を、商品一覧に応用するイメージです。本記事では以下ブロックの作り方（コード）を共有します。 4商品ずつ表示され、5商品目以降はスライダーで表示されます。 スライダー実装までの手順 本記事で... --- ### 【EC-CUBE 4】Twig まとめ(4)　～ マクロについて ～ - Published: 2023-11-17 - Modified: 2025-02-12 - URL: https://noveblo.com/eccube-twig-macro/ - カテゴリー: EC-CUBE 4 本記事では、Twigテンプレートでコード（機能）の再利用に使われる『マクロ』について纏めています。 マクロとは？ 繰り返し使いたいコードを小さなパッケージにまとめられるツール。マクロとしてコードを設定しておくと、そのマクロの名前を呼び出すだけで設定されたコードを繰り返し使えます。 なお、Twigについては以下記事でも纏めていますので、合わせてご覧ください。 Twig まとめ(1)　～継承やブロックについて～ Twig まとめ(2)　～ if / for / set / with ～ Twig ま... --- ### 【自動計算】BMI / 身長 / 体重 の計算ツール - Published: 2023-10-07 - Modified: 2025-04-22 - URL: https://noveblo.com/calculate-bmi/ - カテゴリー: Webアプリ このツールは ... 回 使われています。 いずれかのフォーム2つに数値を入力すると、残りの1つが算出されます。 計算対象 身長(cm) 体重(kg) BMI 肥満度 ①BMI ②体重 ③身長 クリア ご利用にあたっては、本Webアプリの 利用規約 も合わせてご確認ください。 BMI（ボディマスインデックス）とは 体重と身長の関係を示す指数のこと。成人の肥満度を評価するための一般的な方法として、広く用いられています。 BMIは以下の式で計算されます。 BMI ＝ 体重(kg) 身長(m) × 身... --- ### 【自動計算】素因数分解の計算ツールと計算方法 - Published: 2023-10-03 - Modified: 2025-04-22 - URL: https://noveblo.com/calculate-prime-factorization/ - カテゴリー: Webアプリ このツールは ... 回 使われています。 入力した数字を素因数分解する自動ツールです。入力は、2以上100,000,000,000（1,000億）未満の正の整数を入力してください。 ここに結果が表示されます。 ご利用にあたっては、本Webアプリの 利用規約 も合わせてご確認ください。 素因数分解の計算手順 素因数分解とは、ある自然数をその数の約数である素数の積として表現することを指します。例えば、「56」は 2 × 2 × 2 × 7 という4つの素数の積として表せ、56 = 23 × 7とな... --- ### 【自動計算】分数の約分ツールと計算方法 - Published: 2023-09-29 - Modified: 2025-04-22 - URL: https://noveblo.com/calculate-fraction-simple/ - カテゴリー: Webアプリ このツールは ... 回 使われています。 分数の約分ができるツールです。計算過程も合わせて表示されます。 = ÷ ÷ = ご利用にあたっては、本Webアプリの 利用規約 も合わせてご確認ください。 計算方法は比を簡単にする場合と同じで、分子・分母の最大公約数でそれぞれを割って算出します。 分数の計算（+, -. ×, ÷）の自動計算ツールも公開しています。 約分の計算方法 分子と分母の共通の約数（最大公約数）を見つけます。 分子と分母、それぞれを最大公約数で割ります。 例） 15 20 = 1... --- ### 【EC-CUBE 4】マスターテーブルを新規に作成し、管理画面で操作する方法 - Published: 2023-09-22 - Modified: 2025-04-09 - URL: https://noveblo.com/eccube-create-mtb/ - カテゴリー: EC-CUBE 4 この記事では、オリジナルのマスターテーブルをデータベースへ追加し、管理画面で登録できるようにする方法を紹介します。 独自マスターテーブル「mtb_maker_status」を追加、マスタデータ管理で選択できるようにします。 「mtb_maker_status」を選択すると、IDとNameが登録できます。 【動作環境】EC CUBEのバージョン：4. 3. 0サーバー：XServer マスターテーブルとは？ EC-CUBE では、システム上で使用される基本的な設定や情報を保持するマスターテーブルが... --- ### 【EC-CUBE 4】管理画面 / 商品管理のカスタマイズ（3）　～ 編集・削除 ～ - Published: 2023-09-20 - Modified: 2025-03-20 - URL: https://noveblo.com/eccube-adminpage-editrecord/ - カテゴリー: EC-CUBE 4 前回・前々回、管理画面の商品登録に新メニュー【メーカー管理】を追加し、新しくメーカーを追加できるようにカスタマイズしました。 今回はメーカーの新規登録に加え、保存済メーカーを一覧から選んで編集したり、削除したりする方法を紹介します。 ステップ ① 管理画面に新規メニューを実装 メニューの追加まで実装 ステップ ② 保存データの一覧表示 & 新データ追加機能の実装 「dtb_maker」に保存されているメーカーを一覧表示。また、新しいメーカーを追加するためのフォームを設置。 フォームを入力して「新... --- ### 【EC-CUBE 4】管理画面 / 商品管理のカスタマイズ（2）　～ データ追加 ～ - Published: 2023-09-20 - Modified: 2025-03-20 - URL: https://noveblo.com/eccube-adminpage-addrecord/ - カテゴリー: EC-CUBE 4 前回、管理画面の商品登録に新メニュー【メーカー管理】を追加しました。今回は、メーカー管理メニューから実際にメーカーを新規追加・保存できるようにする方法を紹介します。（少々大掛かりなカスタマイズのため、本記事を含む 4部構成 になっています。） ステップ ① 管理画面に新規メニューを実装 メニューの追加まで実装 ステップ ② 保存データの一覧表示 & 新データ追加機能の実装（今回） 「dtb_maker」に保存されているメーカーを一覧表示。また、新しいメーカーを追加するためのフォームを設置。 フォ... --- ### 【EC-CUBE 4】管理画面 / 商品管理のカスタマイズ（1）　～新メニュー追加～ - Published: 2023-09-19 - Modified: 2025-03-20 - URL: https://noveblo.com/eccube-adminpage-customize-basis/ - カテゴリー: EC-CUBE 4 この記事では、以下のような管理画面の商品登録に新しい項目を追加するカスタマイズ方法を紹介します。 カスタマイズ完了後の管理画面 少々大掛かりなカスタマイズのため、本記事を含む 4部構成 になっています。 ステップ ① 管理画面に新規メニューを実装（今回） メニューの追加まで実装 ステップ ② 保存データの一覧表示 & 新データ追加機能の実装 「dtb_maker」に保存されているメーカーを一覧表示。また、新しいメーカーを追加するためのフォームを設置。 フォームを入力して「新規作成」をクリックする... --- ### 【EC-CUBE 4】デフォルトのRepositoryを拡張するカスタマイズ - Published: 2023-09-14 - Modified: 2025-03-17 - URL: https://noveblo.com/eccube-repository-custom/ - カテゴリー: EC-CUBE 4 この記事では、既存のリポジトリを拡張して新しい機能（メソッド）を追加するカスタマイズについて紹介します。 【動作環境】EC CUBEのバージョン：4. 3. 0サーバー：XServer ProductRepositoryを拡張する ProductRepositoryに新しい関数を定義したい場面を考えます。例として、以下のような【特定のタグをもつ商品のみを表示する一覧ページ】を作成してみます。 【サンプル】というタグが付いた商品のみを表示するページ こちらのページは 【EC-CUBE 4】特定のタ... --- ### 【EC-CUBE 4】EntityTypeを使ってフォームを追加する方法 - Published: 2023-09-13 - Modified: 2025-03-14 - URL: https://noveblo.com/eccube-entitytype/ - カテゴリー: EC-CUBE 4 以下記事の応用編として、EC-CUBE管理画面の商品登録から、関連エンティティ（Maker）を追加できるフォームの生成方法を紹介します。 商品登録に新しいフォーム（TextType）を追加する方法 ProductエンティティとMakerエンティティを連携する方法 実装後の商品登録画面 「メーカー」という項目を作成し、関連付けたいMakerエンティティをプルダウンでメーカー名から選べるようにしました。メーカー名を選ぶと、該当するidがProductテーブル（dtb_product）のmaker_i... --- ### 【EC-CUBE 4】既存テーブルと新規テーブルを連携（リレーション）するカスタマイズ - Published: 2023-09-12 - Modified: 2025-04-17 - URL: https://noveblo.com/eccube-linking-default-table/ - カテゴリー: EC-CUBE 4 以下記事（新規作成した2つのテーブルを連携させる）の応用編として、デフォルトで用意されている商品テーブル（dtb_product）と、新規に作成したメーカーテーブル（dtb_maker）を関連付けて管理する方法について紹介します。 【動作環境】EC CUBEのバージョン：4. 3. 0サーバー：XServer テーブル連携は、所有側と非所有側の両エンティティに関連性を定義する EC-CUBEのフレームワークであるSymfonyでは、Doctrine ORMを使用することでエンティティ間に関連性（... --- ### 【EC-CUBE 4】複数のテーブル同士を連携（リレーション）するカスタマイズ - Published: 2023-09-08 - Modified: 2025-04-16 - URL: https://noveblo.com/eccube-table-linking/ - カテゴリー: EC-CUBE 4 この記事では、以下のように2つのテーブルを関連付ける方法を紹介します。 「dtb_product_class」テーブルでは、「dtb_product」や「dtb_sale_type」などのテーブル同士がidで関連づいている。 「dtb_product_class」テーブルの「product_id」をクリックすると、「dtb_product」テーブルの対象レコードが表示される。 【動作環境】EC CUBEのバージョン：4. 3. 0サーバー：XServer テーブル連携は、所有側と非所有側の両エン... --- ### 【超便利】iPhoneの写真をワンタッチでPDFに変換する方法（ショートカットアプリ） - Published: 2023-09-08 - Modified: 2025-03-26 - URL: https://noveblo.com/pdf-iphone/ - カテゴリー: ショートカット, 画像処理 - タグ: iPhone iOS 13から標準装備となっている『ショートカット』というアプリを知っていますか？初期設定が少し面倒ですが、その後はワンタッチで画像をPDFに変換できます。 本記事では、このショートカットアプリを使って画像にPDFに変換→保存する方法を紹介します。 ショートカットアプリが入ってない方は、App Store から無料でインストールできます。 本記事で作成した画像結合は こちら から利用できます。（「見つかりません」と表示されたときはリロードしてみてください。）使い方は こちら を参考に。 ショー... --- ### 【自動計算】分数の計算ツール（足し算・引き算・掛け算・割り算） - Published: 2023-09-02 - Modified: 2025-04-21 - URL: https://noveblo.com/calculate-fraction/ - カテゴリー: Webアプリ このツールは ... 回 使われています。 分子と分母の数字を入力するだけで、分数の足し算・引き算・掛け算・割り算ができます。3つ以上の分数にも対応しています。 ＋入力 クリア / / 選択してください 足し算（和） 引き算（差） 掛け算（積） 割り算（商） 再計算する 計算結果: 使い方 分子と分母に数字を入れます。 計算方法（和・差・積・商）を選択すると、選択した方法で計算した結果が表示されます。 入力値を変更した場合は、計算方法を選び直すか再計算ボタンを押してください。 「＋入力」を押すと... --- ### 【自動計算】確率を求める計算ツールと計算方法 - Published: 2023-08-26 - Modified: 2025-04-21 - URL: https://noveblo.com/calculate-probability/ - カテゴリー: Webアプリ このツールは ... 回 使われています。 当選確率1%（1/100）のくじやガチャを100回引いたとき、実際に当選 or 外れる確率は？1回で当たる確率と、その試行回数から確率を求める計算ツールです。 当たる確率（分数）当たる確率（%） % 試行回数（回） 回 当たる確率は・・・ % 外れる確率は・・・ % ご利用にあたっては、本Webアプリの 利用規約 も合わせてご確認ください。 確率(P)をN回試行したときに当たる確率は？ ある事象が1回で成功する確率を P とし、この事象を N 回独立し... --- ### 【EC-CUBE 4】商品ページに在庫数を表示する方法 - Published: 2023-08-24 - Modified: 2025-03-11 - URL: https://noveblo.com/eccube-stock-display/ - カテゴリー: EC-CUBE 4 商品登録では商品ごとに「在庫数」が設定でき、在庫数を超える注文は購入できないようになっています。しかし、デフォルトの状態ではWebサイト上に在庫数は表示されないため、ユーザーがあと何個買えるかわかりません。 本記事では、以下のように商品ページに在庫数を表示させる方法を紹介します。 商品企画がない場合の表示 在庫数の登録状況 商品規格がある場合は、「最小在庫数～最大在庫数」を表示 在庫数の登録状況 【動作環境】EC CUBEのバージョン：4. 3. 0サーバー：XServer STEP商品詳細ペー... --- ### 【自動計算】比を簡単にするツールと計算方法 - Published: 2023-08-22 - Modified: 2025-04-21 - URL: https://noveblo.com/calculate-ratio-simple/ - カテゴリー: Webアプリ このツールは ... 回 使われています。 2つ（3つ、4つ）の比を最小化（単純化）するツールです。左辺に求めたい比率を入力すると、右辺にもっとも簡単な整数比が表示されます。ページ後半で計算方法やエクセル（スプレッドシート）での利用方法も解説しています。 簡単にする比を入力 ： ＝ ？ ： ？ ： ： ＝ ？ ： ？ ： ？ ： ： ： ＝ ？ ： ？ ： ？ ： ？ クリア ご利用にあたっては、本Webアプリの 利用規約 も合わせてご確認ください。 エクセル / スプレッドシート で実装する ... --- ### 【自動計算】利益率 / 売価 / 原価 を求める計算ツールと計算方法 - Published: 2023-08-19 - Modified: 2025-04-19 - URL: https://noveblo.com/profit-auto-cal/ - カテゴリー: Webアプリ このツールは ... 回 使われています。 100円で仕入れたものを20%の利益率を見込んで販売する場合、いくらで販売すればよいか？数字を入力するだけでサクッと計算できるツールです。 原価 売価 利益率 利益率(%) 利益 % % % クリア いずれかの入力フォーム2つに数値を入力すると、残りの1つと利益が自動的に算出されます。 ご利用にあたっては、本Webアプリの 利用規約 も合わせてご確認ください。 原価および利益率から売価を求める方法 利益率は、販売金額（売値）に対して得られる利益の割合を... --- ### 【自動計算】割合(パーセント)の計算ツールと計算方法 - Published: 2023-08-18 - Modified: 2025-04-21 - URL: https://noveblo.com/calculate-percentage/ - カテゴリー: Webアプリ このツールは ... 回 使われています。 比べられる数 元の数 割合 ①割合を計算 は の % ②元の数を計算 は の % ③比べられる数を計算 は の % クリア いずれかの入力フォーム2つに数値を入力すると、残りの1つが自動的に算出されます。 ご利用にあたっては、本Webアプリの 利用規約 も合わせてご確認ください。 割合（パーセント / 百分率）の計算方法 比べられる数 元の数 × 100 ＝ 割合（%） 例）原価率や利益率の計算 とある商品を800円で仕入れて1,000円で販売する場合... --- --- ## 固定ページ ### 【Webアプリ】利用規約 - Published: 2024-10-26 - Modified: 2024-10-26 - URL: https://noveblo.com/terms-of-service/ ノベブロ（以下、当ブログ）で公開しているWebアプリの利用規約を次の通り記載します。当アプリを利用することにより、以下の条件に同意したものとみなされます。 当ブログの Webアプリ カテゴリーページ で公開されている全てのアプリが本規約の対象です。 Webアプリの利用対象および目的 当ブログで公開されているWebアプリは、個人・法人／私用・商用を問わず、誰でも無料で利用できます。ただし、以下に該当する場合は利用を禁止します。 アプリを不正目的で利用すること、または他人を欺くための手段として使用す... --- ### 学習用デモページ（引用先） - Published: 2024-06-07 - Modified: 2024-07-10 - URL: https://noveblo.com/reference-page/ 実装例作成のため、本ページは以下2つのページで利用しています。 fetch API & DOMparser Hello World 上記テキストデータ【Hello World】をfetch APIで取得し、さらにDOMParserでDOM形式に変換して以下ページで表示させます。 iframe タグを使ってこのページを別ページ（下記）で表示。その際、別ページの要素の高さは本ページの高さに合わせて表示させる。 --- ### TOP - Published: 2024-03-22 - Modified: 2024-12-25 - URL: https://noveblo.com/ NEW｜新着記事 WebアプリHTML/CSS/JavaScriptEC-CUBEGASショートカット Youtube｜ワンポイント解説動画 https://youtube. com/shorts/xV4_qGHY314? feature=share 【Photoshop】モックアップの作成方法（バッグ編） https://youtube. com/shorts/8VeS0LnaEuY? feature=share 【Illustrator】白黒ロゴをアウトライン化する方法 https://yo... --- ### 自己紹介 - Published: 2022-02-26 - Modified: 2025-05-01 - URL: https://noveblo.com/profile/ 本サイトの管理者「ひろ」です。 1986年生まれの三重県出身。 高校卒業後、名古屋(6年) ▶ 大阪(3年半) ▶ 東京(6年半) と日本の都市を移り住み、今は愛知県豊橋市に住んでおり、ブログやECサイト運営、Webサイト制作などをしています。 本サイトの主な内容 Webアプリ 「こんなツールが欲しい！」というのがあれば こちら まで。 HTML / CSS / JavaScript を使ったWebコーディング EC-CUBE 4 カスタマイズ 写真 / 画像の加工 Webサイトの制作実績 ノベ... --- ### プライバシーポリシー - Published: 2022-02-23 - Modified: 2024-10-26 - URL: https://noveblo.com/privacy-policy/ ノベブロ（以下、当ブログ）のプライバシーポリシー・免責事項を次の通り記載します。 個人情報について 当ブログでは、お問い合わせや記事へのコメントの際、名前（ハンドルネーム）やメールアドレス等の個人情報を入力いただく場合がございます。 個人情報の利用目的 取得した個人情報は、お問い合わせに対する回答や必要な情報を電子メールなどでご連絡する場合に利用させていただくものであり、これらの目的以外では利用いたしません。 個人情報の保管 お客さまの個人情報を正確かつ最新の状態に保ち、個人情報への不正アクセス... --- ### ノベブロについて - Published: 2021-09-16 - Modified: 2025-05-01 - URL: https://noveblo.com/site_profile/ ノベブロにお越しいただき、ありがとうございます。当サイトを運営している「ひろ」です。以下のような記事を執筆・掲載しています。 PC・スマホの小ネタ（記事一覧は こちら） HTML / CSS / JavaScriptなどを使ったWebページの様々な実装方法（記事一覧は こちら） HTML / CSS / JavaScriptを応用して作成した無料Webアプリ（記事一覧は こちら） ECオープンソース・EC-CUBEのカスタマイズ方法（記事一覧は こちら） PC・スマホの小ネタ 当サイトでは、主に... --- ### お問い合わせ - Published: 2021-08-04 - Modified: 2025-02-17 - URL: https://noveblo.com/inquiry/ --- ---