MOONGIFT更新停止のご連絡 MOONGIFT
いつもMOONGIFTをご覧いただきありがとうございます。タイトルにあります通り、MOONGIFTの更新を恒久的に停止するご連絡となります。最終更新記事は2021年07月16日になります。 背景 MOONGIFTはオープンソース・ソフトウェアの紹介サイトとして2004年01月29日に運営を開始しました。一番最初はlivedoorブログにて開始し、その後様々なブログプラットフォームを利用し、さらに一時はサイト名の変更（Open Alexandria）を経て、MOONGIFTという名称で運営を続けてきました。 MOONGIFTでは、これまでに16,000以上のソフトウェア（一部オープンソース・ソフトウェア以外のソフトウェアを含む）を紹介してきました。オープンソース・ソフトウェアは多くの先進的な技術への取り組みが行われており、オープンソース・ソフトウェアを知ることはソフトウェアの開発トレンドを知
Consolas - 開発者用のフォント
MOONGIFTはオープンソース・ソフトウェアを紹介するブログです。2021年07月16日で更新停止しました 2019年02月22日追記：こちら、ライセンスが非常に怪しい（というかブラック）です。記事は残しますが、ダウンロード/利用されないことをお勧めします。 プログラマーやWebデザイナーにとってフォントは気になる存在です。そのフォントの善し悪しで作業効率が大幅に変わってきます。視認性の悪いフォントを使うと不用意なバグを生み出してしまう可能性もあります。0やO、Iとlなどが見分けやすいものを選ぶべきです。 今回は開発者向けに作られたフォント、Consolasを紹介します。元々オープンソース・ソフトウェアではなかったのですが、v8.0からオープンソース（といっても現時点ではライセンスはありませんが…）になるとのことです。 Consolasの使い方 フォントの見栄えはこんな感じ。 コードを表
ExcelMerge - Excelファイルの差分ビューワー
Excelを仕事で使っていると、メールでやり取りしたり誤った上書きを避けるためにコピーを作ったりして次第に同じようなExcelファイルに埋もれることになります。二つのExcelファイルを並べて、どこが違うのか見比べた経験は誰しもがあるのではないでしょうか。 そんな方に使ってみて欲しいのがExcelMergeです。Excelファイルの差分チェックツールです。 ExcelMergeの使い方 簡易的なExcelファイルを二つ比べています。 変更されたセル、追加された行などにジャンプできます。 設定で色や動作を変更できます。 ExcelMergeは将来的にマージ機能の実装を目指していますが、現時点では差分表示までとなっています。とは言え、差分が見える形になっているだけで作業負荷は大幅に軽減されるのではないでしょうか。Excelをよく使っている方にお勧めです。 ExcelMergeはWindows用
excel2js - ExcelシートをWeb化
MOONGIFTはオープンソース・ソフトウェアを紹介するブログです。2021年07月16日で更新停止しました 日本にはExcel職人と呼ばれる人たちがたくさんいます。彼らにかかればどんなドキュメントであってもExcelで作られ、多くの業務システムがExcel VBAを駆使して作られます。 今回はその最高峰とも言える、Excelで作るWebアプリケーションを紹介します。それがexcel2jsです。 excel2jsの使い方 excel2jsはExcelで作られたシートをHTML/JavaScriptにしてくれるソフトウェアです。下の画像は元ファイルになるExcelファイルです。式も埋め込まれています。 それがこんな感じにWebブラウザ上で動くようになります。 Excelで動くものになりますので、サーバサイドと連携するなどというのは難しいでしょう。しかしちょっとした計算処理を行うものであればe
ECharts - 多種多様な表現に対応したグラフ/チャートライブラリ MOONGIFT
Webは表現力がそれほど高くないのが常に問題視されています。特に業務系システムではグラフ/チャートを使ってデータを可視化する必要があります。最近ではビッグデータが話題にあがっており、大量のデータを効率的に描画しなければならなくなっています。 そこでEChartsを紹介します。ビッグデータモードまで用意された多種多様なパターンの用意されたチャートライブラリです。 EChartsの使い方 今回はその多様なグラフ、チャートを紹介します。 曲線のグラフ。 積み上げグラフ。 棒グラフ。 エリアグラフ。 曲線。かなり複雑です。 こちらもユニークです。途中で途切れています。 棒グラフですが、範囲が指定できています。 左右の比較グラフ。 複数グループの棒グラフ。 散布図。 こちらも散布図。 画像も合わせた表示。 散布図と色の組み合わせ。 ローソクチャート。 円グラフ。 より描画にこだわった円グラフ。 レー
chromeos-apk·Android用のAPKファイルをChrome/ChromeOS用に変換 MOONGIFT
ChromeOSがリリースされて、関連ソフトウェアもずいぶん増えてきたように見えますが、まだまだ実用上では物足りないと思っている人も多いのではないでしょうか。 そこに凄いソフトウェアが登場しました。なんとAPKファイルをChromeOSで動くように変換してしまうコンバータです。実際にはそればかりかWindowsやMac OSX、Linuxでも動かせます（かなり限定的ですが）。 chromeos-apkの使い方 chromeos-apkはnodeでインストールできます。 $ npm install chromeos-apk -g インストールが終わったら chromeos-apk でAPKファイルを変換します。 $ chromeos-apk com.soundcloud.android.apk なおAPKファイルについてはAPKダウンローダーを使うのが良さそうです。 後はできあがったフォルダ
Materialize - マテリアルデザインのためのCSSフレームワーク MOONGIFT
レスポンシブでWebデザインを組むのは当たり前、今のトレンドはマテリアルデザインにあるという時代になってきました。フラットUIを踏襲しつつ、アニメーションを効果的に使うことでさらにユーザビリティ高いデザインを可能にします。 主にモバイルアプリ用に使われていますが、Webデザインにおいても十分利用が可能です。今回はマテリアルデザインを実現するスタイルシートフレームワーク、Materializeを紹介します。 Materializeの使い方 今回はスクリーンショット多めに紹介します。 Materializeはレスポンシブかつマテリアルデザインのフレームワークになっています。開発の高速化、ユーザ体験重視、ドキュメントとサンプルを多めにして学習コストを低くするといった特徴があります。 MaterializeはHTML5/JavaScript/CSS3製のオープンソース・ソフトウェア（MIT Lic
Google製のGit用ソースコードレビューシステム·Gerrit MOONGIFT
ソースコードのレビューはシステムの品質を高めるのに大切な作業だ。GoogleやVMWareでも使われており、ブラウザを使って差分を確認してコメントができるようになっている。社内向けには拙作のSubversionソースコードレビューシステムの宍道湖がある（Rails製）。 Git向けソースコードレビューシステム この手のツールはSubversion向けのものが多かったが、Gitでも使いたいならGerritに挑戦してみよう。 今回紹介するオープンソース・ソフトウェアはGerrit、Git向けソースコードレビューシステムだ。 GerritはGoogleが大々的に発表している訳ではないが、Google社員が開発しておりAndroidのオープンソースプロジェクトにおけるソースコードレビューにも利用されている。他のシステム同様に差分を見て、そこにコメントすることが可能だ。 差分を見てコメントする 差分
Bootstrap Admin Theme - Bootstrap3に対応した管理画面テンプレート
これは知っておいて損はないでしょう！ Bootstrapの便利な使いどころとして管理画面があります。管理画面は限られた関係者しか使いませんのでBootstrap臭がしても気にすることはありません。それなりの表示がすぐに実現できるのは使い勝手を向上します。 しかしそんな適当な範囲を超えて実用性のある管理画面を実現できるBootstrapテンプレートがBootstrap Admin Themeです。Bootstarp 3系に対応していますので最新のウィジェットもばりばり使えるでしょう。 Bootstrap Admin Themeの主なページとしては、 ログイン ダッシュボード カレンダー グラフ ボタン/アイコン WYSIWYGエディタ フォーム/ウィザード テーブル その他ウィジェット が用意されています。これだけあれば後は組み合わせるだけで（Bootstrap本来の機能も使いつつ）リッチな
EasyStar.js - ゲーム用。最適な経路を発見するJavaScriptライブラリ MOONGIFT
HTML5ゲームなどでコンピュータのキャラクターを動作させる時にその経路をどう決定すれば良いでしょうか。やり方は幾つかありますが、まず考えるのは最短距離を見つけることでしょう。 しかしゲームでは通り抜けられないオブジェクトがあったり、通れてもコストが高い（川のような）道もあります。そういった障害物もふまえて経路探索ができるライブラリがEasyStar.jsです。 キャラクターが順番に走っていきます。 キャラクターは個々にスタート位置とゴール位置がことなります。そのため一時は同じ経路を歩んでもそれが最適とは限りません。 キャラクターの走り出すタイミングを変えるとそれがよく分かるかと思います。を EasyStar.jsHTML5のゲームで使う機会は多いと思います。また、そのアルゴリズムから参考になるポイントは多いのではないでしょうか。 さらに面白いのはEasyStar.jsには有償版のEasy
Open Camera - Android用のオープンソースカメラアプリ
MOONGIFTはオープンソース・ソフトウェアを紹介するブログです。2021年07月16日で更新停止しました Android用に高機能カメラアプリが欲しいあなたに！ スマートフォンと言えばカメラと言われるほど人気の高いジャンルです。Androidでも様々なコンセプトによるカメラアプリがリリースされています。そのどれを選んだら良いか迷ってしまうでしょう。 もしあなたがプログラマーであればオープンソースのカメラアプリなんていかがでしょう。もちろんライセンスだけでなく機能だって多彩です。それがOpen Cameraです。 Google Playで公開されていますのでインストールはとても簡単にできます。 ではまず起動してみましょう。 特徴的な機能として自動安定化というのがあります。自動で水平に撮影してくれるので奇麗に撮れるという機能です。フラッシュはオン、オフの他に常時つきっぱなしになるトーチモー
Maplace.js - 軽量なjQuery × Googleマップライブラリ MOONGIFT
Googleマップをプログラマブルに組み込むのに良さそうです。 GoogleマップはAPIの多彩さ、機能の柔軟さもあって様々なサービスで使われています。位置情報や地図を扱おうと思ったら一番に考えるのではないでしょうか。 そんなGoogleマップをさらに手軽に使えるようにしてくれるライブラリがMaplace.jsです。機能は限られますが広範囲に利用できそうです。 まずは簡単なデモ。地図の表示を行います。コードとしてはたった数行です。 // JavaScript var maplace = new Maplace(); maplace.Load(); // or new Maplace().Load(); // HTML <div id="gmap"></div> その結果は次のようになります。 シンプルな地図表示。 次はドロップダウンやリストを使ったマーカーのデモ。マーカーは自動的に中央に表
Gumby - Bootstrapの強力なライバルになるか！？シンプルかつ強力なCSS3フレームワーク MOONGIFT
CSS3フレームワークは数多くなってきたのでその特徴をちゃんと掴んでおかないといけないですね。 GumbyはSassを使ったCSS3フレームワークです。他のフレームワークと同じようにレスポンシブ、モバイルフレンドリーになっています。その特徴を見ていきましょう。 まずデスクトップからです。 ヘッダーバー。フラットだったり、幅が固定だったりと色々な形式が想定されています。 タイポグラフィ。可読性高いです。 リストだけでも黒丸、白丸、ドット、数字など多数用意されています。さらに定義リストまで！ ボタン。サイズ、色、形が様々です。片方だけ丸い、なんて便利そうですね。 インジケーターやラベル、アラート。こういうのもよく使いますよね。 フォーム。基本的にplaceholderを使った表示になっているようです。 テーブル。角丸サポートです。 タブ。幅が設定できます。 縦のタブもあります。 ドロワー。クリ
Webアプリのクライアントサイドの多言語化に·i18next Editor MOONGIFT
i18next Editorはnode/JavaScript製のソフトウェア（ソースコードは公開されていますがライセンスは明記されていません）です。 Webアプリケーションの多言語化対応を考える中で注目したいのがi18nextです。JSONフォーマットで記述した翻訳ファイルをベースにjQueryを使って多言語対応します。そのi18nextを編集できるエディタがi18next Editorです。 JSONで生成された表示です。左側が基本形（つまり英語が多いと思います）、右側が各国語の翻訳版になります。 エディタ表示した場合です。ソースを見て、ターゲットの方を修正します。 そうすると実際に変更された結果が反映されます。 i18next EditorではJSONファイルを分かりやすい形で修正できます。階層化されている場合は単純に.（ドット）つなぎで表示されますのでシンプルで使いやすいのではないで
CSVデータをベクターグラフィックスで表現·Raw MOONGIFT
RawはJavaScript製のオープンソース・ソフトウェア（LGPL）です。 表計算で作ったデータというとグラフで表すのが普通だと思います。しかしそれをさらに一歩越えてグラフィカルに表現してくれるのがRawです。 一例です。上がデータ部、下にあるツリーマップがそれを描画したものです。 グラフは色々と用意されています。こちらはバブルチャート。 このような進化図っぽいものもあります。 さらにグラフィカルに。 グルーピングを伴ったバブルマップ。 データも色々あります。 グリッドを使って表現されたグラフ。 グラフはPNG/SVG/JSONで出力できます。 RawはグラフにおいてD3.jsを使っています。データの向き不向きはありますが、CSVデータをビジュアル化する上で知っておくと役立つことがありそうです。 グラフは一般的な棒グラフ、円グラフ、折れ線グラフの他にもレーダーチャートやローソク図、エリ
Bootstrap Markdown - 使おう！BootstrapにマッチしたMarkdownエディタ MOONGIFT
Markdownでコンテンツを編集するサイトでは採用必須ですね！ 最近はテキスト編集をさせようと思うとまずMarkdownが筆頭に上がってくるようになりました。さらにWebサービス開発にBootstrapをベースにする人たちもたくさんいます。であればその二つが合わさって欲しいと思っている人は多かったはず。Bootstrap Markdownをぜひ使ってみましょう！ 使い方は簡単です。テキストエリアにdata-provide="markdown"を指定します。サンプルとしては以下のようなコードです。 <form> <input name="title" type="text" placeholder="Title?" /> <textarea name="content" data-provide="markdown" rows="10"></textarea> <label class="
Free PixelKit Bootstrap UI Kits - Bootstrapを一変させるフラットUIテーマ
Bootstrapは良いのだけれど、Bootstrapっぽさが如実に感じられるのが嫌だなぁと思っているプログラマーの方は多いはず。そこで使ってみて欲しいのがFree PixelKit Bootstrap UI Kitsです。フラットなUIでがらっと雰囲気を変えてくれること請け合いです！ 見てもらうのが一番だと思うので、まずはデモサイトから。 ということで実際に細かな部品を紹介していきたいと思います。 ベースはBootstrapながら、雰囲気が一変しているのでどこにもらしさを感じさせません。この辺りのカスタマイズ性の高さがBootstrapの良さなのかも知れませんが、全体を統一してデザインするのは相当大変な労力であろうと思われます。なお一部の部品はjQueryやjQueryプラグインを利用しています。 しかしBootstrapで制作しておけば後々流行が変わったとしてもそのテーマを取り入れてサ
iniscan·php.iniの設定ファイルをチェックして危険なポイントを洗い出し MOONGIFT
PHPは年々進化していて、それでいて過去のバージョンとの互換性もほぼ維持されています。しかしネットワークが進化する中で従来は使われていた設定が非推奨になっていることも少なくありません。 もしかするとWebサーバのPHPの設定が危険な状態になっているかも知れませんよ。それをチェックできるのがiniscanです。 iniscanはcomposerを使ってインストールします。まずはcomposer.jsonを下記の内容で作成します。 $ cat composer.json { "require": { "psecio/iniscan": "dev-master" } } そしてインストールを実行します。 $ sudo composer install Loading composer repositories with package information Installing depende
Resumable.js - HTML5で実現したリジューム付きファイルアップローダー MOONGIFT
アップロード途中で止まると相当なストレスですよね。そこで使ってみたいライブラリです。 HTML5を使うとファイルをドラッグ&ドロップでアップロードできるようになってとても便利になっています。しかしごく小さなファイルのアップロードであればまだしも、巨大なファイルをアップロードするとなるとまだ大きな問題が残っています。それがネットワークエラーです。 Webではファイルを一括でアップロードしますので、途中でエラーが起きるとまた最初からやり直しになってしまいます。これはクライアント/サーバ双方に負荷がかかる仕組みです。これを改善できるのがResumable.js、リジューム対応のファイルアップローダーです。 サンプルのnodeアプリケーションで実験します。 900MBくらいのファイルをアップロードします。 右側にある一時停止ボタンを押すとアップロードが停止します。 いつでも再開が可能です。 この仕
formatter.js - ユーザストレスの軽減に。JavaScriptで入力フォーマット制御 MOONGIFT
よくある入力フォーマットに沿っていない時のエラーによるイライラが軽減しそうです。 テキストボックスを使ってユーザに入力を行ってもらうのはシンプルですが、それが指定したフォーマットに沿っているかどうかを判断するのは大変です。その結果エラーになったりするとユーザにとっても大きなストレスになります。 そこで予め決まったフォーマットに沿ってしか入力できないようにしてしまうのが良さそうです。そのためのソフトウェアがformatter.jsです。 使い方はjQueryを使う、使わないの2パターンが用意されているようです。 // jQueryを使わない方法 new Formatter(document.getElementById('credit-input'), { 'pattern': '{{9999}}-{{9999}}-{{9999}}-{{9999}}' }); // jQueryを使う方法
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
