AWSがダイアグラムエディタの開発に便利なライブラリ「Diagram Maker」を公開
Amazon Web Services(AWS)がIoTアプリケーションの開発者向けにダイアグラム作成用オープンソースライブラリ「Diagram Maker」を公開しました。Diagram Makerを利用することで、開発者が外観や使い勝手などを独自に定義しつつ、簡単にダイアグラムエディタ機能をアプリケーションに実装することができるようになります。 Diagram Maker · A library to display an interactive editor for any graph-like data. https://awslabs.github.io/diagram-maker/ GitHub - awslabs/diagram-maker: A library to display an interactive editor for any graph-like data.
今話題のReact.jsはどのようなWebアプリケーションに適しているか？ Introduction To React─ Frontrend Conference
今話題のReact.jsはどのようなWebアプリケーションに適しているか？ Introduction To React─ Frontrend Conference 外村 和仁（株式会社 ピクセルグリッド） 本記事は、2015/2/21に行われたFrontrend Conferenceの「Introduction To React」の内容を紹介します。 当日の資料は以下にアップされていますので、こちらも参照してください。 Introduction To React // Speaker Deck React.jsとは何か React.jsはFacebook製のJavaScriptライブラリです。 http://facebook.github.io/react/ 公式サイトに、「A JavaScript library for building user interfaces」とあるように、R
cortex.js: 監視可能なネストできるオブジェクト - Qiita
mquan/cortex 副作用が加えられるとコールバックを発火するオブジェクトを作れる。ネストしたオブジェクトもとれる。 Vue.jsの$dataを知っている人は、getter/setterが専用に置き換えられたそれだと思えばよい。逆に言えばそれだけしかしないのだが。 何に使うの JSのMVW用のミドルウェア。README見る限り、Reactと一緒に使うのを想定しているが、APIを見る限り、別にそれに限ったものでもない。役割はモデル層だけに限定される。 とはいえ、ViewModel的に使うのが一番適していると思われる。 使い方 var Cotex = require('cortexjs'); var c = new Cortex({a:1, b: [1], c: {d: 2}}); c.on('update', function(c){ console.log('updated', c.
Workflow engine in Javascript
Stack Overflow for Teams is now called Stack Internal. Bring the best of human thought and AI automation together at your work. Try for free Learn more
jagridを支える技術 - Qiita
個人的にはaxebomber-cljのサブプロジェクトのつもりで作ったjagridですが、全国のExcelホウガンサーに喜んでいただけたようで、作ったかいがありました。 基本的には、position: absoluteで、絶対座標をmargin-top / margin-leftに変換するだけなのですが、細かいところで工夫してありますので、多少解説しておきます。 garden rubyにおけるSCSSと同じ問題領域に、clojureではgardenがあります。 スタイルシートをS式で書けるスグレモノですが、現段階では引数をとる擬似クラスや子セレクタ(>)に対応する機能は無く、ちょっと物足りない感はあります。しかし、CSSをS式で書ける喜びは何物にも代えがたいですね。 [:.jagrid {:border-width (px 0) :line-height (px cell-size) :p
UIkit - コンポーネントがたくさんある軽量HTML5デザインフレームワーク MOONGIFT
これだけ色々出てくるとどれを使おうか迷ってしまいますね！ UIkitはHTML5向けのフロントエンドフレームワークです。いわゆるBootstrapやFoundationと同じようにWebインタフェースを手軽に作れるようにしてくれるフレームワークです。Bootstrap臭を嫌う方はチェックしてみてはいかがでしょう。 UIkitのスクリーンショット 今回はとにかくスクリーンショット満載です。隅々まで見て、自分のニーズにマッチしているか確認してください。まずは様々な部品を組み合わせたレイアウト例から。 トップページ風デザイン。 画像とテキストの配置。この隙間の空き方がいい感じじゃないかと。 ポートフォリオ風。 マウスオーバーで拡大するための虫眼鏡表示。 モーダルもあります。 ブログ風。 ドキュメント表示。 コンタクトやチームメンバーの表示。このレイアウトいいですね！ フォーム付き。もちろんメンバ
fn.js - JavaScriptを関数型言語のスタイルで書く！ MOONGIFT
JavaScriptは関数型言語の特徴を取り入れていると思いますが、純粋な関数型言語ではありません。通常はオブジェクト言語としてプログラミングするかと思います。しかし今、そしてこれからのトレンドは関数型言語と言われています。 そこでJavaScriptでより関数型言語的なプログラミングを可能にするfn.jsを使ってみましょう。慣れるまでは戸惑うかも知れませんが、面白いプログラミングができそうです。 試し中。 fn.jsのインストール fn.jsはクライアント/サーバサイドの両方で利用できます。クライアントサイドの場合は単純に読み込むか、require.jsが使えます。 <script src="path/to/fn.js"></script> // または <script> require.config({ paths: { fn: 'path/to/fn' } }); define(['
floatlabels.js - placeholderがラベルへ移動するライブラリの決定版！ MOONGIFT
これは使える場面が多そうですよ！ 最近Webフォームでplaceholderを使って入力すべき項目を明示するケースが増えていますが、入力をはじめるとplaceholderがなくなるので入力すべき項目が分からなくなるという弱点があります。そこで開発者が取り組んでいるのが入力を開始するとplaceholderが移動するフォームライブラリです。 幾つかの実装例がありましたが、その完成形とも言えるのがfloatlabels.jsです。カスタマイズ性も高く、ユーザビリティにも優れたソフトウェアになっています。 とりあえず試す 何はともあれまずはその見た目をチェックしましょう。 入力前。placeholderが出ています。 入力を開始するとplaceholderの代わりにテキストフィールドの上部に文字が出てきます。 アニメーションしながら表示されるので違和感はなさそうです。 日本語でも大丈夫です。 使
SAP、業務アプリ用のJavaScript製UIライブラリ「OpenUI5」を公開。レスポンシブ対応でモバイルデバイスにも
SAP、業務アプリ用のJavaScript製UIライブラリ「OpenUI5」を公開。レスポンシブ対応でモバイルデバイスにも 業務アプリケーション最大手の独SAPは、業務アプリケーションのためのJavaScript製JavaScrit UIライブラリ「OpenUI5」をオープンソースとして公開しました。 OpenUI5は、同社のモバイルアプリケーションなどに用いられているJavaScript製ライブラリ「SAPUI5」の主な機能をオープンソース化したもの。jQuery、CSSプロセッサのLESS、ODataライブラリのdatajsなどが使われています。 ボタンやアコーディオン、メニュー、テーブル、ダイアログと言った部品だけでなく、レスポンシブ対応のグリッドレイアウトなどのレイアウト用部品も含まれており、モバイルデバイスに対応するレスポンシブデザインのUI構築が可能になっています。 JavaS
jQuery ReStable – レスポンシブなサイトでのテーブル表示に
MOONGIFTはオープンソース・ソフトウェアを紹介するブログです。2021年07月16日で更新停止しました レスポンシブデザインを使う際にぜひ！ 最近はWebデザインをレスポンシブに行うことが増えていますが、その最大の問題とも言えるのがテーブルではないでしょうか。特に業務系システムで多数のカラムがあったりすると大変なことになります。 もし自分たちのサイトにレスポンシブなテーブルを組み込まなければならないとしたらjQuery ReStableをチェックしてみてください。テーブルのデータによるかも知れませんが、解決につながる可能性があります。 例えばデスクトップでは以下のような表示です。 それをスマートフォンサイズまで縮めると次のように縦になります。 HTMLは下のように普通のテーブルです。 <table class="mytable"> <thead> <tr> <td>Period</t
formatter.js - ユーザストレスの軽減に。JavaScriptで入力フォーマット制御 MOONGIFT
よくある入力フォーマットに沿っていない時のエラーによるイライラが軽減しそうです。 テキストボックスを使ってユーザに入力を行ってもらうのはシンプルですが、それが指定したフォーマットに沿っているかどうかを判断するのは大変です。その結果エラーになったりするとユーザにとっても大きなストレスになります。 そこで予め決まったフォーマットに沿ってしか入力できないようにしてしまうのが良さそうです。そのためのソフトウェアがformatter.jsです。 使い方はjQueryを使う、使わないの2パターンが用意されているようです。 // jQueryを使わない方法 new Formatter(document.getElementById('credit-input'), { 'pattern': '{{9999}}-{{9999}}-{{9999}}-{{9999}}' }); // jQueryを使う方法
Qiitaのtextarea自動補完がOSSになりました - Qiita
$('textarea').textcomplete({ // mentionは単なる名前で意味はありません。 // 分かりやすい名前をつけてください。 mention: { // 必須設定 match: /(^|\s)@(\w*)$/, search: function (term, callback) { // callback には文字列の配列を渡す $.getJSON('/search', { q: term }) .done(function (resp) { callback(resp); }) .fail(function () { callback([]); }); }, replace: function (value) { return '$1@' + value + ' '; }, // 任意設定（下記はいずれもデフォルト値） index: 2, maxCount:
Bootstrap 3 released
The Bootstrap Blog News and announcements for all things Bootstrap, including new releases, Bootstrap Themes, and Bootstrap Icons. Today, on the two year anniversary of releasing Bootstrap to the world, we’re shipping Bootstrap 3.0. It’s been a crazy long ride to say the least and we’re stoked to finally have this out in the wild. Thanks to everyone who’s tested our RCs (er, betas), reported bugs,
Webアプリケーションの開発に役立つJavaScriptフレームワーク·Ractive.js MOONGIFT
Ractive.jsはJavaScript製のオープンソース・ソフトウェア（MIT License）です。 Webフロントエンドの開発において欠かせないのがDOM操作です。jQueryを使って行う人が多いと思いますが、今回はそれより少し大きな規模になってきた時に活躍しそうなRactive.jsを紹介します。 サンプルのTodoアプリ。 HTMLテンプレート。よくある形で誰でもすぐに使いこなせるでしょう。 JavaScript。エレメントを指定したり、データを指定したりします。シンプルで分かりやすいです。 コメント機能のデモ。 雰囲気的にBackbone.jsを簡素化した感じでしょうか。 無限スクロールのデモ。 このような複雑な図を描くデモもあります。 クリックでさらに深く潜れます。 インタラクティブなグラフ。 Ractive.jsはインタラクティブなWeb操作を行うのに必要なDOM操作、イ
既存のライブラリとも連携できるJavaScriptフレームワーク·CanJS MOONGIFT
CanJSはJavaScript製のオープンソース・ソフトウェア（MIT License）です。 大型のWebアプリケーションを構築しようと思ったら、まずはJavaScriptフレームワークを探しましょう。幾つもの候補が見つかると思いますが、今回はその一つCanJSを紹介します。 CanJSはMVCフレームワークになっており、Backbone.jsに似ています。こちらはモデル。 コントローラ。イベントを指定して、それを処理してビューに返す処理を行っています。 ルーティング。URLによってアクションを指定しています。 こちらはビュー。Mustacheが使われています。 CanJSの雰囲気としては、コントローラとビューがBackbone.jsよりも密に結合しているように感じます。特徴として、jQuery/Dojo/Mootools/YUI/Zeptoといった既存のライブラリと共存できること、テ
JavaScriptによる自動振仮名入力·autokana MOONGIFT
autokanaはjQuery/JavaScript製のオープンソース・ソフトウェア（MIT License）です。 フォーム入力というのはユーザにとって相当なストレスになります。ちょっとでも面倒だと思うと諦めてしまいます。そこでなるべくユーザのストレスを減らして入力できるライブラリを用意すべきです。今回はフリガナ入力補助ライブラリautokanaを紹介します。 “な”と入力すると、ふりがなの欄に“ナ”と自動入力されます。 続けて入力して変換。ナカツガワときちんと入力されました。 例えばミスしてバックスペースを押せば、フリガナもその部分が削除されます。 振仮名ではひらがな、片仮名の両方が利用できます。KeyDownのイベントを使っていますので、コピー&ペーストされた文字列に対しては動作しません。また、現時点ではローマ字には非対応とのことです。 MOONGIFTはこう見る 入力フォームは総じ
Fuel UX
Fuel UX extends Bootstrap with additional lightweight JavaScript controls for your web applications. Get Fuel UX View examples Ignite your Bootstrap project today. Include Fuel UX controls in your next web project knowing it's solidly optimized and easy to upgrade. Use a little or use a lot. Deploy only the controls you want with minimal, name-spaced, responsive styling designed to easily fit into
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
GitHub - bramstein/funcy: An experiment in adding functional pattern matching to JavaScript
TechCrunch | Startup and Technology News
http://sap.github.io/openui5/