danfo.js - データを素早く手軽にビジュアル化 MOONGIFT
データのビジュアライズはとても大きな問題です。ツールによって使い勝手がばらばらで、簡単に使えるものもあれば、とても複雑なものもあります。データ量によって選択肢が変わり、最適な表示方法も異なります。 今回紹介するdanfo.jsは、とても簡単に使えるデータビジュアライズソフトウェアです。 danfo.jsの使い方 danfo.jsの実行例です。データをとってきて、それを3つのパターンでビジュアライズしています。 const df = await dfd.read_csv("https://raw.githubusercontent.com/plotly/datasets/master/finance-charts-apple.csv") df['AAPL.Open'].plot("div1").box() //makes a box plot df.plot("div2").table()
Trello Clone - Vue製のカンバン
MOONGIFTはオープンソース・ソフトウェアを紹介するブログです。2021年07月16日で更新停止しました Trelloのようなカンバンシステムを使うことで、ステータスが変化するデータをうまく可視化できるようになりました。プロジェクト管理はもちろん、注文の処理状況、製造現場でのステータス可視化など様々な場面で活躍しています。 そんなカンバン表示を自分たちのシステムにも組み込みたければオープンソースなものを使いましょう。今回はVueで使えるTrello Cloneを紹介します。 Trello Cloneの使い方 リストを作って、その中にアイテムを登録します。 ドラッグ&ドロップでアイテムを移動できます。 デモです。 Trello Cloneはアイテムのタイトルだけで、細かな情報は入力できません。しかし、そこはカスタマイズしたり、シンプルなまま使うのもいいでしょう。Vueであればコンポーネン
Grid.js - React/Angular/VueをサポートしたHTMLテーブルライブラリ MOONGIFT
HTMLで使ってデータをテーブル表示するのは簡単です。しかし、ちょっとUIをよくしたり、ソートなどの機能を追加しようと思うと、途端に面倒になります。素のHTMLのままではとても使い勝手がいいとはいえません。 そんなHTMLテーブルを手軽に高機能化してくれるライブラリがGrid.jsになります。 Grid.jsの使い方 データはJSONで渡すだけです。 HTMLを使うこともできます。 ページネーションも使えます。 キーワードによるフィルタリング。 ソート。 横に長いテーブルも問題ありません。 Grid.jsはライブラリ依存がないJavaScriptで作られています。しかし、Angular/React/Vueをサポートしており、フレームワークと組み合わせて高機能なテーブルを提供できます。足りない機能はフレームワーク側で提供すればいいでしょう。 Grid.jsはTypeScript製のオープンソ
Artyom.js - Webサイトにボイスコマンドを追加 MOONGIFT
ボイスコマンドといえばSiri、Google Home、Alexaなどが有名です。スピーカーやスマートフォンに語りかけるだけでアクションしてくれるのは、一度慣れると手放せません。他にももっと音声だけで操作できれば便利なのにと思ってしまうでしょう。 そこで使ってみたいのがArtyom.jsです。WebサイトでJavaScriptベースの操作ができるようになります。 Artyom.jsの使い方 Artyom.jsのコードです。特定のワードに対して反応し、それに対するアクションを定義できます。 Artyom.jsでは聞く方はもちろん、発話も可能です。つまり音声認識した結果に対して、発話で対応もできます。さらに認識する内容はワイルドカードを使った定義もできるので、ある単語を翻訳したり、どこどこに移動するといった指定も可能です。 Artyom.jsはJavaScript製のオープンソース・ソフトウェ
Hacker UI - 開発者向けのWeb UIフレームワーク
Webサイトはシンプルなデザインが好みです。情報量が多いと、どこを見ていいのか分かりませんし、情報の取りこぼし（メールマガジンの送付設定など）があってイライラしたりします。 開発者には開発者に合ったUIがあるはずです。今回紹介するHacker UIはまさに開発者のために作られたWeb UIフレームワークです。 Hacker UIの使い方 スクリーンショット多めで紹介します。 ボタンです。 ボタンをアウトライン化した例。 リスト。 フォーム。 ラジオボタン。 チップ。 ツールチップ。 モーダル。 タイポグラフィ。 Hacker UIはボタンなどがはっきりしており、フラットなデザインになっています。シンプルで、何が何を行うUIなのかが分かりやすいです。開発者以外の人にとっては殺風景に見えるかも知れませんが、開発者にとってはこれくらいのデザインがさっぱりしていて、使いやすいのではないでしょうか。
plant_erd - ER図をPlantUML用にエクスポート
UMLをテキストベースで記述できるPlantUMLを使っている方は多いのではないでしょうか。クラス図を流用する形でER図も描くことができます。そして、データベースはすでにあり、そこからPlantUML用に出力できればいいのに、と考えている方もまた多いでしょう。 そんな方にお勧めなのがplant_erdです。各種データベースに対応したER図エクスポートソフトウェアです。 plant_erdの使い方 出力した内容をPlantUMLで表示しています。 plant_erdはSQLite3、MySQLそしてPostgreSQLに対応しています。各データベースの内容をそのままPlantUML向けに出力が可能です。特定のテーブルだけを出力対象にもできます。リレーションも再現され、データベース構造をドキュメントに書き出すのにぴったりです。 plant_erdはGo製のオープンソース・ソフトウェア（MIT
PWA asset generator - PWA用のアイコン/スプラッシュスクリーン用画像を一気に生成 MOONGIFT
PWA（Progressive Web Apps）は今後のWebを担う大事な技術になっています。多数ある技術を合わせたものなので、すべてを実装するのは難しいですが、逆に一部からでもはじめられるのがメリットです。 そんなPWAでアプリとしてインストールする機能に注目が集まっていますが、面倒なのが多数のアイコンを作成しなければならない作業です。そこで使ってみたいのがPWA asset generatorです。 PWA asset generatorの使い方 PWA asset generatorを実行します。画像やSVGファイルを指定するだけです。 $ pwa-asset-generator new-org-logo.png 16:24:49 getSplashScreenMetaData Initialising puppeteer to load latest splash screen
drawthe.net - Visioに頼らず綺麗なネットワーク構成図を手に入れる MOONGIFT
開発者であれなネットワーク構成図を書く機会があるかと思います。そんな時、ドローツールを使うとメンテナンスが面倒だったり、変更時の差分確認もできず、徐々に運用が煩雑になっていきます。 そこで使ってみたいのがdrawthe.netです。テキストから詳細なネットワーク構成を生成してくれるドローツールです。 drawthe.netの使い方 左側のテキストで書かれた内容を右側でプレビューできます。 こんな図も。 カラーパターン。 複雑なノードの繋がりを表現しています。 まさにスター型ともいえる構成例。 コードを書いたり、文字のスタイル指定もできます。 ネットワークだけでなく、こんな図も書けます。 ファイアウォールなどをイラストで表現した例。 クラウドを使った構成に使えそうな例。 PNG画像で保存できます。 日本語も利用できます。 drawthe.netはテキストで書かれた内容をSVGで書き出します。
Vue-Blocks - Vue製のデータフローエディタ
MOONGIFTはオープンソース・ソフトウェアを紹介するブログです。2021年07月16日で更新停止しました ノードをつなぎ合わせてユーザがその場で動作を変えられる仕組みは人気ですが、そのUIはとても複雑です。専用のライブラリを使いますが、それ以外の仕組みとの相性を選びます。 もしVueで作っているならばVue-Blocksがその役割にぴったりでしょう。 Vue-Blocksの使い方 デモ画面です。 ノードを追加できます。種類によってインプットとアウトプットの数が違います。 ノード同士はマウスのドラッグ&ドロップで連結できます。 Vue-BlocksはVueコンポーネントなので、特定のフォーマットに沿ってデータを渡すだけでこのUIを作ってくれます。後は処理が終わった時のデータを保存するだけです。ビジュアルプログラミングやデータフローなど色々な場面で使えそうです。 Vue-BlocksはVu
STREAMA - 自分で立てるストリーミング動画配信サーバ
動画配信サービスがたくさん出てきました。NetflixやAmazonのような大手から、Disney+やDplay、DAZNのような特定ジャンルに特化した配信サービスもあります。日々動画を見ている人も多いでしょう。 しかし開発者としては見ているだけでは面白くありません。配信側になりたいという方はSTREAMAを見てみましょう。 STREAMAの使い方 トップページ。Netflixっぽい画面です。 動画一覧。 動画再生画面です。 ジャンルごとの一覧もあります。 動画管理画面。 STREAMAは個人や家庭などでの利用を想定しているようです。そのため、ファイル一覧のような画面がありますが、カスタマイズすることでNetflix風の配信サービスにもなり得るでしょう。動画をたくさん持っている方はSTREAMAで管理、閲覧するのも良さそうです。 STREAMAはnode/JavaScript製のオープンソ
konstellate - Kubernetesの設定をビジュアル化
Kubernetes（以下k8s）は設定ファイルを記述してアーキテクチャを指定しますが、慣れるまでは設定が抜けてしまったり、うまくリンクできなかったりします。さらに設定が複雑化すると、全体を俯瞰的に確認したいと思うことでしょう。 そこで使ってみたいのがkonstellateです。k8sの設定内容をビジュアル化します。 konstellateの使い方 設定ファイルを読み込んだところです。各コンテナが丸で表されて、線でコネクションを表現します。 丸をクリックすると、その内容が分かります。 テキストベースの設定を確認、編集できます。 konstellateを使えばk8sの設定を可視化しながら行えます。すでにある設定ファイルを可視化するのはもちろん、新しく作ることもできます。k8sの設定を行う際にぜひ使ってみたいソフトウェアです。 konstellateはClojure製のオープンソース・ソフトウ
LaRecipe - Markdownから格好良いドキュメントを生成
MOONGIFTはオープンソース・ソフトウェアを紹介するブログです。2021年07月16日で更新停止しました 開発者に対して見栄えの良いドキュメントを提供する、これはDevRelにおいて大事な要素です。誰だって使いづらい、読みづらいドキュメントは嫌がるものです。デザインはもちろんのこと、文字サイズや見出しの付け方などによっても可読性は変わってきます。 そこで紹介したいのがLaRecipeです。Laravelを使い、Markdownから綺麗なドキュメントを生成してくれるソフトウェアです。 LaRecipeの使い方 デモです。左側に大見出し、中央がコンテンツ、右側にそのページのアウトラインが表示されます。 コードなども綺麗に表示されます。 アウトプットのデモデザインを入れている例。 ドキュメントの下にはコメント欄が用意されています。 左側の目次は非表示にできます。 検索も使えます。 LaRec
Sufee Admin - Bootstrap4対応の多機能ダッシュボードデザインテンプレート MOONGIFT
Bootstrap4がそろそろ本格的に導入されるようになっています。後方互換性がないため、これまでのテンプレートが使えなくなってしまったのが残念です。しかし、これによって新しいチャンスが生まれたとも言えるでしょう。 Sufee AdminはBootstrap4向けの管理ページテンプレートになります。今後のことを考えるならばBootstrap4対応版を使うのが良いでしょう。 Sufee Adminの使い方 ダッシュボードです。数値をリアルタイムに更新できます。 テーブル。 ボタン。 バッジ。 タブ。 カード。 ダッシュボードの表現も様々です。 グラフはChart.js/Flow Chart/Peity Cartに対応しています。 地図表示。 ログインページ。 Sufee Adminを使うことで、サイドメニューがあるタイプの管理画面が簡単に構築できます。多くのシステムでは管理画面のデザインまで
console - コンソール用Dockerクライアント
MOONGIFTはオープンソース・ソフトウェアを紹介するブログです。2021年07月16日で更新停止しました DockerはCUIから使うのが基本です。ずっと使っていると気にしないかも知れませんが、色がなく寂しいクライアントです。絢爛豪華とは言いませんが、もう少し色があると便利になりそうです。 そこで試してみて欲しいのがconsoleです。カラーリングされたDockerクライアントです。 consoleの使い方 Dockerを使う場合、起動も簡単です。 docker pull dlacewell/console docker run -it -v /var/run/docker.sock:/var/run/docker.sock console ちょっと色があって分かりやすくなっています。 フィルター機能があります。 ヘルプです。 コンテナ一覧も表示できます。 consoleはWebブラウ
ctop - topライクなコンテナのステータスチェックコマンド MOONGIFT
Dockerにハマると何でもDocker化したくなります。すべてのサービスをDocker化することでプロセスがセキュアになり、限られたポート同士で連携できるようになります。ホストの環境依存もなくなり、移行や開発環境構築も簡単になります。 そんなDockerコンテナの状態をチェックできるのがctopです。topライクに使えるコマンドです。 ctopの使い方 コマンド実行例です。 新しいDockerコンテナを立ち上げたらリストも更新されます。 ctopではコンテナごとにメモリ使用量、CPU、ネットワーク、ディスクI/Oなどが計測できます。パフォーマンスが著しく悪いコンテナを見つけて改善したり、メモリ使用量の多さをチェックするのに使えるでしょう。開発環境はもちろん、運用環境でも役立つことでしょう。 ctopはGo製のオープンソース・ソフトウェア（MIT License）です。 bcicen/ct
PsiTransfer - 自前で立てるファイル共有サーバ
MOONGIFTはオープンソース・ソフトウェアを紹介するブログです。2021年07月16日で更新停止しました メールなどで巨大なファイルを送りつけるのはあまり良いことではありません。受ける側は強制的に受信せざるを得ませんし、そのせいで大事なメールが受信できなくなってしまうかも知れません。そのため、送受信両方でメールのサイズ制限を設けていることはよくあります。 そんな時のために使えるのがファイルをシェアするサーバです。今回はPsiTransferを紹介します。 PsiTransferの使い方 最初の画面です。ファイルをドラッグ&ドロップで登録します。 ファイルを登録しました。保存期間やパスワードも設定できます。 アップロード中です。 アップロードが完了し、専用のURLが生成されました。 そのURLにアクセスするとパスワードが聞かれます。 パスワードが合っていればファイルがダウンロードできます
mini.css - 小さくても多彩なUIを提供するスタイルシートフレームワーク MOONGIFT
CSSフレームワークはたくさん存在します。それぞれにコンセプトがあり、使いやすいものを選択するでしょう。特にUIパターンが多いものはデザイン的に統一感が出やすく、場当たり的に素材を探さずに済むので重宝します。 今回はそんな多数のUIを揃えたCSSフレームワーク、mini.cssを紹介します。 mini.cssの使い方 スクリーンショット多めで紹介します。まずはタイポグラフィ。 リスト。 画像。レスポンシブです。 グリッド。 レイアウト。 ヘッダーバー。 フッターにも。 フォーム。 テーブル。 左側固定のテーブルも作れます。 カード。 画像や動画を含めたカードも。 タブ。 テキストハイライト。 アラート。 ツールチップ。 プログレスバー。 画像を丸くしたり影をつけたり。 パンくず。 mini.cssはスタイルシートなのでJavaScriptとの連携（モーダルなど）はありませんが、それでも十分
DBeaver - 多彩なデータベースに対応した管理UI
データベースを使った開発や運用時においてGUIの管理インタフェースが欲しいと思うことは多々あります。特にプロジェクトによってデータベースの種類が違ったり、接続先があちこちに存在するとそう感じるはずです。 そこで使ってみたいのがDBeaverです。多彩なデータベースに対応した管理UIです。 DBeaverの使い方 接続先の選択画面です。PostgreSQL/MySQL/MariaDB/DB2/Oracle/SQL Serverなどの基本に加えてMS Access、infomix、MongoDB、Firebirdなども選択できます。 SSHトンネルに対応しているので本番環境のデータベースも確認できるでしょう。 接続しました。 テーブルの一覧です。 データも確認できます。 ダイアグラムはリレーションなどの関係が分かるようになっています。 DBeaverを入れておけば、大抵のデータベースには接続で
zPath.js - SVGをアニメーションしながら描画 MOONGIFT
SVGの良いところはベクターベースのデータである点と、内容がXMLなのでプログラマブルに操作可能ということです。バイナリデータと異なり、一部だけを描画したり色を変えると言ったことも簡単にできます。 そこで使ってみたいのがzPath.jsです。SVGを読み込んでアニメーションしながら描画してくれます。 zPath.jsの使い方 一例。速度も制御できます。 描き方も変更できます。 zPath.jsを使えばロゴなどもアニメーションするように指定できます。これまでは動画やアニメーションGIFを使うしかありませんでしたが、zPath.jsを使うことでSVGを使う利点が生まれそうです。 zPath.jsはjQuery/JavaScript製のオープンソース・ソフトウェア（MIT License）です。 zPath.js Demo Zet-Tools/zPath.js: A jquery plugin
Sharedocs - 社内で使えるQiitaクローン
MOONGIFTはオープンソース・ソフトウェアを紹介するブログです。2021年07月16日で更新停止しました 強い組織を作るためにはナレッジの共有が欠かせません。個々人のナレッジに留まっていては同じ経験を繰り返すだけですし、何も培われていきません。問題はどこに書き留めるかです。かつてはWikiもありましたが、慣れないと使いこなせませんでした。 今回紹介するオープンソース・ソフトウェアはSharedocs、プログラマが使い慣れているであろうQiitaクローンです。 Sharedocsの使い方 Sharedocsのトップページです。 ログインしました。カラーリングは違いますが、UIはとてもQiitaに似ています。 新規作成画面です。ここのデザインは結構違います。が、プレビューの機能などはついています。 表示例です。記法はMarkdownが使えます。 ユーザページです。投稿数、ストック数などが確
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
