API Console - Go製のWeb APIプロキシダッシュボード
Web APIを使った開発が増えています。それに伴って求められるのが開発を効率化するツールです。データをセットしたり、ヘッダーを書き換えたりするのは面倒で、ストレスを感じるのではないでしょうか。 そこで使ってみて欲しいのがAPI Consoleです。Webブラウザ上から任意のWeb APIを実行できるツールです。 API Consoleの使い方 API COnsoleを立ち上げます。立ち上げる際にWeb APIのベースURLを指定しておく必要があります。 apiconsole --upstream=http://example.com 後はブラウザから確認できます。 実行したところです。結果がJSONで返ってきています。整形もされるので分かりやすいです。 パーマリンクをつけたり、curlコマンドでの取得方法も表示できます。 API Consoleは外部のAPIアクセスを代行してくれます。ヘ
TableFilter - HTMLテーブルのフィルタリング
MOONGIFTはオープンソース・ソフトウェアを紹介するブログです。2021年07月16日で更新停止しました 業務システムで必ず求められるのがテーブルベースの一覧表示です。件数が少ない時にはただ表示するだけで十分ですが、数百件を越えるようになると様々な要望があがってきます。その一つがフィルタリングではないでしょうか。 HTMLのテーブルに対してフィルタ機能を追加してくれるのがTableFilterです。検索とはまた違う手軽なフィルタリングを実現してみましょう。 TableFilterの使い方 一例です。カラムの上にフィルタリングするテキストボックスが並んでいます。文字を入力してエンターを押せばデータがフィルタリングされます。 リアルタイムではないようですが、そこは改造できるでしょう。 入力はテキストだけでなく、ドロップダウンなども使えます。 より複雑に、ページネーションなども駆使したデモで
pdf.js-controller - PDF.jsを使ったWebスライド MOONGIFT
FirefoxではPDFビューワーをJavaScriptで実装しています。それがPDF.jsです。PDFは公開されているフォーマットではありますが、解析して表示するのはとても大変なものだと想定されます。 そんなPDF.jsを活用してスライドビューワーにするのがpdf.js-controllerです。PDFプレゼンを行うのに向いていそうです。 pdf.js-controllerの使い方 実行しているところです。ちょっと余計な文字が下に出てしまっています。 矢印キーを使ったスライド移動にも対応しています。 ツリービューのような複雑な表示にも対応しています。 PDF、さらにJavaScriptとは思えない表示ですね。 PDFはビジネスの場では数多く使われています。編集が容易ではないことがメリットですが、その結果として再利用性が悪いのが欠点でした。pdf.js-controllerを参考にすればP
markdown-pdf - MarkdownをPDFに変換
MOONGIFTはオープンソース・ソフトウェアを紹介するブログです。2021年07月16日で更新停止しました Markdownのシェアが増えるのに従って、とりあえずメモはMarkdownでしておくという人も多いでしょう。しかし業務で提出する資料や公開資料などはHTMLではなく、PDFベースでの提出を求められることが多いです。 Webブラウザに出して、それをPDFに変換しても良いですが、それならばmarkdown-pdfを使ってみましょう。markdown-pdfはその名の通り、MarkdownファイルをPDFに変換するソフトウェアです。 markdown-pdfの使い方 markdown-pdfはnpmを使ってインストールできます。 npm install -g markdown-pdf 使い方は以下の通りです。 $ markdown-pdf Usage: markdown-pdf [op
keyboard-font – キーボードを表現した記号フォント
キーボードショートカットの説明をしたい時にはどう書くのが良いでしょう。よくあるのはWin + Shiftキーといった具合にテキストでの説明です。より分かりやすくするためにテキストを四角で囲んでキーを表現したりすることもあります。 一つ、二つであればそれでもいいですが大量のキーボードショートカットを表現したいとなったらkeyboard-fontを使ってみましょう。 keyboard-fontの使い方 無変換のような普段あまり使わないキーであったり、リジェクトなど特殊な操作のキーもあります。Shiftキーや変換キーは合字を使ってShiftと打てばそのまま囲み文字になります。ヘルプドキュメントをはじめ色々な場面で使えそうですね。 keyboard-fontはApache License 2.0のオープンソース・ソフトウェアです。 n-yuji/keyboard-font
draw.io·VisioライクのドローWebアプリケーションがコード公開！ MOONGIFT
プロジェクトマネージャやリーダーがよく使うソフトウェアにVisioがあります。ネットワーク図、システム概要図などをまとめる際にはVisio Professional以上のステンシルが必要で、ちょっとした図を描くために購入するのを控えてしまう人も多いのではないでしょうか。 そんな方にお勧めしたいのがdraw.ioです。Visioライクに使えるWebアプリケーションになります。 draw.ioの使い方 最初に保存先を聞かれます。ローカルの他、DropboxやGoogle Driveへの保存が可能です。 テンプレートが多数用意されています。 組織図。 移動や削除はドラッグ&ドロップで。 様々なステンシルが用意されています。 画像出力の結果。左上のは筆者がドロップしたステンシルです。 他のテンプレートです。ビジネスプロセス。 チャート。 draw.ioはフローチャートなどをはじめとして、Visio
Haroopad - 開発者にぴったりなMarkdownエディタ
マルチプラットフォームで使えますよ！ エンジニア界隈ではMarkdownの認知度が高くなっていますが、その記法が若干特殊なこともあって書きづらいと感じている人は多いはず。そこで使われるのがMarkdownエディタです。 Haroopadもその一つになります。多分に漏れず2ペイン構成で片側がプレビューになっていますが、それ以外にも便利な機能がたくさん揃っているMarkdownエディタになります。 Haroopadの使い方 プレビューはつい縦長になりがちなので、2〜3段で書くと短くていいかもしれませんね。 Haroopadは使ってみた感じ、かなり開発者寄りなMarkdownエディタになっているという印象です。Markdownを使いこなしてがんがんドキュメントを作っていきたいと考える方にはぴったりではないでしょうか。 HaroopadはWindows/Mac OSX/Linux用のオープンソース
vsd2svg - VisioのファイルをSVGに変換！ MOONGIFT
これは便利かも！ こった図を描こうと思ったらよく使われるのがMicrosoft Visioです。しかし作成側としては良くとも、閲覧する側がソフトウェアが必要なのは面倒です。専用ビューワもありますが、そもそもインストールしたくない人は多いはずです。 そこで使ってみたいソフトウェアがvsd2svgです。Visioのファイル、VSDファイルをSVGに変換するソフトウェアです。 vsd2svgの使い方 インストーラーでインストールできます。 VSDファイルを選択すると、その何ページ目を変換するか指定します。 変換結果の例。日本語もちゃんと出ていますね。 図面も出ています。 さらにネットワーク。多少のずれはあるものの再現性は高いです。 SVGであればHTML内に埋め込むこともできますし、画像よりも再利用性が高そうです。特に便利なのが、Visioを持っていなくとも使える点です。昔からあるVisioのフ
AdminLTE·ここまで多ければ何でもできそう。多機能なBootstrapベースの管理画面テンプレート MOONGIFT
これで十分でしょ！ Bootstrapで作る管理画面は相当増えてきているようです。確かに一般ユーザ向けに提供するとBootstrap臭が出てしまいますが、管理画面であれば問題はないですよね。 ということで今回は新しいBootstrap製の管理画面テンプレートAdminLTEを紹介します。高度なウィジェットが数多く提供されていますので使い勝手良さそうですよ。 AdminLTEの画面 今回もスクリーンショット多めで紹介します。 ダッシュボード。この時点でかなりリッチ。 ボックス。これだけ多彩なパターンがあると言うのも凄いですね。 左端にはちょっとした設定を表示させています。 背景色を変えるだけでも随分印象が違います。 グラフ。 こちらもグラフ。 外部ライブラリもそつなく使いこなしています。 スパークラインも！ アラート。ちょっと飛び出しているのがいい感じです。 アイコン。 ボタン。フラット系で
DevHub - 開発者たちにぴったりなチャットシステム
MOONGIFTはオープンソース・ソフトウェアを紹介するブログです。2021年07月16日で更新停止しました 開発はみんなでやると楽しいですよね！ チャットワークなど企業向けにオンラインでコミュニケーションを促進しようとするサービスが多数あります。個人向けであればLINEやTwitter、Skypeもその一つといえるでしょう。しかし開発者にとってはどうも手に馴染まないものが多いです。 プログラマ、デザイナにとって必要な機能に特化させられれば、より開発がスムーズになるかも知れません。その一つになるかも知れないのがDevHubです。 DevHubの使い方 外部サービスから通知を受け取れるようになっており、JenkinsやSubversionからコミット時などに通知を受け取るための設定が書かれています。もちろん他のシステムからもWeb APIを叩けば通知が使えます。 # Subversionの例
Bootstrap Admin Theme - Bootstrap3に対応した管理画面テンプレート
これは知っておいて損はないでしょう！ Bootstrapの便利な使いどころとして管理画面があります。管理画面は限られた関係者しか使いませんのでBootstrap臭がしても気にすることはありません。それなりの表示がすぐに実現できるのは使い勝手を向上します。 しかしそんな適当な範囲を超えて実用性のある管理画面を実現できるBootstrapテンプレートがBootstrap Admin Themeです。Bootstarp 3系に対応していますので最新のウィジェットもばりばり使えるでしょう。 Bootstrap Admin Themeの主なページとしては、 ログイン ダッシュボード カレンダー グラフ ボタン/アイコン WYSIWYGエディタ フォーム/ウィザード テーブル その他ウィジェット が用意されています。これだけあれば後は組み合わせるだけで（Bootstrap本来の機能も使いつつ）リッチな
Viz.js·Web上でGraphvizをSVGでレンダリング MOONGIFT
フローチャートなどの高度なグラフを描こうと思った時に使われるのがGraphvizです。テキストベースで記述していくだけでできるというのはやはり手軽です。しかしローカルソフトウェアをインストールしたり、セットアップしたりするのは面倒と感じる人も多いでしょう。 そこでさらに再利用性を高めてくれるのがViz.jsです。WebベースでGraphvizを使えるようにしてくれます。可能にするのはまたしてもEmscriptenなのですが、面白さを体感してください。 例として以下のようにGraphvizのDOT言語をそのままscriptタグに記述します。 <script type="text/vnd.graphviz" id="cluster"> digraph G { subgraph cluster_0 { style=filled; color=lightgrey; node [style=fill
MOONGIFT: » オリジナルで立てるXMPPサーバ「ejabberd」:オープンソースを毎日紹介
社内でメッセンジャーを使ってメッセージをやり取りしている会社は多いと思う。その際によく使われるのがIPメッセンジャーで、遠隔地であればSkypeやGoogle Talkといった各種IMが利用されることが多い。付箋紙ソフトウェアにメッセンジャー機能がついたものもある。 いずれにせよ、こうしたメッセンジャーにはログが残らないのが問題視される（ローカルPCにしか残らず、管理できない）。そこでLAN内にメッセージサーバを立て、ログを集計管理すれば問題は解決しそうだ。 今回紹介するオープンソース・ソフトウェアはejabberd、オープンソースのXMPPサーバだ。 XMPPはeXtensible Messaging and Presence Protocolの略で、Jabberでも採用されていることで有名なプロトコルだ。つまりXMPPサーバであれば、Adiumをはじめとした各種Jabberクライアント
スタイルシートをドキュメント化する際にぜひ！·StyleDocco MOONGIFT
StyleDoccoはスタイルシート中に書いた設定をドキュメント化するソフトウェアです。 Webデザインにおいてスタイルシートは欠かせません。Webサイトのスタイルシート設定をドキュメントにしたい時に使いたいのがStyleDoccoです。 インストールします。 デモです。右側にスタイルシート、左側にその説明が表示されています。 HTMLのコーディング方法と、その結果とかが上下に並んで表示されます。 リスト表示などもあります。 スマートフォンの幅に指定することもできます。 レスポンシブWebデザインの場合は便利そうです。 Bootstrapで作られたデモもあります。 ボタンのデザイン。こうやって表示されると分かりやすいですね。 StyleDoccoを使うとCSSファイル中に書いた設定の使い方をそのままドキュメントにできるようになります。書き方と実際に適用した結果が分かれば、Webデザイナーの
深いインデントであっても色付けすれば見やすく·JavaScript Scope Context Coloring MOONGIFT
JavaScript Scope Context Coloringはシンタックスやスコープによる色づけができるJavaScript用ハイライトライブラリです。 JavaScriptのプログラミングではコールバック方式のコーディングが多いため、インデントが深くなりがちではないでしょうか。そこで使ってみたいカラーリングツールがJavaScript Scope Context Coloringです。 分かるでしょうか。スコープによってカラーリングが変わっています。 こちらは通常のシンタックスによるカラーリング。 さらに分かりやすくするとこんな感じに。8階層までサポートされています。 インデントがあまり深くなると可読性が下がるために個人的には好きではないのですが、深くなってしまうのであればそれに向いた見せ方があると思われます。変数のスコープも色づけで分かるようになったりすると変な不具合が紛れ込まな
GraphvizのDOT言語をJavaScriptで実装·canviz MOONGIFT
canvizはCanvasを使ってDOTファイルをグラフ化するソフトウェアです。 フローチャートなど複雑なグラフを描くのに適しているのにDOT言語が知られています。通常、Graphvizを使って画像化するのですが、今回はcanvizを紹介します。なんとDOTファイルを読み込み、Webブラウザ上にCanvasタグで描き出してくれます。 例。かなり複雑な関係性を表示しています。 別なグラフ。こちらも関係性が複雑です。 レイアウトを変更するとグラフも全く別物になります。 表示の大きさは自由に変えられます。 こんな図も。 複数線がつながっている、そんな表示も実現します。 色付きの枠。 グルーピング。 グルーピングでさらに色付き。 ノード自体が色付き。 14の頂点で相互につながっています。 同じグラフもレイアウトを変えるとこんな感じに。 Graphvizを使う場合は主に個人用途、もしくは変換後の画像
livedoorリーダーではてなブックマークコメントを表示する·LDR Show B Comments MOONGIFT
フィードリーダーの使い方として、最も一般的なのはニュースをできるだけ早くキャッチするというものだ。そうした時事性の重要さもあるだろうが、個人的にはあまり素早さには興味がない。むしろソーシャル系ニュースで話題になっているものや、あるタグにひもづいた情報を集積する方が有益になっている。 livedoorリーダー + はてなブックマーク そうした情報を集積していく中で、他の人がどう考えているのか気になることがある。そのような時に便利なのがはてなブックマークなのだが、それと連携するGreasemonkeyがLDR Show B Commentsだ。 今回紹介するフリーウェアはLDR Show B Comments、livedoorリーダーとはてなブックマークを連携するGreasemonkeyだ。ソースコードは公開されているがライセンスは明記されていなかったのでご注意いただきたい。 LDR Show
ソートやフィルタにも対応したレスポンシブなテーブル·FooTable MOONGIFT
FooTableはレスポンシブなテーブルデザインを行うライブラリです。 レスポンシブWebデザインにおける最大の難関はテーブルかも知れません。PCならば幅広く表示できたカラムがスマートフォンではうまく表示しきれません。そこで使い勝手を維持しつつ見栄えもいいテーブル表示にFooTableを使ってみましょう。 PCで表示したテーブル。 スマートフォン向けに縮めた場合。+記号が表示されています。 +記号をクリックすると、追加情報が表示されます。 HTMLを組み合わせた行。 こちらでもスマートフォンで表示できます。 タブレットでも調整されて表示されます。 ソート機能版。 もちろんスマートフォンでもソートが使えます。 フィルタリング。インクリメンタルに適用されます。 PCでももちろん使えます。 ソートとフィルタリングは同時に使えます。 FooTableを使う際にはタブレットやスマートフォンで表示する
円や棒グラフをサポートしたCanvasによるグラフライブラリ·Chart.js MOONGIFT
Chart.jsはHTML5/Canvasを使ったグラフライブラリです。 Web上で管理画面を提供する場合必要になるのがレポートです。そこにはただの数値の羅列だけでなく、グラフがあるとインパクトが違うでしょう。そこで使ってみたいライブラリとしてChart.jsを紹介します。 折れ線（曲線）グラフです。 棒グラフ。 レーダーチャート。 円のエリアグラフ。 円グラフ。 ドーナッツチャート。 Chart.jsはHTML5/Canvasで表示されているのが特徴です。なおサポートブラウザとしてはIE7から対応しています。対応しているグラフは折れ線、棒、レーダー、円のエリア、円、ドーナッツの6種類になります。表示の際にはアニメーションが実行されますが、その後はマウスクリックなどには反応しないようです。 Chart.jsはHTML5/JavaScript製、MIT Licenseのオープンソース・ソフト
必要なパスワードを一元管理できるグループパスワードマネージャ·Swordfish MOONGIFT
Swordfishは企業内での利用も想定されたグループパスワード管理です。 Webサービスなどは未だにID/パスワードによる認証が行われています。そうした状況下ではチームや企業内でのパスワード管理もグループで行う形になるでしょう。そこで使えるのがSwordfishです。 最初にキーを作成します。 生成しました。秘密鍵はダウンロードして.sshフォルダに入れておきます。 新しいパスワードを作成します。 こんな感じです。 サイトのURLを入れておくとFaviconを使ってくれるのがいい感じです。 表示した場合です。Flashを使ってクリップボードにパスワードをコピーしてくれます。 Swordfishでは個人のパスワードをはじめ、パスワードの共有も行えるようになっています（筆者が確認した限りではそのやり方が分かりませんでしたが）。秘密鍵を介してのみパスワードが解除されるので、安心して利用できるサ
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
