開発者であれなネットワーク構成図を書く機会があるかと思います。そんな時、ドローツールを使うとメンテナンスが面倒だったり、変更時の差分確認もできず、徐々に運用が煩雑になっていきます。 そこで使ってみたいのがdrawthe.netです。テキストから詳細なネットワーク構成を生成してくれるドローツールです。 drawthe.netの使い方 左側のテキストで書かれた内容を右側でプレビューできます。 こんな図も。 カラーパターン。 複雑なノードの繋がりを表現しています。 まさにスター型ともいえる構成例。 コードを書いたり、文字のスタイル指定もできます。 ネットワークだけでなく、こんな図も書けます。 ファイアウォールなどをイラストで表現した例。 クラウドを使った構成に使えそうな例。 PNG画像で保存できます。 日本語も利用できます。 drawthe.netはテキストで書かれた内容をSVGで書き出します。

アイコン集はいくら知っていてもいいものです。多彩なパターンに対応したものもあれば、特定の用途に使えるものもあります。様々なものを知っていれば、役立つ機会が多いにあります。 今回紹介するSuperTinyIconsは1KB以下という小さなサイズが特徴なアイコン集となっています。 SuperTinyIconsの使い方 ソーシャルメディアとメディア。 Google。 コミュニケーション。 Webサイト。 Webサイトとインターネット。 ブラウザとポッドキャスト。 ロゴ。 セキュリティ。 決済。 プログラミング。 その他。 SuperTinyIconsの各アイコンにはサイズも書かれています。その殆どが3桁バイトであるのが分かります。SVGと合わせてPNGも提供されています。汎用的なデザインなので、利用できる場面は多そうです。 SuperTinyIconsは edent/SuperTinyIcons

アニメーションGIFはとても使い道が多いです。動画だとついつい冗長的になってしまいがちですが、アニメーションGIFはハイライト部分だけを切り出して作られています。面白い部分だけが繰り返し再生され、音声もないとあって、面白さが増幅します。 そんなアニメーションGIFをデスクトップで手軽に作成するソフトウェアとしてGifCaptureを紹介します。 GifCaptureの使い方 起動すると枠だけが表示されます。この部分が録画されます。 設定は保存場所だけ。 保存すると通知が送られてきます。 個人的にはLICEcapをメインで使っていますが、GifCaptureは同じような使い勝手のソフトウェアになります。LICEcapがちょっと機能が追加されて複雑になった気がしますが、GifCaptureはシンプルなままです。好みによりますが、個人的にはGifCaptureのが好きです。 GifCapture

ブログなどでコードを記載しているサイトは多いです。その表示方法も様々で、行番号があるもの、ハイライトが付いているものなどがあります。そのコードをコピーしても余計な行番号が付いてきたりして、ストレスと感じたりします。 そこで使ってみたいのがcopy-code-blockです。自由度の高くコードのコピーが可能です。 copy-code-blockの使い方 コードハイライタと組み合わせた例です。 コピーボタンを押すと、コードだけがコピーできます。 <div class='cool-container'> <p class='cool-description'>Get ready for...</p> <ul class='cool-list'> <li class='cool-item'>rainbows</li> <li class='cool-item'>and</li> <li class

MOONGIFTはオープンソース・ソフトウェアを紹介するブログです。2021年07月16日で更新停止しました CSVファイルは今なおシステムの中で現役ばりばりに利用されています。様々なシステムから出力されるCSVファイルに対して、差分を確認したいと考えることはないでしょうか。通常の差分表示では、CSVのようなフォーマットではうまく表示できないかも知れません。 そこで使ってみたいのがcsvdiffです。CSVに特化した差分表示コマンドです。 csvdiffの使い方 普通にコマンドを打ったところです。追加された行、修正された行が確認できます。 $ csvdiff asof.csv asof2.csv # Additions (1) + 20160525 13:15:00.075,AAPL,98.65,10,NASDAQ,98.55,98.56 # Modifications (19) - 20

