チャートやネットワーク図などを描くのに使われるのがGraphvizです。多くの場合PNGなどの画像で出力して利用しますが、SVGへのエクスポートも可能です。Web向けであれば、画像よりも使い勝手が良いでしょう。 そんなGraphvizで出力したSVGを表示するのがjquery.graphviz.svgです。 jquery.graphviz.svgの使い方 表示しました。 ノードをクリックすると、ハイライト表示されます。 さらにズームイン/アウトができます。 jquery.graphviz.svgはGraphvizのSVGデータに対して、ハイライトとズームイン、ズームアウトを追加します。さらにデータをレスポンシブにしてくれるので、どのデバイスに対しても適切な表示が可能です。 jquery.graphviz.svgはjQuery/JavaScript製のオープンソース・ソフトウェア（MIT L

最近のWebフロントエンドフレームワークでは、デザインとコードの分離ではなく、画面の役割をもって分離しています。そのためデザインとコードが一つのコードの中にあり、デザイナーにとっては慣れるまでデザインしづらいと感じているかも知れません。 もしReactで開発しているプロジェクトならば、Utopiaを使ってデザインしてみると良さそうです。 Utopiaの使い方 エディタ画面です。 ストーリーボードなる機能もあります。 コードエディタです。左側にはファイルツリーがあります。 コンポーネントの構造も可視化されます。 マウスで選ぶと選択されているコンポーネントが斜線されます。 ズーム表示もできます。 Utopiaはコンポーネントを変更したり、右側にあるプロパティを変更することでリアルタイムにデザインを確認できます。Visual Studio Codeとデザインプレビューが組み合わさった形になります

Web上でユーザにコードを書いてもらう機能を用意するとします。その際、ただのテキストエリアを配置するのは良くありません。ハイライトもありませんし、Tabキーを押すと別なコントロールにフォーカスが移動したとしたら、使う気も失せてしまいます。 Webページに埋め込める高機能なエディタが欲しければ、Copenhagenの利用を検討してみましょう。 Copenhagenの使い方 エディタ画面です。 入力補完も用意されています。 マルチフォーカスで一括修正もできます。 コンテクストメニュー。 forを打っただけで、ここまで補完が出ます。 Copenhagenはカスタマイズ可能で、ハイライトの設定や入力補完も自由に指定できます。キーボードショートカットも実装されており、開発中ながらモバイルでの入力もサポートされています。サイズも50KB程度で大きくなく、利用できる場面も多そうです。 Copenhage

WindowsでSSH接続をしようと思ったら、Windows TerminalやTeraTerm、そしてPuTTyを使うことでしょう。PuTTyを利用している人も多いと思いますが、タブ式でない点が気になります。複数の接続があると、ウィンドウか数が増えてしまいます。 そこで使ってみたいのがWinSSHTermです。PuTTyをラッピングしてタブ化します。 WinSSHTermの使い方 メインウィンドウです。 接続を作成します。 後はダブルクリックだけで接続できます。 タブだけでなくウィンドウを上下に表示することもできます。 WinSSHTermはSSHクライアントの機能はありません。あくまでもPuTTyやKiTTYをラッピングしています。他にもWinSCPやVcXsrvを使ってSCPやX Serverへの接続もサポートしています。ウィンドウのタブ化や接続管理用のツールとしてみると面白そうです

MOONGIFTはオープンソース・ソフトウェアを紹介するブログです。2021年07月16日で更新停止しました 昔よく使っていたのに、最近は見なくなったソフトウェアはないでしょうか。個人的には幾つもありますが、その一つが付箋紙です。macOSであればスティッキーズと呼ばれて、多数の付箋紙をデスクトップに貼り付けていた覚えがあります。 そんな付箋紙を復活させたようなソフトウェアがPeperNoteです。 PeperNoteの使い方 タスクバーから呼び出します。 テキストを書いたり、装飾もできます。 色は何パターンか用意されています。 こんな感じにデスクトップに貼り付けておけます。 PeperNoteはいわゆる普通の付箋紙で、ちょっとした文字装飾が付いている程度です。出しゃばった機能がない分、普段使いできるでしょう。オープンソースなのも嬉しいポイントです。 PeperNoteはWindows用、

Webデザインを行っていて、画像の部分にプレイスホルダーとなるダミー画像を適用することがあります。大抵画像サイズだけが表示されていたり、目的（ロゴなど）の文字を書いていたりします。 プレイスホルダー画像を提供するサービスもありますが、今回はローカルでも使えるプレイスホルダー画像を作るWeb Components、placeholdersを紹介します。 placeholdersの使い方 を使います。 色をカスタマイズした版。 文字を変えた版。 さらに も用意されています。 文字の高さを変更できます。 placeholdersを使うことで、画像やテキスト部分にダミーコンポーネントを適用できます。画像はバイナリではなく、SVGで生成されますので、色やテキスト変更などのカスタマイズが容易になっています。 placeholdersはTypeScript製のオープンソース・ソフトウェア（MIT Lic

