MOONGIFTはオープンソース・ソフトウェアを紹介するブログです。2021年07月16日で更新停止しました ノーコードプラットフォームが普及してきています。プログラミングはせずに、多くの場合はGUIで部品同士を組み合わせて一つの機能を作り上げていきます。 そうしたUIを作るのに使えそうなUIライブラリとしてDrawflowを紹介します。 Drawflowの使い方 デモのUIです。 つながっている線は選んで削除できます。 拡大したり、ノードに変数を与えるといったこともできます。 ダブルクリックのイベント処理。 新しいノードの追加も可能です。 Drawflowは左側の機能（ノード）をドラッグ&ドロップで追加して、各ノードを線でつなぎます。ノーコードプラットフォームであったり、Node-RedやYahoo! Pipes、ScratchのようなUIを実現するのにも使えるでしょう。 Drawflo

今のWebサイト、スマートフォンアプリではテキストではなくアイコンで操作を指示することが増えています。絵の方が分かりやすい場面も多いですが、分かりづらいアイコン（保存のフロッピーアイコンなど）もあります。 その中でも大事なのが統一性です。大量のアイコンが一つのパッケージになっていることで、統一されたデザインが実現できます。今回紹介するCoreUI Iconsはフリーでも1,500、有料版では3,000のアイコンが提供されます。 CoreUI Iconsの使い方 各カテゴリの最初の部分だけ紹介します。まずはブランド。 AppleやAmazonなどもあります。 国旗。 アクセシビリティ。 アラート。 ファシリティ。 ビジネス、マーケティング。 チャット。 顔。 ファイル、ドキュメント、メール。 フード、ドリンク。 手。 イメージ編集。 インタフェース。 メディア、オーディオ、動画。 電話系。

Webアプリケーションが多機能になるにつれて、ローカルアプリケーションライクな操作が求められるようになっています。例えばドラッグ&ドロップはローカルアプリケーションであれば良くある操作と言えます。 そんなドラッグ&ドロップをスムーズに行えるライブラリがPlainDraggableです。 PlainDraggableの使い方 ベジュ曲線的なデモです。 グリッドを効かせたドラッグを行うデモです。 スナップする時に、スムーズに動くこともできます。 特定のDOM内には入らないように指定できます。 応用すると、二つのノード、それぞれが入れない場所を指定できます。 ソートにも使えます。 PlainDraggableはDOMだけでなく、SVGに対しても利用できます。ドロー系のアプリケーションであったり、簡易的なゲームなどでも使えそうです。ソートでも使えるので、様々な場面で利用できそうです。 PlainD

Microsoft Accessはオフィスで活躍しています。ちょっとしたシステムであればエンジニアの手を借りることなく、作成できるでしょう。しかし最近ではmacOSも使われるようになっていたり、スマートフォンからも使いたいと言われるかも知れません。 そこで使ってみたいのがExmentです。手軽に使えるWebデータベースシステムです。 Exmentの使い方 作成例です。基本的にダッシュボード風の画面になるようです。 テーブル一覧です。 テーブルの設定です。 テーブルの列設定です。 基本情報です。 データ一覧です。 グラフも表示できます。 マスターデータを登録するのに良さそうです。 Exmentは情報資産をWeb上で管理するためのソフトウェアとのことで、ユーザ自身がテーブルを設計して、データをメンテナンスできます。Excel出力やカレンダービューなどの業務系で便利そうな機能も備わっています。

MOONGIFTはオープンソース・ソフトウェアを紹介するブログです。2021年07月16日で更新停止しました 複雑なチャートを描く際に、ExcelやPowerPointを使っていては、後々の更新コストが大きくなります。そこでお勧めなのがGraphvizです。dotファイルを作れば、チャート化する部分は自動で任せられるようになります。 今回紹介するGraphvizOnlineはWeb上でGraphvizを試せるツールです。各自のローカルにインストールする手間がなくなるのでお勧めです。 GraphvizOnlineの使い方 左側にエディタ、右側に生成されたチャートが表示されます。 エンジンを変えることで、同じ内容でも異なった表示になります。 フォーマットは画像の他、SVGも選択できます。 別なファイルでの例。 内容によって最適なエンジンがありそうです。 GraphvizOnlineを社内に一台

MOONGIFTはオープンソース・ソフトウェアを紹介するブログです。2021年07月16日で更新停止しました 正面からの商品画像だけで購入を決めるのは難しい製品は多数あります。左右や後ろからの写真を見てはじめて自分の納得いくものかどうか判断するでしょう。しかしそのために動画を見るのは面倒です。 今回紹介するJS Cloudimage 360 Viewは様々な角度から撮影した商品画像を使って360度回転できるウィジェットを生成します。 JS Cloudimage 360 Viewの使い方 デモです。画像は72枚用意されています。 ルーペ機能もあります（デスクトップWebブラウザのみ）。 下に薄い線をつけたり、影をつけられます。 自動回転もできます。 JS Cloudimage 360 Viewを使うためには、まず画像を用意する必要があります。36枚程度であれば十分そうで、その場合は10度ごと

