GitHub - RobertoPrevato/jQuery-KingTable: A jQuery plugin for administrative tables that are able to build themselves, on the basis of the input data.You signed in with another tab or window. Reload to refresh your session. You signed out in another tab or window. Reload to refresh your session. You switched accounts on another tab or window. Reload to refresh your session. Dismiss alert
Jotted - プラグインで拡張できるHTML/JavaScript/CSS実行環境 MOONGIFT
HTML/JavaScript/CSSの良いところはWebブラウザ上でそのまま実行できると言うことです。そのためJSFeddleやjsdo.itといったサービスが人気になります。環境を用意しないでデモが見られるのは良いことです。 そんな実行環境を自分でホスティングできるのがJottedです。プラグインの仕組みもある面白い実行環境です。 Jottedの使い方 右側がJottedを使った表示です。結果から。 HTML。 CSS。 JavaScript。 HTMLを編集してみます。 もちろん即座に反映されます。 Markdownプラグインがあります。 CoffeeScriptで書くこともできます。 Jottedを使えばJavaScript SDKなどで説明と実際の実行を一つの画面でできるようになるでしょう。また、デザインフレームワークでも活躍しそうです。 Jottedはnode/JavaScri
Web VR Starter Kit - WebでVRをはじめるならここから
MOONGIFTはオープンソース・ソフトウェアを紹介するブログです。2021年07月16日で更新停止しました gumiがVR専門の子会社を設立するなど、VRに対する期待は大いに高まっています。ゲームでの利用はもちろんのこと、遠隔地操作など多くの利用が考えられるだけに、その可能性を考えるとわくわくしてきます。 そんなVRをWebブラウザ上で楽しむためのスターターキットと言えるのがWeb VR Starter Kitです。 Web VR Starter Kitの使い方 Web VR Starter Kitのデモです。パノラマ写真を楽しめます。デスクトップブラウザの場合、マウスで動かせます。OculusのようなVRグラスをつければ、被って頭で映像の方向を変えられます。 360度の写真が必要ですが、そこはRICOH THETAなどが使えますね。 別なデモです。動画をVRの中で閲覧できます。使いこな
Booking.js - 空いている時間を表示するスケジュール管理 MOONGIFT
忙しくなってくるとミーティングなどの時間調整もままならなくなっていきます。なんとなく避けて提示した時間が相手にとってはピンポイントだったりして、いつまでも調整がつかないなんてこともあります。 そこで自分の予定をオープンにして、空いている時間を埋めてもらうのはいかがでしょう。Booking.jsはまさにそんなUIを提供します。 Booking.jsの使い方 Booking.jsのUIです。週間表示で1時間ごとに枠が決まっています。 空いている時間を選択すると予定を差し込めるようになっています。 こんな感じで自分の情報を入れればOKです。 複数のカレンダーにも対応。ビフの予定は入れたくないですね…。 Booking.jsは国に合わせて日付などの表記を変えたり、コールバックを受け取ることもできます。上司と面談する時間を各自で決めたり、弁護士などの仕業の方にとって便利なUIかも知れません。 Boo
screenlog.js - console.log代替。画面上にログ出力 MOONGIFT
Webフロントエンドの開発時にDevToolsを開くことはよくあるかと思います。ただ、画面の大きさを結構とりますし、常に開いておくのが邪魔という方もいるでしょう。 そこで使ってみたいのがscreenlog.jsです。console.logのように使えて、画面上にログを出力してくれるソフトウェアです。 screenlog.jsの使い方 screenlog.jsを使っているのでところです。右上にデバッグメッセージが出ています。 自動的にメッセージが追記されていきます。 screenlog.jsはconsoleオブジェクトの代わりにscreenLogオブジェクトを使います。ログのクリアもできるので、デバッグに活躍してくれるのではないでしょうか。 screenlog.jsはJavaScript製、MIT Licenseのオープンソース・ソフトウェアです。 chinchang/screenlog.j
jQuery formBuilder - jQueryによる動的フォームが作成
MOONGIFTはオープンソース・ソフトウェアを紹介するブログです。2021年07月16日で更新停止しました マーケターの人たちはアンケートフォームを数多く作成します。そんな時に一回一回プログラマに依頼して作成してもらうのでは時間もかかりますし面倒です。 そこで使ってみたいのがjQuery formBuilderです。jQuery formBuilderを使えば自由にフォームが作れるので、後はそのデータを保存できるようにすればいいだけです。 jQuery formBuilderの使い方 jQuery formBuilderのデモサイトです。項目は自由にドラッグ&ドロップできます。 編集で細かいところを直せます。 リストなどは項目を設定できます。 実際のレンダリング結果を確認できます。 jQuery formBuilderは汎用的なフォームができますので、後はそのデータをJSONなりでまとめ
Showoff - Sinatra製のHTMLスライド
MOONGIFTはオープンソース・ソフトウェアを紹介するブログです。2021年07月16日で更新停止しました プレゼンテーションにおいてスライドは重要な要素になります。PowerPointを使ったものは似たり寄ったりで眠くなりますし、Keynoteの派手なアニメーションも出尽くした感があります。 そこでHTMLプレゼンテーションの出番です。しかも自分でカスタマイズまでできてしまうものはいかがでしょう。今回はSinatra製のShowoffを紹介します。 Showoffの使い方 Showoffのデモです。 キーボードで次のスライドに切り替えられます。目立たせたいところを点滅させることもできます。 実際に使っているところです。 Showoffはこれまでに出てきたHTMLスライドと比べてアニメーションが多機能に見えます。HTMLスライドは簡素なものが多いのですが、少しでも目立たせたいと考えると方
pdf.js-controller - PDF.jsを使ったWebスライド MOONGIFT
FirefoxではPDFビューワーをJavaScriptで実装しています。それがPDF.jsです。PDFは公開されているフォーマットではありますが、解析して表示するのはとても大変なものだと想定されます。 そんなPDF.jsを活用してスライドビューワーにするのがpdf.js-controllerです。PDFプレゼンを行うのに向いていそうです。 pdf.js-controllerの使い方 実行しているところです。ちょっと余計な文字が下に出てしまっています。 矢印キーを使ったスライド移動にも対応しています。 ツリービューのような複雑な表示にも対応しています。 PDF、さらにJavaScriptとは思えない表示ですね。 PDFはビジネスの場では数多く使われています。編集が容易ではないことがメリットですが、その結果として再利用性が悪いのが欠点でした。pdf.js-controllerを参考にすればP
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
Feature.js - Webブラウザで実装されている機能をチェック MOONGIFT
HTML5でWebブラウザの機能標準化が行われていますが、まだまだ統一はされていません。ブラウザによって得て不得手あり、実装されていない機能もたくさんあります。 それらを逐一調べながら実装していっても良いですが、Feature.jsを使うことで各機能の実装状態を手軽にチェックできるようになります。 Feature.jsの使い方 例えばWebGLの実装確認は次のようにできます。 if (feature.webGL) { console.log("WebGL supported"); } else { console.log("WebGL not supported"); } Safariの各機能の実装状態。結構未実装なのが分かりますね。 Google Chromeの場合。ないのはタッチとコンテクストメニューくらいです。 Feature.jsを使うことでfeatureオブジェクトの各プロパティ
FuckFuckAdblock - アドブロック検知プログラムをブロック
MOONGIFTはオープンソース・ソフトウェアを紹介するブログです。2021年07月16日で更新停止しました iOS9のSafariで追加されて以降、話題に上がることが多いのがアドブロックです。オンラインメディアにとっては死活問題になる訳で、アドブロックに対抗するJavaScriptライブラリも作られています。 そんなアドブロック対抗ライブラリに対抗するのがFuckFuckAdblockです（ややこしい）。とどのつまり、アドブロックが有効になります。 FuckFuckAdblockの使い方 アドブロック対抗ライブラリ、FuckAdblockが有効な時。アドブロックが使われていますと検知できています。 FuckFuckAdblockを使った場合、アドブロックが検知できなくなっています。これでアドブロックが有効になりました。 FuckFuckAdblockはGreasemonkeyとして動作す
KeyCastJs - キー入力を可視化
MOONGIFTはオープンソース・ソフトウェアを紹介するブログです。2021年07月16日で更新停止しました 勉強会やハンズオンでパソコンの画面を映しながら説明をすることがあります。マウス操作ですべて終われば良いのですが、多くの場合キーボードを使います。そんな時にキーボードショートカットを使うと突然操作が行われて聴衆は混乱してしまいます。 そこでキー入力を可視化するソフトウェアが必要になります。今回はElectronを使って作られたKeyCastJsを紹介します。 KeyCastJsの使い方 起動したところ。DevToolsが表示されていますが、これは閉じても大丈夫です。 実際に操作しているところ。キー入力がそのまま表示されます。 KeyCastJsはチュートリアル動画で使ったり、プレゼンテーションで活用することもできます。キーボード入力はぱっと見では分からないので、可視化すると分かりやす
Diff to HTML - 差分をHTMLに変換
MOONGIFTはオープンソース・ソフトウェアを紹介するブログです。2021年07月16日で更新停止しました プログラマーであれば差分をよく使うかと思います。基本的にCLIで実行するか、GUIの差分ソフトウェアで確認するでしょう。筆者はCLIをよく使います。 patchファイルの形式でもいいですが、Side by Sideのが見やすいこともあります。そこで使ってみたいのがDiff to HTML、GitのDiff情報をHTMLにしてくれるソフトウェアです。 Diff to HTMLの使い方 Diff to HTMLの表示です。GitHubのものに似ていますね。 変更されたファイル一覧も取れます。 1カラムだけでなく、サイドバイサイドもサポートされています。 Diff to HTMLはGitHubに近いデザインなので、見慣れた使い勝手になるでしょう。オフラインでも使えるのがいいですし、ローカ
excel2js - ExcelシートをWeb化
MOONGIFTはオープンソース・ソフトウェアを紹介するブログです。2021年07月16日で更新停止しました 日本にはExcel職人と呼ばれる人たちがたくさんいます。彼らにかかればどんなドキュメントであってもExcelで作られ、多くの業務システムがExcel VBAを駆使して作られます。 今回はその最高峰とも言える、Excelで作るWebアプリケーションを紹介します。それがexcel2jsです。 excel2jsの使い方 excel2jsはExcelで作られたシートをHTML/JavaScriptにしてくれるソフトウェアです。下の画像は元ファイルになるExcelファイルです。式も埋め込まれています。 それがこんな感じにWebブラウザ上で動くようになります。 Excelで動くものになりますので、サーバサイドと連携するなどというのは難しいでしょう。しかしちょっとした計算処理を行うものであればe
react-blessed - CUIアプリケーションでもReact！ MOONGIFT
Reactの良いところは表示されている状態を管理する必要なく、ただバーチャルDOMに描画すればReactがいいように仕上げてくれるところにあります。これはWebだけでなく、React Nativeのようにアプリでも使える考えと言えます。 他にもWindowsやMac OSXでもReactの考えが取り入れられていくかも知れません。そんな中、いち早くReactを取り込んだのがreact-blessedで、CUIの世界で実現しています。 react-blessedの使い方 例えばこんな画面です。この時点で頑張りすぎな気もしますが。 そしてこれがreact-blessedを使うとこんな感じに動くわけです。 そして以下がそのコード。面白いので全部載せます。 import React, {Component} from 'react'; import blessed from 'blessed'; i
Dynamics.js - 物理系アニメーションライブラリ MOONGIFT
アニメーションは何の意味もなく動かしても面白くありません。一回転させたり、ひっくり返ったりと現実世界を投影するような動きは目を引きやすく、表現としても分かりやすいです。 そこで使ってみたいのがDynamics.jsです。物理系の動きを再現するJavaScript/CSSアニメーションライブラリになります。 Dynamics.jsの使い方 Dynamics.jsには多数のパターンで動きが作られています。 スプリングという名前のアニメーションです。 バウンド。 強い重力。 この他にもいくつものパターンでアニメーションが作られています。さらにパラメータを変更することで動きを調整できるようになっています。Dynamics.jsを使ってリアルな物体感を感じさせるアニメーションを実現してください。 Dynamics.jsはJavaScript製、MIT Licenseのオープンソース・ソフトウェアです
Knwl.js·テキストから意味のある情報を抽出する MOONGIFT
TwitterやFacebook、ブログなどオンラインにはテキストコンテンツが溢れています。メールも配信数が増すばかりで膨大な情報量を処理するのが困難になってきているのではないでしょうか。 そこで必要になるのがテキストから本当に必要な部分だけを抽出する技術ではないかと思います。そうすることで余計な情報を省き、処理量を減らせるようになります。 英語向けですが、そんなJavaScriptライブラリであるKnwl.jsを紹介します。 実行例。左側のテキストに対して右側に抽出された情報が一覧になっています。 任意のテキストから電話番号、日付、時間、場所、リンク、メールアドレスをはじめ様々な情報が抽出されます。また、スパム判定機能も備わっています。Knwl.jsをベースにすることでカレンダーに自動登録する機能を開発したり、アドレス帳登録の情報を補完する機能などが考えられるようになりそうです。 だらだ
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
http://plus.appgiga.jp/masatolan/2015/07/10/56420/
Web開発ライブラリを自動的に入手できるパッケージ管理ツールBower
TechCrunch | Startup and Technology News
