jQuery Skeduler Plugin - カレンダーの週表示を行うjQueryプラグイン
仕事は大抵時間に即して行われているのでカレンダー風に表示したりすると分かりやすく可視化できます。スケジュールアプリでは総じて提供されていますが、自前で実装しようと思うと大変な表示です。 そこで使ってみたいのがjQuery Skeduler Pluginです。週表示のカレンダービューを提供するjQueryプラグインです。 jQuery Skeduler Pluginの使い方 表示例です。動的にデータを生成して表示しています。 マウスオーバーでその予定だけをズームしてくれます。 jQuery Skeduler Pluginの表示はなかなか貴重ではないでしょうか。データの追加などもjQueryらしく簡単にできます。時間を変更したりする機能はありませんが、ビューワーとしては十分使えるかと思います。 jQuery Skeduler PluginはjQuery/JavaScript製のオープンソース・
Uppy - クラウドストレージも使える高機能なファイルアップローダー MOONGIFT
HTML5は素のままではあまりUXは向上していません。APIを使って開発者自身で拡張しなければなりません。しかしその開発もそう簡単ではありません。そこですでに他の方が開発したものを積極的に使っていくのが良いでしょう。 今回は多機能なファイルアップロード機能が手に入れられるUppyを紹介します。 Uppyの使い方 利用しているところです。Google DriveやInstagram、Webカメラなどを入力ソースとして指定できます。 画像はプレビューも表示されます。 ファイル名を変更したりすることもできます。 Google Driveの場合は認証を行います。 ディレクトリを辿ってファイルを指定できます。 アップロードを開始しました。順番にファイルがアップロードされていきます。 すべてのファイルがアップロードされました。 UppyはGoogle DriveやDropbox、Instagramをデ
Terminal recorder - ターミナル操作を記録してHTML出力
MOONGIFTはオープンソース・ソフトウェアを紹介するブログです。2021年07月16日で更新停止しました 自分のターミナル操作を記録したい時はないでしょうか。手順書を作る場合でも、ブログ記事を書くときにも考えられます。すべてテキストで書いていくのもいいですが、入力した内容がそのまま記録されるなら、これほど楽なことはないでしょう。 Terminal recorderはそんな希望を叶えてくれるソフトウェアです。さらに結果はHTMLファイルになります。 Terminal recorderの使い方 使い方としては、Terminal recorderを起動して新しいBashが開始します。そしてコマンドを打って作業し、完了したらCtrl + Cで終了します。そうすると次のようなHTMLファイルが生成される仕組みです。 Terminal recorderはasciicastのような仕組みを自分だけで
wordcloud2.js - JavaScriptでタグクラウドを生成 MOONGIFT
たくさんの文字が良い感じに詰め込んだ状態で並んだ状態がタグクラウドやワードルと呼ばれます。それを手作業で作成するという選択はまず考えられないでしょう。また、画像で作ってしまうと後からの更新が面倒です。 そこで使ってみたいのがwordcloud2.jsです。与えられた文字列を良い感じに配置してくれます。 wordcloud2.jsの使い方 デモです。良い感じに隙間なく埋まっています。 全体像です。レスポンシブなのも利点です。 画像として保存もできます。 wordcloud2.jsの良いところは自動生成なので単語の追加なども簡単にできることです。また、データベースから値を取得して生成する場合は日々追加されるデータに合わせて変更されて欲しいと思うのではないでしょうか。 wordcloud2.jsはHTML5/JavaScript製のオープンソース・ソフトウェア（MIT License）です。 w
mailit - メール送信をWeb APIで
MOONGIFTはオープンソース・ソフトウェアを紹介するブログです。2021年07月16日で更新停止しました メールをシステムに組み込むのは意外と面倒で、SMTP用のライブラリをついつい頼ってしまいます。さらに日本語問題やHTMLメール、添付ファイルなど様々な用途があります。 それをシンプルに解決してくれそうなのがmailitです。メール送信をシンプルなREST APIで提供してくれます。 mailitの使い方 mailitは設定ファイルを用意し、そこに本来のSMTPサーバの情報を記述します。そしてmailitを起動するとWeb APIが立ち上がります。 使い方としては以下のようにコマンドを打ちます。そうするとSMTPサーバのレスポンスをJSONで返してくれます。 $ curl --data "to=admin@moongift.jp&subject=hi&text=hey world"
Path Graph - レイトレーシングをビジュアル化
MOONGIFTはオープンソース・ソフトウェアを紹介するブログです。2021年07月16日で更新停止しました レイトレーシングは波の線（伝播経路）を追跡することで、ある点において観測される画像・音像などをシミュレートする計算手法になります（via レイトレーシング - Wikipedia）。つまり目や耳に届く情報を逆に辿る（目や耳を発信元とする）ことで、オブジェクトの反射を計算に入れつつ結果としてどう見えたり聞こえたりするのかを予測します。 そんなレイトレーシングをビジュアル化するソフトウェアがPath Graphになります。 Path Graphの使い方 メイン画面です。 目やオブジェクトを動かすと伝搬経路も変化します。 オブジェクトを追加できます。 さらに目を追加することもできます。 動かしているところです。 現在開発中のバージョンでは実際に見えているオブジェクトの姿をビジュアル化でき
LHTML - Zip圧縮するだけ。Web技術で作るローカルアプリケーション MOONGIFT
Webアプリケーションでできることは増えていますが、それでもローカルのファイルシステムに触れたりすることはできません。Web技術でそういった問題を解決するものとしてElectronが知られていますが、できあがるバイナリサイズが大きかったりするのが難点です。 そこで使ってみたいのがLHTMLです。ごく簡単にローカルで動くWebアプリケーションが開発できます。 LHTMLの使い方 LHTMLの例です。ローカルのアプリケーションとして動作します。 LHTMLの面白い点としてはHTML/JavaScript/スタイルシートをZipで圧縮するだけということです。それをLHTMLで実行すると、解凍した上で専用のWebViewの中に描画します。Zip圧縮されているので配布は一つのファイルで済むという具合です。 LHTMLはWindows/macOS/Linux用のオープンソース・ソフトウェア（Apach
Clappr - 機能拡張できるWeb用動画プレイヤー
MOONGIFTはオープンソース・ソフトウェアを紹介するブログです。2021年07月16日で更新停止しました 動画コンテンツが一気に広がっています。スマートフォンやアクションカメラ、360度動画など様々な撮影デバイスも登場しており、今後もますます利用が広がっていくことでしょう。そんな動画コンテンツで必要なのがプレイヤーです。 今回紹介するClapprは機能拡張がサポートされた動画プレイヤーになります。 Clapprの使い方 使い方は簡単で、JavaScriptで動画やサイズを指定するだけです。デフォルトでは音量、最大化、シークなどがサポートされています。 再生中です。 Clapprの特徴はなんと言っても機能拡張です。シークバーにサムネイルやコメントを表示したり、360度動画、Chromecastサポート、スピード変更などもプラグインによって実現できます。カスタマイズ必須な際にはClappr
JS-XLSX - Web上でExcelファイルを読み書き
MOONGIFTはオープンソース・ソフトウェアを紹介するブログです。2021年07月16日で更新停止しました なんだかんだ言ってもシステム開発においてExcelファイルはよく使われます。しかしサーバサイドでExcelファイルを生成したり、読み取ったりするライブラリをインストールするのは嫌なものでしょう。 そこで使ってみたいのがJS-XLSXです。WebブラウザベースでExcelファイルの読み書きができます。 JS-XLSXの使い方 こちらはエクスポートの例です。HTMLテーブルの内容を出力します。 実際にダウンロードされたXSLXファイル。ちゃんと再現されています。 XLSBというバイナリファイル出力もできます。 逆に読み込むパターンです。Excelファイルをドロップすると、その内容をHTMLテーブルにしてくれます。 日本語も扱えます。 JS-XLSXを使えば一覧表をそのままExcelファ
Skypad - Skygearを使ったリアルタイムコラボレーションエディタ MOONGIFT
Webアプリケーションに魅力を加えてくれるのがリアルタイムコラボレーションです。遠く離れた人と一つのデータを同期して作成、編集して一気に作品を創り出していけます。しかし技術的に難関な部分も多いです。 それを簡単に解決してくれるのがSkygearというサービスで、Skygearを使ったメモアプリケーションのデモがSkypadになります。 Skypadの使い方 メイン画面です。大きなテキストエリアが広がっています。 プログラミング言語のハイライトにも対応しています。 入力が同期しているのが分かります。 SkypadはSkygearのデモ的なソフトウェアですが、GitHub Pages上であっても簡単にリアルタイムコラボレーション機能が実装できます。自分の作ったソフトウェアにひと味加えたい時に使ってみると良さそうです。 SkypadはHTML5/JavaScript製のオープンソース・ソフトウェ
VideoEditorJS - Webベースの動画編集
MOONGIFTはオープンソース・ソフトウェアを紹介するブログです。2021年07月16日で更新停止しました Webブラウザ上でできることがどんどん増えています。さらにローカルアプリケーションではあるものの、ElectronのようにWeb技術で動くソフトウェアがあったり、Cordovaのようにスマートフォンアプリも作れます。 今回紹介するVideoEditorJSはWebブラウザ上でビデオの編集ができてしまうソフトウェアです。 VideoEditorJSの使い方 メイン画面です。動画と音声を追加していきます。 動画のサムネイルも確認できます。 そしてタイムラインにドロップしていきます。 VideoEditorJSでは外部の動画ファイルを取り込むのはもちろん、Webカメラから取り込むこともできます。動画編集と言っても切り出したり、エフェクトを行うことはできないようです。スマートフォンなどで撮
cgmd-browser - Markdownに注釈を入れる
MOONGIFTはオープンソース・ソフトウェアを紹介するブログです。2021年07月16日で更新停止しました Markdownが開発者の間でデファクトのフォーマットになってきています。そうやって広まっていく中では、周辺ツールも充実してきます。今回はアノテーション、注釈に注目します。 Markdownでもワードプロセッサのように文書に対してコメントしたいと考える時があるでしょう。そんな時に使えるのがcgmd-browserです。 cgmd-browserの使い方 cgmd-browserのメイン画面です。タブに対応しているので複数のMarkdownファイルが開けます。そして文字を選択するとアイコンが表示されます。 そして鉛筆のアイコンをクリックするとコメントが書けます。 コメントするとフローティングで確認できるようになります。 cgmd-browserはazu/markdown-review
DoppioJVM - JavaScriptで作られたJavaVM
MOONGIFTはオープンソース・ソフトウェアを紹介するブログです。2021年07月16日で更新停止しました JavaといえばかつてはWebブラウザ上でも動いていました。Javaアプレットと呼ばれる技術で、とんでもなく遅かったり、セキュリティホールになったりと悩みの多かった存在ではないでしょうか。HTML5になり、プラグインが軒並みなくなっていく中でJavaアプレットも動く機会がなくなっています。 そんな中、安全にJavaが実行できる環境がWebブラウザ上に構築されるかも知れません。それがDoppioJVMです。 DoppioJVMの使い方 DoppioJVMはJavaScriptで作られたJVMです。使い道があるかは分かりませんが非常に興味深い技術です。 ちゃんとjavacでコンパイルもできます。 できあがったファイルを実行もできます。実行速度についてはJavaScript上で動いている
Decktape - HTMLプレゼンテーションをPDF化
MOONGIFTはオープンソース・ソフトウェアを紹介するブログです。2021年07月16日で更新停止しました HTMLでスライドを作成する方が増えています。スライドをWeb上にアップロードするだけで閲覧できる便利さは良いのですが、多くのスライド共有サイトではHTMLには対応していません。 そこで使ってみたいのがDecktapeです。多数のHTMLスライドに対応したPDF変換ソフトウェアです。 Decktapeの使い方 後は以下のようなコマンドになります。 $ ./phantomjs decktape.js -s 1280x720 http://razvancaliman.com/fowd-nyc-2014 そうするとPDFが生成されます。 HTMLプレゼンテーションによってはクリックでリストを一つずつ表示するものもありますが、Decktapeは自動的にすべてのリストを表示した状態にしてくれ
ExportToExcel - Web上でデータをExcelにエクスポート
MOONGIFTはオープンソース・ソフトウェアを紹介するブログです。2021年07月16日で更新停止しました Webブラウザでデータをダウンロードしたいというニーズはよくあります。データフォーマットとしては幾つもありますが、特に要望が多いのはExcelフォーマットではないでしょうか。CSVでも良いですが、より使いやすいフォーマットのはずです。 そこで使ってみたいのがExportToExcelです。クライアントサイドでExcelファイルを生成できます。 ExportToExcelの使い方 出力前のフォーマットとしてはJSONが利用できます。 さらにHTMLのテーブルも対象にできます。 ダウンロードされたExcelファイルです。 ExportToExcelは値のフォーマットなどは指定できません。基本的にCSVの代わりに出力する程度と考えた方が良いでしょう。しかしCSVで勝手なフォーマット変換が
Paradeiser - ハンバーガーメニューに代わるモバイル向けメニュー表示 MOONGIFT
モバイル向けのWebサイトではメニュー表示にハンバーガーメニューがよく使われます。しかし、実際のところハンバーガーメニューが一般的に分かりやすいわけでもありません。むしろタップして何が出るのか分からず躊躇してしまう人が多いでしょう。 そこで使ってみたいのがParadeiserです。ハンバーガーメニューに変わるメニュー機能を提供します。 Paradeiserの使い方 このように画面のヘッダー部にアイコンが並びます。 数が増えても大丈夫です。 Moreをタップすると追加のメニューが表示されます。 Paradeiserはスクロールするとヘッダー部のアイコンが自動的に消えるようになっています。そしてちょっと戻ると再度表示されます。ヘッダーにメニューが並ぶのはWebサイトでよく見られた形式ですが、常にあると邪魔になります。両方のいいとこ取りな機能ではないでしょうか。 ParadeiserはJavaS
p5.js - Processingライクに使えるグラフィックスライブラリ MOONGIFT
Processingといえばグラフィカルなアート作品を生み出す言語として知られています（またはArduinoで使える言語として知っている方も多いでしょう）。しかし専用の言語を覚えないといけないという点において利用を躊躇してしまっている方も多いはずです。 そんな方に使ってみて欲しいのがp5.jsです。グラフィックス、インタラクティブな体験を生み出すJavaScriptライブラリです。 p5.jsの使い方 単純に線が上がってくるだけの例。 上のデモコードは次のようになります。setupとdrawで構成されます。非常に分かりやすいです。 var y = 100; function setup() { createCanvas(720, 400); stroke(255); frameRate(30); } function draw() { background(0); y = y - 1; i
Sirius UI - Bootstrap/Vue.jsを組み合わせたUIデザインテンプレート MOONGIFT
UIライブラリは幾つ知っておいても役立つものです。Webサイトの雰囲気に合わせてピックアップしたり、機能によって差別化もできるでしょう。すべての要件を一つのUIフレームワークで達成できる訳ではありませんので、色々知っておくとぴたりと当てはまる場面があるはずです。 今回はSirius UIというUIフレームワークを紹介します。多数のUIコンポーネントが提供されています。 Sirius UIの使い方 スクリーンショット多めで紹介します。まずはボタン、ラベル、バッジ、フォーム、アラートなど。 ナビゲーション、ドロップダウン、テーブル、ページネーションなどが提供されています。 ログインのモーダル実装例。 タブとイメージ、カルーセル。 トップページ風レイアウト。 機能一覧風。 フッター。 Sirius UIのベースはBootstrapとなっており、さらにFlexboxとVue.jsを組み合わせていま
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
BotUI - Web上で作るボット対話UI MOONGIFT
Mesh - 表データからJavaScriptコードを生成