Tabulator - これはすごい。HTMLテーブルを高機能に MOONGIFT
テーブル表示はWebシステムのデファクトとも言えます。業務システムはいうに及ばず、管理者画面などでも必ず求められる表示です。そしてただ表示すればいいという訳ではなく、ソートやフィルタリング、インラインでの編集など様々な機能が求められるものです。 そんな多機能なテーブル表示を実現してくれるのがTabulatorです。多くのニーズを満たしてくれることでしょう。 Tabulatorの使い方 てんこ盛りなデモテーブル。ざっと見てもフィルタ、ページネーション、グラフ表示、ソートなどの機能が確認できます。 インライン編集もサポートされています。 データに合わせて幅を自動調整。 行をクリックして展開する機能。 カラムをグループ化。 カラムを縦に。これはカラムが多い時に便利そうです。 ドリルダウン。 テーブルを入れ子にもできます。 スパークライン表示。 フッターで集計。 HTMLテーブルを変換する機能もあ
GitHub Preview - GitHubで使える各種記法のプレビュー表示に対応したエディタ MOONGIFT
GitHubではREADMEをはじめとして各種文書を専用の記法からHTMLに変換して表示します。大抵の場合は一つのプロジェクトで一つの記法しか使いませんが、その記法の選定はプロジェクトによって異なります。 今回紹介するGitHub Previewは一つの記法だけでなく、GitHub用のドキュメントをプレビューできるソフトウェアです。 GitHub Previewの使い方 GitHub Previewでは多数のフォーマットに対応しています。こちらはMarkdown。 Textile。 Rdoc。 Org。 Creole。 MediaWiki。 この手のソフトウェアでは一つのフォーマットだけに対応することが殆どでしょう。GitHub PreviewはGitHub上で使える記法を網羅しているので、ドキュメントを書くときに安心して使えるはずです。ただ、各記法は汎用的なもので、GitHub特有の記法
KeyPose - 入力しているキーを表示
チュートリアル動画などを撮っていて困るのがキーボードショートカットです。何を入力しているか、視聴者からは見えないので口で説明したり、マウスで操作しなければなりません。プログラミングなどを行っていると、説明しながら入力するのは大変です。 そこで使ってみたいのがKeyPoseです。入力されているキーを可視化してくれるユーティリティです。 KeyPoseの使い方 キー入力したところです。その文字が画面下に表示されます。 ショートカットキーを使った場合。CTRL+までは出るのですが、その後に入力したキーは表示されませんでした。 KeyPoseを使うことで、閲覧者も何を入力しているかが分かるようになります。ただしパスワードのようなものを入力する際には扱いに注意が必要でしょう。コーチングであったり、プレゼンテーションなどでも使えそうなソフトウェアです。 KeyPoseはC#製のソフトウェア（ソースコー
VSaver - 動画をスクリーンセーバーに
MOONGIFTはオープンソース・ソフトウェアを紹介するブログです。2021年07月16日で更新停止しました 気に入ったスクリーンセーバーがなくて、適当なものを設定していないでしょうか。画面の焼き付けを防ぐためには（今ではほとんどありませんが）、常に画面が書き換わっている必要があります。 そんなコンテンツとして最適なのが動画です。VSaverは動画をスクリーンセーバーにしてくれます。 VSaverの使い方 設定画面です。 YouTubeなどの動画を登録します。 後はスクリーンセーバーが開始すれば動画が再生されます。 VSaverでは各動画を全画面で再生します。そのためインターネットにつながっていなければ使えません。また、動画のURL単位であってチャンネルが登録できないのが残念です。好きなアーティストを登録しておいて、新しくリリースされたPVが再生されたら楽しいですよね。 VSaverはma
aw - 小さなHTML5ゲームフレームワーク
ゲームはコンピュータにおける一大市場になっています。スマートフォンは当たり前で、PCゲーム、専用の筐体を使ったものなど様々にあります。もしヒットすれば巨額が動くことも多く、一気に世界的企業に成長した例も枚挙に暇がありません。 現在Webブラウザベースのゲームにも注目が集まっています。そこで知っておきたいのがHTML5向けのゲームフレームワークで、今回はawを紹介します。 awの使い方 awのコードです。スクリーンはCanvasで作成します。 var screenWidth = 640; var screenHeight = 480; var screenScale = 1.0; var aw = new Aw(screenWidth, screenHeight, screenScale, ["star.png", "boing.wav"]); aw.switchState(new Star
Twitter-Web-Like - Vue/MongoDBで作られたTwitterクローン MOONGIFT
ソフトウェアを作る際に目的があれば良いですが、なかったとしたらどうしたら良いでしょうか。特に特定の技術、フレームワークを試してみたいと思ったときです。そんな時にオススメなのは、既存のサービスを真似してみることです。 今回紹介するのはVueを使ったTwitterクローンのTwitter-Web-Likeになります。 Twitter-Web-Likeの使い方 トップページです。ロゴこそないものの、デザインはTwitter風です。 ログインしました。 ツイートできます。画像の添付はできません。 いいねできます（自分のツイートでも）。 プロフィールページです。 返信もできます。 フォロー機能もあります。ただしプロフィールアイコンは変更できないのでタイムラインが分かりづらくなるでしょう。 Twitter-Web-LikeはVue/MongoDBという組み合わせで提供されています。MongoDBはラッ
bedecked - Markdownで作るHTMLスライド MOONGIFT
HTMLでスライドを作るソフトウェアが増えています。その多くがMarkdownも使えるようになっています。しかしMarkdownはあくまでもオプションだったりするので、ちょっとした設定が必要になったりします。 bedeckedはMarkdownだけに対応したHTMLスライドソフトウェアです。スライド部分はreveal.jsを使っているので操作性は全く問題ありません。 bedeckedの使い方 Markdownでコンテンツを書いて、それがHTMLスライドになります。変換は不要です。 Escキーでスライドを一覧表示する機能もあります。 bedeckedは普段使っているMarkdownの書き方と、reveal.jsの使い方さえ覚えてしまえばすぐに使いこなせます。アニメーションであったり、文字の大きさなどを気にしないで良いので、スライドの内容だけに集中できることでしょう。 bedeckedはJav
HTML5 Speedy Video Extension - 動画の速度を自由に変更
MOONGIFTはオープンソース・ソフトウェアを紹介するブログです。2021年07月16日で更新停止しました 動画配信サイトの多くがHTML5化しています。これまでのFlashではユーザが操作できることは殆どなく、公式に提供されるものをそのまま使うほかありませんでした。しかしvideoタグであれば話は別です。 今回紹介するHTML5 Speedy Video Extensionは動画の速度を変更できるブラウザ機能拡張です。 HTML5 Speedy Video Extensionの使い方 対応しているサイトでは動画の下に速度変更用の矢印が追加されます。 速度は自由に変更できますが、4倍などにすると何を言っているかは分からないです。 YouTubeなどは速度を2倍まで変更できますが、HTML5 Speedy Video Extensionであればそれ以上の速度にも変更できます。さらにVime
PaginateMyTable - テーブルタグをページネーション可能に MOONGIFT
業務システムではデータの一覧表示を作ることが多いでしょう。そんな時にはHTMLのテーブルタグを使うはずです。50行くらいであれば良いですが、数百行のデータを一気に表示すると視認性も落ちますし、使いづらくなります。 そこで使ってみたいのがPaginateMyTableです。HTMLのテーブルにページネーションを追加してくれるライブラリです。 PaginateMyTableの使い方 元々の表示です。 実行しました。デフォルトで5行ごとのページネーションになります。 PaginateMyTableは単なるテーブルをページネーション可能にしてくれます。動的に行われているので、ページネーションの件数を変更したりするのも簡単でしょう。サーバサイドを使わないので何度も読み込み直したりする必要もなく、便利そうです。 PaginateMyTableはjQuery/JavaScript製のオープンソース・ソフ
dbxfs - Dropboxをファイルシステム化 MOONGIFT
MOONGIFTはオープンソース・ソフトウェアを紹介するブログです。2021年07月16日で更新停止しました Dropboxは各OS向けにクライアントソフトウェアを提供しています。常時Dropboxを使っているならば便利ですが、時々しか使わなかったり、ストレージ容量を使うために躊躇している方もいるでしょう。 そこで使ってみたいのがdbxfsです。FUSEを使ってDropboxをファイルシステム化します。 dbxfsの使い方 利用する際にはDropboxのOAuth認証が必要です。 任意のフォルダにDropboxをマウントします。ファイル操作は普通に行えます。 dbxfsはDropboxを仮想的にマウントしていますので、使っていないファイルは読み込まれていません。大きなサイズのファイルを開こうとすれば時間がかかりますが、小さなファイルであれば気にならないでしょう。Dropboxは最初の同期に
mergi - コマンドで画像を加工 MOONGIFT
MOONGIFTはオープンソース・ソフトウェアを紹介するブログです。2021年07月16日で更新停止しました GUIアプリケーションを使えばできるのは分かっていながらも、自動化や連続処理を考えるとCUIで処理したいと考えるでしょう。テキストやファイル名などであれば簡単ですが、バイナリファイルとなると面倒そうです。 そこで画像を簡易的に処理してくれるコマンド、mergiを紹介します。よくある処理であれば十分こなせるでしょう。 mergiの使い方 画像を横に連結する例。 縦に連結。 切り抜き。 ちょっと重たいですが、画像がスクロールするアニメーションGIFを作ることもできます。 mergiは画像のマージ、切り抜き、リサイズ、すかし入れ、アニメーションといった5個の画像加工をコマンドでできます。処理の柔軟性はそれほど大きくないかも知れませんが、マッチすればとても使いやすいコマンドになることでしょ
ghwd - ローカルのリポジトリからGitHubのURLを開く
MOONGIFTはオープンソース・ソフトウェアを紹介するブログです。2021年07月16日で更新停止しました 意外と小さな機能こそが便利だったりするものです。GitHubのリポジトリをクローンして、そのリポジトリにアクセスしたい時はどうするでしょうか。remoteで確認して、Webブラウザで開いたりするでしょうか。ちょっとしたことですが、何回もやると手間です。 そこで使ってみたいのがghwdです。リポジトリにさくっとアクセスできます。 ghwdの使い方 ghwdをリポジトリのルートで実行すると、その /tree/master を開いてくれます。 $ ghwd https://github.com/manatlan/vbuild/tree/master /usr/bin/open さらにファイルを指定するとそのファイルを表示してくれます。これは地味に便利です。 ghwdをあらかじめ入れておけ
RsyncOSX - macOS用のrsync管理画面
MOONGIFTはオープンソース・ソフトウェアを紹介するブログです。2021年07月16日で更新停止しました rsyncと言えばサーバ間のバックアップや同期に使われることが多いソフトウェアです。多機能で、様々な用途にマッチしますが、それだけに使いこなすのが難しいソフトウェアでもあります。 だからこそ使いたいのがRsyncOSXのようなGUIアプリケーションです。設定を網羅して、rsyncを使いこなせるでしょう。 RsyncOSXの使い方 メイン画面です。ここから実行できます。 パラメータなども選択して指定できます。 検証用。 スケジュール設定。 RsyncOSXを使えばrsyncの細かな設定もすぐに理解して実行できるでしょう。複雑なソフトウェアにはこういったGUIがあると便利です。面白いのはrsyncという昔からあるプログラムなのに対してSwiftで作られていることでしょう。 RsyncO
local-ssl-proxy - 開発用のローカルHTTPSプロキシ
今はローカルの開発環境でシステムを作り、できあがった段階でサーバに送るのが基本です。そして最近ではサーバ側ではSSL/TLSを使うことが当たり前になっており、開発時だけHTTPを指定することで思った動作にならないこともあります。 そこで使ってみたいのがlocal-ssl-proxyです。ローカルでの開発時に使えるSSLプロキシです。 local-ssl-proxyの使い方 例えば http://localhost:8000/ を https://localhost:8001/ でアクセスできるようにします。もちろん独自証明書なのでエラーは出てしまいます。 許可すればアクセスできます。 local-ssl-proxyの証明書は承認されているものではないので、エラーになってしまうのが難点です。プログラムからアクセスするのであれば、証明書の承認を無視するフラグを立てることでHTTPSアクセスもで
gitmoji - Gitのコミットメッセージに絵文字を使う
絵文字はテキストで書くよりも分かりやすく、多くの情報を含められます。言葉で書くと問題になりそうなことも、絵文字を使うことで回避できる場合もあるでしょう。チャットだけでなく、利用される場面が増えています。 そんな絵文字をGitのコミットメッセージに使っていこうというのがgitmojiです。 gitmojiの使い方 gitmojiはあくまでも利用法のガイドです。例えばこのようなパターンがあります。 実際の利用例です。絵文字が使われることでカラフルになりますね。 ずっと問題になっていたバグを解消したり、ドキュメントを書いた、新しい機能を追加したなど必要に応じて絵文字を使い分けます。一定のルールを設けることで、絵文字だけでどういったコミットなのかが分かるようになるでしょう。面白いアイディアです。 gitmojiはMIT Licenseのオープンソース・ソフトウェアです。 gitmoji | An
HTTP Responder - WebHookを使った開発を便利に MOONGIFT
WebHookはシステム連携するのに便利な仕組みですが、呼び出されるのがサーバ側とあって、開発時の確認がしづらいのが問題です。ngrokなどを使ってローカル環境を外部に繋ぐこともできますが、準備が面倒と感じる人もいるでしょう。 そこで使ってみたいのがHTTP Responderです。WebHookの内容を確認できるWebサービスです。 HTTP Responderの使い方 最初に自分の好きなURLを設定します。 後はそのURLに来たアクセスについて、細かく情報が確認できます。 HTTP Responderで設定したURLをWebHookに設定することで、どういった情報が送られてくるかが一目で分かるようになります。さらにレスポンスも決めることができます。URLを複数作れるので、サービスごとに分けられるのも便利です。 HTTP Responderはnode/JavaScript製のオープンソー
3D Builder - SVGで3Dを描く
MOONGIFTはオープンソース・ソフトウェアを紹介するブログです。2021年07月16日で更新停止しました HTML5以降、APIがどんどん拡張されており、Webにおける表現力が増しています。支える技術として知られているのがSVGとCanvasでしょう。これらは2Dグラフィックスを描画するのに使われることが多いです。 そんな中、登場したのが3D Builderです。なんとSVGで3Dを描くためのライブラリです。 3D Builderの使い方 デモです。ハートを3Dで描いています。 回転もできますが、かなり重たいです。 ワイヤーだけになると若干軽くなります。 回転しているところ。 球のワイヤー。 3D Builderは回転させることはできるのですが、動作はかなり重たいです。SVGは3D描画には不向きですが、JavaScriptと組み合わせたりするのには良いかも知れません。利用機会は限定的で
imagemin - 画像サイズをコマンドラインでまとめて軽減
MOONGIFTはオープンソース・ソフトウェアを紹介するブログです。2021年07月16日で更新停止しました ネットワーク上に流れるデータは極力小さい方が良いです。圧縮はもちろん、余計なメタ情報を削除したりして、ネットワーク負荷を軽減するのが望ましいでしょう。しかし一つ一つのファイルを手作業でやるのは現実的ではありません。 そこで自動化です。今回はコマンド一つで画像サイズを軽減できるimageminを紹介します。 imageminの使い方 例えば以下のようにコマンドを実行します。これだけでPNGファイルをまとめて処理してくれます。 $ imagemin *.png -o ./out 処理前後のファイルです。682KBが433KBになっています。37%削減されています。 imageminはオプションとして他の画像圧縮ライブラリを指定できます。より圧縮率の高いアルゴリズムを指定するのも良いでし
Browser Online Bookmark Incsearch
MOONGIFTはオープンソース・ソフトウェアを紹介するブログです。2021年07月16日で更新停止しました オンラインブックマークはついついブックマークした後の整理を怠り、どんどん蓄積されていきます。後で見返した時に、あまりにも膨大な数で目的のブックマークに辿り着けなくなってしまうのではないでしょうか。 そこで使ってみたいのがBrowser Online Bookmark Incsearchです。各種オンラインブックマークサービスのデータを取り込み、インクリメンタルに検索できます。 Browser Online Bookmark Incsearchの使い方 まず取り込むブックマークサービスを指定します。Googleブックマーク、Pinboard、はてなブックマークが使えます。それぞれのサービスにあらかじめログインしておく必要があります。 取り込み中。 取り込んだらブックマークが一覧表示さ
HatebLine - HBFavの体験を受け継ぐはてなブックマークビューワー MOONGIFT
はてなブックマークでフォローしている人たちのブックマークを軽快に読めるHBFavが開発を停止しました。はてなブックマーク自身のフィード仕様が変わったのが原因ですが、残念なことです。 そこで登場したのがHatebLineです。iOSではなくmacOS向けのソフトウェアですが、HBFavの体験を引き継ぐソフトウェアです。 HatebLineの使い方 まず設定でユーザ名とトークンを設定します。 後は自動的に更新されていくので眺めていくだけです。 スペースキーで記事を閲覧できます。 HatebLineはブックマークではなく、誰がブックマークしているかという人にフォーカスしたビューワーです。これはFBFavと変わらないでしょう。はてなブックマークをソーシャルとして楽しんでいる人にぴったりなソフトウェアです。 HatebLineはSwift製のソフトウェア（ソースコードは公開されていますがライセンスは
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
