プロジェクト管理によく使われるのがバーンダウンチャートです。課題の数が日数とともに減っていくのをグラフ化することで、最終的に全ての課題が終わるのがいつ頃なのか予測できるようになります。 そんなバーンダウンチャートをGitHubの課題管理を使って行うのがGitHub Burndown Chartです。 GitHub Burndown Chartの使い方 一例です。実際のGitHub管理のプロジェクト情報からこのグラフが生成されています。 グラフのプロットをクリックすると、その課題にジャンプします。 GitHubの課題の累計とクローズした数をプロットし、その完了予測が出せるようになっています。全体のトレンドと現状の傾き、その二つを組み合わせて管理できるようになっています。マイルストーンでチェックもできるのでイテレーションごとのチェックなどに使っても良さそうです。 GitHub Burndown

MOONGIFTはオープンソース・ソフトウェアを紹介するブログです。2021年07月16日で更新停止しました Webメールと言えばGmailが一番使われている気もしますが、それでも自社でメールサーバを立てて運用しているケースは多いです。その際に何のクライアントを使うか悩んでしまいますよね。 IMAPに対応したメーラーは多数ありますが、Webブラウザ上で使えるものが良い場合はMailrをインストールしてみましょう。 Mailrの使い方 Mailrの特徴としてはGmail風に関連したメールをまとめてくれる機能があったり、2パネルでの表示があります。2パネルなのはVimの2パネルモードが大好きだからだそうです。試した限りでは新しいメールを作成する機能がありませんでしたが、MarkdownまたはreStructuredTextが使えるそうです。 2パネル表示というのは意外とありなのかと思います。G

MOONGIFTはオープンソース・ソフトウェアを紹介するブログです。2021年07月16日で更新停止しました これは使い勝手良さそう！ Bootstrapの魅力はデザインがさくさく出来上がる使い勝手の良さもありますが、シェアが大きいので関連ライブラリがたくさん作られているということも挙げられます。本家にはない機能もちょっと探せば大抵あったりするものです。 表計算のように編集可能なテーブルを実現したい、そう思ったら使ってみたいのがeditableTableWidgetです。 editableTableWidgetのデモ ちょっとしたことですが、編集後に一番下の行のサマリーも変わっています。計算処理も可能です。 editableTableWidgetの使い方 使い方は簡単で、以下のようなコードを実行します。 $('#table').editableTableWidget(); さらにバリデーシ

Mac OSXには近くのMac OSX同士でファイルの交換ができるAirDropという機能があります。これはアドホックなWiFiを立ててファイルを更新する仕組みですが、結構近くに寄らないと使えないのが難点です。 さらに言えばWindowsとのファイル交換もできないという問題もあります。そこで使ってみたいのがShareDropです。 ShareDropの使い方 ShareDropはWebブラウザからアクセスして使います。 後はファイルを承諾すれば受け取れる仕組みです。ShareDropではパブリックドメインが同じマシン同士が通信できるようになっています。同じLAN内にいればファイル交換ができるようになっており、HTML5/WebRTCに対応しているブラウザであればAndroidでも使えます。 ShareDropはnode/JavaScript製のオープンソース・ソフトウェア（MIT Lice

おお、これは企業で使えそうですよ！ 企業によっては外部にソースコードを預けられないため、自社でGitサーバを構えているところも多いでしょう。しかしそうなると管理画面が欲しくなります。GitHubの管理画面は優秀で、ああいったWebブラウザ上でリポジトリの情報を見たいと思うはずです。 そこで使ってみて欲しいのがGitonomyです。デザインの格好いい、Gitリポジトリマネージャです。 Gitonomyの使い方 GitonomyはPHP + Symfonyの組み合わせで作られていて、Webブラウザ上でGitリポジトリの操作が一通りできるようになっています。ユーザはプロジェクト単位にグループに入り、そこで権限管理される仕組みです。 ソーシャル機能はありませんが、企業ユースであれば十分ではないでしょうか。社内でGitサーバを立てている場合はぜひ導入を検討してみてください。 GitonomyはPHP

こういう取りまとめてくれるツールは便利ですね！ Retinaディスプレイや4Kディスプレイなど高解像度のディスプレイが出回ると、その中で扱われる画像サイズも自ずと大きくなっていきます。それは致し方ないと思うのですが、何の対策もしないのはいただけません。 PNG/JPEG/GIFなど様々な画像フォーマットに応じて圧縮ライブラリがありますが、imgoはそうしたライブラリを一つにとりまとめてくれる優れものです。 imgoの使い方 imgoのヘルプは次のようになっています。 $ ./imgo --help imgo 0.8: Images Optimizer Git repo: https://github.com/imgo/imgo Usage: imgo [-params] [FILE] Options: -h | --help displays help -b | --brute brute

