きっちりした、正確な図を書くと、ほんの少しの乱れが気になって修正に時間がかかってしまったりします。それは些細な問題で、本質的な問題ではないにも関わらずです。特にプロトタイプなどではラフさを残した方がはやく作れます。 今回紹介するExcalidrawは手書き風の図を書けるソフトウェアです。乱れている分、細かな点は気にせず作業できるでしょう。 Excalidrawの使い方 メイン画面です。 線が二重になっていたりして、ラフな仕上がりになっています。 できあがった図を画像でダウンロードしました。 Excalidrawは三段階のラフさが用意されています。四角や丸、矢印などドロー要素は多くありませんが、十分使えるでしょう。文字もラフな雰囲気になるのが楽しいです。ささっと図示するのによさそうです。 ExcalidrawはTypeScript製のオープンソース・ソフトウェア（MIT License）です

開発者にとって、Gitの存在は欠かせなくなっています。開発に限らず、操作の履歴をとっておきたいと思うことはよくあります。そうした時にGitを使うことで手軽にバックアップを取ったり、GitHubと連携させることもできるようになります。 今回紹介するnext-editorはWebブラウザ上で動作するGitブラウザ/エディタです。 next-editorの使い方 メイン画面です。左にファイルツリー、中央にエディタ、右にリポジトリのコミット操作を行う機能があります。 文章を書いてコミットできます。執筆時点ではブランチを切る機能はないようです。 フォルダやファイルを追加できます。 next-editorはGitを自由に操作してバージョン管理ができます。現時点ではGitのすべての機能が使えるわけではありませんが、今後が楽しみです。Webアプリと組み合わせることで、コンテンツを自由に保存し、バージョン管

Dockerは一瞬にして仮想環境が立ち上がるのでどんどんコマンドを叩いたりイメージを取り込んだりしている内に全体が肥大化してしまいます。Dockerの状態を含めて可視化しないと綺麗な管理は難しいでしょう。 そこで使ってみたいのがPortainerです。シンプルなDockerコンテナ/イメージ管理システムです。 Portainerの使い方 Portainerのダッシュボードです。 テンプレートも用意されており、ここからすぐにコンテナが作れます。 イメージの作成画面です。 ネットワーク一覧。 ボリューム一覧。 クラスター情報。 Portainerを使えばDockerのステータスが一目で分かるようになります。設定も可視化されているので間違った設定をしたり、設定漏れを防ぐのの役立つでしょう。自動スケーリングには向きませんが、社内のDockerであったり開発環境などであれば役立つでしょう。 Port

ブログやWebサイトでプログラミングコードを載せる際に必要になるのがハイライト処理です。単純にコードをそのまま載せても可読性はとても低いです。ハイライトライブラリを使って、見やすくすべきです。 個人的にはGoogleが作っているgoogle-code-prettifyをよく使っていたのですが、highlight.jsも使いやすそうです。 highlight.jsの使い方 左側のコードが表示例。テーマも用意されています。 Apacheの設定ファイルも対応しています。 CoffeeScriptにももちろん対応。 Diff。 HTTPヘッダー、iniファイルにも使えます。 Apacheがあればnginxももちろんあります。 highlight.jsは112言語、49のテーマが用意されています。HTML/JavaScript/スタイルシートのようにマルチ言語に対応したハイライトが行えます。言語も自

Google ChromeをWebアプリケーション開発に使っている方はたくさんいます。なぜならば、ChromeのDevToolsが便利だからです。ソースを見たり、編集したり、さらにブレークポイントを仕込んで処理をとめたりとWeb開発を大いに加速してくれる存在です。 そんなDevToolsだけを切り離したアプリケーションがChrome DevTools Appです。実用と言うよりも挑戦的な試みではありますが、面白いソフトウェアです。 Chrome DevTools Appの使い方 Chrome DevTools AppはGoogle ChromeのDevTools部分だけをnode-webkitを使ってアプリ化しています。同じようにnode-webkitを使って作ったアプリのデバッグに使える可能性もあるでしょう。ブラウザと密着してしまっているように見えましたが、こうやってデバッグ機能だけを切

