リッチテキストエディター（RTE）のJSライブラリ色々試してみた

2024/08/17 49 users rTe リッチテキストエディタ WYSIWYG エディタ 段落

リッチテキストエディタ(RTE)って？ リッチテキストエディタ（以下RTE）とは、文字を入力できるだけでなく、文字に装飾を加えたり、段落を設定できたりと複雑な機能を持つエディタのことです。 弊社プロダクトであるkintone内にも以下のようなエディタが存在します。 また、似たものを指すWYSIWYG(読み方:ウィジウィグ)... 続きを読む

JSライブラリ「Polyfill.io」がマルウェアに改変、10万サイト以上に影響

2024/06/28 25 users 改変 Polyfill.io マルウェア 影響 オープンソース

Sansecは6月25日(現地時間)、「Polyfill supply chain attack hits 100K+ sites」において、オープンソースのJavaScriptライブラリ「Polyfill.io」が改変され、10万以上のWebサイトに展開されたと報じた。 Polyfill supply chain attack hits 100K+ sites Polyfill.ioの買収 Polyfill.ioはAndrew Betts氏が開発した人気... 続きを読む

滑らかなスクロール体験を！ JSライブラリでお手軽に導入する慣性スクロール（前編） - ICS MEDIA

2023/08/04 15 users ICS MEDIA 前編 挙動 余韻 スクロール

ウェブサイトをスクロールした時に、他のサイトよりも滑らかに余韻が残るような動きを目にしたことはないでしょうか？　このスクロールの挙動は慣性スクロールと呼ばれ、ウェブサイトを演出する手法のひとつです。 スクロール操作を止めた後に少し余韻が残りながらスクロールが継続することで、コンテンツをスムーズに閲... 続きを読む

GSAP入門（後編） - タイムライン制御やスクロール演出などの魅力的なJSライブラリ - ICS MEDIA

2022/08/25 8 users ICS MEDIA 後編 タイムライン制御

JavaScriptライブラリの「GSAPジーサップ」（ジーサップ）はウェブサイトのモーションの制作に役立ちます。前回の記事では、GSAPの基本的な使い方を解説しました。後半となる本記事では、中上級者向けに以下の内容を説明します。 本記事で学べること タイムライン機能 スクロールトリガープラグイン モーションパスプラ... 続きを読む

GSAP入門 - アニメーション制作のための高機能なJSライブラリ（前編） - ICS MEDIA

2022/08/22 18 users ICS MEDIA アニメーション制作 前編

JavaScriptライブラリの「GSAPジーサップ」はウェブサイトのモーション制作に役立ちます。GSAPは高機能であり、実行性能が良好で、互換性も高い利点があります。 始点と終点の間を補間することでモーションを実現することは「トゥイーン」と呼ばれます（Betweenが語源のFlash用語）。トゥイーンの機能を提供するJSライブ... 続きを読む

Flash作品を残すために取り組んだこと - プラグイン無しでFlashを再生できるJSライブラリを採用して - ICS MEDIA

2021/02/15 12 users Flash ICS MEDIA Flash作品 筆者 手段

ブラウザプラグインのFlash Playerは2020年末でサポートが終了しました。そのことにより、Flashコンテンツをブラウザで再生する手段がなくなっています。 筆者はBeautiflビューティフルというウェブサイトを個人的に運用しています。Beautiflは、ユーザーが投稿したFlash作品を紹介するギャラリーサイトです。Flash Play... 続きを読む

モダンなJSとCSSで作るライブラリ不要の全画面スクロール演出（2019年版） - ICS MEDIA

2019/12/11 220 users ライブラリ ICS MEDIA Jav GPLライセンス 一方

スクロールで全画面がスライドのように切り替わるウェブサイトの表現があります。手軽にこの表現を実装するJSライブラリ、fullPage.jsを使ったことのある方もいるのではないでしょうか？　かつては無料で使えたこのライブラリですが、現在はGPLライセンスのプロジェクト以外では使用料がかかります。 その一方、CSSとJav... 続きを読む

定期的にyarn updateするには - おもしろwebサービス開発日記

2018/03/18 36 users Gemfile YARN おもしろWEBサービス開発日記

2018 - 03 - 18 定期的にyarn updateするには ライブラリは定期的かつこまめにアップデートすることで辛さを減らしていく、というのは最近の開発現場では定説ではないかと思います。Railsプロジェクトの場合、Gemfileの定期更新を実施している現場も多いのではないでしょうか *1 。 最近のRailsアプリケーションはjsライブラリの管理にyarnを使っているところが多いかと思... 続きを読む

スクロール時にちょっとしたアニメーションを加えたいときに使えるJSライブラリ「ScrollReveal」 | Rriver

2018/03/14 28 users Rriver ScrollReveal アニメーション 邪魔

