JavaScript(ジャバスクリプト) 【JavaScript】async 属性を付与して読み込み順番を変える
async属性を使用してスクリプトの読み込み順序を変更する例を示します。以下は、3つのスクリプトがあり、それぞれが異なる順序で非同期に読み込まれる例です。async属性とは？async 属性は、HTMLの<script>タグに使用される属性...
EGUWEB
JavaScript(ジャバスクリプト) 
GoogleSpreadsheet(スプレッドシート) 【スプレッドシート】IFERROR 関数を使用してN/Aエラー時に「商品が見つかりません」と表示する
IFERROR 関数についてGoogle スプレッドシートで IFERROR 関数を使用すると、指定された式がエラーを返す場合に、代わりに表示する値を定義できます。これは、特に VLOOKUP などのエラーを起こしやすい関数を使用する際に便...
PWA（プログレッシブウェブアプリ） FirebaseでPWAのPush通知アプリを作る（Part1）
Firebaseを使用してPWA（プログレッシブWebアプリケーション）のPush通知アプリを作成する方法についての詳細な手順を以下に示します。これはPart1であり、Firebaseのセットアップと基本的なPWAの設定に焦点を当てます。以...
Gmail(Gメール) 【Gmail】便利な検索機能20個｜メールの整理や検索を効率的に行う方法
以下、それぞれGmailの便利な検索機能です。キーワード検索キーワード検索： メールの本文や件名に特定のキーワードが含まれている場合、検索ボックスにキーワードを入力して対応するメールを見つけることができます。差出人指定差出人指定： from...
Scratch(スクラッチ) 【Scratch】スクラッチプログラミングのアイデア30個
スクラッチを使うと、様々なゲームやアプリケーションを作ることができます。Scratchはこちらシンプルなブロック崩しゲームシンプルなブロック崩しゲーム: プレイヤーがパドルをコントロールしてボールを跳ね返し、ブロックを崩していくクラシックな...
GAS(GoogleAppsScript) icsファイルとは？GASでの生成方法について
icsファイルとはicsファイルは、iCalendarフォーマットで構造化されたカレンダーデータを含むファイルです。iCalendarは、イベントや予定などのカレンダー関連の情報を共有するための標準フォーマットです。ICSは「iCalend...
CSS(シー・エス・エス) CSSのclass名に使える文字は？適切なクラス名とそのサンプル
CSSのclass名に使えるルールCSSのクラス名には、ほとんどのUnicode文字が使用できます。ただし、いくつかのルールがあります。英数字（a-z、A-Z、0-9）は使用できます。ハイフン（-）やアンダースコア（_）も使用できます。ただ...
SEO(検索エンジン最適化) YMYLとは？SEOに関する重要な概念について
YMYLとは？YMYLとは、Your Money or Your Lifeの略で、直訳すると「あなたのお金、あなたの人生」という意味です。Googleの検索品質評価ガイドラインでは「人の将来の幸福、健康、経済的安定、または安全に影響を与える...
JavaScript(ジャバスクリプト) 【JavaScript】画面遷移中にぐるぐるローディングアニメーションを表示したい
グルグル回るローディングアニメーションリンク先をクリックした際に、グルグル回るローディングアニメーションを表示してみます。スクリプト参考例特定のリンクをクリックしたときにローディングを表示するようにしたい場合、JavaScriptでそのリン...
CSS(シー・エス・エス) z-indexとは？要素の重なり順番を制御するCSS
z-indexは、要素のスタッキングコンテキスト内での描画順序を制御するためのCSSプロパティです。このプロパティは通常、position プロパティが static 以外の値を持つ要素に対して使用されます。以下に、z-indexの詳細な説...
GAS(GoogleAppsScript) 【GAS】スプレッドシートをJSON形式で出力して読み込むAPIを作る（Part2）
前回は、GoogleスプレッドシートをJSON形式で出力するところまで進みました。続きです。JSONデータを出力するHTMLJSONデータから total フィールドの値を取得して表示するためのHTMLコードを準備します。<div clas...
GAS(GoogleAppsScript) 【GAS】スプレッドシートをJSON形式で出力して読み込むAPIを作る（Part1）
GoogleスプレッドシートをJSON形式で出力し、それを読み込むAPIを作成してみます。以下の例では、doGet 関数を使用してJSON形式でデータを出力し、doPost 関数を使用してデータを書き込むようなAPIを作成しています。Goo...
JavaScript(ジャバスクリプト) 【JavaScript】リンクをクリックしたらTwitterに投稿できるようにしたい
HTML部分を作るまずは、表示するカードのHTML部分を作ります。<div class="card-container"> <div class="card"> <a href="#" onclick="tweetCard('いつもありがと...
GoogleSpreadsheet(スプレッドシート) 【Google スプレッドシート】スペースやカンマで区切られた列を分割する（SPLIT 関数）
Google スプレッドシートに貼り付けたCSVなどのデータの列を分割するには、以下の2つの方法があります。方法1： > を使用する分割したい列を選択します。メニューバーの タブをクリックします。 をクリックします。区切り文字を選択します。...
Canva（キャンバ） Canva(キャンバ)でLINE公式アカウントのリッチメニューを作る方法
Canva(キャンバ)を使ってLINE公式アカウントのリッチメニューを効率よく作る流れです。CanvaにログインするCanvaの公式サイトにアクセスして、ログインします。アカウントが無い場合はアカウントを作成します。アカウントを作成するには...
Cursor(カーソル) Cursor(カーソル)でAIを呼び出す方法（Command+K）
CursorでAIを呼び出すには、以下の2つの方法があります。1. キーボードショートカットを使用するCursorのキーボードショートカットは、Command+Kです。Windowsの場合はCtrl+Kです。このキーを押すと、AIのメニュー...
Cursor(カーソル) 「Cursor」とは？AIでコード生成・レビュー・デバッグが可能な次世代エディタ
Cursorは、AIを活用してコーディング作業を効率化するテキストエディタです。Visual Studio Code（VSCode）をフォークして作られており、VSCodeの基本的な機能に加えて、AIによるコード生成、コードレビュー、デバッ...
JavaScript(ジャバスクリプト) 【JavaScript】クイズで正解したら下の方に正解・不正解と表示されるようにしたい
JavaScriptで簡単なクイズのWebページを作成します。HTML<div id="quiz-container"> <h2>クイズ</h2> <p>世界で最も高い山は？</p> <button onclick="checkAnswer...
WebService(ウェブサービス) SiteOly(サイトオリー)とは？Googleスプレッドシートを活用したノーコードWEBサイト作成サービス
SiteOly（サイトオリー）とは？SiteOly（サイトオリー）は、Googleスプレッドシートを使用して、簡単かつ迅速に高度なWebサイトを作成するためのツールです。通常、Webサイトの構築にはHTMLやCSS、JavaScriptなど...
GAS(GoogleAppsScript) 【GAS】Google Apps Scriptを使用してLINE Botを作成する（オウム返しBot編）
LINE BotをGoogle Apps Scriptを使用して作成する手順を以下に示します。これには、LINE Messaging APIを使用してメッセージを送受信する基本的なスクリプトとwebhookを使います。スプレッドシートと連携...
JavaScript(ジャバスクリプト) 【JavaScript】URLパラメータ値でコンテンツの表示・非表示を切り替える
JavaScriptを使って、URLパラメータ値でコンテンツの表示・非表示を切り替えます。URLからパラメータを取得するURLからパラメータを取得します。 <script> $(document).ready(function() { //...
Windows(ウィンドウズ) Windows 11で音声入力を行う方法（Win + H キー）
キーボードショートカットを使用すると便利Windows 11でキーボードショートカットを使用して音声入力を開始することができます。Windows 11では、 + キーを押すと音声入力が開始されます。このキーボードショートカットを利用して、任...
Database(データベース) 予約管理システムのデータベース構造（参考例）
予約管理システムのデータベース構造（参考例）予約管理システムのデータベース構造は、システムの要件によって異なりますが、一般的な要素やテーブル構造の例です。この例は、簡単な予約管理の機能を備えたデータベース構造です。データベース管理システムに...
GAS(GoogleAppsScript) 【GAS】エポック（Epoch）とは？Unixエポックの基本と使用例について
エポック（Epoch）とはエポック（Epoch）は、時間を計測するための基準となる特定の瞬間を指します。コンピュータサイエンスの文脈では、通常、1970年1月1日 00:00:00 UTC（協定世界時）をエポックとして使用します。これをUn...
GAS(GoogleAppsScript) 【GAS】Googleカレンダーの過去の予定を全部削除する関数（deletePastEvents）を作る
何らかの理由でGoogleカレンダーの過去の予定データを一気に削除したいときにもGASが使えます。※このスクリプトを実行すると、過去のイベントが全て削除されますので、慎重に実行してください。過去の予定を削除する関数過去の予定をすべて削除する...
Mac(マック) Macで隠しファイルを表示する方法｜Command + Shift + ドット（.）
方法1: Finderのショートカットキーを使用Finderを開く: デスクトップやDockからFinderを起動します。ショートカットキーを使用: キーボードで Command + Shift + ドット（.） を同時に押します。これによ...
Web(ウェブ技術関連) Shift-JIS（シフト・ジス）とは？文字コードの基本について
Shift JIS（シフト・ジス）は、主に日本語の文字をエンコードするための文字コードの一つです。以下に、Shift JISに関する詳細を述べます。開発と歴史Shift JISは、主に日本のコンピュータメーカーであるNECが提唱し、Micr...
Netlify(ネトリファイ) Netlify(ネットリファイ)をスタートしてGithubのデータをデプロイする
前回の続きです。Netlifyをスタートして、Githubのデータをデプロイする手順を説明します。Netlifyのアカウントを作成まずは、Netlifyのアカウントを作成します。Netlifyの公式サイトにアクセスし、「Sign up」をク...
Netlify(ネトリファイ) Netlify(ネットリファイ)とは？無料で始められる静的サイトホスティングサービス
Netlify(ネットリファイ)とは？Netlify(ネットリファイ)は、サンフランシスコをベースとするクラウドコンピューティングの企業が運営する静的サイトホスティングサービスです。静的サイトとは、HTML、CSS、JavaScript な...
WordPress(ワードプレス) 【WordPress】flexbox（フレックスボックス）で要素を中央に配置する
Flexboxを使ってブロックを中央に配置する方法です。Flexbox（フレックスボックス）とは？WordPressで要素を中央に配置するには、Flexboxを使用すると便利です。.center-box { display: flex;}F...