Androidからファイルを送受信する方法は面倒なイメージがあります。Android File TransferはあまりこなれたUIではありません。共有機能もありますが、ローカルにあるデバイス間でファイルを授受するのにインターネットを介するのは面倒です。 そこで使ってみたいのがOpenMTPです。AndroidとmacOS間のファイル送受信ソフトウェアです。 OpenMTPの使い方 設定です。ダークモードや隠しファイルの表示設定などが変更できます。 二画面ファイラーのようなUIです。 なお、筆者環境ではファイルのブラウジングはできるものの、送受信はできませんでした。UIはとても見やすいので残念です。安定してファイルの送受信ができるようになれば、Android用のファイラーとして便利そうです。 OpenMTPはmacOS用のオープンソース・ソフトウェア（MIT License）です。 gan

Webブラウザは通常一つだけを使い続けますが、Webサイトによってはサポートされていない時があります。そうした時には特定のWebブラウザを立ち上げて使うことになるでしょう。この切り替えはとても面倒です。 そこで使ってみたいのがBrowserSelectです。リンクを呼び出し時にWebブラウザを切り替えられます。 BrowserSelectの使い方 起動するとインストールされているWebブラウザが並んで表示されます。 設定です。パターンを登録して起動するWebブラウザを特定できます。 デフォルトのWebブラウザに指定しておくと便利そうです。 BrowserSelectを使うことで特定のWebサイトだけ特定のWebブラウザに指定できます。ドメインごとの登録になるようです。銀行系、社内システムなど特定のWebサイトだけIEなどで起動できるようにすればストレスが少なそうです。 BrowserSel

世の中の多くのことは時間軸に沿って進んでいます。1日のスケジュールもそうですし、歴史も時間によって進んでいきます。そうした時間ごとに発生するイベントを表示するのに、単なる一覧ではなく、時間軸を使うと分かりやすくなります。 今回紹介するTimespaceは時間ごとに発生するイベントを表示するライブラリです。 Timespaceの使い方 利用しているところです。イベントをクリックしたり、次のイベントに移動するとアニメーションされます。 クリックしたイベントの詳細が下に表示されます。 説明があれば追加で表示されます。 Timespaceは時間ごと、または年ごとなどで表示できます。歴史年表などであれば年ごとでいいでしょうし、数日であれば時間ごとが最適でしょう。こういった表示が最適な場合は限られるので、Timespaceを覚えておくとさっと使えて便利です。 TimespaceはjQuery/Java

Google ChromeでテキストやURL、タイトルをコピーするタイプのソフトウェアは多数あります。形式もHTMLやMarkdownなど指定できるようになっていることでしょう。テンプレート機能があるものも多いですが、かゆいところに手が届かないと感じることも多々あります。 そんな時に使ってみたいのがcocopyです。コピーする文字列をプログラミングで指定できます。 cocopyの使い方 アイコンから呼び出した際の表示です。 設定です。 実際のコードです。返却した文字列がクリップボードに入ります。 cocopyを使うと、たとえばタイトルを置換してクリップボードに送ったり、URLに入っている余計な文字列を取り除くこともできます。コピーした後、テキストエディタなどで置換していた文字列を一発コピーできるようになるのは便利です。 cocopyはTypeScript製のオープンソース・ソフトウェア（M

HTML5ではIndexedDBというデータベースAPIが実装されています。しかし、若干利用法が独特な分、なかなか使いこなすのが難しいようです。昔ながらのRDBMSであったり、廃止になってしまったWebSQLデータベースの方が使いやすかったかも知れません。 今回紹介するsql.jsはSQLiteをEmscriptenを使ってJavaScriptで使えるようにしたライブラリになります。 sql.jsの使い方 デモです。SQLを実行できます。 結果も取得できます。 任意のSQLiteファイルを読み込めます。 sql.jsはSQLiteをWebAssemblyにし、実行できるようになっています。仮想ファイルシステムを使っており、インメモリで動作しています。そのため、Webブラウザをリロードしてしまうと消えてしまうのが難点です。その点さえ目をつぶれば、Webブラウザ上で自由にSQLを実行できる環境

HTML5で動画を再生する際にはvideoタグを利用します。しかし、このvideoタグはごく基本的な機能しかなく、使い勝手はよくありません。そこで、外部のライブラリを使って機能を追加するのが基本です。 今回紹介するOpenPlayerJSもそんなHTML5用の動画プレーヤーになります。 OpenPlayerJSの使い方 デモです。任意の動画URLを指定できます。 動画を再生中です。 再生速度を変更できます。 動画だけでなく、音楽ファイルにも対応しています。 OpenPlayerJSは機能はそれほど多くありません。再生、音量調整、動画再生速度設定、そしてフルスクリーン表示くらいです。また、広告動画を指定することで、広告を再生後に動画を再生できるようにもなります。その意味では動画を収益化したいサイトなどど導入しやすそうです。 OpenPlayerJSはTypeScript製のオープンソース・ソ

