glfx.js - JavaScriptで画像を加工 MOONGIFT
画像を加工する場合、画像編集ソフトウェアが使われます。そして加工したファイルを保存し、Web上にアップロードするでしょう。しかしこの場合、再度編集する際に備えて元ファイルは保存しておかなければなりません。また、同じ加工を何十枚もの画像に施すのも大変です。 そこで使ってみたいのがglfx.jsです。JavaScriptを使ってWebブラウザ上で画像を加工するソフトウェアです。 glfx.jsの使い方 元画像です。 マウスがあるところに渦巻きが描かれます。 ノイズ。 周囲を暗くします。 ぼかし。ぼかしの位置も変更できます。 マウスの当たっている場所を少し拡大します。 ドット変換。 昔の写真のように粗いドット。 glfx.jsを使うと元の画像は変えないままにフィルタリングをかけられます。画像全体だけでなく、マウスがある場所だけに施すことも可能です。フィルタリングの種類も多様で、様々な加工が施せる
個人でWebアプリを開発する時に便利な高機能JavaScriptライブラリ6選！ - paiza times
どうも、まさとらん（@0310lan）です！ 今回は、Webアプリやサービス作りなどで便利に使える高機能なJavaScriptライブラリを厳選してご紹介してみようと思います。 ライブラリ単体でそのままWebアプリとしてリリースできそうなレベルのものから、ちょっとした機能を追加できるものまでピックアップしてみたのでご興味がある方はぜひ参考にしてみてください！ なお、JavaScriptはpaizaラーニングの「JavaScript入門編」で学ぶことができます。そちらも合わせてチェックしてみてください。 オーディオファイルを柔軟に制御できるライブラリ！ 【 howler.js 】 MP3 / WAV / AAC / OGG…など多彩なコーデックに対応しているうえ、オーディオスプライトによる制御も可能なライブラリが「howler.js」です。 音楽プレイヤーはもちろん、オーディオ制作アプリやゲー
reduce()はArrayにて最強……おぼえておけ。（配列とかおれおれAdvent Calendar2018 – 23日目） | Ginpen.com
配列とかおれおれAdvent Calendar2018 – 23日目 配列界最強のメソッドです。（？） 万能選手ですがどうか使わないでください。 使い方はちょっとわかりづらいんだけど、こんな↓感じです。 const arr = [11, 22, 33]; const obj = arr.reduce((acc, value, index) => { acc[`number${index}`] = value; return acc; }, {}); console.log(obj); // { number0: 11, number1: 22, number2: 33 } 与えたコールバック関数の次に第2引数がある点に注目。 インターフェイスと使い方 Array.prototype.reduce() | MDN result = arr.reduce(callback[, initialV
Tabulator - これはすごい。HTMLテーブルを高機能に MOONGIFT
テーブル表示はWebシステムのデファクトとも言えます。業務システムはいうに及ばず、管理者画面などでも必ず求められる表示です。そしてただ表示すればいいという訳ではなく、ソートやフィルタリング、インラインでの編集など様々な機能が求められるものです。 そんな多機能なテーブル表示を実現してくれるのがTabulatorです。多くのニーズを満たしてくれることでしょう。 Tabulatorの使い方 てんこ盛りなデモテーブル。ざっと見てもフィルタ、ページネーション、グラフ表示、ソートなどの機能が確認できます。 インライン編集もサポートされています。 データに合わせて幅を自動調整。 行をクリックして展開する機能。 カラムをグループ化。 カラムを縦に。これはカラムが多い時に便利そうです。 ドリルダウン。 テーブルを入れ子にもできます。 スパークライン表示。 フッターで集計。 HTMLテーブルを変換する機能もあ
JavaScriptのArrayを知る。大きな目標への小さな一歩 〜Array.prototype.filter編〜 | 株式会社LIG(リグ)｜DX支援・システム開発・Web制作
本日はArray.prototype.filter()メソッドについて見ていきます。名前からも想像はつきやすいかと思います。要は「フィルタリングするんでしょ？」ってことですよね。本当にそうなのか、その目で確かめてください。 ※ここからの説明は個人的に調べて解釈したざっくりとした説明になります。詳しく知りたい方はこちらへどうぞ https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Global_Objects/Array/filter Array.prototype.filter()メソッドとは フィルタリングして新しい配列を作成するメソッドです。 引数にはコールバック関数を渡します。 コールバック関数は配列の各要素に対して実行され、trueを返した要素のみが新しい配列に残る、ということになります。コールバック関数の第１
CanvasEffect.js - Canvasで画像にエフェクト MOONGIFT
HTML5のCanvasを使うと画像を取り込んで表示し、エフェクトを行うことができます。しかしCanvasの扱いは意外と面倒で、コードも多くなりがちです。そのためメンテナンス性が低くなってしまいます。 そこで使ってみたいのがCanvasEffect.jsです。画像を編集するための専用ライブラリとなっています。 CanvasEffect.jsの使い方 パラメータが様々にあるので、それを動かせば元画像にエフェクトがかかります。 セピアにしたり…。 グレースケールにも。 ノイズを増やしたり。 こんなカラフルな感じにも。 エフェクトはダイナミックに行えます。 画像をエフェクトするライブラリは多数ありますが、多くはアクションを指定する形となっています。CanvasEffect.jsは数値で割合を指定できるので、より細かな制御が可能です。明るさやコントラスト、ガンマ、輝度、ノイズなどエフェクトも多数揃
TableFilter - HTMLテーブルのフィルタリング
MOONGIFTはオープンソース・ソフトウェアを紹介するブログです。2021年07月16日で更新停止しました 業務システムで必ず求められるのがテーブルベースの一覧表示です。件数が少ない時にはただ表示するだけで十分ですが、数百件を越えるようになると様々な要望があがってきます。その一つがフィルタリングではないでしょうか。 HTMLのテーブルに対してフィルタ機能を追加してくれるのがTableFilterです。検索とはまた違う手軽なフィルタリングを実現してみましょう。 TableFilterの使い方 一例です。カラムの上にフィルタリングするテキストボックスが並んでいます。文字を入力してエンターを押せばデータがフィルタリングされます。 リアルタイムではないようですが、そこは改造できるでしょう。 入力はテキストだけでなく、ドロップダウンなども使えます。 より複雑に、ページネーションなども駆使したデモで
List.js
List.js v2.3.1 Tiny, invisible and simple, yet powerful and incredibly fast vanilla JavaScript that adds search, sort, filters and flexibility to plain HTML lists, tables, or anything. Hi! I'm Jonny and the author of List.js. I hope you like the lib. I’ve put a lot of hours into it! Feel free to follow me on Twitter and GitHub for news and donate a coffee for good karma ;) Follow @javve Donate a c
Gridifier - アニメーションが格好良いグリッドライブラリ MOONGIFT
コンピュータ上の表現としてグリッドは非常によく使われます。Excelのような表計算ソフトウェアはよく使われますし、テーブルや表もよく使われる表現です。しかしWeb上ではテーブルではなく、スタイルシートを駆使したグリッドが人気になっています。 今回はグリッドのフィルタリング、並び替えが得意なGridifierを紹介します。一覧で表示する際などに活躍しそうです。 Gridifierの使い方 こちらはデモの画面です。色と名前が様々なグリッドが並んでいます。 カラーで絞り込みました。 名前でソート。 実際に操作しているところ。アニメーションが格好良いです。 Gridifierを使えば写真や動画、HTMLをグリッドで整然と並べつつ、ユーザの指定でフィルタリングしたり並び替えるようなUIが簡単に作れます。スマートフォンにも対応していますので多くの環境で動かせるでしょう。 GridifierはHTML5
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
製品等のデータ比較のためのtable要素にフィルタ機能を付与する・「Products Comparison Table」