Maze Generator & Solver - 迷路を作り自分で解く迷路ジェネレータ
機械学習の分野は発展が著しいです。Googleは自動で任意のゲームをクリアするソフトウェアを作っており、時間をかければかけるほど優秀になっていっています。機械が自分で問題を考え、それを解くようになるとどんどん発展していってしまうのではないでしょうか。 そんな訳（？）ではないでしょうが、Maze Generator & Solverも一つの可能性を感じさせてくれるソフトウェアです。自分で問題を作って、それを解くという2つの機能を備えています。 Maze Generator & Solverの使い方 まずはパズルを生成します。 そして2カ所を指定すると自動的にパズルが解かれていきます。 パラメータを変更すれば簡単なものも。 超難しいものまで思いのままです。 それでも解答は一発です。 動画にするとこんな感じです。 Maze Generator & Solverは2つのエンジンを持っています。迷路
TouchVisualizer – iOSアプリでタップしている箇所を可視化
アプリはこれまでのソフトウェアと異なり、マウスポインタ的なものはありません。そのためデモなどでアプリを使っていると、どこをタップしているのかが分かりづらいという問題があります。ボタンをタップする程度であればまだしも、マルチタッチを使っているとどこにタッチが発生しているのか分かりづらいでしょう。 そこで使ってみたいのがTouchVisualizerです。TouchVisualizerはiOSアプリのタッチした場所を目立たせてくれるライブラリです。 TouchVisualizerの使い方 TouchVisualizerのデモを立ち上げてみました。 ちゃんとタップしている場所が分かります。さらにタップしている時間を表示することもできます。デモではGitHubアイコンですが、これは自由に変更できます。アプリの動作説明に使うこともできるでしょう。 TouchVisualizerはSwift製、iOS
Etherdraw - コラボレーション・ドローイング・ソフトウェア MOONGIFT
Webの面白さはコラボレーションにあります。同じようなアプリケーションでもコラボレーション機能を追加することで全く違う魅力が出るということがたくさんあります。Etherpadと呼ばれるコラボレーションテキストエディタもその一つです。 今回はそのEtherpad開発チームが作ったEtherdrawを紹介します。Etherdrawはコラボレーションドローイングを可能にするソフトウェアです。 Etherdrawの使い方 Etherdrawはペイントとドローの両方を兼ね備えたようなソフトウェアです。ブログなど任意のサイトに埋め込んで利用できます。 色やペン種を変えて書けます。書いた結果はリアルタイムに別なブラウザに反映されます。 書いた内容はオブジェクトになっていて、ドラッグして移動できます。この辺りはドロー的で面白いです。また、画像のアップロードもできます。 Etherdrawは専用サイトだけで
Quark Shell for Mac·HTML/JavaScriptを使って常駐アプリを作る MOONGIFT
ソフトウェアは必要な時だけ起動するものもありますが、メニューバー（Mac OSX）やタスクトレイ（Windows）に常駐させておくタイプのソフトウェアもあります。常駐型のソフトウェアは一度使って便利だと継続的に使ってもらえるようになる可能性があります。 そんな常駐型ソフトウェアをHTMLとJavaScriptで作れるのがQuark Shell for Macです。執筆時点ではMac OSXのみですが、近くWindowsにも対応予定となっています。 Quark Shell for Macの使い方 Quark Shell for Macのデモアプリを立ち上げたところです。 普通のアプリのUIのように見えます。しかし実体はHTMLファイルです。 メニューを出すこともできます。 設定画面もありますが、これもHTMLです。 タブで切り替えることもできます。 Quark Shell for MacはH
Perfmap - Webページパフォーマンスをヒートマップ化
MOONGIFTはオープンソース・ソフトウェアを紹介するブログです。2021年07月16日で更新停止しました Webサイトの表示速度は重要です。スマートフォンなどにおいても表示が高速に行えなければ訪問者はあっという間に離れてしまいます。Google Chromeなどの開発者用ツールではリソース単位で一覧表示はできますが、今ひとつ実感として沸きづらいのが難点です。 そこで使ってみたいのがPerfmapです。リソース単位の表示速度をヒートマップ風にビジュアル化してくれるGoogle Chrome機能拡張です。 Perfmapの使い方 PerfmapはChrome Web Storeで配信されていますのでインストールは簡単です。アイコンが表示されたら準備完了です。 そして任意のWebサイトを表示し、アイコンをクリックします。 緑であれば総じて問題はないでしょう。2つの数字があり、一つ目はページが
Cape.JS - Virtual DOMをサポートしたJavaScriptフレームワーク MOONGIFT
Reactに注目が集まっているのは特にVirtual DOMによるところが大きいのではないでしょうか。JavaScript側ではとにかく必要な部分全体をレンダリングしてしまって、実際の描画についてはReactに任せられるのがメリットです。 そんなReactと同じくVirtual DOMをサポートしたJavaScript UIフレームワークがCape.JSです。他にもいくつもの機能が備わっています。 Cape.JSの使い方 Cape.JSのサンプルコードです。mというオブジェクトにタグを追加していくのが基本形です。 "use strict"; var TodoList = Cape.createComponentClass({ render: function(m) { m.ul(function(m) { this.items.forEach(function(item) { this.r
Mobiscroll - スマホWebサイトに使えるUIコンポーネント
MOONGIFTはオープンソース・ソフトウェアを紹介するブログです。2021年07月16日で更新停止しました Webサイトのモバイルシフトが進んでいます。Googleはクローリングにおいてスマートフォン対応しているか否かを指標に加えると発表し、さらに単なる表示を整えるだけでなくCSS3やCanvasを使ったアニメーションを使ってまるでモバイルアプリ化のようにも動作するWebサイトも増えています。 そんな中だからこそ知っておきたいライブラリがMobiscrollです。MobiscrollはスマートフォンネイティブレベルのUIコンポーネントを提供するライブラリです。 Mobiscrollの使い方 Mobiscrollは様々なコンポーネント、テーマが提供されています。基本は何かを選択するコンポーネントになるようです。例えばモーダルでの選択です。 日付の選択。 日付＋時間。 モーダルではなくインラ
react-engine·Reactでサーバサイドレンダリングするnode用ライブラリ MOONGIFT
Reactの魅力の一つにnodeを使ってサーバサイドレンダリングができるというのがあります。サーバサイドレンダリングを使うことで、初期表示はサーバサイドに任せつつ、その後の処理はクライアントサイドに任せることができるようになります。 今のところExpressが手軽に対応しているようなのですが、Paypal社が開発したのがreact-engineです。これはExpress（に限らないでしょうが）のビューをReactで行ってくれるライブラリです。 react-engineの使い方 react-engineを使ったレンダリング処理部分です。見たとおりReactです。レイアウトをサポートしています。 'use strict'; var React = require('react'); var React = require('../../../../node_modules/react/reac
wheelnav.js - 目を引く回転型メニュー MOONGIFT
WebのUIは基本的に静的で、アニメーションはそれだけ目を引きます。かといって今は簡単にアニメーションが実装できるようになっていますので、ほんの少し揺れた程度ではスルーされてしまうでしょう。 そこでwheelnav.jsの登場です。wheelnav.jsはダイナミックに回転する、目を引くこと間違いなしのライブラリです。 wheelnav.jsの使い方 デモです。マウスオーバーで文字が回転、クリックで円全体が回転します。 メニューに使った場合。アプリではこういうUIがありますよね。 初代iPodっぽいホイールUI。 こんな複雑なUIも可能です。 縦型メニューと組み合わせると格好良さそうです。 wheelnav.jsは回転するナビゲーションUIとなっています。Raphaël.jsを使っており、SVGで描画されています。メニューでの利用が基本のようですが、アイディア次第で色々な場面で使えそうです
VideoShader - iOSのカメラ映像をOpenGLでリアルタイム加工
MOONGIFTはオープンソース・ソフトウェアを紹介するブログです。2021年07月16日で更新停止しました FaceTimeのようなチャットツールではカメラから映像を取り込みつつ、リアルタイムに動画を加工する技術を備えています。写真であれば既によく知られていますが、動画でできるようになったのはマシンパワーが十分に高くなっているからでしょう。 さらにVideoShaderは動画のリアルタイム加工をスクリプトベースで行えるソフトウェアになります。 VideoShaderの使い方 VideoShaderのカメラを使うと映像が次のように加工されています。 さらにそのまま録画ができます。 VideoShaderでは専用のスクリプトを用意しており、JSONで定義するようになっています。例えばCartoonは次のようになります。 { "title":"Cartoon I", "pipeline":[
Wizard Warz - WebGLを使ったWeb向けマルチプレイヤーゲーム
今後、Webブラウザを使ったゲームが増えていくのは間違いありません。かといってかつてのソシャゲのようなものではなく、Flashも使いません。使うのはHTML5であり、WebGLやWebSocketになるでしょう。 ゲームは一人でやるのも良いですが、やはりみんなでわいわい遊ぶのが楽しいものです。そこで今回はWizard Warz、魔法使い同士のバトルゲームを紹介します。 Wizard Warzの使い方 サーバにアクセスすればゲームが楽しめます。今回は私一人しかいませんでしたが…。 こんな感じの島が舞台のゲームです。深い水の中にずっといると死亡します。 良い天気です。本当は敵もいるので、このままぼおっとしていると殺されるでしょう。 向こうの方に小さな点がたくさん見えます。 浮かんでいるのは魔法書です。これをゲットしていきます。自然に魔法書は復元するのでなくなることはないようです。 魔法書をゲッ
Salted – シンプルなHTMLメールテンプレート
テキストメールではユーザにスルーされがちで、より高いレスポンスを求めるのであればHTMLメールにする必要があります。ただしHTML化と言っても難しさがあります。それは閲覧デバイスが増えており、それぞれに最適化する必要があることです。 そのためにHTMLメールはレスポンシブにしなければなりません。昔からあるメーラー、GmailのようなWebメーラーなど様々なクライアントを考えた上でのHTMLメールテンプレートとしてSaltedを紹介します。 Saltedの使い方 下の画像が実際のテンプレートです。 コンテンツの幅、画像の幅が自動調整されます。 リスト表示もこのようになります。 レスポンシブなので幅を狭めるとこのように表示されます。 ボタンは幅いっぱいに大きくなります。 当たり前ですがメディアクエリーに対応しています。 デザインも最低限なのでカスタマイズは容易そうです。 Saltedを使うとH
Kiwi.js - 簡単に使えるHTML5ゲームエンジン MOONGIFT
HTML5によって表現力が高まっていき、さらにハードウェアとJavaScriptエンジンが高性能化することでWebベースのゲーム開発も現実的なものになってきました。高度なゲームはまだ難しいかも知れませんが、パズルゲームやRPGであれば十分こなせるようになっています。 今回はそんなHTML5ベースのゲームエンジンKiwi.jsを紹介します。デスクトップ、スマートフォンの両方に対応したゲームエンジンです。 Kiwi.jsの使い方 Kiwi.jsでは様々な機能のデモが用意されています。例えばスプライト画像による動きのあるアニメーション。マウスの動きに合わせて動きます。 アニメーションとして自動再生されるタイプもあります。 カメラ。オブジェクトを中心に映し続けます。 多くのオブジェクトを描画しても動きは遅くなりません。 キーボード入力もサポートしています。 テキストについても表示場所、フォント、色
bootstrap-google-plus·Google+風のBootstrapテーマ MOONGIFT
Bootstrapの良いところは構造が標準化されたことで、多くのテーマが作られていると言うことです。もし使っているデザインが時代遅れになってきたと思ったら、テーマを差し替えることで一気に新鮮みを出すことができます。 今回はBootstrapをGoogle+風にしてくれるテーマ、bootstrap-google-plusを紹介します。Google+がそもそも…げふんげふん。 bootstrap-google-plusの使い方 Bootstrapというと黒いメニューバーが印象的なデザインフレームワークですが、bootstrap-google-plusにするとこんな感じになります。 まさにGoogle+っぽい感じですよね。 投稿だけでもいくつものパターンが用意されています。 ページ表示っぽい感じ。 細かな部品も数多く揃っています。 モーダルのログインウィンドウ。 メニュー表示。 bootstra
TodoWhat - Python製、シンプルなタスク管理 MOONGIFT
タスク管理アプリは昔から存在しますが、今なお完成形の見えない分野でもあります。そのため様々なソフトウェアが存在し、各自が自分の好みに合わせてカスタマイズしています。 今回はシンプルなタスク管理、TodoWhatを紹介します。アーキテクチャ的にはBackboneとFlaskを使っています。 TodoWhatの使い方 例えばこんな感じにタスクを登録します。ドラッグ&ドロップで並び替えもできます。 アカウント登録。 クリックでステータスを変更します。 タスクにタグを追加できます。 見た目が若干派手ですが、機能はシンプルです。TodoWhatをそのまま使っても良いですが、コードをカスタマイズして使ってももちろん良いでしょう。TodoWhatはWebサービスも提供していますので、そちらを使うのも良さそうです。 TodoWhatはPython製のソフトウェア（ソースコードは公開されていますがライセンス
Gallerist – Sinatra製のiPhotoビューワー
iOSデバイスを使っている人であれば大抵iPhotoを使っているのではないでしょうか（好きか嫌いかは別として）。個人的にはとにかくすぐ重たくなる、ネットワーク越しだと特に動作が重い点が好きではありません。 とはいえ写真コンテンツはここにある…という方はGalleristを使ってみると良いかもしれません。WebベースのiPhoto/Apple Photoビューワーです。 Galleristの使い方 後は写真をクリックすると拡大表示されるはずなのですが、筆者の環境ではエラーになってしまいました。データはiPhotoが持っているSQLite3をそのまま見ているとのことです。Webブラウザからの方がLAN内のどこからでも使えますし、便利ではないでしょうか。 GalleristはRuby/Sinatra製のオープンソース・ソフトウェア（BSD License）です。 koraktor/galleri
Twine – ストーリーを整理するノートアプリ
プレゼンテーションは単純にスライドを並べてたんたんと説明していけば良いわけではありません。全体を通して一つのストーリーが必要です。ストーリーが一貫して提供されてこそ、聞き手は納得し、理解を深めることができます。 そんな納得感あるストーリーを作るのに適したソフトウェアがTwineです。Wikiっぽさのある面白いソフトウェアです。 Twineの使い方 Twineは元々Windows、Mac OSX用のソフトウェアでしたが、2.0からWebベースになったようです。プレゼンテーションのスライドや小説、マインドマップの代わりに使うのも良さそうです。 TwineはHTML5/JavaScript製のオープンソース・ソフトウェア（GPL v3）です。 Twine / An open-source tool for telling interactive, nonlinear stories tweeco
Sldn – SlideShareのスライドダウンローダー
MOONGIFTはオープンソース・ソフトウェアを紹介するブログです。2021年07月16日で更新停止しました SlideShareに勉強会などで使った資料をアップロードしている方はたくさんいます。中にはダウンロードして使いたい資料もあるでしょう。 しかしSlideShareではパーミッションを設定することでダウンロード不可に指定ができます。それでも資料が欲しい！という方はSldnを使ってみましょう。 Sldnの使い方 インストールはRubygemsで行います。 $ gem install sldn 後は引数にSlideShareのURLを渡すだけです。 $ sldn http://www.slideshare.net/AsialCorp/html5-43882851 I, [2015-03-09T14:57:24.889620 #17079] INFO -- : Open Url: htt
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Gruik – 共有もできるMarkdownのメモサービス