Markdownのプレビューができるエディタはたくさん存在します。大抵、左側がエディタで右側にプレビューが表示されます。そして、数式を表示できるようにしたり、拡張記法に対応したりと機能を追加する傾向があります。その結果、動作が重たくなります。 もっとさくさくとMarkdownを書いたり、プレビューを確認したいと考える人にお勧めなのがmdbufです。 mdbufの使い方 利用例です。長文を記述してもプレビューは高速に表示されます。 編集時の反映も高速です。 mdbufは入力時のラグを極力なくすことを目標として作られています。10万文字を越えると若干のラグがあるようで、現在も改善中のようです。巨大な文章を扱うことは多々あるので、そうした時に入力ラグが発生すると大きなストレスになります。今後の発展に大いに期待したいソフトウェアです。 mdbufはTypeScript製のオープンソース・ソフトウェ

MOONGIFTはオープンソース・ソフトウェアを紹介するブログです。2021年07月16日で更新停止しました 業務の中でパワーポイントが使われることは少なくありません。グラフィカルでインパクトあるスライドばかりならいいですが、中には同じような見栄えの資料を繰り返し提示しないといけないといった場合もあるでしょう。クライアントごとにデータが異なるスライドなどもそうです。 そんな時に一つ一つ手作りするのは面倒です。pptx-templateを使って一気に仕上げましょう。 pptx-templateの使い方 例です。まずパワーポイントのテンプレートファイル（pptx）を用意します。波括弧で囲まれた部分がテンプレートになります。 こちらが変換後。文字が置き換わっています。 グラフも同様に。こちらはテンプレートです。 出力するとグラフのデータも代わっています。 pptx-templateはデータリソー

MOONGIFTはオープンソース・ソフトウェアを紹介するブログです。2021年07月16日で更新停止しました Excelはオフィスで最もよく使われるソフトウェアの一つでしょう。そして単に表計算としてだけでなくVBAも使ってシステムツールとして使われたりします。そんなExcelだけにバージョン管理したいというニーズがよくあり、そのためのソフトウェアも存在します。 そんな中、xltrailは一風変わっています。シートではなく、VBAの差分表示ができるソフトウェアです。 xltrailの使い方 xltrailをインストールする前の差分表示。git diffでは何も出ません。 git diff book.xlsx diff --git a/book.xlsx b/book.xlsx index 70d50ca..9bcf07e 100644 Binary files a/book.xlsx and

Webシステムで一番苦労させられるのがグラフではないでしょうか。HTMLの表現力が上がったと言っても、コードを書かなければなりません。特にグラフやチャートになるとコード量も増えがちです。 そこで使ってみたいのがChartkick.jsです。多くのパターンに対応したクライアントサイドのグラフライブラリです。 Chartkick.jsの使い方 曲線のグラフ。 円グラフ。 ドーナッツグラフ。 棒グラフ。 横型。 エリアグラフ。 点だけのグラフ。 バブルチャート。 複数の要素を同時に。 横棒グラフでもできます。 横棒グラフで積み上げ型。 複数の要素でかつグルーピング。 色を変えた円グラフ。 データが一定でない要素同士でも。 10分ごとといった細かい単位でも。 細かい横棒グラフ。 Chartkick.jsは Chart.js、GoogleチャートそしてHighchartsに対応しており、これらのグラ

組織図であったり、家系図といった図を描こうと思ったらどんなツールを使っているでしょうか。ドローツールも使えますが、編集したりするのが面倒だったりします。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

