メインカテゴリーを選択しなおす
【ちょ文字カウント】選択範囲の文字数カウントが秒でできるBookmarklet
選択範囲の文字数をカウントするブックマークレット『ちょ文字カウント』を紹介します。ブログやSNSでの文章作成に役立つ便利なツールです。
今回はsortメソッドの使い方を説明します！sortメソッドとは、配列の中身を並び替えるための機能で、JavaScriptでは sort（）でデータを「小さい順（昇順）」や「大きい順（降順）」に簡単に並べ替えることができます。※サンプルの表を作っているので、まずは動きを確認してみてください
Ajax技術と通常のポスト通信では、送信されるデータにどのような違いがありますか？
**Ajax技術**と**通常のポスト通信**（HTTP POSTリクエスト）では、データの送信方法やその過程にいくつかの重要な違いがあります。主に、**非同期性**や**ユーザー体験**の観点から異なり、HTTPリクエストの扱い方にも違いが出てきます。 ### 1. **Ajaxと通常のPOST通信の違い** #### 通常のPOST通信 - **同期的にサーバーへリクエストを送信** - フォームなどのデータを送信するために、``タグを使用し、ユーザ…
はじめに n 番煎じ感が否めない記事だけど、ワイの知らない間に scroll-snap-type とかいう知らないプロパティくんがシゴデキらしいと聞いたのでまとめておく コード <div class="container"> <div class="items"> <div class="item">item 1</div> <div class="item">item 2</div> <div class="item">item 3</div> </div> </div> :root { --width: 300px; } /* カルーセルのcontainerの領域を指定 */ .conta…
input type="range"でつまみのない丸っこいスライダーを作る
作りたいもの つまみを非表示もどきにして丸っこくしたい 動作確認環境 Google Chrome コード まずは HTML と CSS でできるところまで作るゾ1 <input type="range" value="0" min="0" step="1" max="5" /> input[type="range"] { -webkit-appearance: none; /* デフォルトのCSSをリセット */ --range-height: 20px; --range-width: 250px; width: var(--range-width); height: var(--range-…
自動車カテゴリのブログですが、最近の車はDIYするところもなく、北海道に住んでいながら、通勤は徒歩のため、燃費情報も掲載が少なくなっています。 別サイトで、マツダのMAZDA3の燃費を掲載しているのですが
JetThemeでトップページ・関連記事・ガジェット等の画像なし記事に専用のサムネイルを表示する【Blogger】
Bloggerテンプレート「JetTheme」で画像のない記事に自動でNo Image画像サムネイルを表示させる方法を紹介。トップページや記事検索結果画面、人気記事ガジェット、最新記事ガジェット、記事下の関連記事セクションに対応。
今回は、JavaScriptを使ったフォーム要素を連動させる方法について説明します！この記事のサンプルコードを見ることで、テキストボックス、チェックボックス、ラジオボタン、セレクトボックスの連動のさせ方などがわかるようになるかと思います。
PageLinker: A Bookmarklet That Automatically Generates Link Tags for the Page You’re Viewing
PageLinker is a handy bookmarklet that instantly retrieves the current page's title and URL to generate a link tag with just one click. Save time and streamline your blog management effortlessly.
PageLinker: 見ているページのリンクタグを自動生成するBookmarklet
PageLinkerは、今見ているページのタイトルとURLを取得し、リンクタグを自動生成してくれる便利なブックマークレットです。リンクタグの生成はワンクリックで簡単に行えます。手間を省いて、効率的にリンクを張ることができるので、ブログ運営を快適に行いたい方におすすめです。
JavaScriptにおける `let`、`var`、`const` は、変数を宣言するためのキーワードです。それぞれの役割と違いについて解説します。 1. **var**: - `var` は古いバージョンのJavaScriptで使用されてきた変数宣言キーワードです。 - 変数が宣言された関数のスコープまたはグローバルスコープで有効です。 - 変数の再宣言や再定義が可能です。 - ブロックスコープを持たないため、ブロック内で宣言されても、外側…
過去30日間の訪問者数とPVの推移を計測するアクセスカウンター「PopoyFlow」を作成してみた！
過去30日間のPVと訪問者数の推移を計測するアクセスカウンター「PopoyFlow」を作成してみました！PHPとJavaScriptを使って作成したアクセスカウンターで、自分のブログのPV推移を可視化することができます。PopoyFlowの機能や使い方、購入方法について詳しく解説します！
過去30日間の訪問者数とPVの推移を計測するアクセスカウンター「PopoyFlow」を作成してみた！
過去30日間のPVと訪問者数の推移を計測するアクセスカウンター「PopoyFlow」を作成してみました！PHPとJavaScriptを使って作成したアクセスカウンターで、自分のブログのPV推移を可視化することができます。PopoyFlowの機能や使い方、購入方法について詳しく解説します！
ランダムパスワード作成Webアプリ「GenPass」を自作してみた！
JavaScriptを使ってランダムなパスワードを生成するWebアプリ「GenPass」を自作してみました！複雑なパスワードを一瞬で作れます。
Bloggerブログへの汎用シェアボタン設置例【Web Share API】
Web Share API を使ってBlogger用に汎用シェアボタンを設置する方法を紹介。ボタンデザインはJetThemeおよびQooQに適合するものを紹介しています。
Gr3-18 おきのどくですが ぼうけんのしょが ふえてしまいました
前回の記事 grandseacrow.hatenablog.com 初代ドラクエをプレイした方ならトラウマになっている「おきのどくですが」 pixiv辞書で記事にもなっています。 dic.pixiv.net で、何でそんな話をしたかというと、Gr3にぼうけんのしょを設置します。 ……うん、意味が分からないですよね。 最初から説明します。 魔法陣Gr3の保存、呼び出しに色々悪戦苦闘していたこの頃ですが、このプログラム言語はそもそも、実用性無視の浪漫重視がコンセプトになっています。 であるならば。無理に別ファイルを作って保存などせずGr3の下部にテキストエリア表示枠を設けてデータ表示、そこをコピー…
前回の記事 grandseacrow.hatenablog.com まずタイトル何ぞや？という方も多いと思いますが、 www.youtube.com これです。そして何でこのタイトルかというと。 yoseisan.lsv.jp リセットボタン！ Verはそんな増えてませんが色々いじってます。 まず保存データ読み込みの前に画面をリセットする必要があるだろうということで テスト的に消去ボタンを追加しました。 本当に全消しするとメイン魔法円と、初期設定でこっそり配置してるPilaまで消えてしまうので、一部残しにするのが微妙に手間取りました。 同じ理由で、Pila-Bを四角に。円とは別形状の方が消しや…
前回の記事 grandseacrow.hatenablog.com よくもだましたアアアア！ - ヒストリエ アル ヒストリエはいいぞ！ ヒストリエ（1） （アフタヌーンKC） [ 岩明 均 ]価格：814円（税込、送料無料) (2025/2/3時点) 楽天で購入 いえね、D3.jsを選んだ理由の一つとして「CSVを簡単に読み込める」ってのがあったのですが、そのためには独自サーバを立ち上げる必要があるとのこと。 であれば、Gr3開発前にやってたGrmの時のようにphp併用でプログラム組む必要が早そうです。 やれやれ、やはりindex.htmlでなくindex.phpが必要になるのか って、…
前回の記事 grandseacrow.hatenablog.com そしてGr3 Ver.86 びよーん Pilaが無事追従する修正完了。 前回も話した通りPila曲線を全部つないで、魔法円追加や移動、Pila-Bの移動ごとに書き換えてます。 ただ最初、更新処理を別の関数で行うつもりが何故か動作せず、追加移動の別処理ごとに直書きで命令処理を書き込んでるためすごく汚いソースになってしまったです。 とりあえず動作最優先で後で直すとして。 気づけば以前作ってたGrmのVerを、数字では超えました。 実際進捗もGr3の方が進んでる気もしますけど。 さて今回は、前回に続いてGr3データの保存形式について…
前回の記事 grandseacrow.hatenablog.com どこのリベンジャーズだよと言われそうなタイトルですが。 今日はお休みだったので色々実装して、その中で一番苦戦したのが、魔法円のつながりを決定する矢印。 これがトライエラーで頑張ったが結局うまくいかず、そしてふと思ったこと。 「そもそも、矢印いらなくね？」 見栄えも魔法陣としてよろしくないし、そもそも順番を把握したければ魔法円に番号をつけたらいいんじゃないか、と。 せっかくなら魔法陣ぽくローマ数字を使おうと、完成したのがコレ 思った以上にお洒落な仕上がりに Pila-Bにも数字を組み込むことで、どの曲線に対応してるのかもわかりや…
【JavaScript】セレクトボックスの要素を選択・取得・追加する方法！
今回は、JavaScriptでセレクトボックスの要素を選択・取得・追加・削除する方法を説明します！
今回は、日付の操作について説明します。この記事を読むことによって、日付の取得、日付のフォーマット、日付のチェック、日付比較の方法がわかるようになります！
copilotを駆使してなんとかサイドパネルのChrome拡張を作ってみた
Qiitaに投稿したので、ついでにこちらにも同内容の記事を投稿。 Chrome拡張の作り方(Manifest V3対応版)作者:山本智男Amazon 個人用プログラムで巡回用のプログラムを作った時に、URLリストをいちいちマウスの左クリックやCTRL+Cでやっているのが面倒になり、ドラッグ・アンド・ドロップでなんとかできないかと言うことで、最初はただのHTMLファイルを作ったのですが、少々不便なのでChrome拡張にしてサイドパネルに設置するようにしました。 元々のURLリストを作るHTMLも含めてほぼcopilot頼りです。 copilotに頼んで当初出来上がったのが以下のHTMLファイル …
テキスト整形ツール紹介 こんにちは！ 今回は、テキストを簡単に整形することができる「テキスト整形ツール」を公開しました。被リンクの増加やSEO対策に、便利なツールを作成して公開すればいいという記事を見つけたので普段記事作成の際に使っている、文字カウントやテキストの整形のツールを公開すればいいのではということで勉強がてら作ってみました。 プログラミングは初心者のため絶対にバグがあると思いますが お許しください(´・ω・｀) このツールを使えば、入力したテキストをさまざまな形式に変換できます。 以下の機能を備えています。 主な機能 大文字・小文字変換: テキストを大文字または小文字に変換できます。…
このツールは、テキストを簡単に整形できる「テキスト整形ツール」を紹介します。ユーザーが入力したテキストを、大文字や小文字に変換したり、全角と半角を切り替えたり、ひらがなとカタカナに変換することができます。また、空白を削除する機能や、リアルタイムで文字数をカウントする機能も搭載しています。 使い方は非常にシンプルで、必要なオプションを選んで「実行」ボタンを押すだけ。整形された結果はすぐに表示され、コピーも簡単です。このツールを利用して、テキストの整形を手軽に行いましょう！
12月ももう半ばとなりました。拙ブログの右カラム、上の方で日付時刻を表示してますが、その辺りに国民の休日や二十四節気および雑節を、訪れた日に合致すれば表示するようにしているんですが、これ、javascript で書いていて毎年書き換えなければならんのです。スキルがないもんで、毎年いざ書き換えるとなると、やり方忘れていて、また一から過去のメモを読み返しては思い出しつつちまちまやってます。
【WP】画像だけのメディアページが自動生成される原因と対処法
画像だけのメディアページが自動生成される原因と対処法についてご紹介しています。これからサイトやブログをWorPressで運営される方や既に運用されていて、原因や対処法が知りたい方のご参考になれば
WordPress：ページの表示速度改善｜Autoptimizeの設定注意点
「Autoptimize」は、WordPressのプラグイン。HTMLやCSS、JavaScript、画像を最適化し、サイトの表示速度を高速化するもの。Autoptimize不具合時の対処法。
GenPass：安全なパスワードを1秒で簡単生成！無料で使える便利ツール スズシンラボ
GenPassは、無料で使えるシンプルで使いやすいパスワードジェネレーターアプリです。強力なパスワードを簡単に生成し、セキュリティを強化するのに役立ちます。
鈴木俊吾（すずしん）がこれまでに作成した自作アプリを一覧で紹介しています。Webアプリ/スマホアプリ/スマホゲームアプリの概要については、各リンク先の記事をご覧ください。
【素のjavascript】全画面ページを縦スライドさせる方法(スマホ対応)
素のJavascriptの全画面（画面いっぱい）の縦スライドの作り方について解説しています。ボタン（インジケーター）付きで、スマホやタブレットなどの指で操作するスワイプの動きにも対応させています。web制作初心者の学習のためにも是非ご覧ください。
【AdobeXD】要素の繰り返しの配置が簡単にできるリピートグリッドの使い方
AdobeXDで要素を繰り返して配置するリピートグリッドの使い方について解説をしています。リピートグリッドでは要素をドラッグで左右上下にリピートが簡単にできますので、是非ご興味のある方はお試し下さい！
