MOONGIFTはオープンソース・ソフトウェアを紹介するブログです。2021年07月16日で更新停止しました 技術者以外の方でWebページを作成する時にはオーサリングツールを使うのが一般的です。また、ちょっとしたコンテンツの修正であればWYSIWYGエディタを使いますが、あまり凝ったデザインには対応できません。 そこで使ってみたいのがKEditorです。Webベース、ドラッグ&ドロップで自在にコンテンツを作成できます。 KEditorの使い方 メイン画面です。左側にあるパーツをドラッグ&ドロップで配置します。 コンテンツはツールバーがあるWYSIWYGエディタで編集できます。 枠を追加した後、コンテンツを配置します。 動画や地図など様々なコンテンツが用意されています。 リンクを追加する際の表示です。 KEditorはWebページ制作に不慣れな方であってもすぐに使いこなせるでしょう。2カラム

MOONGIFTはオープンソース・ソフトウェアを紹介するブログです。2021年07月16日で更新停止しました SQLiteはプロトタイプ開発であったり、小さなWebサービスなどを開発するのに非常に役立ちます。単一ファイルで動きますがちゃんとSQLも使えますし、本格的な作りです。 そんなSQLiteを使った開発時に用意しておきたいのがSQLite Webです。Python製で簡単に使えるSQLite管理です。 SQLite Webの使い方 SQLite Webをインストールしたら、後は sqlite-web コマンドの引数としてSQLiteファイルのパスを渡すだけです。 こちらはトップページです。 構造やインデックスが確認できます。 内容も見られます。 さらに任意のクエリも実行できます。 新しいテーブルを作ることもできます。 SQLite Webは任意のパスにあるSQLiteを指定できるので

Holo Lensであったり、Magick LeapなどARグラスと呼ばれるデバイスが登場してきています。そうしたデバイスを使えば、リアルの上にデジタルな情報を載せるのが容易に実現できます。 今回紹介するオープンソースソフトウェアはargon.js、Web技術でARを実現するソフトウェアです。 argon.jsの使い方 argon.jsのサンプルアプリケーションです。iOSですが、SafariではgetUserMediaはサポートされていないので、その部分は別途情報を送っていると思われます。 Oculusなど向けに二つに分けられます。 WebGLで描画しているサンプル。 コンパスを使って北にNorthという文字を浮かべています。 空中に浮かぶ元素図。 配置を変更。こういったSF風の体験ができるのがARですね。 全天球画像のビューワーとしても使えます。 Googleストリートビューのビューワ

ビジュアルプログラミングの多くはノードがあり、それらをマウスでくっつけて処理を繋げていきます。各ノードには機能があり、必要に応じて処理判定を行うノード、繰り返し処理を行うノードを選択します。 そういったビジュアル化された環境を提供するのがNEditorJSです。工夫次第で様々な使い方が考えられるでしょう。 NEditorJSの使い方 NEditorJSのメイン画面です。 ノードはマウスで接続できます。 実際に操作しているところです。 NEditorJSでは、まずアウトプット側の黒丸をクリックして、その後インプット側の黒丸をクリックします。自動的に線が伸びていくので分かりやすいでしょう。ノードはマウスでドラッグ&ドロップできます。 ユーザ向けにビジュアルプログラミング環境やデータ処理環境を提供する際に使えそうです。NEditorJSはHTML5/JavaScript製のオープンソース・ソフト

MOONGIFTはオープンソース・ソフトウェアを紹介するブログです。2021年07月16日で更新停止しました テーブル（グリッド）は多くのシステムの中で使われます。そのため、利用者からは多くの要望が寄せられるポイントでもあります。場合によってはExcelのような表計算並の機能を求められることもあるでしょう。 そんな機能を一つ一つ作り込んでいたら幾ら時間があっても足りません。そこで使ってみたいのがjQuery Bootgridです。 jQuery Bootgridの使い方 jQueryを実行するだけで普通のテーブルがここまで変化します。 検索を使ってリアルタイムにフィルタリングしたり、ページネーション（件数は変更可能）があります。 カラムは表示、非表示が切り替えられます。 アイコンを表示して別な機能と連携させたり、リンク表示も行えます。 jQuery BootgridはHTMLで書かれたテー

