MOONGIFTはオープンソース・ソフトウェアを紹介するブログです。2021年07月16日で更新停止しました ドキュメントの中にコードを記載するのは良くあることですが、単に書いてあるだけでは分かりづらいこともあるでしょう。たとえばIDEのようにマウスオーバーで説明を出したり、コメントなどで説明されているとより便利です。 今回紹介するTwoslashはそんなドキュメントを作成するライブラリです。 Twoslashの使い方 Twoslashの例です。コードに説明が追加されています。 変数の説明にも使えます。 書き方として cut を使います。 ソースとその実行例です。 入力補完の再現もできます。 エラーの表示にも使えます。 カラーテーマも多数用意されています。 マウスオーバーにも対応しています。 こんな感じに説明があると分かりやすいですね。 TwoslashはTypeScriptを用いることで

デザインが苦手な人にとって、デザインテンプレートはとても便利な存在です。Bootstrap臭が、といわれても便利である以上使わざるを得ません。しかしクラスの使い方などを覚えるのは面倒です。 今回紹介するnew.cssはHTMLタグのみ、クラス指定が不要（クラスレス）なCSSフレームワークになります。 new.cssの使い方 タイポグラフィ。 リスト。 定義リスト。 引用とコード。 テーブル。 フォーム。 画像。 テーマでダークにも変えられます。 クリックで表示/非表示を変えられるようなギミックもあります。 new.cssは個人のプロフィールなどに最適とのことです。確かにこだわったスタイル設定をせずに見栄えのいい表示にしてくれるのは便利です。標準のHTMLタグのままで使えますので、これをベースにカスタマイズするのもよさそうです。 new.cssはCSS製のオープンソース・ソフトウェア（MIT

MOONGIFTはオープンソース・ソフトウェアを紹介するブログです。2021年07月16日で更新停止しました Markdownをコンテンツとして利用しているWebサイトが増えています。HTMLに比べれば簡易的な記法ですし、知らずに書いても決して読めないものにはならないでしょう。そして素のMarkdownエディタだけでなく、ちょっとした付加価値を追加したものも多数作られています。 今回紹介するAsteroidはMarkdownエディタとJavaScript実行環境がセットになったソフトウェアです。 Asteroidの使い方 左側がエディタ、右側がプレビューになります。 コードも左側に書いて、その結果が右側に出ます。 Reactコンポーネントとして展開されます。 通常のMarkdownエディタとしての表示も問題ありません。 Three.jsを使って3Dオブジェクトの描画を行うこともできます。

MOONGIFTはオープンソース・ソフトウェアを紹介するブログです。2021年07月16日で更新停止しました 3Dプリンタを購入して、自宅で造形を楽しんでいる人も多いでしょう。最初は手元に置いておくのですが、思いの外うるさかったり、稼働時間が長いため、近くに居続けられなくなります。その結果、しまっておいて徐々に使わなくなったりします。 今回紹介するOctoPrintは3DプリンタをWebブラウザから操作できる管理ソフトウェアです。OctoPrintを使えば、離れたところに3Dプリンタがあっても利用できます。 OctoPrintの使い方 管理画面です。モデルのアップロードもできます。 細かな操作が可能です。 Gコードのビューワーもあります。 Webカメラを使って映像を撮影し、タイムラプスにしてくれる機能があります。 OctoPrintはWindowsやmacOSといったコンピュータへの接続も

MOONGIFTはオープンソース・ソフトウェアを紹介するブログです。2021年07月16日で更新停止しました カンバンシステムはTrelloの登場以降、様々なシステムが作られています。シンプルなものもあれば、ものすごくリッチなものもあります。導入する場合には自分たちの組織にあったものを選定する必要があるでしょう。 今回紹介するKanban Boardはタグやカレンダー連携などの機能を備えたカンバンシステムです。 Kanban Boardの使い方 メイン画面です。縦のカラムだけでなく、横にも区切りを付けられます。 マウスオーバーするとノートが傾きます。 編集画面です。 カレンダー表示もできます。 移動もできます。 データはYAML形式です。 素の状態。縦横のグリッドが特徴です。 Kanban Boardは組織を横断したプロジェクトにも対応しやすいカンバンシステムです。データはYAMLなので直

