8192px - みんなで共有する広大なキャンバス
MOONGIFTはオープンソース・ソフトウェアを紹介するブログです。2021年07月16日で更新停止しました リアルの世界で無限のキャンバスを提供するのは困難ですが、デジタルの世界では簡単です。そしてみんなでキャンバスをシェアしたら、どんな楽しい作品が生み出されるでしょうか。 そんな楽しさを垣間見せてくれるのが8192pxです。みんなでピクセルアートが楽しめる、そんなプラットフォームになります。 8192pxの使い方 現在のメインサイトの状態。これも一日経つと様変わりしていたりします。 キャンバスは広大で上下左右に動かせます。 ちょっとずつ変更してみました。どこが変わったか分かりますか。 8192pxではみんなが思い思いに作品を作り上げています。その様子がリアルタイムに共有されるので、徐々にイラストが書かれていく様子を見ていても面白いです。人の作品を壊すことを恐れず、どんどん新しい作品を書
mini.css - 小さくても多彩なUIを提供するスタイルシートフレームワーク MOONGIFT
CSSフレームワークはたくさん存在します。それぞれにコンセプトがあり、使いやすいものを選択するでしょう。特にUIパターンが多いものはデザイン的に統一感が出やすく、場当たり的に素材を探さずに済むので重宝します。 今回はそんな多数のUIを揃えたCSSフレームワーク、mini.cssを紹介します。 mini.cssの使い方 スクリーンショット多めで紹介します。まずはタイポグラフィ。 リスト。 画像。レスポンシブです。 グリッド。 レイアウト。 ヘッダーバー。 フッターにも。 フォーム。 テーブル。 左側固定のテーブルも作れます。 カード。 画像や動画を含めたカードも。 タブ。 テキストハイライト。 アラート。 ツールチップ。 プログレスバー。 画像を丸くしたり影をつけたり。 パンくず。 mini.cssはスタイルシートなのでJavaScriptとの連携（モーダルなど）はありませんが、それでも十分
OPUS - 企業のナレッジ管理システム
MOONGIFTはオープンソース・ソフトウェアを紹介するブログです。2021年07月16日で更新停止しました 企業においてナレッジを蓄積するのはとても大事なことです。個人に知識がたまるだけでなく、それを全員でシェアすることができれば業務の効率化や利益の増加に大きく貢献することでしょう。 そんなナレッジベースとして使ってみたいのがOPUSです。 OPUSの使い方 メイン画面です。基本的にはページとWikiで構成されます。 スペースを作って、その中で情報を蓄積します。 Wikiではリンクが作れませんでした。 ページです。基本的な表示は同じです。 OPUSではページとWikiを使ってナレッジベースを作っていきます。強力な権限管理があったり、お気に入り登録や検索機能もあります。日本語は文字化けしてしまいましたが、PDFやWordファイルへのエクスポート機能もあります。 OPUSはPHP製のソフトウ
Mondrian - WebベースのリッチなSVGエディタ
MOONGIFTはオープンソース・ソフトウェアを紹介するブログです。2021年07月16日で更新停止しました Web上でドローをしようとした場合、取り得る選択肢はSVGかCanvasになります。Canvasは埋め込まれるコンテンツがバイナリになってしまいますが、SVGであればテキストベースなのが利点になるでしょう。 そんなSVGコンテンツをWebベースで作成できるのがMondrianになります。 Mondrianの使い方 デモです。 テキストを追加します。 拡大表示です。 画像（PNG）で出力した例です。 SVGで出力しました。エラーが出てしまっています。 Mondrianは様々なオブジェクトをドローできます。レイヤー機能こそありませんが、色を変えたり線の太さを後から変えることも可能です。作成したコンテンツはシェアしたり、埋め込みもできます。 MondrianはCoffeeScript製の
mdpdf - スタイル設定が指定できるMarkdown to PDF
MOONGIFTはオープンソース・ソフトウェアを紹介するブログです。2021年07月16日で更新停止しました MarkdownはHTMLだけでなく、他のフォーマットに展開する際にも使える便利な記法です。よくあるのはPDFではないでしょうか。しかし殆ど装飾も行われないシンプルなPDFなので、業務や報告書で使うのはちょっと躊躇してしまいます。 そこで使ってみたいのがmdpdfです。スタイル設定などが可能なMarkdownからPDFへの変換ソフトウェアです。 mdpdfの使い方 変換例です。ヘッダーを追加しました。 2ページ目にもちゃんとヘッダーが表示されます。 こちらはスタイル設定を適用したものです。先ほどとはフォントが異なります。 別なスタイルシート。文字が大きすぎて被ってしまっていますが、修正すれば問題ないでしょう。 mdpdfではスタイル設定としてCSSが使えるのがポイントです。つまりM
Planck.js - JavaScript製、2D用物理エンジン MOONGIFT
Web向けにゲームを作ったり、ユーザの操作に合わせてオブジェクトが動くようにしたりするのに必要になるのが物理エンジンです。単に横滑りするのではなく、他のオブジェクトや重力の影響を計算することでよりリアルなゲームになります。 そこで使えるのがPlanck.jsです。2D向けの物理エンジンです。 Planck.jsの使い方 ビリヤードゲームの例。 ボールをはじき飛ばせます。 ピストン。 動きの履歴を残すこともできます。 引っ張るデモ。 Planck.jsには多数のデモがあります。落下したり、オブジェクト同士のぶつかり判定なども実装されています。ゲーム以外の分野においても利用できるはずです。よりリアルな動きを実現したい時にぜひ使ってみてください。 Planck.jsはJavaScript製のオープンソース・ソフトウェア（zlib/libpng License）です。 Planck.js - 2D
BigPicture - YouTubeやVimeoにも対応した画像/動画表示ライブラリ MOONGIFT
画像や動画は見せ方が大事です。単にリンクを貼って、クリックしたら画像だけが表示される…なんてのはよくありません。最近は画像の解像度が上がっているので、サムネイルと実際の写真とをうまく見せる必要があります。 今回紹介するBigPictureはWebベースの画像、動画表示ライブラリになります。 BigPictureの使い方 デモです。クリックでモーダル表示になります。 動画でも使えます。HTML5動画、YouTubeやVimeoにも対応しています。 サムネイルと実体の大きさが異なる場合。 画像がない場合にも対応してます。 動画は各動画共有サイトによるようです。 BigPictureを使えばYouTubeなどを単に埋め込むのではなく、サムネイル表示にしてクリックしてはじめて再生するようにしたり、サムネイル画像を並べて表示できるようになります。この手のライブラリは他にもありますが、動画にも対応して
Backgammon - Webベースのバックギャモン
バックギャモンというゲームを知っていますか。サイコロを振って、コマを自分の陣地まで移動させるゲームです。簡単なだけに奥が深く、非常にファンの多いゲームとなっています。 そんなバックギャモンをWeb上で、コンピュータ相手に楽しめるのがBackgammonです。 Backgammonの使い方 こちらがゲーム画面です。 サイコロを振ってゲームを進めます。 コマを取ったり、取られたり。 ゲームの終了判定がないようです…。 Backgammonのコンピュータは一定のルールに沿って進めています。そのルールさえ学び取れれば勝つのは難しくないかも知れません（筆者は勝てませんが）。さらに自分のアルゴリズムを追加して鍛えてみるのも面白そうです。 BackgammonはHTML5/JavaScript製のソフトウェア（ソースコードは公開されていますがライセンスは明記されていません）です。 デモ Hristija
Chessboardjs - JavaScriptで制御できるWebチェスボード
チェスは将棋に並んで人気がある、全世界で楽しまれているゲームです。それだけにプレイヤーも国内だけでなく世界中に存在します。むしろ海外発祥なのもあり、レベルが高いのは海外の人たちになるでしょう。 世界中の人たちとチェスを楽しもうと思ったらWebブラウザを使うのが一番手軽です。そんな時に使えるのがChessboardjsになります。 Chessboardjsの使い方 チェスボードを表示したところです。コマもちゃんと並んでいます。 コマの動きは自由にすることも、ルールに沿ったものにしかできないように縛ることもできます。 イベントも各種取れます。 こちらは自動で動いているデモです。ただしそんな強いわけではありません。 Chessboardjsをベースにすれば、学習エンジンと組み合わせてWeb上で一人でチェスを楽しめるようになったり、オンラインで遠隔地の人と競うこともできます。ベースさえあれば、後は
Slidium - MarkdownベースのスライドをGUIで作成
MOONGIFTはオープンソース・ソフトウェアを紹介するブログです。2021年07月16日で更新停止しました 最近Markdownを使ってスライドを作る方が増えています。テキストで作れるので手軽な一方、テキストベースなのでデザインにこだわれないのが欠点です。ビジュアルにこだわる場合は画像などを使わなければなりません。 そこで使ってみたいのがSlidiumです。Markdownベースながら、可視化にもこだわったスライド作成ソフトウェアです。 Slidiumの使い方 最初の画面です。テーマから選んだり、最近使ったスライドも確認できます。 作成画面です。 水平線を引くと新しいページを作れます。 さらにマインドマップも使えます。 グラフも各種サポートされています。 こんな組織図も。 テーブルは普通のMarkdownとして書けます。 SlidiumはMarkdownベースでスライドを作る際に、プレビ
MockFlowFont - デザインに使えるモックフォント
Webサイトやスマートフォンアプリのモックデザインを作る際にはアテの文字を用意するのが一般的です。あああ、といったような適当な文字です。しかしあまり良い感じに仕上がらないこともあります。 そこで使ってみたいのがMockFlowFontです。文字ではなく、単なる棒線のフォントです。 MockFlowFontの使い方 実際のフォントです。間があるタイプとないタイプがあります。 このフォントを使ってデザインを起こした例です（GitHubより）。イメージがわくでしょうか。 MockFlowFontを使うと文字の主張が押さえられるようになり、デザイン全体のバランスが良くなります。英語のようにスペース区切りでつながる言語もあれば、日本語のように連続するものもあります。使いやすい方を選んでデザインに使ってください。 MockFlowFontはOpen Font Licenseのオープンソース・ソフトウェ
Screenbar - 定期的にスクリーンショットを撮影&保存
モノができあがっていく過程というのはとても面白いものです。特にタイムラプスのような形で刻々と移り変わっていく様子が描かれると見ていてわくわくします。これはWebデザイン、システム開発などコンピュータ上でも変わりません。 今回はそんな時に使えそうな、定期的にスクリーンショットを撮ってくれるScreenbarを紹介します。 Screenbarの使い方 設定画面です。保存先と何秒ごとに保存するかの指定ができます。 後はメニューバーから開始するだけです。 Screenbarは終了するまで定期的にスクリーンショットを画像で保存し続けます。スクリーンショットはメイン画面のみとなっており、マルチディスプレイに対応していないようです。後はできあがった画像をffmpegなどでまとめてしまえば楽しい作品のできあがりです。 ScreenbarはmacOS用のオープンソース・ソフトウェア（MIT License）
jExcel - Webに埋め込んで使えるExcel風表計算
MOONGIFTはオープンソース・ソフトウェアを紹介するブログです。2021年07月16日で更新停止しました 業務システムなどで一覧表を表示する場合、主に2パターンあると考えます。一つは画面全体に表示する検索結果的な画面、もう一つはマスター管理など小さな表を幾つか並べる場合です。 今回紹介するjExcelはどちらかというと後者の、小さな表を埋め込み表示するのに便利なライブラリです。 jExcelの使い方 こんな感じに表示できます。 セルをクリックして編集もできます。 複数の表を埋め込むこともできます。 ソートも使えます。 入力値のフォーマットも指定できます。 カレンダー入力も。 ドロップダウンからの選択やチェックボックス入力。 データをJSONやCSVで取得できます。動いていないように見えましたが、関数式もサポートされているとのことです。 jExcelはとても軽量なライブラリで、プラグイン
Guetzli - Google製のJPEGエンコーダー
MOONGIFTはオープンソース・ソフトウェアを紹介するブログです。2021年07月16日で更新停止しました USのドラマでシリコンバレーというのがあります。彼らは圧縮技術をコアとしており、それによってGoogleまたはMicrosoftをモチーフにしているとおぼしき巨大企業と争います。圧縮技術というのはネットワークのトラフィックを大幅に減少させたり、世界全体のストレージ容量を低下させる大きな可能性を秘めています。 そんな中、Googleが開発した新しいJPEGエンコード技術がGuetzliです。 Guetzliの使い方 これは実物を見るのが早いでしょう。まず元。 こちらがGuetzli版。 見た目には差異は殆ど分かりません。しかしサイズは歴然としています。元ファイルが327KB、圧縮後が280KBです。85％になっています。 Guetzliは非常に高い圧縮率を誇りますが、欠点もあります。
box - ハマりすぎ注意。Webベースの2Dパズルゲーム MOONGIFT
もしこの記事を読むのが仕事中であれば、さっさと別なところに移動した方が良いでしょう。プライベートな時間で暇な時にぜひ読んで欲しいです。単純なゲームというのはそれくらい中毒性があるものです。 今回紹介するオープンソース・ソフトウェアはbox、Webベースの2Dゲームです。 boxの使い方 boxのゲーム画面です。WASDで移動してEで物体を持ちます。持った物体は別なところでEを押すと話します。赤いのは敵キャラクターで、彼らの補足範囲に入ると失敗となります。 ゴールまで移動すればクリアです。 丸はワープします。 実際やり方はとても簡単なのですぐに覚えられるはずです。倉庫番に似ていますが、敵がいることと物体を持って移動する点が異なります。ハマりすぎに注意してください。 boxはHTML5/JavaScript製のオープンソース・ソフトウェア（MIT License）です。 cristiandim
QOwnNotes - ownCloudと連携も可能なMarkdownエディタ
ノートアプリは一つ用意しておくと便利です。気がついた時にささっとメモを取っておけば、後で振り返ることもできます。頭の中で覚えておこうとしても忘れてしまうものなので、すぐにメモするのが大事なのです。 今回紹介するオープンソース・ソフトウェアはQOwnNotes、マルチプラットフォームで動作するノートアプリです。 QOwnNotesの使い方 最初に保存場所を指定します。 メイン画面です。左側にノートの一覧、右側がエディタになります。 新しいノートを書きます。 フルバージョン。タグやプレビューなども表示されます。 設定画面です。TodoはCalDAVサーバを使います。 QOwnNotesはローカルだけでも動きますが、ownCloudと連携させるのが良いようです。そうすればデータをクラウドに保存したり、カレンダーのデータを使ったTodo管理もできるようになります。 QOwnNotesはWindow
Sly - 上下左右のスクロールを便利にするJavaScriptライブラリ MOONGIFT
Webページの多くは縦長に作られています。縦方向のスクロールについてはホイールなどを使って簡単にできますが、それでもあまりに長いと操作が面倒です。さらに横向きのスクロールはストレスでしょう。 そこで使ってみたいのがSlyです。上下または左右など一方向でのスクロールナビゲーションが便利になるライブラリです。 Slyの使い方 横向きのスクロール例です。数字を選んだり、下にあるナビゲーションで移動ができます。 縦型もできます。 リストだけでなく文章などでも利用できます。 コンテンツを動的に追加する無限スクロールもサポートしています。 Slyを使えば上下または左右のスクロールに多数の機能が持たせられます。目次とその見出しへの移動に使ったり、カルーセルのような使い方も考えられるでしょう。アイディア次第で面白い使い方ができそうです。 SlyはJavaScript製のオープンソース・ソフトウェア（MIT
CanvasEffect.js - Canvasで画像にエフェクト MOONGIFT
HTML5のCanvasを使うと画像を取り込んで表示し、エフェクトを行うことができます。しかしCanvasの扱いは意外と面倒で、コードも多くなりがちです。そのためメンテナンス性が低くなってしまいます。 そこで使ってみたいのがCanvasEffect.jsです。画像を編集するための専用ライブラリとなっています。 CanvasEffect.jsの使い方 パラメータが様々にあるので、それを動かせば元画像にエフェクトがかかります。 セピアにしたり…。 グレースケールにも。 ノイズを増やしたり。 こんなカラフルな感じにも。 エフェクトはダイナミックに行えます。 画像をエフェクトするライブラリは多数ありますが、多くはアクションを指定する形となっています。CanvasEffect.jsは数値で割合を指定できるので、より細かな制御が可能です。明るさやコントラスト、ガンマ、輝度、ノイズなどエフェクトも多数揃
Shape Shifter - 異なるSVGに変化するアニメーションを生成
MOONGIFTはオープンソース・ソフトウェアを紹介するブログです。2021年07月16日で更新停止しました SVGとこれまでの画像バイナリと決定的に違う部分はなんと言ってもプログラムから操作しやすいということでしょう。アニメーションの定義などはSVG内でもできますが、より詳細なアニメーションはJavaScriptで制御できます。 そんなSVGを使って形状変化するアニメーションを定義できるのがShape Shifterです。 Shape Shifterの使い方 2つのボックスに対してSVGファイルを適用します。あまり複雑でないものがいいようです。 そしてプレビューを押すとアニメーションされます。 一例。マイナスがプラスに変わるアニメーション。 さらに変化点を変えることでアニメーションを若干変化させられます。 ハンバーガーメニューが矢印に変わるアニメーション。 Shape Shifterを使
ag-Grid - 業務要件の殆どを満たせそうなグリッドライブラリ MOONGIFT
業務システムなどをWebベースで作っていると求められるのがリッチなグリッド機能です。ヘッダの固定、フィルタリング、チェック、カラムの順番変更、一回あたりのデータ表示件数変更…挙げれば実にきりがありません。 そこで使ってみたいのがag-Gridです。ほぼこれでニーズを満たせるのではないかというくらいリッチなグリッド機能を提供できます。 ag-Gridの使い方 デモです。大量のデータが表示されています。画像も表示できたり、レーティング表示なども行えます。 表示項目はチェックボックスで絞り込めます。 ソートだってできます。 さらにカラムの順番入れ替えも。 更新もできます。真偽値はチェックで表示されていました。 さらにカラーテーマの変更。 絞り込みもできます。 チェックボックスでデータを選択。 ag-Gridでは業務システム要件のあるあるを大抵カバーしていると思われます。大量のデータを表示してもさ
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
