メインカテゴリーを選択しなおす
【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)で、下記の処理を順に実行させています。 雪うさぎを画面外に配置(スタート位置) 雪うさぎの縦位置を移動し、落下を表現 雪うさぎの縦横比率を交互に変え、着地時のぷるぷる感を表現 雪うさぎの横位置を移動+角度を変更し、転がり…
PageLinker: 今見ているページのリンクを作成する無料ツール
※この記事には広告が含まれます。 インターネットは情報の宝庫ですが、役立つページを見つけたとき、それをどうやって簡単に友達や家族と共有するか、または自分のブログやウェブサイトで引...
【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タグを含むテキストや、改行・スペースをカウントする便利な文字数カウントツールです。ワンタッチで簡単に文字数をカウントできます。素早く正確な文字数を把握しましょう。
A8.netに提出する掲載広告URLリストを自動生成するオンラインツール
A8.netに提出する掲載広告URLリストのCSVファイルを全自動で出力する無料オンラインツールです。サイトマップURLがあれば誰でも利用できます。
仕事で同期, 非同期, async, awaitとか色々出てくるんですが、いつも忘れてしまうのでまとめさせてください。
【有料級】Googleフォームの回答内容をGASで取得し、Googleドキュメント内の本文を書き換え&PDF化してメールを自動送信しよう!
近年、Googleフォームの回答内容を活用した業務効率化のニーズは非常に高まっています そこで、本記事ではGo
諸用で必要になったので、特定の文言を抽出するchromeの拡張機能を作りました。マーケットに出すものなどではなく、完全に自分用のものとなります。
【GAS】Googleフォームの様々な項目の回答取得方法について徹底解説
GAS(Google Apps Script)を使ってGoogleフォームの回答を取得する際、複数回答や
【2023年最新版】Googleフォームの回答者に自動でメールを送ろう!
Googleフォームの回答者にサンクスメールを送りたい!と思ったことはありませんか?回答者に回答内容をそのまま
CTFで問題を解いている中で、学んだ・知った知識を小ネタ集としてまとめました。当たり前すぎる内容が多いかもしれませんが、誰かの役に立てれば幸いです。
Template Methodパターンを使って簡単なアプリを作ってみた
デザインパターンの一つ、Template Methodパターンを勉強してみました。今回はQtとC++を使って、簡単な(無意味な)GUIアプリを作ってみました。テンプレートを使うように実装することで、コードの構造が綺麗になるのかも?というのが実感できました。
JavaScriptを触っていて、同期・非同期関数のエラーハンドリングについて曖昧なまま理解していたのが、先日ようやく自分自身の中で納得できる説明ができたので、それを書き残しておきます。
【裏技】GAS(Google Apps Script)の実行制限を超えてみよう!
Google Apps Script(GAS)を使用してスクリプトを実行する際、GASの制限にやりたいことが阻
【GAS】Googleカレンダーの翌日の予定を自動でメール通知する方法
Googleカレンダーに登録された予定をうっかり忘れてしまうことってありませんか? そこで、この記事では、Go
【GAS】スプレッドシートで在庫管理を行い、自動で注文書を生成&PDF化してGmailで送信する
一般的に、在庫管理や注文業務は手間がかかります! もし、スプレッドシートを使用して在庫管理を行い、必要数量が在
【解決】GASのスプレッドシート実行速度が遅い?実行速度向上のポイントを解説!
Google Apps Scriptを使用してスプレッドシートの操作を行う際、API呼び出しの回数を過度に増や
【GAS実践編】スプレッドシートのデータを取得し、条件に応じてメールを送信してみよう!
本記事では、Google Apps Script(GAS)の初歩から便利な使い方、そしてビジネスでの活用方法ま
【初心者向け】Google Apps Script(GAS)の「使用制限」や「上限」を意識して主要サービスにアクセスしてみよう!
Google Apps Script(GAS)は、Googleの豊富なサービスを活用できる強力なツールです。GASでスクリプトを実行しようとした際に、謎のエラーメッセージが出て、苦しんだ経験がある方もいるのではないでしょうか?エラーが出た際には、GASの「使用制限」が問題の原因である可能性を検討してみてください。GASは無料で提供されているため、使用には一定の制限が設定されています。この制限を超えると、スクリプトの実行が中断され、エラーが表示されることがあります。
【初心者向け】Google Apps Script(GAS)のスタンドアロン型でGoogleの各種サービスにアクセスしてみよう!
GAS(Google Apps Script)は、Googleの豊富なサービスと連携してタスクを自動化する強力
【GASを0から勉強】Google Apps Script(GAS)とは?「GAS」で実現できることについて徹底解説
Google Apps Script(GAS)は、Googleのさまざまなサービスを自動化し、ビジネスやプロジ
HTMLCollectionとNodeListについて調べると、下記のような内容が書いてあります。 ・どちらも配列風オブジェクト・HTMLCollectionは動的、NodeListは静的・NodeListではforEachが使えるが、HT
JavaScriptで2つの配列から差分(増減)を抽出する方法
JavaScriptで2つの配列から差分を抽出する方法をサンプルコード付きで詳しく解説します。ここで言う差分とは、ある配列には含まれているが、別の配列には含まれていない要素のことです。例えば、[1, 2, 3]と[2, 3, 4]という2つ
JavaScriptのスコープとは、変数の有効範囲のことです。 グローバルスコープ、ローカルスコープ、ブロックスコープの3つがありますので、順に見ていきましょう。 変数がどこで宣言されているかによって、その変数にアクセスできる場所が異なりま
今回は、ループ処理に使われるfor文とwhile文の違いについて書いてみようと思います。 結論から言うと、次のような違いがあります。 for文:指定した回数だけ繰り返す(事前に繰り返す数がわかっている)while文:ある結果にたどり着くまで