Tabulator - これはすごい。HTMLテーブルを高機能に MOONGIFT
テーブル表示はWebシステムのデファクトとも言えます。業務システムはいうに及ばず、管理者画面などでも必ず求められる表示です。そしてただ表示すればいいという訳ではなく、ソートやフィルタリング、インラインでの編集など様々な機能が求められるものです。 そんな多機能なテーブル表示を実現してくれるのがTabulatorです。多くのニーズを満たしてくれることでしょう。 Tabulatorの使い方 てんこ盛りなデモテーブル。ざっと見てもフィルタ、ページネーション、グラフ表示、ソートなどの機能が確認できます。 インライン編集もサポートされています。 データに合わせて幅を自動調整。 行をクリックして展開する機能。 カラムをグループ化。 カラムを縦に。これはカラムが多い時に便利そうです。 ドリルダウン。 テーブルを入れ子にもできます。 スパークライン表示。 フッターで集計。 HTMLテーブルを変換する機能もあ
Theia - Webベースで動作する開発環境 MOONGIFT
MOONGIFTはオープンソース・ソフトウェアを紹介するブログです。2021年07月16日で更新停止しました ローカルアプリケーションがどんどんWebアプリケーション化しています。そんな中、最近では開発環境もWebアプリケーション化が進んでいます。AWSがCloud9を買収したのも、その動きの一つです。 今回紹介するTheiaはクラウドやデスクトップでも動作するWebベースのIDEです。 Theiaの使い方 メイン画面です。左側にファイル/フォルダツリー、右側にエディタが表示されます。 Gitの差分表示も行えます。 プロジェクト内の検索。 Gitのログ。 設定はJSONを修正して反映します。 テーマもあります。 Theiaは個人のローカルであればDockerで使うこともできます。クラウドであればファイルはサーバ上に、ローカルで動かすならば自分のストレージにあるファイルを編集できます。Vis
DBeaver - 多彩なデータベースに対応した管理UI
データベースを使った開発や運用時においてGUIの管理インタフェースが欲しいと思うことは多々あります。特にプロジェクトによってデータベースの種類が違ったり、接続先があちこちに存在するとそう感じるはずです。 そこで使ってみたいのがDBeaverです。多彩なデータベースに対応した管理UIです。 DBeaverの使い方 接続先の選択画面です。PostgreSQL/MySQL/MariaDB/DB2/Oracle/SQL Serverなどの基本に加えてMS Access、infomix、MongoDB、Firebirdなども選択できます。 SSHトンネルに対応しているので本番環境のデータベースも確認できるでしょう。 接続しました。 テーブルの一覧です。 データも確認できます。 ダイアグラムはリレーションなどの関係が分かるようになっています。 DBeaverを入れておけば、大抵のデータベースには接続で
Zynga製。Cocos2Dを使ったゲームのUIを設計する·CocosBuilder MOONGIFT
CocosBuilderはiOS向けゲームを開発するためのGUIビルダーです。 iOSアプリで一山当てたいと思うならゲームに行くのが懸命でしょう。そこで紹介したいのがCocosBuilder、ZyngaがリリースしたCocos2DのGUIビルダーです。 最初にプロジェクトを作ります。 真ん中にプレビューが表示されています。ここにオブジェクトを追加していきます。 テキストなどを追加しました。右側はプロパティ設定になります。 デモのゲームです。 CocosBuilderを使うとccbという拡張子のファイルが作られます。これはこのままXcodeのプロジェクトに取り込んでシーンの一つとして利用できるようです。Zyngaではこの開発に専任のプログラマーを雇用し、フルタイムで開発にあたっているそうです。 CocosBuilderはMac OSX用、iOS向けのオープンソース・ソフトウェア（MIT Li
怒首領蜂再現を目標にしたWebベースの弾幕STG·GL-Shooter2 MOONGIFT
GL-Shooter2はHTML5/JavaScript製のソフトウェア（ソースコードは公開されていますがライセンスは明記されていません）です。 HTML5で作られるゲームジャンルが多彩になっています。今回は弾幕シューティングゲームをHTML5で再現したGL-Shooter2を紹介します。コンセプトとして怒首領蜂（どどんぱち）再現を掲げています。 ローディング中。すぐに終わります。 立ち上がりました。奇麗なグラフィックスです。 スペースキーでメニューを選択します。 いきなり弾幕。今は弾に当たっても死ぬことはありませんので安心です。 こちらのミサイルはCキーで発射します。 Cキーを押し続けるとビームになります。 今のところ当たっても死なないのでCキーを押してどんどん敵を倒していく楽しさだけを味わえます。エンジンにtmlib.jsを使っています。今後の開発が楽しみなソフトウェアです。 MOON
Lever OS - サーバレス×マイクロサービスなWebアプリ実行環境 MOONGIFT
マイクロサービス、サーバレスアーキテクチャといったキーワードが盛んに言われるようになっています。確かにサーバレスアーキテクチャは小さなサービスを作るのに都合がよく、それらを合わせるとマイクロサービスとして成り立つかも知れません。 そんな2つを合わせて作られているのがLever OSです。まだ開発途中とのことですが、大きな可能性を秘めていそうです。 Lever OSの使い方 Lever OS自体はDockerでデプロイできます。起動したら例えばフォルダを作成し、その中にserver.jsとして次のようなコードを書きます。 module.exports.sayHello = function (name, callback) { callback(null, "Hello, " + name + "!"); }; そして lever.json というファイルを作成します。 { "name":
WebVR-Extension - WebVRコンテンツの開発を補助するChrome機能拡張
MOONGIFTはオープンソース・ソフトウェアを紹介するブログです。2021年07月16日で更新停止しました 最近盛り上がってきたのがWebVRです。VRグラスを使ったコンテンツをWebブラウザでも楽しめるようになります。ただし開発に際してまだ確立された方法がなく、とても面倒な印象があります。 そんなWebVRコンテンツを開発する際にインストールしておきたいのがWebVR-Extensionです。Google ChromeでWebVRをエミュレートできます。 WebVR-Extensionの使い方 WebVR-ExtensionはDevToolsの中で動きます。右側の表示がそうです。 縦方向、横方向に動かしたりできます。 実際に動かしているところです。これはXYZ軸への移動。 こちらは回転移動です。 WebVR-Extensionを使えばWebVRコンテンツへ視点を移動した際の表示などが確
Chrome Dev Editor - フロントエンド開発ならお任せなChromeアプリなプログラミングエディタ MOONGIFT
Webアプリケーションを開発する際にはテキストエディタやIDEを使うのが一般的です。しかし開発してWebブラウザに表示を切り替えて再読み込みして…というのは手間がかかるものです。 そこでWebアプリケーションをWebブラウザ上で開発してしまおうというのがChrome Dev Editorです。JavaScriptだけでなくDartを使った開発にも対応したエディタになります。 Chrome Dev Editorの使い方 こちらがメイン画面です。Chrome Dev EditorはChromeアプリとしてインストールされます。 最初にプロジェクトを作成します。 エディタはハイライトがついたもので使いやすいです。 内部サーバ機能付きです。 GitやChrome Web Storeへのデプロイ機能があります。 Web Starter KitやPolymerをベースに生成することもできます。 Chr
Chain - Webベースのビジュアルプログラミング環境
MOONGIFTはオープンソース・ソフトウェアを紹介するブログです。2021年07月16日で更新停止しました タブレットが普及するのに伴ってビジュアルプログラミングに注目が集まっています。小学生や中学生向けのプログラミング学習として使われるのはもちろん、よりプログラミング学習の敷居を下げられるのが魅力的です。 今回はビジュアルプログラミング環境の一つとして、Chainを紹介します。Webブラウザ上で動くのですぐに試せるのが魅力になります。 Chainの使い方 幾つかブロックを貼り付けました。右と左をドラッグ&ドロップでくっつけていきます。 ブロックの種類は次のようになります。 値同士をオペレータブロックを使って計算したり、結合したりできます。さらにIfやリピートブロックを使えば判定や繰り返し処理ができるようになります。さらに関数化して大きなブロックにすることもできます。 大型なロジックを作
Rainbow Stream·ストリーミングに対応したターミナルTwitterクライアント MOONGIFT
Twitterをどこで楽しむか。Web、ローカルアプリケーション、スマートフォンアプリなど様々なフロントエンドがありますが、そのためにアプリケーションを立ち上げておくのが億劫に感じられてしまっている人も多いのではないでしょうか。 そこでプログラマであれば普段から使っているターミナルを使ってみてはいかがでしょう。Twitterの機能を全般的にターミナルから操作できるRainbow Streamを紹介します。 Rainbow Streamの使い方 Mac OSXでインストールする場合は次のようなコマンドを打ちます。 export ARCHFLAGS=-Wno-error=unused-command-line-argument-hard-error-in-future sudo pip install rainbowstream 起動は rainbowstream コマンドです。 起動画面です
WebベースのアクションRPGを開発するならば使いたいフレームワーク·RPG JS MOONGIFT
RPG JSはHTML5/JavaScriptによるWebベースのゲーム開発用フレームワーク。 RPG JSはHTML5/JavaScript製のオープンソース・ソフトウェア。HTML5を使ったゲームフレームワークが続々と登場している。ある程度汎用的なものもあるが、やはりゲームジャンルに合わせたフレームワークを選ぶのが大事だろう。 デモゲーム RPG（ロールプレイングゲーム）は常に人気の高いゲームジャンルだ。Webブラウザ上でできるRPGを自作したいならば使うべきはRPG JSだろう。 RPG JSはHTML5/JavaScriptで作られている。矢印キーとスペースで動いたり話しかけたりする。サウンドにも対応する。そして剣を装備するとAキーで振ることができる。NPCも数多くいて、話しかけるとゴールドを貰えたりする。聖剣伝説のようなアクションRPGになっており、どんどん攻撃をしかけていけるよ
MERN - Express/Reactを使ったWeb開発フレームワーク MOONGIFT
Linux + Apache + PHP + MySQLの組み合わせがWeb開発のスタンダード的な位置づけになっていた頃、それぞれの頭文字をとってLAMPスタックと言うのが流行りました。同様にフレームワークが変わるために名称も異なってきました。 今回はMERNスタックを標榜するソフトウェアを紹介します。MongoDB + Express + React + nodeという組み合わせのアーキテクチャになります。 MERNの使い方 MERNのディレクトリ構成は次のようになっています。サーバサイドはMVCに分かれており、Reactを使ったサーバサイドレンダリングを行っています。 テストのサーバを立ち上げたところです。ブログエンジンとなっています。右側にReactで持っているオブジェクトの内容が確認できるのがユニークです。 データの詳細も確認できます。 クリックで画面は変わりますが、サーバへのアク
Hound·もの凄く簡単に使えるソースコード検索エンジン MOONGIFT
ソースコードを検索する際には何を使っていますか。GitHubの検索を使う人もいるでしょうし、grepで検索する人もいます。しかし好みの条件がつけられなくて不便に感じることも多いでしょう。 そこで使ってみたいのがソースコード検索エンジンです。Houndはもの凄く手軽に使えて高機能な検索エンジンとなっています。 Houndの使い方 インストールは以下のような手順となっています。 git clone git@github.com:etsy/Hound.git export GOPATH=`pwd` go run src/hound/cmds/houndd/main.go 実際にはrunを実行する前にconfig-example.jsonを編集してconfig.jsonとします。内容は以下の通りです。 { "dbpath" : "data", "repos" : { "SomeRepo" : {
Git-it - Gitの使い方を基礎から覚えるためのアプリ
Gitが開発現場におけるバージョン管理の軸になってきています。しかしGitには多くの機能があり、さらに他のバージョン管理に比べてローカルでできることが多いので、覚えるのが大変というイメージがあります。 そこで作られたのがGitの使い方を覚えるためのGit-itというソフトウェアです。Git-itを通してGitの使い方を学んでいけます。 Git-itの使い方 最初のページです。一番最初はGitのインストールからはじめます。 リポジトリを作ってみようのレッスンです。 コマンドも書かれていて、その結果をアプリ上から確認できるようになっています。 pullの方法。こうやって順番にすすめていくことでGitを使った開発の基本が抑えられるようになるでしょう。 Git-itの良いところはElectronアプリアプリなので、ローカルに作成したフォルダの状態などをチェックすることができるということです。コンテ
Web上でのプログラミングがさらに便利に。JavaScriptを使った開発補助·Tern MOONGIFT
Ternは入力補完や関数の引数表示と言った機能がついたJavaScript用プログラミング補助ライブラリです。 そろそろWebブラウザ上でコーディングを行える環境が整ってきたのではないでしょうか。プログラミングするためのエディタ環境として必要なのはハイライターなどの他にもたくさんあります。その幾つかを提供してくれるのがTernです。 入力補完。 文字を打つと絞り込まれていきます。 変数、クラスの定義を探します。 オブジェクトの種類を下に表示できます。 変数名を変更します。 名前空間に対応しているので余計なところは変更しません。 関数の引数を表示します。 デモ動画です。 Ternでは入力補完、変数やオブジェクトの定義元検索、関数の引数表示、変数名の一括変更と言った機能がサポートされています。いずれもローカルアプリケーションのプログラミングエディタには備わっている機能と言えるでしょう。しかしそ
Wandbox – 多彩な言語に対応したプログラミング実行環境
MOONGIFTはオープンソース・ソフトウェアを紹介するブログです。2021年07月16日で更新停止しました ある言語でちょっとしたコードを試したいと思った時に、まずその実行環境を用意しなければならないという点で心が折れたりした経験はないでしょうか。今更過去バージョンの言語を入れたり、逆に最新のβ版環境を立てたりするのは面倒なことです。 そこで使ってみて欲しいのがWandboxです。多彩なプログラミング実行環境をオンラインで提供してくれる素敵なソフトウェアです。 Wandboxの使い方 左側でプログラミング言語を選択して、後はプログラミングコードを書いて実行すれば良いだけです。仮想マシンが立ち上がって、その中でコードを実行してくれます。 用意されている言語はC/C++、D、Rill、Haskell、C#、Perl、Python、Ruby、PHP、Erlang、Elixer、JavaScri
php7cc - 早めに試そう。PHP7互換性チェッカー MOONGIFT
2015年11月にリリースされるというPHP7。エンジンも換わり、それに伴ってパフォーマンスも向上していると言われています。しかしその結果、これまで使えていた書き方ができなくなっています。 そこでこれまでのPHPアプリケーションをphp7ccを使ってチェックしてみましょう。PHP7に対応しているかどうか、チェックしてくれます。 php7ccの使い方 php7ccは以下のように対象になるファイル、またはディレクトリを渡すだけで使えます。 $ /usr/bin/php bin/php7cc.php src/File.php Checked 1 file(s) in 0.005065 second(s) エラーがあると、ファイル名と行数、それと理由が表示されます。 $ /usr/bin/php bin/php7cc.php ~/htdocs/ File: /path_to_file/func.p
Clusterize.js·大量のデータを描画&高速スクロール MOONGIFT
Web上で巨大なデータを描画するとWebブラウザの動作が重たくなったり、最悪の場合落ちます。それを防ぐためにはデータをすべてDOMに描画するのではなく、表示している範囲だけに絞って表示し、非表示になったタイミングで破棄すると言った工夫が必要です。 しかしそういったDOM操作はコツがいります。そこで使ってみたいのがClusterize.jsです。巨大なデータセットを高速に表示するためのライブラリです。 Clusterize.jsの使い方 Clusterize.jsを使って5,000行のデータをスクロールする例です。スムーズに描けます。 Clusterize.jsのサイトではさらに10万、50万行のデータを描画することもできます。Clusterize.jsではリストの高さを予め計算し、それに合わせてスクロールバーが正しい長さで出るように設定されています。そのため行の高さは一定である必要がありま
絵師×Tumblrなテーマ·Illustfolio MOONGIFT
Illustfolioはイラストレータ向けのポートフォリオになるTumblrテーマです。 Tumblrにはテキストよりも画像を格好よく配置したブログがとても良く似合います。そんなTumblr向け、イラストのポートフォリオに特化したテーマがIllustfolioです。 トップページ。もはやTumblrと言われないと分からないレベル。 スライダーで自動的に画像が切り替わります。 画像にマウスを載せるとタイトルが出ます。素敵でしょ？ クリックすると詳細に飛びます。 2ページ目。ページネーションもサポート。 Illustfolioは今のところ画像以外での投稿に対応していないようなのでご注意ください。しかし絵師の方が自分のポートフォリオをPixivなどのイラストサービス以外に求める場合に使ってみると良いのではないでしょうか。 IllustfolioはTumblr用、HTMLのソフトウェア（ソースコー
NodeJS用IDE·Nodify MOONGIFT
NodifyはJavaScript製のオープンソース・ソフトウェア。最近、サーバサイドのJavaScriptフレームワークであるNodeJSが熱い。多数のソフトウェア、ライブラリが開発されており、Herokuでもサポートが開始されるなど本格的になってきている。 NodeJSを遊ぶのにぴったり そんなNodeJSを使って色々遊んでいる人たちに使ってみてもらいたいのがNodifyだ。Webブラウザ上でNodeJS向けのコードを書き、その場でテスト実行できるいわばIDEだ、 Nodifyを立ち上げるとWebブラウザが表示される。後は自由にコードを書き、その場で実行できる。NodeJSのサーバをNodify上から立ち上げることも可能だ。console.logを使えばデバッグメッセージを出力することもできる。Google Chromeを使えばデバッグも可能だ。 Nodify上からNodeJSを実行で
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