MOONGIFTはオープンソース・ソフトウェアを紹介するブログです。2021年07月16日で更新停止しました Markdownは誰でもすぐに覚えられて便利な記法ですが、ちょっとこだわったことをしようと思うだけでMarkdownだけでは物足りなくなってしまいます。その結果、HTMLタグが氾濫することになってしまったりもします。 今回紹介するVisdownはMarkdownに足りないデータのビジュアル化機能を追加するソフトウェアです。 Visdownの使い方 Visdownの画面です。左側がエディタ、右側にプレビューが表示されています。 ```vis とするのがコツです。 色を変えることもできます。 変更はリアルタイムに反映されます。 VisdownではSVGのグラフを出力します。すべてクライアントサイドで完結していますので表示の反映が即座に行われます。ビジュアル化はVegaを使って行っていま

MOONGIFTはオープンソース・ソフトウェアを紹介するブログです。2021年07月16日で更新停止しました ソフトウェアのテストは幾つかの種類がありますが、実際にデモでソフトウェアを操作して行うテストとして有名なのがSeleniumです。当初はWebアプリケーション向けの仕組みでしたが、Appiumによってスマートフォンアプリのテストも行えるようになっています。 さらに今回紹介するのはWiniumです。名前からも分かる通り、Windowsアプリの自動操作テストに使えるSelenium系ソフトウェアです。 Winiumの使い方 Winiumの使い方は次のようになります。こちらはRubyで書いた場合のコードです。 require 'selenium-webdriver' capabilities = {app: 'c:\windows\system32\notepad.exe'} drive

企業やプロジェクトによってデザインガイドラインは自ずと必要になってきます。それが社で働くデザイナーの共通認識になる訳ですが、例えばFacebookアプリを作る際にはボタンやデザインをFacebookっぽくしたくなるのではないでしょうか。つまりデザインガイドラインは社内だけでなく社外の人にとっても有益なのです。 そこで登場したのがPrimerです。PrimerはGitHubが作り、使っているデザインガイドラインになります。 Primerの使い方 スクリーンショットを多めで紹介します。まずはグリッド。 ヘッダー。h1〜6まで対応。 テキスト。若干小さめ？ インラインテキストの装飾。 ボタン。ここはGitHubっぽいですね。 ボタングループ。こういうのもGitHubで使われていますよね。 フォーム。シンプルです。 フォームグループ。縦に並べる時に使えます。 メニュー。アイコンはオプションです。

MOONGIFTはオープンソース・ソフトウェアを紹介するブログです。2021年07月16日で更新停止しました データベースのダイアグラム（ER図）を作成する Haskell 製のコマンドラインツールです。テキストエディタで定義ファイルを作成し、コマンドを実行することでダイアグラムとなる画像を作成します。データベースを設計する際、テーブルとその関連付けについて全体像を手早く作成したい、そんな時に便利なソフトウェアです。 erd の主な特徴 1) データベースの全体像の設計に集中できる ダイアグラムにあるテーブル同士の配置など気にすることなく、とにかく全体的な設計を行いたい時に便利です。GUIツールも便利ですが、使い慣れたテキストエディタで、キーボードから手を離すことなく、思うままに設計を進めることができます。 2) er ファイルが必要 er ファイルと呼ぶ定義ファイルを作成します。このer

世の中の大抵の物事は時間軸に沿って進められます。歴史はもちろんのこと、プロジェクト管理においてもガントチャートのような時間軸のグラフを使って表現されます。過去の振り返りも未来の予測も時間がキーになってきます。 そういったデータを表現できるライブラリがTimesheet.jsです。特徴的なのはCSS3で作成されている点にあるでしょう。 Timesheet.jsの使い方 こちらが表示例になります。細いバーでスタイリッシュですよね。 JavaScriptは次のようになります。 new Timesheet('timesheet', 2002, 2013, [ ['2002', '09/2002', 'A freaking awesome time', 'lorem'], ['06/2002', '09/2003', 'Some great memories', 'ipsum'], : ['09/2

Bootstrapの良いところは使い手（主にエンジニア）の気持ちを理解し、その利用シーンが想定されていることでしょう。こだわったデザインにすることだってできますが、それでは応用がききません。その汎用性と見栄えのバランスを上手に保っています。 今回紹介するResponsive Dashboardもその応用例と言えます。いわゆる管理画面系のダッシュボードですが、AngularJSとjQueryに対応し、カスタマイズして利用するのが容易になっています。 Responsive Dashboardの使い方 こちらがメイン画面です。管理系で良くありがちなウィジェットがたくさんあります。メニューは左側です。 デスクトップもメニューを折り畳めます。 タブレットサイズになると自動でメニューの文字が折り畳まれます。 スマホサイズ。カラムが1列になります。 Responsive DashboardはBootst

マルチプラットフォームで使えますよ！ エンジニア界隈ではMarkdownの認知度が高くなっていますが、その記法が若干特殊なこともあって書きづらいと感じている人は多いはず。そこで使われるのがMarkdownエディタです。 Haroopadもその一つになります。多分に漏れず2ペイン構成で片側がプレビューになっていますが、それ以外にも便利な機能がたくさん揃っているMarkdownエディタになります。 Haroopadの使い方 プレビューはつい縦長になりがちなので、2〜3段で書くと短くていいかもしれませんね。 Haroopadは使ってみた感じ、かなり開発者寄りなMarkdownエディタになっているという印象です。Markdownを使いこなしてがんがんドキュメントを作っていきたいと考える方にはぴったりではないでしょうか。 HaroopadはWindows/Mac OSX/Linux用のオープンソース