シンプルなスクロールアニメーションを実装したいときに使えそうなライブラリを見つけたのでご紹介します。「 ScrollReveal 」というやつです。 無意味にたくさん動くアニメーションはUIやユーザの情報消費の邪魔をするので好きではないですが、単調なページをより魅力的に見せるための「気の利いた」アニメーションならいいですよね。 ScrollRevealのいいところ 3.3KB（minified /... 続きを読む

Vue.js で初めて SPA を開発する際に考えたこと - Qiita

2017/12/03 30 users jQuery Qiita React angular 足掛かり

はじめに MVVM フレームワーク初心者の筆者がVue.jsを使ってSPAを開発する際に考えたことを掲載していきます。本記事を通して、これからSPAを開発する人にとっての 足掛かり となれば幸いです。 対象読者 HTML, CSS, JavaScript の経験あり、また jQuery などのJSライブラリの使用経験あり React, Angular といった今時のJSフレームワークによるSPA開... 続きを読む

スクロールイベントを実装できるモダンで軽量なJSライブラリ「scrollama.js」 | bl6.jp

2017/11/22 13 users スクロールイベント トリガー 赤い点線 bl6.jp 要素

scrollama.jsは、スクロールイベントを実装することができるモダンで軽量なJavaScriptライブラリです。IntersectionObserverを使用しているとのこと。スクロールされた位置によって要素のカラーを変更したりなんてことができます。 以下、scrollama.jsの実際のデモページになります。 デモ デモページでは中央に赤い点線が引かれていて、ここがトリガーとなっています。... 続きを読む

初心者でも音楽アプリが作れる！Web Audio APIを簡略化したJSライブラリ「Tone.js」でピアノ鍵盤を作ってみよう！ - paiza開発日誌

2017/03/01 90 users ピアノ鍵盤 paiza開発日誌 0310lan 実装 簡略化

2017 - 03 - 01 初心者でも音楽アプリが作れる！Web Audio APIを簡略化したJSライブラリ「Tone.js」でピアノ鍵盤を作ってみよう！ プログラミング初心者 プログラミング学習 Webサービス紹介 開発ネタ どうも、まさとらん（ @0310lan ）です。 今回は、Web Audio API の実装で面倒な処理をすべて簡略化し、 誰でも音楽プログラミングを楽しむことが可能な... 続きを読む

最速のアニメーションライブラリはこれだ!? JSライブラリの性能をDOMとWebGLで徹底検証 - ICS MEDIA

2017/02/21 61 users CPU アニメーション アニメーション実装 パフォーマンス

HTML5のアニメーション実装に役立つ様々なJavaScriptライブラリがあります。前回の記事「 ウェブのアニメーション制作に役立つ！ 流行りのJSライブラリのまとめ 」ではJSライブラリ7種類の特徴を紹介しましたが、本記事ではそれらのパフォーマンスを比較します。 JSライブラリのパフォーマンスが良いほど、たくさんのアニメーションがあっても滑らかに動きます 。また、パフォーマンスがよければCPU... 続きを読む

ウェブのアニメーション制作に役立つ！ 流行りのJSライブラリのまとめ - ICS MEDIA

2017/02/17 317 users アニメーション制作 ウェブ

ウェブサイトのインタラクションやUIの振る舞いなど、 HTML5でモーションを実装する機会は多々あります 。HTML要素の簡易的なアニメーションであればCSS Transitionを使ったことのある方も多いでしょう。しかし、WebGLやCanvas、SVGなどJavaScriptが実装の中心となる制作作業では、CSS Transitionでは対応しきれず、アニメーションライブラリ（トゥイーンライブ... 続きを読む

JavaScriptでグラフ描画入門！全８個のライブラリをコード付きで一挙に解説！ - paiza開発日誌

2016/06/07 785 users ライブラリ paiza開発日誌 0310lan グラフ 解説

2016 - 06 - 07 JavaScriptでグラフ描画入門！全８個のライブラリをコード付きで一挙に解説！ 開発ネタ Webサービス紹介 どうも、まさとらん（ @0310lan ）です。 今回は、 JavaScript を使って「 グラフやチャートを描きたい！ 」とか、「 さまざまなデータを可視化させたい！ 」という人にオススメの JSライブラリ をご紹介しようと思います。 また、すぐに使い... 続きを読む

Webカムに映った顔の位置を認識するJSライブラリ headtrackr.js がすごい « console.log :) | Don't forget trace :)

2015/09/08 63 users console.log Webカム GitHub 位置 デモ

Javascriptで実装された顔認識ライブラリ「headtrackr.js」がけっこうスゴイです。 Githubでソースが公開されています。 https://github.com/auduno/headtrackr/ 以下のデモでどういう機能か分かると思いますが、 Webカムに映った顔を認識し、その位置座標を取得できるものです。 実装されている処理は、ホワイトバランスを調整する処理や顔認識処理、... 続きを読む

シンプルで軽量なプログレスバー実装の為のJSライブラリ・「nanobar」 - かちびと.net

2015/08/25 27 users net