レスポンシブでWebデザインを組むのは当たり前、今のトレンドはマテリアルデザインにあるという時代になってきました。フラットUIを踏襲しつつ、アニメーションを効果的に使うことでさらにユーザビリティ高いデザインを可能にします。 主にモバイルアプリ用に使われていますが、Webデザインにおいても十分利用が可能です。今回はマテリアルデザインを実現するスタイルシートフレームワーク、Materializeを紹介します。 Materializeの使い方 今回はスクリーンショット多めに紹介します。 Materializeはレスポンシブかつマテリアルデザインのフレームワークになっています。開発の高速化、ユーザ体験重視、ドキュメントとサンプルを多めにして学習コストを低くするといった特徴があります。 MaterializeはHTML5/JavaScript/CSS3製のオープンソース・ソフトウェア（MIT Lic

MOONGIFTはオープンソース・ソフトウェアを紹介するブログです。2021年07月16日で更新停止しました システムを提案するシステム会社の基幹システムが大したことないなんてのは良く聞く話です。システム開発の場合、請求書の量もそう多くないので手作業で作るというケースも少なくありません。 しかしそれではやはり問題があるでしょう。ということでフリーランスからでも使えそうな請求書管理システムがInvoicePlaneです。 InvoicePlaneの使い方 InvoicePlaneは見積書から請求書、クライアント管理などバックオフィスの機能を最低限備えています。レポート機能は集計くらいなので、より高度な分析は自分でカスタマイズしていくのがいいのではないでしょうか。そこがオープンソースの魅力とも言えるでしょう。 InvoicePlaneはPHP製、MIT Licenseのオープンソース・ソフトウ

おお、これは企業で使えそうですよ！ 企業によっては外部にソースコードを預けられないため、自社でGitサーバを構えているところも多いでしょう。しかしそうなると管理画面が欲しくなります。GitHubの管理画面は優秀で、ああいったWebブラウザ上でリポジトリの情報を見たいと思うはずです。 そこで使ってみて欲しいのがGitonomyです。デザインの格好いい、Gitリポジトリマネージャです。 Gitonomyの使い方 GitonomyはPHP + Symfonyの組み合わせで作られていて、Webブラウザ上でGitリポジトリの操作が一通りできるようになっています。ユーザはプロジェクト単位にグループに入り、そこで権限管理される仕組みです。 ソーシャル機能はありませんが、企業ユースであれば十分ではないでしょうか。社内でGitサーバを立てている場合はぜひ導入を検討してみてください。 GitonomyはPHP

これで十分でしょ！ Bootstrapで作る管理画面は相当増えてきているようです。確かに一般ユーザ向けに提供するとBootstrap臭が出てしまいますが、管理画面であれば問題はないですよね。 ということで今回は新しいBootstrap製の管理画面テンプレートAdminLTEを紹介します。高度なウィジェットが数多く提供されていますので使い勝手良さそうですよ。 AdminLTEの画面 今回もスクリーンショット多めで紹介します。 ダッシュボード。この時点でかなりリッチ。 ボックス。これだけ多彩なパターンがあると言うのも凄いですね。 左端にはちょっとした設定を表示させています。 背景色を変えるだけでも随分印象が違います。 グラフ。 こちらもグラフ。 外部ライブラリもそつなく使いこなしています。 スパークラインも！ アラート。ちょっと飛び出しているのがいい感じです。 アイコン。 ボタン。フラット系で

MOONGIFTはオープンソース・ソフトウェアを紹介するブログです。2021年07月16日で更新停止しました サーバ管理者と言えばコンソールを叩いてサーバのステータスをチェックして…というのは過去の話なのかも知れません。何台ものサーバ、常時モニタリングを考えたならばサーバ管理用ダッシュボードの存在は重要です。 そこで自作のダッシュボードを作成する際にテンプレートにできそうなのがServer Monitoring Dashboardです。すっきりとしたUIで見やすいサーバの状況管理ができそうです。 1つのデータ表示、テーブルでの一覧表示、各ステータス別のリフレッシュボタン、ページネーションなど概ね必要そうな機能が揃っています。後はデータを蓄積できればグラフにしても良さそうです。 このテンプレートはサーバ用ですが、多少変更すればサービス向けの独自ステータス監視にも使えるかと思います。テンプレー

ShuttleはMac OSX用のソフトウェア（ソースコードは公開されていますがライセンスは明記されていません）です。 プログラマーであればSSHでサーバに接続して処理を行うといった操作はよく行っていると思います。その際、各サーバごとに秘密鍵やユーザ名が違ったり、IPアドレス指定だったりすると覚えておけません。それを一括で管理できるようにしてくれるのがShuttleです。 メニューです。 設定ファイルです。JSONで設定するだけで、使い方はすぐに分かると思います。 設定ファイルのJSONにはSSHの接続コマンドを書くだけです。後はメニューバーに常駐しているShuttleから指定した接続先を選択すれば、ターミナルアプリが立ち上がって接続が開始されます。Terminalの他、iTermなども指定可能です。 MOONGIFTはこう見る 筆者の場合、sshでの接続先ごとにaliasを設定しています