MOONGIFTはオープンソース・ソフトウェアを紹介するブログです。2021年07月16日で更新停止しました CodePenやJSFiddleなどWeb上でHTML/CSS/JavaScriptを試せるプレイグラウンドサービスが多様に存在します。これらはコードをサーバ側に保存するので、自前で同じような環境を用意するのが面倒です。 今回紹介するurlpagesは静的サイトでも使えるのが魅力です。もちろん作成したコードを他の人に見せることだってできます。 urlpagesの使い方 よくあるHTML/CSS/JavaScriptの入力画面です。 入力すると、下にあるプレビューに反映されます。 記述した内容は専用のURLが生成されます。実態はHTML/CSS/JavaScriptがパックされた文字列です。 urlpagesは記述したコンテンツをパックしてURL中に埋め込みます。そのため、それを別な

脱出ゲームは人気のあるコンテンツです。アプリはもちろん、リアル脱出ゲームも人気があります。壁や家具などから様々なアイテムをゲットして、部屋を出たり、建物から脱出します。 そんな脱出ゲームを作るのに使えそうなゲームエンジンがPoint and Click Gameになります。 Point and Click Gameの使い方 これはデモなのでとても簡単です。 鍵を手に入れました。 外に出られました。 脱出ゲームの基本は壁や目に見える場所を探って新しいアイテムを手に入れて、それを使ってアクションを起こすという形になるでしょう。Point and Click Gameはその基本的なエンジンを提供します。Point and Click GameをベースにすればWebブラウザ上で動く脱出ゲームが作れそうです。 Point and Click GameはJavaScript製のオープンソース・ソフトウ

MOONGIFTはオープンソース・ソフトウェアを紹介するブログです。2021年07月16日で更新停止しました プログラミングとバージョン管理は切っても切り離せないものです。それは開発者であれば誰しもが納得するでしょう。しかし、プログラミングとバージョン管理を一つにして、学習すべき要素を減らしてしまおうという発想はなかなか出てこないはずです。 それを実現してしまったのがlegitです。何を言っているのかよく分からないと思いますが、ぜひご覧ください。 legitの使い方 例です。例えば以下のコードはHello worldを出力します。しかしこのディレクトリにはGitリポジトリがあるだけで、中身は何もありません。 $ ruby interpreter.rb examples/hello/ Hello world ディレクトリでログを見たところです。怪しくHello worldだのputだのといっ

MOONGIFTはオープンソース・ソフトウェアを紹介するブログです。2021年07月16日で更新停止しました Markdownエディタは無数に存在します。あらゆるプログラミング言語で作られて、WebやWindowsなどおあらゆるプラットフォームに対して作られています。多くは2ペインになっており、機能差も殆どありません。 そんな中で目立つためには特徴的な機能が必要です。mdneはコードが実行できる点が特徴なMarkdownエディタになります。 mdneの使い方 CLIで実行時にファイルを指定するか、メインウィンドウでファイルをドラッグ&ドロップします。 こちらがメインウィンドウです。通常はHTMLのプレビューです。 PDFプレビューもできます。プレビューは若干時間がかかります。 そして $$$ を使ってLispが書けるのが特徴となっています。 Markdownエディタでは新しいシンタックスを

