input要素の入力をサポートする非依存スクリプト・「Cleave.js」
Cleave.js Cleave.jsはフォームでのinput要素の入力をサポートするスクリプトです。jQuery等のライブラリに依存せず、単体で動作してくれます。上記の動作サンプルのように、クレカの自動認識、右寄せ入力、電話番号入力...
Resource - フロントエンドエンジニア向け
Githubのコードを任意のWebページに埋め込める・「github-embed」
github-embed github-embedはGithubのコードを任意のWebページに埋め込むためのスクリプトです。上図のように複数ファイルを同時に埋め込む事も可能です。Gistライクにリポジトリ内のコードを埋め込めるgist...
flexboxベースの軽量でレスポンシブなCSSフレームワーク・「Basis」
Basis Basisはflexboxベースの軽量でRWD対応CSSフレームワークです。軽量でモバイルファースト、クリーンなコード、ミニマルなスタイルの設計を特徴としています。各コンポーネントやユーティリティ、サンプルテンプレート等も...
CSSをショートハンドにしてくれるジェネレーター・「SHRTHND」
SHRTHND SHRTHNDはCSSをショートハンドにしてくれるジェネレーターです。ショートハンドにする事で軽量化、可読性の向上に繋がります。左カラムにコードを入力すれば右カラムにショートハンドにしたCSSショートハンドが出力されま...
GithubやGitLabでIDEのようにファイルをツリー表示するChromeエクステンション・「Octotree」
Octotree OctotreeはGithubやGitLabでファイルをツリー表示するChromeエクステンションです。FirefoxやOperaの拡張もあります。上図のようにIDEライクなツリー表示にしてくれるのでファイルへのアク...
JavaScriptのTipsを不定期で紹介する・「JS Tips」
JS Tips JS TipsはJavaScriptのちょっとしたヒントをコードとともに不定期で紹介するWebサイトです。基本的にはバニラなスクリプトが紹介されており、コードはGithubでも公開されています。8/23現在で58ほど。...
オープンソースでセキュアなグループチャットアプリ・「Wire」
Wire Wireはセキュアなグループチャットアプリです。音声、ビデオ、テキストチャットに対応しており、Wire上でのデータは暗号化されるため、セキュアなチャットが可能、との事。グループは128人まで追加可能みたいです。オープンソース...
JSONやCSVでダミーデータを作成出来る・「dummi」
dummi dummiはJSONやCSVのダミーデータを作成、ダウンロードできるWebサービスです。データは人物や本、動画や記事が用意されており、人物には性別やメールアドレス、年齢等、本ならタイトルや著者、値段などの値が用意されており...
レスポンシブWebデザインにも対応できるオープンソースのプロトタイピングツール・「PrototypeBrewery.io」
PrototypeBrewery.io PrototypeBrewery.ioはRWD対応のプロトタイピングツールです。直感的に操作可能なインターフェースで独自のCSS、JavaScriptを書くことも出来ます。ビューモードでは各デバ...
インライン編集が可能なオープンソースのブログプラットフォーム・「Postleaf」
Postleaf Postleafはオープンソースのブログプラットフォームです。管理画面等でなく、閲覧しているWebページをその場でインライン編集可能との事。その場で編集出来るのでWebに不慣れな方でも取っ付き易い印象はありますね。動...
オートコンプリートの住所検索の為のスクリプト・「Algolia Places」
Algolia Places Algolia Placesはオートコンプリートな住所検索の為のスクリプトです。上デモのようにOpenStreetMapを使って検索対象を世界にする事が可能です。高速さが売りのようですね。導入も割と簡単で...
リアルタイムにグラフを描けるチャートライブラリ・「Epoch」
Epoch Epochはリアルタイムにグラフを描くチャートライブラリです。頻繁に更新されるような時系列データをSVGを使って可視化する為の汎用ライブラリとして公開されています。D3.jsに依存するみたい。スタイリングもし易いように設計...
ReactやReact Nativeを使って作られたWebアプリをコレクションしている・「Made with React」
Made with React Made with ReactはReact.jsやReact Nativeを使ったWebアプリケーションを収集、ギャラリー形式で紹介しているWebサイトです。まださほど数はそろっていませんが、基本的には...
Githubのようなスタイルのコードスニペットやメモ等を作成、公開出来るオープンソースソフトウェア・「Gruik」
Gruik Gruikはブラウザで動作するシンプルなメモアプリです。Githubのようなスタイルで、コードスニペットやチュートリアルなどのメモに利用出来るように作られたようです。よくあるメモアプリのように公開/非公開の設定も可能です。...
ピンチやスワイプ、タップなどのジェスチャーを検出するライブラリ・「zingtouch」
zingtouch See the Pen ZingTouch | Bubble Swipe by ZingChart (@zingchart) on CodePen. zingtouchはタッチデバイスのジェスチャーを検出するライ...
UIコンポーネントに特化したCSSフレームワーク・「modulr.css」
modulr.css modulr.cssはUIコンポーネントに特化したCSSフレームワークです。多彩で豊富なカラーパレット、テキストの装飾、細かく設定できるグリッド、様々な種類のナビゲーション、各シーンに対応出来るボタンスタイル、フ...
モバイルファーストなヘルプデスク構築のためのオープンソースソフトウェア・「Helpy」
Helpy Helpyはモバイルファーストなヘルプデスク構築のためのソフトウェアです。OSSとしてソースコードが公開されています。Zendeskやdesk.comのような有料サービスの代替として提供する事を目指しているとのことです。ヘ...
個人向けのPHP製オープンソース資金管理ツール・「Economizzer」
Economizzer Economizzerはオープンソースの資金管理ソフトウェアです。PHPフレームワークのYiiをベースに構築されたパーソナルファイナンスマネージャーシステム、との事です。要は家計簿・・みたいなシステムっぽいです...
Web制作者向けのツールを多数揃えている・「Dans Tools」
Dans Tools Dans ToolsはWeb制作者向けのオンラインツールを複数揃えて公開しているWebサイトです。JavaScriptやCSS、JSONの圧縮や整形、ファイルのコンバーター、diffツール、.htaccessのコ...
タスク管理サービスのTaskuluのシステムをベースにしたOSSのヘルプデスクツール・「Deskulu」
Deskulu Deskuluはタスク管理サービスのTaskuluが開発、公開しているヘルプデスク・チケットシステムです。TaskuluｍのシステムをベースにDrupal 7を使って設計されているとの事。Taskuluは有料サービスで...
電子カルテや医師情報の管理など、病院向け情報管理システムのオープンソースソフトウェア・「HospitalRun」
HospitalRun HospitalRunは電子カルテや医師情報の管理などを行える病院向けの情報管理システムです。Ember.jsが使われており、本システムもOSSとして公開されています。主に発展途上国での利用を目的としているそう...
エリア毎のデータを地図で可視化、SVG等でダウンロード出来るOSS・「datamaps.co」
datamaps.co datamaps.coはエリア毎の数値などのデータを地図で可視化、SVGやPNGなどのフォーマットでダウンロード出来るようにするソフトウェアです。オープンソースとしてソースコードが公開されています。例えば世界地...