マウスの動きやスクロールなど、閲覧ユーザーのブラウザのビューポート状態を監視するスクリプト・「Tornis」 Tornis Tornisはマウスの動きやスクロールなど、閲覧ユーザーのブラウザのビューポート状態を監視するスクリプトです。シンプルで軽量、依存関係もなく、使いやすい設計となっています。 パララックスの為のスクリプトというわけで...2019.06.06 | 10時08分37秒
Bootstrap 4と互換性のある、120以上のコンポーネントを揃えたWeb開発キット・「Uix Kit」 Uix Kit Uix KitはBootstrap 4と互換性のある、120以上のコンポーネントを揃えたWeb開発キットです。CSSフレームワークではないとの事。 これ単体でも開発を始められるし、Bootstrap 4を使い慣れ...2019.06.05 | 10時18分22秒
Font Awesomeから派生したオープンソースのアイコンプロジェクト・「Fork Awesome」 Fork Awesome Fork AwesomeはFont Awesomeから派生したオープンソースのアイコンプロジェクトです。Font Awesomeのバージョン5あたりから、その方向性に疑問を感じ始めた製作者がFont ...2019.05.28 | 11時02分59秒
mediumライクなスタイルを提供するCSS・「medium.css」 medium.css medium.cssはmediumライクなスタイルを提供するスタイルシートです。タイポグラフィやレイアウト、各エレメントのスタイルなどをmediumのような見た目に出来る、というもの しっかりRWD対応にな...2019.05.25 | 10時11分58秒
任意の画像を解析し、支配的なカラーを抽出してくれるオープンソースのWebアプリ・「Color Palette」 Color Palette Color Paletteは任意の画像からその画像内で支配的な色(占める割合の高い色)を即抽出してくれるWebアプリです。OSSとしてソースコードも公開されています。 本ツールは映画のワンシー...2019.05.18 | 10時30分18秒
大学の学生や教授が共同で作った3000以上の絵文字を公開するオープンソースのemojiプロジェクト・「OpenMoji」 OpenMoji OpenMojiは学生53人と2人の教授が共同で進めているオープンソースの絵文字プロジェクトです。現在3000以上ものSVGアイコンが本プロジェクトのスタイルガイドに従い、一貫したスタイルで作成、公開されてお...2019.05.16 | 10時33分00秒
href=”mailto:”のリンクをクリックした際に選択式にするスクリプト・「mailgo」 mailgo mailgoは<a href="mailto:***">のようなmailtoリンクを、メーラw-立ち上げずにモーダルウィンドウを開いて選択式にするスクリプトです。少し前にMailtoUIというスクリプトの記事...2019.05.15 | 10時00分43秒
コンテキストメニューからドラッグ中のテキストのフォント情報を調査出来るオープンソースのChrome拡張・「Fontanello」 Fontanello Fontanelloは右クリックで表示されるコンテキストメニューからドラッグしているテキストのフォントの情報を調べられるChromeエクステンションです。従来のエクステンションのようにわざわざ起動したりブックマー...2019.05.14 | 10時12分07秒
d3.js v5をベースにしたチャートライブラリ・「Britecharts」 Britecharts Britechartsはd3.jsのv5をベースにしたチャートライブラリです。チャートとコンポーネントを簡単に直感的に組み合わせる事が出来るのだそうです。リユースブルであり、シンプルなAPIを特徴としているのだ...2019.05.13 | 10時07分39秒
Webページ内で未使用のCSSを高速で削除してくれるライブラリ・「DropCSS」 DropCSS DropCSSはWebページで読み込まれているCSS内から未使用のコードを削除してくれるライブラリです。高速で未使用CSSを削除したコードを表示してくれるのが特徴です。他ライブラリに依存せず単体で動作してくれます。 ...2019.05.11 | 10時02分16秒
textareaなどでTwemojiを手軽に選択できるようにするスクリプト・「Twemoji-Picker」 Twemoji-Picker Twemoji-PickerはTwitterがOSSとして公開している絵文字プロジェクト、Twemojiを手軽に選択できるようにするスクリプトです。jQueryに依存します。上サンプルのように、簡単に...2019.05.03 | 10時08分04秒
Laravelで作られたオープンソースのURL短縮アプリ・「UrlHum」 UrlHum UrlHumはLaravelフレームワークをベースに開発されたURL短縮ツールです。プライバシーの強化が強く意識されており、IPアドレスのハッシュ化やIPアドレスの匿名化などに加えて各URLのアナリティクス機能なども備わ...2019.05.01 | 10時10分37秒
mailtoリンクを使いやすいUIに変換するスクリプト・「MailtoUI」 MailtoUI MailtoUIはmailtoリンクを使いやすいUIに変換してくれるスクリプトです。href="mailto:tony.stark@example.com"といったコードでもOutlook等のメーラーを立ち上げず...2019.04.27 | 10時05分54秒
URLを指定すると自動でアクセシビリティチェックを行い、レポートを生成するオープンソースのデスクトップアプリ・「Koa11y」 Koa11y Koa11yはURLを指定すると、そのWebページのアクセシビリティチェックを行い、HTMLやCSV、MarkdownやJSON、XMLなどの形式でレポートを吐き出すオープンソースのデスクトップアプリです。基本的にはチェ...2019.04.26 | 9時51分18秒
プログラミングの知識不要でWebアプリとしても開発できるオープンソースのゲームボーイ用ゲーム開発アプリ・「GB Studio」 GB Studio GB Studioはプログラミングの知識不要でゲームボーイ用のゲーム開発が可能なOSSです。GUIツールとして提供されており、コードを書かずに開発が出来るように設計されています。ElectronベースでOS問わず動...2019.04.23 | 10時17分56秒
タッチデバイスにも対応可能な、リストのアイテムを並べ替えたりスワイプで削除できるようにするライブラリ・「Slip.js」 Slip.js See the Pen ZZRmaP by kachibito (@kachibito) on CodePen. Slip.jsはリストのアイテムの並べ替えやスワイプによる消去を可能とする非依存のシ...2019.04.22 | 10時01分13秒
jsfiddleやCodepenのようにブラウザでJavaScriptを実行テストできるオープンソースのWebアプリ・「Editor」 Editor EditorはjsfiddleやCodepenのようにブラウザでHTML/CSS/JSのコードを実行テストできるOSSです。emmetによるコード補完やLint機能、センターバーを動かす事でレスポンシブWebデザインの表...2019.04.17 | 10時29分08秒
JavaScript製のオープンソースなガントチャートライブラリ・「Frappe Gantt」 Frappe Gantt Frappe GanttはJS製のOSSなガントチャートライブラリです。サンプルのスケジューラーではタイムスケールはドラッグでチャートの移動や伸縮が可能で、クリックで詳細が表示されるようになっています。UIは...2019.04.14 | 9時59分02秒
任意の画像から美しいカラーパレットを自動生成、エクスポートできる・「ColorKitty」 ColorKitty ColorKittyは任意の画像から美しいカラーパレットを自動生成、PNGやJSON、SCSS、HEXなどでエクスポートできるWebアプリです。自動生成されますが、自己調整も可能で、画像上のカラーピッカーの役割の...2019.04.13 | 10時14分17秒
CMSやフレームワークとの統合を目的としたブロックベースのコンテンツエディタ・「Hyper Editor」 Hyper Editor Hyper EditorはCMSや各フレームワークとの統合を目的としたブロックベースのコンテンツエディタです。JS製で、バックエンドに依存しないのが特徴だそうです。JS製のエディタである事で、一方のCMSでは...2019.04.11 | 10時01分30秒
いろいろなWebサービスの退会プロセスの難易度や、方法、リンク等を共有するプロジェクト・「JustDeleteMe」 JustDeleteMe JustDeleteMeはWebサービスを退会するまでのプロセスの難易度をWebサービス毎に評価、退会の方法や退会する場所(URL)を共有するプロジェクトです。難易度は簡単、やや難しい、難しい、不可能の4つに...2019.04.10 | 10時33分01秒
軽量でレスポンシブ対応の、classを使わないCSSフレームワーク・「Water.css」 Water.css Water.cssは軽量でレスポンシブWebデザイン対応のCSSフレームワークです。classを使っていない為、セマンティックなHTMLのWebサイト制作に向いています。これといった装飾も無く、シンプルで見やすくす...2019.04.08 | 10時15分17秒