メインカテゴリーを選択しなおす
自作ブログのカスタマイズ:タグ検索機能の実装方法 スズシンラボ
自作ブログにタグ検索機能を追加しました。キーワードを入力すると、そのキーワードに一致するタグの記事を検索できるようになりました。この記事では、そのタグ検索機能の実装方法を紹介します。一般的な方法とは若干異なりますが、参考にしていただければ幸いです。
【JavaScript】ブラウザ判定!User-Agentって?
今回は、JavaScriptでブラウザ判定をする方法を説明していきます。まずはボタンを押してみてください。
URLコピーボタンを各記事のシェアボタン内に配置させるカスタマイズ
WordPressブログに 「URLコピー」 のボタンを自作で作るのに、デザインは既に設置してあるシェアボタンに溶け込ませ、記事一覧からでもきちんと動作するようにしたい……ということで、「URLコピー」 ボタンを独自カスタマイズしてみた。今回はその内容をご紹介する。
【javascript】非同期処理のPromiseとasync / awaitの使い方をわかりやすく解説
JavaScriptの非同期処理に不可欠なPromiseとasync / awaitの使い方をわかりやすく解説します。Promiseチェーンによる処理の流れと、async / awaitを用いた直線的で読みやすいコードの書き方について、具体例を交えて詳しく説明します。非同期処理の理解を深めましょう。
以前アップした「WebARラジコンヘリコプター」のジョイスティックボールに関するスクリプト部分にバグが見つかったので 「WebVRプラネット」ではその部分を修正しています なのでジョイスティックボールのスクリプトとあと自転・公転のスクリプトを残しておきますジョイスティックボール var ballCenterX; //ballの中心座標X var ballCenterY; //ballの中心座標Y var ballRad; //ballの中央からの角度 var shiftX; //ballが移動した時の中心の補正X var shiftY; //ballが移動した時の中心の補正Y var move…
2024年のブログサービスとは到底思えない仕様のムラゴンですが、Javascriptに関しても同様です。 唯一Javascriptのコードを記述できるのはサイドバーのフリースペースのみです。さらにスマートフォンなどのモバイル端末ではJavascriptは無効化されます。 端...
【javascript】addEventListenerの使い方と基本|初心者向け講座
JavaScriptのaddEventListenerメソッドの使い方を徹底解説!基本的な3ステップから、関数の書き方、イベント一覧、複数設定の方法、第三引数の活用、イベントリスナーの削除まで、初心者にもわかりやすく解説します。イベントをもっと効果的に使って、ウェブページをインタラクティブにしましょう。
【JavaScript】パスワードを入力してページ遷移をさせる方法
この記事ではJavasscriptでパスワードを入力してページ遷移をさせる方法についてご紹介しています。特定のユーザーのみに表示を許可したい場合に、ベーシック認証等を設定する事が多いですが、サイト規模や場合によってはJavasscriptで簡単に実装できる事もありますので、是非一度試してみてください!
【Hello World】TypeScript + React Native for Web + React Navigation + Webpack
今度はTypeScript + React Native for Web + React Navigation + webpack + github pages templateを作ってみました。
今回は、JavaScriptで画面サイズを取得して「画面サイズが変わるたびに高さと幅を画面に表示させる」方法について説明します!
Webサイトをデザインする時には、視覚的な演出としてちょっとした動きを付加することも同時に検討する。動きを与えることで見せたいものをより印象付けたり、UIの観点で使いやすくしたり、情報の内容をより分かりやすく伝えることが […]
前回の『WebARでシューティングゲーム』のコードをいつものようにアップしようと思ったのですが 未熟なため全体がダラダラと長く やり方が分からなくて古典的な方法を使ったりしている箇所があって これは良くないぞと… 具体例としては当たり判定です Unityなら Colliderコンポーネントを追加してスクリプトでOnCollitionEnterを呼べばすぐにできますが A-FrameもしくはJavaScriptにそんな便利なものがあるのか? チラッと調べた範囲ではそういうものはなさそうで 仕方がないのでオブジェクトの位置と大きさから計算することにしました 逆に言うとColliderやOnColl…
前回 『WebARでシューティングゲーム』で行った球と球の当たり判定をアップしましたが 他にも数学の力を借りて計算している部分がありまして それは 弾をカメラの向いていた方向に移動させるところです Unityなら transformCamera.forwardで表される方向に時間をかければ良いのですが そんな便利なものは見つかられなかったので自力で計算 弾を発射した時のカメラの角度は取得することができるので 水平方向の角度をx 垂直方向の角度をyとすると const camera = document.querySelector("#camera"); let cameraRotation =…
【簡単】TypeScript + webpack で GitHub pages にホストする
自分の作ったものを簡単に誰でも触れるよう、github pagesにホストしたい。。ポートフォリオ作りのために、github pagesに作品を載せたい。。というわけで、typescript + webpackを使ってgithub pagesにホストした流れをシェアできればと思います。
最近自己プロジェクトでCanvas APIを使ってみたくて、いろいろいじっていたのですが、画像をcanvasに置くとどうしてもいつもぼやけてしまっていました。結構悩んでいたのですが、解法は簡単だったのでシェアします。
【JavaScript】カラフルなオリキャラをランダムに描画する
こんにちはです。あっちのそららです。前回、HTMLとCSS(ウェブ制作などで使う言語)で、オリキャラを描画しました。 acchinosorara.hatenablog.jp 今回はそのアレンジで、大量のオリキャラをランダムに描画するコードを書いてみました。「Result」で確認、右下の「Rerun」で再描画できます。描画はランダムなので、毎回違った結果になります。 See the Pen Fairy-rain by あっちのそらら (@acchinosoraranocode) on CodePen. JavaScriptで乱数を生成、かつ値が被らないようにし、下記内容をランダムに設定しています…
【はてなブログ-カスタマイズ】スマホ版のグローバルナビゲーションに検索機能を追加する(JavaScript・HTML・CSS対応)
スマホ版のグローバルナビゲーションに検索機能を追加してみました。以前「スマホ版のグローバルナビゲーションを設置する」対応をしています(以下リンク)。 今回はそれに検索機能を追加しました。miya-moto-blog.hatenablog.com元々ページの下の方に検索機能はあったのですが、スマホ版だとそこに辿り着くまで意外と遠いです。 今回の対応で、グローバルナビゲーションからいつでも検索できるようになりました。それではサクッと本題へ。
はてなブログカスタマイズの記事まとめ(その8)[CSS、HTML、JavaScript関連]
ブログカスタマイズに関する記事をいくつか投稿したので、まとめてみようと思います。 ちなみにブログカスタマイズの記事まとめは8回目です。これまでのまとめ記事はこちら。 これまでのブログカスタマイズ まとめ記事 ブログカスタマイズの記事まとめ(その1)[CSS/JavaScript/デザインテーマ] ブログカスタマイズの記事まとめ(その2)[CSS/はてなブログ関連/デザインテーマ] ブログカスタマイズの記事まとめ(その3)[CSS/HTML/JavaScript] ブログカスタマイズの記事まとめ(その4)[CSS/HTML/JavaScript/はてなブログ関連] ブログカスタマイズの記事まとめ…
【WordPressなどで使えます】スライムが現れたけど、触ったら逃げ出すソースコード!
WordPressのブログや、ホームページなどに、スライムを登場させるソースコードです。HTML,CSS,JavaScript、遊びで書いた簡単なコードですが、興味が沸いたらコピペして使ってみて下さい。
【はてなブログ-カスタマイズ】スマホ版で追従する目次を表示する(JavaScript・HTML・CSS対応)
スマホ版で目次を常に表示するように対応してみました。 スクロールの度に目次が追従するようにしています。以前「追従する目次をサイドバーに表示する」対応をしています(以下リンク)。 今回はそれをスマホ対応したような内容です。miya-moto-blog.hatenablog.com上記の対応(PCサイズ)だとサイドバーがあるため、そこに目次を表示するようにしました。 今回の対応(スマホサイズ)だとサイドバーがないため、別の方法で目次を表示するようにしています。今回はその辺りに関して詳しく書いていきます。
順列組み合わせをリスト化するページ作成(・∀・) ゲーム制作等のデータ整理に(?)
こんにちは。 前から言っていた組み合わせをリスト化するページを作りました(遅っ)。 複数ある物から そのうちのいくつかを取り出すときの全パターンをリストにするページ↓ 順列・組み合わせをリスト化するページ 作る前にざっとは探してみたのですが意外に無いものですね。Excelでの作り方は結構出てきましたけど。 順列・組み合わせの学習に役立つかはわかりませんが ゲーム制作においてはアイテム合成のパターン整理などに使えると思います。生成した表はコピー&ペーストでEXCELやGoogleスプレッドシートに移すこともできるのでそこから自分用にカスタマイズするなど使い道は広げられそうです。 この記事ではアイ…
JavaScriptさわってみる13回目(´・ω・) 再帰関数
こんにちは。 順列・組み合わせリスト化ページを作成しようと思っていましたが調べているうちに新しいことが出てきたのでまたメモ書きをしておきます。 JavaScriptの再帰関数というものです。 再帰関数は関数の処理の中で自分自身を呼び出す関数のことを指します。自分を呼び出すということは呼び出した自分もまた自分を呼び出すので無限ループになりそうですが停止条件を設定することで特殊な動きをするループを作ることができます。 サンプルとして総和を求める再帰関数↓ function sum(n) { if (n <= 1) { return 1; } return n + sum(n - 1); } この関…
JavaScriptさわってみる12回目(((´・ω・`))) 多重ループと多次元配列、表作成
こんにちは。 ひっさしぶりの”JavaScriptさわってみる企画"です。 前回、アイテムの組み合わせを考える記事を書いて、それをリスト化するってことでEXCELのVBAコードを急に載せたのですが折角だからEXCELを持ってない人でも使えるようにJavaScriptで作ってみようかと思いました(ページは作成中)。 前回の記事↓ JavaScriptさわってみる企画では前回の記事のVBAでやっているような多重ループを用いたことがなかったと思うので先にメモ書きを作っておこうと思います。 それに加えてJavaScriptでは表を作成する必要があるので値を管理しやすくするために多次元配列についても書い…
【WEBアプリ開発】PHPさわってみる① (∩´∀`)∩環境構築(XAMPP)
こんにちは。 今回は”プログラミングとか”と名付けたカテゴリーのハナシです。 ※この記事は初心者がやってみた、という日記です。間違いが多く含まれることをご承知おきください。 前回のこのカテゴリーではサーバーというものをレンタルしてみたっていう日記を書きました。その記事でも書きましたが、サーバーっていうのはネットワークに繋がっていてデータを保管できる場所のことで、これに関係することを今回から始めてみます。 それはPHPっていうやつでサーバー側の処理を作れる言語らしいです。 サーバー側と書きましたがこれに対してクライアント側っていうのがありまして、インターネットでWEBページを閲覧したときに閲覧す…
【Chrome,Firefox,Edge】各ブラウザでJavaScriptを有効にする方法【小技】
はじめに 通常、インストールした状態で何もいじっていなければJavaScriptはオンになっていますが、いつの間にか手違いで設定をオフにしていたなんてこともあるものです。そこで、各ブラウザでJavaScriptを有効にする方法について書いて
Google Apps Scriptsでログが表示されなくなった際の代用方法(GCP不使用)
GASのプロジェクトを作成した際に、Webアプリケーションとしてデプロイすると、console.logやLogger.logが実行ログとして表示されないことがありました。色々と試したのですが、GCPとの連携でも今ひとつうまくいかず、そもそも
こんにちはです。あっちのそららです。今回は、HTMLとCSS(ウェブ制作などで使う言語)で、雪うさぎのアニメーションを作ってみました。「Result」で確認できます(レスポンシブ対応済)。 See the Pen Snow Rabbit by あっちのそらら (@acchinosoraranocode) on CodePen. CSSのアニメーション機能(@keyframes)で、下記の処理を順に実行させています。 雪うさぎを画面外に配置(スタート位置) 雪うさぎの縦位置を移動し、落下を表現 雪うさぎの縦横比率を交互に変え、着地時のぷるぷる感を表現 雪うさぎの横位置を移動+角度を変更し、転がり…
【RPGツクールMZ】プラグインパラメータをゲーム中に変える初心者の試み(; ・`д・´)【プラグインコマンド化】
こんにちは。 体調を崩してちょっと停止してしまいました。体調を崩したと言っても風邪程度のもので今後に影響を与えるやつではなくほぼ回復しました。 さて今回はRPGツクールMZ(RPG Maker MZ)のプラグインのハナシ。 ツクールMZはプラグインをセットすることで機能が追加されたり便利になったりしますね。 そしてそのプラグインにはいくつか種類があります。 ①導入するだけで効果があるもの ②プラグインパラメータで設定する項目があるもの ③プラグインコマンドで効果を発動したり変えたりするもの ④プラグインパラメータとプラグインコマンド両方を使用するもの ⑤その他、メモ欄などを使って効果を設定する…
17歳教の人のための今年の生まれ年と干支を表示するプログラム
Javascript と html の練習がてら、年齢を入力すると生まれ年と干支を表示するプログラムを作ってみました。 17歳教など誕生日を迎えても年を取らない人は便利かも...!? 年齢: 今年の誕生日はまだ ...
QUREO「キュレオ」プログラミング教室の料金・評判を解説!
QUREO(キュレオ)のプログラミング教室の評判や価格はどうなのか?実際にどんなかんじなのかについて具体的に解説!
Amazonアソシエイトで廃止の画像リンクをWordPress記事から一括非表示させる
Amazonアソシエイト ツールバーから 画像リンク 生成機能が消えて間もなく、既存の 画像リンク も廃止でリンク切れ状態に。このまま WodrPress ブログ内に大量のリンク切れコンテンツを内包することは、低質なコンテンツと見なされ兼ねないので、スクリプトで 画像リンク を 一括 非表示 する仕組みを考えました。
イージングって何? 開始とか終了地点に近づくにつれて速度が変わるアレのこと。 今更感満載なので詳しくはググってね。 実装 See the Pen Untitled by m1y474 (@m1y474) on CodePen. const div = document.querySelector("div"); const span = document.querySelector("span"); let left = 0; move(); function move() { // 求める値 += (目標値 - 現在の値) * 0.02 left += ((500 - 16) - left)…
ReactのuseEffectでデータ渡し時の1回だけコンポーネント動作させる
ReactのuseEffectフックは、コンポーネントがマウントされた後や更新された後に特定の副作用を実行するために使用されます。本記事では、useEffectを使ってデータが渡された時に1回だけ動作するコンポーネントの作成方法を紹介します
JavaScriptの配列に重複する値が含まれるか判定する2つの方法
今回は、JavaScriptで1つの変数の配列内に、重複する値が含まれるかどうかを判定する方法について解説します。例えば、データを集計した際に同じデータが含まれているか検索する場合に便利です。また、この方法を利用すれば、連想配列(多次元配列
JavaScriptで配列の重複要素を削除!要素の重複を簡単に解消する実装方法
JavaScriptの配列の重複要素の削除方法とコード例を紹介。初心者も上級者も使えるテクニックでエラーを防ぎ、パフォーマンスを向上させます。
ポップアップ作成のHTML/JavaScript/コピペ可能
HTMLとJavaScriptを使用してポップアップを作成する手順を紹介する記事。コピペ可能なコードと、WordPressでの導入方法も詳しく解説しています。ポップアップの外観やメッセージを簡単にカスタマイズでき、効果的なウェブサイト通知を実現できます。
文字数カウンター:文字数・改行・スペース・HTMLタグのオンラインカウントツール
オンライン文字数カウンターツールです。HTMLタグを含むテキストや、改行・スペースをカウントする便利な文字数カウントツールです。ワンタッチで簡単に文字数をカウントできます。素早く正確な文字数を把握しましょう。