translate.js - クリック一つで別な言語に。JavaScriptで多言語対応 MOONGIFT
Webサイトを多言語対応する場合、その方法としては幾つかのやり方があります。まずディレクトリを分ける方法があります。もう一つはパラメータで出し分ける方法です。さらに最近ではJavaScriptでURLは共通の状態で翻訳する処理する方法も用いられます。 今回はそんなJavaScriptベースの翻訳処理を行うtranslate.jsを紹介します。 translate.jsの使い方 英語の場合です。 クリック一つでスペイン語に。 translate.jsではJavaScriptで多言語のキーファイルを作成しておきます。それを読み込むことで、該当する文字列を変換する仕組みです。やり方としてはWOVN.ioに近いのではないかと思いますが、キーワードをピックアップしてくれる機能はなさそうです。 translate.jsはjQuery/JavaScript製のオープンソース・ソフトウェア（MIT Lic
PaginateMyTable - テーブルタグをページネーション可能に MOONGIFT
業務システムではデータの一覧表示を作ることが多いでしょう。そんな時にはHTMLのテーブルタグを使うはずです。50行くらいであれば良いですが、数百行のデータを一気に表示すると視認性も落ちますし、使いづらくなります。 そこで使ってみたいのがPaginateMyTableです。HTMLのテーブルにページネーションを追加してくれるライブラリです。 PaginateMyTableの使い方 元々の表示です。 実行しました。デフォルトで5行ごとのページネーションになります。 PaginateMyTableは単なるテーブルをページネーション可能にしてくれます。動的に行われているので、ページネーションの件数を変更したりするのも簡単でしょう。サーバサイドを使わないので何度も読み込み直したりする必要もなく、便利そうです。 PaginateMyTableはjQuery/JavaScript製のオープンソース・ソフ
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
Image Picker - 画像を選択する入力コンポーネント
画像が並んでいて、そこから選ぶようなインタフェースを作る場合、どういうものを想像するでしょうか。画像の下にチェックボックスを配置するのが簡単そうですが、直感的とは言いがたいUIです。 そこで使ってみたいのがImage Pickerです。画像をそのまま選択できるコンポーネントになっています。 Image Pickerの使い方 一例です。画像を選択すると枠が青くなります。 複数選択もできます。選択上限を設けることもできます。 ドロップダウンと連動させることもできます。 レイアウトは自由に変更できます。 Image Pickerは画像を選択肢として使うコンポーネントです。使い勝手としてはselectタグの選択肢やラジオボタン、チェックボックスと変わりません。しかしテキストよりも文字列の方が使いやすいケースもあるでしょう。 Image PickerはjQuery/JavaScript製のオープンソ
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
jQuery Skeduler Plugin - カレンダーの週表示を行うjQueryプラグイン
仕事は大抵時間に即して行われているのでカレンダー風に表示したりすると分かりやすく可視化できます。スケジュールアプリでは総じて提供されていますが、自前で実装しようと思うと大変な表示です。 そこで使ってみたいのがjQuery Skeduler Pluginです。週表示のカレンダービューを提供するjQueryプラグインです。 jQuery Skeduler Pluginの使い方 表示例です。動的にデータを生成して表示しています。 マウスオーバーでその予定だけをズームしてくれます。 jQuery Skeduler Pluginの表示はなかなか貴重ではないでしょうか。データの追加などもjQueryらしく簡単にできます。時間を変更したりする機能はありませんが、ビューワーとしては十分使えるかと思います。 jQuery Skeduler PluginはjQuery/JavaScript製のオープンソース・
ExportToExcel - Web上でデータをExcelにエクスポート
MOONGIFTはオープンソース・ソフトウェアを紹介するブログです。2021年07月16日で更新停止しました Webブラウザでデータをダウンロードしたいというニーズはよくあります。データフォーマットとしては幾つもありますが、特に要望が多いのはExcelフォーマットではないでしょうか。CSVでも良いですが、より使いやすいフォーマットのはずです。 そこで使ってみたいのがExportToExcelです。クライアントサイドでExcelファイルを生成できます。 ExportToExcelの使い方 出力前のフォーマットとしてはJSONが利用できます。 さらにHTMLのテーブルも対象にできます。 ダウンロードされたExcelファイルです。 ExportToExcelは値のフォーマットなどは指定できません。基本的にCSVの代わりに出力する程度と考えた方が良いでしょう。しかしCSVで勝手なフォーマット変換が
jquery-rsSlideIt - 2D/3Dでダイナミックなスライド切り替え MOONGIFT
よりインパクトのあるスライドを目指すならば一つ一つのスライドはもちろん、そのスライドの切り替えにもこだわると良いでしょう。ダイナミックなアニメーションがあると目を引くプレゼンテーションにつながるはずです。 今回紹介するjquery-rsSlideItはjQueryプラグインとして作られたスライド切り替えライブラリです。 jquery-rsSlideItの使い方 2Dの場合です。回転の伴うスライドが作れます。 3Dです。よりダイナミックに回転しながら表示されます。 jquery-rsSlideItは回転しながらダイナミックにコンテンツの表示が切り替わります。プレゼンテーションのスライドはもちろん、写真などを印象強く表示するのにも使えそうです。jQueryプラグインなので使いやすいのも魅力です。 jquery-rsSlideItはjQuery/JavaScript製のオープンソース・ソフトウェ
jQuery Images Compare - 二つの画像をスライダーで比較
MOONGIFTはオープンソース・ソフトウェアを紹介するブログです。2021年07月16日で更新停止しました JPEGなど圧縮率によって画像の粗さやサイズが変わるフォーマットの場合、実際にその保存方法によってどう変わっているか比較してみないと分かりづらいでしょう。その時、ウィンドウを切り替えながら比較しても画面がチカチカしてしまってははっきりと分かりません。 そこで使ってみたいのがjQuery Images Compareです。スライダーを使ってスムーズに比較できます。 jQuery Images Compareの使い方 こちらがデモです。右と左で画像を重ねて比較できます。 スライダーを動かすと表示範囲が変わります。 動かしているところです。 jQuery Images Compareを使うとほぼ同じ構図の画像を二つ重ねて比べられます。対応しているブラウザはIE9以上になるので、幅広いブラ
jExcel - Webに埋め込んで使えるExcel風表計算
MOONGIFTはオープンソース・ソフトウェアを紹介するブログです。2021年07月16日で更新停止しました 業務システムなどで一覧表を表示する場合、主に2パターンあると考えます。一つは画面全体に表示する検索結果的な画面、もう一つはマスター管理など小さな表を幾つか並べる場合です。 今回紹介するjExcelはどちらかというと後者の、小さな表を埋め込み表示するのに便利なライブラリです。 jExcelの使い方 こんな感じに表示できます。 セルをクリックして編集もできます。 複数の表を埋め込むこともできます。 ソートも使えます。 入力値のフォーマットも指定できます。 カレンダー入力も。 ドロップダウンからの選択やチェックボックス入力。 データをJSONやCSVで取得できます。動いていないように見えましたが、関数式もサポートされているとのことです。 jExcelはとても軽量なライブラリで、プラグイン
jQuery File Browser - Webベースのファイルブラウザ
MOONGIFTはオープンソース・ソフトウェアを紹介するブログです。2021年07月16日で更新停止しました ユーザ向けにストレージに開放しているサービスの場合、ファイル一覧やファイルを開くような機能を提供したいと思うでしょう。かといって使い勝手の良いインタフェースは難しく、ツリービューを使ったりします。 もっとインタラクティブなファイル管理機能を提供したいならばjQuery File Browserを使ってみましょう。 jQuery File Browserの使い方 メイン画面です。フォルダやファイルの種類によってアイコンが違います。 フォルダをクリックするとディレクトリを辿れます。 ファイルの種類によって内容が確認できます。 jQuery File BrowserはOS標準のようなファイル管理機能を提供します。慣れたユーザにとってはツリービューの方が効率的かも知れませんが、はじめてのユ
Pit-scheduler - 線表形式の使いやすいカレンダー
MOONGIFTはオープンソース・ソフトウェアを紹介するブログです。2021年07月16日で更新停止しました スケジュール管理は多くのシステムで使われています。プロジェクト管理、顧客管理、グループウェアなどは特にそうで、日付と連動して動くシステムは他にも多数あります。純粋なスケジュール管理ではリッチなカレンダー表示が行われていますが、それ以外のシステムでは大したことない場合も多いでしょう。 今回はjQueryで見やすい線表ベースのカレンダーを表示できるPit-schedulerを紹介します。 Pit-schedulerの使い方 スケジューラーの画面です。これは1日単位の表示です。 予定の詳細。 タスクのアサイン。 リスト表示も可能です。 フィルタを使って絞り込みもできます。 絞り込みました。 新しいタスクを追加する画面です。 Pit-schedulerは横向きの表示なので慣れていないと若干
awe.js - AR向けjQueryとも言うべきフレームワーク MOONGIFT
AR（拡張現実）を実現しようと思うと非常に面倒なイメージがあります。カメラの映像を取り込んでマーカーを認識したり、位置情報を使ったり、加速度センサーで向きを取ったりしなければなりません。 実はそれらの機能はすべてスマートフォンに入っていると言えます。そしてawe.jsを使えばjQueryのように容易にARアプリが作れるようになります。 awe.jsの使い方 現在は使えるブラウザが限られます。Firefox for Androidであれば対応しています。まずは位置情報系のAR。 マーカー系も使えます。 awe.jsではこの他、Oculus Riftと組み合わせたり、Google GlassやLeap Motion向けにも作ることができます。Webブラウザ上でARアプリを作ってみたい方はawe.jsを使うと良いでしょう。 awe.jsはJavaScript製のオープンソース・ソフトウェア（MI
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は自動生成された目次で、かつフローティング表示なのでコンテンツを読みつつ、
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
WEBページに簡単にタブメニューを設置できるjQueryプラグイン「tabs.js」。今回探し回った中では最も手軽に使えてシンプル。
