ドラッグ&ドロップでファイルとフォルダをアップロードする - Qiita
目標 この記事では指定したフィールド上にファイルやフォルダをドラッグ&ドロップ(以後D&Dと呼びます)するとinputでファイルやフォルダを複数アップロードした時と同じ結果を得られるようにすることを目標とします。 Fileオブジェクト ファイルには5つのプロパティがあります(Deprecatedされたものは除いてます)。 lastModified: ファイルの最終更新時刻 name: ファイルの名前 webkitRelativePath: Fileの相対パス(標準化されてません) size: ファイルのサイズをバイト単位 type: ファイルのMIME タイプ inputの動作確認 お手本とするinputの動作を確認します。ファイルだけを扱う場合とフォルダだけを扱う場合で挙動が異なるので分けて紹介します。 ファイル 複数ファイルをinputする場合は属性にmultipleを与えることででき
WebアプリやCMS等に組み込む為のオープンソースのWYSIWYG HTMLエディター・「miniB HTML editor」 - かちびと.net
miniB HTML editorはWebアプリやCMS等に組み込む為のオープンソースのWYSIWYG HTMLエディターです。Talwind.cssでスタイリング、VanillaなJavaScriptとファイル操作にPHPが用いられています。 よくあるWYSIWYGエディターの機能が一通りそろえられており、undo/redo、各見出し、太文字やイタリック化、リスト、カラー変更、リンク指定、画像アップロード、テーブル挿入、コードブロック挿入などのほか、スニペットの登録、HTMLコードとの切り替え、保存、HTMLのダウンロード、プレビュー、ダークモード、ショートカットなどの機能も備えられています。 UIはシンプルでボタンも見やすいですが、モダンなスタイリングとは言えないものの、Tailwindベースなので使い慣れていれば思い通りにカスタマイズできるのではないかと思います。操作性も軽量で使いや
わずか数行のコードで1つの要素を別の要素にスムーズに遷移させる、フレームワークに依存しないJavaScript -Blendy
数行のコードと外部スクリプトを記述するだけで、1つの要素を別の要素にスムーズに遷移させるJavaScriptを紹介します。 フレームワークやライブラリなど他のスクリプトに依存することなく、単体で動作し、もちろん他のフレームワークと一緒でも動作します。 Blendy Blendy -GitHub Blendyとは Blendyのデモ Blendyの使い方 Blendyとは Blendyはわずか数行のコードを記述するだけで、1つの要素を別の要素にスムーズに遷移させるJavaScriptです。依存関係はなく、単体で動作し、React, Vue.js, Angularをはじめ、ほぼすべてのフレームワークと一緒でも動作します。 MITライセンスで、商用プロジェクトでも無料で利用できます。
Fetch APIでファイルを読み込む ‐ JavaScript ‐ GRAYCODE
Fetch APIでファイルを読み込む 最終更新日：2023-12-24 公開日：2021-02-10 Fetch APIを使って指定したURLからテキストファイルや画像ファイルなどを読み込む方法について解説します。 この記事のポイント 読み込むデータのファイル形式によって、Responseオブジェクトからファイルを取得するメソッドを切り替える 画像、音声、動画のようなリソースファイルを読み込むときはURL.createObjectURLメソッドを使ってページに挿入すると表示できる Fetch APIのAjaxでファイルを読み込む Fetch APIはサーバーにリクエスト（要求）を送信することで各種ファイルを読み込むことができます。 ファイルはどの形式でも読み込むことができますが、取得するファイル形式ごとにレスポンスデータの処理が必要になります。 以降では、以下の形式の各種ファイルをFet
【2024年最新版】Swiperの使い方やカスタマイズ方法をわかりやすく解説します - 株式会社PENGIN
粟飯原 匠 |CEO ベンチャーやスタートアップにて新規事業のマーケティング・セールスを担当し年商5億円までのグロースを経験。PENGIN Inc.を創業し、現在は上場企業やレガシー産業のマーケティング戦略の立案〜実行支援までを担当。 プログラミングの勉強を始めたばかりの方でも、本記事で解説するSwiperを使えばカンタンにスライダーを作成できます。 本記事では、導入方法から各オプション・実装時のトラブルシューティングまで網羅的に解説しています。 記事を読み終えると、Swiperの使い方を一通り理解でき、色々なスライダーを作れるようになりますよ！ また、jQueryでコードを書いてスライダーを実装する方法は以下の記事で紹介しています。これからjQueryを勉強する方は参考にしてみてください！ 【プラグインなし】カルーセルスライダーの作り方を解説（jQuery） 【jQuery】クロスフェー
レンジスライダーをカスタマイズするなら「noUiSlider」がおすすめ
デフォルトの表示確認 「noUiSlider」のレンジスライダーではなく、まずはデフォルトの見た目・使用感を先に確かめてみましょう。 デフォルトのものはシンプルな見た目ですが、レンジスライダーではこちらをもっと見栄えよくすることができます。 デモ どのような見た目・使用感かは下記のデモをご確認ください。 まず簡単に実装するならばこのような見た目です。これだけでは値が何なのかもわからないため、ここからオプションを利用するなどのカスタマイズが必要です。 どんな見た目・機能があるか確認したい方は公式サイトのデモをご確認ください。 公式サイトではjsとcssの記述も用意されているので今すぐにでも同じ見た目で再現することができます。 ダウンロード方法 「noUiSlider」の公式サイトからご自身に合った方法でダウンロードしてください。 https://refreshless.com/nouisli
input type="file"でファイルをアップロードする方法｜HTMLリファレンス
<input type="file" name="example" accept="image/jpeg, image/png">
Splide - アクセシビリティに配慮した軽量・高機能スライダー
アクセシビリティに配慮した軽量・高機能スライダー。 ほかのライブラリに依存せず、Lighthouseのエラーもありません。
【最新版】jsスライダーライブラリ「Splide」の使い方を徹底解説！ - 株式会社PENGIN
粟飯原 匠 |CEO ベンチャーやスタートアップにて新規事業のマーケティング・セールスを担当し年商5億円までのグロースを経験。PENGIN Inc.を創業し、現在は上場企業やレガシー産業のマーケティング戦略の立案〜実行支援までを担当。
CSSの進化がすごすぎる！ 2つの画像を比較するスライダーは数行のコードで実装できるようになりました
2つの画像を重ねて表示し、画像を比較できるスライダーを実装するには、今まではJavaScriptのライブラリなどを使用していたかもしれません。 ほんの少しのJavaScriptと、あとはシンプルなHTMLとCSSで2つの画像を比較するスライダーを実装するテクニックを紹介します。 まずは、実際の動作をデモページでご覧ください。縦線のレンジバーをマウスでドラッグすると、2つの画像を比較できます。 See the Pen Easy comparison slider by coliss (@coliss) on CodePen. HTMLはシンプルです。2つの画像をsectionで内包し、縦線のレンジバーをinput type="range"で実装します。 <div class="compare"> <section class="before"> <img src="Runner.svg" a
JavaScriptの配列メソッド: オブジェクトの配列を扱うときに役立つ便利な配列メソッドを分かりやすく解説
JavaScriptでオブジェクトの配列を操作するためにもっとも有用な配列メソッドとコードを紹介します。 JavaScript Array Methods: A Comprehensive Guide by Luca Spezzano 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 はじめに filter()メソッド: オブジェクトの配列からキーstatusがactiveと等しいオブジェクトの配列を取得する find()メソッド: 配列内から特定のidを持つオブジェクトを検索する findIndex()メソッド: 配列内の特定のキーを持つオブジェクトのインデックスを検索する reduce()メソッド: オブジェクトの配列内にある特定のキーの値を合計する map()メソッド: オブジェクトの配列内に含まれる特定のキーに対応する一意
Unovis
import React, { useCallback } from 'react' import { VisXYContainer, VisAxis, VisArea, VisXYLabels } from '@unovis/react' import { data, formats, DataRecord, getLabels } from './data' export default function StackedArea (): JSX.Element { const labels = getLabels(data) return ( <> <VisXYContainer data={data} height={'50vh'}> <VisArea x={useCallback((d: DataRecord) => d.year, [])} y={formats.map(g =>
JavaScript／TypeScriptの非同期処理に向けたライブラリ「Axios 1.0.0」が登場
Axiosは、JavaScript／TypeScriptで非同期API呼び出しを容易にするライブラリ。各種WebブラウザやNode.jsと組み合わせて使用する。 JavaScript／TypeScript、Node.jsでは、処理の完了を待つことなく、完了したときにコールバック関数を呼び出すようにする「非同期処理」を多用する。しかし、非同期処理は回数が多くなるとコードの入れ子が深くなり、混乱しやすい。また、処理完了の順序を事前に特定できないため、順不同でやって来る処理完了の知らせを適切に処理しなければならない。 これらの問題を解決するために、「Promise」という非同期処理の状態を監視するオブジェクトが導入されている。これを利用することで、非同期処理の記述はある程度容易になるが、まだ面倒は残る。 そこで、Promiseオブジェクトを強く意識することなく非同期処理を記述することを可能にした
Home | Leafjs
Instantly build future-ready websites with ease. Based on Web-Components, Leafjs provides a simple API for building websites, component libraries and so much more. Get Started → SimpleLeafjs was built with ease of use in mind. By using awesome solutions such as Vue-like reactivity and JSX, Leaf combines the best parts of the best frameworks. Thanks to web-components, Leaf made components a lot sim
FileReader.readAsDataURL() - Web API | MDN
readAsDataURL メソッドは、指定されたBlob または File の内容を読み込むために使用されます。読み込み操作が終了すると、readyState が DONE となり、loadend が発生します。このとき、result 属性には、ファイルのデータを表す、base64 エンコーディングされた data: URL の文字列が格納されます。 メモ: blob の result は、先に Base64 でエンコードされたデータの前にある Data-URL の宣言を削除しておかないと、直接 Base64 としてデコードすることができません。 Base64 でエンコードされた文字列のみを受け取る場合は、先に結果から data:*/*;base64, を削除しておく必要があります。
Vite + Tailwind CSSでペライチHTMLをマークアップする
はじめに つい最近、ReactもVueも使わずに静的なペライチHTMLのマークアップを行う必要に迫られました。その際ViteのVanilla[1]テンプレートとTailwindを使った環境でマークアップをしたところ非常に快適だったので、環境構築の手順を記事にしておこうと思いました。 Viteを使う理由 ViteというとVueやReactの開発ツールと思われがちですが、UIライブラリに依存しないVanillaテンプレートが用意されています。 ファイルの更新を検知してブラウザへの反映といった基本的な機能に加えて、PostCSSのサポートもあるのでTailwindでの開発と相性が良いです。 セットアップ Viteでプロジェクトを立ち上げる普段の手順に加えて、Tailwindのセットアップを行います。 npm create vite@latest # project名を入力後、フレームワークでは「
CSSアニメーションの実装もこれで簡単！ さまざまなプロパティの値をトゥイーンさせるスクリプト -ScrollBtween
Webページ上のあらゆるDOM要素に対して、CSSアニメーションを実装できるスクリプトを紹介します。 実装は簡単です、CSSのプロパティの値を「#fff to #000」「0 to 100」のように記述して、#fffから#000にトゥイーンさせ、0から100にトゥイーンさせます。 スクロールで背景色を変化させたり、ぼやけた画像をくっきりと表示したり、スクロール位置に基づくプログレスバーやパララックスも簡単に実装できます。 ScrollBtween ScrollBtween -GitHub ScrollBtweenの特徴 ScrollBtweenのデモ ScrollBtweenの使い方 ScrollBtweenの特徴 ScrollBtweenは、Webページのドキュメント（任意のDOM要素）をスクロール位置に関連してCSSのさまざまなプロパティの値を変化（トゥイーン）させるスクリプトです。ネ
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
https://www.visactor.io/vchart
Astro
haunebu-web