graphqlviz - GraphQLのスキーマを可視化 MOONGIFT
GraphQLはデータ構造がスキーマとして定義されています。それらを読み解くことで、あらかじめデータ構造を把握してクエリを投げられるようになっています。しかしJSONから内容を正しく見極めるのはなかなか難しいでしょう。 そこで使ってみたいのがgraphqlvizです。GraphQLの構造を画像などで可視化してくれます。 graphqlvizの使い方 とあるサーバの例。 これはかなり複雑な例ですが、モデル同士のつながりがビジュアル化されており、全体の構造が把握できます。また、モデル自体の構造も分かるのでどういったフィールドからデータを取り出せば良いかも分かりやすいでしょう。GraphQLへのクエリを書く際に用意しておくと便利そうです。 graphqlvizはnode/JavaScript製のオープンソース・ソフトウェア（MIT License）です。 sheerun/graphqlviz:
Docbase - Markdownから生成する開発者向けドキュメント
MOONGIFTはオープンソース・ソフトウェアを紹介するブログです。2021年07月16日で更新停止しました 開発者向けのドキュメントはDX（Developer Experience。開発者体験）を語る上で欠かせない存在です。ドキュメントが間違っているのはもっての外ですが、さらに可読性が高かったり、機能面においても体験を向上できる要素があります。 そんな中、メンテナンスのしやすさもまた大事な要素になります。今回はMarkdownファイルをベースにしたドキュメントシステム、Docbaseを紹介します。 Docbaseの使い方 利用例です。トップページのデザインも格好良いです。 ドキュメント詳細です。右側に目次、中央にコンテンツが表示されます。 コードは文字が大きく見やすくなっています。 別なドキュメントの例です。ヘッダーやフォントなどをカスタマイズできます。右側のカラムは表示されていません。
工業製品風の出力をWebに·Industrial.js MOONGIFT
Industrial.jsは体温計やタンクなどでの進捗表示ができるライブラリです。 処理の進捗を表すのにプログレスバーがよく使われますが、今回はメータグラフを使った手法を紹介します。利用するライブラリはIndustrial.jsです。 メーター表示です。液体や温度計風で面白いです。 その他LED、電光掲示板風もあります。 Industrial.jsではタンク、温度計、LED、電光掲示板、ゲージと種類が用意されています。いわゆる工業系の計測機器、出力機器を模しています。それぞれJavaScriptで指定するだけで使えるので手軽です。素材などを用意する必要もないので、プログレスバーの代わりに適用することも考えられるでしょう。 Industrial.jsはJavaScript製、MIT Licenseのオープンソース・ソフトウェアです。 MOONGIFTはこう見る リアル、ネットに限らず顧客がい
GraphvizのDOT言語をJavaScriptで実装·canviz MOONGIFT
canvizはCanvasを使ってDOTファイルをグラフ化するソフトウェアです。 フローチャートなど複雑なグラフを描くのに適しているのにDOT言語が知られています。通常、Graphvizを使って画像化するのですが、今回はcanvizを紹介します。なんとDOTファイルを読み込み、Webブラウザ上にCanvasタグで描き出してくれます。 例。かなり複雑な関係性を表示しています。 別なグラフ。こちらも関係性が複雑です。 レイアウトを変更するとグラフも全く別物になります。 表示の大きさは自由に変えられます。 こんな図も。 複数線がつながっている、そんな表示も実現します。 色付きの枠。 グルーピング。 グルーピングでさらに色付き。 ノード自体が色付き。 14の頂点で相互につながっています。 同じグラフもレイアウトを変えるとこんな感じに。 Graphvizを使う場合は主に個人用途、もしくは変換後の画像
IE6/Firefox3から使えるsetImmediate·setImmediate.js MOONGIFT
setImmediate.jsはIE10のsetImmediateをIE6レベルのWebブラウザにも対応させるライブラリです。 JavaScriptで処理時間の長いスクリプトを実行する場合、setTimeoutを使うと思います。IE10ではさらに電力消費量を抑えられるsetImmediateが用意されていますが、類似関数を他のWebブラウザでも実現するのがsetImmediate.jsです。 デモです。様々な高さの棒が並んでいます。 こちらはHTML4を使って並び替えを行っています。 徐々に並んできました。 HTML4の場合、CPU負荷は低いです。対してHTML5の場合は高くなっています（それだけ高速です）。 setImmediate.jsを使った場合、CPU負荷は高いものの電力消費量は抑えられる仕組みです。 setImmediate.jsの対応ブラウザはIE6以上、Firefox3以上、
SVGをもっと活用するために使いたい·svg.js MOONGIFT
svg.jsはアニメーションやイベント駆動型のSVGを実現するライブラリです。 SVGはまだ広く利用されているとは言いがたいですが、ビットマップではなくベクターデータなので拡大してもきれいなど特徴が多数あります。今回紹介するsvg.jsはSVGを使ったアニメーションを実現するライブラリになります。 デモです。単純なオブジェクトの生成、移動、中央寄せが簡単に指定できます。 クローンして重ね合わせ。重心の判定、傾けるのも手軽です。 X軸、Y軸のずらし。塗りつぶし。 枠だけを描く、グラデーション（線形、円形）。 クリック、マウスオーバー、画像マスクもできます。 クリックしたオブジェクトだけ色を変更します。 さらにアニメーションも自在に。 プラグインによる拡張もサポート。 svg.jsを使えばアニメーションはもちろんのこと、画像を重ねて表示したり、マウスイベントによって形状や色を変更したりすること
まるでネイティブのようなUIを実現できる高機能JavaScript UIライブラリ·w2ui MOONGIFT
w2uiはデスクトップ、スマートフォン、タブレットに対応したJavaScript UIライブラリです。 新しいJavaScript UIライブラリの紹介です。名前はw2ui、多数のウィジェットを搭載したUIライブラリとなっています。 レイアウト。 グリッド。 詳細検索対応。 ツールバー。 サイドバー。階層表示に対応しています。 タブ。 フォーム。 ポップアップ。 ツールチップ。 その他ユーティリティ。 w2uiのサイズは37KB（ミニファイ&Gzip）で、これはExtJSの1/12、Kendo UIの1/6となっています。また、jQueryベースという特徴、全てのウィジェットをまとめて提供、IE9、Firefox7、Google Chrome、Safari5に対応となっています。デスクトップはもちろん、タブレットやスマートフォンにも対応しています。 w2uiはJavaScript製、MIT
取り扱い注意！JavaScriptを使ってMD5ハッシュをクラック·MD5-Password-Cracker.js MOONGIFT
MD5-Password-Cracker.jsはJavaScriptを使ってMD5のハッシュ値から元テキストを検索するソフトウェアです。 パスワードをハッシュ化して保存しておくのは基本と思われますが、その際によく使われるのがMD5ではないでしょうか。SHA-1/SHA-2のが良いと思うのですが、それをまざまざと知らしめてくれるのがMD5-Password-Cracker.jsです。 パスワードクラック開始！Web Workersが8つ使われています。 パスワードはheyaでした。1ワーカーあたり1秒間に約7万の解析が行われています。4文字のパスワードに対して23秒で解析されました。 網羅的に文字列を試しているので時間は要しますが、4文字程度のパスワードであればあっという間に解析されてしまうというのが分かるかと思います。パスワードの取り扱いについてはくれぐれもご注意を。 MD5-Passwo
レガシーなブラウザにも高度なグラフィックを。JavaScriptによるOpenGL実装·JSGL MOONGIFT
JSGLはJavaScriptによるOpenGL実装です。 HTML5の新機能の一つにWebGLがあります。しかしまだまだ最近のWebブラウザでしか実装されていない機能になります。そこでWebGLに対応していないWebブラウザに対して3Dモデリングを行うライブラリがJSGLです。JavaScriptを使ってOpenGLを実装しています。 デモです。オブジェクトが回転しています。FPSはかなり高い数値が出ています。 実装サンプルです。コードはかなり分かりやすいのではないでしょうか。 JSGLには多彩なAPIが作られており、細かくモデリングができるようになっています。元々はJSOS向けのグラフィックスAPIとして開発されているとのことです。 JSGLはJavaScript製、MIT Licenseのオープンソース・ソフトウェアになります。 MOONGIFTはこう見る JSGLのAPIはWebG
Dart製のシューティングゲーム·Dart Shooting Game MOONGIFT
Dart Shooting GameはDartで作られたHTML5向けシューティングゲーム。 HTML5を使うべき理由は様々ありますが、使わない理由も多いでしょう。しかしこれはHTML5でないと出来ないというものがあれば、使ってみようと言う気にもなるはずです。Dart Shooting Gameはその一つ、HTML5を使って作られたシューティングゲームになります。 ミサイルは自動で発射されます。マウスの動きに合わせて自機が動くので隕石を撃ち落としていきます。動作はかなり速いです。 iOSでも動きます。動作は高速です。 Dart Shooting Gameは素のJavaScriptではなく、Dartを使っているのが特徴になります。元々はJavaScriptで作られたHTML5製のShooting Gameがベースになっています。Dartによるゲームのコーディング法を知る上でも役に立ちそうです
これはすごいかも。iOS上で動くnode.js·nios MOONGIFT
niosはiOS上で動作するnode.jsです。 niosは何とiOS上でnode.jsをサーバとして動かしてしまおうというかなり野心的なプロジェクトになります。 起動しました。Startボタンを押します。 リッスンしています（error:8080）というのが気になりますが… Webブラウザからアクセスするとローディングが続いてコンテンツが返ってきません。 niosを停止するとサーバとの接続が切られるので、起動はしているようです。なかなか破壊力を秘めたツールに見えるので今後の開発が楽しみです。 niosはObjective-C製、iOS向けのオープンソース・ソフトウェア（BSD License）です。 MOONGIFTはこう見る 数年前からそれぞれのプログラミング言語持っていた壁のようなものがどんどん破壊されています。JavaScript、Ruby、Pythonといった言語がその中心にいま
Gitを使って誰でもDropboxを作れる·RubyDrop MOONGIFT
RubyDropはRuby製のオープンソース・ソフトウェア。個人的にDropboxはとても便利に使っている。これなしの生活は考えられないくらい便利だ。有料であれば50GBまで使えるが、無料版の2GBでは物足りないと感じる人も多いだろう。だがお金は払いたくないという人もいるだろう。 サーバ起動中 そこで考えたいのが自分だけのDropbox構築だ。重要なのは自動的に同期されるシステムであること、バージョン管理されること、複数のコンピュータ間でデータが同じ状態に保てることだろう。それらを実現するのがRubyDropだ。 RubyDropはRuby1.9系で動作するソフトウェアだ。簡単に言えば、特定のフォルダに関してRubyDropが監視を行う。そして変更があると内容をリモートのGitリポジトリにアップデートする。Gitリポジトリ側で変更があれば、Pullする仕組みだ。 自動的に同期されている G
携帯電話からのアクセスを真似する·Moxy MOONGIFT
MoxyはPerl製のオープンソース・ソフトウェア。日本において携帯電話サイトの需要は大きい。スマートフォンの活況もあって、PC向けと同時に携帯電話向けをリリースすることも多くなっている。また将来的にはPCよりもモバイルのシェアが大きくなると言われている。 携帯電話からのアクセスを模倣できる そんな携帯電話向けサイトの開発を行う場合、PCからアクセスを偽装してテストを行う必要がある。専用のソフトウェアの他、FirefoxのMobileSimulatorも使えるが、ここではWebブラウザベースのMoxyを紹介しよう。 MoxyはPerl製のソフトウェアで、専用のWebサーバとしてサービスが立ち上がる。ブラウザからアクセスすると、URLを指定して外部のWebサービスにアクセスできる。その際にはUserID、ユーザエージェント、HTTPヘッダーを任意に入れ替えてアクセスも可能だ。 Googleへ
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
