plant_erd - ER図をPlantUML用にエクスポート
UMLをテキストベースで記述できるPlantUMLを使っている方は多いのではないでしょうか。クラス図を流用する形でER図も描くことができます。そして、データベースはすでにあり、そこからPlantUML用に出力できればいいのに、と考えている方もまた多いでしょう。 そんな方にお勧めなのがplant_erdです。各種データベースに対応したER図エクスポートソフトウェアです。 plant_erdの使い方 出力した内容をPlantUMLで表示しています。 plant_erdはSQLite3、MySQLそしてPostgreSQLに対応しています。各データベースの内容をそのままPlantUML向けに出力が可能です。特定のテーブルだけを出力対象にもできます。リレーションも再現され、データベース構造をドキュメントに書き出すのにぴったりです。 plant_erdはGo製のオープンソース・ソフトウェア（MIT
dot-to-ascii - Graphviz記法からアスキーアートでチャート生成
MOONGIFTはオープンソース・ソフトウェアを紹介するブログです。2021年07月16日で更新停止しました dotファイルはGraphviz用のフォーマットとして有名です。テキストから画像などのグラフが描けるので、仕様書など開発者用ドキュメントの中でもよく使われています。クラス図など自動化もしやすいのがメリットです。 そんなdotファイルからアスキーテキストのチャートを描くソフトウェアがdot-to-asciiになります。 dot-to-asciiの使い方 左側にdotファイルの内容、右側にそのレンダリング結果が表示されています。 日本語も使えます。 フォントの関係か、表示がずれてしまうのが難点です。 Graphvizの記法であればアスキーアートにできるようです。 コピーしてもずれてしまうので、フォントが特定のものでないとダメそうです。 +---+ | a | +---+ | | v +
GraphQL Network - GraphQLを開発者ツールで分かりやすく表示
GraphQLはREST APIの欠点を改善し、Web APIとして使われる場面が増えていくことでしょう。しかし開発中の難点として、エンドポイントがすべて同じURLであるために、どのアクセスなのかは深く見てみないと分からないという点があります。 そんなGraphQLの欠点を克服してくれるGoogle Chrome機能拡張がGraphQL Networkです。 GraphQL Networkの使い方 インストールすると、GraphQLタブが追加されます。 リクエスト内容やレスポンスが構造的に見やすくなります。 GraphQL Networkを使えばクエリ名が分かるので、どのリクエストを行ったのかが一目で分かります。パラメータも表示されるのでデバッグ時に重宝するでしょう。GraphQLを使って開発している方はぜひインストールしてみましょう。 GraphQL NetworkはJavaScript
docx2md - WordドキュメントをMarkdown記法に変換
開発ドキュメントのデファクトフォーマットにもなっているMarkdown。Markdownで書いてさえおけば、その後別なフォーマットに変換するのは難しくありません。その逆で、これまで別なフォーマットで書いていたドキュメントをMarkdownにしたいというニーズもあるでしょう。 今回紹介するdocx2mdはWordドキュメント（docx形式）をMarkdown記法にしてくれるソフトウェアです。 docx2mdの使い方 実行例です。行間がないので詰まった印象がありそうです。 docx2mdは瞬時にMarkdown記法で書かれた内容が標準出力されるので、既存のドキュメントをさくさくと変換できそうです。逆にMarkdownからWordドキュメントに変換するソフトウェアもあるので、必要に応じて変換すれば良いでしょう。テキストであればバージョン管理もしやすく、メンテナンスも楽でしょう。 docx2mdは
drawthe.net - Visioに頼らず綺麗なネットワーク構成図を手に入れる MOONGIFT
開発者であれなネットワーク構成図を書く機会があるかと思います。そんな時、ドローツールを使うとメンテナンスが面倒だったり、変更時の差分確認もできず、徐々に運用が煩雑になっていきます。 そこで使ってみたいのがdrawthe.netです。テキストから詳細なネットワーク構成を生成してくれるドローツールです。 drawthe.netの使い方 左側のテキストで書かれた内容を右側でプレビューできます。 こんな図も。 カラーパターン。 複雑なノードの繋がりを表現しています。 まさにスター型ともいえる構成例。 コードを書いたり、文字のスタイル指定もできます。 ネットワークだけでなく、こんな図も書けます。 ファイアウォールなどをイラストで表現した例。 クラウドを使った構成に使えそうな例。 PNG画像で保存できます。 日本語も利用できます。 drawthe.netはテキストで書かれた内容をSVGで書き出します。
Google Calendar event link generator - Googleカレンダーに予定を登録するリンクを生成 MOONGIFT
Googleカレンダーを自分のスケジュール管理に使っている人は多いかと思います。そして、Webサービス提供側としても日程情報が決まったら、それをGoogleカレンダーに登録するリンクを表示したいと思うことでしょう。 今回紹介するGoogle Calendar event link generatorはまさにその目的にぴったりなソフトウェアです。Googleカレンダー用のリンクを生成してくれます。 Google Calendar event link generatorの使い方 カレンダーに登録する情報を入力します。 リンクを生成しました。 そのURLにアクセスすると、必要な情報が入力された状態で表示されます。 Google Calendar event link generatorは自動でスケジュールを登録してくれる訳ではありませんが、後は保存ボタンを押すだけの状態にしてくれます。イベント
Chrome Extension CLI - Google Chrome機能拡張開発を強力にサポート
MOONGIFTはオープンソース・ソフトウェアを紹介するブログです。2021年07月16日で更新停止しました Google Chrome機能拡張を使えばWebブラウザがさらに便利になります。普段物足りない、痒いところに手が届かないと感じているなら自分で機能拡張を作ってしまいましょう。しかし作り方を一から学ぶのは面倒ですよね。 そこで使ってみたいのがChrome Extension CLIです。Google Chrome機能拡張作成をサポートしてくれるCLIツールです。 Chrome Extension CLIの使い方 ベースを作成して、Google Chromeで取り込みます。 ツールバーでカウンターが使えます。これがスケルトンとして生成されます。 コードを編集すればGoogle Chrome側に反映されます。 Chrome Extension CLIでは自動的にGoogle Chrome
Vue-Blocks - Vue製のデータフローエディタ
MOONGIFTはオープンソース・ソフトウェアを紹介するブログです。2021年07月16日で更新停止しました ノードをつなぎ合わせてユーザがその場で動作を変えられる仕組みは人気ですが、そのUIはとても複雑です。専用のライブラリを使いますが、それ以外の仕組みとの相性を選びます。 もしVueで作っているならばVue-Blocksがその役割にぴったりでしょう。 Vue-Blocksの使い方 デモ画面です。 ノードを追加できます。種類によってインプットとアウトプットの数が違います。 ノード同士はマウスのドラッグ&ドロップで連結できます。 Vue-BlocksはVueコンポーネントなので、特定のフォーマットに沿ってデータを渡すだけでこのUIを作ってくれます。後は処理が終わった時のデータを保存するだけです。ビジュアルプログラミングやデータフローなど色々な場面で使えそうです。 Vue-BlocksはVu
s3st - Amazon S3にある複数オブジェクトの内容を標準出力
MOONGIFTはオープンソース・ソフトウェアを紹介するブログです。2021年07月16日で更新停止しました システムのログをAmazon S3に保存しているという会社は多いかと思います。そして、そのログの中で特定のメッセージが来たら分かるようにしたいというワークフローは多いでしょう。定型化されればシステムを組んでも良いですが、都度変わる場合にはデータをダウンロードして検索して…といった手間暇をかける必要があります。 そこで使ってみたいのがs3stです。Amazon S3のデータをストリーミングにダウンロードできるソフトウェアです。 s3stの使い方 s3stコマンドを実行する例です。単一、または複数のオブジェクトを指定できます。 $ s3st bucketName path/to/objects/ < !DOCTYPE html> <html> <head> <meta charset=
SlidesCodeHighlighter - ソースコードをスライドに貼り付ける際に
MOONGIFTはオープンソース・ソフトウェアを紹介するブログです。2021年07月16日で更新停止しました スライドに綺麗にシンタックスハイライトされたコードを使いたいと思ったことはないでしょうか。コードを画像にするのは格好悪いですし、普段自分がエディタで使っているハイライトではないものを使いたい場合はとても大変です。 そこで使ってみたいのがSlidesCodeHighlighterです。ソースコードのハイライトに特化したソフトウェアです。 SlidesCodeHighlighterの使い方 左側にコードを貼ると、右側にハイライトされた状態で表示されます。 フォントサイズを変えたり、テーマを指定することもできます。 SlidesCodeHighlighterで生成したコードをコピーして貼り付ければ、その色情報はそのまま利用できます。例えばGoogleスライドのようなWebアプリケーション
copy-code-block - プログラミングコードをクリップボードにコピー MOONGIFT
ブログなどでコードを記載しているサイトは多いです。その表示方法も様々で、行番号があるもの、ハイライトが付いているものなどがあります。そのコードをコピーしても余計な行番号が付いてきたりして、ストレスと感じたりします。 そこで使ってみたいのが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
jQuery Smart Wizard 4 - jQuery製のウィザードライブラリ
たくさんの入力欄があるフォームをまとめて入力するのは苦痛です。果てしなく続く入力欄を見ただけで気分が萎えてしまいます。そこで使えるのがウィザードです。入力欄をグルーピング、分割することで心理的負担を下げられます。 そこで使ってみたいのがjQuery Smart Wizard 4です。jQuery/Bootstrapをサポートしたウィザードライブラリです。 jQuery Smart Wizard 4の使い方 矢印形のウィザード。 サークル型。 ドット型。 モーダルウィンドウと組み合わせることも可能です。 jQuery Smart Wizard 4はjQueryとBootstrapというよくある組み合わせで使えるのが便利です。VueやReactなどのライブラリに依存することがないので、広くWebサイトで使えるでしょう。 jQuery Smart Wizard 4はjQuery/JavaScri
Treeify - JSONをtreeコマンド風に表示
MOONGIFTはオープンソース・ソフトウェアを紹介するブログです。2021年07月16日で更新停止しました treeコマンドはエンジニアであれば誰しもが一度は使ったことのあるコマンドではないでしょうか。ディレクトリ構成をCUIで分かりやすく表示してくれます。多段の階層構造を表現するのに適した手法と言えます。 そんなtreeコマンド風にJSONを表示してくれるのがTreeifyです。 Treeifyの使い方 元のコードです。 var treeify = require('treeify'); console.log( treeify.asTree({ apples: 'gala', // ├─ apples: gala oranges: 'mandarin' // └─ oranges: mandarin }, true) ); これを実行すると、以下のように表示されます。treeコマンド
Kill Bill - 購読型ビジネスの請求/支払い管理 MOONGIFT
購読型のビジネスは契約数が増えればビジネスとして魅力的になります。それは消費者を相手にした場合はもちろんのこと、月額数万円での企業契約でも変わりません。しかし、数が増えれば管理が煩雑になるでしょう。 そこで使ってみたいのがKill Bill、購読型の請求/支払い管理システムです。 Kill Billの使い方 購読プランの一覧です。 購読プラン テナントの詳細。 テナント詳細 支払いの一覧。 支払い一覧 支払いの詳細。メッセージがJSONになっています。 支払い詳細 決済がうまくいった場合。 支払い詳細（成功時） レポートです。アクティビティレポート。 レポート 日ごとの請求書数。 請求書の数 日ごとの支払額。 支払額 Kill Billは購読型ビジネスにおける契約および支払いの管理ができます。契約が細かく分かれていたり、支払う日時がバラバラだったりすると、その管理が煩雑になってしまうでしょ
Graphdoc - GraphQLスキーマからドキュメントを生成
Web APIとしてGraphQLを提供するサービスが増えています。従来のREST APIでは限界のあった、データ構造の自由さに対応するにはGraphQLがベストな選択でしょう。しかしREST APIとは異なるために、求められる情報も変わってきます。 そこで使ってみたいのがGraphdocです。GraphQLのスキーマを使ってWeb APIドキュメントを生成します。 Graphdocの使い方 トップページです。 スキーマの定義を確認できます。 ミューテーション。 型について。 enumについて。 オブジェクトについて。 Graphdocを使うことで構造が明確になり、指定する条件が分かりやすくなります。GraphQLの場合はREST APIとは異なり、エンドポイントが一つです。そのため構造さえ分かってしまえば、後は自由にクエリを記述できるでしょう。 GraphdocはTypeScript製の
xltrail - VBAの差分を表示するGitサブコマンド
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
graphqlviz - GraphQLのスキーマを可視化 MOONGIFT
GraphQLはデータ構造がスキーマとして定義されています。それらを読み解くことで、あらかじめデータ構造を把握してクエリを投げられるようになっています。しかしJSONから内容を正しく見極めるのはなかなか難しいでしょう。 そこで使ってみたいのがgraphqlvizです。GraphQLの構造を画像などで可視化してくれます。 graphqlvizの使い方 とあるサーバの例。 これはかなり複雑な例ですが、モデル同士のつながりがビジュアル化されており、全体の構造が把握できます。また、モデル自体の構造も分かるのでどういったフィールドからデータを取り出せば良いかも分かりやすいでしょう。GraphQLへのクエリを書く際に用意しておくと便利そうです。 graphqlvizはnode/JavaScript製のオープンソース・ソフトウェア（MIT License）です。 sheerun/graphqlviz:
Breakdance - HTMLをMarkdownに変換するライブラリ
MOONGIFTはオープンソース・ソフトウェアを紹介するブログです。2021年07月16日で更新停止しました Markdownが流行っています。とりあえずMarkdownで書いておけばHTMLはもちろん、PDFなどにも展開できます。しかしこれまでに書いた資産はどうしたら良いでしょうか。WYSIWYGエディタで作られたHTMLコンテンツは捨て置くしかないのでしょうか。 そんなことはありません。Breakdanceを使えばHTMLコンテンツをMarkdownに変換できます。 Breakdanceの使い方 BreakdanceはCLIがないのでコードから使います。例えば次のような感じです。 > var Breakdance = require('breakdance'); undefined > var breakdance = new Breakdance(); undefined > bre
JointJS - 多彩な図を描けるJavaScriptライブラリ
MOONGIFTはオープンソース・ソフトウェアを紹介するブログです。2021年07月16日で更新停止しました Web上での表現力を向上させるためのライブラリが多数存在します。多くはグラフを描くものであったり、より複雑なチャートを描くものです。さらにWebGLを使ったり、Canvasに複雑な描画を行うものもあります。 今回紹介するJointJSはCanvas上に図形を描くのですが、JavaScriptと連携したインタラクティブな図を描けます。 JointJSの使い方 デモです。まずは回転する図形。 こんな図形も描けます。なお、緑と赤のポイントはドラッグでラインを接続できます。 各オブジェクトはマウスでドラッグできます。 図はグルーピングされていたり、コネクトされている場合は線も一緒に動きます。 デモです。赤いポイントがアニメーションしています。 パイチャートともちょっと違う図形です。 各要素
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
業務で使えるオープンソース（235）·Markdown拡張記法 MOONGIFT