Drawflow - データフローを作成するライブラリ
MOONGIFTはオープンソース・ソフトウェアを紹介するブログです。2021年07月16日で更新停止しました ノーコードプラットフォームが普及してきています。プログラミングはせずに、多くの場合はGUIで部品同士を組み合わせて一つの機能を作り上げていきます。 そうしたUIを作るのに使えそうなUIライブラリとしてDrawflowを紹介します。 Drawflowの使い方 デモのUIです。 つながっている線は選んで削除できます。 拡大したり、ノードに変数を与えるといったこともできます。 ダブルクリックのイベント処理。 新しいノードの追加も可能です。 Drawflowは左側の機能（ノード）をドラッグ&ドロップで追加して、各ノードを線でつなぎます。ノーコードプラットフォームであったり、Node-RedやYahoo! Pipes、ScratchのようなUIを実現するのにも使えるでしょう。 Drawflo
kmdr - コマンドの実行内容を教えてくれるCLI
MOONGIFTはオープンソース・ソフトウェアを紹介するブログです。2021年07月16日で更新停止しました 開発者であれば、ターミナルを使って各種コマンドを入力するかと思います。コマンドを探す際に、Webで検索する人も多いでしょう。そんな時、各種オプションがすでに付いており、それぞれの説明がないために何となく実行してしまったりしていないでしょうか。 きちんと把握していないコマンドを打つ際に使ってみて欲しいのがkmdrです。実行内容を解析し、その説明を行ってくれます。 kmdrの使い方 kmdr explainを使ってコマンドを調べます。 $ kmdr explain ? Enter your command: ls -al ls -al EXPLANATION ls List directory contents -a, --all Include hidden files and di
Scoold - Java製のStack overflowクローン
システム開発をしていたら常に疑問が沸くものです。そうした疑問はWeb検索で解決できる場合もありますが、多くは未知の問題です。そこで使えるのがQ&Aサービスになります。質問を投げることで、適切な回答が得られるでしょう。 そんなサービスとして有名なのがStack overflowになります。そしてScooldはそのオープンソース版になります。 Scooldの使い方 質問の一覧です。 質問詳細画面です。 ユーザ一覧。 タグ一覧。 質問入力画面です。 Scooldは本家のStack overflowに比べるとかなりすっきりしたデザインになっています。基本的な機能であるQ&Aと、それに対する投票機能は実装されています。エンジニアに特化したUIになっていない分、他の用途でも十分使えそうな雰囲気です。 ScooldはJava製のオープンソース・ソフトウェア（Apache Licnese 2.0）です。
Gixy - nginxの設定ファイルを静的解析して改善提案
MOONGIFTはオープンソース・ソフトウェアを紹介するブログです。2021年07月16日で更新停止しました HTTPサーバとしてnginxを使っているケースは多いかと思います。しかし設定に関する情報はまだまだ多くはなく、動くように設定はしても、それがベストなのかどうか判断できない方も多いのではないでしょうか。 そんな方にお勧めなのがGixyです。nginxの設定ファイルを解析して改善案を提示してくれます。 Gixyの使い方 Gixyのインストールは pip でできます。 pip install gixy 後はnginxの設定ファイルを指定するだけです。 $ gixy /path/to/nginx.conf ==================== Results =================== Problem: [host_spoofing] The proxied Host h
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
screenlog.js - console.log代替。画面上にログ出力 MOONGIFT
Webフロントエンドの開発時にDevToolsを開くことはよくあるかと思います。ただ、画面の大きさを結構とりますし、常に開いておくのが邪魔という方もいるでしょう。 そこで使ってみたいのがscreenlog.jsです。console.logのように使えて、画面上にログを出力してくれるソフトウェアです。 screenlog.jsの使い方 screenlog.jsを使っているのでところです。右上にデバッグメッセージが出ています。 自動的にメッセージが追記されていきます。 screenlog.jsはconsoleオブジェクトの代わりにscreenLogオブジェクトを使います。ログのクリアもできるので、デバッグに活躍してくれるのではないでしょうか。 screenlog.jsはJavaScript製、MIT Licenseのオープンソース・ソフトウェアです。 chinchang/screenlog.j
React Desktop - Reactを使ってMac OSX/Windowsアプリを開発 MOONGIFT
Reactへの注目がどんどん高まっています。Webのビューライブラリという枠を越えて、React Nativeによってスマートフォンアプリ開発にも使えるようになっています。特にコンセプトであるLearn once, run everywhere（一度覚えればどこでも動く）が素晴らしい考えと言えます。 そんなReactを次のターゲットとしてデスクトップでも動くようにしたのがReact Desktopです。Mac OSX/Windowsに対応しています。 React Desktopの使い方 React Desktopのデモです。Webでも表示できるのがすごいです。 コントロールもちゃんと動きます。 そしてWindows 10でも使えます。 フォームもまさにWindows 10といった感じです。 メニューを隠すこともできます。 ElectronはHTML5を使ってデスクトップアプリを作ることがで
pure JS WiFi QR Code Generator - WiFi設定用のQRコードを生成
MOONGIFTはオープンソース・ソフトウェアを紹介するブログです。2021年07月16日で更新停止しました カフェや勉強会で無料のWiFiが使えることも珍しくなくなりました。オープンにしてしまって良い場合はごく簡単なキーを設定していますが、コワーキングスペースなど有料で場所を提供しているところでは多少難しい文字列をキーにするでしょう。 しかしこれは入力が面倒という問題もあります。そこで使ってみたいのがQRコードを使ったWiFi設定を行えるpure JS WiFi QR Code Generatorです。 pure JS WiFi QR Code Generatorの使い方 pure JS WiFi QR Code Generatorのトップページです。SSID、暗号化方式、キーなどを設定します。 そして生成ボタンを押すとQRコードができあがります。 このQRコードをAndroidのQRコ
Smart Table Scroll - 100万行のテーブルも高速表示
MOONGIFTはオープンソース・ソフトウェアを紹介するブログです。2021年07月16日で更新停止しました 業務システムでは大量のデータを一覧表示して欲しいというニーズがよく出ます。しかしあまり大量のデータを描画すると、それだけレンダリングに時間がかかったり、スクロールも困難になります。 そこで使ってみたいのがSmart Table Scrollです。なんと100万行以上のレコードも高速に描画できるJavaScriptライブラリです。 Smart Table Scrollの使い方 Smart Table Scrollのデモです。3カラムでの表示例となっています。 一番下は100万です（インデックスは0からはじまっています）。 実際のデモです。スムーズに動いているのが分かるかと思います。 Smart Table Scrollの種としては、描画しているデータ量にあります。 var table
Mattermost - Go製のSlack代替サーバ MOONGIFT
MOONGIFTはオープンソース・ソフトウェアを紹介するブログです。2021年07月16日で更新停止しました Slackが急成長しています。多くの企業でSlackが使われており、遠隔地（または社内であっても）のコミュニケーションに役立てられています。しかし企業によってはセキュリティ上の理由などで導入できないこともあります。 そんな企業が使ってみたいのはSlackクローンになるでしょう。今回はDockerを使って簡単に導入できるMattermostを紹介します。 Mattermostの使い方 既にDockerが入っているならば、以下のコマンドを実行するだけです。 docker run --name mattermost-dev -d --publish 8065:80 mattermost/platform:helium 後はサーバにアクセスするだけですが、サブドメインを使うのでhostsな
watermark.js - JavaScriptで画像に透かし MOONGIFT
最近は画像をパクる輩がたくさんいて、著作権が問題になっています。そのため企業では画像に透かしを入れて、そのまま使っても誰の画像であるかすぐに分かるようにしています。 わざわざ画像を変換するほどではないけれど、簡単に持ち出せないように少し工夫はしたい、そう思う方に使ってみて欲しいのがwatermark.jsです。クライアントサイドのJavaScriptで透かしを入れます。 watermark.jsの使い方 watermark.jsは2つの画像またはテキストを指定して画像を生成するライブラリです。例えばこんな感じです。 透明度の設定もできます。 テキスト指定も可能です。 watermark.jsはimgタグのsrcに対してデータをそのまま適用します。そのため元々の画像のURLが分かりづらいのが特徴です。watermark.jsを使えばサーバサイドの用意なしに画像へ透かしを追加し、ユーザによって
Primer - GitHub製。みんなで使えるデザインフレームワーク MOONGIFT
企業やプロジェクトによってデザインガイドラインは自ずと必要になってきます。それが社で働くデザイナーの共通認識になる訳ですが、例えばFacebookアプリを作る際にはボタンやデザインをFacebookっぽくしたくなるのではないでしょうか。つまりデザインガイドラインは社内だけでなく社外の人にとっても有益なのです。 そこで登場したのがPrimerです。PrimerはGitHubが作り、使っているデザインガイドラインになります。 Primerの使い方 スクリーンショットを多めで紹介します。まずはグリッド。 ヘッダー。h1〜6まで対応。 テキスト。若干小さめ？ インラインテキストの装飾。 ボタン。ここはGitHubっぽいですね。 ボタングループ。こういうのもGitHubで使われていますよね。 フォーム。シンプルです。 フォームグループ。縦に並べる時に使えます。 メニュー。アイコンはオプションです。
Libreboard – シンプルで簡単に使えるカンバン
MOONGIFTはオープンソース・ソフトウェアを紹介するブログです。2021年07月16日で更新停止しました 最も簡単なタスク管理としてカンバン方式はお勧めです。カラムはステータスを表します。未作業、作業中、完了、バックログなどそれぞれのステータスによってタスクの場所が変えるだけでとてもシンプルです。 今回はそんなカンバンリストを提供するLibreboardを紹介します。すぐに使い始められますのでぜひ試してみてください。 Libreboardの使い方 Libreboardは特にタスク管理として充実した機能があるわけではありません。しかしやるべきタスクや積み残しを管理するのに十分な機能と言えるでしょう。早くはじめて生産性を向上したい、そんな時にぴったりなタスク管理です。 Libreboardはnode/JavaScript製、MIT Licenseのオープンソース・ソフトウェアです。 Lib
Rhebok – Unicornより高速なRackサーバ
MOONGIFTはオープンソース・ソフトウェアを紹介するブログです。2021年07月16日で更新停止しました RailsやSinatraアプリを立ち上げる際にはUnicornを使うことが多くなっています。しかしちょっと前であればMongrelを使ったり、Thinを使ったりとトレンドは移り変わってきました。Unicornについても同様でしょう。 今回はUnicornの2倍のパフォーマンスをほこるRackサーバ、Rhebokを紹介します。今後のWebアプリケーションサーバの選択肢として有力になりそうです。 Rhebokの使い方 RhebokはRubygemsでインストール可能で、立ち上げはコマンドライン一つでできます。 $ rackup -s Rhebok --port 8080 -O MaxWorkers=5 -O MaxRequestPerChild=1000 -O OobGC=yes -
Material Icons - マテリアルデザイン向けに作られたGoogle製アイコン集 MOONGIFT
Googleが提唱しているフラットUIを発展させたデザインがマテリアルデザインです。アイコンを単純化して情報構造を明確にするだけでなく、さらにマウスオーバーやタップ時のアニメーション、色の変化をつけることでシステムがどういう状態にいるかが明確になります。 そんなマテリアルデザインにフォーカスして作られたアイコン集がMaterial Iconsです。 Material Iconsの使い方 Material Iconsは数百種類のアイコンが提供されています。 アクション系。 特徴としては一つのアイコンで終わりではなく、その状態によって斜線を引いたり、アイコンを重ねたアイコンがあることでしょう。 アラート、AV、コミュニケーション。 音量アイコン一つとっても、音量の大小、ミュート、設定不可などとパターンが作られています。 コンテンツとデバイス。 スマートフォンでも利用も想定されていますのでデバイ
Maverix Bootstrap Theme - BootstrapをベースにしたMac OSX風UIテーマ
MOONGIFTはオープンソース・ソフトウェアを紹介するブログです。2021年07月16日で更新停止しました ああ、これは面白い！Bootstrapで様々なテーマが作られていますが、基本的にWebアプリケーション向けです。Webでの利用については既に多数のコンテンツが存在しますし、おそらく今後も増えていくでしょう。 そこで次に注目したいのがnode-WebKitとの組み合わせです。ネイティブアプリ風に動くWebアプリケーションの場合、求められるUIとしてはMaverix Bootstrap Themeのようになるでしょう。 Maverix Bootstrap Themeの使い方 スクリーンショット多めで紹介します。 Maverix Bootstrap Themeを使えばnode-WebKitで作ったWebアプリケーションがほぼローカルアプリケーションと変わらず使えるようになります。Web技
Hierapolis – フラットUIを活かしたBootstrap管理画面テーマ
管理画面であれば社内の人くらいしか使いませんので、あまりデザインにこだわる必要がないのでベタなBootstrapを使ってもそんなに嫌がられることはないでしょう。とは言えちょっとは格好よく見せたい場合もありますよね。 そんな時に使ってみたいBootstrapテーマがHierapolisです。フラットなデザインで格好いい管理画面用テーマとなっています。 Hierapolisの使い方 Hierapolisはサイドバーがついていて、一覧性がある管理画面が作れます。デザインはフラットだけにシンプルで、各機能に素早くアクセスできるのが特徴です。使い勝手が良いのではないでしょうか。 HierapolisはHTML5/JavaScript製のオープンソース・ソフトウェア（MIT License）です。 Sign in lab2023/hierapolis
Slate - Web APIのドキュメントを書く際にどうぞ！ MOONGIFT
Webサービスを提供していたり、スマートフォンアプリと連携するサーバを開発していたりすると必要になるのがWeb APIのドキュメントです。HTTPメソッド、パラメータ、返却値などが分かりやすく書かれている必要があります。 どういったドキュメントが読みやすいかは悩みどころですが、Slateは3ペインの構成になっていて見やすいのではないかと思います。ぜひご覧ください。 Slateの使い方 こちらがデモです。左が機能の一覧、中央が説明、右が実際のコードになります。 コードはShell、Ruby、Pythonで書かれています。 エラー時の内容も細かく書かれています。 Slateは一つのMarkdownファイルから生成されています。そのため単純なHTMLとして可読可能で、それをSlateを使って3ペインのより可読性高い形式にした訳です。Markdownで書く際に予めSlateの記法に沿って書いておく
wri.pe - OSS化されたMarkdownベースのメモアプリケーション MOONGIFT
個人的にもよく使っているwri.peがオープンソース化されました！Ruby on Railsで作られており、本家はHerokuで動作しているなど自前でWebベースのメモ環境を作るのがとても手軽になりそうです。 ということで早速触ってみましょう。Web APIのトークン設定をすればすぐに動かせます。 wri.peの使い方 トップページです。見たまま本家のwri.peそっくりです。 ログインしました。早速メモを作ってみましょう。 右側にプレビューもあって分かりやすいですね。 カレンダー。メモを作った日付が分かります。 検索はSolrを使っており日本語も対応しています。 バックアップはEvernote、Dropboxにできます。 殆どの機能がJSON出力に対応していたり、iCalでの出力や多数のWeb API、OAuth対応がされているなど今風のWebサービスを作るのに参考になる点が多いと思いま
Pretty Diff - Gitの差分表示をGitHub調にして見やすく整形
MOONGIFTはオープンソース・ソフトウェアを紹介するブログです。2021年07月16日で更新停止しました これはGitを使っているならぜひ入れておきたいツールです。 GitHubのコード差分表示はとても見やすくて、一旦あれに慣れてしまうとターミナルで出力されるDiffが非常に見づらく感じるようになります。しかしプロジェクトによってはGitHubを使えないというケースもあるでしょう。 そこで使ってみたいのがPretty Diffです。任意のGitリポジトリでGitHub風の差分表示を実現してくれるライブラリです。 Pretty Diffのインストール インストールはnpmを使って行えます。 $ npm install -g pretty-diff これで準備は完了です。 Pretty Diffの使い方 使っているGitリポジトリに移動します。例えば最後のコミットとの比較はこんな感じです。
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