Webは自由度の高いプラットフォームです。WebブラウザはHTMLとCSSを使ってデザインするのが前提で、デザインしない時の表示は酷いものです。しかし、こったデザインをするのは時間がかかります。 そこで使ってみたいのがWater.cssです。CSSファイルを読み込むだけで、ちょっと良い感じのデザインにしてくれます。 Water.cssの使い方 フォームです。標準タグの状態からこのような見栄えになります。 コードタグ。 画像。 テーブル。 タイポグラフィ。 アドレス、メールアドレスタグ。ヘッダーも。 テーマは白と黒が用意されています。 Water.cssを読み込むだけで適当なHTMLがここまで見栄え良くなるのが魅力的です。ちゃんとしたWebサイトとしては物足りないかも知れませんが、ちょっとした文章を公開したいというニーズであれば十分ではないでしょうか。 Water.cssはCSS製のオープン

JavaScriptを書きたくない、という人たちは大勢います。その結果、様々な代替言語が開発されています。あらかじめJavaScriptに変換するタイプもであれば、Webブラウザ上でコンパイルするものなど様々です。代替言語を使うことで、より堅牢で効率的な開発ができるようになります。 今回はTypeTalkを紹介します。言語体系としてはSmallTalkに似たプログラミング言語になります。 TypeTalkの使い方 こんな時計のようなUIを作ることもできます。 JSXと組み合わせる例。protectedが使えるので、JavaScriptのオブジェクト指向より使いやすいかも知れません。 TypeTalkはTypeScriptをベースに作られており、Webブラウザ上でそのまま動作します。SmallTalkはオブジェクト指向プログラミングの手本とされるくらい洗練されたクラスライブラリが知られていま

これは来るんじゃないだろうか…。 Go1.11でJavaScript APIが実装され、WebAssemblyからDOMやネットワークにアクセスできるようになりました。しかし、そのコードは通常のGoのコードと異なり、JavaScriptと比べても分かりづらいものでした。 しかし将来的にうまくラッピングしたライブラリが出るだろうと思っていたのですが、それはVuguによって予想以上に早く実現されました。 Vuguの使い方 Vuguのメインとなるコードです。Vue風にWeb Component調にまとまっているのが分かります。 <div class="my-first-vugu-comp"> <button @click="data.Toggle()">Test</button> <div vg-if="data.Show">I am here!!</div> </div> <style> .m

MOONGIFTはオープンソース・ソフトウェアを紹介するブログです。2021年07月16日で更新停止しました 電子部品を組み合わせて動くものを作るのはとても楽しいです。光ったり、動いたりすると寝食を忘れて作り込んでしまったりするでしょう。プログラミングとはまた異なる楽しさがあります。 そんな楽しさが味わえるのがOrcaです。ルールに沿ってパーツを組み合わせて動くものを作ります。 Orcaの使い方 メイン画面です。各ドットに英数字を打ち込みます。 作例。こんな感じで動きます。 方向によってNEWSの文字が変わっているのが分かるでしょうか。 ピタゴラスイッチ的な面白さがあります。 ガチャガチャ動いている勘が良いですね。 Orcaは英数字ごとに動きが決まっており、それらを配置して一つの作品を作り上げます。MIDIとの組み合わせもできるとのことで、ビジュアルとサウンドを組み合わせたデジタルアートに

MOONGIFTはオープンソース・ソフトウェアを紹介するブログです。2021年07月16日で更新停止しました 世の中には似たようなソフトウェアが多数あっても、オープンソース・ソフトウェアの場合は開発するプログラミング言語によって別なものとすることができます。言語ごとに特性があるので、それを活かした開発が楽しめるでしょう。 今回紹介するのはRedraw、Redを使って作られたペイントアプリです。 Redrawの使い方 Redrawの全体像です。ブラシを選び、色や透明度、サイズなどを調整して描画します。 例えばこんな感じの作品ができあがります。 Redrawのブラシはどれも特徴があるので、慣れるまでは突然変な絵になってしまうかも知れません。ただし、それが味とも言えます。Redというプログラミング言語を学ぶ上でも面白い教材になると言えるでしょう。 RedrawはRed製のソフトウェア（ソースコー