HTTP Responder - WebHookを使った開発を便利に MOONGIFT
WebHookはシステム連携するのに便利な仕組みですが、呼び出されるのがサーバ側とあって、開発時の確認がしづらいのが問題です。ngrokなどを使ってローカル環境を外部に繋ぐこともできますが、準備が面倒と感じる人もいるでしょう。 そこで使ってみたいのがHTTP Responderです。WebHookの内容を確認できるWebサービスです。 HTTP Responderの使い方 最初に自分の好きなURLを設定します。 後はそのURLに来たアクセスについて、細かく情報が確認できます。 HTTP Responderで設定したURLをWebHookに設定することで、どういった情報が送られてくるかが一目で分かるようになります。さらにレスポンスも決めることができます。URLを複数作れるので、サービスごとに分けられるのも便利です。 HTTP Responderはnode/JavaScript製のオープンソー
Theia - Webベースで動作する開発環境 MOONGIFT
MOONGIFTはオープンソース・ソフトウェアを紹介するブログです。2021年07月16日で更新停止しました ローカルアプリケーションがどんどんWebアプリケーション化しています。そんな中、最近では開発環境もWebアプリケーション化が進んでいます。AWSがCloud9を買収したのも、その動きの一つです。 今回紹介するTheiaはクラウドやデスクトップでも動作するWebベースのIDEです。 Theiaの使い方 メイン画面です。左側にファイル/フォルダツリー、右側にエディタが表示されます。 Gitの差分表示も行えます。 プロジェクト内の検索。 Gitのログ。 設定はJSONを修正して反映します。 テーマもあります。 Theiaは個人のローカルであればDockerで使うこともできます。クラウドであればファイルはサーバ上に、ローカルで動かすならば自分のストレージにあるファイルを編集できます。Vis
Sketch2Code - 手書きのスケッチからHTMLデザインを生成
アプリやWebサイトの企画を行う際には、まず紙やホワイトボードに手書きのラフを作ると思います。入力欄なども大ざっぱに決めて、みんなで話し合うでしょう。最近ではラフを写真に撮って、アプリの導線を確認できるサービスもあります。 今回はさらにその一歩先、ラフデザインをHTMLにしてくれるSketch2Codeを紹介します。 Sketch2Codeの使い方 試してみたところ。日本語があったり、あまり細かいデザインだと再現が難しいようです。 できあがったHTMLはダウンロードできます。 サンプルより。これくらいのデザインなら精度の高い再現ができるようです。 Sketch2CodeはMicrosoftのAI技術を用いて手書きのラフスケッチをHTMLにしてくれます。フォームなどを組み合わせたデザインであれば十分に再現できるようです。これでHTMLコーダーが不要になるとは思いませんが、5年後にはこういった
TinyEditor - わずか400byteのHTMLプレイグラウンド
JSFiddleやCodePenといった、HTML/JavaScript/CSSのプレイグラウンドサービスが多数あります。クローンサービスもありますし、自分で立てることもできます。しかしあえてサーバサイドの仕組みなどを用意したくはないでしょう。 そこで使ってみたいのがTinyEditorです。たった400byte程度のHTMLプレイグラウンドです。 TinyEditorの使い方 JavaScriptコードを実行するとこんな表示になります。 しかし筆者環境では上記のコードままでは動かなかったので itty.bitty で変換されたものを使っています。 TinyEditorの仕組みは簡単で、HTML/JavaScript/CSSに書かれたコードを文字入力のたびにiframe内に反映しています。ローカルでさくっとJavaScriptの実装を確認したりするのに便利そうです。 TinyEditorは
CodeWich - TypeScript対応、サーバレスなHTMLプレイグラウンド MOONGIFT
JSFiddleやCodePenなど、HTML/JavaScript/CSSのプレイグラウンド的サービスが多数あります。多くのサービスは専用のURLが払い出され、そのURLにアクセスして使います。そして、そのサービスが落ちたりすると使えなくなるリスクがあります。 そんな中注目したいのがCodeWichです。コードを圧縮して専用のURLとする、URLを覚えている限りはあなたのコードがなくなったりしないプレイグラウンドサービスです。 CodeWichの使い方 入力はTypeScriptベースになっています。 CSSの入力補完も効いています。 テーマの変更や入力内容のlocalStorage補完に関する設定も可能です。 実行例です。 Canvasを使った表現もできます。 CSSを使ったものも。 CodeWichは共有を行う際にURLが生成されますが、 https://codewich.com/#
Terminalizer - ターミナルの入出力内容をアニメーションGIF化 MOONGIFT
サーバのセットアップ時など、ターミナルの作業内容をメモしておきたいということは多々あります。後になって、コマンドだけで振り返っても分かりづらいので、入出力内容をそのまま保存しておくのが便利です。 そこで使ってみたいのがTerminalizerです。ターミナルの作業内容をアニメーションGIFに変換してくれます。 Terminalizerの使い方 作成したアニメーションGIFです。 Terminalizerは作業内容をYAMLファイルとして出力します。それを見れば、テキストベースでログとして追いかけることもできるでしょう。そして変換を行うことでアニメーションGIFにできます。ブログなどに載せる際にはアニメーションGIFが役立つことでしょう。 TerminalizerはJavaScript製のオープンソース・ソフトウェア（MIT License）です。 faressoft/terminalize
Snibox - 自分で立てるスニペットサーバ
MOONGIFTはオープンソース・ソフトウェアを紹介するブログです。2021年07月16日で更新停止しました スニペットは開発中によく使います。同じコードは存在しない方が良いのですが、プロジェクトが異なる場合や、よく使う正規表現など取っておくと便利なコードの断片はよくあります。 今回はそんなスニペットを管理するためのSniboxを紹介します。 Sniboxの使い方 画面は3ペインに分かれています。一番左が言語、次がタイトル、そしてスニペットになります。 コードの表示です。コピーしたり、編集できます。 コードはハイライト表示されるので見やすいです。 新しいスニペットの入力画面です。タイトルと言語を指定します。 Rubyのスニペットを追加したところ。 Sniboxはプログラミング言語別にまとまるのが便利です。個人で使うスニペットであればGistで十分ですが、Sniboxは社内で立ててみんなで共
Statup - Go製のステータスページ
MOONGIFTはオープンソース・ソフトウェアを紹介するブログです。2021年07月16日で更新停止しました Web APIやクラウドサービスを提供する際にはステータスページを作っておくと良いでしょう。サービスに万一のことがあった場合に、ステータスページがあることで障害の発生状況や回復状況が分かるようになります。 今回紹介するStatupはステータスページを作成するためのシステムになります。 Statupの使い方 デモページです。オンラインかどうかは一覧ですぐに分かります。 詳細表示ではグラフでも確認できます。 Statupはサーバのレスポンス、アップタイム、過去24時間における稼働状況などが一目で分かるようになっています。グラフを見れば、負荷が徐々に上がっているのか、突然レスポンスがなくなったのかといった状況も分かります。 StatupはGo製のオープンソース・ソフトウェア（MIT Li
Container web TTY - Dockerコンテナ用のWebベースのターミナル
MOONGIFTはオープンソース・ソフトウェアを紹介するブログです。2021年07月16日で更新停止しました Dockerコンテナに入ってシェルを叩きたいという時は多いです。そんな時にはIDを調べて、docker execで中に入ったりします。しかし都度IDを調べたり、コマンドを叩くのは面倒ではないでしょうか。 そこで使ってみたいのがContainer web TTYです。コンテナの内部に入るのがとても簡単になるソフトウェアです。 Container web TTYの使い方 立ち上げると、Webブラウザ上でコンテナ一覧が確認できるようになります。 そしてコンテナを指定するとシェルに入れます。Webブラウザ上で動くのが便利です。 普通にコマンドが打てます。 Container web TTYはコンテナ用にWebベースのターミナルを提供します。コンテナのIDを調べたりする手間はありません。Co
webdiff - WebベースのGit差分表示
バージョン管理を入れていて役立つのが差分（Diff）です。Gitでは標準で git diff が使えますが、大きな変更を行っている時には見づらいでしょう。かといって専用のソフトウェアを使うのも面倒です。 そこで使ってみて欲しいのがwebdiffです。Gitコマンドに連携したWebブラウザベースの差分表示ツールです。 webdiffの使い方 webdiffは git diff の代わりに git webdiff とするだけです。そうするとWebブラウザが立ち上がって差分を表示してくれます。 webdiffをインストールしておけば、差分表示がとても見やすくなります。ファイル単位でサイドバイサイドで見られるので変更した部分がはっきり分かるでしょう。インストールしておくと役立つ場面が多そうです。 webdiffはPython製のオープンソース・ソフトウェア（Apache Licnese 2.0）で
Stencila - ドキュメントと表計算をシームレスに連携させるオフィススイート MOONGIFT
Pythonを使っている人にとってはお馴染みのJupyter Notebook。コードと文章を一緒に書けるのでプログラミングに関連したコンテンツが見やすくなります。様々な種類の文書を埋め込む際には同様の手法が便利です。 オフィスでよく使われる文書や表計算でも同じことができそうです。それがStencilaです。 Stencilaの使い方 ドキュメントと表計算が一つのドキュメントにまとめられます。こちらはドキュメント。 こちらは表計算。 埋め込むとこんな感じになります。計算式を埋め込むことができます。 グラフも表計算を使って表現できます。 Microsoft OfficeでもOLEを使って連携はできます。しかし元ファイルを移動してしまったらリンクが切れてしまったりします。更新も複数のアプリケーションを使うのが面倒です。Stencilaは一つのファイルとしてまとまっているので、メンテナンスしやす
summary-to-pptx - PythonでPowerPointを生成
プレゼンテーション用のスライドを作る際には専用のソフトウェアを使うことが多いでしょう。しかし、開発者にとってはあまり使い勝手の良いものは多くありません。作成はもちろん、修正や検索するのも面倒です。 そこで参考になりそうなのがsummary-to-pptxです。あらかじめ用意した素材からスライドを生成します。 summary-to-pptxの使い方 実行結果です。画像やテキストが埋め込まれたPowerPointファイルが生成されます。 summary-to-pptxは埋め込むテキストや画像を用意し、コマンドを実行するとPowerPointファイルが生成される仕組みです。テンプレートになるPPTXファイルをあらかじめ用意しておきます。同じような仕組みを用いれば、システムのデータを使ったスライドも簡単に作れそうです。 summary-to-pptxはPython製のソフトウェア（ソースコードは公
intercooler.js - Ajaxの実装をHTMLだけで簡単に MOONGIFT
Webアプリケーション開発時において、切っても切り離せないのがAjaxです。サーバからのコンテンツを取得したり、逆に登録したりして画面を書き換えると言ったことが良く行われています。 実装が面倒なAjaxをHTMLだけで実現してくれるのがintercooler.jsです。 intercooler.jsの使い方 HTMLの例です。 <a ic-post-to="/click"> Click Me! </a> クリックで表示が変わります。 例えばクリックでインライン編集モードになって、その結果を指定したURLに送ると言った仕組みも作れます。 <div id="contact-div"> <div><strong>First Name</strong>: Joe</div> <div><strong>Last Name</strong>: Smith</div> <div><strong>Emai
termtosvg - ターミナルの操作を記録してSVGアニメーション化 MOONGIFT
CLIのソフトウェアなどのインストール記事を書く際、ターミナルの入力を残しておくと便利です。社内でドキュメントにする際にも良いでしょう。しかし、出力を適宜コピー&ペーストするのは非常に面倒です。 そこで使ってみたいのがtermtosvgです。ターミナル出力を記録し、SVGアニメーションにしてくれます。 termtosvgの使い方 サンプルです。SVGアニメーションになったものをアニメーションGIFにしています。 termtosvgはAsciinemaに似たソフトウェアですが、共有せずに使えるのが利点です。つまり社内などの特殊な操作があった場合にも利用できます。動画のように見られるので、作業確認する際に便利そうです。JavaScriptで操作することもできるでしょう。 termtosvgはPython製のオープンソース・ソフトウェア（MIT License）です。 nbedos/termto
CodiMD - リアルタイムコラボレーション付きのMarkdownエディタ MOONGIFT
Markdownは業務の中でも広く使われるようになっています。個人でメモとして使う範疇を遙かに超えて、Markdownなしでは仕事が回らないというチームすらあるのではないでしょうか。 そんな方達にお勧めなのがCodiMDです。共同編集をサポートしたMarkdownノートアプリです。 CodiMDの使い方 エディタです。2ペインになっています。左側が編集、右側にプレビューが表示されます。 他のブラウザの編集がリアルタイムに反映されます。 画像はドラッグ&ドロップでアップロードされます。 メニューです。プレゼンテーションモードや各種フォーマットでのダウンロードが可能です。 PDFは残念ながら日本語が表示されませんでした（Herokuに日本語フォントが入っていないせいだと思いますが）。 テーブルもサポートされています。 PDFの埋め込み。 MathJax。 Graphvizによるグラフ埋め込み。
pptx-export-notes - PowerPointから発表者ノートをエクスポート
MOONGIFTはオープンソース・ソフトウェアを紹介するブログです。2021年07月16日で更新停止しました PowerPointでスライドを作る人は多いでしょう。そして、スライドを作る中で便利なのが発表者ノートです。発表中に自分だけが見られるメモを残しておくことで言うべきことを忘れずに伝えられます。 そんな発表者ノートはPowerPointファイルの中にありますが、再利用したいと思うこともあるでしょう。そこで使えるのがpptx-export-notesです。 pptx-export-notesの使い方 pptx-export-notesはPowerPointファイルを指定して実行します。 $ python pptx-export-notes.py -p ./ug.pptx ./ug_presenter_notes.txt file successfully written to'./ug
VBA-Web - VBA用のWebライブラリ
今はWeb APIやRESTfulといったキーワードを無視できなくなっています。それはExcelやAccessでも同じです。しかしVBAでやったことがある人は分かりますが、XML HTTP Requestで作るのはなかなか面倒です。 そこで使ってみたいのがVBA-Webです。VBAがインターネット上のリソースとデータの送受信をするのに最適なライブラリです。 VBA-Webの使い方 例えばGoogleマップの機能を使って二点間の距離を算出します。 他にもGoogle Analyticsのデータを取得することも。 VBA-WebはGET/POSTだけでなく、PUT/DELETEも使えます。Cookieにも対応し、JSONも扱えます。OAuth2認証にも対応していますので、最近のWeb APIであれば問題なく利用できるでしょう。 VBA-WebはVBA製のオープンソース・ソフトウェア（MIT L
JSUI - JavaScriptプロジェクトを一元管理
JavaScript周辺の技術は日進月歩で進化しています。新しいトレンドがどんどん増え、フレームワークも続々登場しています。そうした中で、適切にキャッチアップしていくのは大変でしょう。 そこで使ってみたいのがJSUIです。UIやJavaScriptプロジェクトの管理を一元化できるソフトウェアです。 JSUIの使い方 まずはプロジェクトを作ります。既存のプロジェクトも開けます。 VueやAngular、Reactがテンプレートになっています。 登録しました。 まだライブラリはありませんが、自分で追加できます。 一例です。 package.jsonの内容も確認できます。 CSSをCSS to in JSに変換できます。 さらにBabelも試せます。 JSUIはVisual Studio Codeと連携しており、ファイルの編集はそちらで行います。ライブラリや簡易的な補助機能が入っていること、Ja
S3 Album Publisher - 静的ホスティングサイト向けにアルバムをアップロード MOONGIFT
Webサイトを立ち上げるというのは昔に比べると手間がかからないものになりましたが、逆に手間がなくなりすぎて一切立ち上げる気がなくなってしまっています。ちょっとしたサイトをあえて自分でメンテナンスするのは面倒というものです。 例えば写真を他の人に公開したいというだけであればS3 Album Publisherを使ってみるのが良いでしょう。 S3 Album Publisherの使い方 最初に一覧が出ます。 クリックで画像が大きくなります。 出力設定機能もあります。 S3 Album Publisherを使うとHTMLファイルが出力されるので、後はそれをAamzon S3にアップロードすれば良いだけです。もちろん他のサービス（GitHub Pagesなど）にアップロードすることもできます。静的HTMLのホスティングサービスを使えるのが魅力です。 S3 Album PublisherはJavaS
node-read - URLからメインコンテンツをピックアップ
MOONGIFTはオープンソース・ソフトウェアを紹介するブログです。2021年07月16日で更新停止しました オンラインにはテキストコンテンツが溢れています。問題はそうしたテキストコンテンツから意味のある情報をどう得るかです。HTMLタグを外しただけでは意味がありません。 そこで使ってみたいのがnode-readです。メインコンテンツとおぼしき部分をピックアップしてくれるnode用ライブラリです。 node-readの使い方 サンプルコードです。とても簡単で、URLを指定するくらいです。 var read = require('node-read'); read('http://www.moongift.jp/2017/09/c0-macosで2dアニメーション作成/', function(err, article, res) { // Main Article. console.log(
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