Minecraftはブロックを積み重ねて世界を創っていくという、レゴ好きにはたまらないゲームです。日々多くの人たちが一生懸命建設に励んでいます。また、開発者にとっては別な見方もできます。 コンセプトがシンプルなだけに同じようなものを自分で作ってみたいと思えるのです。今回はWebGLを使ったWeb Blocksを紹介します。 Web Blocksの使い方 ゲーム画面です。矢印キーとASWDキーで移動や視点の変更を行います。 空中に浮かぶWelcomeの文字。 高台に登ってみました。 ブロックは幾つかの種類があります。 ジャンプを繰り返すと空中を飛べます。 Web Blocksは一人きり、かつ保存する機能はないので頑張って作っても再読み込みするとなくなってしまいます。Web Blocksをベースにデータの保存やリアルタイムのコラボレーション機能などを実装すると面白そうです。 Web Block

Webブラウザ上で3Dをぐりぐりと動かすようなアニメーションを作る場合、WebGLを使うのは基本として、処理においてもGPUを使う方が効率的になります。とはいえ、GPUを使ってどう処理を行えば良いのか分からないことでしょう そこで使ってみたいのがGPU対応のライブラリです。今回はアニメーションライブラリとしてGPU.jsを紹介します。 GPU.jsの使い方 GPU.jsを使った一例です。Canvasが4つに分かれており、それぞれが連携してアニメーションしています。 実際の動きです。60fpsでています。 グリッドやボールは増減できます。 GPU.jsを使わないCPUでの計算処理モードもあるのですが、動きがとても遅くなります。GPU様々と言ったところでしょう。Web上でスムーズなアニメーション処理を実現したい時にはぜひチェックしてください。 GPU.jsはJavaScript製のオープンソー

MOONGIFTはオープンソース・ソフトウェアを紹介するブログです。2021年07月16日で更新停止しました 最近CUI関連のツールに注目が集まっています。グラフィックスを駆使してまるでGUIアプリケーションのようなUIを再現したり、画像を表示するなどGUIを使わずとも多くの機能が実現できるようになっています。 今回はそんなCUIでの高度なテクニックの一つを紹介します。asciimaticsはCUIでアニメーションを実現します。 asciimaticsの使い方 デモです。色が変わったり、星が瞬いているのが分かります。 文字は変更できますのでこんな感じにも。 何の役に立つのかと言われると説明しがたいのですが、見た目のインパクトはあるかと思います。CUIで動くプレゼンテーションなどのツールと組み合わせて使うと面白いのではないでしょうか。 asciimaticsはPython製のオープンソース・

MOONGIFTはオープンソース・ソフトウェアを紹介するブログです。2021年07月16日で更新停止しました Webの進化によって、今後はますますリッチなUIに注目が集まっていくでしょう。その一つとして3Dが考えられます。そし3Dを担っている技術といえばWebGLになります。 そのままでは扱いづらいWebGLですが、Goo Engineを使うことで3Dコンテンツが開発しやすくなるかもしれません。 Goo Engineの使い方 デモです。マウスを使って視点をぐりぐり動かせます。 数多くのオブジェクトが落下するデモです。 回転しているオブジェクトが近づいたり、離れたりします。 水面のような描き方もできます。 落下して箱に収まるところ。視点は自由に変更できます。 ライトについても設定可能です。 WebGLは通常のHTMLやJavaScriptと全く違った書き方をするので取っつきが悪いのですが、G

MOONGIFTはオープンソース・ソフトウェアを紹介するブログです。2021年07月16日で更新停止しました YouTubeを閲覧する方法としてはWebブラウザかアプリに限定されます。YouTubeのプレーヤの機能は多いので特に不満はないと思いますが、それでも自分好みのプレーヤーで見たいと思う人もいるでしょう。 そこで使ってみたいのがyturlです。YouTube動画の動画本体のURLが取得できます。 yturlの使い方 yturlは簡単に使えます。yturlコマンドの後にYouTube動画のURLを渡すだけです。 $ yturl 'http://www.youtube.com/watch?v=8TCxE0bWQeQ' Using itag 43. https://r5---sn-aigl6n76.googlevideo.com/videoplayback?dur=0.000&mv=m&m

