JSONはWeb APIを使う上でのデファクトとも言えるフォーマットになっています。XMLに比べると可読性が高いですが、それでも人が読むには辛いことが多いです。しかし開発している際にはJSONを読まなければならないことも多いでしょう。 そこで使ってみたいのがjppです。JSONを整形、ハイライトしてくれます。 jppの使い方 jppの実行例です。JSONは標準入力で渡す必要があります。 ヘルプです。インデントと幅を指定できます。 $ jpp --help Usage of jpp: -i string indentation (default " ") -w int width (default 102) jppはJSONの整形としてぴったりです。いつもはWebサービスを使っていたのですが、jppであればmoreなどと組み合わせて、より見やすく使えそうです。機能はごく少なく簡単なツールでは

Zendeskと言えばWebベースのサポートデスクを提供するクラウドサービスですが、他にも様々なビジネス用サービスを提供しています。彼らのサービスは業務用ながらも旧来とは異なるデザインで使い勝手が良いのが特徴です。デザインポリシーも従来のものとはまったく違うのでしょう。 そんなZendeskの各サービスで使われているデザインをオープンソース化したのがZendesk Gardenです。 Zendesk Gardenの使い方 スクリーンショット多めで紹介します。まずはアイコン。 文字だけ出すSVGというのも新しいですね。 チャットやガイドなどサービスごとのアイコンと文字のセット。 アバター。 ボタン。 コールアウト。 アラート。 チェックボックスとトグルボタン。 縦型のアイコンメニュー。 ヘッダー。 タグなど。 グリッド。 メニュー。 メニューにアイコンを付けることもできます。 モーダル。 ペ

MOONGIFTはオープンソース・ソフトウェアを紹介するブログです。2021年07月16日で更新停止しました 今やシステム開発時においてWeb APIを使わない手はなくなっています。開発を効率化したり、自分たちが持っていない技術もWeb APIを使うことで即座に手に入れることができます。しかし、開発中にもネットワークが必要になったり、負荷テストはしづらいといった欠点もあります。 そこで参考にしたいのがstripe-mockです。決済APIを提供するStripeが開発したモックサーバです。 stripe-mockの使い方 stripe-mockを立てた後はStripeのAPIと同じようにアクセスできます。 $ curl -i http://localhost:12111/v1/charges -H "Authorization: Bearer sk_test_123" Request: GE

MOONGIFTはオープンソース・ソフトウェアを紹介するブログです。2021年07月16日で更新停止しました 情報の関連性を表現する際にフローチャートが便利です。常に1対1の関係ではなく、分かれたり、交差したりすることもあるでしょう。情報の関連性がビジュアル化されることで、理解度が格段に増します。 そこで使ってみたいのがjsPlumbです。情報を接続して表現できるソフトウェアです。 jsPlumbの使い方 フローチャートの例。どういう情報の伝達をされるのがよく分かります。 データベースのER図の例。こちらもリレーションが可視化されます。 線は自動で引かれますので、オブジェクトを移動するだけで線の引かれ方が変わります。 jsPlumbは様々な情報を可視化するのに使えるでしょう。線は自由に動かせない分、情報設計だけに集中できます。組織図やマインドマップなどにも使えるのではないでしょうか。 js

MOONGIFTはオープンソース・ソフトウェアを紹介するブログです。2021年07月16日で更新停止しました 今時、パスワード管理を使っていなかったり、Excelやテキストファイルで管理しているといった方はいないと思います。しかし多くのパスワード管理はWebベースだったり、Webブラウザに紐付いていたり、さらにGUIアプリケーションです。サーバ管理者にとっては使い勝手がよくありません。 そこでターミナルでも使えるパスワード管理を導入しましょう。それがPwman3です。 Pwman3の使い方 Pwman3は専用のコンソールを使います。newで新しいパスワードを登録します。 pwman> new Username: goofmint Password (leave empty to create one): Password length (default: 8):12 Url: https:

