Drawflow - データフローを作成するライブラリ
MOONGIFTはオープンソース・ソフトウェアを紹介するブログです。2021年07月16日で更新停止しました ノーコードプラットフォームが普及してきています。プログラミングはせずに、多くの場合はGUIで部品同士を組み合わせて一つの機能を作り上げていきます。 そうしたUIを作るのに使えそうなUIライブラリとしてDrawflowを紹介します。 Drawflowの使い方 デモのUIです。 つながっている線は選んで削除できます。 拡大したり、ノードに変数を与えるといったこともできます。 ダブルクリックのイベント処理。 新しいノードの追加も可能です。 Drawflowは左側の機能（ノード）をドラッグ&ドロップで追加して、各ノードを線でつなぎます。ノーコードプラットフォームであったり、Node-RedやYahoo! Pipes、ScratchのようなUIを実現するのにも使えるでしょう。 Drawflo
GAS 家計簿 - Google Apps ScriptとVueで作られたWeb家計簿
MOONGIFTはオープンソース・ソフトウェアを紹介するブログです。2021年07月16日で更新停止しました IT技術の発展はめざましく、日々新しい技術が登場しています。例えばサーバレス、VueやReactの仮想DOM、ちょっと前であればRESTful APIなどがあります。それらを漏れなくキャッチアップするのは大変です。 今回紹介するGAS 家計簿はサーバレスにGAS（Google Apps Script）を使って家計簿Webアプリケーションを作るハンズオンを兼ねたソフトウェアです。 GAS 家計簿の使い方 デモです。動作しているのはGitHub Pagesです。サーバの管理が不要ですね。 データの追加用モーダルウィンドウ。フロントエンドはVueを使っています。 設定画面です。データはGoogle Apps Scriptを使ってGoogleスプレッドシートに保存されています。 GAS 家
)
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製のオープンソ
VimMan - Vimを習得できるゲーム
開発者であればVimの操作を一度は習得しようとするのではないでしょうか（またはEmacs）。しかし、独特なキーバインドにどうしても慣れず、サーバでの作業が非効率的なままという人も多いはずです。 そんな方はゲーム形式でVimの操作を学べるVimManを使ってみましょう。 VimManの使い方 まずはキャレットの移動を学びます。 次に終了の方法です。 レベル3になるとテキストの入力、追加などを学びます。そうやって徐々にレベルアップしていくことで、あなたもVim男に成長できるという訳です。これから使い方を習得したい方、さらに使いこなしたい方はVimManで学んでみましょう。 VimManはGo製のオープンソース・ソフトウェア（MIT License）です。 ozankasikci/vim-man: A terminal based game that teaches you how to use
Terminus - TypeScript製のターミナル
MOONGIFTはオープンソース・ソフトウェアを紹介するブログです。2021年07月16日で更新停止しました AtomやVisual Studio Codeの登場によって、Web技術を使っても十分ローカルアプリケーションとして利用できるというのが分かっています。そこで様々なソフトウェアがHTML/JavaScript/CSSで作られています。 今回紹介するTerminusもその一つです。よりモダンなターミナルを提供します。 Terminusの使い方 メイン画面です。ターミナルでこんなカラフルな画面を見ようとは…。 ターミナルとしての機能は特に問題ありません。 設定画面です。AtomやVisual Studio Code風です。 プラグインで拡張できます。 Terminusによる拡張はまさに今風と言ったところでしょう。ショートカットキーもカスタマイズできます。設定がJSONになるのも今風で、
csvdiff - CSVに特化した差分ビューワー
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
Fusuma - Markdownを使ったHTMLスライド
MOONGIFTはオープンソース・ソフトウェアを紹介するブログです。2021年07月16日で更新停止しました HTMLでスライドを作る場合、アニメーションやロゴの配置ではなく、コンテンツに集中して作れます。さらに記法がMarkdownであればスライドを作るのが苦手な人であっても問題ありません。さくさくと作れるでしょう。 今回は新しいHTMLスライドのFusumaを紹介します。便利な機能がたくさん詰まっています。 Fusumaの使い方 デモスライドです。 特に良いのがプレゼンテーションモードです。 目次を出す機能もあります。 ターミナル、コードの表示も綺麗です。 メニューです。目次でジャンプもできます。 この手のソフトウェアは幾つもありますが、プレゼンテーションAPIに対応しているものは意外と多くありません。Fusumaを使えばコンテンツはMarkdownでさくさくと、プレゼンテーションモー
Kanon - プログラミングコードを可視化
プログラミングは構造的です。そのため、構文解析して別な言語にしたり、ツリー構造に展開したりできます。それらの構造を見ることで、綺麗な設計になっているかどうかも分かりそうです。 そんな可能性を感じさせるのがKanonです。JavaScriptのコードを解析、ビジュアル化します。 Kanonの使い方 左側にコード、右上にクラスの構造、右下にメインスクリプトの実行が可視化されています。 処理を増やしたところ。 コードが複雑になると、可視化された構造も複雑化します。 Kanonを使うことでプログラミングコードを別な視点から見られるようになります。コードは自動的に更新されるので、自分のコードを貼り付けてみて、どんな構造になっているのか見てみるのも面白そうです。 KanonはJavaScript製のオープンソース・ソフトウェア（MIT License）です。 prg-titech/Kanon: A l
GraphQL Visual Editor - ビジュアルでGraphQLを設計
MOONGIFTはオープンソース・ソフトウェアを紹介するブログです。2021年07月16日で更新停止しました GraphQLはRESTfulに代わる、または補助する存在として注目を集めています。しかし、まだ出始めの技術だけに最適な設計手法が確立されていません。スキーマを作る作業する手作業、またはフレームワークを導入していることでしょう。 今回紹介するGraphQL Visual Editorはそんなスキーマの作成をWebブラウザ上で行い、さらにバックエンドまで作れるソフトウェアです。 GraphQL Visual Editorの使い方 設計画面です。ノードが並んでおり、それらを繋ぐことでスキーマを設計します。 追加、削除、変更できます。 例えばこれはGitHubのGraphQLのスキーマ。とても細かく定義されています。 スキーマを確認できます。 GraphQL Visual Editorは
Debucsser - CSS情報を可視化してデバッグをサポート
CSSは非常にデバッグしづらい技術です。多少間違っていても動きますし、余分にあっても気づきづらいものです。Webサイトを更新するのに伴って、不要なCSSが蓄積されていたなんて話もよく聞きます。 そんなCSSのデバッグに使ってみたいツールがDebucsserです。クラスやIDを可視化してくれます。 Debucsserの使い方 Ctrlキーを押すと、マウスが当たっているDOMのクラス名、ID名が分かります。 Ctrl+Shiftで常に表示モードに変わります。 CSSを構造的に管理する上で、クラス名やID名は欠かせないものでしょう。Debucsserを使えばDOMごとに枠が表示されるので、どの部分が関わっているのかが分かりやすくなります。開発者ツールとはまた異なる使い勝手でしょう。 DebucsserはJavaScript製のオープンソース・ソフトウェア（MIT License）です。 デモ l
CoreUI - Vue/Bootstrap製の管理画面UI MOONGIFT
管理画面は主に運営元が使う画面になるので、デザインへのこだわりが殆ど感じられないことが多いです。しかし運営元が使いやすい画面でないと細かい制御がしづらかったり、サービスのステータス把握が遅れたりするのではないでしょうか。 そこで使ってみたいのがCoreUIです。VueとBootstrapを使って作られた管理画面テンプレートです。 CoreUIの使い方 スクリーンショット多めで紹介します。まずはダッシュボード。このようなUIの管理画面が簡単に作れます。 ボタン。 ソーシャルボタン。 カード。 フォーム。 モーダル。 スイッチ。 テーブル。 タブ。 アイコン。Font AwesomeかSimple Line Iconsがサポートされています。 ウィジェット。 こんなウィジェットも。 チャート。 ログイン画面。 登録画面。 エラー画面。 CoreUIはVueで作られていますので、表示する際にもW
Franchise - 多数のデータベースに対応したSQLノートブック
SQLを覚えると実務で使える様々なデータを取得できるようになります。毎回同じようなSQLを記述するのが面倒で、テキストファイルに定番のSQLをメモで残している方も多いのではないでしょうか。 そんな方にお勧めなのがFranchiseです。SQLを残しておけるノートブックです。 Franchiseの使い方 メイン画面です。複数のデータベースに対応しています。 結果を地図に描画する例です。 グラフ。線グラフです。 棒グラフ。 並び替えた棒グラフ。 ドットだけ。表示を2カラムにしています。 一般的な一覧表も可能です。 レンジを使ってその時の値を表示するパターン。 メールを取り込んでクエリを投げるパターン。 FranchiseのデータリソースはSQLite/PostgreSQL/BigQuery/MongoDB/Microsoft SQL Server/Oracle/DB2/Teradataなどとな
Kanboard - カンバンをベースとしたプロジェクト管理
MOONGIFTはオープンソース・ソフトウェアを紹介するブログです。2021年07月16日で更新停止しました プロジェクト管理ソフトウェアにおいてカンバンは欠かせない存在になってきています。特にアジャイルでスプリント管理しているケースは重宝するでしょう。さらに開発以外のタスクについてもカンバンは便利です。 そんなカンバンをベースとして発展しているプロジェクト管理システムがkanboardです。 kanboardの使い方 ダッシュボードです。まずプロジェクトを作ります。 プロジェクトの詳細画面です。 タスクを作ります。期限やステータスなどもあります。 カンバンです。 ガントチャート表示もできます。 さらにカレンダー表示も。 一覧もあります。 タスクの詳細です。 ステータスを確認できます。 グラフによる可視化も。 Kanboardはカンバン機能が軸になっていますが、表示方法が多彩でプロジェクト
a-table.js - リッチな機能を持ったHTMLテーブルを出力 MOONGIFT
Web上でのテーブル表示はよく使われているだけに、そのUXが優れているかどうかでサービス全体の印象が変わってきます。Excel並とまでは言いませんが、ソートや絞り込み機能はあると便利です。 そんなHTMLテーブルを手軽に優れたUIで提供してくれるのがa-table.jsになります。 a-table.jsの使い方 デモです。上にあるテーブルがa-table.jsの適用例です。文字寄せや色の変更などができます。 カラムを追加できます。 日本語も問題なく使えます。 さらに太字の変更も。 行についても追加や削除ができます。 a-table.jsではHTMLでの出力はもちろん、Markdown形式でも出力できます。ただしMarkdownの場合は文字装飾などの情報は失われています。ビジュアル的にテーブルデータを操作できるので、表計算的な利用もできるでしょう。 a-table.jsはJavaScript
https://www.moongift.jp/tag/%E3%83%97%E3%83%AD%E3%82%B8%E3%82%A7%E3%82%AF%E3%83%88%E7%AE%A1%E7%90%86
Portainer - シンプルなDockerイメージ/コンテナ管理 MOONGIFT
Dockerは一瞬にして仮想環境が立ち上がるのでどんどんコマンドを叩いたりイメージを取り込んだりしている内に全体が肥大化してしまいます。Dockerの状態を含めて可視化しないと綺麗な管理は難しいでしょう。 そこで使ってみたいのがPortainerです。シンプルなDockerコンテナ/イメージ管理システムです。 Portainerの使い方 Portainerのダッシュボードです。 テンプレートも用意されており、ここからすぐにコンテナが作れます。 イメージの作成画面です。 ネットワーク一覧。 ボリューム一覧。 クラスター情報。 Portainerを使えばDockerのステータスが一目で分かるようになります。設定も可視化されているので間違った設定をしたり、設定漏れを防ぐのの役立つでしょう。自動スケーリングには向きませんが、社内のDockerであったり開発環境などであれば役立つでしょう。 Port
Gitea - Go製のGitリポジトリ管理サーバ
Gitリポジトリは分散型ではありますが、一つ信頼できるサーバがある方が便利です。そこでGitHubやBitBucketなどが使われるわけですが、企業によってはセキュリティ上の理由で使えないこともあるでしょう。 そんな方に使ってみて欲しいのがGiteaです。日本語化も行われているGitサーバです。 Giteaの使い方 トップページです。Goで書かれているのでサーバのOSを選ばず実行できるのが特徴です。 登録しました。個人のリポジトリはもちろん、組織にも対応しています。 新しいリポジトリを作りました。この辺りはGitHubに似ていますね。 ちゃんと日本語化されています。 自分に割り当てられている課題があれば、ここで一覧表示されます。 プルリクエストです。 履歴です。 GiteaはWikiの機能があったりと、基本的にはGitHubと同じような機能が並んでいます。さらに課題をプロジェクトを横断して
Sharedocs - 社内で使えるQiitaクローン
MOONGIFTはオープンソース・ソフトウェアを紹介するブログです。2021年07月16日で更新停止しました 強い組織を作るためにはナレッジの共有が欠かせません。個々人のナレッジに留まっていては同じ経験を繰り返すだけですし、何も培われていきません。問題はどこに書き留めるかです。かつてはWikiもありましたが、慣れないと使いこなせませんでした。 今回紹介するオープンソース・ソフトウェアはSharedocs、プログラマが使い慣れているであろうQiitaクローンです。 Sharedocsの使い方 Sharedocsのトップページです。 ログインしました。カラーリングは違いますが、UIはとてもQiitaに似ています。 新規作成画面です。ここのデザインは結構違います。が、プレビューの機能などはついています。 表示例です。記法はMarkdownが使えます。 ユーザページです。投稿数、ストック数などが確
DevHub - 開発者たちにぴったりなチャットシステム
MOONGIFTはオープンソース・ソフトウェアを紹介するブログです。2021年07月16日で更新停止しました 開発はみんなでやると楽しいですよね！ チャットワークなど企業向けにオンラインでコミュニケーションを促進しようとするサービスが多数あります。個人向けであればLINEやTwitter、Skypeもその一つといえるでしょう。しかし開発者にとってはどうも手に馴染まないものが多いです。 プログラマ、デザイナにとって必要な機能に特化させられれば、より開発がスムーズになるかも知れません。その一つになるかも知れないのがDevHubです。 DevHubの使い方 外部サービスから通知を受け取れるようになっており、JenkinsやSubversionからコミット時などに通知を受け取るための設定が書かれています。もちろん他のシステムからもWeb APIを叩けば通知が使えます。 # Subversionの例
Caprine - オープンソース版Facebook Messenger
MOONGIFTはオープンソース・ソフトウェアを紹介するブログです。2021年07月16日で更新停止しました チャットやメッセンジャー系アプリは今やたくさん存在します。LINE、Skype、Facebook Messenger、Slackなど用途や人に応じて選択しているのではないでしょうか。個人的にはFacebook MessengerとSlackをよく使っています。 Facebook Messengerは専用アプリをMac OSX向けに出していますが、同じような機能のオープンソース版がCaprineになります。 Caprineの使い方 Caprine自体はmessenger.comをラッピングしているものと思われます。そのため公式のMessengerアプリとほぼ何も変わりません。 設定も同じです。 CaprineはElectronを使って開発されています。Mac OSX用ということもあっ
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
