効率化

JavaScript

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

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

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

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

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

SVGタグを入力: 変換CSS background-image:SVGプレビュー: 色を選択: ※fill値が無いなど色変更できない場合もあります※色を選択するとbackground-imageプロパティのコードも変わります #convb...
業務効率化

チーム分けWebツール~グループ分けや組み分けをランダム生成!

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

【優柔不断専用】2択、3択…… 瞬時に決めるWebツール【選べない時、決められない時にご利用ください】

2択、3択~お好みに応じて数を指定出来る運命選択ツール。さあ、数字を心に思い浮かべて……念じた数字が出るかは運次第!優柔不断専用です。
業務効率化

素敵な男性や女性をサイトにお招き出来るようになりました。本当にありがとうございました ~画像生成AIの使用方法~

今回はとある女性が当サイトへ訪問してくださいました。まだ未成年ぽいのに大人なような……なんか不思議な女性です。今回は画像生成AIのお話。少し前から盛大に流行りだした画像生成AIですが、思い立ってやってみることにしました。先ほど登場した読書家...
JavaScript

画面に要素が入ったかを監視したい~Intersection Observer APIの使い方【JavaScript】

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

Google Chrome 118に追加されたCSSルール「@scope」の基礎知識と使い方

CSSの新機能として実装された「@scope」ルールについてまとめました。デザイナー、コーダー、フロントエンドエンジニアの方は要チェックです。※Google Chrome 118安定版リリース時の記事です@scopeとは?@scopeはCS...
業務効率化

アプリケーション、製品、パッケージ、プロダクトにおけるバージョンの数字の意味と付け方【業務効率化】

皆さんはアプリのバージョンとか気にする方でしょうか?何の気なしに利用している分には「ふーん、ん、なんか変わってバージョンアップしたんだな」程度な感触なのではないかと思います。もちろん、ガチエンジニアで「このアップデートと修正があったから、前...
業務効率化

Chromeデベロッパーツールで特定のCSSファイルやJavaScriptファイルをブロックして読み込ませなくさせる方法

Web開発をしていると不具合の原因を辿るために、CSSファイルを読み込ませないようにしたかったり、JavaScriptのファイルが原因なんじゃないかとファイルの読み込みを遮断したりしたい時がまぁまぁあります。CSSファイルを一新したいときに...
業務効率化

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

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

【Flutter】Dart言語におけるカスケード記法についてのまとめと解説。利用するとこんなメリットがあります

みなさんはDart言語をやっていて「..」といったように、ドットの連続がコード内に登場することはないでしょうか?JavaScriptばかりやっていたので少し目新しかったので、皆さんのお役に立てるかなと思い、この記事をまとめました。「..」(...
業務効率化

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

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

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

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

【2023年 Ver.21.3】DreamweaverでEmmetを使って光速コーディング【設定・プラグイン不要】

VSCodeでEmmetが使えると紹介しました。『【神速効率コーディング】VSCodeのEmmet(デフォルト)~最低限おさえたい12のテクニック【HTML&CSS】』同様にDreamweaverで出来ないかといろいろ探してみたのですが、古...