はてなブックマーク

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

MOONGIFTはオープンソース・ソフトウェアを紹介するブログです。2021年07月16日で更新停止しました パソコンやスマートフォンでファイルを送受信し合うのは意外と面倒です。Apple製品同士であればまだ良いですが、WindowsやAndroidが入ると途端に面倒になります。結局メールで送ったりするのも手間です。 そこで使ってみたいのがLANDropです。LAN内でつながっているデバイスに対してファイルを送信できるソフトウェアです。 LANDropの使い方 ファイルを送ります。 設定画面です。 ファイルをドロップしました。 送信先は同じLANDropを起動しているデバイスです。 受け取り側では確認ダイアログが出ます。 受信完了。 LANDropはWindows/macOS/iOS/Android向けにアプリケーションを用意しています。つまりLANDropをインストールしておけば、これら

MOONGIFTはオープンソース・ソフトウェアを紹介するブログです。2021年07月16日で更新停止しました システム開発でPDFを生成する場面は少なくありません。特に業務システムに関わっていると避けては通れないでしょう。最近ではWebブラウザのPDF印刷機能を使ったりもしますが、描画を細かく制御するならサーバ側で出力すべきです。 今回紹介するGoFPDFはGo製のPDF生成ライブラリです。多機能なのが特徴となっています。 GoFPDFの使い方 生成したPDFです。一例としてウォーターマークをサポートしています。 グラフ。温度を表示しています。 別なグラフ。 テンプレートを用意して、文字を置き換えながら出力できます。 インターネット上の画像も埋め込めます。 SVGを描画できます。 画像と段組。 GoFPDFは多言語に対応し、ドローや画像の埋め込みにも対応したPDFライブラリです。パスワード

ノーコードやローコードと呼ばれるソフトウェアに注目が集まっています。その一つが表計算に似たUIを使ってツールを作るようなサービスです。AirtableやKintone、Googleスプレッドシートがよく知られています。 今回紹介するNocoDBはAirtable代替を標榜するソフトウェアになります。 NocoDBの使い方 まずプロジェクトを作ります。 アクセス方式はRESTまたはGraphQLを選択できます。 テーブルを作成します。 データを入れます。画像もセルの中で扱います。 画像のグリッド一覧表示もできます。 アクセス権限はカラム単位で行えます。 特別なURLでデータをシェアできます。 シェア状態の表示。 Webhookも用意されています。 NocoDBは数字や文字列だけでなく、様々なデータをセルの中で扱えます。式も今後対応予定です。NocoDBを使うことでチーム内でのデータ共有が容易

管理画面はついおざなりになりがちです。ユーザ向けの画面は格好良いのに、管理者が使う画面は適当なものということは良くあります。適当な画面では可能な操作も限定的で、ミスも起きがちです。 そこで使ってみたいのがdashblocksです。データ解析に特化した管理画面です。 dashblocksの使い方 管理画面のデモテンプレートです。 多種多様なグラフが利用できます。 APIの詳細が分かります。 リアルタイムログ的な表示。 テーブル。 Vueのテーブルを使ったデモ表示。 Chart.jsとの組み合わせ。 Dygraphsとの組み合わせ。 メニューとタイポグラフィ。 dashblocksは多種多様なコンポーネントを使い、データの可視化をサポートします。テーマもライト、ダークの2つに対応しており、多様な管理画面に対応できそうです。管理画面や解析結果画面などで利用できそうです。 dashblocksはV

企業内には大量のデータが存在します。そうしたデータをただ蓄積するだけでは意味がなく、分析してはじめて意味を持ちます。そうした分析として知られているのがOLAPになります。 今回紹介するClickHouseはそんなビッグデータに最適化されたOLAPになります。 ClickHouseの使い方 左側にドキュメント、右側にSQLが書かれます。 クエリ結果は下に出力されます。 テーブル構造の表示。 様々な便利関数が用意されています。 タイムゾーン変換なども。 ClickHouseはOLAPなので分析に特化したデータベースと言えます。UIも使いやすい形なので、開発者以外の担当者がSQLを覚えることで、データへ自由にアクセスできる環境が手に入るでしょう。 ClickHouseはC++製のオープンソース・ソフトウェア（Apache Licnese 2.0）です。 ClickHouse - fast ope