MOONGIFTはオープンソース・ソフトウェアを紹介するブログです。2021年07月16日で更新停止しました IoTで何か作った経験はあるでしょうか。通常、マイコンに何らかのセンサーをつけて、そこからデータを吸い上げて蓄積したり別なサービスにデータを転送したりします。元々が小さなコンピュータなのであまり大規模な計算処理は行わず、左右にデータを流す方が良いでしょう。 簡単なプログラムであればパーツを組み合わせるように作り上げることができるだろうと思っていましたが、Node-REDはまさにそのためのソフトウェアです。IBM社の開発したIoTのためのビジュアルプログラミング環境です。 Node-REDの使い方 Node-REDはWebブラウザ上で動作します。左に部品、中央がエディタ、右側にプロパティが出ます。 適当に部品を配置して、それらをワイヤでコネクトします。 ストレージやWebサービスなど

MOONGIFTはオープンソース・ソフトウェアを紹介するブログです。2021年07月16日で更新停止しました HTML5における表現力向上に期待がかかるのがCanvasやWebGLです。とはいえこれまでのHTML並に書きやすいという訳ではなく、描画や操作をするには異なる技術の習得が必要になります。 そこで使ってみたいのがKonva、2DをCanvas上に描画するためのライブラリになります。 Konvaの使い方 Konvaは多くの機能を掲げていますが、主立ったものを紹介すると、オブジェクト指向のAPI、ネスト可能、高パフォーマンスなイベントハンドリング、レイヤーサポート、ノードキャッシュ、アニメーション/トゥイーンサポート、フィルター、セレクターサポート、デスクトップ/スマートフォンサポート、AMDサポートなどがあります。 形状は四角、三角、円、テキスト、画像、線、多角形、SVGパスが使えま

JavaScriptを活用したWebアプリケーションを開発している際に、一時的に保存したいデータをどのように扱うかは大きな問題です。何となく変数や配列、ハッシュに保存してしまいがちですが、そのデータの取り出しや更新が面倒だったりします。 そこで使ってみたいのがAlasql.jsです。JavaScriptだけで作られたクライアントサイド向けのSQLデータベースになります。 Alasql.jsの使い方 使い方の例。データを配列で放り込んで、SQLで取り出せます。 デーブルの作成を含めてSQLが書けます。 データはlocalStrageに保存することもできるので、再読込時に復元も可能です。 Alasql.jsはHTML5仕様の中で検討されていたWeb SQLとは異なる実装で、オンメモリで動きます。高速で動作し、かつデータはlocalStrageに保存しておくこともできるので容量は小さいながらも永

プロジェクトマネージャやリーダーがよく使うソフトウェアにVisioがあります。ネットワーク図、システム概要図などをまとめる際にはVisio Professional以上のステンシルが必要で、ちょっとした図を描くために購入するのを控えてしまう人も多いのではないでしょうか。 そんな方にお勧めしたいのがdraw.ioです。Visioライクに使えるWebアプリケーションになります。 draw.ioの使い方 最初に保存先を聞かれます。ローカルの他、DropboxやGoogle Driveへの保存が可能です。 テンプレートが多数用意されています。 組織図。 移動や削除はドラッグ&ドロップで。 様々なステンシルが用意されています。 画像出力の結果。左上のは筆者がドロップしたステンシルです。 他のテンプレートです。ビジネスプロセス。 チャート。 draw.ioはフローチャートなどをはじめとして、Visio

MOONGIFTはオープンソース・ソフトウェアを紹介するブログです。2021年07月16日で更新停止しました スマートフォン、タブレットなどのデバイスを使う際にはアプリケーションを移動するというのがとても面倒に感じます。そのため、リンクなどを辿ることなくその場で見られるというのはとても嬉しかったりします。 今ではYouTubeをはじめ埋め込みに対応したサイトも多いですが、動作が重たく感じるのが難点です。そこで登場したのがGifDeck、SlideShareのスライドをアニメーションGIFに変換します。 GifDeckの使い方 使い方はとても簡単です。SlideShareのURLを入力するだけです。 GifDeckで作った画像はそのままメールに貼付けたり、Twitterにアップロードできます。スライドのさわりだけを見せて、詳細を説明するコンテンツへ誘導するなんてマーケティング的使い方が面白そ

