タグ

ブックマーク / www.moongift.jp (274)

  • シューティングゲームなどに使えるHTML5ゲームフレームワーク·Chem MOONGIFT

    ChemHTML5製のゲームを開発するためのフレームワークです。 オープンソース界隈ではHTML5でゲーム作成を行うプロジェクトが増えてきました。今後Facebookがスマートフォンに気になれば、よりその流れが強まるでしょう。そこで今回はChemを紹介します。JavaScript/HTML5を使ったゲームを開発するためのフレームワークです。 こちらはchemを使ったデモ。上下左右への動きとスペースキーによる自爆が実装されています。 デモのゲームです。上下左右に動いて隕石を避けます。 結構当たり判定が細かいのが難しい所。 最高得点は1,194点。 Chemはnpmでインストールするコマンドであり、作成したJavaScript(CoffeeScriptやLiveScript、Cocoも利用可能)ファイルをWebベースで動くように変換してくれます。一定の作法を覚える必要がありますが、一旦覚え

  • Canvasをより手軽に使いやすくするフレームワーク·KineticJS MOONGIFT

    KineticJSはCanvasタグを使ったベクターグラフィックをより簡単に使えるようにするJavaScriptライブラリです。 HTML5の登場によって、Web上でも高度な表現が可能になっています。とはいえそのためにすごい量のコーディングをしなければならないイメージがあります。しかしKineticJSを使えば分かりやすいコードで、ゲームやドローを伴ったグラフィックスが描けそうです。 サンプル。ボタンを押すとオブジェクトが動く。 こちらは星をドラッグアンドドロップできる。 世界地図のベクター画像。 ビルのマップ。マウスに反応して格好いい。 動物の絵と影をマッチさせるゲーム。 ここからは実際に利用されている例。ロボットアバターを作成する。 こんな感じに自由に選べる。 かつてはFlashでやっていたようなグラフィックがJavaScriptで実現する。 ひげを載せる遊び。これもKineticJS

  • HTML5/JavaScriptによるゲーム開発に使えるフレームワーク·Gamvas MOONGIFT

    GamvasはHTML5/JavaScriptを使ったゲームフレームワークです。物理エンジンを内包しています。 HTML5/JavaScriptが発展するのにつれてWeb標準で動作するゲームの現実味が増しています。そんな時に必ず必要になるのがゲームエンジンと思われます。今回はHTML5用のゲームエンジン、Gamvasを紹介します。 デモです。上からオブジェクトが落下してきます。 オブジェクトは作用しあって動きます。 こちらは雨が湖畔に落ちていくデモです。 煙のデモ。ランダムに流れていきます。 こちらはクリックするとその部分で爆発が起きるデモ。 空間に三角形のオブジェクトが浮かんでいます。左右の矢印キーで視点が変えられます。 移動はスムーズです。 Gamvasはオブジェクトごとのステータスサポート、アニメーション処理、Box2Dベースの物理エンジンをサポートしています。カメラシステムとして視

  • なんてこった…JavaScriptをJVMで動かしてしまうコンパイラ·Mug MOONGIFT

    MugはJavaScriptのコードをコンパイルしてJavaの中間コードにしてしまうソフトウェアです。 ここ最近、プログラミング言語同士の壁が徐々に破壊されている気がします。あるプログラミング言語上で別なプログラミング言語を動くようにしたり、置き換えてしまったりするような類です。今回はその一つ、JavaScriptJavaVM上で動かすという、かなり無茶な気がしなくもない、そんなソフトウェアMugを紹介します。 元コードです。 コンパイルしました。 実行しました。確かに出力されています。 デモ2です。確かにJavaScriptです。 こちらもJVM上で実行されています。 MugはシンプルかつスタティックなJVMのためのJavaScriptコンパイラーです。書き方に多少の特徴はありますが、コードはあくまでもJavaScriptです。それをコンパイラを使ってclassファイルにします。その結

  • 多数の言語のAPIドキュメントを一元管理·DocHub MOONGIFT

    DocHubはHTMLJavaScriptPHPなどに対応したAPIドキュメントサーバです。 プログラミングをある程度やっていると、解決法を探すのにAPIドキュメントを当たるのが一番早くなっていきます。そこで社内でも使えるAPIドキュメントサーバとしてDocHubを紹介します。 メイン画面です。今はCSS/HTML/JavaScript/DOM/jQuery/PHP/Pythonに対応しています。 検索はインクリメンタルです。入力するたびに絞り込まれていきます。 後は関数名を選択すればその説明が表示されます。 こちらはJavaScript。ユニークなURLが付くので後で見直すのも簡単です。 DocHubの特徴としてデータは常にオンラインにあるものを使用しているということがあります。そのためデータの更新を行う必要はなく、常に最新のドキュメントが参照できます。問題はインターネットを使う分、

  • JavaScript製の高度なアニメーションライブラリ·tween.js MOONGIFT

    tween.jsはActionScriptのTweenクラスを真似たJavaScriptアニメーションライブラリです。 かつてオンラインでアニメーションを表現しようと思ったならばFlashかGIFアニメーションを使うのが一般的でした。しかし今後JavaScriptの採用が増えていく中では別な作法を学ばなければなりません。そこで今回はJavaScript製のアニメーションライブラリtween.jsを紹介します。 デモ1。四角のエレメントが左右に動き回ります。 1,000のバーが左右に動きます。 4096個のセルが徐々に色を変化させます。 グラフです。様々な描き方に対応しています。 動画の再生に合わせて右に動いていくデモです。同期されているのがポイントです。 デモ動画です。当はもっと速く動きます。 tween.jsはActionScriptのTweenクラスを模して作られているとの事です。

  • シンプルで格好いい。親切なコードレビューシステム·Barkeep MOONGIFT

    BarkeepはGitリポジトリに対応したユーザビリティ高いコードレビューシステムです。 会社でプログラミングを行っているとそのコードの品質はばらつきが出てきます。そうするとバグが多くなったり、予期しない問題に直面したりします。それを防ぐのに有効なのがコードレビューです。Barkeepはユーザフレンドリーなコードレビューシステムになっています。 メイン画面です。コミットログが並んでいます。 詳細です。差分が表示されています。 サイドバイサイド。アニメーションしながら表示されて格好いいです。 コードをダブルクリックするとコメントできます。 コメントしました。 一つにまとまっている場合もコメントできます。 レビュー依頼もできます。 ステータスです。レビューされている、されていないといった情報が一目で分かります。 検索結果です。 こちらはプロフィール。 Barkeepは検索における入力補完やフィ

  • 自分だけのアルゴリズムで勝負。自動FX取引ソフトウェア·jiji MOONGIFT

    jijiはRuby製の自動FX取引ソフトウェアです。 FXで収益を出すというのはとても大変なことで、よく大損した人たちの阿鼻叫喚を聞きます。とは言えFXをはじめたいと思う人は多く、関連書籍もたくさんあります。自分なりの収益を出す方法がある、そう考える人はjijiを使ってみると面白いかも知れません。 グラフです。細かく描かれています。画像は全て公式サイトより。 統計情報です。 エージェント作成です。ここが肝になります。 開始を押すと実際のルールが運用開始されます。 ログです。 jijiは自分で記述した取引ルールに従って完全自動でFX取引を行います。もちろん必ず利益が出るという訳ではないのでご注意ください。スタンドアローンな状態で動き続けるので一日中相場を追いかけていられないサラリーマンなどに向いているかも知れません。 jijiが対応しているのはクリック証券とSBI証券になります。 jijiは

    自分だけのアルゴリズムで勝負。自動FX取引ソフトウェア·jiji MOONGIFT
  • WebベースのMongoDB管理インタフェース·mViewer MOONGIFT

    mViewerはWebベースのシンプルなMongoDB管理インタフェースです。 最近はNoSQLを運用の一部に使うことが増えてきました。そうなると必要になるのが管理ツールです。すぐに使えて手軽なものが良ければmViewerを使ってみましょう。起動コマンドも用意されていて簡単です。 トップページです。ログインします。 ログインしました。左側にデータベースが並んでいます。 データベースを選択するとコレクションが表示されます。 コレクションはツリーテーブルで表示もできます。 サーバの状況表示。 データベースの状況表示。 ツリーを開いてさらに内部の値を確認できます。 Flashベースの利用状況モニタリング。 新しいデータベースの作成もできます。 コンテクストメニュー。 デモ動画です。 mViewerはデータベースの作成や削除、コレクションの作成、更新と削除、GridFSファイルの追加、表示、ダウン

  • アプリ開発者必見。リアルタイムアプリ利用解析·Countly MOONGIFT

    Countlyはモバイルアプリの利用解析ソフトウェアです。 Webサイトにはアクセス解析ソフトウェアを導入するのが当たり前になっています。同様にモバイルアプリについてもその利用について解析が必要な段階にきているのではないでしょうか。今回紹介するCountlyはまさにそのためのソフトウェア、モバイルアプリ解析サービスになります。 ログイン画面です。 ダッシュボードです。 個々のウィジェットにマウスオーバーなどが仕掛けてあってインタラクティブなっています。 グラフをドラッグして範囲指定すれば表示範囲が絞り込めます。 イベント関係のログです。 ユーザごとのログです。 ユーザロイヤリティです。 キャリア分析です。 アプリのマネジメント画面です。 Countlyはリアルタイム解析、MongoDBを使った高速さ、スタイリッシュな画面、高い拡張性、イベント駆動対応、セッションやキャリアなど様々な情報との

  • 200を越えるアイコンが揃ったBootstrap向けWeb Font·Font Awesome MOONGIFT

    Font AwesomeはBootstrapと組み合わせて使えるアイコンを集めたWeb Fontです。 Twitter Bootstrapの便利な機能の一つにアイコンパックがあります。ちょっとした装飾を手軽に付け加えられるのは便利です。そんなBootstrapに200以上のアイコンを追加するのがFont Awesomeです。Web Fontで作られたアイコンパックです。 全てのアイコンです。 ソーシャルアイコンも揃っています。 例です。ドロップダウンやボタンにつけています。 大きさが自由に変更できるのもフォントならではです。 ドロップダウンにつけると機能がより分かりやすくなります。 カスタマイズすればレーティングに使ったりもできます。 ファイル構成です。SVGフォントが提供されます。 Font AwesomeはTwitter Bootstrapで提供されているものに加えて色々な場面で役立

  • Googleマップをもっと簡単に使おう·gmaps.js MOONGIFT

    gmaps.jsはGoogleマップを使いやすくするJavaScriptライブラリです。 GoogleマップではJavaScriptAPIも提供されていますが、使い勝手が良いとは言えません。活用していくならばもっと使いやすいgmaps.jsを利用しましょう。 まず普通の表示。GMapsに位置情報を渡すだけです。超簡単。 イベントも取れます。クリックやドラッグなど様々なイベントが使えます。 マーカーの追加も分かりやすいです。マーカーにイベントをつけるのも簡単。 HTMLコンテンツを表示するのも手軽です。 HTML5の位置情報取得にも対応しています。 住所を検索してジオコーディング。 ドローです。指定は大変ですが。 オーバーレイ表示です。 ルート検索です。二つの位置情報を渡すだけです。 ルート検索をさらにポイントごとに表示していくこともできます。 こちらは静的なマップ。画像として表示できます

    Googleマップをもっと簡単に使おう·gmaps.js MOONGIFT
  • 素晴らしきOSSの世界。開発停止後の有志によるパッチで磨きをかけた·ckw-mod MOONGIFT

    ckw-modは既に開発の停止しているWindows用プロンプトckwの後継プロジェクトです。 とにかく使い勝手の悪いWindowsのコマンドプロンプト。それをぐっと使いやすくしてくれるのがckwです。既に家の開発は終了していましたがその後も有志による開発が続き、そこで生まれたパッチを取り込んで生まれたのがckw-modです。 メイン画面です。 通常のコマンドプロンプト同様に使えますが、いちいちメニューから選択せずにいきなりマウスで矩形コピーできます。個人的にはこれだけでも十分嬉しいです。 日語も入力できます。赤い入力カーソルになるので分かりやすいです。 設定はテキストファイルベースで行います。色々カスタマイズできます。 半透明化もできます。 ckw自身は実体のコマンドプロンプトは隠しつつキー操作やUI部についてのみ置き換えています。これで快適なコマンドプロンプト生活が送れるようになり

    素晴らしきOSSの世界。開発停止後の有志によるパッチで磨きをかけた·ckw-mod MOONGIFT
  • これが決定版?フォルダを監視してCSS/JavaScript/HTMLを生成·Fire.app MOONGIFT

    Fire.appはフォルダを監視してSass/Compass/CoffeeScriptを自動変換するソフトウェアです。 最近はCSS/JavaScript/HTMLをそのまま書くのではなくSassやCoffeeScript、Haml/Markdownを使ってそれぞれのフォーマットに変換するのが当たり前になってきています。そこで使ってみたいのがFire.app、自動ファイル変換ソフトウェアです。 起動します。 メニュー常駐型です。 設定画面です。 Growlを使った通知に対応しています。 Livereloadに対応しています。 履歴です。 フォルダを指定しました。 プロジェクトテンプレートを生成してくれる機能があります。 生成しました。後は修正すると自動的に別フォーマットファイルを生成してくれます。 Fire.appはSass/CompassからCSSを、Haml/ERB/Markdown

    これが決定版?フォルダを監視してCSS/JavaScript/HTMLを生成·Fire.app MOONGIFT
    Akineko
    Akineko 2012/05/01
  • ワンクリックでMac OSX上にRuby on Rails開発環境を構築·Rails One Click MOONGIFT

    Rails One ClickはMac OSXRuby on Rails開発環境をボタン一つで整えてくれるソフトウェアです。 Mac OSXにおけるRuby on Rails開発環境を一気に整えてくれるのがRails One Clickです。ウィザード方式でボタンクリックだけでRuby on Railsが開発できるようになります。 メイン画面です。ボタンを押すとインストールが開始します。予めXcodeがインストールされている必要があります。 ダウンロードやコンパイルも同時なのでちょっと時間がかかります。 ログです。 完了しました。 この画面が表示されていれば完了です。 デモ動画です。 Rails One ClickはDocuments以下に一通りの環境をインストールするので、ルート権限不要で使えるのが便利です。 Rails One ClickはMac OSX用のオープンソース・ソフトウェ

  • iOS向け最適化サイトを作る際に便利なJavaScriptライブラリ·iOS.js MOONGIFT

    iOS.jsはiOS対応のWebサイトを作る際に役立つ機能を提供するJavaScriptライブラリです。 iOS向け最適化サイトを作る際には二種類の方法があります。jQuery MobileやUiUIKitのようなテーマを使って作っていく方法と、フルスクラッチです。もしフルスクラッチで作っていくならば一緒に使ってみてほしいライブラリがiOS.jsです。 通常だとこんな感じに表示されてしまうページが… iOS.jsを通すことでマックス表示にできます。 こんな感じに重なってしまうページも… iOS.jsを通すと適切に分かれて表示されます。 その他、こうやって画面サイズの取得もできます。 iOS.jsではその他、Webアプリモードとして動かしている場合はリンクのターゲットを指定してMobile Safariに飛ばないようにしたり、iOSデバイス限定のスタイルシート設定を加えられたり、iPhone

  • Bootstrapを使おう!様々なカラーテーマ、プラグインを用意·Kickstrap MOONGIFT

    KickstrapはBootstrapをベースにしたテーマ、プラグインを提供するソフトウェアです。 最近作られるWebサービスでよく使われているBootstrap。そんなBootstrapは固定色でそれっぽさが感じられてしまうのが欠点でしたが、見事に打ち消してくれるのがKickstrapです。 色が変わると随分印象が違います。 テーマ機能があります。 青と白。 こんな感じのシンプルなテーマも。 逆にカラフルなものもあります。 基は同じですが、印象は違いますね。 好みのテーマを選べます。 JavaScriptプラグインがデフォルトよりもぐっと増えています。 Kickstrapを使えばBootstrapをより便利に使えるでしょう。JavaScriptプラグインも通知機能をはじめ、色々なものが追加されていますのでWebサイトをより強力にパワーアップできるはずです。 KickstrapはHTML

  • すごいぞ!HTML5で顔認識·HTML5 Face Detection MOONGIFT

    HTML5 Face DetectionはHTML5を使って動画から顔をリアルタイム認識します。 HTML5はどこまで行くのか、それを改めて思い起こさせる凄いソフトウェアがHTML5 Face Detectionです。何と動画の顔認識をリアルタイムに行ってしまいます。 デモ動画です。上が動画、下がそれを解析して顔認識しているものです。 顔を動かしても付け目がね+鼻が追いかけてきます。 筆者トライの図。Glassesをタップすると認識処理が開始されます。 デモ動画 HTML5 Face Detectionは動画のフレームを読み込み、JavaScriptで顔認識をした後、Canvasタグに鼻眼鏡とともにレンダリングしています。はっきり言ってかなり重たいのですが、技術的にはとても面白いソフトウェアです。 HTML5 Face DetectionはHTML5/JavaScript製のソフトウェア(

  • Haskell製のWikiエンジン·Gitit MOONGIFT

    GititはWebベースのオープンソース・ソフトウェア。世界中には様々なプログラミング言語が存在するが、その一つとしてHaskellをご存知だろうか。筆者自身あつかったことがないので詳細は省くが、遅延評価と呼ばれる機能が特徴的な関数型プログラミング言語だ。 見やすいインタフェースのWikiエンジン 仕事趣味で使っているプログラミング言語を深く探求するのも良いが、新年でもあるし新しい世界に踏み出してみるのも面白そうだ。GititはHaskellを使って作られたWikiエンジンなので、Haskellの学習にはぴったりなソフトウェアと言えそうだ。 GititはWebサーバも提供されるソフトウェアで、起動すると5001番ポートで立ち上がる。画面はWikipedia風で、表示と編集、編集履歴そしてノートが付けられるようになっている。日語のタイトルページを作成することも可能だ。 編集画面 左側には

    Haskell製のWikiエンジン·Gitit MOONGIFT
  • Git + Wikiの妙技·Git-Wiki MOONGIFT

    Git-WikiはRuby製のオープンソース・ソフトウェア。土曜日と言えばウィキサタデー。日々新しい技術が生み出される中、それを使ったWikiエンジンが生み出されている。いやWikiのために新しい技術、概念ができているとも言えそうだ。 見た目もすっきりとして分かりやすい 最近人気の高いGitやMercurialといった分散化バージョン管理システム。ローカルでも使えるので非常に便利だ。そんな分散化バージョン管理システムとWikiエンジンを組み合わせてしまうのがGit-Wikiだ。 Git-Wikiは名前の通り、コンテンツ管理にGitを使う。そのため、バージョン管理が容易に行えるのが魅力だ。記法はMarkdownCreole、Textileと複数に対応している。作成したコンテンツはS5としてオンラインプレゼンテーションができたり、LaTeXとしてダウンロードすることもできる。 S5として出力

    Git + Wikiの妙技·Git-Wiki MOONGIFT