MOONGIFTはオープンソース・ソフトウェアを紹介するブログです。2021年07月16日で更新停止しました ツイートはWebサイトに埋め込みで表示させられますが、GitHubのREADMEなどでは使えません。また、ツイートが削除されると表示されなくなります。恒久的に使うなら、画像の方が良いでしょう。 今回紹介するsnap-tweetは任意のツイートをスナップショットとして画像化するソフトウェアです。 snap-tweetの使い方 snap-tweetを使う際のコマンドです。 $ snap-tweet https://twitter.com/moongift/status/1399198992391499776 画像付きツイートのスナップ化。 ダークモードも用意されています。 snap-tweetを使うと画面を一部キャプチャしたような雰囲気で格好良く画像化してくれます。もちろんリンクなどは

最近のWebアプリケーションではファイルをWebブラウザにドラッグ&ドロップしてアップロードすることが良くあります。開発するのはさほど難しい訳ではありませんが、ちょっと面倒だったります。かといって、ファイルアップロードライブラリを使うと、周りのデザインと合っていないことも良くあります。 今回紹介する elementはシンプルなファイルアップロード用Web Componentsになります。 elementの使い方 利用例です。Web Componentsとして定義されています。 </file-attachment><file-attachment directory input="upload"> <input id="upload" type="file" multiple/> </file-attachment> 表示です。 ファイルをドロップします。 elementはGitHubが開発

最近、スクロールと連動するアニメーションを行うWebサイトが増えています。主にLPのような広告系のところに多いですが、スクロールに合わせて制御するのはとても大変です。 今回紹介するAnimateはDOMが表示されたタイミングで発火するイベントを追加できるJavaScriptライブラリです。 Animateの使い方 利用例です。下にスクロールしてDOMが表示されたタイミングでアニメーションが実行されています。 下からのスクロールにも対応しています。 Animateは表示範囲に入ったタイミングで呼ばれますので、アニメーションなどは初期化した上で実行開始すれば良いでしょう。アニメーションに限らず、ユーザが読み進めた場所を記録したり、スクロールに合わせて何らかのアクションを実行するのに利用できます。 AnimateはJavaScript製のオープンソース・ソフトウェア（ISC License）です

MOONGIFTはオープンソース・ソフトウェアを紹介するブログです。2021年07月16日で更新停止しました Gitでコメントを書く際には何かエディタを使っているでしょうか。VS Codeなどのエディタを設定している人もいるでしょうが、ちょっと大げさです（常に立ち上げているなら良いですが）。かといってターミナルやコマンドプロンプト上で日本語入力するのは面倒そうです。 そこで使ってみたいのがGitEditです。Git専用のテキストエディタです。 GitEditの使い方 起動したところです。 入力補完付きです。 GitEditの覚えるべきキーボードショートカットは3つです。Ctrl+スペースで補完表示、Ctrl+wで保存して終了、Ctrl+Shift+Deleteで終了せずに終了です。軽量で、素早く起動するのでGitと一緒に使っていてストレスはないでしょう。普段使いには向きませんが、Gitに特

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

MOONGIFTのはてなブックマークアカウントにはオープンソースの記事ばかり載せていますが、かれこれ3万を超えるブックマーク数となっています。これだけあると検索が便利なのですが、時々妙に遅いことがあります。 そこで使ってみたいのがはてブ爆速検索君です。自分のデータだけを高速に検索します。 はてブ爆速検索君の使い方 ロードしました。最初の読み込み完了まではしばらく待たなければなりません。 読み込んでしまえば高速です。インクリメンタルに絞り込めます。 日本語は分かち書き処理されているようです。 はてブ爆速検索君では一部の文字だけ入力しても、うまく結果に出ないかも知れません。単語まで入力すれば検索結果が返ってくるでしょう。最初のローディング待ちはありますが、それさえ終われば高速に使えるので、大量のブックマークがある人ほど便利に使えるはずです。 はてブ爆速検索君はTypeScript製のオープンソ

MOONGIFTはオープンソース・ソフトウェアを紹介するブログです。2021年07月16日で更新停止しました 開発者にとって使いやすいスライド作成ツールは何でしょうか。何より大事なのはコードを記述できること、さらに見た目のグラフィックスなどよりもコンテンツに集中できるのが最良でしょう。 今回紹介するSlidevは開発者のためのスライドツールとなっています。ネーミング通り、開発者に対してのみ作られたソフトウェアです。 Slidevの使い方 デモスライドです。 もちろんコードは綺麗。ダークモード対応です。 左下にツールが出せます。 ライトテーマ。 ヘルプ。 スライド一覧。 SlidevはコンテンツをMarkdownで記述します。テーマも多数用意されており、コンテンツはそのままに表示を変更できます。システム的にはViteとVue3を使っており、高速に動作します。スライドはPDFや画像でエクスポー

