LaRecipe - Markdownから格好良いドキュメントを生成
MOONGIFTはオープンソース・ソフトウェアを紹介するブログです。2021年07月16日で更新停止しました 開発者に対して見栄えの良いドキュメントを提供する、これはDevRelにおいて大事な要素です。誰だって使いづらい、読みづらいドキュメントは嫌がるものです。デザインはもちろんのこと、文字サイズや見出しの付け方などによっても可読性は変わってきます。 そこで紹介したいのがLaRecipeです。Laravelを使い、Markdownから綺麗なドキュメントを生成してくれるソフトウェアです。 LaRecipeの使い方 デモです。左側に大見出し、中央がコンテンツ、右側にそのページのアウトラインが表示されます。 コードなども綺麗に表示されます。 アウトプットのデモデザインを入れている例。 ドキュメントの下にはコメント欄が用意されています。 左側の目次は非表示にできます。 検索も使えます。 LaRec
js-green-licenses - JavaScriptプロジェクトのライセンスをチェック
MOONGIFTはオープンソース・ソフトウェアを紹介するブログです。2021年07月16日で更新停止しました オープンソースの基本であり、肝なのがライセンスです。さらにライブラリを使っていたりすると、そのライセンスも関わってきます。ライセンスの誤った利用はビジネス上のリスクになり得ますが、それでもオープンソースを一切用いないという選択は困難になってきています。 もしNode.jsをプロジェクトに採用しているならば使ってみたいのがjs-green-licensesです。指定したパッケージのライセンスは利用ライブラリ含めてチェックしてくれます。 js-green-licensesの使い方 ローカルの場合は --local を指定します。問題がなければ All green! と出ます。 $ jsgl --local . Checking package.json... All green! 問題
RunJS - JavaScriptコードを即座に評価してくれるマルチプラットフォーム対応のPlayground | ソフトアンテナ
今やWebになくてはならない技術となったJavaScriptですが、コードをちょと試してみるのに、Webブラウザの開発者ツールを使用するのは面倒くさいと感じる方もいるかもしれません。 本日紹介する「RunJS」はそのような方におすすめのJavaScriptのPlaygroundです。 入力したコードを即座に評価して結果を表示してくれるので、ライブラリの使い方やちょっとしたコードの実行結果を確認するのに大変便利なアプリとなっています。 Babelのトランスパイル機能を利用してTypeScriptをサポートしているほか、nodeモジュールのインポート機能やテーマの変更機能も搭載し、Vimキーバインドを使用することもできます。 以下使用法を説明します。 RunJSの使用方法 GitHubのリリースページから最新の実行ファイルをダウンロードしてインストールします。Macの場合.dmgファイルをダウ
Kanon - プログラミングコードを可視化
プログラミングは構造的です。そのため、構文解析して別な言語にしたり、ツリー構造に展開したりできます。それらの構造を見ることで、綺麗な設計になっているかどうかも分かりそうです。 そんな可能性を感じさせるのがKanonです。JavaScriptのコードを解析、ビジュアル化します。 Kanonの使い方 左側にコード、右上にクラスの構造、右下にメインスクリプトの実行が可視化されています。 処理を増やしたところ。 コードが複雑になると、可視化された構造も複雑化します。 Kanonを使うことでプログラミングコードを別な視点から見られるようになります。コードは自動的に更新されるので、自分のコードを貼り付けてみて、どんな構造になっているのか見てみるのも面白そうです。 KanonはJavaScript製のオープンソース・ソフトウェア（MIT License）です。 prg-titech/Kanon: A l
Netron - 機械学習のネットワークを可視化
MOONGIFTはオープンソース・ソフトウェアを紹介するブログです。2021年07月16日で更新停止しました 機械学習ではフォーマットの標準化が進んでいます。これまでTensorflowやCaffe、Chainerなど様々なソフトウェアがありましたが、生成されるモデルがONNXというフォーマットに統一されつつあります（他にもあるようですが）。 そんなONNXフォーマットのモデルをビジュアル化できるソフトウェアがNetronです。 Netronの使い方 ドロップしたところです。これは4か9を判別するモデルです。 拡大もできます。 パラメータも閲覧できます。 Netronを使うことでPythonのコードではなく、ビジュアル化されたモデルを通じて機械学習のネットワークを学ぶことができます。各ノードにおける出力の数も出ており、ネットワークの詳細が分かりやすくなるでしょう。 NetronはJavaS
Git History - ビジュアル的な差分表示
バージョン管理の肝と言えるのが差分表示でしょう。何か誤った更新があっても確認ができて、必要に応じて差し戻すこともできます。多くの場合、上下または左右に並べて比較できるようになっています。 今回はその新しい表示方式としてGit Historyを紹介します。ビジュアル的に優れた格好良い差分ビューワーです。 Git Historyの使い方 Git HistoryはGitHub上のファイルを開いた状態で、github.comをgithub.githistory.xyzにすると差分表示になります（公開されているファイルの場合）。その表示は以下のようになります。 上に出ているコミッターを切り替えると、アニメーションしながらその時のコードになります。 実際に試しているところです。 Git Historyは細かく見比べるときには使いづらいですが、雰囲気としてどれくらい変わったかを把握するには十分です。ある
jeelizWeboji - Webカメラでアニ文字風
MOONGIFTはオープンソース・ソフトウェアを紹介するブログです。2021年07月16日で更新停止しました アニ文字はビデオチャットが普及しない日本ではあまり使われていませんが、VTuber的な遊びもできるので面白い技術です。しかし専用アプリを介してしか使えないので、利用のためには敷居が高い状態です。 そこで使ってみたいのがjeelizWebojiです。Webカメラの映像を認識し、アニメに反映してくれるソフトウェアです。 jeelizWebojiの使い方 狐の二次元キャラクターに反映するデモです。 口や目の動きが反映されます。 顔の向きも変わります。 Webカメラではなく動画も使えます。 サウスパークのキャラクターにも。これはSVGで作られています。 かなり首が回ります。 jeelizWebojiは顔をトラッキングしているので体の動きは反映されませんが、将来的には体の動きにも合わせられる
pad.js - ターミナルからでも使えるファイル共有サーバ MOONGIFT
ファイルを共有する仕組みは意外と簡単ではなかったりします。Apple製品同士であればAirDropが使えますが、異なるマシン間において、目の前の相手にデータを送りたいと思うことはよくあります。そして大抵メールになったりします。 今回はインターネットを介してファイルを送信、受信できるpad.jsを紹介します。 pad.jsの使い方 pad.jsが魅力的なのはコンソールで送れることでしょう。認証もいらず、さくっと送れます。 $ curl -F "file=@IMG_3721.jpg" http://127.0.0.1:9090/IMG_3721.jpg 逆に取り出す場合にはwgetでも良いでしょう。URLを指定するだけです。 $ wget http://127.0.0.1:9090/IMG_3721.jpg --2018-10-15 13:35:40-- http://127.0.0.1
Fiddly - MarkdownのREADMEを綺麗なHTMLで表示
MarkdownファイルはHTML生成のために使われることが多いです。生成するタグはごく基本的なものになるので、デザインは利用するWebサイト側に任されています。多くはシンプルなデザインであったり、GitHub風になっています。 今回紹介するFiddlyはMarkdownからより綺麗でデザインされたHTMLを生成するソフトウェアになります。 Fiddlyの使い方 サンプルです。 コードやリンクなどが分かりやすく表示されます。 テーブルです。 Todoにも対応しています。画像を並べて表示するのも良い感じです。 テーマを変更してダークモードにも。 Fiddlyはデザインがすっきりとして見やすいのはもちろん、絵文字のサポート、コードハイライト、画像の縮小表示、コードをiframeで安全にするといった工夫がされています。カスタマイズも可能なので、自分好みの使い方ができるでしょう。 FiddlyはJ
textlint - playground - Web上でtextlintを試す
MOONGIFTはオープンソース・ソフトウェアを紹介するブログです。2021年07月16日で更新停止しました 各種プログラミング言語においてLintツールが存在します。そうしたLintツールを使うと、人に指摘されるよりもストレスが小さく、受け入れやすいと言われています。人だと感情が入りやすいですが、コンピュータだとそういった問題がありません。 今回はプログラミングではなく、テキストに対してLintを実行するtextlintのWeb版、textlint - playgroundを紹介します。 textlint - playgroundの使い方 左側がエディタ、右に指摘事項が並んでいます。 マウスを当てるとツールチップで指摘が確認できます。 ルールをクリックして有効、無効の切り替えもできます。 textlint - playgroundはオンラインで手軽に文章チェックできるのが便利です。デフォ
Worker DOM - Web WorkerでDOM操作を実現
MOONGIFTはオープンソース・ソフトウェアを紹介するブログです。2021年07月16日で更新停止しました HTML5 APIの一つにWeb Workerがあります。通常のWebブラウザ上で動作するJavaScriptとは別で、バックグラウンドで動作するJavaScriptです。時間のかかる処理を行ったりするのに便利ですが、一つの欠点にDOMが使えないという点が挙げられます。 そこで使ってみたいのがWorker DOMです。Web Worker上でDOM操作を可能にします。 Worker DOMの使い方 デモです。ボタンを推した際のイベントでDOMを書き換えます。 SVGの表示もできます。 テーブルの内容を書き換えることもできます。 さらに細かな表示制御も。 Todoアプリのデモもあります。 documentオブジェクトが使える訳ではないので、実際の利用には癖があるようです。とは言え、本
actual-code - コードを実行できるMarkdownエディタ
Markdownは開発者がよく使っているだけあって、内容にコードがよく含まれています。様々な言語が記述されており、そのコードをコピーしてローカルで実行したりすることも多々あるでしょう。 そんな時、Markdown上でコードが実行できれば良いのにと思ったことはないでしょうか。そこで使ってみたいのがactual-codeです。 actual-codeの使い方 左側がエディタ、右側がプレビューになります。JavaScriptが実行され、その結果が表示されているのが分かります。 actual-codeは一見するとMarkdownエディタですが、その中にプログラムの実行機能が備わっています。今のところJavaScriptだけですが、将来的に対応言語が追加されていくと面白そうです。 actual-codeはTypeScript製のオープンソース・ソフトウェア（MIT License）です。 eruki
Fiddle - すぐにElectronアプリ開発をはじめられる開発環境
MOONGIFTはオープンソース・ソフトウェアを紹介するブログです。2021年07月16日で更新停止しました Electronを使えばWindows/macOS/Linuxなどマルチプラットフォームで動作するソフトウェアがHTML/JavaScript/CSSで作成できます。作ってみたいと思いつつも、環境を整える手間で躊躇してしまっている人もいるのではないでしょうか。 そんな方に使ってみて欲しいのがFiddleです。ダウンロードしてすぐにElectronアプリ開発がはじめられるソフトウェアです。 Fiddleの使い方 Fiddleを起動したところです。 開発環境は3ペインになっています。左側にあるJavaScript、右にあるHTMLを編集するのが基本です。 開発したらElectronアプリとして実行できます。各バージョンのElectronがFiddle上で簡単にダウンロードできます。 実
DayDream - ブラウザ操作を記録してPuppeteer/Nightmareの操作スクリプトを作成 MOONGIFT
ヘッドレスなChrome/Chromiumは幾つかありますが、今一番注目されているのがPuppeteerでしょう。理由としては開発しているのがGoogleということで、継続的な開発が期待できる点です。 そんなPuppeteerを操作するスクリプトをGoogle Chrome上で作成できるのがDayDreamです。 DayDreamの使い方 ツールバーにある録画アイコンをクリックすると操作を記録開始します。 できあがるとアイコンにバッジが表示されます。 クリックするとスクリプトが表示されます。 DayDreamはPuppeteerだけでなく、Nightmare向けのスクリプトも作成できます。DayDreamでできたスクリプトを使えば、テストや操作の自動化を簡単に実現できるようになるでしょう。 DayDreamはJavaScript製のオープンソース・ソフトウェア（MIT License）です
Canvas Sketch - ビジネスモデルキャンバスをWeb上で
ビジネスモデルを考える際にビジネスモデルキャンバスを使うと、見逃していた視点を発見したり、相互の関連性を俯瞰的に確認できるようになります。A4の紙を使ってすぐに作れるのも魅力でしょう。 今回はビジネスモデルキャンバスをWeb上で作れるCanvas Sketchを紹介します。Web上であれば何度も書き直したり、共有しやすいと言ったメリットがあります。 Canvas Sketchの使い方 こちらがCanvas Sketchの画面です。 Addをクリックすると入力するダイアログが表示されます。 こんな感じでどんどん書き足していきます。 Canvas SketchはWebブラウザベースなので、紙さえなくとも書き始められたり、保存しておいて何度も修正をかけることができます。変更履歴を取っておくことで、ビジネスモデルの変化や履歴を追いかけると言ったこともできるでしょう。 Canvas SketchはJ
myConsole - スマートフォン向けのJavaScript実行環境 MOONGIFT
JavaScriptの実行環境としてはWebブラウザの開発者ツールがよく使われますが、それはデスクトップにしか用意されていません。タブレットやスマートフォンでちょっとしたJavaScriptを実行したいと思うこともあるでしょう。 そんな時に使えるのがmyConsoleです。Webベース、スマートフォン特化型のJavaScript実行環境です。 myConsoleの使い方 メイン画面です。上にコードを入力し、下に結果が表示されます。 document.write を実行すると画面全体が書き換わってしまうので注意です。 myConsoleでは簡易的にJavaScriptを実行できますが、スマートフォンでコードを入力するのはやはり大変です。その意味ではスニペットをコピーして実行してみるくらいの使い方が良さそうです。 myConsoleはJavaScript製のオープンソース・ソフトウェア（MIT
jsc - Rustで書かれたJavaScriptコンパイラ
JavaScriptを利用できる場面は広がっていますが、実行するためにはJavaScript実行エンジンたるv8などが必要です。また、スクリプト言語なので実行時に解釈されるため、実行速度は若干遅くなるでしょう。 今回紹介するjscはそんな限界を超えるかも知れないソフトウェアです。Rustで書かれたJavaScriptコンパイラーになります。 jscの使い方 サンプルのコードです。main関数を実行します。
Slate markdown editor - ホットキーが用意されたMarkdownエディタ
MOONGIFTはオープンソース・ソフトウェアを紹介するブログです。2021年07月16日で更新停止しました Markdownエディタは数多く存在します。多くは二画面形式になっており、左側がエディタ、右側がプレビューになっています。しかし、この場合は編集している内容とその結果の両方を逐次確認しないといけません。 Slate markdown editorはそういった手間なく、その場で表示に反映されるので初心者にも分かりやすい仕組みになっています。 Slate markdown editorの使い方 Slate markdown editorの画面。左側がエディタ、右側には変換後のHTMLが表示されています。 画像は選択すると削除できます。 新しい画像を埋め込むこともできます。 Slate markdown editorは多数のキーボードショートカットが用意されており、その多くはMarkdo
Pennywise - 常に表示しておけるWebブラウザ
仕事をしていて、Webサイトを表示しつつ、その情報を使って作業するというのはよくある光景です。そんな時、ウィンドウを横並びにしたり、都度アプリケーションを切り替えながら作業しますが、とても面倒です。 そこで使ってみたいのがPennywiseです。任意のサイトを表示しつつ、透明度が設定できるWebブラウザです。 Pennywiseの使い方 起動すると、まずURLを入力します。 普通のWebブラウザとして使うこともできますが、あまり機能は多くありません。 常に前面表示にして使うこともできます。 そして透明度の設定もできます。 Pennywiseを使うことで常にWebサイトを表示しながら文書を作ったり、開発を続けられるようになります。参考にするのはもちろんのこと、スポーツのリアルタイム実況を表示したりと使いどころが多そうです。 PennywiseはJavaScript製のオープンソース・ソフトウ
Text2MindMap - テキストで記述するマインドマップ
マインドマップは思考整理ツールとしてよく使われますが、ビジュアルにこだわりはじめると考えを整理するよりも並びであったり、ノードの見た目にこだわったりしてしまいます。これは思考の邪魔になるでしょう。 そこで使ってみたいのがText2MindMapです。テキストで記述してビジュアルで確認できるマインドマップソフトウェアです。 Text2MindMapの使い方 メイン画面です。左側がエディタ、右側がプレビューになります。 日本語も使えます。 設定画面です。 色を変えられます。 Text2MindMapはインデントを使ってノードの繋がりを表現します。テキストだけで、装飾などはできないので書くことに集中できるでしょう。記述した内容はダウンロードできますが、テキストファイルの内容であって画像ではありません。思考を停止させない、便利なソフトウェアです。 Text2MindMapはJavaScript製の
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
