モニタサイズ次第で入りきらない部分だけスライドインさせるレスポンシブなメニュースクリプト・「okayNav」 okayNav okayNavはモニタサイズ次第では入りきらない部分をスライドインするようにしてくれるスクリプトです。jQueryに依存します。メニューの種類が多いコンテンツや動的、増え続ける等、ケースによってはよく紹介されているよう...2016.09.11 | 10時46分01秒
Twitter公開の絵文字のtwemojiをFont Awesomeライクに使える・「Twemoji Awesome」 Twemoji Awesome Twemoji AwesomeはTwitterがOSSとして公開している絵文字、twemojiをFont Awesomeライクに使えるようにする為のプロジェクトです。カナダに在住されている日本の方(El...2016.09.07 | 9時59分16秒
テキストにCSS3のアニメーションエフェクトを付与するスクリプト・「txt.wav」 txt.wav txt.wavは上記のようにテキストにCSS3ベースのアニメーションエフェクトを付与するスクリプトです。非依存型で単体で動作しますが、基本的にJavaScriptは1文字ずつ包括するシンプルなもので、エフェクトはkey...2016.09.06 | 10時02分11秒
CSSをショートハンドにしてくれるジェネレーター・「SHRTHND」 SHRTHND SHRTHNDはCSSをショートハンドにしてくれるジェネレーターです。ショートハンドにする事で軽量化、可読性の向上に繋がります。左カラムにコードを入力すれば右カラムにショートハンドにしたCSSショートハンドが出力されま...2016.09.03 | 10時33分08秒
モバイルサイトの為の軽量でフレキシブルなCSSフレームワーク・「Mobi.css」 Mobi.css Mobi.cssはモバイルサイトの為のCSSフレームワークです。よくあるモバイルファーストよりもよりモバイルにフォーカスして作成されているようで、PCサイトではQRコードを表示するスペースを用意出来るclassが用意...2016.09.02 | 10時32分31秒
小規模なプロジェクトのための軽量でミニマルなCSSフレームワーク・「Siimple」 Siimple Siimpleは軽量、ミニマルなレスポンシブWebデザイン対応のCSSフレームワークです。フロントエンド開発のキックスタートに貢献出来るように作成したそう。フォームやテーブル、アラート、ボタンやグリッドなど必要最低限の...2016.08.31 | 10時45分38秒
Bootstrapでのtableにソートやページネーション、検索機能等を付与するスクリプト・「jQuery Bootgrid」 jQuery Bootgrid jQuery BootgridはBootstrap上でのtableを多機能にするスクリプトです。jQueryに依存します。thにカスタムデータ属性を与える必要がありますが、tableをthの内容毎にソー...2016.08.30 | 10時25分41秒
基本的な部分だけ抑えたモダンでミニマルなCSSリセット・「minireset.css」 minireset.css minireset.cssは基礎部分だけ抑えたモダンなCSSリセットです。各見出しのフォントサイズのリセット、ブロック要素のmargin、paddingリセット、全要素へのbox-sizingの導入、各メデ...2016.08.29 | 10時14分38秒
GithubやGitLabでIDEのようにファイルをツリー表示するChromeエクステンション・「Octotree」 Octotree OctotreeはGithubやGitLabでファイルをツリー表示するChromeエクステンションです。FirefoxやOperaの拡張もあります。上図のようにIDEライクなツリー表示にしてくれるのでファイルへのアク...2016.08.26 | 10時23分44秒
JavaScriptのTipsを不定期で紹介する・「JS Tips」 JS Tips JS TipsはJavaScriptのちょっとしたヒントをコードとともに不定期で紹介するWebサイトです。基本的にはバニラなスクリプトが紹介されており、コードはGithubでも公開されています。8/23現在で58ほど。...2016.08.23 | 10時58分09秒
要素の背景に水面を指でなぞるようなエフェクトを付与できるスクリプト・「jQuery Ripples」 jQuery Ripples ※Resultを押せば別の画像が表示されます。 jQuery Ripplesは要素に揺れる水面っぽいエフェクトを付与できるスクリプトです。WebGLで任意の要素に指定した画像に上記のようなエフェクト...2016.08.19 | 10時14分40秒
オープンソースでセキュアなグループチャットアプリ・「Wire」 Wire Wireはセキュアなグループチャットアプリです。音声、ビデオ、テキストチャットに対応しており、Wire上でのデータは暗号化されるため、セキュアなチャットが可能、との事。グループは128人まで追加可能みたいです。オープンソース...2016.08.16 | 10時18分46秒
スクロールに応じて要素をCSS3で手軽にアニメーションさせられるライブラリ・「Kissui.scrollanim」 Kissui.scrollanim Kissui.scrollanimはスクロールに応じて要素をアニメーションしながら表示させるためのライブラリです。オシャレ感ただようWebページに大抵あるあのエフェクトを手軽に付与しよう、という...2016.08.14 | 10時25分18秒
iOSやAndroid、macOS向けのシンプルなメモアプリ、Simplenoteがオープンソース化 Simplenote SimplenoteはWordPressを提供するAutomattic社製の同期できるノートアプリです。このノートアプリがGPLライセンスの元、オープンソースとして公開されました。iOS、Android、Wind...2016.08.12 | 10時30分36秒
Webページのパフォーマンスチェックの結果をヒートマップで表示するブックマークレット・「Perfmap」 Perfmap PerfmapはWebページのパフォーマンスチェックの結果をヒートマップで表示してくれるブックマークレットです。リソースが表示されるタイミングをResource Timing APIでチェック、それぞれに表示されるまで...2016.08.10 | 9時29分53秒
inputに任意の接頭語を付与するスクリプト・「jquery-plugin-input-prefix」 jquery-plugin-input-prefix jquery-plugin-input-prefixはinputに任意の削除できない接頭語を付与するスクリプトです。jQueryに依存します。placeholder属性と違い、テキ...2016.08.09 | 10時07分34秒
各ソーシャルサイトの共有ボタンを作成、コードをコピー出来るOSS・「Sharingbuttons.io」 Sharingbuttons.io Sharingbuttons.ioはTwitterやFacebook、Google+等のソーシャルサイトへの共有ボタンを作成、コードを吐き出してくれるツールです。これくらいならよく見かけますが、こち...2016.08.05 | 10時20分33秒
高機能で非依存のlightboxスクリプト・「lightgallery.js」 lightgallery.js lightgallery.jsは高機能で非依存型のlightbox実装のためのスクリプトです。レスポンシブWebデザイン対応、タッチデバイス対応、自モジュール型、YoutubeやVimeo、HTML5 ...2016.08.04 | 10時45分54秒
レスポンシブWebデザインにも対応できるオープンソースのプロトタイピングツール・「PrototypeBrewery.io」 PrototypeBrewery.io PrototypeBrewery.ioはRWD対応のプロトタイピングツールです。直感的に操作可能なインターフェースで独自のCSS、JavaScriptを書くことも出来ます。ビューモードでは各デバ...2016.08.01 | 9時35分19秒
Web制作のスピードを早める為に作られたモジュール式の軽量CSSフレームワーク・「BlazeCSS」 BlazeCSS BlazeCSSはモジュール形式のモバイルファーストなCSSフレームワークです。Web製作スピードを早めるために設計、公開されたそう。各コンポーネントは必要なものだけ該当のCSSを読み込むモジュール式でモノリシックな...2016.07.30 | 10時41分54秒
オートコンプリートの住所検索の為のスクリプト・「Algolia Places」 Algolia Places Algolia Placesはオートコンプリートな住所検索の為のスクリプトです。上デモのようにOpenStreetMapを使って検索対象を世界にする事が可能です。高速さが売りのようですね。導入も割と簡単で...2016.07.29 | 9時30分12秒
リアルタイムにグラフを描けるチャートライブラリ・「Epoch」 Epoch Epochはリアルタイムにグラフを描くチャートライブラリです。頻繁に更新されるような時系列データをSVGを使って可視化する為の汎用ライブラリとして公開されています。D3.jsに依存するみたい。スタイリングもし易いように設計...2016.07.26 | 10時00分34秒