リッチテキストエディター（RTE）のJSライブラリ色々試してみた
リッチテキストエディタ(RTE)って？ リッチテキストエディタ（以下RTE）とは、文字を入力できるだけでなく、文字に装飾を加えたり、段落を設定できたりと複雑な機能を持つエディタのことです。 弊社プロダクトであるkintone内にも以下のようなエディタが存在します。 また、似たものを指すWYSIWYG(読み方:ウィジウィグ)という用語もありますが、これはWhat You See Is What You Get（見たままが得られる）の略であり、編集時と出力時の見た目が同じエディタのことを指します。 Zennやesaのように、Markdown記法で編集したものが変換されて表示されるようなエディタは含みません。 このようにWYSIWYGはRTEより狭義の意味になっています。 WYSIWYGエディタ(Google Docs) WYSIWYGではないエディタ（esa） 独自データモデル VS DOMツ
GitHub - pixiv/three-vrm: Use VRM on Three.js
<script type="importmap"> { "imports": { "three": "https://cdn.jsdelivr.net/npm/three@0.177.0/build/three.module.js", "three/addons/": "https://cdn.jsdelivr.net/npm/three@0.177.0/examples/jsm/", "@pixiv/three-vrm": "https://cdn.jsdelivr.net/npm/@pixiv/three-vrm@3/lib/three-vrm.module.min.js" } } </script> <script type="module"> import * as THREE from 'three'; import { GLTFLoader } from 'three/addo
【全ブラウザ対応】perfect-scrollbar.jsでスクロールバーの色をCSSで自由に変更する。 | web(K)campus|WEBデザイナーのための技術系メモサイト
【全ブラウザ対応】perfect-scrollbar.jsでスクロールバーの色をCSSで自由に変更する。 WEBデザイナーのつくるデザインって基本的にブラウザからキャプチャ取ってきたスクロールバーが使われるんですけど、グラフィックデザイナーよりの人がつくるWEBデザインってスクロールバーもご丁寧にサイトカラーに合わせた色合いになってる事があるんですよね。 けっこう昔に、スクロールバーをCSSで装飾するエントリーを書いた事がありましたけど、あれはChromeのみだったんですね。 今回はJavascriptを使って、メジャーどころなブラウザはほとんど同一の装飾を施せる「perfect-scrollbar.js」ってJavascriptのプラグインを使ったので備忘録。 perfect-scrollbar.jsの使い方 まずは、必要なファイルをダウンロード。 GitHubに用意されています。 必要
webmanab.html
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script> css .container { position: relative; overflow: auto; } $('.container').perfectScrollbar(); 見た目のスタイルの変更 見た目はvariable.scssを編集することで簡単にカスタマイズできます。 variables.scss $ps-border-radius: 6px !default; // スクロールバーの丸み $ps-rail-default-opacity: 0 !default; // コンテナにマウスが入ってない時の透過度 $ps-rail-container-hover-opacity: 0.6 !defaul
［jQuery]スクロールバーのデザインと実装方法と注意点 - 超軽量スクリプト Perfect Scrollbar - Fly higher! Sky is the limit!
一昔前だとスクロールバーのデザインモックを見ただけで吐きそうになっていましたが、 今では便利なプラグインとCSS3といった技術を用いて比較的容易に実装できるようになりました。 本記事では、超軽量スクリプト Perfect Scrollbarを用いたデザイン性に富んだスクロールバーの実装方法を紹介したいと思います。 Perfect Scrollbarについて Perfect Scrollbarについては、3年くらい前にcoliss様のサイトで紹介されていますので そちらをご参照ください。 http://coliss.com/articles/build-websites/operation/javascript/jquery-plugin-perfect-scrollbar.html ダウンロードはこちら perfect-scrollbar 実装方法 準備するもの jQuery Perfec
![［jQuery]スクロールバーのデザインと実装方法と注意点 - 超軽量スクリプト Perfect Scrollbar - Fly higher! Sky is the limit!](https://cdn-ak-scissors.b.st-hatena.com/image/square/661a999a7c04c69abe92cb81ce3d453dd31358c8/height=288;version=1;width=512/https%3A%2F%2Fcdn.image.st-hatena.com%2Fimage%2Fscale%2F49a959324a07eee110212067c66b5351131bd06e%2Fbackend%3Dimagemagick%3Bversion%3D1%3Bwidth%3D1300%2Fhttp%253A%252F%252Fcdn-ak.f.st-hatena.com%252Fimages%252Ffotolife%252Fp%252Fparadox_tm%252F20160517%252F20160517154350.png)
JavaScriptのプラグイン「perfect-scrollbar.js」を使ってみる
スクロールバーをカスタマイズできるプラグイン「perfect-scrollbar.js」を使ってみます。 ※今回はバージョン1.2.0を使っていますが、バージョン1.0未満は使い方が違うようです。 詳しくは公式のドキュメントでご確認ください。 使い方 GitHubからダウンロードします。 ダウンロード後、必要なファイルを読み込みます。 cssはcssフォルダ、jsはdistフォルダに格納されているので、それぞれコピーして使ってください。 <link rel="stylesheet" href="perfect-scrollbar.css" /> <script src="perfect-scrollbar.js"></script> #sampleのスクロールバーを変更するようにしてみます。 HTML <div id="sample"> <p>君も事実いったいこの前後っ放しというのの ..
Moment Timezone | Home
Install bower install moment-timezone --save # bower npm install moment-timezone --save # npm yarn add moment-timezone # Yarn Format Dates in Any Timezone var jun = moment("2014-06-01T12:00:00Z"); var dec = moment("2014-12-01T12:00:00Z"); jun.tz('America/Los_Angeles').format('ha z'); // 5am PDT dec.tz('America/Los_Angeles').format('ha z'); // 4am PST jun.tz('America/New_York').format('ha z'); // 8
Moment.js | Parse, validate, manipulate, and display dates in javascript.
Moment.js 2.30.1 Parse, validate, manipulate, and display dates and times in JavaScript. Install npm install moment --save # npm yarn add moment # Yarn Install-Package Moment.js # NuGet spm install moment --save # spm meteor add momentjs:moment # meteor bower install moment --save # bower (deprecated) Format Dates moment().format('MMMM Do YYYY, h:mm:ss a'); moment().format('dddd'); moment().format
Chart.jsでグラフを描画してみた - Qiita
1. はじめに Chart.jsを使用すると、簡単に、綺麗なグラフを描画することができます。 公式ホームページ http://www.chartjs.org/ 今回は、特に使用頻度の高そうな、以下5種類グラフの描画方法を紹介します。 折れ線グラフ 棒グラフ 円グラフ レーダーチャート 散布図 2. 記述形式 基本的な記述形式を解説するために、サンプル(chart.html)を示します。 <!DOCTYPE html> <html lang="ja"> <head> <meta charset="utf-8"> <title>グラフ</title> </head> <body> <h1>グラフ</h1> <canvas id="myChart"></canvas> <script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.7
ライブラリを検討 jsのtreeライブラリ - Qiita
Deleted articles cannot be recovered. Draft of this article would be also deleted. Are you sure you want to delete this article? 多分最初のほうに見たのがこのページ。自分で調べていくうちに納得感が深まった。 http://qiita.com/alingogo/items/b49d48f1b024f6022a85 今回の私の要求 まだ決めていないのでReactでも使える選択肢にしておきたい PCでもスマホ（iOS）でもD&Dしたい 実装はできればスマートにして拡張性もある程度確保したい 性能的なこともわからないなりに考慮しておきたい １万円程度なら有料でもいいかも D3.jsとかと整合性があるといいかも 途中経過として いろいろ試行錯誤した 基本はjQuery系が多
jstree
jsTree is jquery plugin, that provides interactive trees. It is absolutely free, open source and distributed under the MIT license. jsTree is easily extendable, themable and configurable, it supports HTML & JSON data sources and AJAX loading. jsTree functions properly in either box-model (content-box or border-box), can be loaded as an AMD module, and has a built in mobile theme for responsive des
遅延読み込み、無限スクロールなど、要素と境界の交差を非同期で検出する1Kbの超軽量スクリプト -Bounds.js
画像の遅延読み込みや無限スクロールを実装する際、ページ上に境界を定義し、その境界に要素が入ったかどうか判定して実行します。要素と境界の交差を非同期に検出し、パフォーマンスを改善する1Kbの軽量スクリプトを紹介します。 要素が境界に1px交差した、全部が入ったなどを正確に検出。他のJavaScriptへの依存はなく、単体で動作します。 Bounds.js -GitHub Bounds.jsの特徴 Bounds.jsのデモ Bounds.jsの使い方 Bounds.jsの特徴 画像の遅延読み込み、無限スクロールなどの実装には、境界を設定することが重要です。通常は、イベントハンドラ、ループ、getBoundingClientRectの呼び出しの組み合わせが必要でしたが、これらはメインスレッドで実行されるため、パフォーマンスが低下します。Bounds.jsは要素と境界の交差を非同期に検出し、パフォ
[JS]面白いスクリプトが登場！スマホのDeviceMotionイベントをサポートし、傾きを感知できる -Shiny
[JS]面白いスクリプトが登場！スマホのDeviceMotionイベントをサポートし、傾きを感知できる -Shiny
![[JS]面白いスクリプトが登場！スマホのDeviceMotionイベントをサポートし、傾きを感知できる -Shiny](https://cdn-ak-scissors.b.st-hatena.com/image/square/95e28eebf0596a7ba67bec80b26b3d4e01b6cc91/height=288;version=1;width=512/https%3A%2F%2Fcoliss.com%2Fwp-content%2Fuploads-201901%2F2019011910.png)
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Loading...
GitHub - Donaldcwl/browser-image-compression: Image compression in web browser
Handlebarsことはじめ - Qiita
GitHub - CodeSeven/toastr: Simple javascript toast notifications
https://www.dropzonejs.com/
ソースコードをタイピングアニメーションと共にプレビューできる「Glorious」:phpspot開発日誌
モダンなカスタムスクロールバーを簡単実装「SimpleBar」:phpspot開発日誌