blocks.js - 複雑なデータフローの可視化 MOONGIFT
システムには何らかの入力があって、それが処理されて出力されます。処理は一段階に限らず、複数のステップを経ることもあります。さらに入力ソースが複数名こともあります。 そうした複雑なデータフローを表現するのに向いたライブラリがblocks.jsになります。 blocks.jsの使い方 メイン画面です。各ノードが線でつながっています。 ノードはドラッグできます。 メタデータの編集画面です。 線をつなぎ替えたり、ノードの削除もできます。 コンテクストメニューです。 blocks.jsを使うことでNode-Redのようなインタフェースであったり、Yahoo! Pipesのようなサービスを作ることもできるでしょう。汎用的なインタフェースなので、様々なデータフローをビジュアル化するのに使えるはずです。 blocks.jsはjQuery/JavaScript製のオープンソース・ソフトウェア（MIT Lic
Treed - React製のツリービュー&エディタ
MOONGIFTはオープンソース・ソフトウェアを紹介するブログです。2021年07月16日で更新停止しました 一つのノードから枝葉を伸ばしていく、いわゆるツリービューは様々な場面で使えます。有名なところではマインドマップがありますが、階層構造を表すのにぴったりな仕組みです。 そんなツリービューを自由に組み込めるようにしたのがTreedです。React製なのも見逃せないポイントです。 Treedの使い方 デモです。左側は編集ができ、その結果が右側のツリービューに反映されます。 左側を開くと右にノードが追加されます。 ノードの追加や変更も可能です。 こんな感じにドリルダウンしていけます。 実際に操作しているところです。ノードの開閉、追加などを行っています。 Treedはマウス操作のほか、キーボードショートカットを使った操作にも対応しています。フォルダとファイル同士の表示やネットワーク図、階層構
jQuery-KingTable - 業務システムに使えそうなテーブルライブラリ MOONGIFT
Webベースで業務システムを構築した場合、必ず必要になるのが一覧表です。そして、そこにExcel並の機能が求められます。ソートであったり、フィルタリング、ページネーションが欲しいと要望が出るはずです。 それらを一から自作するのは大変です。そこで今回はjQuery-KingTableを紹介します。 jQuery-KingTableの使い方 jQuery-KingTableのデモです。ページネーション、検索、並び替えができます。 並び替えると小さなアイコンが出ます（今回はGreenの横にアイコンがあります）。 カラーテーマを変更しました。 検索するとヒットした部分がハイライトします。 表示するカラムを絞り込めます。 表示をテーブルではなくカードに変更しました。 さらにパネルにも。 フィルタリング条件の追加もできます。 jQuery-KingTableは多機能なので、業務要件によってはこれで十分
React Desktop - Reactを使ってMac OSX/Windowsアプリを開発 MOONGIFT
Reactへの注目がどんどん高まっています。Webのビューライブラリという枠を越えて、React Nativeによってスマートフォンアプリ開発にも使えるようになっています。特にコンセプトであるLearn once, run everywhere（一度覚えればどこでも動く）が素晴らしい考えと言えます。 そんなReactを次のターゲットとしてデスクトップでも動くようにしたのがReact Desktopです。Mac OSX/Windowsに対応しています。 React Desktopの使い方 React Desktopのデモです。Webでも表示できるのがすごいです。 コントロールもちゃんと動きます。 そしてWindows 10でも使えます。 フォームもまさにWindows 10といった感じです。 メニューを隠すこともできます。 ElectronはHTML5を使ってデスクトップアプリを作ることがで
GoTTY - ターミナル操作をWebアプリ化
MOONGIFTはオープンソース・ソフトウェアを紹介するブログです。2021年07月16日で更新停止しました 勉強会の発表などでターミナルを使ってデモを行うことがあります。コマンドの入力は人それぞれ違ったりして見ているだけでも勉強になります。そう、ターミナル操作はコンテンツとして非常に有益です。 そんなターミナル操作をWebアプリケーションにしてしまおうというのがGoTTYです。意味が分からないかも知れませんが、見れば分かるはずです。 GoTTYの使い方 Mac OSXでHomebrewを使うならインストールは簡単です。 $ brew tap yudai/gotty $ brew install gotty これでgottyコマンドが使えるようになります。例えば gotty top を実行します。そうするとこんな感じでtopコマンドの結果が見られるようになります。 さらに -w オプション
React Lessons - Reactの使い方を学ぼう
MOONGIFTはオープンソース・ソフトウェアを紹介するブログです。2021年07月16日で更新停止しました プログラミング言語やフレームワークの学習は実際に手を動かして自分でコードを書いてみるのが一番です。とはいえ、ゼロから自分ではじめるのは難しく、本を買ったりWebサイトでチュートリアルを読んだりするかと思います。 今回はReactを学ぶためのチュートリアルソフトウェア、React Lessonsを紹介します。React Lessons自体、Reactで作られているのが特徴です。 React Lessonsの使い方 React Lessonsは2画面構成になっていて、左側に説明、右側がコーディング部となっています。 コードはShift+Enterで実行できます。さらにエディットモードにすることでチュートリアルの文章を編集できます。 React Lessonsは5ページ程度しかなく、学習
Screiji – JSON Schemaを使ってサンプルの値を出力
MOONGIFTはオープンソース・ソフトウェアを紹介するブログです。2021年07月16日で更新停止しました Web APIが多く使われるようになると、その品質が求められるようになります。様々な要素があるでしょうが、まず大きいのはドキュメント通りに作られるかどうかの確認でしょう。そのために使えるのがJSON Schemaです。 XMLでもSchemaはありましたが、JSONでもついにSchemaが必要になるかも知れません。そんなJSON Schemaを使って値のサンプルだけを抜き出せるのがScreijiです。 Screijiの使い方 ScreijiはRubygemsを使ってインストールします。 $ gem install screiji インストールしたらJSON Schemaを使って試してみます。今回は次のような内容です。 { "$schema": "http://json-schema
Breakouts - 各種ゲームフレームワークでブロック崩しを実装 MOONGIFT
今は数多くのフレームワークが存在します。それぞれ開発が効率化したり、作りたいものが素早く作れるようになるかも知れませんが、コード量やメンテナンス性、実行速度など様々な点を加味して選択する必要があります。 そのためには同じ種類のゲームを異なるフレームワークで作ってみるのが良いでしょう。TodoMVC という有名な取り組みがありますが、今回はそのゲーム版とも言えるBreakoutsを紹介します Breakoutsの使い方 Breakoutsはいわゆるブロック崩しゲームを作成しています。 操作はマウスでバーを左右に動かすくらいです。アイテムはボールが増えたり、バーが短くなるものになります。 Breakoutsでは以下のフレームワークでブロック崩しが遊べます。 Crafty CreateJS FriGame Frozen Impact KiwiJS Lime Melon Phaser Platyp
jQuery.my·UI/データを2 wayで同期するjQueryライブラリ MOONGIFT
JavaScriptでUIを作っている場合に問題になるのがDOM操作です。idで指定したり、あるタグの中のHTMLを操作したりするのが非常に面倒です。一カ所で忘れた結果、全体の表示がおかしくなるなんてことも多々あります。 そこでReactのように実際の描画を気にせずに画面を作っていけるライブラリに注目が集まっています。今回紹介するjQuery.myはデータとHTMLを同期する形で操作できるライブラリです。 jQuery.myの使い方 jQuery.myの基本的な使い方です。JSONデータとUIが連動しており、HTML側の値を変更すると、それがJSONデータに反映されます。 Canvasでも使えます。動かすと値が変化しているのが分かります。 こういったリストにも使えます。表示をフィルタリングしたり、並び替えるのに使えます。 インクリメンタルな検索も行えます。 JSONデータとUIが同期しなが
Scroller - DOM/Canvas対応のスクロール&ズームライブラリ MOONGIFT
Googleマップをはじめて操作した時の驚きは今も覚えています。マウスでドラッグして無制限に動かせたり、マウススクロールでズームイン、ズームアウトさせることができました。この凄さに驚いた開発者がこぞって同じような操作ができるライブラリを開発しました。 Scrollerはその一つの試みで、HTMLに加えてCanvasでもズームイン、ズームアウト操作ができるライブラリです。 Scrollerの使い方 こちらはDOM版。左側の四角の範囲でスクロールしたり、拡大/縮小ができます。 こちらがめいっぱい縮小したところ。 縮小すると文字がぼやけています。 拡大しても文字がぼやけています。 Canvas版。こちらはくっきりと表示されています。 パンしてもくっきり。 Scrollerはズームイン/ズームアウトの他、スクロールができます。さらにXまたはY軸方向のみに固定したり、スナップを有効にしてグリッドに合
uBlock·快適なブラウジングを。オープンソースのアドブロッカー MOONGIFT
Webブラウザで広告を非表示にするライブラリとしてAdBlockが知られていますが、契約した企業の広告は表示するなどとあまり良い噂を聞かなくなっています。また、アドブロックを入れると表示速度が速くなるはずが、AdBlockは遅くなるとさえ言われています。 そこで作られはじめたのがuBlockです。オープンソースでシンプルなアドブロッカーです。 uBlockの使い方 uBlockはChrome ウェブストアで配信されています。 入れる前。 入れた後。すっきり！ uBlockはAdSenseはもちろん、MOONGIFTの独自の仕組みであるサイドバー部分においても非表示にしてくれるなど独自の広告判定エンジンがあるようです。uBlockを入れておくと表示が高速化されたり、不用意なトラッキングを防げるなど、Webブラウジングが快適になるのではないでしょうか。 uBlockはGoogle Chrome
DevOOPS - 多数のパターンを用意したBootstrap管理画面
デザインでシステムの品質が決まるわけではありません。しかし、それでも全くデザインされていないシステムよりも見た目が整っている方が安心して使えるでしょう。それは管理画面でも同様です。 通常、管理画面は利用者が限定的なため、デザインが適当になってしまいます。そんな寂しい管理画面もDevOOPSを使えば一気に見た目が向上するでしょう。 DevOOPSの使い方 DevOOPSには多くのテンプレートが用意されています。これらを組み合わせるだけで格好良い管理画面ができあがりそうです。Bootstrapベースなので、カスタマイズもそれほど難しくはないと思います。 DevOOPSはHTML5/JavaScript製、GPL v3のオープンソース・ソフトウェアです。 devoopsme/devoops
StyleCI - PHPのコーディングスタイルをチェック
CI、つまり継続的インテグレーションは何もコードのデバッグにだけ適用されるものではありません。自動的に、かつ継続的に何らかのチェックする仕組みを作れればCIになりえるでしょう。 StyleCIもその一つと言えます。StyleCIがチェックするのはPHPのコーディングスタイルになります。 StyleCIの使い方 極端に言えばStyleCIでエラーがあってもシステム上のバグがある訳ではありません。しかしコーディング規約に沿っていない記述はバグを生む可能性が高くなります。窮屈なコーディングスタイルにする必要はありませんが、PHPのPEARのようにライブラリのコーディング規約がある場合は、それに沿ってチェックする仕組みがあると便利でしょう。 StyleCIはPHP製、MIT Licenseのオープンソース・ソフトウェアです。 StyleCI - The PHP Coding Style Conti
Riot – Reactライクな軽量UIライブラリ
MOONGIFTはオープンソース・ソフトウェアを紹介するブログです。2021年07月16日で更新停止しました Facebookが開発したReactはとてもユニークなライブラリです。カスタムエレメントやVirtual DOMなど便利な機能が備わっています。慣れると手放せないという方も多いのではないでしょうか。 そんなReact風の軽量UIライブラリがRiotです。他の同様なライブラリに比べて格段に小さく、それでいて十分な機能を備えています。 Riotの使い方 例えば以下のようなコードがサンプルになっています。 <todo> <h3>{ opts.title }</h3> <ul> <li each={ items }> <label class={ completed: done }> <input type="checkbox" checked={ done } onclick={ par
fake2db - 各種データベースに対応したダミーデータジェネレータ MOONGIFT
システム開発を行っているときにダミーのデータが欲しくなることは多々あります。そんな時に本番データをコピーして使うのは大きな問題につながる可能性があるので決してしてはいけません。電話番号やメールアドレスなどを置き換える作業が逆に手間になる場合もあります。 そこで使ってみたいのがダミーデータのジェネレータです。今回はPython製のfake2dbを紹介します。 fake2dbの使い方 fake2dbはSQLite、PostgreSQL、MySQLそしてMongoDBに対応しています。インストールはpipでできます。 pip install fake2db インストールしたらfake2dbコマンドでデータベースに直接データを流し込めます。 fake2db --rows 200 --db sqlite # SQLiteの場合 fake2db --rows 1500 --db postgresql
Interstellar – 宇宙空間を漂ってみよう
MOONGIFTはオープンソース・ソフトウェアを紹介するブログです。2021年07月16日で更新停止しました VR（仮想現実）デバイスが発達するのにつれて仮想空間でどこでも旅ができるようになっています。知らない海外の風景を見ることもできますし、海の中を漂うこともできます。映像さえあればどこだっていけるのです。 それは何も地球だけではありません。宇宙だっていけるようになるでしょう。そんな未来を感じさせてくれるのがInterstellarです。 Interstellarの使い方 InterstellarはWebGLで作られています。 InterstellarはWebブラウザいっぱいに広がって表示されます。VRデバイスに対応していませんが、改造することはできるでしょう。そうすれば目の前に広がる宇宙空間を自由に旅できてしまうかも知れません。 InterstellarはHTML5/JavaScrip
nightrain - PHP+WebでGUIアプリケーション開発 MOONGIFT
各種プログラミング言語ではGUIアプリケーションを開発するための機能が提供されています。その多くはGtkを使っていたりするのですが、それを使ってアプリケーションがどんどん作られているという話は聞かれません。 しかしnode-webkitのような存在はサーバサイドのスクリプト言語にとって強力な後押しになるかも知れません。同様の組み合わせをPHPで実現するのがnightrainです。 nightrainの使い方 Mac OSXアプリの例。.appとして提供されています。 アプリの内容。index.phpが呼ばれるようになっています。 nightrainはPHP/HTML/JavaScript/CSSをアプリのガワでラッピングするソフトウェアです。Windows/Mac OSX/Linux向けにバイナリを提供します。PHPの実行エンジンとHTTPサーバを内包し、Web技術だけで作れるようになって
Livestreamer·ライブストリーミングを動画プレイヤーで再生 MOONGIFT
最近オンラインでライブストリーミングを提供するサービスが増えています。UStreamが有名でしたが、最近ではYouTubeやDailymotionが対応したり、Twitch、Livestreamといったサービスもライブストリームを提供しています。 ストリーミングで見るのは良いのですが、Webブラウザでしか見られないのが面倒という方は多いかも知れません。そこで使ってみて欲しいのがLivestreamerです。 Livestreamerの使い方 使い方は簡単です。例えばこんな感じでコマンドを実行します。 livestreamer twitch.tv/day9tv best [cli][info] Found matching plugin twitch for URL twitch.tv/day9tv [cli][info] Opening stream: source [cli][info]
ThView.js - Oculusでも楽しめる上下左右に視点変更できるイメージビューワー MOONGIFT
写真を撮影するデバイスは増えていますが、見せ方はまだまだではないでしょうか。単純に一覧表示しただけでは面白みがありませんし、写真は画質がどんどん上がっており、一枚一枚の見せ方にもこだわりが必要です。 今回紹介するThView.jsはWebブラウザで楽しめる画像ビューワーですが、さらにOculusのようなVRデバイスだともっと楽しめそうなソフトウェアです。 ThView.jsの使い方 デスクトップからも見られますが、スマートフォンやタブレットからが面白いと思います。 OculusやGoogleのCardboardで見ると面白そうです。 一枚の写真版もあります。左右はもちろん上下にも視点が変えられます。 向いている方向に合わせて動きます。 ThView.jsはRICOH THETAのような360度視野を変更できるビューワーとなっています。マウスドラッグによる視点移動、ホイールによるズームインと
Web2Executable·node-webkitアプリをマルチプラットフォームでネイティブ化 MOONGIFT
WindowsやMac OSX、Linuxに対応したGUIアプリケーションを開発してみたいと思いつつもWeb技術では面倒そうと思ってしまっていませんか。node-webkitを使う手もありますが、ランタイムが必要だったりして手控えてしまう人もいるでしょう。 そんな方に使ってみて欲しいのがWeb2Executable、Webアプリケーションをそのままラッピングして実行ファイル化するソフトウェアです。 Web2Executableの使い方 メイン画面です。 必要な項目を選択、入力します。Windows版ながらMac OSX向けの実行ファイルを作れる点も注目です。また、nodeのバージョンを指定する仕組みになっていますので、サーバサイドが必要な場合にはこれが使えるでしょう。 実行ファイル生成中。 ファイル構成。幾つかDLLがありますが割合シンプルです。 実行結果。内容がないのであれですが、普通の
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
