アニメーションしながら動的に順位が入れ替わるバーチャートを生成できるOSS・「Bar chart race generator」 Bar chart race generator Bar chart race generatorはアニメーションしながら動的に順位が入れ替わるバーチャートを生成できるOSSです。Bar chart raceって言うんですね。初めて知...2020.07.25 | 10時01分58秒
手軽に扱えるタッチフレンドリーで汎用的なカルーセルライブラリ・「keen-slider」 keen-slider keen-sliderは手軽に扱えるタッチフレンドリーで汎用的なカルーセルライブラリです。 他ライブラリを必要としない非依存型でタッチデバイスファーストな設計となっています。操作もシンプルで様々な用途に使...2020.06.20 | 10時27分04秒
Animate.cssを使用してスクロールに応じてコンテンツにアニメーションエフェクトを追加できる軽量スクリプト・「Josh.js」 Josh.js See the Pen wvMzNYv by kachibito (@kachibito) on CodePen. Josh.jsはAnimate.cssを使用してスクロールに応じてコンテンツにアニ...2020.06.17 | 10時00分14秒
ブラウザで動作するオープンソースのテキストエディタ・「Writty」 Writty Writtyはブラウザで動作するオープンソースのテキストエディタです。HTML/JavaScript/CSSで作られています ライティングに集中できるよう、ミニマルなUIでツールバーも最小限に、且つサイドに寄せられ...2020.06.15 | 10時01分29秒
チャートも含める事が出来るテーブルライブラリ・「AnyGrids」 AnyGrids See the Pen YzwWpoK by kachibito (@kachibito) on CodePen. AnyGridsはチャートも含める事が出来るテーブル生成JavaScriptライブラ...2020.06.14 | 10時07分10秒
シンプルで扱いやすいHTMLテーブルライブラリ・「Grid.js」 Grid.js Grid.jsはシンプルで扱いやすいHTMLテーブルライブラリです。ReactやAngular、Vueなどは勿論、バニラでも問題なく動作します 9kbと非常に軽量で使い方もすごく簡単です。データを元に自動で指...2020.06.06 | 9時49分45秒
uilangやAlpine.js等にインスパイアされた、簡単なDOM操作を手軽に行える超軽量スクリプト・「Fluor.js」 Fluor.js Fluor.jsはちょっとしたDOM操作を手軽に行える超軽量スクリプトです。uilangやAlpine.js等にインスパイアされたそう classの付与/除去やクリックイベント、トグルなどなど需要の高そうな操作...2020.05.30 | 9時56分27秒
Webページで音声による操作を可能にするボイスコマンドライブラリ・「Artyom.js」 Artyom.js Artyom.jsはWebページで音声による操作を可能にするボイスコマンドライブラリです Google NowやSiri、Cortanaなどの音声アシスタントの簡易版みたいなやつです 例えば挨拶したら返...2020.05.10 | 10時04分06秒
HTMLの属性にディレクティブを指定してリアクティブな動作を実装できるJavaScriptフレームワーク・「Alpine.js」 Alpine.js See the Pen To Do List - Alpine.js by kachibito (@kachibito) on CodePen. Alpine.jsはHTMLの属性にディレクティブを...2020.05.03 | 10時17分57秒
Markdownでマインドマップを作れるライブラリ・「Markmap」 Markmap MarkmapはMarkdownでマインドマップを作れるライブラリです。Markmapにインスパイアされて開発したそうです 基本的には以下のようにリストや見出し等でマインドマップを描けるようになっています ...2020.04.12 | 10時04分50秒
アイソメトリック図を手軽に作れるJavaScriptライブラリ・「isocity」 isocity isocityはアイソメトリック図を手軽に作れるJavaScriptライブラリです 動作サンプルでは街を作れるようになっており、ライブラリ名もサンプルに沿ったネーミングですが、素材を変えれば様々な用途に応用できそ...2020.04.07 | 10時06分08秒
CSSをJavaScript用に変換するシンプルなコンバーター・「CSS2JS」 CSS2JS CSS2JSはCSSをJavaScript用のコードに変換するシンプルなコンバーターです 特に解説不要のアプリなのでサンプルを使って簡単に。例えば以下のCSSを 以下のように変換します ...2020.03.22 | 10時03分05秒
任意の画像と同じ色の影を作るシンプルなスクリプト・「cosha」 cosha See the Pen zYGjrbq by kachibito (@kachibito) on CodePen. coshaは任意の画像と同じ色の影を作るスクリプトです。上サンプルのようにステンドグラ...2020.03.16 | 10時14分34秒
モスキート音を出すためのスクリプト・「Mosquito.js」 Mosquito.js Mosquito.jsはいわゆるモスキート音を鳴らせるスクリプトです。非依存なので単体で動作します 一昔前に、深夜の若者の騒音対策として公園などに導入されたものです(Wikipedia:モスキート音) ...2020.02.29 | 10時01分19秒
30以上のプラグインでカスタマイズ可能なオープンソースのJavaScriptアップローダー・「Uppload」 Uppload Upploadは30以上のプラグインが用意された拡張的なOSSのJS製アップローダーです。※誤字ではなくUpploadが正式な名前みたいです 単にローカルからファイルをアップロードするだけでなく、SNSや画像投稿...2020.02.19 | 9時55分29秒
ドラッグ&ドロップで作れるオープンソースのHTMLメールビルダー・「Mosaico」 Mosaico MosaicoはD&Dで作れるHTMLメールビルダーです。OSSとしてソースコードが公開されています 従来のこの手のアプリと同じ操作法で、ブロックを追加しながら編集し、HTMLメールを作る事が出来ます コー...2020.02.17 | 10時01分33秒
ソートや検索、ページネーション等、基本的な機能を備えた非依存のデータテーブルライブラリ・「Vanilla-DataTables」 Vanilla-DataTables See the Pen Vanilla DataTables by Karl Saunders (@Mobius1) on CodePen. Vanilla-DataTable...2020.02.16 | 10時08分54秒
非依存でシンプルなダイアグラム作成JavaScriptライブラリ・「DiagramFlowJS」 DiagramFlowJS DiagramFlowJSは非依存でシンプルなダイアグラム作成JavaScriptライブラリです 他ライブラリを使わず単体で動作、上サンプルのようなD&Dで動かせるダイアグラムを作成出来ます ...2020.02.12 | 9時50分53秒
軽量で非依存な、ダーク/ライトモード切り替えスクリプト・「DarkModeJS」 DarkModeJS See the Pen VwLYLzd by kachibito (@kachibito) on CodePen. DarkModeJSは軽量で非依存なダークモード/ライトモードの切り替えスクリプ...2020.02.08 | 9時49分37秒
JavaScriptライブラリやフレームワークを使わずHTML5、CSS、バニラなJSだけで作られたプロジェクト集・「Web Projects With Vanilla JavaScript 」 Web Projects With Vanilla JavaScript Web Projects With Vanilla JavaScriptはフレームワークやライブラリ等を使わずに純粋なHTML5+CSS+VannilaなJSで...2020.02.05 | 10時03分35秒
都市名を入力すると、その都市の道路のみを線画で抽出するオープンソースの地図アプリ・「city-roads」 city-roads city-roadsは任意の都市名を入力すると、その都市内の道路だけを線画で抽出、色などを変更してSVGなどでダウンロードできる地図アプリです OSSとしてソースコードが公開されています。企業や店舗の地図作...2020.01.27 | 9時40分47秒
シンプルで軽量なオープンソースの自己ホスト型アナリティクスツール・「Ackee」 Ackee Ackeeはシンプルで軽量な自己ホスト型のNode.jsベースのWebサイト分析ツールです。オープンソースとして公開されています インストールも簡単で必要なもののみを追跡するシンプル設計なのが特徴みたいです G...2020.01.20 | 10時02分29秒