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 家
Fluent UI - Microsoft社製のReact向けUIコンポーネント
HTML5で高度なWebアプリケーションの開発が行えるようになっています。そういったサービスを開発する場合、大事なのはUIです。従来のWebっぽさを残すと、ユーザビリティが低くなりがちです。なるべくネイティブ風なUI/UXを意識しましょう。 もしWindows向けのサービスを開発しているならばFluent UIを使ってみましょう。Microsoft社が開発しているUIフレームワークになります。 Fluent UIの使い方 スクリーンショット多めで紹介します。まずはカレンダーコンポーネント。 カラーピッカー。 アイコン付きのピッカー。 アイコンとリスト。 アイコン。下に小さなステータス表示も。 メニュー。 ツールチップ。 サイドパネル。 モーダル。 アイコン。 Fluent UIはMicrosoftのWeb体験に合わせたUIコンポーネントとなっています。Fluent UIを使うことで、Azu
Osgood - 高速なJavaScriptのHTTPサーバ
MOONGIFTはオープンソース・ソフトウェアを紹介するブログです。2021年07月16日で更新停止しました ちょっとしたWebサーバを立てたいと思った時、ワンライナーをよく使います。それよりちょっとだけ複雑なルーティングが必要になったりすると、途端にプログラミング量が増えてしまいます。 今回紹介するOsgoodはそのちょっとした部分を救ってくれる、そんなJavaScriptのHTTPサーバです。 Osgoodの使い方 Osgoodの例です。メインファイルは次のようになります。 // app.js app.port = 3000; app.get('/hello', 'hello-worker.js'); そしてルーティングで呼ばれているファイルの内容です。exportします。 // hello-worker.js export default () => 'Hello, World!';
ProtoGraphQL - GraphQLをビジュアル的に設計
GraphQLはRESTful APIの代替になりえる仕組みです。データ取得に対して自由度が高く、入力と出力両方に対して型指定できるのも良いです。多くはフレームワークと組み合わせて使えますが、自分で一から設計する場合もあるでしょう。 そんな時に使ってみたいのがProtoGraphQLです。GraphQLのスキーマをビジュアル設計できます。 ProtoGraphQLの使い方 メイン画面です。 テーブルを設計します。 その設計を使うためのコードとGraphQLスキーマ、SQLが生成されます。 モデルのビジュアル化もできます。 ProtoGraphQLはクエリ（取得）側の設計が可能で、ミューテーション（更新など）はできないようです。とは言え、型などをビジュアルで設計したり、リレーションも指定できるのは便利です。それこそデータベース設計と同時にできそうです。 ProtoGraphQLはJavaSc
boa - Rust製のJavaScript実行エンジン
MOONGIFTはオープンソース・ソフトウェアを紹介するブログです。2021年07月16日で更新停止しました RustでWebAssemblyを開発している人は多いでしょう。JavaScriptと比べて高速に動作しますが、コンパイルが伴うので動的に動作を変えるのが困難です。例えばユーザにコードを入力してもらって、それをマクロ的に動かしたいということもあるでしょう。 そんな時に使ってみたいのがboaです。Rustで作られたJavaScript実行エンジンになります。 boaの使い方 最後に返値を指定します。 関数も使えます。 ECMAScript6の構文も使えます。 boaはクラスは使えないなど、すべてのJavaScript構文をサポートしているわけではありません。しかし、簡単なマクロレベルの構文であれば十分対応できるでしょう。実行がサンドボックス内に限られることで、ユーザが記述したコードも
bento-starter - PWAを学ぶ、実装するのに参考にしたいスターターキット MOONGIFT
PWA（Progressive Web Apps）というキーワードに注目が集まっていますが、実際のところ何からはじめれば良いのか分からない人は多いのではないでしょうか。PWAは固有の技術を指し示すものではないので、特に分かりづらいでしょう。 そこで参考にしたいのがbento-starterです。PWAとは何か、を学ぶのにぴったりなスターターキットです。 bento-starterの使い方 こちらがそのテンプレートです。 マニフェストファイル、Service Workerもちゃんとインストールされます。 Lighthouseを使った評価はほぼパーフェクトです。 PWAの要素となるCACHE APIの利用はもちろん、アプリマニフェストやアクセシビリティもきちんと提供されています。このbento-starterをベースにしたり、ここから学べることは多数あるでしょう。Service Workerの
Docker Capture Web - Webサイトのキャプチャ用Dockerコンテナ
MOONGIFTはオープンソース・ソフトウェアを紹介するブログです。2021年07月16日で更新停止しました Webサイトのスクリーンショット（それも縦スクロールをサポートした）を撮ろうと思うと、意外と面倒なのが分かります。複数回撮影したスクリーンショットをつなぎ合わせたり、Webブラウザのスクロールや自動操作も行わなければなりません。 そんな手間暇かかる作業をさくっと解決できるのがDocker Capture Webです。Webサイトのキャプチャに特化したDockerコンテナです。 Docker Capture Webの使い方 Docker Capture Webの使い方は簡単です。 ./capture <url> <output_image .png> [options] こんな感じで実行できます。 PCとしてキャプチャした場合。 スマートフォンとして取得もできます。 スマートフォンと
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は
Tabulator - これはすごい。HTMLテーブルを高機能に MOONGIFT
テーブル表示はWebシステムのデファクトとも言えます。業務システムはいうに及ばず、管理者画面などでも必ず求められる表示です。そしてただ表示すればいいという訳ではなく、ソートやフィルタリング、インラインでの編集など様々な機能が求められるものです。 そんな多機能なテーブル表示を実現してくれるのがTabulatorです。多くのニーズを満たしてくれることでしょう。 Tabulatorの使い方 てんこ盛りなデモテーブル。ざっと見てもフィルタ、ページネーション、グラフ表示、ソートなどの機能が確認できます。 インライン編集もサポートされています。 データに合わせて幅を自動調整。 行をクリックして展開する機能。 カラムをグループ化。 カラムを縦に。これはカラムが多い時に便利そうです。 ドリルダウン。 テーブルを入れ子にもできます。 スパークライン表示。 フッターで集計。 HTMLテーブルを変換する機能もあ
Team - Rust製。ツイートやスニペットも投稿できるQiitaクローン MOONGIFT
Qiitaを企業内のメモやブログで使っているところは多いかと思います。しかし内容によっては公にできなかったり、企業のセキュリティへの考え方によって、Qiitaへの投稿が制限されている場合もあるでしょう。 そこで使ってみたいのがクローン系のソフトウェアです。今回はRust 作られたTeamを紹介します。 Teamの使い方 認証画面です。GoogleまたはIDを使います。 投稿一覧画面です。 ユーザごとのプロフィール画面です。 記事詳細です。 新規投稿画面です。 Gist投稿画面。 新しいGistを投稿する画面です。 ツイート機能もあります。 投稿にはコメントもできます。 TeamはシンプルなQiitaクローンといった位置付けのソフトウェアになります。ただ、本家にはないスニペット投稿機能であったり、ツイート機能もあります。企業でソーシャルサービスへのアクセスが禁止されている場合、Teamをその
Remacs - EmacsをRustにポート MOONGIFT
MOONGIFTはオープンソース・ソフトウェアを紹介するブログです。2021年07月16日で更新停止しました Emacsは単なるプログラミングエディタではなく、一つの環境です。常時立ち上げておくのが当たり前で、常に使い続けているものでしょう。今なお多くの開発者が使っていますが、若干の古くささを感じている人もいるかも知れません。 そこで使ってみたいのがRemacsです。EmacsをRustにポーティングしたソフトウェアになります。 Remacsの使い方 起動したところです。まさにEmacsのままです。 普通にEmacsのキーバインドが使えます。 候補の出方もEmacsそのもの。 RustはCやC++に換わる言語と言う人もいるくらいな言語です。Remacsの開発者もラーニングカーブが素晴らしいと賞賛しています。ツールも整っており、開発しやすいとのことです。Remacsのコードを学ぶことで、Ru
lazygit - ターミナル用のGit UI
Gitはターミナルで使っている人が多いかと思いますが、細かい操作になるとつい忘れがちです。不要なファイルが混ざったのに気付かずに思わずコミットしてしまったり、コミット後のキャンセルなどいちいちネットで調べたりしているのではないでしょうか。 そこで使ってみたいのがlazygitです。ターミナル上のGitクライアントです。 lazygitの使い方 Gitリポジトリで実行するとlazygitが立ち上がります。 コミットメッセージの入力もできます。 コミットロゴを追いかけたり、ファイルを対象外にしたりするのも簡単です。 lazygitがGitのすべての機能を使えるとは思いませんが、普段の運用時に使っているくらいの入力であれば問題なくこなせるでしょう。GUIの重たいソフトウェアは使いたくないが、Gitを見やすく管理したいと言った場合に便利そうです。 lazygitはGo製のオープンソース・ソフトウェ
Mindmapp - Electron製のクロスプラットフォームで使えるマインドマップ MOONGIFT
マインドマップは考えを整理するのに便利なチャートです。頭で悶々と考えている内容をどんどんアウトプットするためにも、ユーザビリティが高く、使い勝手がいいものを選ぶのが良いでしょう。 そこで今回はMindmappを紹介します。シンプルで手軽に使えそうなマインドマップアプリです。 Mindmappの使い方 メイン画面です。 ノードには画像を追加したり、マウスで動かせます。 線やノードの背景、テキストの色を変更できます。 設定画面です。 Mindmappはノードを作成し、色を変えたり画像を追加する程度の機能しかありません。しかしマインドマップとして十分です。逆にあまり機能が多いと余計な混乱を招いて、なかなか考えを整理できなくなる可能性があります。Mindmappを使ってさくさくっとマインドマップを作り上げましょう。 MindmappはElectron/TypeScript製のオープンソース・ソフト
dry - ターミナル上で動くDocker管理
MOONGIFTはオープンソース・ソフトウェアを紹介するブログです。2021年07月16日で更新停止しました Dockerは便利なシステムで一旦慣れてしまうと何でもコンテナとして管理したくなります。その結果、コンテナが乱立したり、イメージの管理も煩雑になっていきます。そうすると欲しくなるのが管理UIになります。 GUIでもいくつかありますが、手軽に運用できるのはターミナル上で動くものになるでしょう。今回はその一つ、dryを紹介します。 dryの使い方 一覧で現在動いているコンテナが確認できます。 アクティブでないものも含めた一覧です。 詳細を見たり、ログを確認する、コンテナを再起動や終了させるといった操作もできます。 ログです。 プロセスやメモリの状態。 dryはデフォルトのDockerコマンドで収集できる情報を扱いますが、それでも操作がキーボードで選択していくだけなのでとても楽になります
CodeSandbox - Reactのオンラインプレイグラウンド
Reactの勉強をしたいと思ったとしても、環境の準備に色々と手間がかかっていたらやる気がなくなってしまうでしょう。その途中でエラーが出たり、nodeのバージョンが古いなどと警告が出たりしても萎えてしまいます。 そこで使ってみたいのがCodeSandboxです。オンラインでReactの記述と実行ができるプレイグラウンドです。 CodeSandboxの使い方 メイン画面です。中央のペインでコードを編集できます。 編集内容はすぐに反映されます。 別なファイルを開いて編集できます。 シェアするための設定画面です。 CodeSandboxはJSFiddleに代表されるようなオンラインでのJavaScript開発環境のReact版と言えます。書いたコードを他の人と共有したり、GitHubなどからオンラインデモとしてリンクしたりすると言った使い方もできそうです。 CodeSandboxはnode/Jav
ExcelMerge - Excelファイルの差分ビューワー
Excelを仕事で使っていると、メールでやり取りしたり誤った上書きを避けるためにコピーを作ったりして次第に同じようなExcelファイルに埋もれることになります。二つのExcelファイルを並べて、どこが違うのか見比べた経験は誰しもがあるのではないでしょうか。 そんな方に使ってみて欲しいのがExcelMergeです。Excelファイルの差分チェックツールです。 ExcelMergeの使い方 簡易的なExcelファイルを二つ比べています。 変更されたセル、追加された行などにジャンプできます。 設定で色や動作を変更できます。 ExcelMergeは将来的にマージ機能の実装を目指していますが、現時点では差分表示までとなっています。とは言え、差分が見える形になっているだけで作業負荷は大幅に軽減されるのではないでしょうか。Excelをよく使っている方にお勧めです。 ExcelMergeはWindows用
PurpleJS - JVM上で動くサーバサイドJavaScriptフレームワーク
MOONGIFTはオープンソース・ソフトウェアを紹介するブログです。2021年07月16日で更新停止しました Node.jsはバージョンアップも早く、開発者としては追従するのに苦労します。新しい機能が増える一方、安定と不安定を繰り返す可能性もあり、採用を躊躇してしまう人もいるのではないでしょうか。 そんな方々に使ってみて欲しいのがPurpleJSです。JVM上で動くJavaScriptアプリケーションフレームワークです。 PurpleJSの使い方 PurpleJSの一例です。 /** * Handles a simple GET request. */ exports.get = function () { return { body: 'Hello World!' }; }; これをgradleでビルドするとサーバが立ち上がります。 さらにシステム情報を取り出す例。 // Require
You-Dont-Need-jQuery - jQueryを使わない書き方教えます
MOONGIFTはオープンソース・ソフトウェアを紹介するブログです。2021年07月16日で更新停止しました jQuery、便利ですよね。すぐに使ってしまうのですが、サイズは肥大化していますし、実際に使うのはそのごく一部でしかなかったりします。 そこで参考にしたいのがYou-Dont-Need-jQueryです。その名の通り、jQueryを使わない標準的な記法を教えてくれるプロジェクトです。 You-Dont-Need-jQueryの使い方 You-Dont-Need-jQueryはソフトウェアというわけではなく、READMEの中で説明をしてくれます。例えばセレクタの書き方。 $('selector'); // ↓ document.querySelectorAll('selector'); クラスを指定する書き方。 $('.class'); // ↓ document.querySele
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
