タグ検索の該当結果が少ないため、タイトル検索結果を表示しています。
openbaseとは https://openbase.io Find and compare open-source packages with user reviews, categorization, and unparalleled insights about packages' popularity, reliability, activity, and more. 手を抜いてdeeplでw ユーザーレビュー、カテゴリ分け、パッケージの人気、信頼性、アクティビティなどについての他の追随を許さない洞察力で、オープンソースパッケージを見つけて比較してください。 現在、多くのプログラミング言語はパッケージマネージャがあって、何らかの方法でパッケージについての情報を取得することができると思います。 パッケージの選び方 自分の場合はjs系が殆どなので、ライブラリを選ぶ方法は以下のような感
いずれもMITライセンスで公開されていますので、個人・商用問わず利用可能です。 Slick.js Slickスリック.jsは簡潔なコードで実装できるのが特徴のモバイルフレンドリーなカルーセルライブラリです。機能は少なめですが、ナビゲーションや表示するスライド数を変更するといった基本的な機能は備わっています。jQueryプラグインのため実装にはjQueryを読み込む必要があります。タッチ・スワイプ操作にも対応しています。ReactやVue向けのモジュール、TypeScriptのサポートは公式で提供されていませんがOSSで存在します。 このJSライブラリの基本的な実装と、アニメーションをフェードに変えた作例を用意しました。 基本の作例 サンプルを別ウインドウで開く コードを確認する <div class="slick carousel"> <div>1</div> <div>2</div> <
JavaScriptライブラリの「GSAPジーサップ」はウェブサイトのモーション制作に役立ちます。GSAPは高機能であり、実行性能が良好で、互換性も高い利点があります。 始点と終点の間を補間することでモーションを実現することは「トゥイーン」と呼ばれます（Betweenが語源のFlash用語）。トゥイーンの機能を提供するJSライブラリは多くの種類が存在しますが、その中でもGSAPは評判が高く、機能の多さでは群を抜いています。当サイトの記事『トゥイーンライブラリの比較検証』でも、類似のライブラリに比べて性能が高いことを確認しています。 旧TweenMax時代から数えてGSAP利用歴15年の筆者が、GSAPのおさえておくべき最低限の使い方から、現場で役立つテクニックを紹介します。 ▼GSAP公式サイト GSAP入門は前後編の2回にわたり解説します。前編では基本的なGSAPの使い方を中心に説明しま
リッチテキストエディタ(RTE)って？ リッチテキストエディタ（以下RTE）とは、文字を入力できるだけでなく、文字に装飾を加えたり、段落を設定できたりと複雑な機能を持つエディタのことです。 弊社プロダクトであるkintone内にも以下のようなエディタが存在します。 また、似たものを指すWYSIWYG(読み方:ウィジウィグ)という用語もありますが、これはWhat You See Is What You Get（見たままが得られる）の略であり、編集時と出力時の見た目が同じエディタのことを指します。 Zennやesaのように、Markdown記法で編集したものが変換されて表示されるようなエディタは含みません。 このようにWYSIWYGはRTEより狭義の意味になっています。 WYSIWYGエディタ(Google Docs) WYSIWYGではないエディタ（esa） 独自データモデル VS DOMツ
ブラウザプラグインのFlash Playerは2020年末でサポートが終了しました。そのことにより、Flashコンテンツをブラウザで再生する手段がなくなっています。 筆者はBeautiflビューティフルというウェブサイトを個人的に運用しています。Beautiflは、ユーザーが投稿したFlash作品を紹介するギャラリーサイトです。Flash Player終了によってウェブサイトの目的であるFlashの再生体験ができなくなるので、窮地に陥りました。Flash Playerの終了は2017年にアドビが決定したことで覆せないので、ウェブサイト側として次の3つの対策を行いました。 FlashをHTMLで再生可能にする Flashをビデオとして残す SWFファイルをダウンロード可能にする 本記事ではウェブでFlashコンテンツをどうやって残していこうとしたのか、そのアプローチを紹介します。 Beaut
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氏が開発した人気のJavaScriptライブラリ。古いWebブラウザをサポートし、JSTOR、Intuit、世界経済フォーラムを含む10万以上のWebサイトに利用されている。 Polyfill.ioは2024年2月、中国を拠点とするコンテンツデリバリーネットワーク(CDN: Content Delivery Network)企業の「Funnull」に買収
Panda CSSとは はじめに、今回のメインテーマとなるPanda CSSについて簡単に紹介します。 CSS-in-JS with build time generated styles, RSC compatible, multi-variant support, and best-in-class developer experience Panda CSSとは、上記公式サイト冒頭にもあるようにパフォーマンス面の課題をクリアしつつ、最高クラスの開発体験も両立したCSS in JSライブラリとなっています。 （最近ではNext.jsのReact Server Componentsが安定版になったこともあり）従来のようにランタイムCSS in JSを利用することが推奨されなくなってきている中、Chakra UIと同じ開発元によって、ゼロインタイムを実現したPanda CSSが新たにリリー
ウェブサイトをスクロールした時に、他のサイトよりも滑らかに余韻が残るような動きを目にしたことはないでしょうか？ このスクロールの挙動は慣性スクロールと呼ばれ、ウェブサイトを演出する手法のひとつです。 スクロール操作を止めた後に少し余韻が残りながらスクロールが継続することで、コンテンツをスムーズに閲覧できたり、演出と組み合わせることで世界観や没入感を表現できます。また、macOSに比べるとWindowsはデフォルトでスクロールしたときにカクカクと動くため、慣性スクロールを実装するとWindowsでもmacOSのように滑らかにスクロールさせることができます。 前編である今回の記事では、慣性スクロールを使ったウェブサイトを紹介し、簡単に実装できるライブラリ「Lenis」で実際に慣性スクロールを実装してみます。 慣性スクロールが使われているサイト 慣性スクロールはどのようなウェブサイトで使われてい
JavaScriptライブラリの「GSAPジーサップ」（ジーサップ）はウェブサイトのモーションの制作に役立ちます。前回の記事では、GSAPの基本的な使い方を解説しました。後半となる本記事では、中上級者向けに以下の内容を説明します。 本記事で学べること タイムライン機能 スクロールトリガープラグイン モーションパスプラグイン quickSettter ユーティリティー関数 タイムライン タイムラインはGSAPで高度な演出をつくるうえで必ず利用する重要な機能です。 複雑なモーションを時系列で作成できるので、多くのトゥイーンを作成したり、管理するのに便利です。 ▼公式サイトのチュートリアル動画。たった5行のコードで出現アニメーションを構築。 使い方として、gsap.timeline()で作成したインスタンスに対して、add()メソッドでタイムラインにgsap.to()のトゥイーンを追加します。
Import mapsはChrome系ブラウザのみがサポートしているため、他のブラウザではES Module Shimsを利用する必要があります。(rails/importmap-railsにはshimが同梱されています) Rails 7では、JavaScriptのbuildやbundleをせずにCDNからライブラリを取得できる仕組みをImport mapsを使って実現して、現在のwebpackerをオプションへと変更する予定となっています。 TypeScriptやReactのようなビルドを前提とする仕組みはwebpackerを利用する必要があります。 詳しい動作については次の動画でデモが公開されています。 Alpha preview: Modern JavaScript in Rails 7 without Webpack - YouTube JSer.infoをサポートするには 😘
ウェブサイトをスクロールした時に少し余韻が残りながらスクロールが継続する挙動は慣性スクロールと呼ばれ、演出と組み合わせることで世界観や没入感を表現できる手法です。 前回の記事では慣性スクロールの特徴や注意点の紹介、JavaScriptライブラリ「Lenis」を使った簡単な実装方法を紹介しました。 後編である今回の記事ではLenisの応用的な使い方を紹介します。この記事のデモは以下のリンクから参照できるので、ぜひ読みながらデモを触ってみてください。 サンプルを別ウインドウで開く ソースコードを確認する アンカーリンク アンカーリンクはページ内の特定の位置まで移動する機能です。Lenisを使うとアンカーリンクを押した際にスルスルっと目的の位置までスクロールする演出を簡単に実装できます。 // 設定を行ったLenisのインスタンスを作成 const lenis = setupLenis(); /
Reactにて、CSSファイルもCSS in JSライブラリも無しにスタイリングできないか実験し、失敗した記録 - Qiita
Reactにて、CSSファイルもCSS in JSライブラリも無しにスタイリングできないか実験し、失敗した記録CSSJavaScriptReactcss-in-js この記事の概要 私が日頃Reactを触っている際、CSS in JSをよく使います。 一口にCSS in JSと言っても、書き味やバンドルサイズなどそれぞれ違いがあって、選定に悩むこともしばしば。 要はJavaScriptの中でCSSが書ければ良いのだから、別な方法もあるのではないか？と思って実験した内容をまとめました。 この記事自体は役に立つものではないと思いますが、同じ轍を踏む人が減れば良いなと思って投稿します。 結論 動くっちゃ動くけど明らかに実用的でない。 （測定すらしていませんが、するまでもなくこれは駄目だと思いました。） 試したこと コンポーネント内に<style>を埋め込む コンポーネント内にreact-helm
はじめに こんにちは、CX事業本部MAD事業部の森茂です。 まだReleaseバージョンも付与されていないため開発中とも思われますが、Microsoft製のCSS-in-JSライブラリGriffelがGitHubに公開されてたのでさっそく試してみました。 Griffelは正式なリリース版ではないため不確かな部分がございます。またアップデートなどで仕様が変更になる場合もございます。あらかじめご了承ください。 Griffel まだライブラリの紹介ページなどはなくGitHubのドキュメントに紹介されている範囲ですが、特徴として下記4点を謳っているようです。（まだプロダクトアイコンもなさそう） Zero config start: Griffel has both runtime & build time implementations Optional build time transforms
JSer.info #522 - @sindresorhusによるNode.jsライブラリのESM(ECMAScript Module)対応についてのdiscussionsが作られています。 @sindresorhusはさまざまNode.jsライブラリを作成しているため、Node.jsのESM対応に関係してきます。 The ESM move · Discussion #15 · sindresorhus/meta 2021-04-30でNode.js 10のLTSが終了し、Node.js 12以上のみが対象となります。 Node.js 12.xにはECMAScript modules(.mjsや"type": "module"など)の対応が含まれています。 nodejs/Release: Node.js Release Working Group Modules: ECMAScript m
WEBサイトのレスポンシブ化をする上で、スマホなどの画面幅が狭いデバイスには収まりきらないコンテンツがあることが多いです。 特に情報量の多い表（テーブル）などは、スマホの画面幅に収めるのはなかなか難しいですよね・・・。 そういった場合、CSSのoverflowプロパティで横スクロールを可能にすることができますが、ユーザーからするとスクロール可能か判断できず、見落としてしまいがちです。 そこで今回の記事では、横スクロール可能な要素にヒントを表示するJavaScriptライブラリ「ScrollHint」を紹介します！ このライブラリを導入することで、スクロール可能な要素には以下のようなヒントが表示されるようになります。 横スクロール可能な要素をアイコンとテキストで知らせてくれるので、ユーザビリティの向上にもつながりますね。
TypeScript を使ってオリジナルの NPM パッケージを作ろう！
皆さんこんにちは。この記事ではReact向けCSS-in-JSライブラリ「Castella」を紹介します。CastellaのドキュメントにはCastella'a Design Goalsという文書があり、Castellaがどのような思想で作られたCSS-in-JSライブラリなのか分かるようになっています。この記事ではこの文書の和訳をお届けします。 Castellaのデザインゴール Castellaは少しopinionated（訳注：特定のやり方を強制する）なCSS-in-JSライブラリです。この文書はなぜCastellaがこのようにデザインされているのか説明します。 スタイルとマークアップを紐づける 例を見ると分かるように、CastellaのAPIはCSS（スタイル）とHTML（マークアップ）を強く結びつけるような書き方を強制します。これは既存のライブラリ（あるいはCSS Modules）
【2020年版】人気のNode.jsライブラリ・フレームワーク厳選まとめ - あしたのチーム Tech Blog
こんにちは！ あしたのチームでフロントエンドリードをしております塩野です！ みなさんは快適なフロントエンド生活を送っていらっしゃいますか？ もちろん私も package.json を見るとワクワクが止まらないので毎日GitHubのリポジトリを漁っては dependencies と devDependencies をにらめっこしちゃいます。 今回はフロントエンド開発でよく使うであろうnpmライブラリ、そしてここさえおさえておけば間違いはないだろうというnpmライブラリをずらりと並べてみたので、是非今日のおつまみにしていただければと思います。 筆者について TypeScript大好き（バックエンドもフロントエンドもTypeScriptでゴリゴリします） 業務ではVue、趣味ではReactをよく使います saltyshiomix - GitHub はじめに いきなりですがnpmライブラリの便利な
【魅惑ライブラリ試用②】わずかなステップでSlack BOTが作成・操作が可能なNode.jsライブラリ「Slackbots.js」を試用。 - Qiita
【魅惑ライブラリ試用②】わずかなステップでSlack BOTが作成・操作が可能なNode.jsライブラリ「Slackbots.js」を試用。JavaScriptMacNode.js初心者Slack 日常に溶け込み、多大なる恩恵を頂いているライブラリやパッケージを心おきなく試用する記事第二弾。 「ふと思いつきで」という言葉を信条にしてきた私の活動遍歴の変遷が、だんだん速度を増して進行中。 今回は、SlackBOT作成の際に便利なライブラリの「Slackbots.js」を試用することにしよう。 ライブラリ概要 Slack BOTをAPIを利用して、簡単に作成・操作が可能なNode.jsライブラリ。 メッセージ投稿やユーザーリストの取得等の、Slackの基本操作の処理が豊富に用意されている。 公式Github 作成BOT概要 下記の機能を持つ、最低限のSlack BOT。 指定した地域の天気情報
画像の圧縮とWebP画像の生成を自動化させるモジュールjsを作成しました。 当初はimageminを使用していましたが、クオリティの設定や元ファイルの状態によっては圧縮されないファイルがあり（※）、sharpを使用することにしました。 ※これ以上圧縮できない場合に生成されない（・？） オリジナル画像があるフォルダ（src\/imagesとする）と圧縮した画像・WebP生成した画像を入れるフォルダ（\/public\/imagesとする）を用意する。 タスク📁\src\imagesのjpg/pngを📁\public\imagesへ圧縮して格納する📁public/imagesに圧縮されたjpg/pngが格納されたらWebP画像を生成するgif/svgは変換せず📁public/imagesへ複製📁src/images内のフォルダ・画像を削除したら📁public/images内も削除す
ガントチャート（JSライブラリ： jquery.ganttView）をカスタマイズしてみた（１行に複数タスク） - Qiita
はじめに 今となっては古のJSライブラリ 上記ライブラリのスケジュール管理オブジェクトを１行内に複数配置するカスタマイズをしてみたので、勘所をメモ書きしておきます。 ニッチな内容だけど、誰かの参考になれば幸いです。 スタイルシートの追加 標準の管理オブジェクト（チャート部に置くスケジュール線） div.ganttview-block { position: relative; height: 25px; background-color: #E5ECF9; border: 1px solid #c0c0c0; border-radius: 3px; -moz-border-radius: 3px; -webkit-border-radius: 3px; } div.ganttview-block-cells { position: relative; height: 25px; } div
パッケージの移行 パッケージをESMなパッケージとして明示する方法は2つ .mjs の拡張子を使う package.json の type フィールドに module の値を設定する 基本的にパッケージ単位で移行すると思うので、後者の package.json の "type": "module"を設定する。 この設定をすると、パッケージ内のJavaScriptがモジュールのコンテキストで実行されるようになる。 モジュールでは常にstrict modeとなり、Node.jsのESMではrequire、exports、__dirname、__filename などが利用できなくなる。 代わりに、ES2015+のimportとexport文がモジュール構文として利用できるようになる。 JavaScript モジュール - JavaScript | MDN Differences between
![Node.jsライブラリ/ツールをESMに移行する[Node.js 12+]](https://cdn-ak-scissors.b.st-hatena.com/image/square/7e5d02dd4b4470fe1aa0b6dc49fb67aee46c2883/height=288;version=1;width=512/https%3A%2F%2Flh3.googleusercontent.com%2Fa-%2FAOh14Gh5aVg_ccNbbR5jIUsiJw7NuPCWIwaqq1-nXKs5Bw%3Ds250-c)
Vue.jsライブラリ リンク集 回転、拡大縮小、ズームできるvue用の画像ビューア「v-viewer」 v-viewerは、回転、拡大縮小、ズームなどができるvue用の画像ビューアコンポーネントライブラリです。 Viewer.jsを素に作られており、42のオプション、23のメソッド、9つのイベントを使用できます。 >>記事はこちら コイツ動くぞ？！的なアニメーションが付けられる「vue-kinesis」 vue-kinesisは、インタラクティブなアニメーションを作成できるコンポーネントライブラリです。 テキストや画像（jpgやSVG）などに、マウスの動きやスクロールに合わせてアニメーションさせたり、audioに合わせてアニメーションさせることもできます。 >>記事はこちら マウスカーソルをポインターみたいなドットにする「vue-cursor-fx」 vue-cursor-fxは、マウス
TourGuide.jsはIntro.jsのようなWebサイトのツアーを実装するオープンソースのJavaScriptライブラリです。 商用ライセンスは有償のIntro.jsとほぼ同じ動きをする代替ライブラリとして利用可能で、実装も簡単です。 <script src="https://unpkg.com/@sjmc11/tourguidejs/dist/tour.js" crossorigin="anonymous" referrerpolicy="no-referrer"></script> <link rel="stylesheet" href="https://unpkg.com/@sjmc11/tourguidejs/dist/css/tour.min.css">👆ライブラリとCSSを読み込みます。 <div data-tg-tour="<span>foo</span>">bar<
UserAgent判定JSライブラリ「UAParser.js」と「Platform.js」の比較 – One IT Thing
（私はUAParser.jsを使っています） ネットを探すとUA文字列を解析してブラウザ判定をするコードが一杯出てきます。 でもUA解析プログラムを自前で作ってシステムに組み込むとなると、新しいブラウザがリリースされた時とか、レンダリングエンジンが変わる際にUAも変わって再考しなきゃいけくなるんじゃ・・・とか気になってきます。 仕事でやるにしては実利が低いコードを一生懸命考える時間があるなら本来の製造に時間を費やしたいのが本音ですから、同目的のライブラリを採用して判定した方が時間の節約が出来ます。新しいブラウザが出てきたらライブラリもバージョンアップしてくれるでしょうしね。 沢山あるUA判定JSライブラリの中、ここ数年開発が継続しているライブラリから二つを候補に挙げました。比較してどちらを採用するか決めていきます。
JSライブラリを1日1つ紹介する 1日1つJSのライブラリを調べます。 ① ライブラリに関するドキュメントを最初から最後まで読む ② 実際に使ってみる or 使い方を調べる ③ ライブラリを3行で説明する 本日は、react-domのドキュメントを読んで実際に業務で使っているところを調べました。 ドキュメント 今回読んだドキュメントはこちらです。 github.com 実際に使ってみる This package serves as the entry point to the DOM and server renderers for React. It is intended to be paired with the generic React package, which is shipped as react to npm. READMEによると、reactと一緒に使うことが前提のよ
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
jsライブラリ選定はopenbaseが超絶便利 - Qiita
カルーセルUIを実現するJSライブラリまとめ(2024年版) - 導入手間や機能の比較紹介 - ICS MEDIA
GSAP入門 - アニメーション制作のための高機能なJSライブラリ（前編） - ICS MEDIA
リッチテキストエディター（RTE）のJSライブラリ色々試してみた
Flash作品を残すために取り組んだこと - プラグイン無しでFlashを再生できるJSライブラリを採用して - ICS MEDIA
JSライブラリ「Polyfill.io」がマルウェアに改変、10万サイト以上に影響
話題のゼロランタイムなCSS-in-JSライブラリ「Panda CSS」をNext.jsに導入してみた
滑らかなスクロール体験を！ JSライブラリでお手軽に導入する慣性スクロール（前編） - ICS MEDIA
GSAP入門（後編） - タイムライン制御やスクロール演出などの魅力的なJSライブラリ - ICS MEDIA
2021-08-17のJS: Next.js 11.1、Rails 7で予定されているimport mapsベースのJSライブラリの利用
滑らかなスクロール体験を！ JSライブラリでお手軽に導入する慣性スクロール（後編） - ICS MEDIA
Microsoft製CSS-in-JSライブラリGriffelを試してみた | DevelopersIO
2021-01-12のJS: Node.jsライブラリのESM対応の計画、TypeScriptとJSDocでJavaScriptの型チェック
横スクロール可能な要素にヒントを表示するJSライブラリ「ScrollHint」の使い方 | WebDev Tech
NPMパッケージ作成入門 ~ TypeScriptでつくるJSライブラリ
【日本語訳】CSS-in-JSライブラリ「Castella」のデザインゴール
Node.jsライブラリsharpを使って画像の圧縮とwebp生成を自動化する
Node.jsライブラリ/ツールをESMに移行する[Node.js 12+]
【2019年9月】Vue.jsライブラリ記事まとめ | カバの樹
Intro.jsのようなWebサイトのツアーを実装するオープンソースのJSライブラリ・「TourGuide.js」
react-dom【JSライブラリ1日1個】 - 宮水の日記
news.infoseek.co.jp
hanako.tokyo
mari10.oa.gob.jp
news.infoseek.co.jp
news.tv-asahi.co.jp
news.infoseek.co.jp