ZooMove - 画像をスムーズに拡大するJavaScriptライブラリ
最近は画像の解像度が上がっており、撮影した写真のまま公開するととても巨大になってしまいます。そこで幅を縮めるのですが、あまり小さくすると折角の写真が見えづらくなってしまいます。 そこで必要に応じてズームするライブラリが便利です。今回はそんなライブラリのZooMoveを紹介します。 ZooMoveの使い方 最初の表示です。3つとも同じサイズです。 Image1はマウスオーバーするとちょっとだけ大きくなります。 Image2は一気に拡大されます。 Image3は枠を飛び出して拡大されます。 実際にマウスオーバーしているところです。 ZooMoveで見ると単にズームと言っても色々あるのが分かります。Image2は一気にズームするので、虫眼鏡のような使い方が良さそうです。Image3のズーム方法は面白いですが、使い方が難しいかも知れません。 ZooMoveはjQuery/JavaScript製のオ
lufo - 最近選択したドロップダウンの項目を優先表示
MOONGIFTはオープンソース・ソフトウェアを紹介するブログです。2021年07月16日で更新停止しました Webのフォームで何度も同じドロップダウンの項目を選択していると、項目を一番上に持っていって欲しいと考えるでしょう（都道府県、国名など）。しかし自分にとっての優先項目と他のユーザにとっての優先項目は異なります。 そこで使ってみたいのがlufoです。HTML5を使うことでスマートに解決しています。 lufoの使い方 lufoは任意のドロップダウンに対して設定できます。jQueryが必須です。 はじめは普通のドロップダウンですが、一回選択するごとに最近選択した項目としてリストの上に出るようになります。これは選択した項目をlocalStorageに残しておくことで、次に表示した際に再現してくれます。これならば個人のブラウザにしか依存せず、かつ自分はどんどん使い勝手が良くなるでしょう。 l
JQuery Terminal Emulator Plugin - jQueryも使えるjQuery製のターミナルエミュレータ
MOONGIFTはオープンソース・ソフトウェアを紹介するブログです。2021年07月16日で更新停止しました Webサイト上でターミナル風インタフェースを提供するサービスが幾つかあります。クラウドサーバ系サービスでは当たり前になっていますし、プログラマー向けのサービスでは幾つか見かけます。 今回はちょっと色の違うソフトウェアを紹介します。JQuery Terminal Emulator Pluginはその名の通り、jQueryが使えるターミナル風UIです。 JQuery Terminal Emulator Pluginの使い方 jQueryが使えるので、こんな感じにDOMにアタッチできます。 もちろん書き換えもできます。 JQuery Terminal Emulator Pluginはあくまでも自分のWebブラウザ上だけの処理ですが、jQueryを使ってデータの書き換えもできます。DevT
jQuery-lock - 編集防止に。コンテンツをロック！ MOONGIFT
開発者ツールを使ってHTMLを書き換えるのは簡単にできます。スクリーンショットを撮る時に余計な要素を消したり、文字を書き換えてしまうことだってできます。通常は自分の見ている範囲でしか使えませんが、悪用することもできます。 例えばフォームの書き換えが考えられます。送れないはずのデータを送りつけることもできるでしょう。そうしたイタズラから自分のサイトを守れるのがjQuery-lockです。 jQuery-lockの使い方 ロックした要素です。 編集しようとしますが、元に戻ってしまいます。 jQuery-lockは元々のコンテンツを覚えておき、書き換わったタイミングで元に戻しているのだと思われます。ユーザに編集されなくないというサイトもあると思いますので、そういう時に使えるでしょう。 jQuery-lockはjQuery/JavaScript製のオープンソース・ソフトウェア（Apache Lic
Cash - サイズが1/10なjQuery代替 MOONGIFT
jQueryは古い、重いなどと言われつつも今なお一番使われているライブラリなのではないでしょうか。それだけ便利で使い勝手が良いということです。ただしみんなが全機能を使っているかと言われると怪しい気がします。 使っている機能がDOM操作ばかりなのであればCashに切り替えても良いかもしれません。Cashは軽量なjQuery代替です。 Cashの使い方 Cashはミニファイ+Gzipで3.5Kとなっています。jQueryの1/10です。なお、非圧縮の場合で20.6K、これはjQuery（287K）の1/14程度になります。サイズが小さいのは大事ですが、何よりコードが理解しやすいというのが良いのではないでしょうか。 サポートしている機能としては以下のメソッドになります。 addClass css data height off attr add removeData innerHeight on
jfMagnify - 虫眼鏡風UIで写真を拡大
MOONGIFTはオープンソース・ソフトウェアを紹介するブログです。2021年07月16日で更新停止しました 最近の写真は高解像度になっており、単純に表示しただけでは細かい部分まで確認できなくなっています。折角撮影した写真について、詳細な部分まで見たい、見て欲しいと思うことはないでしょうか。 そこで使ってみたいのがjfMagnifyです。虫眼鏡ツールを使ってごく小さい部分まで表示できるライブラリです。 jfMagnifyの使い方 デモです。マウスでルーペ部分をドラッグで移動できます。 新しいと思ったのはルーペの横にある拡大/縮小ボタンです。 拡大するとより細かく確認できます。 寝ている男性の顔も確認できました。 jfMagnifyは単純に表示している写真を拡大しているだけですが、Retinaディスプレイなどで2倍解像度の写真を表示している場合はより細かく確認できそうです。また、jQuery
marginotes - 文章の横にすてきな注釈を
MOONGIFTはオープンソース・ソフトウェアを紹介するブログです。2021年07月16日で更新停止しました 本を読んでいると、左右に余白があって、必要に応じて単語の説明が記載されていることがあります。注釈を本の最後にまとめて載せているのに比べると分かりやすく、読みやすいのではないでしょうか。 そんな効果をWeb上で実現してくれるのがmarginotesです。Webらしく、よりインタラクティブになっています。 marginotesの使い方 marginotesは次のように指定します。descという要素を使います。 <span desc="The rainiest place in Europe. Probably. Maybe.">Brión</span> 注釈はマウスオーバーで表示されます。リンクとは別で下線が入っている部分が説明対象です。 右側に出すこともできます。 marginote
画像に簡単にぼかしをかけられるプラグイン「Background Blur」 | ライフハッカー・ジャパン
「Background Blur」は画像に簡単にぼかしをかけられるプラグインです。jQueryのプラグインとして提供されています。IE6など古いブラウザやiOSのSafari、Androidのブラウザなどモバイルにも対応していることが特徴。 以下に使ってみた様子を載せておきます。まず「Background Blur」へアクセスしましょう。導入方法はプラグインをダウンロードしてCSSとぼかしの設定をするだけ。 サンプルが提示されていますが、このように画像に対してぼかしをリアルタイムにかけることができます。IE6など古いブラウザはぼかすときのアニメーションが効きませんが、ぼかし自体には問題ない模様。スマートフォンのブラウザにも対応しているので導入しやすいですね。画像をぼかしたいときにぜひご活用ください。 Background Blur （カメきち）
サイトに手軽に目次機能を付加できるjQueryプラグイン「TOC」
ページに目次があると内容がある程度わかって分かりやすいこともあります。 WordPressとかだと、目次を付加するには、Table of Contents Plusとかが定番です。 先日、そういった目次機能を自由度も高く設定できる「TOC」というjQueryプラグインを使ってみたところ、自前で実装するのに結構使い勝手が良さそうだったので紹介です。 TOCとは TOC（jQuery Table of Contents Plugin）は、WEBページ上に目次を自動生成するjQueryプラグインです。 ちなみに、サンプルとして、このページの左側でも利用しています。（※モバイルでは非表示になっています） このTOCプラグインの特徴は以下です。 カスタマイズの自由度が高い目次をクリックするとスムーズにスクロール移動する現在見ているセクションをハイライト表示スクリプトが軽量スムーズなスクロール移動や、
jQuery-KingTable - 業務システムに使えそうなテーブルライブラリ MOONGIFT
Webベースで業務システムを構築した場合、必ず必要になるのが一覧表です。そして、そこにExcel並の機能が求められます。ソートであったり、フィルタリング、ページネーションが欲しいと要望が出るはずです。 それらを一から自作するのは大変です。そこで今回はjQuery-KingTableを紹介します。 jQuery-KingTableの使い方 jQuery-KingTableのデモです。ページネーション、検索、並び替えができます。 並び替えると小さなアイコンが出ます（今回はGreenの横にアイコンがあります）。 カラーテーマを変更しました。 検索するとヒットした部分がハイライトします。 表示するカラムを絞り込めます。 表示をテーブルではなくカードに変更しました。 さらにパネルにも。 フィルタリング条件の追加もできます。 jQuery-KingTableは多機能なので、業務要件によってはこれで十分
jQuery formBuilder - jQueryによる動的フォームが作成
MOONGIFTはオープンソース・ソフトウェアを紹介するブログです。2021年07月16日で更新停止しました マーケターの人たちはアンケートフォームを数多く作成します。そんな時に一回一回プログラマに依頼して作成してもらうのでは時間もかかりますし面倒です。 そこで使ってみたいのがjQuery formBuilderです。jQuery formBuilderを使えば自由にフォームが作れるので、後はそのデータを保存できるようにすればいいだけです。 jQuery formBuilderの使い方 jQuery formBuilderのデモサイトです。項目は自由にドラッグ&ドロップできます。 編集で細かいところを直せます。 リストなどは項目を設定できます。 実際のレンダリング結果を確認できます。 jQuery formBuilderは汎用的なフォームができますので、後はそのデータをJSONなりでまとめ
You-Dont-Need-jQuery - jQueryを使わない書き方教えます
MOONGIFTはオープンソース・ソフトウェアを紹介するブログです。2021年07月16日で更新停止しました jQuery、便利ですよね。すぐに使ってしまうのですが、サイズは肥大化していますし、実際に使うのはそのごく一部でしかなかったりします。 そこで参考にしたいのがYou-Dont-Need-jQueryです。その名の通り、jQueryを使わない標準的な記法を教えてくれるプロジェクトです。 You-Dont-Need-jQueryの使い方 You-Dont-Need-jQueryはソフトウェアというわけではなく、READMEの中で説明をしてくれます。例えばセレクタの書き方。 $('selector'); // ↓ document.querySelectorAll('selector'); クラスを指定する書き方。 $('.class'); // ↓ document.querySele
マウスオーバーで画像にイフェクト·Adipoli MOONGIFT
Adipoliはマウスオーバーで画像に表示イフェクトを加えるJavaScriptライブラリです。 jQueryを使って、マウスオーバー時に画像にイフェクトを加えられるのがAdipoliです。ギャラリーや機能の紹介などで使うとインパクトがありそうです。 何もしていない時の表示。下の方の画像は色々問題がありそうなのでぼかしています。 マウスオーバー。白黒だった画像に色がつきました（実際には逆だと思いますが）。 こちらはマウスオーバーで拡大表示します。 掲載すると問題がありそうな画像が多いのが残念ですが、Adipoliではその他20種類を越えるイフェクトが実現できます。スライドダウン、ボックスなど様々な効果を使うことで画像を効果的にアピールできそうです。 AdipoliはjQuery/JavaScript製、MIT Licenseのオープンソース・ソフトウェアです。 MOONGIFTはこう見る
jQuery/CSS3でPath風メニューを·Pie Menu MOONGIFT
Pie MenuはPathのメニューに似たUIをjQueryで再現したライブラリです。 人気のあるiOSアプリのUIはすぐに真似したモックアップが登場します。Pathもその一つです。流れるようなUIはもちろん、赤いプラスボタンのメニューが人気です。Pie Menuはそんなメニュー表示をjQuery/CSS3で再現したライブラリです。 赤いボタンを押します。 アニメーションがあってメニューが表示されます。 パラメータを変更して表示をカスタマイズできます。 密着版。 デモ動画です。 デスクトップ版でPie Menuを採用したとしてもなかなか使い方が分からないかもしれませんが、PhoneGapと組み合わせると話が違ってきそうです。スマートフォン向けサイトで使ってみても面白いかもしれません。 Pie MenuはjQuery/JavaScript製のソフトウェア（ソースコードは公開されていますがライ
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
GitHub - RobertoPrevato/jQuery-KingTable: A jQuery plugin for administrative tables that are able to build themselves, on the basis of the input data.
Site Under Maintenance
