MOONGIFT更新停止のご連絡 MOONGIFT
いつもMOONGIFTをご覧いただきありがとうございます。タイトルにあります通り、MOONGIFTの更新を恒久的に停止するご連絡となります。最終更新記事は2021年07月16日になります。 背景 MOONGIFTはオープンソース・ソフトウェアの紹介サイトとして2004年01月29日に運営を開始しました。一番最初はlivedoorブログにて開始し、その後様々なブログプラットフォームを利用し、さらに一時はサイト名の変更（Open Alexandria）を経て、MOONGIFTという名称で運営を続けてきました。 MOONGIFTでは、これまでに16,000以上のソフトウェア（一部オープンソース・ソフトウェア以外のソフトウェアを含む）を紹介してきました。オープンソース・ソフトウェアは多くの先進的な技術への取り組みが行われており、オープンソース・ソフトウェアを知ることはソフトウェアの開発トレンドを知
Kanon - プログラミングコードを可視化
プログラミングは構造的です。そのため、構文解析して別な言語にしたり、ツリー構造に展開したりできます。それらの構造を見ることで、綺麗な設計になっているかどうかも分かりそうです。 そんな可能性を感じさせるのがKanonです。JavaScriptのコードを解析、ビジュアル化します。 Kanonの使い方 左側にコード、右上にクラスの構造、右下にメインスクリプトの実行が可視化されています。 処理を増やしたところ。 コードが複雑になると、可視化された構造も複雑化します。 Kanonを使うことでプログラミングコードを別な視点から見られるようになります。コードは自動的に更新されるので、自分のコードを貼り付けてみて、どんな構造になっているのか見てみるのも面白そうです。 KanonはJavaScript製のオープンソース・ソフトウェア（MIT License）です。 prg-titech/Kanon: A l
Tabulator - これはすごい。HTMLテーブルを高機能に MOONGIFT
テーブル表示はWebシステムのデファクトとも言えます。業務システムはいうに及ばず、管理者画面などでも必ず求められる表示です。そしてただ表示すればいいという訳ではなく、ソートやフィルタリング、インラインでの編集など様々な機能が求められるものです。 そんな多機能なテーブル表示を実現してくれるのがTabulatorです。多くのニーズを満たしてくれることでしょう。 Tabulatorの使い方 てんこ盛りなデモテーブル。ざっと見てもフィルタ、ページネーション、グラフ表示、ソートなどの機能が確認できます。 インライン編集もサポートされています。 データに合わせて幅を自動調整。 行をクリックして展開する機能。 カラムをグループ化。 カラムを縦に。これはカラムが多い時に便利そうです。 ドリルダウン。 テーブルを入れ子にもできます。 スパークライン表示。 フッターで集計。 HTMLテーブルを変換する機能もあ
dbxfs - Dropboxをファイルシステム化 MOONGIFT
MOONGIFTはオープンソース・ソフトウェアを紹介するブログです。2021年07月16日で更新停止しました Dropboxは各OS向けにクライアントソフトウェアを提供しています。常時Dropboxを使っているならば便利ですが、時々しか使わなかったり、ストレージ容量を使うために躊躇している方もいるでしょう。 そこで使ってみたいのがdbxfsです。FUSEを使ってDropboxをファイルシステム化します。 dbxfsの使い方 利用する際にはDropboxのOAuth認証が必要です。 任意のフォルダにDropboxをマウントします。ファイル操作は普通に行えます。 dbxfsはDropboxを仮想的にマウントしていますので、使っていないファイルは読み込まれていません。大きなサイズのファイルを開こうとすれば時間がかかりますが、小さなファイルであれば気にならないでしょう。Dropboxは最初の同期に
JavaScriptのイベントをたくさん見られるサイト - 開発時に役立つ。JavaScriptのイベント処理を確認 MOONGIFT
JavaScriptでのアプリケーション開発において肝になるのがイベントのハンドリングです。マウスやキーボード操作などによって多様なイベントが呼ばれます。それらの購読、解除によってアプリケーションを構築するのですが、慣れている人であっても複雑で分かりづらいものです。 どんなイベントがあって、どうデータが送られてくるのかを理解するのに便利なのが「JavaScriptのイベントをたくさん見られるサイト」です。 JavaScriptのイベントをたくさん見られるサイトの使い方 イベントの内容は開発者ツールに出てくるのであらかじめ開いておきます。 例えばスクロールやリサイズイベントで呼ばれているのが確認できます。 マウス系イベント。 フォーム系。 メディア系。動画再生時などにイベントが呼ばれます。 アニメーション。 このサイトではクライアントサイドだけで処理ができるイベントを多数確認できます。似たよ
Vue Designer - Vue.jsの表示を確認できるVisual Studio Codeプラグイン MOONGIFT
ReactやAngular、Vueなどは独自のタグを使ったWebコンポーネント型のシステムと言うこともあって、これまでのHTMLデザインの手法が通じなくなっています。デザインの確認などで苦戦している人も多いのではないでしょうか。 そこで使ってみたいのがVue Designerです。Visual Studio Codeプラグインとして動作するVueデザイン確認ツールです。 Vue Designerの使い方 エディタです。Vueファイルに対応しており、デザイナーを開くと右側にプレビューが表示されます。 もちろんリアルタイムに更新されるので、スタイルタグの内容を変えるとすぐに反映されます。 props、データの確認もできます。 Webブラウザなどで表示を確認するのも良いですが、プログラミングエディタの中に埋め込まれていることで、より確認が簡単にできるようになっています。Vue Designerを
mdpdf - スタイル設定が指定できるMarkdown to PDF
MOONGIFTはオープンソース・ソフトウェアを紹介するブログです。2021年07月16日で更新停止しました MarkdownはHTMLだけでなく、他のフォーマットに展開する際にも使える便利な記法です。よくあるのはPDFではないでしょうか。しかし殆ど装飾も行われないシンプルなPDFなので、業務や報告書で使うのはちょっと躊躇してしまいます。 そこで使ってみたいのがmdpdfです。スタイル設定などが可能なMarkdownからPDFへの変換ソフトウェアです。 mdpdfの使い方 変換例です。ヘッダーを追加しました。 2ページ目にもちゃんとヘッダーが表示されます。 こちらはスタイル設定を適用したものです。先ほどとはフォントが異なります。 別なスタイルシート。文字が大きすぎて被ってしまっていますが、修正すれば問題ないでしょう。 mdpdfではスタイル設定としてCSSが使えるのがポイントです。つまりM
Grade.js - 画像を解析して最適な枠を表示 MOONGIFT
画像は見せ方がとても大事です。ただ並べただけでは目を引くことができません。例えばPinterestがあれだけ流行ったのは、それまでになかった段違いな組み合わせのグリッドによるところが大きかったでしょう。画像を主体としているサイトでは特に見せ方に注意すべきです。 今回紹介するGrade.jsは画像に枠をつけてくれるJavaScriptです。画像に合わせた最適な色合いを選定してくれます。 Grade.jsの使い方 デモです。1色ではなく、左上と右下で2色使われているのが分かるでしょうか。そして間はグラデーションとなっています。 つまり特徴的、かつ元画像の雰囲気を壊さないような2色が選択されています。 この手のライブラリは幾つかありますが、Grade.jsはグラデーションを展開しているところが特徴になります。どの色を選ぶかのアルゴリズムがそれぞれ違いますので、自分の感性に合ったものを選ぶのが良い
Editor - Web用のMarkdownエディタ
MOONGIFTはオープンソース・ソフトウェアを紹介するブログです。2021年07月16日で更新停止しました 世の中、Markdownばかりになってきました。その効果として、コンテンツが増えたり、関連ツールも多数出てきています。特にMarkdownエディタについてはかつてのWikiのように多数の言語で実装されるようになっています。 今回紹介するEditorもその一つですが、単独で動くものではなくWebサイトに埋め込んで使うタイプのMarkdownエディタになります。 Editorの使い方 Editorのトップページです。 日本語も問題なく書けますが、変換候補が表示されませんでした。 画像の埋め込みは  が表示されるだけでした。 プレビューです。切り替えがアニメーションなのが格好良いです。 Editorはサイトの利用者にMarkdownコンテンツを作成してもらう時に便
Draft.js - テキストエディタ開発用のReactコンポーネント MOONGIFT
Reactが向いているのはユーザの入力をリアルタイムに、かつ画面上の様々な場所に反映するようなインタラクティブなWebアプリケーションです。開発者は状態を気にせず画面を作れるのが利点でしょう。 さらにReactではコンポーネントの再利用がしやすいのも利点と言えます。今回はFacebookの開発したテキストエディタ開発用コンポーネントDraft.jsを紹介します。 Draft.jsの使い方 Draft.jsのデモです。文字を選択して色をつけられます。 背景色を変えることもできます。 改行すると、それに合わせてテキストエリアの大きさも変化します。 リンクを追加。 機能を追加すればWYSIWYGエディタとして使えます。 Twitter風に。@や#に対して色がつきます。 数式を埋め込む機能もあります。 編集はテキストエリアで行います。 Reactなので、変更はリアルタイムに反映されます。 Draf
BitBar - メニューバーから任意のプログラムを実行
コードを定期的に実行する際にはCronを使ったりしますが、その結果を確認するのはメールを使ったりして若干面倒です。もっと手軽に結果を確認できると便利でしょう。 そこで使ってみたいのがBitBarです。任意のプログラムやスクリプトを実行し、その結果をメニューバーで確認できるソフトウェアです。 BitBarの使い方 BitBarを起動しました。そして、任意のプログラムやスクリプトを選択します。サンプルもたくさん用意されています。 そうするとこんな感じで結果をアイコンであったり、文字列で見られるようになります。適当なバックグラウンドジョブがあるならBitBarを仕込んでおくといいでしょう。 BitBarを使えばちょっとしたスクリプトやプログラムを手軽に呼び出したり、その結果の確認ができます。サーバのステータス確認などに使っても面白そうです。 BitBarはMac OSX用のオープンソース・ソフト
excel2js - ExcelシートをWeb化
MOONGIFTはオープンソース・ソフトウェアを紹介するブログです。2021年07月16日で更新停止しました 日本にはExcel職人と呼ばれる人たちがたくさんいます。彼らにかかればどんなドキュメントであってもExcelで作られ、多くの業務システムがExcel VBAを駆使して作られます。 今回はその最高峰とも言える、Excelで作るWebアプリケーションを紹介します。それがexcel2jsです。 excel2jsの使い方 excel2jsはExcelで作られたシートをHTML/JavaScriptにしてくれるソフトウェアです。下の画像は元ファイルになるExcelファイルです。式も埋め込まれています。 それがこんな感じにWebブラウザ上で動くようになります。 Excelで動くものになりますので、サーバサイドと連携するなどというのは難しいでしょう。しかしちょっとした計算処理を行うものであればe
Infer - Facebook製の静的コード解析ツール
MOONGIFTはオープンソース・ソフトウェアを紹介するブログです。2021年07月16日で更新停止しました いかなるソフトウェアであってもバグはつきものです。バグがなかったとしてもそれは単に見つからなかったり大きな問題につながらないだけで、いつかは露見することになります。 Facebookが作ったInferはそんなプログラミングコードを静的に解析するソフトウェアで、アプリのバグをいち早く発見するためのツールになります。 Inferの使い方 例えば以下のようなコードがあります。これはjavacでコンパイルできるコードです。 // Hello.java class Hello { int test() { String s = null; return s.length(); } } これをInferにかけるとエラーが表示されます。 $ infer -- javac Hello.java H
Libreboard – シンプルで簡単に使えるカンバン
MOONGIFTはオープンソース・ソフトウェアを紹介するブログです。2021年07月16日で更新停止しました 最も簡単なタスク管理としてカンバン方式はお勧めです。カラムはステータスを表します。未作業、作業中、完了、バックログなどそれぞれのステータスによってタスクの場所が変えるだけでとてもシンプルです。 今回はそんなカンバンリストを提供するLibreboardを紹介します。すぐに使い始められますのでぜひ試してみてください。 Libreboardの使い方 Libreboardは特にタスク管理として充実した機能があるわけではありません。しかしやるべきタスクや積み残しを管理するのに十分な機能と言えるでしょう。早くはじめて生産性を向上したい、そんな時にぴったりなタスク管理です。 Libreboardはnode/JavaScript製、MIT Licenseのオープンソース・ソフトウェアです。 Lib
DocsDoctor·優れたプログラマはドキュメントを書く！ MOONGIFT
DocsDoctorのコンセプトはかなり刺激的です。「良いプログラマーはドキュメントを読む。優れたプログラマーはドキュメントを書く」…どうでしょう、格好良いですよね。 ということでDocsDoctorはオープンソースのプロジェクトに対してドキュメントがない部分を洗い出し、参加を促します。ドキュメントが充実すればプロジェクト全体の品質も高まることでしょう。 DocsDoctorの使い方 こちらはトップページ。 Railsであってもドキュメントがないメソッドはたくさんあります。 例えばこのメソッド。参加の仕方、編集の仕方も書かれています。 該当コード部分にジャンプもできます。 DocsDoctorはAPIドキュメントを書くシステムになります。そのためメソッドの上にJavaDocやRDocなどの形式で書くようになるでしょう。小さなメソッドだから…と放っておくとDocsDoctorが見つけてくれる
Chrome Dev Editor - フロントエンド開発ならお任せなChromeアプリなプログラミングエディタ MOONGIFT
Webアプリケーションを開発する際にはテキストエディタやIDEを使うのが一般的です。しかし開発してWebブラウザに表示を切り替えて再読み込みして…というのは手間がかかるものです。 そこでWebアプリケーションをWebブラウザ上で開発してしまおうというのがChrome Dev Editorです。JavaScriptだけでなくDartを使った開発にも対応したエディタになります。 Chrome Dev Editorの使い方 こちらがメイン画面です。Chrome Dev EditorはChromeアプリとしてインストールされます。 最初にプロジェクトを作成します。 エディタはハイライトがついたもので使いやすいです。 内部サーバ機能付きです。 GitやChrome Web Storeへのデプロイ機能があります。 Web Starter KitやPolymerをベースに生成することもできます。 Chr
Aozora - Webデザインに便利なダミーテキストを生成
MOONGIFTはオープンソース・ソフトウェアを紹介するブログです。2021年07月16日で更新停止しました Webサイトをデザインする際にテキスト部を「あああああ」などで埋めたりします。これでは何となくイメージがわきづらいという問題があります。また文字が短い場合、長い場合など様々なパターンの文字を作る必要があります。 そこで使ってみたいのがAozoraです。有名な小説などから文字を適当な長さの生成してくれます。 Aozoraの使い方 AozoraはRubygemsでインストールできます。 $ gem install aozora 後はオブジェクトを作るだけです。 puts Aozora.new #=> "私はその人を常に先生と呼んでいた。だからここでもただ先生と書くだけで本名は打ち明けない。これは世間を憚かる遠慮というよりも、その方が私にとって自然だからである。私はその人の記憶を呼び起す
Jdoc - JSON SchemaからAPIドキュメントを生成
MOONGIFTはオープンソース・ソフトウェアを紹介するブログです。2021年07月16日で更新停止しました JSONがWeb APIのデータ送受信フォーマットとして活用されるようになると、受け取る側と発信する側でその内容が適切であるかどうか検証する手段が必要になります。それがJSON Schemaです。 2009年頃に登場したようですが、当時は面倒がってあまり使われてきませんでしたが、JSONの普及ともとに注目が集まっています。そんなJSON Schemaを開発者にも優しいフォーマットに変換してくれるのがJdocです。 Jdocの使い方 JdocはRubygemsからインストールできます。 $ gem install jdoc 使い方としてはjdocコマンドにスキーマのパスを渡すだけです。 $ jdoc spec/fixtures/schema.yml # Example API * [
transitive.js - 路線図を生成するJavaScriptライブラリ MOONGIFT
データのビジュアル化を考えた場合、常に正確に出すのが最善とは限りません。トレンドを知りたい場合はその傾向を見るためにデータを無視したり、より特徴的なポイントに主眼を置いたりします。地図も同じです。 案内図などは正確性よりも直線や曲がり角を重視した図になっています。同様に路線図も駅の間隔や合流ポイントなどに主眼を置くでしょう。そんな分かりやすい路線図を生成できるのがtransitive.jsです。 transitive.jsの使い方 こちらがデモです。とても見やすい路線図ですね。 右側の路線をマウスオーバーすると、その路線だけがハイライト表示されます。 ズーム表示やマウスドラッグでの視点変更も可能です。 データを作るのが多少大変なように見えますが、一度作ってしまえば後はtransitive.jsが自動生成してくれるのが便利です。データ自体はデータベースに保存しておいてスクリプトで生成する形で
Kandan – HipChatクローンなWebチャット
MOONGIFTはオープンソース・ソフトウェアを紹介するブログです。2021年07月16日で更新停止しました 会社やプライベートでチャットアプリは何を使っていますか。あまりにも選択肢が多くなってしまったため、却ってどれを選んだら良いのか悩んでしまうかも知れません。さらにニーズに合わせてカスタマイズしたいという場合もあるでしょう。 そこで世界的にも有名なHipChatのクローンというコンセプトのチャットアプリKandanを紹介します。シンプルな機能だけを提供していますので足りない機能は自分で開発もできそうです。 Kandanの使い方 社内や自前で立てれば部署やチームの情報交換に使えるでしょう。また、デプロイ先としてHerokuも対象になっています。ごく基本的なチャット機能しか備わっていませんので、カスタマイズして自分好みに仕上げていくのが面白そうです。 KandanはRuby/Ruby on
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