WindowsやMac OSX、Linuxに対応したGUIアプリケーションを開発してみたいと思いつつもWeb技術では面倒そうと思ってしまっていませんか。node-webkitを使う手もありますが、ランタイムが必要だったりして手控えてしまう人もいるでしょう。 そんな方に使ってみて欲しいのがWeb2Executable、Webアプリケーションをそのままラッピングして実行ファイル化するソフトウェアです。 Web2Executableの使い方 メイン画面です。 必要な項目を選択、入力します。Windows版ながらMac OSX向けの実行ファイルを作れる点も注目です。また、nodeのバージョンを指定する仕組みになっていますので、サーバサイドが必要な場合にはこれが使えるでしょう。 実行ファイル生成中。 ファイル構成。幾つかDLLがありますが割合シンプルです。 実行結果。内容がないのであれですが、普通の

WebGLやCanvasの登場もあって、Webブラウザ上で複雑な計算処理を行うケースが増えています。もちろんJavaScript自体にも演算機能はありますが、複雑な処理を行うためにはコードも増えがちです。 そこで使ってみたいのがmath.jsです。数式を処理、表示するためのライブラリになります。 math.jsの使い方 複数の値を計算しています。文字列を解釈しているのがポイントです。 文字列をMathJaxを使って画像化しています。また、その計算結果も表示しています。 math.jsのデモコードです。 // functions and constants math.round(math.e, 3); // 2.718 math.atan2(3, -3) / math.pi; // 0.75 math.log(10000, 10); // 4 math.sqrt(-4); // 2i mat

MOONGIFTはオープンソース・ソフトウェアを紹介するブログです。2021年07月16日で更新停止しました HTML5になって俄然面白くなってきたのがアニメーションGIFではないかと思います。バイナリとして読み込むことで、単純な再生だけでなく再生を変化させたり、動画から新しいアニメーションGIFを作ってしまったりできます。 そのベースとして使えそうなライブラリがgifkenです。アニメーションGIFの解析はもちろん、作成までサポートしたライブラリです。 gifkenの使い方 また、コードで新しいアニメーションGIFの作成ができます。 <div id="content"></div> <script type="text/javascript"> window.onload = function () { var newgif = new gifken.Gif(); newgif.widt

言葉や文字列の定義では分かりづらい内容も図にすると明確になることがあります。そのため技術的なドキュメントにも図表が多く使われています。しかし図にすると後々の修正が面倒に感じる事も多いでしょう。 そこでテキストから図を起こすのがお勧めです。テキストであれば修正は容易で、その後コマンド一つで画像にできる訳です。今回はEBNFにも対応した画像生成ツールAsciidiaを紹介します。 Asciidiaの使い方 AsciidiaはPHP製のソフトウェアで、PHPとImageMagickがあれば使えます。コマンドは次のように使います。 $ php asciidia.php -o svg:test3.svg -t diagram -i test/diagram.txt 出力形式は画像またはSVGに対応しています。基本的にImageMagickで生成しているので対応している画像フォーマットであれば大丈夫な

おお、これは格好いい！ GitHubの作ったプログラミングエディタAtomに注目が集まっていますが、それに対抗するかのようなオープンソース・ソフトウェアが登場しました。それがZed、Google Chromeアプリとして動作するプログラミングエディタです。 Zedのインストール ZedはChrome ウェブストアで公開されていますので簡単にインストールできます。 インストールはワンクリックで。 Chromeアプリなのでランチャーに入ります。 Zedの使い方 Zedを立ち上げました。Dropboxまたはローカルのフォルダを指定します。 開きました。基本2ペインですが、さらに分割もできます。 コマンド+EまたはCtrl+Eでフォルダ以下のファイルをインクリメンタル検索します。 Markdownファイルであればプレビューも可能です。 各種プログラミング言語に対応したハイライター。 ノートという機