Selecto.js - Web上でドラッグで選択するUXを実現 MOONGIFT
Webアプリケーションが広く使われるようになり、さもローカルアプリケーションと同じように操作できるようになっています。しかし、デスクトップの操作に近づけば近づくほど、ちょっとした操作性の違いに違和感を感じるようになります。 今回はドラッグして選択する操作をサポートするSelecto.jsを紹介します。この操作、デスクトップでは当たり前なのでWebでもできるようになると便利でしょう。 Selecto.jsの使い方 下にあるタイルが選択された状態です。 マウスでドラッグして選択できます。 キーボードとの組み合わせで複数回の選択もできます。 選択してドラッグ移動といった使い方もできます。 Selecto.jsが使われそうなのはExplorerやFinderといったファイル管理を提供する場合でしょう。同様に複数のファイルやオブジェクトをまとめて選択させたり、それを移動したりするのにSelecto.
無料でIFTTTやZapierっぽく全自動連携できる「n8n」を自サーバー上に構築してみた
複数のウェブサービスを連携し、定型作業を自動化してくれるサービスはIFTTTやZapierが有名ですが、特定のサービス以外は使えなかったり、有料プランでしか使用できない機能があったりします。オープンソースで使える自動化サービス「n8n」は無料で利用でき、自社製ソフトのような他の自動化サービスでは未対応のサービスも自動化できるとのことなので、実際に使ってみました。 n8n.io - Workflow Automation https://n8n.io/ まずはn8nのホームページにアクセスします。 ホームページ下部へと進むとインストール方法が記載されていました。今回はWindows 10の機能の一つであるWSL上のUbuntuにn8nをインストールします。 n8nを動作させるにはNode.jsが必要なので、記事作成時点で最新の推奨バージョンのNode.jsをインストールしておきます。 Nod
エクセル（Excel）で2つのプルダウンリストを連動しよう♩+INDIRECT関数 | 株式会社LIG(リグ)｜DX支援・システム開発・Web制作
2つのプルダウンリストを連動させる 動的に選択肢を出すなんて、難しい数式が必要なんじゃない？と思うかもしれませんが、そんなことないんです！ 以前紹介した「名前」という機能を使って、簡単に2つのプルダウンリストを連動させてみましょうー。 1. 表を作成する たとえば、こういう感じの表を作成するとします。 この表のなかで、「ユニット（職種）」と「担当者」の2か所をプルダウンで選びたい！ 選んだユニットと連動して、担当者の選択肢が変わるようにしたい！とします。 2. リストの元データに「名前」を付ける まず、選択肢の元となるリストを作ります。 例の場合ですと別シートで作成していますが、同じシート内でも大丈夫です^^ タイトルを付けて表形式にすることで、編集をする場合や他の人が見る場合にわかりやすくなります。 ここで活躍するのが前回説明した「名前」の機能です。 プルダウンリストは、「名前」を使って
[JS]複数のCSSアニメーションを簡単に組み合わせて利用できるスクリプト -animo.js
Rotate then flip out それぞれのパネルを回転させ、異なるタイミングでめくってフェードアウトさせます。 animo.jsの使い方 Step 1: 外部ファイル animo.jsはjQuery 2+で動作し、animate.cssを含む60以上の美しいアニメーションをコントロールできます。 head内にjquery.jsと当スクリプト・スタイルシートを外部ファイルとして記述します。 <script src="http://code.jquery.com/jquery-2.0.3.min.js" type="text/javascript"></script> <script src="animo.js" type="text/javascript"></script> <link href="animate+animo.css" rel="stylesheet" type=
複数選択できるドロップダウン「jQuery MultiSelect Widget」
フォーム上で、多数の選択肢の中から複数の項目を選択できるようにする場合、multiple属性をつけたselectを使うことがあります。 ただ、複数選択するにはshiftキーやctrlキーを押しながら項目をクリックする必要があり、パソコンに不慣れな人には分かりづらいです。 そこで、チェックボックスとドロップダウンの組み合わせで、分かりやすく複数選択できるjQueryのプラグインを探して<みました。 すると、「jQuery MultiSelect Widget」というプラグインがありました。 jQuery MultiSelect WidgetはEric Hynds氏が開発したプラグインです。 jQuery／jQuery UIと組み合わせて動作します。 使い方は簡単です。 jQuery／jQuery UIとこのプラグインのスクリプトを組み込み、またスタイルシートも組み込みます。 その上で、基本的
AnotherCustomFields＋MTAppjQuery＋SplitToHashによるマルチチェックボックス(その1)
Home The blog of H.Fujimoto AnotherCustomFields＋MTAppjQuery＋SplitToHashによるマルチチェックボックス(その1) 2024年2月1日 拙作プラグインの譲渡について 拙作のMovable Typeのプラグインを、株式会社ワールドイズマインに譲渡いたしました。 長きにわたり拙作のプラグインをご愛顧いただき、ありがとうございました。 MTOS5.1でカスタムフィールド風の機能を実現するAnotherCustomFieldsプラグインで、マルチチェックボックス（複数のチェックボックスを1つのフィールドにまとめたもの）を使いたい場合があります。 AnotherCustomFieldsプラグインの標準機能にはマルチチェックボックスはありませんが、奥脇氏が作られたMTAppjQueryプラグインと,、昨日公開したSplitToHashプ
２次元のラジオボタンを作るチュートリアル＆jQueryサンプル:phpspot開発日誌
Radio Buttons with 2-Way Exclusivity | CSS-Tricks ２次元のラジオボタンを作るチュートリアル＆jQueryサンプル 通常ラジオボタンというと１次元で、１グループで１個だけというのが特徴ですが、これを２次元にして普通とは違う使い方ができるようになるチュートリアルです 例えば、以下のような表に適用して、縦の重複も横の重複もできないような物を作れます。 ２つの物を組み合わせてそれぞれに独占させるような使い方が可能です。１対１のマッチングとかに使えそう 関連エントリ ホイールも効いて超いい感じのカルーセル実装jQueryチュートリアル ナビゲーションメニューに関する有用なjQueryチュートリアル集 IKEAの家具紹介画像っぽくイメージに注釈を入れるjQueryチュートリアル
デザインがよくて複数連動可能なselectボックス作成jQueryプラグイン:phpspot開発日誌
jQuery SelectBox plugin デザインがよくて複数連動可能なselectボックス作成jQueryプラグイン。 次のようないい感じのデザインで、かつ、１つのselectボックスを変更すると他のselectボックスの内容を変更できるイベントハンドラの設定が可能。 イベントハンドラに、onOpen, onClose, onChange といったメソッドにその処理を書いておけばカスタマイズが可能です。 以下、サンプルコードです。実装がカンタンな上に後から見たときに分かりやすい。JavaScript最高です 関連エントリ 異なるサイズの画像を並べて瞬時にサイズを揃えられるjQueryプラグイン「MyThumbnail」 小さくで可愛いグラフが描けるjQueryプラグイン「Piety」 レイアウトに関する強力なjQueryプラグイン６つ 超かっこいいmarquee2.0を実現するjQ
別々に開いたブラウザ間でエレメントをリアルタイムで交差させるNode.jsアプリのサンプル
日曜日なので軽めのネタ。別々に 開いているブラウザの間で、エレメ ントを交差させるNode.jsアプリが サンプルとして公開されていました。 いろいろ出てきますね・・ サンプル動画があったので見てみたんですが、ちょっとワクワクしますな。 From browser to browser with Node.js 左右にブラウザを2つ起動してあります。楽しそうｗデュアルモニターみたい。当たり前でしょうけど別のブラウザでもいけるみたいですね。 githubでコードが公開されていますのでご興味のある開発者の方はご覧になってみては如何でしょう。 CrossBrowse 本題と、ここまでちょっと実験も兼ねてまして。実は以下の件について。 YouTube、特定サイトが選んだ動画を一覧できる「おなじみの動画」ページを発表 米Google傘下のYouTubeは6月10日（現地時間）、Webパブリッシャーが自
HTML５でブラウザにドラッグ＆ドロップでファイルアップ可能なjQueryプラグイン「jQuery HTML5 Uploader」:phpspot開発日誌
HTML５でブラウザにドラッグ＆ドロップでファイルアップ可能なjQueryプラグイン「jQuery HTML5 Uploader」 2011年05月26日- jQuery HTML5 Uploader HTML５でブラウザにドラッグ＆ドロップでファイルアップ可能なjQueryプラグイン「jQuery HTML5 Uploader」。 デスクトップからブラウザにドラッグ＆ドロップできたら、初心者の人とかはもっとアップロードが簡単になるはずですね。 HTML5を使って実装されていて、そのUIなんかも面白いUIで提供されていたのでご紹介。当然ダウンロードして使うことができます。 ファイルを画面の割れ目の穴にドロップしましょう。複数ファイルもOKみたい。 なんと、すぐ下にイメージが表示されてアップ開始。進捗表示もできます。 こんなことが出来るんだというのを知っておくだけでもよさそうですが、jQue
複数ブログ処理のモディファイアを拡張するプラグイン
2024年2月1日 拙作プラグインの譲渡について 拙作のMovable Typeのプラグインを、株式会社ワールドイズマインに譲渡いたしました。 長きにわたり拙作のプラグインをご愛顧いただき、ありがとうございました。 Movable Type 5では、MTEntries等のテンプレートタグにinclude_blogs等のモディファイアを指定して、複数のブログから情報を集める機会が多いです。 この機能を拡張して、「post_exclude_blogs」というモディファイアを追加するプラグインを作りました。 「ウェブサイト内のすべてのブログのうち、一部を除外したい」といった時に便利です。 1.概要 Movable Type 5では、MTEntries等のタグに「include_blogs="children"」や「include_blogs="siblings"」と書くことで、ウェブサイト配下の
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
