コーディング不要でWebサイトのテンプレートを作成する為のオープンソースソフトウェア・「GrapesJS」
GrapesJS GrapesJSはコーディングせずに直感でWebサイトのテンプレートを作成出来るエディタです。OSSとしてソースコードが公開されています。JS製でjQueryにのみ依存しています。必要なコンテナやテキスト、画像等をマ...
Resource - Webディレクター向け
軽量でカスタマイズ性を重視したCSSフレームワーク・「Reindeer.css」
Reindeer.css Reindeer.cssは軽量でカスタマイズ性を重視したCSSフレームワークです。まだ触っていませんがパッと見、UIもシンプルでよさ気ですね。現在は必要なコンポーネントが若干不足しているものの、後で追加するそ...
ブラウザで動くスプレッドシートの為のスクリプト・「jQuery.sheet」
jQuery.sheet jQuery.sheetはブラウザで動くスプレッドーシートの為のスクリプトです。jQueryに依存しており、OSSとして公開されています。HTML、JSON、XMLもサポートされています。他にもこの手のものは...
Webページにドローツールを埋め込むためのスクリプト・「Drawingboard.js」
Drawingboard.js Drawingboard.jsはWebページにおえかきツールを埋め込むためのスクリプトです。Canvasベースで出来ており、コントロールに必要な機能も一通り揃っている印象です。ある程度他のライブラリにも...
モバイルアプリ向けのランディングページテンプレート・「Takeoff」
Takeoff Takeoffはモバイルアプリ向けのランディングページのテンプレートです。よく配布されているような、いわゆるWebページのテンプレは使わないのですけど、こちらはスタイルを初期化すれば使いやすそうだったので備忘録として。...
レスポンシブWebデザイン対応のシンプルなイベントカレンダーを実装出来るスクリプト・「monthly.js」
monthly.js monthly.jsはシンプルなイベントカレンダー実装の為のスクリプトです。jQueryに依存しています。レスポンシブWebデザインにも対応しており、デイトピッカーとして利用する事も可能となっています。少し触って...
FlexboxベースのモダンなCSSフレームワーク・「Bulma」
Bulma BulmaはFlexboxベースのモダンなCSSフレームワークです。レスポンシブWebデザインに対応しており、オープンソースとして公開されています。カラースキームもいいセンスしてますね。これはなかなか使いやすそうです。 ...
GeoJSONをブラウザ上で作成できるOSS・「geojson.io」
geojson.io geojson.ioはGeoJSONをブラウザで編集、作成出来るWebツールです。オープンソースとしてもコードが公開されています。GeoJSONはGoogle Map APIでもサポートされている規格ですので馴染...
Instagramライクな画像フィルターを簡単に設定可能でCSSコードも出してくれる・「cssFilters」
cssFilters cssFiltersはInstagramライクな画像加工をCSSで施せるWebアプリです。画像はUnsplashから引っ張るか任意の画像をアップロードします。CSSgramが使用されており、プレビューを見ながらス...
任意の画像をレスポンシブに対応したHTMLタグや画像を生成するジェネレーター・「Responsive Image Breakpoints Generator」
Responsive Image Breakpoints Generator Responsive Image Breakpoints Generatorは任意の画像をRWD対応にする為のジェネレーターです。srcset属性による画像...
JavaScript製のオープンソースなCMS・「CMS.js」
CMS.js CMS.jsはJavaScript製のCMSです。オープンソースとして公開されています。サーバーサイド・スクリプトの援助なしにクライアントサイドでWebアプリケーションを構築する事が出来る、との事です。jekyllを意識...
サウンドインタラクションを追加する為のシンプルなJavaScriptライブラリ・「Loud links」
Loud links Loud linksはWebコンテンツにサウンドインタラクションを追加する為のシンプルなJSライブラリです。audio属性を使うみたい。非依存型で軽量なのは良いですね。音源を用意して特定のclassとカスタムデー...
CSSのみで縦の年表のようなタイムラインを作れる・「Timelined」
Timelined TimelinedはJavaScript不要でタイムラインを作成出来るスタイルシートです。CSSのみで縦の年表を作成出来ます。カスタマイズ性も優秀で、アイコンの有無や吹き出し、アイコンのサークルカラー、タイムライン...
大量のパブリックドメインな写真素材を探せる・「FindA.Photo」
FindA.Photo FindA.PhotoはCC0な写真素材を探せるWebサービスです。色やシーン、配布元サイトなどからもコマンド検索可能みたい。動作も割と軽いので結構使いやすい印象でした。素材のページではその写真のカラースキーム...
自動でアクセシビリティのチェックを行うオープンソースツール・「pa11y」
pa11y pa11yは自動で任意のWebサイトのアクセシビリティチェックを行ってくれるツールです。OSSとして公開されています。監視したいWebサイトを設定すると毎日チェック、スコアを出してレポートを作成してくれます。30日間のレポ...
RubyやPython、Node.js、PHPやGoなど様々なコードスニペットをブラウザで実行テストできる・「BitRun」
BitRun BitRunは様々なプログラミング言語のコードスニペットを実行テスト出来るWebアプリです。対応言語はタイトルで上げたものの他にElixir、bash、Rust、C、Swift、Dart、CoffeeScroptなどなど...
任意の画像からカラースキームを生成する・「ColorFavs」
ColorFavs ColorFavsは任意の画像からカラースキームを生成するツールです。画像はアップロードとURLの選択肢がある他、ベースカラーと色相、明度を指定してランダムに生成する事も出来ます。生成されたカラースキームはシェアも...
シンプルなスプレッドシート実装の為のスクリプト・「ipgrid」
ipgrid ipgridはシンプルなスプレッドシート実装の為のスクリプトです。jQueryに依存しています。Googleスプレッドシートのように扱えるそうですが、まだ関数はいくつかしかテストしていませんのでクローンと言えるかどうかは...
Codepenで2015年に話題になった投稿TOP100をまとめた・「MOST The HEARTED 2015」
MOST The HEARTED 2015 MOST The HEARTED 2015はCodepenで話題になった投稿TOP100をランキング化したWebページです。最もグッと来た投稿、コードを紹介しています。心に来たコード＝実際に...
Web標準の16色を綺麗なカラーパターンにする為のCSS・「COLORS」
COLORS COLORSはCSS2.1で設定されている標準カラーを少し変えて綺麗なカラーパターンにする為のCSSです。17色のうち、whiteを除く16色に手を加えてみたよ、みたいなの。W3Cが標準とするには理由があると思いますので...
MarkdownやLessにも対応したオープンソースのjsFiddleライクな軽量コードテストツール・「Jotted」
Jotted JottedはjsFiddleライクにブラウザでJSやHTML、CSSのコードを実行テスト出来るツールです。OSSとしてソースコードが公開されています。動作は非常に軽量でMarkdownやLess、CoffeeScrip...
Hacker Newsライクなオープンソース専門のニュースサイト・「OSwatch」
OSwatch OSwatchはHacker NewsライクなOSS専門のニュースアグリゲーションサイトです。Hacker Newsライクというか、厳密にはHacker Newsクローン（だと僕は思ってる）のOSSであるLobster...