Aperture - nodeを使ってコマンドラインでスクリーンキャプチャ MOONGIFT
コンピュータの操作を記録するソフトウェアは幾つもあります。昔はあまり選択肢がなかったですが、今ではOS標準のソフトウェアでレコーディングできたりします。その多くのソフトウェアはGUIで、マウス操作を使って録画しなければなりません。 もっとプログラマブルにレコーディングをしたければApertureを使ってみましょう。コマンドラインで呼び出せるスクリーンレコーダーです。 Apertureの使い方 実際に録画された内容をアニメーションGIFにしたものです。 ApertureはMPEG4のファイルとして保存されます。FFMPEGで録画した場合に比べて1/3以下の負荷で済むのが利点とのことです。軽量ならば長時間の録画にもきっと耐えられるでしょう。録画する大きさ、場所などもコードで指定できるので、常に決まった場所を録画すると言った時に便利そうです。 Apertureはnode/JavaScript製の
google-apps-script - Google Apps Scriptをローカルで開発/管理 MOONGIFT
Google Apps Scriptを使うとGoogleスプレッドシートやドキュメントなどの自動操作ができるようになります。若干特殊なJavaScriptにはなりますが、デバッグ実行もできるので開発もしやすいです。難点はコードをすべてWeb上で書くという点です。 開発をローカルで行いたいという方はgoogle-apps-scriptを使ってみましょう。 google-apps-scriptの使い方 createオプションを使ってコードを生成します。 $ gas create gas-test Creating 'gas-test' in your Google Drive... [✔] [1ePybn623IqFsWw7qmIGQnfFxX5lVDMJ_hbMIuaSIwub9Sj29i1aIj1ax] gas-test 後はコードを変更するだけです。listで既存のスクリプトが一覧できま
jsonsmash - ファイルシステムのような操作ができるJSONビューワー MOONGIFT
Web APIを伴う開発を行う際にはJSONファイルを使うことが増えています。XMLに比べると冗長性がなく、サイズが小さくて済むのですが、改行などもなく見づらいのが難点です。そのため、データのある場所を間違えてしまって、うまく動かないなんてこともよくあります。 そこで構造を確認するために使ってみたいのがjsonsmashです。インタラクティブにJSONの内容を確認できます。 jsonsmashの使い方 jsonsmash コマンドにJSONファイルを渡せばOKです。そしてlsでキーを並べたり、catでデータの表示ができます。 $ jsonsmash http://headers.jsontest.com/ > ls Host X-Cloud-Trace-Context > cat X-Cloud-Trace-Context: 0f8474abd239690f43f5e9c82b07ff7f
VMS - Vue.js製のCMS MOONGIFT
CMSは常に新しいものが登場します。それはプログラミング言語だったり、フレームワークだったりします。CMSがあることで、そのプログラミング言語やフレームワークの使い方が分かるようになります。CMSは殆どの方が機能について理解していますので、コードの理解も早いでしょう。 今回はVue.jsを使ったCMS（管理画面）のVMSを紹介します。 VMSの使い方 管理画面のダッシュボードです。 ユーザ一覧。 ページを追加する画面です。 アンケート機能もあります。 こんな感じで設問を追加します。 質問の一覧です。 VMSはVue.jsでできていますので、UIの遷移などはとてもスムーズです。Vue.jsの書き方、使い方を学ぶ上でも役立つのではないでしょうか。なお、ユーザが見る画面については自分で開発する必要があるようです。 VMSはnode/JavaScript製のオープンソース・ソフトウェア（MIT L
kingraph - 家系図/組織図ジェネレータ MOONGIFT
組織図であったり、家系図といった図を描こうと思ったらどんなツールを使っているでしょうか。ドローツールも使えますが、編集したりするのが面倒だったりします。Excel職人の方はやはりExcelを駆使して作り上げてしまうかも知れません。 今回はWebベースで使える家系図を作れるkingraphを紹介します。 kingraphの使い方 kingraphはYAML形式で組織図を定義します。例えば以下のようになります。 families: - parents: [Marge, Homer] children: [Bart, Lisa, Maggie] - parents: [Lisa, Milhouse] children: [Zia] people: Marge: fullname: Marjorie Bouvier Simpson そしてSVG/PNG/DOTファイルとして出力できます。 king
docsify - 動的/静的両方に対応したドキュメントジェネレータ MOONGIFT
APIやSDK、ライブラリなどにドキュメントは必須です。しかも読みやすく、分かりやすいドキュメントでなければなりません。デザインに凝るのではなく、可読性を重視して作られるべきです。そういったドキュメントはなかなか作るのは難しいでしょう。 そこで使ってみたいのがdocsifyです。ドキュメントサイトを作るためのフレームワークになります。 docsifyの使い方 デモです。左側がメニュー、右側にコンテンツが表示されます。 多言語対応しており、右上のメニューから切り替えられます。 テーマもあります。こちらはbuble。 dark。 docsifyはデフォルトでは静的なHTMLを出力せず、動的に生成する形になっています。そのためUIとしてはスムーズなコンテンツ切り替えができるようになっています。また、SEO対策として静的なHTMLファイル出力も対応しています。 docsifyはnode/JavaS
SecureLogin - 別なデバイスで許可して認証する
MOONGIFTはオープンソース・ソフトウェアを紹介するブログです。2021年07月16日で更新停止しました 認証の仕組みはWebがはじまった当初から大して進化していません。IDとパスワードという二つの認証情報をベースに鍵ファイルを使ったり、スマートフォンを使った二段階認証と発展版が出ていますが、大きくは変わっていません。 新しいログインの仕組みとして登場したのがSecureLoginです。簡単に言えば二つのデバイスを組み合わせた認証です。 SecureLoginの使い方 例えばこのデモサイトで認証したいとします。 今回はChrome機能拡張を使った認証を行います。 最初にパスワードの生成に20秒ほど要します。 サイトやアプリなどで使えるレガシーなパスワード生成ツールもあります。 デモサイトで認証しようとするとChrome機能拡張が立ち上がって自動的に認証を行ってくれます。 SecureL
maildown - Markdownを日本企業で使えるメール文面に変換 MOONGIFT
Markdownが便利な記法であってもすべてに使える訳ではありません。まだまだ個人間でやり取りされるメールはテキストが一般的で、HTMLメールが使われることはほぼありません。となるとMarkdownの出番がありません。 そこで作られたのがmaildownです。Markdownで書かれた文章を日本企業で使われるメール風の体裁にしてくれます。 maildownの使い方 左側が元文章、右側が変換された内容です。 リストなどに特徴があります。 maildownではリストの他、罫線を使ったテーブル表示、見出しの処理、80文字で改行などと細かな部分を日本企業風に仕立ててくれます。また、下には変換された部分やタイポなどの指摘がされるようになっています。日本風と言わずともメール用のMarkdownコンバータとして便利なソフトウェアです。 maildownはnode/JavaScript製のオープンソース・
GanttPad - テキストからガントチャート生成
MOONGIFTはオープンソース・ソフトウェアを紹介するブログです。2021年07月16日で更新停止しました プロジェクト管理と言えばガントチャートと言うくらい必要としている方は多いです。少なくとも一覧では分からなかったタスクの関連であったり、今後のタスクの予定が可視化されるようになります。それによって無理が来るポイントなども掴めるようになるでしょう。 今回紹介するGanttPadはテキストで書いたタスクをガントチャートに展開してくれるソフトウェアです。 GanttPadの使い方 下にあるテキストエリアに入力すると、上にあるガントチャートに反映されます。 日付フォーマットは柔軟なようです。 新しいチャートの作成もできます。 GanttPadはテキストをガントチャートに展開してくれるので、多くのシステムと連携ができそうです。タスク名、日付さえ出力すれば良いので既存システムからそういった文字列
node-compiler - nodeのコードを実行エンジンともども一つの実行ファイルに MOONGIFT
nodeで作られたソフトウェアの配布はnpmを使って行うのが一般的です。しかしコードを見られるのが問題だったり、最初にnodeをインストールしなければならず、若干敷居が高くなってしまいます。 そこで使ってみたいのがnode-compilerです。nodeアプリケーションをパッケージして一つのバイナリにします。 node-compilerの使い方 例えばCoffeeScriptをバイナリにする例です。この規模のソフトウェアに適用できるならば大抵使えるのではないでしょうか。 nodec bin/coffee a.outファイルが生成されます。後はこれを実行すればいいだけです。 $ ./a.out coffee> nodeの実行エンジンを含みますのでサイズは肥大化する傾向になります。CoffeeScriptは36.3MBになりました。 node-compilerを使えばnodeのインストールが不
Prettier - JavaScriptのコードを見やすく整形
JavaScriptは人によって書き方が変わる言語でもあります。企業によっては基準を設けたりしますが、それでもLint系で注意するのが精一杯でしょう。見づらいコードはそれだけバグをはらみやすく、システムの品質を低下させます。 そこで使ってみたいのがPrettierです。JavaScript用のコード整形ツールです。 Prettierの使い方 左側が元コード、右側が変換後のコードです。 引数の与え方などが大きく変わっています。 配列なども綺麗に並んでいます。 Prettierを使うとルールに合わせてコードを変換してくれます。改行やインデントでの整形になるので、動作が変わることはありません。インデントはタブか空白か選択できたり、ダブルクォートかシングルクォートかといった指定もできます。パーサーも指定できるので、自社好みのカスタマイズもできるでしょう。 Prettierはnode/JavaScr
PsiTransfer - 自前で立てるファイル共有サーバ
MOONGIFTはオープンソース・ソフトウェアを紹介するブログです。2021年07月16日で更新停止しました メールなどで巨大なファイルを送りつけるのはあまり良いことではありません。受ける側は強制的に受信せざるを得ませんし、そのせいで大事なメールが受信できなくなってしまうかも知れません。そのため、送受信両方でメールのサイズ制限を設けていることはよくあります。 そんな時のために使えるのがファイルをシェアするサーバです。今回はPsiTransferを紹介します。 PsiTransferの使い方 最初の画面です。ファイルをドラッグ&ドロップで登録します。 ファイルを登録しました。保存期間やパスワードも設定できます。 アップロード中です。 アップロードが完了し、専用のURLが生成されました。 そのURLにアクセスするとパスワードが聞かれます。 パスワードが合っていればファイルがダウンロードできます
tlapse - 指定したURLに定期的にアクセスしてスクリーンショットを保存 MOONGIFT
Webサイトの作成はゼロから形になるものを作っていく、作品としての一面を持っています。いきなり完成品ができあがる訳ではなく、色々試行錯誤しながら、再読込を繰り返しつつできあがっていきます。 そんなWebサイトのできあがっていく様を残し続けてくれるのがtlapseです。 tlapseの使い方 tlapseは以下のように利用します。 tlapse --every 5m --directory ./screens -- localhost:3000 そうするとlocalhost:3000に5分ごとにアクセスして、スクリーンショットを残し続けてくれます。PNG画像でできあがるので、後はImageMagickなりを使うとアニメーションGIF化もできます。 何も作業していない時はスクリーンショットが重複するので、その場合は画像は保存されません。固定のURLを指定するので、別なページのスクリーンショット
todo-md - GitHubフレーバーなタスク管理を行うCLIツール
MOONGIFTはオープンソース・ソフトウェアを紹介するブログです。2021年07月16日で更新停止しました Todo管理というと、もの凄くしっかりとやることもできれば、逆に緩くシンプルに行う選択肢も考えられます。あまりきっちりやると管理コストが大きくなるので、最初は適度に力を入れすぎにやってみるのが良さそうです。 そこで使ってみたいのがtodo-mdです。GitHubのMarkdownファイルに記載するタスク管理と同様の仕組みで使えるCLIツールです。 todo-mdの使い方 使い方としてはtodoコマンドの後にタスク名を書きます。 $ todo "ミーティング" | # Todo list | | _\( managed using [todo-md](https://github.com/Hypercubed/todo-md) \)_ | 5 | - [ ] ネタを集める 6 | -
placehold-cli - placeholdのURL生成コマンド
デザインのプロトタイプを作っている時に便利なのがplaceholdです。パラメータに応じて画像の色を変えたり、画像自体の大きさを自由に変更できます。他にもフォントの大きさや色も変えられるのですが、パラメータをいちいち覚えておくのも面倒です。 そこで使ってみたいのがplacehold-cliです。対話型でplaceholdのURLを取得できます。 placehold-cliの使い方 コマンドを実行しているところです。 $ placehold ? Width(px) 300 ? Height(px) 400 ? Background Color(hex) fb0 ? Text Hello ? Font Color(hex) FFF ? Font Size(px) 35 url: https://placehold.jp/35/fb0/FFF/300x400.png?text=Hello Cop
Docpress - 読みやすい開発者向けドキュメントを生成
開発者向けのドキュメントシステムなんて何でも良いと思っていないでしょうか。開発者はオンラインドキュメントをよく読み、Googleで検索し、そこにあるコードをコピーして実行します。そのため、半端なドキュメントでは彼らの信頼を失ってしまうでしょう。 そこで使ってみたいのがDocpressです。Markdownベースのドキュメント生成システムです。 Docpressの使い方 デモです。左側に目次、右側にコンテンツが表示されます。 ページの下に次のページへのリンクが表示されます。 メニューは隠せます。 Docpressは文字が大きめ、デザインもすっきりしたドキュメントを生成します。使い方としても docpress s でプレビューができるなど、とても簡単に使い始められます。 Docpressはnode/JavaScript製のオープンソース・ソフトウェア（MIT License）です。 docpr
express-status-monitor - Express製のステータスモニター
MOONGIFTはオープンソース・ソフトウェアを紹介するブログです。2021年07月16日で更新停止しました 最近では多くのサービスがステータスを公開しています。問題が起こればすぐに分かりますし、トラフィックが上がっているか、APIが正常に動作しているか開発者も簡単に理解できます。 今回はExpressで作ったサービスに簡単に組み込めるexpress-status-monitorを紹介します。 express-status-monitorの使い方 デモの画面です。 データはリアルタイムに刻々と変わります。 express-status-monitorは既存のExpressアプリケーションの中に簡単に組み込めます。GitHubのステータスページにインスパイアされたとのことです。express-status-monitorを別サーバで提供するようにすればサービスのステータスページとして使えるで
Monaco Editor - VS Codeでも使われているWebベースのプログラミングエディタ MOONGIFT
Web上でコードを書けるサービスが増えています。そのままファイルとして保存したり、クラウド上で実行できるようになっています。そうした時にデフォルトのテキストエリアを使っていては全く書く気がなくなってしまうでしょう。 そこで使ってみたいのがMonaco Editorです。Microsoft製のプログラミングエディタVS Codeでも使われているソフトウェアです。 Monaco Editorの使い方 メイン画面です。行番号がついて、カーソル行が分かりやすく囲まれています。 テーマを変更しました。各種言語に対応したハイライタが備わっています。 CSSでテーマをハイコントラストに変更しました。 言語によってはこのようなツールチップ表示もサポートされています。 Diff（差分）エディタもあります。 2画面だけでなく、1画面での表示も行えます。 Monaco EditorはVS Codeでも使われてい
Pairs - スマートフォンを使ってデスクトップブラウザを操作 MOONGIFT
GoogleなどがHTML5を使って、デスクトップとスマートフォンを連携させたゲームを時折公開します。スマートフォンをコントローラとすることで、加速度センサーや傾きを使った、よりインタラクティブなゲームが開発できるようになるでしょう。 今回はそんな操作を可能にする技術基盤になるPairsを紹介します。学べるポイントが多いのではないでしょうか。 Pairsの使い方 Pairsをデスクトップで表示すると、QRコードと検証用のキーが表示されます。 スマートフォンでサイトを訪れて検証キーを入力すると操作が同期します。 スマートフォンでスライドを変更できます。縦、横向きは検知できない（画面上には反映されない）模様です。 Pairsはスマートフォンとデスクトップを同期させ、スマートフォンでのイベントをデスクトップへ伝えてくれます。仕組みとしてはWebSocketを使ったものになります。技術的に面白いソ
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
DeNA Engineering - DeNAエンジニアのポータルサイト