MOONGIFTはオープンソース・ソフトウェアを紹介するブログです。2021年07月16日で更新停止しました 2019年02月22日追記：こちら、ライセンスが非常に怪しい（というかブラック）です。記事は残しますが、ダウンロード/利用されないことをお勧めします。 プログラマーやWebデザイナーにとってフォントは気になる存在です。そのフォントの善し悪しで作業効率が大幅に変わってきます。視認性の悪いフォントを使うと不用意なバグを生み出してしまう可能性もあります。0やO、Iとlなどが見分けやすいものを選ぶべきです。 今回は開発者向けに作られたフォント、Consolasを紹介します。元々オープンソース・ソフトウェアではなかったのですが、v8.0からオープンソース（といっても現時点ではライセンスはありませんが…）になるとのことです。 Consolasの使い方 フォントの見栄えはこんな感じ。 コードを表

テーブル表示はWebシステムのデファクトとも言えます。業務システムはいうに及ばず、管理者画面などでも必ず求められる表示です。そしてただ表示すればいいという訳ではなく、ソートやフィルタリング、インラインでの編集など様々な機能が求められるものです。 そんな多機能なテーブル表示を実現してくれるのがTabulatorです。多くのニーズを満たしてくれることでしょう。 Tabulatorの使い方 てんこ盛りなデモテーブル。ざっと見てもフィルタ、ページネーション、グラフ表示、ソートなどの機能が確認できます。 インライン編集もサポートされています。 データに合わせて幅を自動調整。 行をクリックして展開する機能。 カラムをグループ化。 カラムを縦に。これはカラムが多い時に便利そうです。 ドリルダウン。 テーブルを入れ子にもできます。 スパークライン表示。 フッターで集計。 HTMLテーブルを変換する機能もあ

MOONGIFTはオープンソース・ソフトウェアを紹介するブログです。2021年07月16日で更新停止しました リモートワークであったり、アウトソースなどが行われることが増えており、遠隔地とビデオチャットする機会も増えているのではないでしょうか。そんな時、常に静かな会議室同士でできるとは限りません。カフェであったり、自宅などで多少の騒音が発生する場合もあるでしょう。 そんな時に使ってみたいのがkrispです。周囲のノイズを取り除いてくれるソフトウェアです。 krispの使い方 krispは常駐するソフトウェアで、マイクとスピーカー双方のノイズをキャンセルすることができます。 マイクのノイズをキャンセルすれば、相手にとって聞こえやすい音声を提供できますし、スピーカー側のノイズをキャンセルすれば相手がカフェなどにいても聞きやすくなります。macOSのマイクは周囲のノイズを消してくれますが、それで

システム開発を行う際にモデリングが良く行われます。業務フローを一般化したり、特定ドメインを可視化するのに便利です。それによって効果的なシステム化が可能になります。多くの場合、専用のソフトウェア（Visioのような）であったり、スライド作成ソフトウェアを使ったりします。 今回は専用ソフトウェアのDomain Storytelling Modelerを紹介します。この手のソフトウェアはあまり存在しないので貴重です。 Domain Storytelling Modelerの使い方 各パーツをドロップして、さらに各パーツを接続してモデリングしていきます。 アクションを伴うところは数字が表示され、ワークフローの発生順番を定義できます。 できあがったモデルはSVGで出力できます。 Domain Storytelling Modelerを使うことでビジネスのモデリングがとても簡単にできます。各ノードを接

パスワードによる認証が脆弱であるのはよく知られています。そのため多要素認証としてSMSを使ったり、認証コード生成アプリといった補助ツールが存在します。最近ではYubiKeyのようなハードウェアも使われています。 そんな中、パスワードを使わない認証機能としてPAW.jsが登場しました。 PAW.jsの使い方 まず登録を行います。 メールアドレスを入力するだけです。 登録完了して、日記が書けます。 次にログインです。すでに登録したメールアドレスが表示されます。 ログインできました。 別なWebブラウザではログインできません。 PAW.jsの仕組みは公開鍵認証で、各Webブラウザに対して公開鍵が生成されます。そのため、同じ人であってもWebブラウザが異なるとログインできません。パスワードがない分、セキュリティは十分に強力ですが、万一鍵を紛失するとログインできなくなるので、復旧するための仕組みは何

