MOONGIFT更新停止のご連絡 MOONGIFT
いつもMOONGIFTをご覧いただきありがとうございます。タイトルにあります通り、MOONGIFTの更新を恒久的に停止するご連絡となります。最終更新記事は2021年07月16日になります。 背景 MOONGIFTはオープンソース・ソフトウェアの紹介サイトとして2004年01月29日に運営を開始しました。一番最初はlivedoorブログにて開始し、その後様々なブログプラットフォームを利用し、さらに一時はサイト名の変更（Open Alexandria）を経て、MOONGIFTという名称で運営を続けてきました。 MOONGIFTでは、これまでに16,000以上のソフトウェア（一部オープンソース・ソフトウェア以外のソフトウェアを含む）を紹介してきました。オープンソース・ソフトウェアは多くの先進的な技術への取り組みが行われており、オープンソース・ソフトウェアを知ることはソフトウェアの開発トレンドを知
glauth - 開発や個人利用に最適なLDAPサーバ
MOONGIFTはオープンソース・ソフトウェアを紹介するブログです。2021年07月16日で更新停止しました 個人的に認証統合は好きで、一つのIDでシステム全体を管理したいと考える派です。そのベースとしてよく使われるのがLDAPです。Active DirectoryもLDAPをベースとしており、社内外における認証統合に一役買っています。 そんなLDAPサーバですが、ちょっと立てるのが面倒に感じていました。しかしglauthであれば開発用途や個人で簡単に使えそうです。 glauthの使い方 設定ファイル指定して起動するだけです。とても簡単です。 $ glauth -c sample-simple.cfg 15:18:52.896862 doConfig ▶ DEBU 001 Debugging enabled 15:18:52.896892 startService ▶ DEBU 002 W
linedraw - 画像をSVGに変換
MOONGIFTはオープンソース・ソフトウェアを紹介するブログです。2021年07月16日で更新停止しました 画像を変換する類のソフトウェアは多数あります。例えばアスキーアートに変換したり、グレースケールにする、油絵風にするなど様々です。手法を知っておけば、目的に応じてぴったりなソフトウェアが選べるはずです。 今回紹介するlinedrawは画像をSVGにしてくれるソフトウェアです。他では見られないものだけに知っておくと役立ちそうです。 linedrawの使い方 元画像。 変換後。SVGです。 筆者の写真を変換した場合。 linedrawはラフなスケッチ的な感じで画像をSVGに変換してくれます。SVGなので縮小や拡大をしても綺麗なままです。構造が分かれば、JavaScriptから操作することもできるでしょう。バイナリの画像ではないところが使い道につながりそうです。 linedrawはPyth
kingraph - 家系図/組織図ジェネレータ MOONGIFT
組織図であったり、家系図といった図を描こうと思ったらどんなツールを使っているでしょうか。ドローツールも使えますが、編集したりするのが面倒だったりします。Excel職人の方はやはりExcelを駆使して作り上げてしまうかも知れません。 今回はWebベースで使える家系図を作れるkingraphを紹介します。 kingraphの使い方 kingraphはYAML形式で組織図を定義します。例えば以下のようになります。 families: - parents: [Marge, Homer] children: [Bart, Lisa, Maggie] - parents: [Lisa, Milhouse] children: [Zia] people: Marge: fullname: Marjorie Bouvier Simpson そしてSVG/PNG/DOTファイルとして出力できます。 king
svgcleaner - SVGファイルのサイズ軽減
MOONGIFTはオープンソース・ソフトウェアを紹介するブログです。2021年07月16日で更新停止しました 画面の高画質化に伴って注目されているのがSVGです。ベクターベースなので拡大縮小に左右されることなく綺麗に表示できます。今後、画像サイズが上がれば上がるほど、ニーズが高くなっていくと思われます。 そんなSVGですが、余計な情報が多いとサイズが肥大化してしまいます。そこで使ってみたいのがsvgcleanerです。 svgcleanerの使い方 メイン画面です。SVGファイルを登録しました。 クリーンアップを実行しました。1.38%削られたようです。 フォルダを登録してまとめて処理もできます。フォルダ全体では35%も削減されました。 svgcleanerにはファイルを編集した履歴に伴う情報が多数入っています。それらの多くは表示上は不要な情報でしょう。そうした情報を削り落とすことでサイズ
Odoo - SVGを使ったオドメーター
MOONGIFTはオープンソース・ソフトウェアを紹介するブログです。2021年07月16日で更新停止しました 大きな数字の目標を達成した時、イベントの賞金を表示する際に使われるのがオドメーターを使ったカウントアップの表示です。数字がくるくると回転して100万、1,000万などの数字になるエフェクトは誰もが見たことがあるでしょう。 そんな表示をWeb上で実現できるのがOdooです。SVGで作られており、軽快に動作します。 Odooの使い方 実際に使っているところ。激しく回転しています。 回転している様子です。 円や¥を利用することもできます。フォントはスタイルシートで変更するのが良さそうです。 Odooを使うと回転している時のワクワク感があります。使い方としては最終的な数字（円などの通貨記号があってもOKです）を指定するだけで、簡単に使えます。登録ユーザ数や運営日数など大きな数字を達成する時
Goat - アスキーアートをSVGに変換
MOONGIFTはオープンソース・ソフトウェアを紹介するブログです。2021年07月16日で更新停止しました アスキーアートと画像は切り離せない関係にあります。面白い写真が誰かの手によってアスキーアート化されたり、逆にアスキーアートのキャラクターがイラスト化されたりします。それぞれに良さがあります。 今回はアスキーアートをSVGに展開するGoatを紹介します。テキストで作った作品が滑らかな直線、曲線で描かれるのは面白いです。 Goatの使い方 例です。こんな矢印があります。 ^ | < ---+---> | v Goatで変換するとこんな格好良いSVGになります。 こんな複雑な図形も描けます。 .----. .----. / \ / \ .-----+-----+-----. + +----+ +----. | | | | .-----+-----+-----+-----+ \ / \ /
Google製のGit用ソースコードレビューシステム·Gerrit MOONGIFT
ソースコードのレビューはシステムの品質を高めるのに大切な作業だ。GoogleやVMWareでも使われており、ブラウザを使って差分を確認してコメントができるようになっている。社内向けには拙作のSubversionソースコードレビューシステムの宍道湖がある（Rails製）。 Git向けソースコードレビューシステム この手のツールはSubversion向けのものが多かったが、Gitでも使いたいならGerritに挑戦してみよう。 今回紹介するオープンソース・ソフトウェアはGerrit、Git向けソースコードレビューシステムだ。 GerritはGoogleが大々的に発表している訳ではないが、Google社員が開発しておりAndroidのオープンソースプロジェクトにおけるソースコードレビューにも利用されている。他のシステム同様に差分を見て、そこにコメントすることが可能だ。 差分を見てコメントする 差分
SVG panzoom - SVGのズームイン/アウト機能を提供 MOONGIFT
Web上でSVGが多く使われるようになってきました。SVGの利点の一つに挙げられるのが、ベクターなので拡大しても綺麗ということです。拡大や縮小するというのは、情報の粒度を自分で変更したいという時に便利です。 そこで紹介したいのがSVG panzoomです。その名の通り、SVGのズームイン/アウトを実現するためのライブラリです。 SVG panzoomの使い方 サンプルです。多くの情報が散りばめられています。 拡大しました。マウスでできます。 逆にパンしました。これでも綺麗な線で描かれるのがSVGの良さですね。 実際の動きです。 実際の使用例です。書籍同士の関連度を可視化しています。 SVGはJavaScriptと組み合わせたインタラクティブなコンテンツを作るのに向いています。また、ベクターなので軽量であり、それでいて高解像度にも対応できるなどモバイルなどにも向いています。こうしたライブラリ
Drawingboard.js - 自分のサイトに埋め込めるドローライブラリ MOONGIFT
Canvasの利用例として、ドローイングはよくあります。その多くはドロー機能メインのWebサイトで、コラボレーションしたり、画像として保存できるものになるでしょう。しかし皆がみんな、ドローイングサイトを作りたい訳ではありません。 そこで使ってみたいのがDrawingboard.jsです。自分のサイトに組み込んで使えるドローライブラリとなっています。これならば既存のサイトと組み合わせた使い方ができるようになります。 Drawingboard.jsの使い方 使い方は簡単で、CanvasのIDを渡すだけです。 こんな感じでカスタマイズもできます。 線種を変えたり、画像でダウンロードする機能もあります。 Drawingboard.jsは自分たちのサイトに埋め込んだり、既存の機能と合わせて使えるようになっているのが利点です。手書き画像をサーバに送れる機能を実装するのも良いでしょう。カスタマイズが容易
jQuery DrawSVG - SVGをアニメーションしながら描画
画面の解像度が高まるのに合わせて注目を集めているのがSVGです。これまでのバイナリと異なり、SVGはXMLベースのテキストデータなので縮小、拡大しても綺麗なままです。 そしてテキストデータということは、その書き方もデータがすべて読み取れるということです。そこで作られたのがjQuery DrawSVGになります。 jQuery DrawSVGの使い方 jQuery DrawSVGのデモです。SVG画像がアニメーションしながら描かれているのが分かります。 画像と組み合わせるとこんなこともできます。 jQuery DrawSVGを使うとSVGに書かれている内容をアニメーションしながら描写してくれます。アニメーションGIFのようですが、よりスムーズで綺麗に描かれます。SVGを画像とはまた違った使い方で楽しめるのではないでしょうか。 jQuery DrawSVGはjQuery/JavaScript製
flowchart.js - SVGのフローチャートを生成するJavaScriptライブラリ MOONGIFT
システムやワークフローを分かりやすく説明する際にフローチャートを使うことがあります。特に業務システムなど、多数のシステムが複雑に組み合わさって処理が実行される場合、きちんと可視化されているかどうかで結果が大きく変わる可能性があります。 Excelで仕様書を書いているとExcel上で完結しそうです。しかしこれでは検索性やメンテナンス性がよくありません。そこで仕様書をMarkdownやHTMLで書いているならばflowchart.jsを使ってみましょう。 flowchart.jsの使い方 flowchart.jsのデモです。専用の記述方法に沿って書くことで、右側のようなフローチャートが生成されます。URLがあるところはクリッカブルになっています。 さらにカラーリングの指定もできたり、縦ではなく横に広がっていく形にもできます。 flowchart.jsはSVGで生成しているのがポイントで、元文書
Tern - JavaScriptコード解析エンジン
MOONGIFTはオープンソース・ソフトウェアを紹介するブログです。2021年07月16日で更新停止しました プログラミングする上で必須の機能と言えるのがコード補完です。そのためにはまずコードの解析が行われなければなりません。正しくコードが解析されることで、既にある変数やライブラリ名を補完できるようになります。 JavaScriptをコーディングする際に使えるコード解析ライブラリがTernです。Web上はもちろん、Emacs/Vimなどのプラグインも提供されているソフトウェアです。 Ternの使い方 Ternを使うとこんな感じにIDE的な入力補完ができます。 関数に対する引数の表示も。 定義元に飛ぶこともできます。 jQueryやunderscoreにも対応しています。 TernはWeb、Emacs、Vim、Sublime Text、Brackets、Light Table、Eclipse
kuromoji.js - Webブラウザ上で分かち書き！ MOONGIFT
テキストから意味を読み取るというのは非常に難しく、そのための専用ソフトウェアが存在するほどです。そしてテキスト解析手法の一つとして知られているのが分かち書きです。日本語であればChasenがよく知られています。 kuromoji.jsはそんな分かち書き処理をJavaScriptで行ってしまおうというソフトウェアになります。KuromojiというApache財団のオープンソース分かち書きエンジンをJavaScriptにポーティングしています。 kuromoji.jsの使い方 こちらはデモです。Webブラウザベースで動作しています。nodeでも使えます。 適当な文章をリアルタイムに分かち書きできます。 kuromoji.jsは辞書ファイルをAjaxで取得しています。そのためサイズは大きくなりますが、分かち書きの精度はとても高くなります。サーバサイドで辞書を用意したり分かち書きエンジンを用意する
Walkway.js·SVGコンテンツを取得して自動アニメーション MOONGIFT
HTML5が正式勧告になり、SVGの利用も今後ますます広がっていくものと思われます。ベクターベースのドローができるので拡大表示したとしても綺麗に描けるのが特徴です。さらにもう一つ、アニメーションが書けるというのも特徴です。 とはいえSVGアニメーションを作るというのはそうそう簡単ではありません。もうちょっとシンプルなアニメーションでよければ、Walkway.jsを使ってみるのはいかがでしょう。 Walkway.jsの使い方 Walkway.jsを使ったサンプルです。できあがったSVGから、アニメーションを自動生成しています。 Walkway.jsの場合、すでにあるSVGファイル（が入ったHTML）からアニメーションを生成しています。それだけに作るのは簡単と言えそうです。あまり複雑なドローを描くのは難しそうですが、グラフや簡単なオブジェクトであればアニメーションしながら綺麗に描いてくれるので
ng-admin - 次世代のWeb管理画面
MOONGIFTはオープンソース・ソフトウェアを紹介するブログです。2021年07月16日で更新停止しました 最近はサーバサイドではHTMLレンダリングせず、RESTfulなWeb APIを使ってデータを取得、表示するといったWebアプリケーションが増えています。そうした中、運営側の管理画面においても求められるものが変わってきています。 そこで今回は次世代の管理画面、ng-adminを紹介します。AngularJSを使ったWeb管理画面になります。 ng-adminの使い方 Web APIを用意しておくことで、ユーザ向けはもちろんのこと管理画面においてもスムーズな操作ができるようになります。pushStateにも対応していますので、URLはユニークになるようです。 ng-adminはJavascript/HTML5製のオープンソース・ソフトウェア（MIT License）です。 Angul
Jailed - 任意のJavaScriptを安全にサンドボックス実行
ユーザがJavaScriptを自由に実行できると嬉しいですが、中には悪意をもって実行する人たちがいます。そのためクロスドメイン、Cookieの許容範囲など制約が幾つも存在します。これらがあるために、ユーザにJavaScriptの記述を許可しないといったサイトも少なくありません。 しかし安全なJavaScriptだけであれば通しても良いのではないでしょうか。そのための仕組みがJailedです。 Jailedの使い方 JailedはWeb Workersを使ってJavaScriptを実行することで画面をロックさせない仕組みになっています。また、許可していないコード（例えばalertなど）は実行できないようになっています。 面白いのは while(true); のようなコードを実行しても画面はロックされず、しばらく待つとエラーが出るといった仕組みになっています。実行結果を受け取るだけの仕組みなの
Epoch·リアルタイム描画に対応したCanvas/SVGグラフライブラリ MOONGIFT
Webアプリケーションが企業においても利用されていくようになると必要になるのがグラフです。膨大なデータを見やすく整形して表示し、トレンドを見つけられるようにしなければなりません。 そのためには多種多様なグラフライブラリを知り、それがどのニーズにマッチするかを把握しておく必要があります。今回はリアルタイム系グラフに向いたEpochを紹介します。 Epochの使い方 エリアグラフ。滑らかな曲線がいいですね。 棒グラフ。 複数のグラフを比較もできます。 線グラフ。滑らかに描けます。 こちらも複数描画できます。 円グラフ。 分布図。 ヒートマップ。リアルタイムにデータを描画していきます。 ゲージ。こういうのも面白いですね。 棒グラフの積み上げ版。 エリアの積み上げ。 折れ線グラフの比較。 Epochはデベロッパーフレンドリー、リアルタイムグラフ、Canvas/SVG両方への対応が特徴となっています
Viz.js·Web上でGraphvizをSVGでレンダリング MOONGIFT
フローチャートなどの高度なグラフを描こうと思った時に使われるのがGraphvizです。テキストベースで記述していくだけでできるというのはやはり手軽です。しかしローカルソフトウェアをインストールしたり、セットアップしたりするのは面倒と感じる人も多いでしょう。 そこでさらに再利用性を高めてくれるのがViz.jsです。WebベースでGraphvizを使えるようにしてくれます。可能にするのはまたしてもEmscriptenなのですが、面白さを体感してください。 例として以下のようにGraphvizのDOT言語をそのままscriptタグに記述します。 <script type="text/vnd.graphviz" id="cluster"> digraph G { subgraph cluster_0 { style=filled; color=lightgrey; node [style=fill
なんと！JavaScriptだけでテキスト読み上げ·Speak.js MOONGIFT
Speak.jsはJavaScriptだけでテキストを読み上げるソフトウェアです。 Webブラウザで音声ファイルを指定してJavaScriptで解析、なんてソフトウェアもありますが今回は一から“音声”を生み出してしまう驚きのソフトウェア、Speak.jsを紹介します。 ボタンを押すとHello Worldと話します。 こんな感じで任意の言葉を話させることもできます。 Speak.jsはジェネレータを通じて音声を動的に生み出します。対応しているのは英数字のみとなっており、日本語には対応していません。常に動的に生成しているので自由なテキストを読み上げさせることができます。 Speak.jsはJavaScript製のオープンソース・ソフトウェア（GPL）です。 MOONGIFTはこう見る テキストを外部サーバに送って、それを音声ファイルにして返すAPIも世の中にはあります。当然、こちらの方が英語
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