ヘッドレスなChrome/Chromiumは幾つかありますが、今一番注目されているのがPuppeteerでしょう。理由としては開発しているのがGoogleということで、継続的な開発が期待できる点です。 そんなPuppeteerを操作するスクリプトをGoogle Chrome上で作成できるのがDayDreamです。 DayDreamの使い方 ツールバーにある録画アイコンをクリックすると操作を記録開始します。 できあがるとアイコンにバッジが表示されます。 クリックするとスクリプトが表示されます。 DayDreamはPuppeteerだけでなく、Nightmare向けのスクリプトも作成できます。DayDreamでできたスクリプトを使えば、テストや操作の自動化を簡単に実現できるようになるでしょう。 DayDreamはJavaScript製のオープンソース・ソフトウェア（MIT License）です

MOONGIFTはオープンソース・ソフトウェアを紹介するブログです。2021年07月16日で更新停止しました 天気は晴、曇り、雨、雪くらいしかないと思うでしょうか。実際には時々雨と言った表現もあったり、昼と夜とがあったりと細かな派生がたくさんあります。もしWebサイトに天気情報を載せようと思ったら、そのパターンに対応するのが大変です。 そこで使ってみたいのがWeather Symbolsです。様々なパターンに対応した天気アイコンを配布しています。 Weather Symbolsの使い方 曇りや雨など。雲の色も微妙に違います。 曇り時々晴。雨と雪が交じっているケースもあります。 さらに夜の場合は太陽ではなく月になります。 北欧の方では冬の太陽は下半分だけになります。この表現は日本ではなさそうですね。 Weather Symbolsはyr.noという、現在位置の天気を教えてくれるサービスで実際

ReactやAngular、Vueなどは独自のタグを使ったWebコンポーネント型のシステムと言うこともあって、これまでのHTMLデザインの手法が通じなくなっています。デザインの確認などで苦戦している人も多いのではないでしょうか。 そこで使ってみたいのがVue Designerです。Visual Studio Codeプラグインとして動作するVueデザイン確認ツールです。 Vue Designerの使い方 エディタです。Vueファイルに対応しており、デザイナーを開くと右側にプレビューが表示されます。 もちろんリアルタイムに更新されるので、スタイルタグの内容を変えるとすぐに反映されます。 props、データの確認もできます。 Webブラウザなどで表示を確認するのも良いですが、プログラミングエディタの中に埋め込まれていることで、より確認が簡単にできるようになっています。Vue Designerを

ReactやVue、AngularといったJavaScriptフレームワークはHTMLを再定義しており、UIを作るのもそうそう簡単ではありません。デザイナーとの協業も難しく、苦戦している方も多いのではないでしょうか。 そこで使ってみたいのがvueggです。Vueの画面をWYSIWYGに設計できるソフトウェアです。 vueggの使い方 メイン画面です。右側に並んだツールを左側のエディタにドロップします。 ドロワーの設定もできます。 vueggで作った内容はVue.jsのプロジェクトとしてダウンロードができます。プロトタイプ開発にも使えますし、画像などを適用すれば精度の高いデザインツールとしても使えるでしょう。コンポーネントも数多く用意されているので、多くのWebサービスで使えそうです。 vueggはJavaScript製のオープンソース・ソフトウェア（MIT License）です。 vueg

JavaScriptが多くの環境で動作するようになっています。Webブラウザだけでなく、サーバやスマートフォンアプリなど一つの言語でここまで幅広く動作するものはそうそうないでしょう（特にWebブラウザが問題です）。 そんなJavaScriptを使ってデスクトップアプリを作成できるのがVuidoです。Electronと異なる、ネイティブのデスクトップアプリを作ります。 Vuidoの使い方 VuidoはVue.jsを使います。下のコードはデモですが、確かにVue.jsの書き方です。 <template> <window title="my-project" width="400" height="100" margined v-on:close="exit"> <box> <text>Welcome to your Vuido application!</text> </box> </wind

