JavaScript

JavaScript

html2canvasをスマートフォン(iPhone iOS Safari, Android Chromeのレスポンシブページ)に対応させる方法【JavaScript】

先日、『【PNG画像出力&エクセル出力対応】チーム分けWebツール・重複なしで均等に【グループ分けや組み分けを行うランダム生成オススメWebアプリ】』と『【簡易画像キャプチャ機能付き】テキストを比較して差分を表示するdiffツール...
JavaScript

【簡易画像キャプチャ機能付き】テキストを比較して差分を表示するdiffツール【JavaScriptでWebツール】

#text-container { display: flex; justify-content: space-between; } #text-container span...
2023.11.13
業務効率化

【色変更・プレビュー機能付き】SVGタグをBase64変換してCSSのbackground-imageプロパティ用に変換するツール【Photoshop,Illustrator】

SVGタグを入力: 変換 CSS background-image: SVGプレビュー: 色を選択: ※fill値が無いなど色変更できない場合もあります※色を選択するとbackground-imag...
2023.11.10
業務効率化

【WEB完結&PNG画像出力&エクセル出力対応】チーム分けWebツールを作成しました【グループ分けや組み分けをランダム生成!オススメWebアプリをリリース】

もちろん無料のチーム分けツールです!Webで完結します。使いやすさを追求した便利機能付き!人数カウンターやグループハイライトなど
2024.01.24
JavaScript

Intersection Observer APIの使い方【基本的な事を分かりやすく・JavaScript】

以前、IEが消滅してフロントエンドエンジニア的にメリットを強く感じる旨の記事を掲載しました。『IE(InternetExplorer)のサポート終了から生まれるメリット5選!~フロントエンドエンジニアの観点からJavaScriptを考える...
2023.10.20
業務効率化

Web制作でFlutterやReactのようなホットリロード(もどき?)を実現してコーディング効率を爆上がりさせる方法

Webのコーディングはファイルを編集して、ファイルをアップロードして、ブラウザを更新して初めて修正箇所が分かるのですが、これが非常にめんどくさい。 ファイルを編集&保存(F5押下不要)、でブラウザの表示が変わったら劇的に作業...
JavaScript

CDN Vue.js 3系でVCalendarを動作させられないので諦めた話

const { createApp } = Vue createApp({ data() { ...
JavaScript

【初心者向け】JavaScriptでモーダルウィンドウの作成方法と注意事項、サンプルコード

JavaScriptで書ける基本中の基本のギミックにモーダルウィンドウという効果があります。画像をクリックすると全画面で黒背景に大きな画像が表示され、視認性をよくするためのあれです。 HTMLコーダーにはモーダル、と聞くとアレルギー...
2023.11.01
JavaScript

初心者も押さえておくべきWebセキュリティ vol.2 『クロスサイトリクエストフォージェリ(CSRF)』からの保護対策

クロスサイトリクエストフォージェリ(以下、CSRF)は、Webセキュリティの重要な脅威の一つです。攻撃者は、被害者のアカウントを悪用し、不正なリクエストを送信することで、ユーザーの意図しないアクションを実行させることができます。この記事で...
JavaScript

初心者も押さえておくべきWebセキュリティ vol.1 JavaScript『クロスサイトスクリプティング(XSS)』 効果的な対策方法と最適な方法

Webアプリケーションのセキュリティは、ユーザーのデータ保護と信頼性の確保にとって不可欠ですね。特に、クロスサイトスクリプティング(以下、XSS)攻撃は、JavaScriptを使用して悪意のあるコードを注入し、ユーザーのブラウザ上で実行す...
2023.05.20
業務効率化

【インストール不要】サブディスプレイ・モニタにスクリーンセーバーエフェクトを動作させるブラウザアプリ【JavaScript ブラウザアプリ】

先日、使っているノートPCが小さいなぁと感じ、モバイルディスプレイをAmazonのタイムセールで買いました(なんとドイツ製っぽいんですが12,800円也)。 そろそろ使い慣れてきたのですが、ふとサブモニタにスクリーンセーバー欲しいな...
JavaScript

【インストール不要!】猫が喜んで遊ぶ(かもしれない)無料ブラウザアプリ「ぬあぴっぴ」(対応:PC, iPad, Androidタブレット)

我が家には猫が2匹かわいい子がいるのですが、PCに上がってきて邪魔ばかりしてきます笑。キーボードは踏むし、画面は見えないわで作業になりません。 そこで、発想を変えてもう遊んでもらっちゃえってことでJavaScriptで猫が好きそうな...
JavaScript

【入門】Vue.jsとは?初心者でも理解できるように現役エンジニアが徹底解説!【JavaScriptフレームワーク】

Reactに多少押されてはいるものの、まだ需要が高いVue.js。今回はVue.jsとはどんなフレームワークで実際どのようにコーディングしていくのかが分かるように概要から具体的な実践内容について解説していきます。 対象となるのはある...
2023.05.17
JavaScript

【JavaScript】スマホの利き手でフローティングボックス(コンバージョンボタンなど)を左右利き手の側へ動的に移動する方法

コンバージョンしたい @media screen and (min-width: 801px){ #floating-box { display: none; } } @media screen and (max-width: 80...
JavaScript

ChatGPTと対話してJavaScriptで映画マトリックス風のエフェクトText Rainをブラッシュアップした話【レスポンシブ対応】

もうね、エンジニアの存在意義が問われる時代になってしまったのを痛感してます。なかなか再現が難しかった映画マトリックスのあのエフェクト(通称、Matrix text rain)をどうやって表現しているのか気になってChatGPTに効いてみた...
タイトルとURLをコピーしました