Web制作の話題を中心に、便利なWebサービスやリソースなどを紹介 Kudos for About This Web制作に役立つTips、チュートリアル、、マーケティングに役立つ情報などのリソースをほぼ毎日配信しています。宜しければメモ代わりにご利用下さい。詳しい情報はAbout me またはhumans.txtをご覧下さい。 Kachibito.net is a community-based ... 続きを読む

ある要素が表示されるまで待つJSライブラリを書いた(MutationObserver) | Web Scratch

2015/04/06 51 users MutationObserver then セレクタ 関数

wait-for-element.js wait-for-element.js という関数一個だけのライブラリを書きました。 以下のような感じで、セレクタにマッチする要素が出現するまで待つというシンプルな関数です。 var waitForElement = require("wait-for-element"); waitForElement("#js-element").then(functio... 続きを読む

SVGをインラインに展開し、CSSでスタイル出来るようにするJSライブラリ・「deSVG」 - かちびと.net

2015/01/09 36 users SVG CSS img SVGファイル class

deSVG deSVGはSVGをインライン展開してCSSでスタイリング出来るようにする為のJavaScriptライブラリです。<img>タグのsrc属性に挿入したsvgファイルを<svg>タグで表示出来るように自動で置換し、CSSでスタイリング可能にしてくれます。現在はsvgというclassが指定されていますが、任意のユニークなclass名に変えたい時はコードの最下部にあるdeSVG(“.svg”... 続きを読む

JavaScript - 俺のJSライブラリの世界観(2014末版) - Qiita

2014/12/11 446 users Qiita JavaScript 世界観

http://qiita.com/advent-calendar/2014/frontrend 概論 ここ近年のモダンJSは特に理由がなければcommon.jsのrequireスタイルで記述され、webpack/browserifyでビルド/読み込むことを前提にしてよい。今やビュー層を除いてブラウザとnodeのライブラリの境界は非常に曖昧である。 識者諸君においては常にどちらの環境でも読み込めるよ... 続きを読む

JSライブラリ/フレームワークの良い、悪いメモ - 素人がプログラミングを勉強していたブログ

2014/11/05 441 users フレームワーク Fac jsx プログラミング トランスパイラ

2014-11-05 JSライブラリ/フレームワークの良い、悪いメモ ※ただのメモで、未来志向なのであまり真に受けてはいけない。 良いっぽい React.js 早い/コンポネント志向/APIの設計がいい。JSXと他のトランスパイラの組み合わせという問題はある Promise ネイティブに入った、誰もが使ってる TypeScript ES6時代でも存在意義のある言語。TypeScript互換のFac... 続きを読む

JavaScriptコードを貼り付けるだけで、どんなサイトでもコラボレーションを可能にする『TogetherJS』 | IDEA*IDEA

2013/09/20 42 users カーソル ぺろ Mozilla Labs チャット IDEA

あれ、これ、結構いいのでは。Mozilla LabsによるJSライブラリです。使い方は簡単で、JavaScriptをぺろっと貼り付けるだけですね。 ↑ サイトにこういうボタンを埋め込んでこれをクリックすると・・・。 ↑ ユーザー間でチャットできたり、カーソルの位置を表示したりできます。 他にも音声チャットもできるようですよ。ちょっとしたコミュニティサイトやらで使えそうな・・・という気もしますね。詳... 続きを読む

地図アプリで使えそうなアイコンフォント「Map Icons」:phpspot開発日誌

2013/08/21 12 users phpspot開発日誌 アイコンフォント マーカー アイコン

地図アプリで使えそうなアイコンフォント「Map Icons」 2013年08月21日- Map Icons 地図アプリで使えそうなアイコンフォント「Map Icons」 地図上に使えそうなアイコンのアイコンフォント。種類が豊富で使いやすそうです。 アイコンフォントだけではなく、便利に使うためのJSライブラリも入っています。 JSライブラリを使って以下のようなマーカーの画像と組合せてより便利に使えそ... 続きを読む

サイトの使い方をその場でステップに分けてオーバーレイできるJSライブラリ「Intro.js」:phpspot開発日誌

2013/04/01 39 users Intro.js phpspot開発日誌 ライ オーバー

Intro.js | Better introductions for websites and features with a step-by-step guide for your projects. サイトの使い方をその場でステップに分けてオーバーレイできるJSライブラリ「Intro.js」 はじめてのサイトの場合、何をやっていいか、使い方もよくわからない場合も少なくなさそうですが、このライ... 続きを読む

Excel2013やGoogleSpreadSheetでの関数が使えるようになるJSライブラリ「Formula.js」:phpspot開発日誌

2013/03/26 44 users ライブラリ 関数 Excel phpspot開発日誌

Excel2013やGoogleSpreadSheetでの関数が使えるようになるJSライブラリ「Formula.js」 2013年03月26日- Formula.js Excel2013やGoogleSpreadSheetでの関数が使えるようになるJSライブラリ「Formula.js」 WEB開発者でExcelも使いこなしているという方には便利そうなライブラリ。使い慣れた関数をJSで使えるので便利... 続きを読む