MOONGIFTはオープンソース・ソフトウェアを紹介するブログです。2021年07月16日で更新停止しました 動画やオーディオの変換プログラムとしてよく使われるのがFFmpegですが、高機能であるためにオプションが多数あり、使いこなすのは難しいです。決まりきった使い方であればもっと簡単に使いたいでしょう。 そこで紹介したいのがGoffliです。FFmpegをラッピングして使いやすくしたソフトウェアです。 Goffliの使い方 例えば動画の情報を見る場合には info を使います。 $ goffli info "2016-06-09 15.00.43.mov" Format : QuickTime / MOV Size : 230 kB Duration : 00:00:00 +----------+--------+-------------------------------------

システムでメールを使うことはよくあります。ユーザ登録や通知などによく使われます。しかしこのメールは開発中は取り扱いに困ります。間違って送信されると困りますし、ちゃんと表示がうまくいっているか確認しなければなりません。 そこで使ってみたいのがMailHogです。開発時に使えるSMTPサーバです。 MailHogの使い方 メイン画面です。 Web通知機能があります。 MailHogのSMTPサーバを使うとメールが管理画面で確認できます。 日本語も問題なく扱えます。 MailHogを使えば開発時のメールサーバとして、その内容が正しく届いているかどうか確認できます。誤って送信されてしまうこともないので安心です。開発用メールサーバとして使ってみてください。 MailHogはGo製のオープンソース・ソフトウェア（MIT License）です。 mailhog/MailHog: Web and API

リモートにあるWindowsを操作しようと思うとRDPを使うのが基本です。しかしGUIは重たいので、ターミナルでさくさくと操作したいのではないでしょうか。その際に使えるのがSSHサーバになります。 今回紹介するのはPyRexecd、Python製のスタンドアローンなSSHサーバです。 PyRexecdの使い方 PyRexecdは鍵認証のみ対応しています。 ログインしました。現在は一人のユーザの鍵認証しか対応していないとのことです。 ログインするとタスクトレイに通知が出ます。 PyRexecdはまだ機能的には多くありませんが、Pythonで作られているとあってカスタマイズが色々できそうな雰囲気があります。なお、クリップボードの送受信はできるとのことです。まだ基本的な機能しかありませんが今後に期待したいソフトウェアです。 PyRexecdはPython製のオープンソース・ソフトウェア（MIT

MOONGIFTはオープンソース・ソフトウェアを紹介するブログです。2021年07月16日で更新停止しました MarkdownはHTMLに限らず、様々な場面で使われるようになっています。PDFで出力されることもあります。しかしHTMLは印刷には向いていないフォーマットであり、MarkdownからPDF出力した場合も同様です。 そこで使ってみたいのがIncunabulaです。印刷を前提としたMarkdownエディタです。 Incunabulaの使い方 エディタとしては二画面方式になります。 KaTeXという数式ライブラリに対応しています。 --- でページ分割を行います。 Incunabulaはページ分割を手動で行うようになっていますが、将来的には自動改ページになるようです。また、印刷用のCSSがあたっているなど、印刷を前提とした仕組みになっています。論文やレポートを書くのに適したエディタに

MOONGIFTはオープンソース・ソフトウェアを紹介するブログです。2021年07月16日で更新停止しました 写真には様々な情報が入っています。人もいれば動物も、木やカンバン、窓など色々な情報が含まれているでしょう。それらをラベリングすると、また違った情報の管理方法が見つけられそうです。 そのためのソフトウェアがlabelmeになります。GUIで使えるのでデスクトップからさくさくと作業できます。 labelmeの使い方 メイン画面です。多角形で囲んでいきます。 こんな感じに囲んでラベリングします。 ポリゴン情報はJSONファイルで保存され、それを呼び出すと元写真と囲まれている部分という比較もできます。 labelmeでJSONとして情報が残せていれば、後はCanvasで表現することもできそうです。テキストであればタグを付けるのも簡単ですが、写真ではそうそう単純ではありません。labelme