Firefoxのバージョンアップに伴い、Selenium IDEが使えなくなりました。その代わりになるソフトウェアが数多く作られており、ビジュアルテスティングの覇権争いが続いています。 そんな中紹介したいのがKantu Browser Automationです。Selenium IDE風にレコーディング、そしてテストまでできるソフトウェアです。 Kantu Browser Automationの使い方 メイン画面です。左側にマクロとしてレコーディングした内容を保存できます。 スクリーンショットを撮って、IDE内で確認もできます。 ビジュアルタブで画面の内容を確認できます。 テストをKantu Browser Automation上で作って、そのまま実行できます。 Kantu Browser AutomationはGoogle ChromeとFirefox向けに作られています。レコーディング

O/Rマッパーなどによってデータベースを意識せずに開発できるようになっています。しかしデータベースは設計次第でシステムのボトルネックになることも多く、やはり適切な設計能力は重要です。 今回紹介するpgModelerはPostgreSQLに特化したデータベースモデリングソフトウェアになります。 pgModelerの使い方 起動しました。 デザイン画面です。 サンプルを開いたところです。グループ化やコメントも付けられるのでビジュアル的にも分かりやすいです。 テーブルの設計画面です。 アウトプットはSQLや画像、さらに直接データベースへの実行もできます。 pgModelerはデータベースを設計するだけでなく、ビジュアルにも気が配られています。これならば仕様書として使うこともできるでしょう。ここまでのビジュアル化はデータベースからインポートするタイプのソフトウェアでは難しいでしょう。なお、pgMo

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

MOONGIFTはオープンソース・ソフトウェアを紹介するブログです。2021年07月16日で更新停止しました Excelは何にだって使える魔法のツールです。表計算はもちろん、ドキュメント、仕様書、報告書、ゲーム、データベースなど利用される幅がとても広いです。特に開発現場ではよく利用されているでしょう。 今回はExcelをガントチャートにするExcel Gantt Chartを紹介します。類似の表現はよく見ますが、表示の更新が自動的に行われるのが魅力です。 Excel Gantt Chartの使い方 デモです。まさにガントチャート。 左側が列固定されているので見やすいです。 日付を変更すると、右側のバーも自動的に更新されます。 進捗を100％にするとグレーアウトします。 Excel Gantt ChartはExcelの入力データ（進捗や日付）を元に自動的にチャート部分を生成してくれます。大抵

MOONGIFTはオープンソース・ソフトウェアを紹介するブログです。2021年07月16日で更新停止しました Dockerは便利なシステムで一旦慣れてしまうと何でもコンテナとして管理したくなります。その結果、コンテナが乱立したり、イメージの管理も煩雑になっていきます。そうすると欲しくなるのが管理UIになります。 GUIでもいくつかありますが、手軽に運用できるのはターミナル上で動くものになるでしょう。今回はその一つ、dryを紹介します。 dryの使い方 一覧で現在動いているコンテナが確認できます。 アクティブでないものも含めた一覧です。 詳細を見たり、ログを確認する、コンテナを再起動や終了させるといった操作もできます。 ログです。 プロセスやメモリの状態。 dryはデフォルトのDockerコマンドで収集できる情報を扱いますが、それでも操作がキーボードで選択していくだけなのでとても楽になります

プレゼンテーションというとPowerPointやKeynoteで作ることが多いですが、HTMLでのプレゼンテーションも使われるようになっています。しかし表現力があまり高くなく、シンプルなスライドが多かったように思います。 そこで使ってみたいのがWebSlidesです。これまでにないほど表現力の高いHTMLスライドが作れるフレームワークです。 WebSlidesの使い方 例えばこんな表示。大きな画像を背景に当てています。 クラスも多数用意されています。 2つのカラムでの表現。ソースコードをハイライトできます。 上下左右、どこでも自由に記述できます。 左寄せ。 3カラムでのグリッド表示。 地図表示の例。 ナビゲーション。 Apple風のクラスが用意されています。 なんとなくそれっぽいですよね。 こんな表示も。HTMLならではですね。 Webサイトにも使えそうなデザインです。 表現という意味にお

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

PHPを得意としているプログラマが業務要件によって.NETで開発しないといけないとなったら、どうするでしょうか。.NETをイチから学んでも良いですが、本格的に使いこなすためにはそれなりに経験と時間を要するものです。 そこで期待したいのがpeachpie.ioです。PHP7をコンパイルして.NETに展開してくれるソフトウェアです。 peachpie.ioの使い方 デモです。左側のPHPのコードがC#に展開されています。 C#の例 さらにVB.NETにも変換できます。 VB.NETの例 peachpie.ioを使えば既存PHP資産を.NETに変換してセキュアで多彩な.NETライブラリと組み合わせたり、PHPと.NETとを組み合わせやすくなります。すべてのケースにおいて問題なく使えるかは不明ですが、今後に期待したいプロジェクトです。 peachpie.ioはC#製のオープンソース・ソフトウェア（