TeleKastはテレプロンプターを実現するための台本を作成、投影するソフトウェア。 [/s2If] TeleKastはWindows/Linux用のオープンソース・ソフトウェア。プレゼンテーションは社会人であれば誰しもが経験するだろう。それが少人数の前であるか、大人数の前であるかは関係ない。自分の意見をきちんと相手に伝えられるかどうかが大事だ。 メイン画面 良くないプレゼンテーションの例として、手元の資料ばかり見ていたり、スライドの方ばかり向いて説明してしまうパターンが挙げられる。もっと前を見て素晴らしいプレゼンテーションを行うのにTeleKastを使ってみてはどうだろう。 TeleKastはテレプロンプターをオープンソースで実装するシステムだ。テレプロンプターとはテレビのアナウンサーなどが使っている、カメラの前で台本を流して読み上げる装置だ。最近では透明な板に文字を投影して読み上げる形

オープンソース開発でも使えるかな？ Rubygemsで配布できるライブラリを作っている方におすすめなソフトウェアがFrictionです。Rubygems向けにライブラリを作る際にあった方が良いファイルをチェックしてくれるソフトウェアです。 Frictionのインストール インストールはRubygemsを使います。 $ gem install friction これで準備は完了です。終わったらRubygems向けライブラリのディレクトリに移動します。そうしたらfrictionコマンドを実行するだけです。 $ friction [ERROR] CONTRIBUTING guide not found (see http://git.io/g_0mVQ) [ERROR] Bootstrap script not found (see http://git.io/jZoRYA) [ERROR] T

お、特定サイトのWebアプリを作るのに便利そうですね。 Google Chromeには特定URLだけを開かせるモード、SSB（Site-specific browser）に対応しています。SSBにすると決められたサイトだけを閲覧したり操作するWebアプリケーションを手軽に実現します。 Mac OSXで手軽にSSBモードに対応したアプリを作成できるのがchrome-ssbです。 chrome-ssbの使い方 chrome-ssbはシェルスクリプトで、そのまま実行します。 アプリケーションができたら起動しましょう。 自社の業務Webアプリで使ったり、Google Appsをラッピングしたりするのに良さそうです。セキュリティ的にもクローズになるのが安心できる点かも知れません。 chrome-ssbはMac OSX用のソフトウェア（ソースコードは公開されていますがライセンスは明記されていません）で

MOONGIFTはオープンソース・ソフトウェアを紹介するブログです。2021年07月16日で更新停止しました Webブラウザで何でもできるといった時代になっていますが、それでもターミナルは必要です。開発者がコマンドを打ったり、サーバ管理でシステム操作をしたりするのにWebブラウザではとても作業していられないでしょう。 しかしそんな壁を乗り越えてしまうソフトウェアがButterflyです。何とWebブラウザベースで動作するターミナルアプリケーションです。 Butterflyのインストール ButterflyはPython製で、pipでインストールできます。 $ pip install butterfly インストールが終わったらサーバを立ち上げます。 $ butterfly.server.py これで準備完了です。 Butterflyの使い方 **http://localhost:57575

MOONGIFTはオープンソース・ソフトウェアを紹介するブログです。2021年07月16日で更新停止しました これは面白いアイディア！ 日本語入力ができない環境下で日本語を入力しなければならないとしたらどうするでしょう。SKKをインストールする手もありますが、インストールや設定が面倒に感じてしまうでしょう。 そこで紹介したいのがcliimeです。さくっとインストールできて十分な品質の日本語変換ができるはずです。 cliimeのインストール cliimeのインストールは次のように行います。 $ git clone https://github.com/hitode909/cliime.git $ cliime $ budle これで準備は完了です。 cliimeの使い方 ではさっそく使ってみましょう。例えば次のように文字を入力します。 $ bundle exec -- ruby cliime

いつも立ち上げておくと便利そうです。 GUIのOSと言えばウィンドウシステムですが、マウスで自由に大きさを変更できる分、ちょっとした大きさのずれが気になったりすることがあります。スクリーンショットを撮ってヘルプを作ったりする際にはウィンドウの大きさを合わせたいと思うはずです。 それを含めてウィンドウ操作を自由に行えるのがSmartSystemMenuです。透明度の設定もできるので普段使いにも良さそうですよ。 SmartSystemMenuの使い方 SmartSystemMenuでは以下のメニューが追加されます。 情報：ウィンドウのプロセスやハンドル、キャプション、スタイルなどの情報が確認できます。 常に最前面に固定。 リサイズ。ウィンドウのサイズを変更します。 表示場所。右上、左下などウィンドウの配置をデスクトップ全体からの位置でスナップします。 透明度。ウィンドウを透過します。 プライオ

情報のフィルタリングやカテゴライズ、並び替えをする際には都度URLを再読み込みして表示するのが一般的です。とは言えこれでは格好が悪いというケースもあるでしょう。 そこで使ってみて欲しいのがMixItUpです。パネルまたはリストの情報をフィルタリングします。その際のアニメーションがまた格好いいライブラリです。 MixItUpのデモ まずは動画でご覧ください。 ボタンを押した時のアニメーションが格好よく、洗練されています。 最初の表示です。全ての情報がランダムに並んでいます。 並び替え。数字ごとに並んでいます。 フィルタリング。青のラベルだけになっています。 表示方法としては四角いブロックの他、リストもできます。 MixItUpの使い方 まずはHTMLを次のように記述します。 <div id="Container"> <div class="mix category-1" data-myord

かつてWeb上でグラフを描くとなると画像で出力するものが多かったです。しかし時代はHTML5になり、豊かな表現が可能になっています。そんな中にあってレガシーな画像出力など使っている場合ではありません。 ということでHTML5の性能を活かしたグラフライブラリを紹介します。グラフのデザイナー、エンジン、そしてサーバの全てがオープンソースになったNextChartsです。 NextChartsの使い方 まずはデモのグラフを見てみましょう。 グラフの一覧です。多様なグラフが描画できます。 棒グラフ、積み上げグラフ、エリアグラフ、円グラフそして複数のグラフの組み合わせが可能です。 マウスオーバーで詳細を表示できます。 データラベルを変更すれば日本語も表示できます。 NextChartsはCanvasタグに描画するグラフライブラリになります。日本語が問題なく扱えるのもHTML5様々です。 さらにデータ

MOONGIFTはオープンソース・ソフトウェアを紹介するブログです。2021年07月16日で更新停止しました Webアプリケーションはブラウザさえあればどの環境でも動かせる便利な仕組みですが、大きな欠点としてはネットワークがないといけないというのがあります。オフラインでも対応しようと思うとダウンロードと設定がとても面倒です。 その点、バイナリの実行ファイルはダウンロードしてすぐに実行できます。同じような仕組みをWebアプリケーションでも可能にするのがHTML5-Packerです。 HTML5-Packerのインストール まずはインストールします。npmでインストールできます。 $ npm install html5-packer --save-dev これで準備は完了です。 HTML5-Packerの使い方 ローカルにあるWebアプリケーションをパッキングします。この時、gruntと組み合

MOONGIFTはオープンソース・ソフトウェアを紹介するブログです。2021年07月16日で更新停止しました レスポンシブWebデザインを考え始めるとメディアクエリーや細かな表示の制御など考えるべきところがたくさんあって、厄介な印象が強くなる訳ですが、もっとシンプルに考えて良いんじゃないと訴えかけてくるのがFluidityになります。 HTMLは元々素の状態でも“ほぼ”100%レスポンシブであると言います。そしてそのほぼから外れた部分を補正してくれるのがFluidityになります。しかもたった115 bytesで。 Fluidityのスクリーンショット Fluidityの使い方 使い方は簡単でスタイルシートを読み込めば良いだけです。 <link rel="stylesheet" href="css/fluidity.min.css"> 115 bytesな訳で特別なことはしていないのですが

手早く、かついい感じにワイヤーフレームが作れそうですよ！ Webサイトやスマートフォンアプリを作成する際にはワイヤーフレームを作ることが多くなってきました。そこで一旦アイディアをまとめて、それから実際に形にしていく訳です。そのためのツールもたくさんあります。 しかしそういったワイヤーフレームツールの多くが画像を四角とバツ印で表示します。その他のパーツも四角や線ばかりで何となくイメージがわきづらいというケースも多いようです。そこで使ってみたいのがWireframe & UI Kitです。 Wireframe & UI Kitの使い方 Wireframe & UI KitはEPSファイルで配布されていますので、Wireframe & UI Kitを素材として画像編集ソフトウェアやドローツールを使ってワイヤーフレームを作っていくのが良いようです。 何と言ってもそのビジュアルの汎用性の高さが利点で

MOONGIFTはオープンソース・ソフトウェアを紹介するブログです。2021年07月16日で更新停止しました これはGitを使っているならぜひ入れておきたいツールです。 GitHubのコード差分表示はとても見やすくて、一旦あれに慣れてしまうとターミナルで出力されるDiffが非常に見づらく感じるようになります。しかしプロジェクトによってはGitHubを使えないというケースもあるでしょう。 そこで使ってみたいのがPretty Diffです。任意のGitリポジトリでGitHub風の差分表示を実現してくれるライブラリです。 Pretty Diffのインストール インストールはnpmを使って行えます。 $ npm install -g pretty-diff これで準備は完了です。 Pretty Diffの使い方 使っているGitリポジトリに移動します。例えば最後のコミットとの比較はこんな感じです。

Webシステムというとデータベースが必須なように思えますが、実際にはそんなことはありません。むしろデータベースを必須にすることで導入までの障壁が高くなったり、システム負荷が高まったりします。 もちろん大型のWebシステムであればデータベースが必須ですが、そこはケースバイケースではないでしょうか。ということでブログくらいであればデータベースレスなHTMLyでも十分なのです。 HTMLyの使い方 トップページです。設定から運用開始まではとても簡単です。 設置はconfig以下にあるconfig.ini.exampleのリネームと修正、config/users以下にあるファイルをコピーして自分の好きなユーザ名.iniというファイル名にして中にあるパスワードを記述するだけです。 パスワードが平文管理なのがちょっと怖いですが…そこは要修正かも。ということでログインします。 投稿を書きます。Markd