MOONGIFTはオープンソース・ソフトウェアを紹介するブログです。2021年07月16日で更新停止しました Web上でのアニメーション、エフェクトについては多くの問題を抱えています。特に大きいのは、その実行速度のようです。CSS3を使うと改善しますが、それでも複雑なアニメーションが行える訳ではありません。 そこで生み出されたのがHTML GLです。WebGLでDOMをレンダリングすることで、その後のアニメーション処理を大幅に改善するライブラリです。 HTML GLの使い方 HTML GLでは元々のHTMLがあった上で、それをWeb GLで再現します。かつ、元々のDOM構造は廃棄します。 こんな感じの揺らいだアニメーションも高速に動作します。以下はアニメーションGIFなので粗いですが、実際にはFPS 60出ています。 エフェクトはダイナミックに適用できます。オプションも数多く用意されていま
HTML iOS NotificationsはHTML/JavaScritp製のソフトウェア（ソースコードは公開されていますがライセンスは明記されていません）です。 iOSやAndroidなどのモバイルでは通知機能が便利に使われています。それはアプリに限らず便利に使えるはずです。そこで使ってみたいのがHTML iOS Notificationsです。 デスクトップ版。画面上部に通知が表示されています。しばらく経つと消えます。 複数出すこともできます。 レスポンシブに対応しています。 iPhoneで出す場合は画面幅いっぱいに広がるようです。 Webなので画像やメッセージ、クリックした時のアクションなどは自由に操作できます。スマートフォンに最適化されたWebサイトで使うとまるで本物のネイティブ風になるのではないでしょうか。 MOONGIFTはこう見る HTML iOS Notification
Metro JSはjQuery/JavaScript製のオープンソース・ソフトウェア（MIT License）です。 Windows 8-style UIは情報のダッシュボードとして使う分には良いインタフェースではないかと思います。そんなWindows 8-style UIを自分のサイトにも取り込みたいと考える方はMetro JSを使ってみると良いのではないでしょうか。 基本サンプルです。ボックスがタイル状に並びます。 タイルごとに横から別なボックスがスライド表示される機能があります。 タブなどを使ってボックスの表示を切り替えるデモです。 タイルをさらに1/4に区切って表示を行います。 さらに1/2や1/9に区切る事もできます。 ドラッグして移動できるタイルにもできます。 タイルに編集機能を持たせるデモ。設定を保存したりできます。 下のアプリバーだけを使う事もできます。 組み合わせるとこん
PicoはPHP製、MIT Licenseのオープンソース・ソフトウェアです。 CMS（コンテンツマネジメントシステム）と言えばデータベースにコンテンツを入れて、システムがそれを一覧にしたり詳細ページを作ったりします。運営担当者が自由にできるところは限られるものです。しかしPicoであればカスタマイズが容易でかつ高速なCMSが手に入ります。 フォルダを配置するだけで準備は完了です。インストールの手間もありません。 ファイル構成です。contentディレクトリの下にMarkdownで書かれたコンテンツがあります。 テーマ、プラグインがサポートされています。テンプレートエンジンはtwigになります。 Markdownファイルを修正すれば、それが自動的にコンテンツに反映されます。 テンプレート。見ても分かる通り簡単な作りです。 Picoはシンプルであり、データベースも不要で使える手軽なCMSとな
AtratusはWindows用のオープンソース・ソフトウェア（LGPL）です。 Windows環境でLinuxのコマンドやソフトウェアを使いたいという要望は昔からあります。古くはCygwinがありましたが、今回はAtratusを紹介します。Atratusの目標はLinuxのバイナリをそのままWindows上で実行できるようにすることにあります。 コマンドプロンプトです。lsコマンドを打つとちゃんとリストが返ってきます。 別なアスキーベースのゲーム（？）です。 テトリスもあります。 ちゃんと遊べます。十字キーだけで動きます。 スネークゲーム。アスキーなゲームですが意外と面白いです。 コマンド群です。Windows側では特にコンパイルなどはしていません。 Atratusではソースからコンパイルして、といった面倒な作業がないのでインストールすればすぐに使い始められます。提供されているコマンドの
Sharefestはnode.js/JavaScript製のオープンソース・ソフトウェア（Apache License 2.0）です。 ネットワークを介してファイルを送ろうと思ったらよく使われるのがファイルアップローダー系のサービスです。今回はサーバ上にファイルを保存することなく複数人への同時配信を可能にする、Sharefestを紹介します。 トップページです。まず共有したいファイルをドロップします。 そうするとURLが生成されます。この時点ではファイルはオンラインで送られていませんので、すぐにURLが表示されます。 別なブラウザからアクセスすると、すぐにダウンロードが開始されます。これはWebRTCを使ってリアルタイムに送受信が行われます。 SharefestはWebRTCを使って指定したファイルをP2Pで送信します。その際の共通のセッションとしてサーバを使っています。WebRTCなので
BaïkalはPHP製、GPL v3のオープンソース・ソフトウェアです。 社内での情報共有の基礎になるのがスケジュールやアドレス帳の共有です。外部サービスを使っても良いですが、社内でCalDAV/CardDAVサーバを立ち上げるならば採用したいのがBaïkalです。 インストールを開始します。ウィザードに沿って進めていくのみです。データベースはMySQLの他、SQLiteも選択できます。 ダッシュボードです。まずユーザを追加します。 格好いいUIでツールチップも表示されてとても入力しやすいです。 ユーザに紐づいたカレンダーが自動的に生成されます。 こちらはアドレス帳です。 Webベースの管理画面も備わっていますが、基本的な利用は全てクライアントソフトウェアから行います。iPhoneやMac OSX、Thunderbird、Androidなどの多様なデバイスがCalDAV/CardDAVをサ
DiagramoはWebベースのフローチャートアプリケーションです。 個人的にCacooというサービスを好きでよく使っているのですが、機密性の高いドローなどではクラウドサービスが使えないかも知れません。そんな時に試してみて欲しいのがDiagramo、Webベースのフローチャートソフトウェアです。 インストールします。ウィザードで進めていくだけです。 メイン画面です。左側にステンシル、中央が実際に配置する部分です。 日本語も使えます。 ネットワークやUMLも作成できます。 ステンシルがドラッグアンドドロップではなくクリックベースなのはちょっと残念ですが、操作性は悪くありません。画像エクスポートは有料の範囲になっていますが、フローチャートをはじめとする図面の共有目的であれば十分ではないでしょうか。 DiagramoはPHP製のオープンソース・ソフトウェア（GPL）です。 MOONGIFTはこう
FakeSMTPはJava製、マルチプラットフォームで使えるダミーのSMTPサーバです。 テスト用にダミーのSMTPサーバが必要になったらFakeSMTPを使ってみましょう。Java製なのでマルチプラットフォームで使えて便利です。 メイン画面です。サービスを開始します。 開始しました。この状態でプログラムからメールを送ってみます。 リストに送信したメールがあがってきます。 ダブルクリックで本文が読めます。 ログです。 最後のメッセージは細かく見られます。 実際のメールアドレスを使って開発していて、間違って一括メール送信してしまったなどといったら目も当てられません。FakeSMTPを立てて決してメール送信されないようにしておけば安全に開発、運用ができるでしょう。 FakeSMTPはJava製のオープンソース・ソフトウェア（BSD License）です。 MOONGIFTはこう見る メール周り
mysqlvizはMySQL/SQLiteの構造を可視化するライブラリです。 DBを使ったシステムを構築していると必要になるのがER図ではないでしょうか。そんなER図を実際のデータベースのダンプファイルをベースに描き出すのがmysqlvizです。 ヘルプです。 まずdotファイルを生成します。 さらにdotファイルをpngに変換して得られた結果です。 mysqlvizはMySQLとSQLiteに対応しています。MySQLの場合はダンプファイル、SQLiteの場合は実際のデータベースファイルを読み込んでdotファイルを出力します。後はGraphvizを使ってPNG画像に変換する仕組みになっています。 mysqlvizはPHP製、GPL v3のオープンソース・ソフトウェアです。 MOONGIFTはこう見る mysqlvizの面白いところはMySQLについてはダンプファイルを使っているということ
pixi.jsはWebGL/Canvasに対応した2Dゲームレンダリングエンジンです。 Webブラウザで遊べるゲームはインストールせずに始められる分、敷居はとても低いと言えます。しかしゲームの質を落とせる訳ではありません。特にアクションゲームにおけるレスポンスは大事です。そこで使ってみたいのがpixi.jsです。 pixi.jsを使ったゲーム、RUNpixieRUN。Jetpack系ゲームです。 タップまたはクリックしていると上に浮かび上がります。 メーターがたまると高速化。 障害物に当たったりマグマ（？）に落ちるとゲームオーバー。 iPhoneでも十分遊べるレベルです。 こちらはウサギが飛び回るデモ。 多数のバブルが動き回るデモ。数多くのモデルを描画できます。 こちらは回転するモデル。 pixi.jsはWebGL/Canvasを使ってレンダリングを行います。選択は自動的に行われるようにな
Speak.jsはJavaScriptだけでテキストを読み上げるソフトウェアです。 Webブラウザで音声ファイルを指定してJavaScriptで解析、なんてソフトウェアもありますが今回は一から“音声”を生み出してしまう驚きのソフトウェア、Speak.jsを紹介します。 ボタンを押すとHello Worldと話します。 こんな感じで任意の言葉を話させることもできます。 Speak.jsはジェネレータを通じて音声を動的に生み出します。対応しているのは英数字のみとなっており、日本語には対応していません。常に動的に生成しているので自由なテキストを読み上げさせることができます。 Speak.jsはJavaScript製のオープンソース・ソフトウェア（GPL）です。 MOONGIFTはこう見る テキストを外部サーバに送って、それを音声ファイルにして返すAPIも世の中にはあります。当然、こちらの方が英語
jQuery TextExtは自動補完をはじめとする便利な機能が多いタグ入力ライブラリです。 タグ入力機能を持ったWebサービスは多いですが、入力しやすいものは多くありません。そこで使ってみたいのがjQuery TextExtです。 こんな感じでタグ入力ができます。×ボタンを押せば消えます。 他の入力から追加もできます。 自動補完。 入力した値は配列で受け取れます。 自動補完のカスタマイズも可能です。 削除だけでなく、値の変更もできます。 予め入力された状態にもできます。 タグ入力で必須とも言える入力補完や入力後の表示変更、placeholder、×ボタンによるキャンセルなど必要な機能は概ね押さえてあります。デザインを自分のサイト向けにアレンジすればすぐに使えそうです。 jQuery TextExtはjQuery/JavaScript製、MIT Licenseのオープンソース・ソフトウェア
jpgjsはJavaScriptによるJPEG読み込みライブラリです。 JavaScriptによるバイナリハックは今なお熱い分野です。今回はJPEGファイルを解析、表示を行うjpgjsを紹介します。 左から順番に通常のJPEG、プログレッシブ、グレースケールとなっています。 jpgjsでは指定したJPEGファイルを解析し、Canvas上に描画しています。現状のままでは普通に表示したのと変わりませんが、エンコーダーが実装されるとWeb上でJPEGファイルを加工したり生成したりできるソフトウェアが作れるようになります。 jpgjsはJavaScript製、Apache License 2.0のオープンソース・ソフトウェアです。 MOONGIFTはこう見る Webブラウザで扱える画像系のリソースとしてはJPEG/GIF/PNG/SVGがあります。SVGやCanvasで描いたものをPNGで出力でき
xnesはJavaScriptで作られたスーパーファミコンエミュレータです。 これまではローカルで実行するのが当たり前だったソフトウェアがどんどんWeb上で実行されるようになっています。今回はスーパーファミコンのエミュレータをJavaScriptで実現してしまったxnesを紹介します。 サンプルです。音は出ませんが動作は問題ありません。 フルスクリーンモードもあります。こうなると普通にスーパーファミコンの気分です。 Web Workerを使ったパターンもあります。これはGoogle Chromeだと遅い…。 xnesはC言語で開発されているスーパーファミコンエミュレータをEmcscriptenを使ってJavaScriptに変換しています。もちろんその後の修正はあると思いますが、実際動いてしまうというのが凄いです。 xnesはJavaScript製のソフトウェア（ソースコードは公開されていま
MugはJavaScriptのコードをコンパイルしてJavaの中間コードにしてしまうソフトウェアです。 ここ最近、プログラミング言語同士の壁が徐々に破壊されている気がします。あるプログラミング言語上で別なプログラミング言語を動くようにしたり、置き換えてしまったりするような類です。今回はその一つ、JavaScriptをJavaVM上で動かすという、かなり無茶な気がしなくもない、そんなソフトウェアMugを紹介します。 元コードです。 コンパイルしました。 実行しました。確かに出力されています。 デモ2です。確かにJavaScriptです。 こちらもJVM上で実行されています。 MugはシンプルかつスタティックなJVMのためのJavaScriptコンパイラーです。書き方に多少の特徴はありますが、コードはあくまでもJavaScriptです。それをコンパイラを使ってclassファイルにします。その結
mViewerはWebベースのシンプルなMongoDB管理インタフェースです。 最近はNoSQLを運用の一部に使うことが増えてきました。そうなると必要になるのが管理ツールです。すぐに使えて手軽なものが良ければmViewerを使ってみましょう。起動コマンドも用意されていて簡単です。 トップページです。ログインします。 ログインしました。左側にデータベースが並んでいます。 データベースを選択するとコレクションが表示されます。 コレクションはツリーテーブルで表示もできます。 サーバの状況表示。 データベースの状況表示。 ツリーを開いてさらに内部の値を確認できます。 Flashベースの利用状況モニタリング。 新しいデータベースの作成もできます。 コンテクストメニュー。 デモ動画です。 mViewerはデータベースの作成や削除、コレクションの作成、更新と削除、GridFSファイルの追加、表示、ダウン
DrapacheはDropbox内のファイルを読み込んで動的に動かすWebサーバです。 DropboxではPublicに入れたファイルをHTTPを通じて読み込めるようにしています。この機能を使って静的なWebサイトを提供している人もいます。しかしそれで十分ではありません。時代は動的システム、Dropbox内のファイルを動的システムに対応させるソフトウェアがDrapacheです。 まずドメインを取ります。 次にDropboxをコネクトします。 接続を許可します。 完了です。そうするとアプリフォルダの中にDrapacheフォルダができあがります。 ファイル構成はこんな感じです。 サンプルのスクリプトです。確かに動的ファイルが動いています。 動的です。もちろん修正すれば若干のタイムラグはあれど反映されます。 Drapacheの仕組みとしては登録したユーザのデータを読み込み、DrapacheがWe
SpahQLはJavaScriptオブジェクトのデータ抽出に使えるクエリライブラリです。 WebアプリケーションではデータをJSONで利用するのが一般的です。データが大量にあるのであれば、そこから欲しいデータだけを抽出する仕組みが必要になるでしょう。JavaScriptでそれを可能にするのがSpahQLです。 例です。hash1というキーに対応したデータを取り出しています。 ネストして調べられます。 配列、ハッシュどちらにも使えます。 配列の場合は0などとキー指定もできます。 配列でサイズが1以上のものをピックアップしています。 データは抽出するだけでなく、プロパティを使ってサイズやデータの種別を調べることもできます。さらに正規表現を絡めてマッチするか否かをチェックするといった機能もあります。node.js、Webブラウザどちらでも使えるライブラリになっています。 SpahQLはJavaS
uptimeはnode.jsで作られたWebサーバ死活チェッカーです。 Webサーバがきちんと正常に動き続けているかどうか一番簡単にチェックするのは定期的にアクセスしてレスポンスタイムを見ることです。そんなWebサービスの死活チェックに使えるのがuptimeです。 サーバを立ち上げました。最初に監視するWebサーバを設定します。 URLと監視する間隔を指定するくらいです。 監視を開始しました。グラフは自動更新されないのでご注意ください。 イベントがあればこちらに出力されます。 グラフではなく一覧で結果を確認できます。 徐々にグラフが更新されていきます。 uptimeは1000以上のWebサーバを一括で監視できるパフォーマンスを持っています。またダウンしている際にはWebアラートを表示できます。エラーがあった際にはHTTPステータスやその内容を記録してくれます。サーバはタグを使ってグループ管
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く