PatternFly - Red Hat製のWeb UIフレームワーク
HTMLは自由度が高い反面、何でも自分でイチから作らなければならないイメージがあります。そのためUI、JavaScriptフレームワークは貴重です。それらを使うことで効率を大幅に高められます。 今回紹介するPatternFlyはUIフレームワークで、Red Hat社によって開発されています。 PatternFlyの使い方 例です。データテーブル。 管理画面。グラフも多数用意されています。 スライダー。 カード。 コメント。 通知。 ウィザード。 グラフ。 フォーム。 日付ピッカー。 テキストボックスフィルター。 パンくず。 ページネーション。 アコーディオン。 アラートとバッジ。 ツリービュー。 PatternFlyはjQueryを使っており、企業などのWebシステム開発において活躍しそうです。ウィジェットやデザインのパターンも多数用意されていますので、管理画面の作成など、様々なシステムに
nanoJS - jQueryの代わりに使えるDOM操作ライブラリ
jQueryはもう使いたくないと思いつつ、使った方が楽になるという場面は多いです。Ajaxもその一つですが、Superagentやaxiosといった代替ライブラリを使うこともできます。そしてもう一つはDOM操作です。 DOM操作を素のJavaScriptだけで書こうと思うと若干面倒です。そこで使ってみたいのがnanoJSです。 nanoJSの使い方 nanoJSはjQuery風のDOM操作だけを提供するライブラリです。書き方はjQueryのままです。 $(".someClass").css("background-color:green;").html("Hello World"); $('#c').animate('2.3', '1.2','0','1','1','0','0', '0','0','1').css('background-color:red').text('Hello')
blocks.js - 複雑なデータフローの可視化 MOONGIFT
システムには何らかの入力があって、それが処理されて出力されます。処理は一段階に限らず、複数のステップを経ることもあります。さらに入力ソースが複数名こともあります。 そうした複雑なデータフローを表現するのに向いたライブラリがblocks.jsになります。 blocks.jsの使い方 メイン画面です。各ノードが線でつながっています。 ノードはドラッグできます。 メタデータの編集画面です。 線をつなぎ替えたり、ノードの削除もできます。 コンテクストメニューです。 blocks.jsを使うことでNode-Redのようなインタフェースであったり、Yahoo! Pipesのようなサービスを作ることもできるでしょう。汎用的なインタフェースなので、様々なデータフローをビジュアル化するのに使えるはずです。 blocks.jsはjQuery/JavaScript製のオープンソース・ソフトウェア（MIT Lic
Multi-Step-Form-Js - フォームをマルチステップに変換 MOONGIFT
入力フォームが長かった場合、幾つかのステップに分割することがあります。そうした時、都度サーバに飛ばす方式が選ばれることが多いですが、その度にデータの送信とレンダリングが行われて面倒です。 そこで使ってみたいのがMulti-Step-Form-Jsです。jQueryでフォームをマルチステップに変換してくれます。 Multi-Step-Form-Jsの使い方 デモの場合、3ステップになっています。 バリデーション機能もあります。 二番目のステップに進みました。 最後のステップになっています。 Multi-Step-Form-Jsは一つのフォームを複数のステップに変換しています。つまりサーバ側に送られるのは一度だけです。確認画面がないのが残念ですが、その部分はカスタマイズしても良さそうです。 Multi-Step-Form-JsはjQuery/JavaScript製のオープンソース・ソフトウェア
ajsr-confirm - 豪華な確認ダイアログ
Webを作成する際にはWebブラウザが用意している標準のコンポーネントがよく使われます。しかし、その表示では満足できない人が多いのも確かです。そこでより使い勝手の良いデザインを追求し始めます。 今回はダイアログです。独自のダイアログを出したいと思ったらajsr-confirmを参考にしてみてください。 ajsr-confirmの使い方 よくあるBootstrap風。 こんなダイアログが！今まで見たことないサイズ、彩色です。 さらに何となくアラビアンなダイアログ。 サイバーな感じです。 Windows98風。 ajsr-confirmはとてもインパクトが強いので、同じようなテーマカラーになっていないと使いづらいでしょう。しかしajsr-confirmを参考にダイアログを独自で用意する手は面白そうです。jQueryで使えるのでカスタマイズも容易でしょう。 ajsr-confirmはjQuery
jExcel - Webに埋め込んで使えるExcel風表計算
MOONGIFTはオープンソース・ソフトウェアを紹介するブログです。2021年07月16日で更新停止しました 業務システムなどで一覧表を表示する場合、主に2パターンあると考えます。一つは画面全体に表示する検索結果的な画面、もう一つはマスター管理など小さな表を幾つか並べる場合です。 今回紹介するjExcelはどちらかというと後者の、小さな表を埋め込み表示するのに便利なライブラリです。 jExcelの使い方 こんな感じに表示できます。 セルをクリックして編集もできます。 複数の表を埋め込むこともできます。 ソートも使えます。 入力値のフォーマットも指定できます。 カレンダー入力も。 ドロップダウンからの選択やチェックボックス入力。 データをJSONやCSVで取得できます。動いていないように見えましたが、関数式もサポートされているとのことです。 jExcelはとても軽量なライブラリで、プラグイン
Pit-scheduler - 線表形式の使いやすいカレンダー
MOONGIFTはオープンソース・ソフトウェアを紹介するブログです。2021年07月16日で更新停止しました スケジュール管理は多くのシステムで使われています。プロジェクト管理、顧客管理、グループウェアなどは特にそうで、日付と連動して動くシステムは他にも多数あります。純粋なスケジュール管理ではリッチなカレンダー表示が行われていますが、それ以外のシステムでは大したことない場合も多いでしょう。 今回はjQueryで見やすい線表ベースのカレンダーを表示できるPit-schedulerを紹介します。 Pit-schedulerの使い方 スケジューラーの画面です。これは1日単位の表示です。 予定の詳細。 タスクのアサイン。 リスト表示も可能です。 フィルタを使って絞り込みもできます。 絞り込みました。 新しいタスクを追加する画面です。 Pit-schedulerは横向きの表示なので慣れていないと若干
jQuery Select Areas - 一つの写真から複数の範囲を指定
MOONGIFTはオープンソース・ソフトウェアを紹介するブログです。2021年07月16日で更新停止しました クロップ（切り抜き）をサポートするライブラリはたくさんあります。顔写真をアップロードして一部だけ切り抜くのはよくありますし、写真の中の余計な部分を消す際にもクロップが使われます。 今回はちょっと面白い、複数範囲のクロップをサポートしたjQuery Select Areasを紹介します。 jQuery Select Areasの使い方 デモです。2つの範囲が表示されています。それ以外の部分はぼかしてあるのが面白いです。 さらに追加できます。重なった範囲は共通して使われます。範囲はピクセル情報で取得できます。 範囲は幾つでも追加できます。追加した場所は左上の場所と幅、高さで取得できます。 jQuery Select Areasは表示も特殊なので、使い方を考える必要がありそうです。クロッ
ImageMaps - Naver製。地図画像の編集ツール MOONGIFT
地図は地図のまま利用するのではなく、多くの場合その上にアイコンを載せたり線を描いたりします。そうすることで目的の場所を目立たせたり、駅などから目的地へ移動しやすくなるでしょう。 今回紹介するのはImageMaps、地図の上にアイコンなどを載せられるjQueryプラグインです。 ImageMapsの使い方 編集画面です。アイコンやテキスト、円や四角などが描けます。 こんな感じでアイコンを載せて大きさを変えたりしながら地図を編集していきます。 できあがった地図。これは画像ではなく、SVGとなっています。 ImageMapsの編集結果は読込専用のSVGとなっています。画像ではないので注意してください。日本語なども問題なく扱えますし、アイコンやドローを多彩にすると便利そうです。 ImageMapsはjQuery/JavaScript製のオープンソース・ソフトウェア（MIT License）です。
jQuery Tocible - jQuery製の自動生成型目次ライブラリ
MOONGIFTはオープンソース・ソフトウェアを紹介するブログです。2021年07月16日で更新停止しました Webページで長いコンテンツを書いた場合、あらかじめ目次が用意されます。しかし多くの目次は文頭にあり、途中から選ぶことはできません。また、見出しレベルを細かくすると目次だけで長くなってしまって可読性が落ちてしまいます。 そこで使ってみたいのがjQuery Tocibleです。ヘッダーを使って自動生成し、使いやすい目次を提供します。 jQuery Tocibleの使い方 コンテンツの右側に自動生成された目次が表示されます。 スクロールすると小見出しが表示されます。 さらにスクロール。 実際に使っているところです。ハイライトされる部分がスクロールに合わせて変化しているのが分かります。 jQuery Tocibleは自動生成された目次で、かつフローティング表示なのでコンテンツを読みつつ、
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は多機能なので、業務要件によってはこれで十分
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