ほほーこれはますますBootstrapにハマってしまいそうです。 Bootstrapはデザインが苦手なプログラマー（筆者のような）にとって救世主のようなライブラリになっています。しかしそれだけにカスタマイズは苦手でどれも似たような雰囲気になってしまいます。そこでFancybootを使ってみましょう。 Fancybootでは色設定をはじめ、ボックスの大きさや必要なプラグインを自分で選択してカスタマイズできるようになっています。それもオンライン上でできるとなれば使わない手はないでしょう。 トップページ。可愛い猫がお出迎え。ネットは猫のためにあるとはまさにこのこと。 まずコンポーネントを選択します。必要ではないコンポーネントを外せますが…まぁ大抵は外さないですよね。ということで次のステップに進みます。 jQueryプラグインを選択します。これもあるに越したことはないですし、そのままで良いのかな。

CharismaはHTML5/JavaScript製のオープンソース・ソフトウェア（Apache Licnese 2.0）です。 Webシステム開発において意外と不遇なのが管理画面です。内部の人が使うものなので適当に作られるケースが多くなります。そこで使ってみたいのがCharismaです。リッチな管理画面をBoostrapをベースに作り上げる事ができます。 ウィジェットがついた、リッチな管理画面です。ここまで恵まれているケースは早々ないでしょう。 ドラッグ&ドロップによる配置変更もサポート。 折り畳んで隠す事もできます。 グリッドは細かくサポートされています。 カレンダー。システム内部のデータをマッピングすると見通しが良くなりそうです。 メンバー一覧。検索やラベルもあって便利そうです。 ギャラリー。サムネイル写真をきれいに並べています。 タイポグラフィ。様々なタグをサポートしているので奇麗

Fuel UXはBootstrap用、JavaScript/CSS製のオープンソース・ソフトウェア（MIT License）です。 Bootstrapを使ってWebアプリケーションを開発していると、どうしても足りないコンポーネントが出てきます。ネットで探せば見つかるのですが、組み合わせている内にバランスが悪くなってしまいます。そこで使ってみたいのがFuel UXです。 様々なウィジェットが提供されています。まずチェックボックス。 コンボボックス。選択した情報が取得しやすいです。 データグリッド。検索でのフィルタリング、ページネーションもサポート。 検索すると右側に×ボタンが出ます。分かりやすいですね。 タグ。×ボタンも出ていて消すのも簡単です。 検索ボックス。 スピナー。上下のボタンを使って値をインクリメントできます。 ツリー。エクスプローラライクな表示が実現できます。 ウィザード。パン屑

bootstrap-wysiwygはBootstrap用のリッチなWYSIWYGエディタです。 使い勝手の良さもあってBootstrapを使ったWebサイトが増えています。より便利に使うためには多彩なウィジェットが欠かせません。今回はBootstrap用WYSIWYGエディタ、bootstrap-wysiwygを紹介します。 シンプルなUIで使い勝手が良さそうです。 文字の装飾は簡単にできます。ツールチップが出るのもいい感じです。 画像の埋め込みにも対応しています。ファイルフォームを使って画像を読み込む形になっています。 URLの埋め込み。ダイアログではないのがポイントです。 文字サイズの変更もできます。 bootstrap-wysiwygではさらにマイクアイコンをクリックして音声によるテキスト入力にも対応しています（Google Chromeの機能を使っています）。さらにホットキーへの対

GridはHTMLテーブルにソートやヘッダ固定、行選択と言った機能を追加するJavaScriptライブラリです。 業務システムを作っていると必ず発生するのがテーブルでの一覧表です。WebでExcelレベルのことは実現できませんが、リッチな表としてGridを使ってみるのは良さそうです。 デモです。 必要な場所だけチェックしてハイライトできます。 横スクロールしても左側の列はそのままです。 数値のオーダーも適切に動きます。 縦スクロールしてもヘッダー部はそのままです。 カラム幅の変更もできます。 GridはIE7以上、Google Chrome/Firefox/Safari/Operaに対応しています。jQueryやMootoolsと一緒に使うこともできます。機能はヘッダー、フッター、カラムの固定化やカラムのリサイズ、カラムのソート、行の選択などになります。データフォーマットはJSONの他、X