Bootstrapに基づいて設計されたミニマルデザインなオープンソース管理画面テンプレート・「Spur」
Spur SpurはBootstrapに基づいて設計されたダッシュボードテンプレートです。ミニマルなスタイルで装飾もほとんどありませんのでフレームワークライクに使う事が出来そうです。チャートを表示したい時はCharts.jsを読み込め...
Resource - フロントエンドエンジニア向け
VSCodeやAtom、Sublimeなど、様々なテキストエディタのカラーテーマを作成、公開しているプロジェクト・「RAINGLOW」
RAINGLOW RAINGLOWはVSCodeやAtom、Sublimeなど、様々なテキストエディタのカラーテーマを作成、公開しているプロジェクトです。全てDayle Rees氏の開発したオリジナルのカラーテーマだそうです。オリジナ...
Vue.jsベースのECサイト向けUIコンポーネントライブラリ・「Storefront UI」
Storefront UI Storefront UIはECサイトの為に開発されたVue.jsベースのUIコンポーネントライブラリです。デザイナーや開発者向けに設計されており、カスタマイズのしやすさも考慮されているそうで、デス...
マウスの動きやスクロールなど、閲覧ユーザーのブラウザのビューポート状態を監視するスクリプト・「Tornis」
Tornis Tornisはマウスの動きやスクロールなど、閲覧ユーザーのブラウザのビューポート状態を監視するスクリプトです。シンプルで軽量、依存関係もなく、使いやすい設計となっています。 パララックスの為のスクリプトというわけで...
Bootstrap 4と互換性のある、120以上のコンポーネントを揃えたWeb開発キット・「Uix Kit」
Uix Kit Uix KitはBootstrap 4と互換性のある、120以上のコンポーネントを揃えたWeb開発キットです。CSSフレームワークではないとの事。 これ単体でも開発を始められるし、Bootstrap 4を使い慣れ...
レーダーチャートを作れる非依存のシンプルなスクリプト・「maturity-radar」
maturity-radar See the Pen MdLMKo by kachibito (@kachibito) on CodePen. maturity-radarはレーダーチャートを作成できるスクリプトで...
Webサイトでどのようなテクノロジーが使われているかを調査できるChrome拡張・「WhatRuns」
WhatRuns WhatRunsは任意のWebサイトでどのようなテクノロジーが使われているかを調査できるChrome拡張です。かなり前にご紹介させて頂いたLargerIOと同じ目的ですが、こちらはブラウザ拡張としてその場で利用で...
様々な言語のコードをブラウザで実行テストできるオンラインIDE・「Llama」
Llama Llamaは様々なプログラミング言語のコードをブラウザで実行テストできるオンラインIDEです。対応言語はCやC++、Bush、Elixir、Go、Java、Haskell、Ruby、Pythonなどの他、JavaScrip...
mailtoリンクを使いやすいUIに変換するスクリプト・「MailtoUI」
MailtoUI MailtoUIはmailtoリンクを使いやすいUIに変換してくれるスクリプトです。href="mailto:tony.stark@example.com"といったコードでもOutlook等のメーラーを立ち上げず...
タッチデバイスにも対応可能な、リストのアイテムを並べ替えたりスワイプで削除できるようにするライブラリ・「Slip.js」
Slip.js See the Pen ZZRmaP by kachibito (@kachibito) on CodePen. Slip.jsはリストのアイテムの並べ替えやスワイプによる消去を可能とする非依存のシ...
SVGベースのモダンなカラーピッカーを実装する非依存の軽量JavaScriptライブラリ・「iro.js」
iro.js See the Pen iro.js demo by James Daniel (@rakujira) on CodePen. iro.jsはSVGで作られたモダンなスタイルのサークルタイプカラーピッ...
Blockstackを使ったセキュアなコードスニペット管理ツール・「DECS」
DECS DECSはBlockstackを使ったセキュアなコードスニペット管理ツールです。登録したスニペットは暗号化され、自分自身でデータを保持する形となるのでDECS運営者ですら中身を見る事が出来なくなります。よって、今までのコード...
JavaScript製のオープンソースなガントチャートライブラリ・「Frappe Gantt」
Frappe Gantt Frappe GanttはJS製のOSSなガントチャートライブラリです。サンプルのスケジューラーではタイムスケールはドラッグでチャートの移動や伸縮が可能で、クリックで詳細が表示されるようになっています。UIは...
知識やコーディング不要で誰でも手軽にWebスクレイピングできるChrome拡張・「Spider」
Spider Spiderは知識やコーディング、学習なども不要で、誰でも手軽にWebスクレイピングできるChrome拡張です。任意のWebサイトでエクステンションを起動し、データとして抽出したい箇所を選択してAdd Sectionを押...
GraphQLとReactが使用されている、開発者向けのオープンソースなサーバーレスCMS・「Webiny」
Webiny WebinyはGraphQLとReactで作られた開発者向けのオープンソースなサーバーレスCMSです。大小を問わず、WebサイトやWebアプリケーションを構築できるように設計してあるそう。コンテンツ管理はビルトインされた...
チームで管理できるオープンソースのナレッジ管理システム・「BookStack」
BookStack BookStackはチームで管理できるOSSのナレッジマネジメントシステムです。Wikiを運用、構築する為のソフトウェアですが、基本的に編集にはログイン（GitHub、Google、Slackアカウントでのログイン...
座標とタイムスタンプのデータをJSONで渡すとGoogleマップ上でその経路をアニメーション表示してくれるスクリプト・「maps-journey-replay」
maps-journey-replay maps-journey-replayは座標とタイムスタンプのデータをJSONで渡すとGoogleマップ上に経路をアニメーション表示してくれるスクリプトです。説明下手なせいでピンとこないかも...
Webページに訪問したユーザーのマウスの動きを再現するスクリプト・「viewRecorder」
viewRecorder viewRecorderはWebサイトでユーザーが動かしたマウスの動きを記録、再現するスクリプトです。jQueryに依存しています。以前ご紹介したrrwebと少し似ていますがもう少しシンプルで導入ハードルも低...
Blockstackアカウントのプロフィールを表示できるOSS・「lander」
lander landerはBlockstackで設定している自身のプロフィールを表示できるシンプルなOSSです。Blockstack Browserで設定している写真やSNS、自己紹介やBitcoinアドレス等のID情報をそのまま表...
PSやSketchファイルも用意されたBootstrap 4ベースのオープンソースUIキット・「Material Kit」
Material Kit Material KitはBootstrap 4ベースのUIキットです。その内容は極めて豪華なものとなっており、PhotoshopやSketchファイルも用意、HTMLだけでなく、WordPressテーマも用...
JavaScriptで配列のメソッドを対話式に調べられる・「JavaScript Array Explorer」
JavaScript Array Explorer JavaScript Array ExplorerはJavaScriptにおける配列のメソッドを対話式に調べられるOSSです。以前ご紹介したGit ExplorerのJavaScri...
オープンソースで公開されている、大量のコンポーネントを含んだBootstrapベースの管理画面テンプレート・「STISLA」
STISLA STISLAはオープンソースのBootstrapベースの管理画面テンプレートです。大量のコンポーネントを含んでおり、ほとんどの需要に応えられるようになっています。また、インタラクティブなチャートやデータテーブルなどの為の...