アプリは一つのパッケージでリリースします。そのため、完全に暗号化されており、機密データも安全に扱われていると考えてしまいがちです。実際にはそんなことはなく、さまざまな情報が読み取れます。 今回紹介するapkLeaksはAndroidのAPKファイルを読み込み、そこに書かれたURLやエンドポイント、シークレット情報があるかチェックします。 apkLeaksの使い方 とあるAPKファイルで実行した結果です。 $ python apkleaks.py -f "Example.apk" _ ____ _ ___ _ / \ | _ \| |/ / | ___ __ _| | _____ / _ \ | |_) | ' /| | / _ \/ _` | |/ / __| / ___ \| __/| . \| |__| __/ (_| | <\__ \ /_/ \_\_| |_|\_\_____\__

Webサイトを作る際にユーザフロー（ワイヤーフロー）を作ります。Webサイトの画面を並べて、リンク先をつないでいくことで、フローを明確にします。そして目的のページまでたどり着くのに深くなりすぎていないか、分かりづらい流れになっていないかなどをチェックできます。 今回紹介するWireflowはWeb上か簡単にワイヤーフローが作成できるソフトウェアです。 Wireflowの使い方 例です。左側にあるパーツをドロップして、線でつないでいくだけという簡単さです。 拡大できます。 パーツを縦につなげることで、長いページも表現できます。 グルーピングも可能です。 Wireflowを使えばワイヤーフローが手軽に作成できます。あらかじめ多数の画面モックアップが用意されていますので、ページの雰囲気に合わせて自由に作成できるでしょう。Wireflowを使えばWebサイトの構造を検討したり、パーツをカスタマイズ

nodeやWebブラウザ上のJavaScript実行エンジンとしてはv8が最もよく知られています。かつてに比べると圧倒的に拘束で、JavaScriptがWebアプリケーションなどで十分に使えるようになったのはv8エンジンのお陰でしょう。 そんな中、新しいJavaScript/TypeScript実行エンジンとしてElsaを紹介します。言語はGoを採用しています。 Elsaの使い方 実際に使っているところとしては、普通に使えますといった感じです。 $ go run main.go run js/00_core.js { "FSCwd": 5, "FSDirExists": 4, "FSExists": 3, "FSMkdir": 9, "FSRead": 2, "FSRemove": 7, "FSStats": 6, "FSWrite": 1, "Fetch": 20, "Log": 10,

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

自宅で仕事をする時間が長くなり、作業環境を整える人たちが増えています。特に大事なのがモニターの数でしょう。複数ディスプレイないと作業効率が落ちる人は多いはずです。 そんな中、macOSでは外部ディスプレイの輝度調整が面倒だったりします。そこで使いたいのがExternal­Display­Brightnessのようなユーティリティです。 External­Display­Brightnessの使い方 設定画面です。特定のファンクションキーで輝度調整できます。 External­Display­Brightnessを立ち上げたら、後は設定したファンクションキーで輝度調整できます。一旦調整してしまえばあまり使わないと思いますが、手元に置いておくと便利です。 External­Display­BrightnessはSwift製のオープンソース・ソフトウェア（MIT License）です。 Exte

MOONGIFTはオープンソース・ソフトウェアを紹介するブログです。2021年07月16日で更新停止しました WindowsやLinux派の人であっても、時にmacOSを使わないといけない場面に出くわすことがあります。ちょっとした操作のためにmacOSを購入するのは避けたいでしょう。 そこで使ってみたいのがfastmacです。GitHub Actionsを使って一時的にmacOSにアクセスできるようにするソフトウェアです。 fastmacの使い方 使い方は簡単で、fastmacのリポジトリをクローンして、そのリポジトリでWorkflowを実行します。 そうするとSSHのアドレスが出ますので、それを使ってログインするとmacOSにつながっています。 Xcodeも各バージョンで用意されています。CIに使えそうです。 Webブラウザからでもアクセスできます。 fastmacはGitHub Act

ユーザにHTML編集を任せる場合、何らかのツールバーやWYSIWYGなエディタが欲しいと思うでしょう。そういったツールは多々ありますが、なかなか使いやすいものに出会えません。 今回紹介するSmartBlockはブロック単位での編集が可能なエディタです。並び替えもできて使い勝手はよさそうです。 SmartBlockの使い方 リスト部にマウスを当てた場合です。 テキストだけの場合はツールバーの内容が変わります。 文章全体では右側に並び替えも出ます。 表の場合は列や行の追加も出ます。 SmartBlockの便利なところは、Reactのコンポーネントとして単純なHTMLテキストを適用するだけで使えることです。専用のブロックなど気にする必要はありません。色変更などはありませんが、カスタマイズして実装すればよさそうです。 SmartBlockはReact用TypeScript製のオープンソース・ソフト