Pythonや機械学習を利用している人であればJupyter Notebookを知らない人はいないでしょう。Webブラウザ上でコードを実行して、結果を確認できるのは便利ですが、何よりWebブラウザ上で操作しなければいけないのが面倒です。 開発者であればWebブラウザよりもターミナル、そう考える方はnbtermを使ってみましょう。 nbtermの使い方 Jupyter Notebookのファイルを読み込んだところです。 Markdownとコードを混在して書けます。 ヘルプです。 筆者環境で試すとカーネルがなく、コードの実行ができませんでした。それさえ解決できれば、コード実行もできるでしょう。Webサーバを立てるまでもなくPythonのコードを実行して結果を試せるというのは、グラフや画像を必要としないコードを試す際に便利そうです。 nbtermはPython製のオープンソース・ソフトウェア（M

GitHub ActionsはコードのコミットやPRだけでなく、時間ベースで実行させることもできます。いわばcron的に使えるので、定期的に何らかのコマンドを実行するのに使えます。これは色々な使い方が考えられるでしょう。 今回紹介するosmos::feedはGitHub Actionsを使って、RSSリーダーを作ってしまうプロジェクトです。 osmos::feedの使い方 一覧です。 クリックで開きます。 osmos::feedはGitHub Actionsを使い、外部のフィードを取り込んでリポジトリを更新します。フィードをローカルに保存してしまえば、後は表示するだけなので簡単です。GitHub Actionsの制限はありますが、簡易的なRSSリーダーの作り方として興味深いソフトウェアです。 osmos::feedはTypeScript製のオープンソース・ソフトウェア（MIT Licens

MOONGIFTはオープンソース・ソフトウェアを紹介するブログです。2021年07月16日で更新停止しました 短縮URLサービスは数ありますが、大きなサービスであれば独自のカスタムドメインを使いたいと思うでしょう。さらにパスも自分で決められれば、さらに使いやすくなるはずです。 今回紹介するSmartLinkはシンプルに使える短縮URLソフトウェアです。Herokuで構築可能です。 SmartLinkの使い方 元URLとユニークな名前を決めます。 名前が重複していなければ、URLが生成されます。 SmartLinkのデモではドメイン部分が長いですが、短いドメインさえ持っていればSmartLinkと組み合わせてすぐに使えるでしょう。短縮URL以外の機能はなさそうなので、クリック数などはカスタマイズする必要がありそうです。 SmartLinkはJavaScript製のオープンソース・ソフトウェア

GitHubではWeb上で差分表示できる機能を提供しています。その表示に慣れると、通常のdiffコマンドの結果だと分かりづらいと感じるかも知れません。左右に分かれて表示される方が見やすいケースは多そうです。 そこで使ってみたいのがgit-split-diffsです。ターミナル上で使えるGitHub風の差分表示コマンドです。 git-split-diffsの使い方 1ペインでの表示例です。 2ペインでの表示例です。 git-split-diffsでは様々なテーマを提供しており、ライトからダークまで幅広く選択できます。シンタックスハイライトも指定できます。ターミナルで使えるので、GUIアプリケーションをインストールする必要なく使えるので便利です。 git-split-diffsはTypeScript製のオープンソース・ソフトウェア（MIT License）です。 banga/git-split

データベース内のデータをメンテナンスする際にmysqlやpsqlといったコマンドを使うこともできます。しかし毎回SQLを書くのは面倒ですし、データ量が増えると一覧性が落ちてしまいます。 そこで使いたいのがデータベース管理アプリケーションです。今回はMySQL/PostgreSQL/SQL Server/MongoDBと幅広いデータベースに対応したDbGateを紹介します。 DbGateの使い方 ローカルアプリケーションとWebアプリケーションで動作します。今回はWebアプリケーション版のデモです。 接続先を選ぶとデータベース一覧が表示されます。 さらにデータベースを選ぶと下にテーブル一覧が出ます。テーブルを選ぶとデータが一覧表示されます。 フィルター機能で簡易的にデータを絞り込めます。 デザイナーを使ってリレーションを設計できます。SQLが生成できるので、ビューの作成にも使えるでしょう。