管理画面で必要な機能と言えばデータをメンテナンスする機能と、主なKPIやシステムのトラフィックを確認できるグラフ機能です。しかしメンテナンスは簡単に実現できてもグラフは意外と面倒で後回しになったり、CSVでダウンロードしてExcelで作るなんて状態になっているのではないでしょうか。 そこで使ってみたいのがjust-dashboardです。設定ファイルとデータの二つでダッシュボードを生成します。 just-dashboardの使い方 just-dashboardの設定ファイルです。YAMLまたはJSON形式で記述します。 dashboard "Food": - h1 text: Food - h2 text: By caloric content - 3 columns: - rows: - h3 text: Bananas - pie chart: { "columns": [ ["Pro

Webサービスや業務システムを通じて集められたデータを表示するのに必要なのがダッシュボードです。ダッシュボードは常に固定表示よりも、各自の使い方に合わせて情報の並び替えが求められます。 そんなUIを作成できるのがDashboardsです。ユーザが自由に画面要素を変更できます。 Dashboardsの使い方 最初の表示です。ダッシュボードを作成します。 色々なウィジェットを配置した例。 ドラッグ&ドロップで配置は変更できます。 変更しているところ。 ウィジェットは右側に並んでいます。 色の変更もできます。 全体の大きさも変更できます。 Dashboardsはウィジェット同士を重ねて表示することができ、多くのダッシュボードライブラリに比べて自由度が高くなっています。開発者としてはウィジェットさえ作成すれば、後は利用者が自由に配置を決めてくれるはずです。 DashboardsはJavaScrip

MOONGIFTはオープンソース・ソフトウェアを紹介するブログです。2021年07月16日で更新停止しました 最近ではWebブラウザが高性能になっており、多くのアプリケーションがWeb化しています。開発環境であるIDEについてもその例外ではありません。コンパイルが伴うような言語であったり、開発環境を整えるのが面倒な時にWeb IDEはとても便利です。 今回紹介するのはIDE、Go向けのWeb IDEになります。 IDEの使い方 最初の表示です。 新しいパッケージを作ります。 基本設定など。ターミナルを起動することもできます。 さらにコードエディタは自動補完がついています。 Webサービスを作ってパスとメソッドを指定できます。 IDEはGo言語に特化した開発環境になっています。さらにWebサービスを作るのにも向いており、ログやテスト、テンプレートなどWebアプリケーションを開発するのに必要な

MOONGIFTはオープンソース・ソフトウェアを紹介するブログです。2021年07月16日で更新停止しました GraphQLはREST APIを越えるかも知れない存在として注目を集めています。どういったデータが欲しいかをクライアント側で指定できるので、必要に応じてデータ構造を変えつつ最適な形で取り出せるのが魅力です。 そんなGraphQLを試せる環境としてGraphQL Playgroundがあります。開発のお供にあると便利そうです。 GraphQL Playgroundの使い方 メイン画面です。左側がエディタ、右側に実行結果が出ます。 実行するとJSONが表示されます。 指定したGraphQLを実行するためのコード生成機能があります。 JavaScriptならfetchを使った版も用意されています。 さらにcurlコマンドも。 クエリを使ってパラメータを送ることもできます。 カラーテーマ

ドラえもんと言えば国民的アニメです。アニメやテレビは見ないという人でも、一度は最初のタイトルコールを見たことがあるのではないでしょうか。そして表示された文字がドラえもんの声で（世代によって分かれると思いますが）再生されることでしょう。 そんなドラえもんのタイトルを生成してくれるソフトウェアがドラえもんのタイトルジェネレーターです。 ドラえもんのタイトルジェネレーターの使い方 生成例です。自由な文字を当てられますが、平仮名が一番それっぽいですよね。 ドラえもんのタイトルジェネレーターで生成すると何でもドラえもんの声で脳内再生されるから不思議です。相手が怒るような言葉でもドラえもんのタイトルジェネレーターを使うと許されるかも知れませんね。 ドラえもんのタイトルジェネレーターはnode/JavaScript製のオープンソース・ソフトウェア（MIT License）です。 pepoipod/dor