MarkDeck - 多機能なHTMLスライドを生成
MOONGIFTはオープンソース・ソフトウェアを紹介するブログです。2021年07月16日で更新停止しました プレゼンテーションのスライドを作る方法としてはPowerPointやKeynote、Googleスライドと言った専用のソフトウェアを使うのが手軽です。ただし相手が同じ環境でないと使えなかったり、ソフトウェアを手に入れる必要があります。Googleスライドは便利ですがフォントの種類が少なかったりするのが残念です。 そこで使ってみたいのがHTMLプレゼンテーションです。今回は特に機能が多そうなMarkDeckを紹介します。 MarkDeckの使い方 デモのスライドです。矢印キーでのスライド切り替えはよくある操作です。 コードハイライト。 ditaaを使ったアスキーアートからグラフィカルな画像にする機能。 plantumlを使ってテキストからUML表現も。 graphvizも使えます。
Sushi Browser - Electron製の開発者向きなWebブラウザ
開発をしていて、一つのウィンドウを複数ペインに分けてコーディングすることはよくあります。同様にWebブラウジングしている時に、複数サイトを並べたいと思うこともあるでしょう。その場合、Webブラウザではウィンドウを分けなければなりません。 そこで使ってみたいのがSushi Browserです。マルチペインに対応したWebブラウザです。 Sushi Browserの使い方 起動直後です。 レンダリングエンジンはWebKitなのでSafariやGoogle Chrome同等の結果が得られます。 セッションを保存しておいて、呼び出せる機能。 ユーザエージェントを変更する機能。 スプリット。 さらに細かく分割もできます。 スクリーンショット保存機能。ページ全体も指定できます。 さらに設定には多数の機能があります。 なぜかターミナルも。 ファイル操作もできます。 ノート機能はWYSIWYGでメモできま
rrweb.io - Webサイトの操作を記録&再生 MOONGIFT
Webサイトでユーザがどんな操作を行ったのかを解析することによって次の改善策が生まれることがあります。また、ゲームプレイのように後で見返したり、リプレイしてみたいケースもあります。録画しておくことで後で振り返れるようになります。 任意のWebサイトにおいてセッションを記録できるライブラリがrrweb.ioになります。 rrweb.ioの使い方 Webフォームの入力はもちろん、ウィンドウのリサイズも記録されます。 そして保存したセッションを再生できます。1〜8倍で再生可能です。 Ajaxを使うような、後からコンテンツが追加される場合も再生できます。 こちらはゲームの例です。 一倍でも高速に再生されます。 rrweb.ioを使って操作内容を記録し、後はその内容をサーバ上に保存することで、いつでも再生が可能になります。プライバシーの問題もあるので、ユーザの了承は必要ですが、ゲーム動画のようにユー
Whitebophir - コラボレーションできるオンラインホワイトボード MOONGIFT
遠隔地とミーティングをする際に便利なのがチャットです。テキストや動画を介してコミュニケーションがスムーズに行えます。しかし、イラストなどを相手と共有したい時にはホワイトボードを使うのが便利です。 そこで使ってみたいのがWhitebophirです。リモート同士で共有できるオンラインホワイトボードになります。 Whitebophirの使い方 トップページです。ホワイトボードの名前を入力します。 こちらがホワイトボードです。マウスで絵を描いたり、テキストを追加したりできます。 そして別なWebブラウザからも書き込みし、リアルタイムで共有できます。 二つのウィンドウで描画が共有されている様子です。 Whitebophirを使うことで動画やテキストとは異なる情報を共有できるようになります。ブレストしたり、進捗を書き込んだりする際に使われるホワイトボードをオンライン化すれば、リモートの人たちとの共有も
Kinocot - マスコットの入れ替えも可能なデスクトップマスコット MOONGIFT
ソフトウェアにキャラクターを表示させることで、ユーザビリティを高くしたり、ストレスを下げられる効果が期待できます（Officeのイルカのように逆効果な場合もありますが）。デスクトップマスコットはまさにそのために存在します。 そんなデスクトップマスコットとしてKinocotを紹介します。自分で好きなマスコットを動かすことができます。 Kinocotの使い方 元々作者がメイプルキノコのキャラクターを動かしたかったと言うだけあって親和性は高そうです。 マスコットから小さな機能を呼び出せます。例えばメモ機能。 タイマー機能。 KinocotはアニメーションGIFを入れ替えることで別なキャラクターを動かすこともできます。自分の好きなキャラクターを動かして楽しみたい、という方にぴったりです。また、ミニ機能を自分で追加したりカスタマイズするのも難しくないでしょう。 KinocotはWindows用のソフ
eDEX-UI - 映画を彷彿とさせるフルスクリーンターミナル
開発者であればSF映画などに憧れを抱くものでしょう。SF映画に出てくる司令室で使われるコンピュータは大型のスクリーンに様々な情報が並びますが、GUIよりもコンソールで情報が表示されることが多いように思います。 そんなスクリーンを自分のコンピュータでも！と願う方はぜひeDEX-UIを使ってみましょう。フルスクリーンのターミナルという新境地にあなたをお連れします。 eDEX-UIの使い方 メイン画面です。フルスクリーンに様々な情報が表示されているのが分かるでしょう。 eDEX-UIはターミナルとして使うことももちろんできます。そして日付、キーボード、クリップボードなど様々な情報が表示されています。左下にあるファイル一覧からフォルダをたどることもできます。これは巨大なスクリーンで使ってこそ栄えそうなターミナルです。 eDEX-UIはnode/JavaScript製のオープンソース・ソフトウェア（
Screenshoteer - CLIでWebサイトのスクリーンショット取得
MOONGIFTはオープンソース・ソフトウェアを紹介するブログです。2021年07月16日で更新停止しました WebディレクターなどはWebサイトのスクリーンショットを撮る機会が多いかと思います。そんな時、縦長のWebサイトは厄介だったり、デスクトップではなくスマートフォン向けのWebサイトのスクリーンショットを撮りたいなど細かいニーズはたくさんあるでしょう。 そこで使いたいのがScreenshoteerです。コマンドラインから細かく条件を指定してスクリーンショットが撮れます。 Screenshoteerの使い方 まずは普通に取得する場合 screenshoteer --url https://www.moongift.jp --fullpage false 内部的にはpuppeteerを使っていますので日本語も問題ありません。 フルスクリーンでも撮れます。 screenshoteer -
Tabulator - これはすごい。HTMLテーブルを高機能に MOONGIFT
テーブル表示はWebシステムのデファクトとも言えます。業務システムはいうに及ばず、管理者画面などでも必ず求められる表示です。そしてただ表示すればいいという訳ではなく、ソートやフィルタリング、インラインでの編集など様々な機能が求められるものです。 そんな多機能なテーブル表示を実現してくれるのがTabulatorです。多くのニーズを満たしてくれることでしょう。 Tabulatorの使い方 てんこ盛りなデモテーブル。ざっと見てもフィルタ、ページネーション、グラフ表示、ソートなどの機能が確認できます。 インライン編集もサポートされています。 データに合わせて幅を自動調整。 行をクリックして展開する機能。 カラムをグループ化。 カラムを縦に。これはカラムが多い時に便利そうです。 ドリルダウン。 テーブルを入れ子にもできます。 スパークライン表示。 フッターで集計。 HTMLテーブルを変換する機能もあ
backer - コンテナのバックアップ/リストア MOONGIFT
開発や運用時にコンテナを利用するのも当たり前になってきています。そんな中、誤ってコンテナを削除してしまったり、ストレージの障害でデータをロストするような問題も出てきます。そんな時には何はともあれバックアップが大事です。 今回紹介するbackerはコンテナ専用のバックアップソフトウェアになります。利用用途は限られそうですが、便利なソフトウェアです。 backerの使い方 基本的には full オプションですべてのコンテナをバックアップできます。 $ backer full backup for container: devcle_api_1 started lsでバックアップしているコンテナを確認できます。 $ backer ls there are 2 available backups: devcle_api_1 [2 snapshots] 20.11.2018_15.27.54 [20
SQLPad - クエリを保存、可視化するSQL実行環境 MOONGIFT
社内でエンジニア以外の人たち（特にマーケター）にSQLを覚えてもらうと業務効率が良くなるという話をよく聞きます。データを様々な角度から取り出したいと思う人たちは自分でやってもらう方が早いのです。 そんなSQLを実行したり、保存できるのがSQLPadです。re:dashにも似ていますが、もっとシンプルなソフトウェアです。 SQLPadの使い方 まず接続先を定義します。 今回はMySQLを使います。 クエリーを記述します。入力補完も用意されています。 SQLの整形機能もあります。 結果を確認できます。 結果のグラフ化も。 グラフは様々なパターンが用意されています。 SQLPadを設置し、最初のテンプレートはエンジニアが用意しておくことで、それをカスタマイズして運用できるようになるでしょう。自由にデータを取り出せるようになれば、彼らの業務効率が大幅に向上します。SQLPadは様々なデータベースに
demado - 決まった幅と高さでURLを開く
MOONGIFTはオープンソース・ソフトウェアを紹介するブログです。2021年07月16日で更新停止しました チャットやプレイ中のWebゲームなど、別ウィンドウにしておきたい場面は多々あります。そんな時、Electronなどで別アプリ化する手もありますが、機能拡張やアプリが分かれるのが面倒という方もいるでしょう。 そこで使ってみたいのがdemadoです。特定のURLを固定された大きさのウィンドウで開いてくれるソフトウェアです。 demadoの使い方 ウィンドウを追加します。URLを指定します。 さらに幅、高さ、マージンを設定します。 作成しました。最後に名前をつけます。 後はツールバーから呼び出します。 こんな感じであらかじめ決めた幅と高さでウィンドウが開きます。 demadoはたとえば艦これであったり、チャット、Twitterなどのサービスで活躍します。ウィンドウが固定化されるのでレスポ
jsc - Rustで書かれたJavaScriptコンパイラ
JavaScriptを利用できる場面は広がっていますが、実行するためにはJavaScript実行エンジンたるv8などが必要です。また、スクリプト言語なので実行時に解釈されるため、実行速度は若干遅くなるでしょう。 今回紹介するjscはそんな限界を超えるかも知れないソフトウェアです。Rustで書かれたJavaScriptコンパイラーになります。 jscの使い方 サンプルのコードです。main関数を実行します。
lorca - Go + HTML5でデスクトップアプリを開発する
Web技術を使ってデスクトップアプリケーションを作る技術としてElectronが知られています。Electronで利用するのはnode/JavaScriptですが、別な言語使う技術も存在します。 今回紹介するlorcaはGoを使ってデスクトップアプリを作ります。UIこそHTML5ですが、大きな可能性を秘めた存在と言えそうです。 lorcaの使い方 lorcaのコードです。 $ cat main.go package main import ( "net/url" "github.com/zserge/lorca" ) func main() { // Create UI with basic HTML passed via data URI ui, _ := lorca.New("data:text/html,"+url.PathEscape(` <html> <head><title>H
elementary - プライバシーに配慮したLinuxデスクトップ MOONGIFT
かつての夢、それはLinuxがデスクトップの世界も制することでした。しかし常にどこかで使い勝手が悪く、結果としてWindowsでもUbuntuが使えたり、macOSがUNIXをベースにしたりとLinuxがデスクトップでシェアを上げるのが難しくなっています。 その夢再び、というのがelementaryです。Linuxベースのデスクトップ用ディストリビューションです。 elementaryの使い方 Live CDを使ってインストールせずに試せるようになっています。 起動後の画面です。macOSに近いのではないでしょうか。 WebブラウザはWebKitベースです。 カレンダーアプリ。 システム設定。これもmacOSに似ています。 AppCenterを使って安全なソフトウェアを簡単にインストールできます。 elementaryはペアレントコントロールがあったり、写真や動画を見るためのソフトウェアも
termtosvg - ターミナル操作を記録してSVG化
MOONGIFTはオープンソース・ソフトウェアを紹介するブログです。2021年07月16日で更新停止しました サーバのセットアップやソフトウェアのインストール時にはターミナルの操作を記録しておきたいと思うものです。それによって後で振り返ることができたり、問題があった時に気付けるようになります。 ターミナル操作を記録するソフトウェアは幾つかありますが、特にWebとの親和性が高そうなのがtermtosvgです。なぜなら生成されるファイルがアニメーションするSVGだからです。 termtosvgの使い方 実行中は通常のターミナルと変わりませんが、.bash_profile が読み込まれていませんでした。 記録したSVGをアニメーションGIFにしたものです。SVGでテキストとして保存されているので、入力した内容によって若干文字が左右に動いたりします。 SVGなので、JavaScriptと連携させた
GoCity - Goライブラリの依存性を可視化 MOONGIFT
最近のソフトウェアは依存性を全くなくして作られることは少なくなっています。外部のライブラリを積極的に使うことで、多彩な機能を素早く、安定して取り込めるようになります。 今回はそんなライブラリへの依存性を可視化してくれるGoCityを紹介します。 GoCityの使い方 とあるライブラリの例。まるでマイコンのようです。 別なライブラリ。メソッドの量によって高さが変わってきます。 マウスオーバーでライブラリ名が出ます。 GoCityを使うと、あるソフトウェアやライブラリが別なライブラリにどれくらい依存しているかが分かるようになります。あまりライブラリを使いすぎると依存の複雑性による不具合が発生することもあります。自分は幾つかのライブラリしか使っていなくとも、そのライブラリが多数依存しているケースもあります。時々GoCityを使って可視化してみるのも面白そうです。 GoCityはGo製のオープンソ
psrecord - 特定のプロセスをロギング MOONGIFT
MOONGIFTはオープンソース・ソフトウェアを紹介するブログです。2021年07月16日で更新停止しました 特定のプロセスが突然暴走したり、メモリ使用量が変化していたりする際に使うのがpsであったり、topなどになります。しかしこれらはリアルタイムの状態を表示しており、常に関している訳にはいきません。 そこで使ってみたいのがpsrecordです。特定のプロセスのCPU、メモリ変化をログにしてくれます。 psrecordの使い方 psrecordはプロセス番号を指定して実行します。 $ psrecord 55566 --log activity.txt Attaching to process 55566 そうするとログにCPU、メモリ使用量を記録してくれます。測定するインターバルなどはオプションで指定できます。 $ cat activity.txt # Elapsed time CPU
VSaver - 動画をスクリーンセーバーに
MOONGIFTはオープンソース・ソフトウェアを紹介するブログです。2021年07月16日で更新停止しました 気に入ったスクリーンセーバーがなくて、適当なものを設定していないでしょうか。画面の焼き付けを防ぐためには（今ではほとんどありませんが）、常に画面が書き換わっている必要があります。 そんなコンテンツとして最適なのが動画です。VSaverは動画をスクリーンセーバーにしてくれます。 VSaverの使い方 設定画面です。 YouTubeなどの動画を登録します。 後はスクリーンセーバーが開始すれば動画が再生されます。 VSaverでは各動画を全画面で再生します。そのためインターネットにつながっていなければ使えません。また、動画のURL単位であってチャンネルが登録できないのが残念です。好きなアーティストを登録しておいて、新しくリリースされたPVが再生されたら楽しいですよね。 VSaverはma
JavaScript Visualizer - JavaScriptの実行内容を可視化 MOONGIFT
プログラミングコードはコンピュータ上で実行されるので、実行を開始して終わるまでが一瞬です。そのため、どう動いているのかを確認するのは困難で、初学者にとっては魔法のように感じてしまうでしょう。 そこで使ってみたいのがJavaScript Visualizerです。JavaScriptをステップ実行してその内容を把握できます。 JavaScript Visualizerの使い方 実行中です。 実行速度が指定でき、左側に書いたコードを実行してくれます。 thisの内容など変数も確認できます。 JavaScript Visualizerを使うことでJavaScriptのコードがどう実行されているのかが分かりやすくなります。処理の順番が分かればデバッグもしやすくなるでしょう。プログラミング初級者にもお勧めなソフトウェアです。 JavaScript VisualizerはJavaScript製のソフト
PaginateMyTable - テーブルタグをページネーション可能に MOONGIFT
業務システムではデータの一覧表示を作ることが多いでしょう。そんな時にはHTMLのテーブルタグを使うはずです。50行くらいであれば良いですが、数百行のデータを一気に表示すると視認性も落ちますし、使いづらくなります。 そこで使ってみたいのがPaginateMyTableです。HTMLのテーブルにページネーションを追加してくれるライブラリです。 PaginateMyTableの使い方 元々の表示です。 実行しました。デフォルトで5行ごとのページネーションになります。 PaginateMyTableは単なるテーブルをページネーション可能にしてくれます。動的に行われているので、ページネーションの件数を変更したりするのも簡単でしょう。サーバサイドを使わないので何度も読み込み直したりする必要もなく、便利そうです。 PaginateMyTableはjQuery/JavaScript製のオープンソース・ソフ
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
