トランプゲームを作りたくなる。SVGで書かれたトランプ·SVG-cards MOONGIFT
SVG-cardsはトランプをSVGでデザインしたソフトウェア。 SVG-cardsはSVG製のオープンソース・ソフトウェア。コンピュータ上でできるゲームを考えたとき、誰でも簡単にできて分かりやすいのがトランプではないだろうか。古今東西、誰もが知っているし、できる遊びも多数ある。Windowsではソリティアはとても人気のあるゲームだ。 トランプ！ そんなトランプゲームを開発する際に、一つ一つのカードについて画像で作成していくのはとても大変であるし、プログラムから使う時の相性もあまり良くない。そこで使ってみたいのがSVG-cardsだ。 SVG-cardsはトランプの画像をSVGで作成したファイルだ。ハート、ダイヤ、クローバー、スペードの四種、1〜10までの数字とJQKの絵札、さらにジョーカーとトランプの裏画像とすべてまとめて一つのSVG画像になっている。SVGだからいくら拡大しても線が乱れ
Joy - GoのコードをJavaScriptに変換
MOONGIFTはオープンソース・ソフトウェアを紹介するブログです。2021年07月16日で更新停止しました JavaScriptを嫌う方は一定層います。スクリプト言語なので型がなかったり、処理が非同期な部分があったりすることに起因するようです。サーバサイドを別言語で書いていたりすると、Webブラウザ向けだけJavaScriptを使わないといけないという制約も嫌がられます。 サーバサイドをGoで書いているのであれば使ってみたいのがJoyです。GoをJavaScriptに変換するライブラリです。 Joyの使い方 最も簡単なコードです。 package main func main() { println("Joy to the world!") } これを変換すると次のようになります。多少冗長的な部分もありますが、それほど酷くないコードです。 $ joy main.go ;(function
iTunes CLI - iTunesをCLIで操作
MOONGIFTはオープンソース・ソフトウェアを紹介するブログです。2021年07月16日で更新停止しました iPhone、iPadが流行っているので、iTunesを共に使っている方は多いでしょう。しかし、機能が多すぎて動きがもっさりしていたり、巨大なUIを扱いたくないと思っている人もいるはずです。 そんな方にお勧めなのがiTunes CLIです。iTunesをCUIから操作できます。 iTunes CLIの使い方 iTunes CLIではplay/pauseなどを使って音楽の再生、停止を操作できます。 $ itunes play $ itunes pause さらにnextで次の曲に移動したり、ボリュームの変更もできます。 $ itunes next $ itunes vol 10 $ itunes vol 20 iTunes CLIはローカルにあるiTunesはもちろん、メディアサーバ
Broxy - Go製のHTTP/HTTPSプロキシ MOONGIFT
開発時にプロキシはよく使います。Web APIとどんな通信をしているかは、実際のネットワークを見てみるのが一番確かです。入っているはずの認証情報が入っていなかったり、URLが異なっているのに気付くのにもプロキシが使えます。 今回紹介するBroxyはHTTP/HTTPS両方に使えるプロキシソフトウェアです。 Broxyの使い方 設定画面です。独自のSSL証明書が出力できるので、これをPC側で読み込み、信頼しておく必要があります。 そうするとWebブラウザ（またはPC）の通信がすべて見られるようになります。 リクエストとレスポンス、両方が監視できます。 フィルターを使って絞り込みもできます。 個人的にはCharlesを使っていますが、簡易的なものであればBroxyで十分かも知れません。プロキシ設定さえ行えばCLIであったり、自作のソフトウェアなどでも利用可能です。 BroxyはGo製のオープン
pet - Go製のCUI向けスニペット管理
MOONGIFTはオープンソース・ソフトウェアを紹介するブログです。2021年07月16日で更新停止しました 開発者であればスニペットの便利さはよく知っているでしょう。それは何もプログラミングだけに限らず、サーバ管理でも役に立ちます。よく使うスクリプトを登録しておくと作業が簡便化します。エイリアスでもできますが、長いものは管理しづらいでしょう。 そこで使ってみたいのがpetです。コマンドライン向けのスニペット管理です。 petの使い方 新しいスニペットを登録する場合はnewを使います。 $ pet new Command> ping www.moongift.jp Description> Send ping to MOONGIFT 後は登録済みの一覧から探してコマンドを実行できます。 一覧はテキストファイルで管理されていますのでメンテナンスも簡単です。 petはサーバで実行するコマンドを
gosimimg - 画像が似ているかチェック
MOONGIFTはオープンソース・ソフトウェアを紹介するブログです。2021年07月16日で更新停止しました Googleでは検索した際に「もしかして」と出ることがあります。多少の打ち間違いであったり、文字が繋がっていても良い感じに分割して検索してくれます。しかしバイナリデータの場合はそう簡単ではありません。 今回紹介するgosimimgは画像同士が似ているかどうかを判別してくれるソフトウェアになります。 gosimimgの使い方 gosimimgの実行例です。以下は似ていないと判断された場合です。 $ gosimimg same1.jpg sim1_1.jpg success to load images not simmilar !! 似ている場合は以下のように出ます。 gosimimg sim1_1.jpg sim1_2.jpg simmilar !! リポジトリ内の testdat
csvq - CSVをデータベースのように操作する
MOONGIFTはオープンソース・ソフトウェアを紹介するブログです。2021年07月16日で更新停止しました レトロなファイルフォーマットと思っていてもまだまだ職場では使われているのがCSVです。システムからもCSV出力するものがまだまだあるはずです。CSVといえばデータがひたすら並んでおり、データの抽出も面倒です。 そこで使ってみたいのがcsvqです。コマンドラインでCSVファイルをまるでデータベースのようにデータ抽出できます。 csvqの使い方 普通にSQLを書いてデータ抽出できます。 $ csvq 'select * from `test.csv` where column1 > 1' +---------+---------+ | column1 | column2 | +---------+---------+ | 2 | str2 | | 3 | str3 | +-------
mdr - ターミナル用のMarkdownビューワー
MOONGIFTはオープンソース・ソフトウェアを紹介するブログです。2021年07月16日で更新停止しました Markdownは閲覧時、専用のビューワーを通して見ることが多いかと思います。素のままでも可読性に優れたフォーマットとはいえど、ビューワーを使った方が見やすいのは確かです。 普段ターミナルでMarkdownファイルを閲覧する際にcatやlessを使っていた方は、mdrを使ってみましょう。 mdrの使い方 デモです。画像も一部再現されています。 テーブルもちゃんと表示されます。 mdrは文字の色分け、画像の表示、テーブルの表示など細かくMarkdownファイルが見やすくなる工夫がされています。使い方もMarkdownファイルを引数に渡すだけで簡単です。あらかじめインストールしておくと使い勝手が良さそうです。 mdrはGo製のオープンソース・ソフトウェア（MIT License）です。
Wails - GoとWeb技術でデスクトップアプリケーション開発
Electronはnodeを使ってJavaScriptでデスクトップアプリケーションを開発できます。UI部分は致し方ないとしても、デスクトップ側の機能については別な言語を使いたいと言う方もいるのではないでしょうか。 もしあなたがGoが好きなのであれば、Wailsを使ってみましょう。GoとWebテクノロジーでデスクトップアプリケーションが開発できます。 Wailsの使い方 Wailsのサンプルコードです。JavaScriptファイルを読み込んで、GUIアプリになります。 package main import ( "github.com/leaanthony/mewn" "github.com/wailsapp/wails" ) func basic() string { return "Hello World!" } func main() { js := mewn.String("./f
gopass - ターミナル用のパスワード管理
MOONGIFTはオープンソース・ソフトウェアを紹介するブログです。2021年07月16日で更新停止しました 今どき、パスワード管理をしていない開発者はほぼいないでしょう。多くの場合、GUIアプリケーションであったり、スマートフォンアプリで、サーバにログインしながら使えるものではありません。 ターミナルを使っていてもパスワードを入力する機会はあります。そこで使ってみたいのがgopassです。 gopassの使い方 gopassで新しいログイン情報を追加します。パスワードジェネレータもあります。 $ gopass new => Creating Website login [1] URL []: https://www.moongift.jp/ [2] Login []: root [3] Generate Password? [Y/n/q]: Y [a] Cryptic Password?
Vugu - Go言語でVueのようにWebアプリケーション（WASMで）が開発できるフレームワーク MOONGIFT
これは来るんじゃないだろうか…。 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
Tone.js - Web上で音を奏でるためのフレームワーク MOONGIFT
Web Audio APIによって、Webブラウザ上で音楽を奏でられるようになりましたが、このAPIはかなり低レベルなものとなっています。何でもできますが、すべて自分で実装しなければなりません。そのため、なかなか普及していません。 そこで使ってみたいのがフレームワークになるライブラリです。今回はTone.jsを紹介します。 Tone.jsの使い方 Tone.jsのコード例です。 var synth = new Tone.FMSynth().toMaster() //schedule a series of notes to play as soon as the page loads synth.triggerAttackRelease('C4', '4n', '8n') synth.triggerAttackRelease('E4', '8n', Tone.Time('4n') + To
Aperture - nodeを使ってコマンドラインでスクリーンキャプチャ MOONGIFT
コンピュータの操作を記録するソフトウェアは幾つもあります。昔はあまり選択肢がなかったですが、今ではOS標準のソフトウェアでレコーディングできたりします。その多くのソフトウェアはGUIで、マウス操作を使って録画しなければなりません。 もっとプログラマブルにレコーディングをしたければApertureを使ってみましょう。コマンドラインで呼び出せるスクリーンレコーダーです。 Apertureの使い方 実際に録画された内容をアニメーションGIFにしたものです。 ApertureはMPEG4のファイルとして保存されます。FFMPEGで録画した場合に比べて1/3以下の負荷で済むのが利点とのことです。軽量ならば長時間の録画にもきっと耐えられるでしょう。録画する大きさ、場所などもコードで指定できるので、常に決まった場所を録画すると言った時に便利そうです。 Apertureはnode/JavaScript製の
org.js - Web上でorg-mode MOONGIFT
Emacsをメインで使っていた頃にはメモ環境としてorg-modeを使っていました。覚えることは多いのですが、一旦慣れてしまうと一つのテキストにすべて記述できる環境は便利でした。キーボードショートカットで様々な操作ができるのも良かったです。 そんなorg-modeを懐かしむ人に贈りたいソフトウェアがorg.jsです。JavaScriptで作られたorg-modeコンバータです。 org.jsの使い方 デモです。右側の小さい枠に元テキストが、メインウィンドウにHTMLへの展開結果が表示されています。 テキストの編集結果は即時反映されます。 コードのハイライトやテーブル表現も行われています。 ラベルなどもあり、HTML上でも見やすいです。 org.jsのデモはちょっと重たく、このままでは使いづらいかも知れません。org.jsとクラウドストレージが合わされば、org-modeのメモ環境も作れるで
anime.js - 軽量、多機能なアニメーションライブラリ MOONGIFT
Webの表現力が向上しているのを実感できるものの一つにアニメーションが挙げられます。これまではFlashであったりJavaScriptで無理矢理DOMを動かしていましたが、CSS3やSVGによってスムーズなアニメーションが実現できています。とは言え、アニメーションを作るのは大変です。 今回は軽量なアニメーションライブラリ、anime.jsを紹介します。 anime.jsについて デモを紹介します。まずはHTMLタグによるアニメーション。 こちらはSVGを動的に書き換えてアニメーションさせています。 こちらもHTMLを書き換えています。レスポンシブで、ウィンドウ幅によって描かれ方が変わるのが面白いです。 ログインフォームにアニメーション。 文字が落ちてくるアニメーション。 スクロール連動型アニメーション。 有機的なアニメーション。 スライダーと画像を組み合わせたデモ。 テキストアニメーション
Path Slider - SVGをJavaScriptでアニメーション
MOONGIFTはオープンソース・ソフトウェアを紹介するブログです。2021年07月16日で更新停止しました SVGの良いところはベクターベースなので縮小、または拡大しても綺麗なまま表現できること、そして一般的に画像よりも軽量ということです。さらにJavaScriptとの親和性も高いのが開発者にとって嬉しいことです。 とはいえ、SVGに対して高度な操作を行うのは大変です。すでにある、例えば今回紹介するPath Sliderのようなライブラリを活用するのが良いでしょう。 Path Sliderの使い方 一例です。 クリックするとアイコンがアニメーションしながら動きます。 別な例です。 より実用的なデモです。スライドが滑らかです。 Path Sliderだけですべての表現ができるとは思えませんので、JavaScript側でも多少の設定は必要でしょう。しかし、こういったダイナミックな表現を行おう
OpenCV.js WASM Web Worker Webpack Demo - WebAssebmlyによるOpenCV.js実装デモ MOONGIFT
Web標準の進化は速く、どんどん新しい技術が出てきます。さらに、それらを使った開発を容易にするフレームワークやビルドライブラリも次々とトレンドが変わります。正直、ついていくのが大変な状況です。 しかしそんな中だからこそ開発者は果敢にトライしていかなければなりません。今こそ試し、知見をためられるチャンスと言えるでしょう。今回はそんなデモの一つとしてOpenCV.js WASM Web Worker Webpack Demoを紹介します。 OpenCV.js WASM Web Worker Webpack Demoの使い方 OpenCV.jsを使って顔認識しています。 利用しているデモです。追従性は悪くなさそうです。 OpenCV.js WASM Web Worker Webpack DemoはOpenCVをJavaScript化したOpenCV.jsをWebAssemblyにすることで高速化
Vue-CRM - Vueを使ったCRMテンプレート
社内システムはバックオフィス向け、または営業向けのシステムになります。営業向けのシステムとして最も有名なのはCRMでしょう。顧客との関係性を向上させることによって、よりきめ細かいフォローアップや売り上げ増につなげられるようになります。 そんなCRMを自社開発するといった場合に使えそうなVueテンプレートがVue-CRMです。 Vue-CRMの使い方 社内システムなので最初に認証があります。 ダッシュボードです。 注文一覧。 注文の編集画面。 顧客一覧。 顧客情報編集画面。 商品一覧。 商品編集画面。 アバウト画面。 Vue-CRMはあくまでもモックなので、これでシステムが動くわけではありません。後は内部的なデータを提供すればCRMとして動作します。CRMの基本的な画面は用意されていますので、自社システムを構築する基礎としていいのではないでしょうか。VueベースなのでAPIを作ることでシステ
Raneto - Markdownベースのナレッジベース MOONGIFT
MOONGIFTはオープンソース・ソフトウェアを紹介するブログです。2021年07月16日で更新停止しました 開発者向けのサービスを提供する場合、ドキュメントは必須と言えます。しかも見やすく、分かりやすいドキュメントになっていなければなりません。それでいて、メンテナンスしやすいなど条件が様々にあります。 今回紹介するRanetoはMarkdownベースのナレッジベースになります。社外向けのみならず、社内向けにも使えそうなソフトウェアです。 Ranetoの使い方 インデックスです。カテゴライズされているので分かりやすいです。 ドキュメント表示画面です。左側にメニューが表示されます。 ハイライトなどもあります。 RanetoはMarkdown記法で文書を記述して、Webブラウザ向けに表示されるソフトウェアです。インデックスを見る限り、構造化されたドキュメントを書くのに向いていそうです。FAQで
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Prismarine Web Client - ブラウザで動くマインクラフトクライアント MOONGIFT