node-git-server - node製のカスタマイズできるGitサーバ
MOONGIFTはオープンソース・ソフトウェアを紹介するブログです。2021年07月16日で更新停止しました Gitリポジトリを管理するサービスやソフトウェアは多いですが、そのGit管理の仕組みを自分のサービスでも取り入れたりと思う方は多いはずです。そうした場合、Git操作の仕組みをすべてすべて自分でイチから実装しなければなりません。 しかしnode-git-serverを使えば幾分簡単になりそうです。node-git-serverはカスタマイズできるGitサーバです。 node-git-serverの使い方 node-git-serverの基本的なコードです。以下のコードではpush/fetchに対応しています。 const Server = require('node-git-server'); const repos = new Server(path.resolve(__dirna
Parcel - 高速さが売りのWebアプリケーションバンドラー
MOONGIFTはオープンソース・ソフトウェアを紹介するブログです。2021年07月16日で更新停止しました JavaScriptの周辺環境の進化は早く、一部はGulpと言われていたのがWebPackになったりして、どんどん新しい技術が出てきては廃れるといったことを繰り返しています。 さらにここで紹介するのは心苦しいのですがParcelを知っておきましょう。とても簡単に使えるWebアプリケーションバンドラーです。 Parcelの使い方 例えば index.html を次のように書きます。 <html> <body> <script src="./index.js"></script> </body> </html> そして同じ階層に index.js を置きます。もちろん import に対応しています。 // import another component import main fr
Marko - eBay製。サーバ/クライアント両方に対応したビューフレームワーク MOONGIFT
Reactが導入したVirtualDOMという概念はあっという間に他のフレームワークにも影響を及ぼしていきました。最近では Webコンポーネントにも関連して、小さなパッケージを組み合わせる方法が主流になっています。 今回紹介するMarkoもそんなフレームワークの一つです。特に高速な動作がポイントになっています。 Markoの使い方 Markoの例です。クラスとスタイル、そしてHTMLの3つを組み合わせます。 class { onCreate() { this.state = { count:0 }; } increment() { this.state.count++; } } style { .count { color:#09c; font-size:3em; } .example-button { font-size:1em; padding:0.5em; } } <div .cou
blocks.js - 複雑なデータフローの可視化 MOONGIFT
システムには何らかの入力があって、それが処理されて出力されます。処理は一段階に限らず、複数のステップを経ることもあります。さらに入力ソースが複数名こともあります。 そうした複雑なデータフローを表現するのに向いたライブラリがblocks.jsになります。 blocks.jsの使い方 メイン画面です。各ノードが線でつながっています。 ノードはドラッグできます。 メタデータの編集画面です。 線をつなぎ替えたり、ノードの削除もできます。 コンテクストメニューです。 blocks.jsを使うことでNode-Redのようなインタフェースであったり、Yahoo! Pipesのようなサービスを作ることもできるでしょう。汎用的なインタフェースなので、様々なデータフローをビジュアル化するのに使えるはずです。 blocks.jsはjQuery/JavaScript製のオープンソース・ソフトウェア（MIT Lic
Geist - 関連性に重点を置いた個人用ナレッジベース
MOONGIFTはオープンソース・ソフトウェアを紹介するブログです。2021年07月16日で更新停止しました 個人のナレッジはきちんと積み重ねていかなければなりません。日々のインプットを書きためておく場所を用意しておかないと、あっという間に頭の片隅から抜け落ちてしまいます。 そこで使ってみたいのがGeistです。個人のナレッジについて、関連性を用いて描けるソフトウェアです。 Geistの使い方 メイン画面です。主な機能はノート、マップ、そしてリンクです。 ノートはWYSIWYGで書けます。 そしてノートはノードとしてマップ上に表示します。 そして関連性をラインで表現します。 画像も追加できます。 Geistは特に各メモ（ノート）の関連性に重点を置いたソフトウェアになります。構造的に文書を書く際に、それらをすべて分けてしまって線でつないで表現するのは面白そうです。 Geistはnode/Ja
JS CMS - 管理画面が作り込まれた国産CMS
MOONGIFTはオープンソース・ソフトウェアを紹介するブログです。2021年07月16日で更新停止しました CMSは数多に存在しますが、それぞれ使い勝手が微妙に違います。それによって手に馴染む、馴染まないと感じることは多いでしょう。使ってみないと分かりませんが、そもそものコンセプトに現れていたりするものです。 今回紹介するJS CMSはずばり、デザイナー向けのCMSとなっています。また、国産とあって日本人にとって使いやすいでしょう。 JS CMSの使い方 ユーザ向けのトップページです。 デザインはシンプルですね。 こちらは管理画面のダッシュボードです。 サイトの編集画面です。見たまま、ユーザの画面が表示されます。 ブロックを選択すると編集できます。 テキスト編集の画面です。 挿入できる部品は下に表示されます。 画像ブロックも編集できます。 表組みの編集です。 表計算用にエクスポートもでき
Image Picker - 画像を選択する入力コンポーネント
画像が並んでいて、そこから選ぶようなインタフェースを作る場合、どういうものを想像するでしょうか。画像の下にチェックボックスを配置するのが簡単そうですが、直感的とは言いがたいUIです。 そこで使ってみたいのがImage Pickerです。画像をそのまま選択できるコンポーネントになっています。 Image Pickerの使い方 一例です。画像を選択すると枠が青くなります。 複数選択もできます。選択上限を設けることもできます。 ドロップダウンと連動させることもできます。 レイアウトは自由に変更できます。 Image Pickerは画像を選択肢として使うコンポーネントです。使い勝手としてはselectタグの選択肢やラジオボタン、チェックボックスと変わりません。しかしテキストよりも文字列の方が使いやすいケースもあるでしょう。 Image PickerはjQuery/JavaScript製のオープンソ
mofron - .NETやSwingのように画面デザインできるUIフレームワーク MOONGIFT
Webは表現力が高い一方、その高さ故にゼロから作ろうと思うと手間に感じてしまいます。デザインをあまり気にしない業務システムであっても、素のHTMLままでは使う気にならないでしょう。 そこで使ってみたいのがmofronです。.NETやSwingで作っているように、画面の設計をコードの中から行えるUIフレームワークです。 mofronの使い方 mofronの例です。ボタンを配置するコードです。 require('mofron'); let Button = require('mofron-comp-button'); // 一番単純な表示 new Button('test').visible(true); let btn = new Button('size'); btn.width(150); // 幅を150pxに設定 btn.visible(true); // 表示(bodyへ反映) b
fullPage.js - フルスクリーンスライダー MOONGIFT
最近のWebサイトでは一画面一コンテンツのページ構成が増えています。特にSPAやプロジェクトページなどで使われており、スクロールするとコンテンツ全体が切り替わります。Webページだけでなく、HTMLプレゼンテーションでも使えます。 そうした表示に使えるのがfullPage.jsです。アイディア次第で色々な使い方ができるでしょう。 fullPage.jsの使い方 実際に使っているところです。キーボード操作でできます。 fullPage.jsでは左右でコンテンツを切り替えたり、上下での移動もサポートしています。HTMLスライドにも使えますし、移動履歴の管理もできています。HTMLタグもシンプルでコンテンツが作りやすいです。 fullPage.jsはJavaScript製のオープンソース・ソフトウェア（MIT License）です。 fullPage.js One Page Scroll sec
Multi-Step-Form-Js - フォームをマルチステップに変換 MOONGIFT
入力フォームが長かった場合、幾つかのステップに分割することがあります。そうした時、都度サーバに飛ばす方式が選ばれることが多いですが、その度にデータの送信とレンダリングが行われて面倒です。 そこで使ってみたいのがMulti-Step-Form-Jsです。jQueryでフォームをマルチステップに変換してくれます。 Multi-Step-Form-Jsの使い方 デモの場合、3ステップになっています。 バリデーション機能もあります。 二番目のステップに進みました。 最後のステップになっています。 Multi-Step-Form-Jsは一つのフォームを複数のステップに変換しています。つまりサーバ側に送られるのは一度だけです。確認画面がないのが残念ですが、その部分はカスタマイズしても良さそうです。 Multi-Step-Form-JsはjQuery/JavaScript製のオープンソース・ソフトウェア
stacks-cli - 気になるWebサービスで何が使われているのか調査 MOONGIFT
イケてるWebサービスではどんなフレームワークやライブラリが使われているのか気になる人は多いでしょう。やはりトレンドのフレームワークを組み合わせているのか、はたまた意外と枯れた技術を使っているのか。 そんな調査ができるライブラリがstacks-cliです。気になるWebサービスで実行してみましょう。 stacks-cliの使い方 MOONGIFTの実行結果です。かなり高い確度で正解しています。 stacks-cliはHTTPサーバのヘッダーやレスポンス内容を解析して使われているであろうライブラリを判別しています。この辺りのことは解析すれば分かるということで、セキュリティを気にする方は隠せるように調整しても良さそうです。 stacks-cliはnode/JavaScript製のオープンソース・ソフトウェア（MIT License）です。 WeiChiaChang/stacks-cli: ?
adminMongo - WebベースのMongoDB管理
MOONGIFTはオープンソース・ソフトウェアを紹介するブログです。2021年07月16日で更新停止しました MongoDBはNoSQLのドキュメント型データベースとして最も有名な存在になっています。実際の開発でも使われるケースが増えているのではないでしょうか。そして開発している際に必要なのが管理画面です。 今回紹介するadminMongoはWebベースのMongoDB管理システムです。 adminMongoの使い方 ダッシュボードです。ここでデータの作成ができます。 ドキュメント毎のコレクション数、エクスポートができます。 データ一覧。 編集画面。 adminMongoはシンプルなUIでMongoDBの最低限の管理を提供します。本番運用では物足りないかも知れませんが、開発用途であれば十分な機能と言えるのではないでしょうか。Webベースなので、社内で一つ立てておけばみんなで使えるで便利です
Rich FileManager - Webベースのファイル管理
MOONGIFTはオープンソース・ソフトウェアを紹介するブログです。2021年07月16日で更新停止しました Webアプリケーションが増えていくと必要になるのが、OSの基本とも言えるファイル管理です。サーバ上のストレージに入ったファイルを閲覧したり、編集は別なWebアプリケーションなど利用法は様々に考えられます。 そんなファイル管理としてRich FileManagerを照会します。ファイルのプレビューもできる多機能なファイルマネージャです。 Rich FileManagerの使い方 ファイル一覧です。左側にフォルダツリーがあります。 画像はプレビューできます。 テキストは閲覧および編集ができます。 日本語ローカライズも行われています。 Rich FileManagerをサーバにインストールしておけば、ストレージの内容について編集やメンテナンスが容易になります。FTPなどのようにソフトウェ
Dawn - フロントエンド/node開発のビルドツール MOONGIFT
フロントエンド開発はどんどん進化しています。その結果として様々なツールを組み合わせなければならなくなったり、手順が増えてしまっています。これでは手軽に開発できなくなってしまいます。 そこで紹介したいのがDawnです。軽量なタスク管理を備えたフロントエンドの開発、ビルドツールです。 Dawnの使い方 使っている場面です。こちらはAPIサーバのフロントです。 こちらはフロントエンドです。二つのサーバが同時に立ち上がっています。 APIを作ったりすることもできます。 技術的にはWebPackなども使われており、独自技術で固まっている訳ではありません。しかしDawnを使うことで初期テンプレート生成やテスト、ビルドなどが一手にできます。複数タスクを同時に実行したり、ミドルウェアにも対応しており、幅広い開発に利用できそうです。 Dawnはnode/JavaScript製のオープンソース・ソフトウェア（
tlx-editor - フォーム入力に特化したWeb components
MOONGIFTはオープンソース・ソフトウェアを紹介するブログです。2021年07月16日で更新停止しました Web componentsは多くの可能性を持っています。Web標準ではまだまだ貧弱なUIも、Web componentsを使うことでリッチであったり、複雑なUIコンポーネントが生まれていくことでしょう。 今回紹介するtlx-editorはその一例です。入力系コンポーネントを一手に提供するライブラリになります。 tlx-editorの使い方 tlx-editorは tlx.bind で実行します。例えば次のようになります。 <body onload="tlx.bind({ name:'Joe', age:20, honorific:'Mx.', seatingPreferences:['aisle','exit'], optIn:true, tier:'gold',notes:''
Fengari - JavaScript製。Webブラウザ上で動くLua MOONGIFT
JavaScriptはWebブラウザ上で動作することが保証されている唯一のプログラミング言語ですが、好きではないという人も多いようです。プログラミング言語の選択肢はもっと幅広く存在して良いはずです。 Webブラウザ上であってもLuaを書きたい、という方はFengariを使ってみてはいかがでしょう。 Fengariの使い方 FengariはJavaScriptで作られたLua VMです。こんな感じに書けます。 local js = require "js" local window = js.global window:alert("Hello from Fengari!") もちろんprint文も使えます。 functionも使えます。sleepが使えるのも良いですね。 Fengariを使えばLua（もちろん制限はありますが）でWebブラウザ上で動作するプログラミングができます。GCはJa
tikzcd-editor - Web上で可換図式を描く
MOONGIFTはオープンソース・ソフトウェアを紹介するブログです。2021年07月16日で更新停止しました Webの表現力はCanvasやSVGによって大きく広がっています。しかし、それらを使いこなすにはプログラミングを駆使する必要があります。例えば、ちょっとした数式を埋め込むダメにプログラミングを行うのは面倒です。 そこで使ってみたいのが外部ライブラリです。今回は可換図式をWebベースで実現するtikzcd-editorを紹介します。 tikzcd-editorの使い方 可換図式というのは二つまたは複数の対象との関連性を図式化したものです。代数などの教科書でよく見たのではないでしょうか。 最初の表示です。 文字を書いて、そこに矢印を引きます。 線も様々な種類があります。 より複雑な図式も可能です。 できあがった図式はエクスポートできます。LaTeXに似ていますが、表現できませんでした。
ajsr-confirm - 豪華な確認ダイアログ
Webを作成する際にはWebブラウザが用意している標準のコンポーネントがよく使われます。しかし、その表示では満足できない人が多いのも確かです。そこでより使い勝手の良いデザインを追求し始めます。 今回はダイアログです。独自のダイアログを出したいと思ったらajsr-confirmを参考にしてみてください。 ajsr-confirmの使い方 よくあるBootstrap風。 こんなダイアログが！今まで見たことないサイズ、彩色です。 さらに何となくアラビアンなダイアログ。 サイバーな感じです。 Windows98風。 ajsr-confirmはとてもインパクトが強いので、同じようなテーマカラーになっていないと使いづらいでしょう。しかしajsr-confirmを参考にダイアログを独自で用意する手は面白そうです。jQueryで使えるのでカスタマイズも容易でしょう。 ajsr-confirmはjQuery
HEML - HTMLメール用のサブセット記法
MOONGIFTはオープンソース・ソフトウェアを紹介するブログです。2021年07月16日で更新停止しました 日本はかつてテキストメールばかり使われていましたが、ようやくHTMLメールが普及してきています。セキュリティ上の懸念も殆どなくなり、カラフルだったり装飾ができるというメリットに注目が集まっています。 そんなHTMLメールをすべてのデバイスに適切に配信できる形にしてくれる、それがHEMLです。 HEMLの使い方 HEMLはHTMLのサブセットのような記法です。 右側にあるのがごく基本的な形式です。 マーキーを流したりできます。 生成後のHTMLは右側のようになっており、ブラウザの互換性を維持できるようになっています。 カラムを用いるようなデザインも簡単に作れます。 HEMLの記法に沿って記述することで、各種ブラウザやスマートフォンアプリに対応したHTMLメールができるようになります。
accessibilityjs - JavaScriptでできるアクセシビリティチェック
MOONGIFTはオープンソース・ソフトウェアを紹介するブログです。2021年07月16日で更新停止しました Webが広くあまねく使われるようになったことで、アクセシビリティが重要視されるようになっています。スクリーンリーダー的なものにきっちりと対応するのも大事ですが、altやtitle要素を追加すると言った簡易的な対応もできます。 今回はJavaScriptでできるアクセシビリティチェック、accessibilityjsを紹介します。 accessibilityjsの使い方 accessibilityjsの実行です。以下の場合はbody以下をすべてチェックし、エラーのエレメントは赤い枠線を表示します。 accessibilityjs.scanForProblems(document.body, function (error) { error.element.style.outline
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
