非依存型で軽量、機能的なJavaScript製のモダンオーディオライブラリ・「howler.js」 howler.js howler.jsは非依存型のバニラなJavaScriptオーディオライブラリです。クロスプラットフォームで動作、多様なコーデックのサポート、オーディオのスプライトとコントロール、オートキャッシュによるパフォーマン...2016.07.22 | 10時25分22秒
Instagramの写真をダウンロードする為のブックマークレット・「[instantgram]」 はInstagramの写真をダウンロードする為のブックマークレットです。Instagramの投稿ページでブラウザに登録した本ブックマークレットを使えば別窓で写真が表示されますので後は右クリックで保存するだけ。それ以上でも以下でもあり...2016.07.18 | 9時51分05秒
ピンチやスワイプ、タップなどのジェスチャーを検出するライブラリ・「zingtouch」 zingtouch See the Pen ZingTouch | Bubble Swipe by ZingChart (@zingchart) on CodePen. zingtouchはタッチデバイスのジェスチャーを検出するライ...2016.07.11 | 8時59分57秒
h1やh2などの見出しに合わせてページの目次(TOC)を自動作成するスクリプト・「Tocbot」 Tocbot Tocbotはページ内の見出しを元に、目次(table of contents)を自動作成するスクリプトです。Tocifyに触発されて作成したそうですが、1つの違いはjQueryに依存せず、バニラなスクリプトで動作する点...2016.07.03 | 11時20分00秒
textareaに行数を自動付与するスクリプト・「JQuery LinedTextArea」 JQuery LinedTextArea JQuery LinedTextAreaはtextareaに行数を自動付与するスクリプトです。jQueryに依存します。textareaに新たに書き込んでも行数は表示されます。用途は多くはなさ...2016.07.02 | 11時43分02秒
ブラウザで動くシンプルなオープンソースのテキストエディタ・「textpad」 textpad textpadはOSSのシンプルなテキストエディタ。ブラウザ上で動作します。よくあるエディタのようにWYSIWYGは無く、エクスポートもtxtファイルのみです。保存はlocalStorageが使われます。基本的にはそれ...2016.07.01 | 10時40分51秒
動画をフルスクリーンで背景にするスクリプト・「Vidage.js」 Vidage.js Vidage.jsはフルクリーンで動画を背景にするスクリプトです。スマフォなどのモニタサイズが狭いデバイスなどでは画像が背景になるようにするようです。ファイルサイズは圧縮版で4.7kbほど。非依存型なので単体で動作...2016.06.28 | 10時33分01秒
軽量でシンプル、非依存なJavaScriptデイトピッカー・「flatpickr」 flatpickr flatpickrは軽量でシンプル、パワフルなJavaScriptデイトピッカーです。非依存型ながら軽量なコードで実装されていますが、機能はなかなか充実しています。同じclass名で複数フォームに対応できるのも...2016.06.20 | 10時57分15秒
DOM操作やイベント等、jQueryに影響を受けた軽量なライブラリ・「Umbrella.js」 Umbrella.js Umbrella.jsはjQueryに影響を受けて作られた軽量ライブラリ。DOM操作やAJAX周り、イベントなど、jQueryの機能を持ちながら圧縮版で3KBほどと軽量なライブラリを目指しているようです。だいぶ...2016.06.17 | 10時57分49秒
曜日ごとに任意のメッセージを表示するだけのシンプルなスクリプト・「Daily Messages」 Daily Messages Daily Messagesは曜日ごとに任意のメッセージを表示するスクリプトです。jQueryが使用されています。Basecampにインスパイアされて作ったそうで、特に特徴もなく、単純に毎週別のメッセージ...2016.06.09 | 10時31分17秒
30行ほどのVanillaなスクリプトでExcelっぽいものを作る・「Tiny Excel-like app in vanilla JS」 Tiny Excel-like app in vanilla JS Tiny Excel-like app in vanilla JS。プレーンなスクリプト30行でExcelのような表計算が出来るシートを作成する、というもの。例えば=...2016.06.03 | 10時39分53秒
Vanillaなスクリプトを沢山コレクション、紹介ししている・「Vanilla List」 Vanilla List Vanilla ListはプレーンなJavaScriptをコレクションしているWebサイトです。Github等で公開されている多様なバニラスクリプトを収集、紹介してくれています。それぞれのスクリプトは動作アン...2016.06.01 | 9時53分19秒
タッチデバイスにhoverっぽい機能を付与するスクリプト・「Hover on Touch」 Hover on Touch Hover on TouchはiPhoneやAndroidのようなタッチデバイスにPCサイトのhoverっぽい機能を付与する為のスクリプトです。上図はフリックしているところですが、タッチしている部分に変化...2016.05.25 | 10時52分22秒
複雑なtableでも対応できる、セルがどの列と行に属しているかをハイライトするスクリプト・「jquery-gettable」 jquery-gettable jquery-gettableはtableのセルがどの列と行にあるかをハイライトしてくれるスクリプトです。jQueryに依存しています。上図のようにセル上にマウスを持って行くと、そのセルが属する行と列が...2016.05.23 | 10時01分22秒
HTMLで書いたtableのデータをプレーンテキストやCSV、XLSなどのフォーマットでエクスポート出来るスクリプト・「TableExport.js」 TableExport.js TableExport.jsはtableに書いたデータをCSVやxls、xlsx、プレーンテキスト等のフォーマットでエクスポート出来るようにするスクリプトです。jQueryとFileSaver.jsを使用...2016.05.16 | 11時11分04秒
jsfiddleのようなテストツールをオフラインでも利用出来るChromeエクステンション・「Web Maker」 Web Maker Web Makerはjsfiddleライクな実行テストツールを使えるようにするChromeエクステンションです。オフラインでも利用できるのが主な特徴のようです。jsfiddleライク、と言っても他ライブラリを手軽に...2016.05.12 | 10時21分30秒
Webサイトのテーマカラーをユーザーが選べるようにする為のスクリプト・「jquery Theme Switcher」 jquery Theme Switcher jquery Theme SwitcherはWebサイトのテーマカラーを閲覧しているユーザーが選択できるようにする為のスクリプトです。jQueryに依存しています。通常のWebサイトではあま...2016.05.07 | 10時41分18秒
複数選択可能なselect要素でoptionを選択しやすくするスクリプト・「PopSelect」 PopSelect PopSelectはselect要素でoptionを選択しやすいUIにする為のスクリプトです。jQueryに依存します。上図のように、select要素にフォーカスするとoption要素がポップアップするので選択すれ...2016.04.30 | 10時15分09秒
可愛らしいスタイルのタイムピッカーを実装出来るスクリプト・「timedropper」 timedropper timedropperは可愛らしいスタイルのタイムピッカーです。jQueryに依存しています。アナログ時計に見立てたUIで時間をピック、フィールドに入力する事が出来ます。年月日等を入力管理出来るデイトピッカーで...2016.04.27 | 11時06分26秒
絵文字を簡単に追加出来るようにするスクリプト・「Emoji One Area」 Emoji One Area Emoji One Areaはコメント等に絵文字を簡単に挿入出来るようにするためのWYSIWYGエディタです。jQueryに依存しています。特定のUnicodeに沿った絵文字に置換してるみたいです。モバイ...2016.04.23 | 10時24分37秒
グリッドレイアウトのポートフォリオサイトを手軽に作成する為のシンプルなスクリプト・「gridfolio.js」 gridfolio.js gridfolio.jsはグリッドレイアウトのポートフォリオサイトを手軽に作成できるJavaScript製のジェネレーターです。gridfolio.jsにコンテナのタイトルやアイキャッチ、リンク先、スタイルや...2016.04.20 | 9時49分11秒
ツリー構造データを可視化するためのシンプルな非依存型スクリプト・「treeData.js」 treeData.js treeData.jsはツリー構造のデータを可視化する為のスクリプトです。シンプルな仕様で、単純に可視化するためだけのものとなっていますので他スクリプト等への依存もなく、コードも少なく実装も容易です。使い勝手は...2016.04.16 | 9時16分42秒