JavaScript(ジャバスクリプト) 【JavaScript】ブラウザ上でWEBPからJPGへの変換を行うツールを作る
HTMLとJavaScriptを使用して、WEBP画像を読み込みJPGに変換してダウンロードする、ブラウザ上でWEBPからJPGへの変換を行うツールを作ります。サンプルページはこちらhtmlコード<!DOCTYPE html><html l...
JavaScript(ジャバスクリプト) 
JavaScript(ジャバスクリプト) 【JavaScript】「文字数カウンター」アプリケーションを作る方法
HTML, CSS, そして JavaScript だけで文字数カウンターを作成してみます。完成形はこちら▼以下は、画面に文字を貼り付けるとその文字数が表示されるコードの例です。文字数カウンターのHTMLコードユーザーがテキストエリアにテキ...
Node.js（ノード・ジェイエス） 【Node.js】npm ERR! path ~/node_modules/sharp
Node.jsプロジェクトでSharp画像処理ライブラリに関連するエラーが発生しているようです。インストールの問題、バージョンの非互換性、または欠落している依存関係に関連する可能性があります。以下は、エラーを解決するために試すことができる一...
Vercel（ヴァーセル） 【Next.js】Fix the upstream dependency conflict, or retry
エラーメッセージによれば、reactとreact-useのバージョンが競合している？ようです。code ERESOLVEnpm ERR! ERESOLVE unable to resolve dependency treenpm ERR! ...
Vercel（ヴァーセル） 【エラー発生】npm ERR! ERESOLVE unable to resolve dependency tree
code ERESOLVEnpm install XXXXXXXnpm ERR! code ERESOLVEnpm ERR! ERESOLVE unable to resolve dependency treenpm ERR!npm ERR...
PWA（プログレッシブウェブアプリ） Next.jsでGenerateSWプラグインを使用する｜workbox-webpack-plugin（PWA化）
GenerateSWプラグインを使用するNext.jsでGenerateSWプラグインを使用してService Workerを構築する場合、以下の手順を実施できます。これにより、Progressive Web App（PWA）機能をNext...
PWA（プログレッシブウェブアプリ） Build failed because of webpack errors｜next-pwaプラグインの設定に問題？
next-pwaプラグインの設定に問題？このエラーは、おそらくnext-pwaプラグインの設定に問題があるために発生しています。Failed to compile.Please check your GenerateSW plugin co...
Notion(ノーション) ChatGPT to Notion Chrome拡張機能と使用方法について
ChatGPT to Notion Chrome拡張機能とは？ChatGPT to Notion Chrome拡張機能を使うと、ChatGPTのチャットをNotionと連携して保存できます。ChatGPT のページでは、各回答の下に新しいピ...
Vercel（ヴァーセル） Command “npm install” exited with 1
npm installコマンドがエラーコード1で失敗したようです。npm ERR! A complete log of this run can be found in:npm ERR! /vercel/.npm/_logs/2023-08...
Marketing(マーケティング) 「ファーストチェス理論」とは？
ファーストチェス理論とは？ファーストチェス理論とは、チェスの名人がチェスを行う際に「５秒で考えた打ち手」と「30分考えた打ち手」のうち、86％は同じになるという理論のことです。つまり、どれだけ長く思考しても、“最初に思いついた手段”に戻って...
JavaScript(ジャバスクリプト) 【Draggabilly】HTML要素をドラッグアンドドロップできるJavaScriptライブラリ
Draggabillyとは？Draggabillyは、HTML要素をドラッグ可能にするためのJavaScriptライブラリです。指定したHTML要素をマウスやタッチ操作でドラッグできるようにします。以下はDraggabillyの基本的な使い...
GoogleSpreadsheet(スプレッドシート) 【Googleスプレッドシート】損益率を求める方法
Googleスプレッドシートで損益率を求める方法です。損益率とは？損益率（そんえきりつ、Profit and Loss Ratio）は、投資やビジネスにおける収益性やリターンの指標です。損益率は、投資や取引の成果や業績を測定する際に使用され...
WordPress(ワードプレス) PopupMakerプラグインとJavaScriptで簡易的なチャットボットを作る（Part2）
前回の続きです。簡易的なチャットボット画面ができた前回、PopupMakerとJavaScriptを使って、簡易的なチャットボットのような画面ができました。前回のままだと、チャットの送信ボタンが無いので、送信ボタンを追加してみます。チャット...
WordPress(ワードプレス) PopupMakerプラグインとJavaScriptで簡易的なチャットボットを作る（Part1）
PopupMakerプラグインとJavaScriptで簡易的なチャットボットを作るPopupMakerはWordPressのプラグインで、ウェブサイトにモーダルウィンドウやポップアップを追加することができます。一方、JavaScriptはウ...
WordPress(ワードプレス) 【WordPress】何度ログインしても自動でログアウトされてしまう問題について
ワードプレスで何度ログインしてもログアウトされる…。クッキーとキャッシュのクリアこれらはしばしばログイン問題を引き起こすため、ブラウザの設定でクッキーとキャッシュをクリアしてみてください。Google Chromeの場合右上のメニューアイコ...
WordPress(ワードプレス) 【WordPress】AI Chatが実装できるプラグイン｜AI Engineプラグイン
AI Engineプラグインとは？AI Engine: ChatGPT チャットボット、コンテンツ生成、GTP-3と4、高度なカスタマイズは、WordPress に AI 機能を追加する強力なプラグインです。このプラグインを使用すると、さま...
Vercel（ヴァーセル） VercelでNotionのデータを連動させる｜Next.js Notion Starter Kit
VercelとNotionを連動させる手順は以下の通りです。この手順は、Next.js Notion Starter Kitを使用している場合の手順です。※VercelとNotionのアカウントを持っていることが前提です。Next.js N...
PWA（プログレッシブウェブアプリ） next-pwaとは？Next.jsにnext-pwaをインストールする流れ(Part1)
next-pwaとは？next-pwaは、Next.jsアプリケーションにProgressive Web App (PWA)の機能を追加するためのプラグインです。next-pwaを使用すると、Next.js アプリケーションをプログレッシブ...
Mac(マック) 【Mac】シェルスクリプトのサンプル例と実行方法について
シェルスクリプトのファイルサンプル例以下にシェルスクリプトのファイルサンプル例を示します。#!/bin/bashecho "Hello World!"#!/bin/bashは、シェルスクリプトの最初の行に書くシェバンと呼ばれる行です。シェバ...
JavaScript(ジャバスクリプト) 【JavaScript】JavaScriptのループ文について（for文・while文・do-while文・break文・continue文）
JavaScriptのループ文について、丁寧に分かりやすくひとつずつ説明します。for文for文は、特定の回数だけ繰り返し処理を行うための文です。for文の構文は、次のとおりです。for (初期化式; 条件式; 増減式) { // 繰り返し...
WordPress(ワードプレス) WordPressの管理画面で管理バー（アドミンバー）メニューのコメントを非表示にする
ワードプレス管理バー（アドミンバー）のコメント部分を非表示にしてみます。admin_bar_menufunctions.phpやWPCodeなどのSnippetsで下記のようなphpを追加します。add_action( 'admin_bar...
JavaScript(ジャバスクリプト) 【JavaScript】イベントリスナー・コールバック関数とは？
JavaScriptのイベントリスナーとコールバック関数は、JavaScriptが動的なWebサイトを作成するために使用する重要な概念です。イベントリスナーとは？JavaScriptでは、Webページ上で何かが起こるたびに「イベント」が発生...
Notion(ノーション) 【Notion】テンプレート＞ビジョンとストラテジー
このテンプレートを使って組織の指針を一箇所にまとめ、常に目につくようにして、参照しやすくすすることができます。テンプレートの追加方法Notoinにログインした状態で下記のページを開くと、テンプレートを追加することができます。リンクをクリック...
Web(ウェブ技術関連) certbot –nginxとは？SSL証明書取得コマンド
Certbotとは？certbot --nginxコマンドCertbotは、Let's Encryptという無料で自動化されたオープンな認証局（CA）からSSL証明書を取得し、インストールするプロセスを自動化するための一般的なツールです。こ...
GAS(GoogleAppsScript) 【GAS】WEBフォームの送信時にチャットワークのルームにGASでメッセージを送信する（Part1）
申し込みフォームなどの送信時に、Google Apps Scriptを使用してChatWorkのルームにメッセージを送信する手順を説明します。以下にステップバイステップのガイドを示します。チャットワークAPIトークンを取得するまずは「チャッ...
WordPress(ワードプレス) 【WordPress】サイトヘルスステータス｜1件の致命的な問題「ページキャッシュが検出されましたが、サーバーのレスポンスはまだ遅いです」の対処法
1件の致命的な問題「ページキャッシュが検出されましたが、サーバーのレスポンスはまだ遅いです」この場合に、キャッシュを作って改善することができるプラグインが「WP Super Cache」プラグインです。WP Super Cacheプラグイン...
Web(ウェブ技術関連) 【SSL】証明書ビューアの項目の意味と詳細について（SSL導入）
SSL導入後に閲覧できる「証明書ビューア」の項目の意味と詳細を見ていきます。証明書ビューアとは？「証明書ビューア」は、コンピュータシステムのセキュリティ機能の一部で、デジタル証明書を表示・管理するためのツールを指します。デジタル証明書は、ウ...
Company(法人) 日本の法人の種類について（株式・合名・合同・合資・有限）
会社法に基づく日本の法人には主に以下のような種類が存在します。株式会社（かぶしきがいしゃ）株式会社（かぶしきがいしゃ）: これは最も一般的な会社の形態で、株主の資本貢献により設立されます。株式会社は、株主の投資額（出資額）を基に株式を発行し...
GAS(GoogleAppsScript) 【GAS】doGetを使って簡易店頭受付システムを構築する-Part3
前回で呼び出しボタンを押して音が鳴るようになりました。あとは、GASを組み合わせて送信をします。スプレッドシートを準備する送信があった際に履歴を登録する用のスプレッドシートを準備します。GASにデータを追記するこのコードは、スプレッドシート...
GAS(GoogleAppsScript) 【GAS】doGetを使って簡易店頭受付システムを構築する-Part2
前回で呼び出しボタンを表示できました。押したら音が鳴るようにする呼び出しボタンなので、音が鳴るようにしています。まずは、メディアライブラリに音源をアップロードします。下記のようにJavaScriptを組むことで、ボタンを押下時に音が鳴ります...
