Famo.us·WebGL/Canvasを使って高度な表現を可能にするJavaScriptフレームワーク MOONGIFT
スマートフォンにおいてWebかネイティブかと言った議論は常にされています。ネイティブアプリは高度なUI/UXを提供する一方、インストールの手間が否めません。Webは速度やUXにおいて見劣りがします。 しかしWeb（HTML5）の進化は止まりません。ついにここまで！というフレームワークがFamo.usです。3Dを備えたレンダーを行うJavaScriptフレームワークになります。 Famo.usの使い方 たくさんのデモが登録されていますので見ていきましょう。 写真と画像の組み合わせ。左右から表示されるアニメーションもあります。 スクロールパララックスエフェクトのデモ。 アニメーションのデモ。 カレンダーの日付を選択するとスケジュールが開きます。アニメーションがスムーズです。 スライドして表示される写真のデモです。 ページ送りのデモ。 天気アプリデモ。ベクター調の表示がいいですね。 タスク管理。
favico.js·Faviconを自在にコントロール MOONGIFT
Webカムや動画までFaviconに流しちゃいます！ FaviconはWebサイトのマークとして大事な役割を担っていますが、単に同じ画像をいつまでも表示しているのでは面白みがありません。もっと活用したい、そう考える人に使ってみて欲しいのがfavico.jsです。 できること favico.jsができることはFaviconのダイナミックな変換です。例えば、 バッジ表示 別なアイコンに差し替え 動画の表示 Webカムの表示 ができます。Faviconの中でWebカムを表示したいと思うケースは思いつきませんが、バッジ表示やユーザによってアイコンを変えると言うのは十分ありえるのではないでしょうか。 バッジ表示についてはアニメーションや形を指定することもできます。 デモ バッジ表示。数はダイナミックに変更できます。 数をアップしました。 アイコンの差し替え。 動画の再生。 バッジの表示位置は指定でき
Google ChromeでJavaScriptのデバッグをする際にはぜひインストールを！·JS Runtime Inspector MOONGIFT
JS Runtime InspectorはGoogle ChromeのJavaScriptデバッグを強力にサポートしてくれるソフトウェアです。 最近はJavaScriptを徹底的に活用したWebアプリケーションも増えてきました。そんな中デバッグは非常に困難になってきています。そこで使ってみたいのがJS Runtime Inspectorです。 インスペクタにJS検索フィールドが追加されます。 検索結果です。 そこから定義されている場所に簡単に飛べます。 利用例。 JS Runtime Inspectorを使えばJavaScriptを掘り下げて調べるのがとても簡単になります。関数名の他、値でも検索できるので目的の処理を見つけるのが簡単になるはずです。 JS Runtime InspectorはGoogle Chrome用、MIT Licenseのオープンソース・ソフトウェアです。 MOONG
アプリ開発者必見。リアルタイムアプリ利用解析·Countly MOONGIFT
Countlyはモバイルアプリの利用解析ソフトウェアです。 Webサイトにはアクセス解析ソフトウェアを導入するのが当たり前になっています。同様にモバイルアプリについてもその利用について解析が必要な段階にきているのではないでしょうか。今回紹介するCountlyはまさにそのためのソフトウェア、モバイルアプリ解析サービスになります。 ログイン画面です。 ダッシュボードです。 個々のウィジェットにマウスオーバーなどが仕掛けてあってインタラクティブなっています。 グラフをドラッグして範囲指定すれば表示範囲が絞り込めます。 イベント関係のログです。 ユーザごとのログです。 ユーザロイヤリティです。 キャリア分析です。 アプリのマネジメント画面です。 Countlyはリアルタイム解析、MongoDBを使った高速さ、スタイリッシュな画面、高い拡張性、イベント駆動対応、セッションやキャリアなど様々な情報との
Metro UIをiOS/Androidに移植·TiMetro MOONGIFT
TiMetroはWindows PhoneのMetro UIをTitaniumで再現したモックアップアプリになります。 Windows Phoneが渾身の力をこめて投入してきたUIがMetroです。確かにすっきりとした格好いいインタフェースになっています。そんなMetro UIをTitaniumを使って再現したのがTiMetroになります。 最初にパネルが並んで表示されます。 パネルを選択するとアイテムが一覧されます。アニメーションが格好いいです。 デモ動画です。流れるようなアニメーションが格好いいです。 パネルやメニューをタップして情報を一覧表示するので、ダッシュボード的アプリで使っても面白いかも知れません。情報量が多いアプリにはぴったりです。 TiMetroはJavaScript/Titanium製のソフトウェア（ソースコードは公開されていますがライセンスは明記されていません）になりま
Google製のクライアントサイド、JavaScript製テンプレートエンジン·JsTemplate MOONGIFT
JsTemplateはGoogleが開発したJavaScript製のテンプレートエンジンです。 Webアプリケーションがさらに開発されていくために必要なのが高機能なJavaScriptテンプレートエンジンの存在です。幾つか出てきていますが今回紹介するのはかなり有力です。なぜならGoogleが開発したテンプレートエンジンだからです。それがJsTemplateです。 デモです。左上がテンプレート、右上がJSONの元データになります。 そして左下が実際に生成されたHTMLで、右下がレンダリング結果になります。 idを使ってテンプレート名を定義しています。 こういう風にデータがない場合のチェックもできます。 実際のコードです。jsdisplayのところに検証が入っているのが分かります。 データがある場合はもちろん繰り返し表示します。 実際のコードです。 JsTemplateは再帰処理ができたりev
すげえ！FlashLite1.1を解析してHTML5に変換·FlashForward MOONGIFT
ガラケーはFlashLiteに対応しており、多数のゲームが開発されてきました。そうした既存の資産を活かすべく開発されているのがFlashForwardです。iOS向けにFlashLite1.1からHTML5へ変換するソフトウェアです。 デモは多数用意されています。 アニメーションします。 SVGの他にCanvas阪も用意されています。 テキスト含めたアニメーションも可能です。 こういうゲーム系で活躍します。 陣取りゲーム風ゲームも再現できています。 こういうアニメーションはCanvasのが高速です。 指定した形を描きます。 日本語も使えます。 複雑なキャラクターも描けて、アニメーションもばっちりです。 左右に動いたりします。 バナーレベルは十分に使えます。 まさにゲーム用途にぴったりです。 FlashForwardでは予めSWFファイルを解析し、HTML5/SVGまたはCanvas/Jav
要チェック！Webベース、Ajaxを使った表計算ソフトウェア·dhtmlxSpreadsheet MOONGIFT
dhtmlxSpreadsheetは多数のWebブラウザに対応したWebベース表計算ソフトウェアです。 WebベースでもExcelのような編集がしたい、そんなニーズに応えるのがdhtmlxSpreadsheetです。PDFやExcelでのエクスポートにも対応した、すごいソフトウェアです。 まさに表計算といった感じの画面です。 計算式の埋め込みももちろんできます。 値を更新すれば計算式の入ったセルも更新されます。 セルの背景、文字色の変更もできます。 右寄せ、中央寄せも可能です。 計算式も多数用意されています。 マウスのドラッグで範囲選択可能です。 PDFエクスポート（実際には外部サービス利用）できます。日本語は表示されません。 同様にExcelでの出力にも対応しています。こちらは日本語に対応しています。 設定です。 セルの幅は変更できますが、カラムをクリックして全体選択といったことはできま
たった一行のJavaScriptでガラケー向けWebサイトをスマートフォンに最適化·sparrow.js MOONGIFT
sparrow.jsは既存のガラケー向けWebサイトをスマートフォン向けサイトに変換してくれるJavaScriptです。 sparrow.jsを使うと既存のガラケー向けWebサイトをスマートフォン向けサイトに変身させてくれます。それもたった一行のJavaScriptタグを追加するのみです。 ガラケー向けサイトをiPhoneで表示したところです。いわゆる普通の携帯電話向けサイトとしての表示です。テンプレートは「携帯専用無料テンプレート配布中 ： フリースタイル 携帯無料レンタルサーバー」よりお借りしました。 sparrow.jsを適用した表示です。デフォルトではフォントサイズや画像の表示が最適化されるのみとなっています。 sparrow.jsではその他、Viewportの自動挿入、スマートフォン向けのCSS定義、半角仮名を全角に変換、ページ内リンクをアニメーションに、絵文字を絵文字画像に変換
社内でも立てられるGitHubクローン·GitLab MOONGIFT
GitLabはRuby/Ruby on Railsで作られたGitHubクローンです。 GitHubは有料でプライベートリポジトリが持てますが、それでもセキュリティ上の理由でリポジトリを外だしできないケースはあるかと思います。そんなときに使ってみたいのがGitLab、GitHubクローンです。 ログイン必須になります。 ログインした後の画面です。登録済のプロジェクトが一覧表示されます。 一つのプロジェクトを閲覧しています。ソースツリーが出ます。ソースツリーは右へ右へスライドして表示されます。GitHubに似ています。 ソースコードハイライターも内蔵されています。rawでファイルをダウンロードできます。 タグやブランチを切り替えることもできます。 コミット履歴一覧です。 コミット詳細ではDiffが確認できます。 コミットに対するコメントも確認できます。 チーム設定です。複数人でのコラボレーシ
SVGでグラフを生成する·SVGGraph MOONGIFT
SVGGraphはPHP製のオープンソース・ソフトウェア。HTML5が正式に決まり、メジャーなブラウザがHTML5対応を強めている。そんな中、ようやく日の目を見そうなのがSVGだ。技術的には昔からあるものの、対応ブラウザが限られることもあってあまり使われてこなかった。 棒グラフ、円グラフ SVGを使うと幸せなのが、クライアントサイドでレンダリングを行えるということだ。サーバサイドでは画像を生成する必要がなく、XMLベースでベクターデータを出力すれば良いだけだ。そしてSVGを使ったグラフライブラリがSVGGraphだ。 SVGGraphはPHPを使ってグラフを生成する。対応しているグラフは棒グラフ、円グラフ、折れ線グラフ、散布図となっている。棒、円グラフは3D表示にすることも可能だ。画像とは異なり、リンクを埋め込むことができたり、値のツールチップを入れることもできる。 折れ線グラフおよび散布
YAML+MarkdownからHTMLプレゼン生成·Luminescence MOONGIFT
LuminescenceはPython製のオープンソース・ソフトウェア。数年前からHTMLでプレゼンテーションを作るのが一般化されており、勉強会などで数多く見かけるようになってきた。作成の手軽さはもちろん、発表後のオンラインでの公開も手軽だ。 生成されたHTMLファイル HTMLで作成する際に、素のHTMLファイルをごりごりと書く人はまずいないだろう。何らかのテキストフォーマットから変換するのが一般的ではないだろうか。他のフォーマットへの変換も考えるならYAMLをベースにするLuminescenceは良い選択かも知れない。 LuminescenceはYAMLファイルを使ってプレゼンテーションを生成するソフトウェアだ。内容についてはMarkdown機能が利用できる。コマンドラインで使うソフトウェアで、YAMLファイルとアウトプットするHTMLファイル名を指定して実行する。 YAMLの内容 背
スマートフォン対応の京都バス時刻表·xbus MOONGIFT
xbusはPython製/Google App Engine用のオープンソース・ソフトウェア。昔京都の人に東京の道は曲がりくねっていて分かりづらいと言われたことがある。確かに京都は区画がきちんとなされており、まっすぐで分かりやすい。 そんな京都を走るバスは直線的に走るものが多いようだ。そして自分の曲がりたい道に来たらバスを乗り換えて移動すれば良い。意外と合理的に思える。そのために必要なのがバスの乗り換え案内で、スマートフォンであればxbusを使えば一発だ。 xbusは京都バスの乗り換え案内システムだ。非常に分かりやすいシンプルなインタフェースで、乗る場所と降りる場所、時間を設定すれば乗り方を案内してくれる。乗る場所については現在位置を取得して自動検出してくれる機能もある。 検索結果は乗車時間、乗車時刻、下車時刻そして経路となっている。候補を幾つも表示してくれるのも便利だ。京都で生活する人は
iPhoneと母艦の写真を同期·Cinq MOONGIFT
CinqはiPhoneとWindows/Mac OSX用のフリーウェア。iPhoneで最大の欠点とも言えるのがUSBケーブルを使わないと同期できないという問題だ。iPodはまだ良いとして、無線LANまであるiPhone/iPod Touch/iPadでさえ有線同期なのはストレスだ。 母艦側 JailBreakすれば無線LANで同期することも可能なのだが、リスクがあるのも確かだ。ごく一部（今回は写真だが）の同期さえされれば良いのであればCinqを使えば非JailBreak環境でもネットワーク経由の同期が可能になる。 CinqはiPhone向けのフリーウェアだ。利用するにはCinqのアカウントが必須だ。そして登録後、WindowsまたはMac OSX用のサーバソフトウェアをダウンロードする。そして母艦でサーバを立ち上げたらiPhoneでCinqを立ち上げる。これで準備は完了だ。 iPhoneア
ATNDに代わるイベント管理システム·PARTAKE MOONGIFT
PARTAKEはJava製のオープンソース・ソフトウェア。勉強会や小規模なセミナーなどを開く際に参加者を募ったり管理するためのツールとしてATNDがよく使われている。とても手軽で便利なシステムなのだが、問題点も幾つか存在する。 トップページ まず最も大きな問題として参加者に連絡が取れないということだ。またあまりに手軽に参加できてしまうためにとりあえず参加しておいて、そのこと自体を忘れてしまうなんてこともある。それらを解決するために開発されたのがPARTAKEだ。 PARTAKEはユーザ管理の基盤としてTwitterを用いている。そのためいざとなれば連絡が付けられるのが特徴だ。さらにOpenIDを利用することもできるが、事前にTwitterのIDとの紐付けが必要になっている。さらにリマインダー機能が備わっている。 イベント詳細 面白いのは連絡手段にDMを使っているのだが、これを自分から自分に
3ファイルの比較、多数のVCSに対応した比較ソフトウェア·Diffuse MOONGIFT
DiffuseはWindows/Linux用のオープンソース・ソフトウェア。バージョン管理システムを使っている時に必須と言えるのがDiff、いわゆる差分ツールだ。コミット前にどこが変更されているか確認したり、既にコミットされているファイルで変更点を確認したりするのに使える。 日本語にも対応している その便利さに慣れるとバージョン管理されていないテキストファイルなどでも複数のファイルを比較したりするのに使うようになる。まさにテキスト編集においてなくてはならない存在だ。そんなDiffツールの一つ、Diffuseを紹介しよう。 Diffuseは2ファイルの比較はもちろん、3ファイルの比較にも対応している。行単位はもちろん、文字単位の比較も行われており、異なる部分の色が変わるようになっている。行ごとでざっと確認しつつ実際にどこが違うのかは文字単位で終えるのだ。 設定画面 さらにBazaar/CVS
地図とデータをデスクトップ上でマッピング·Maps on a Stick MOONGIFT
Maps on a StickはWebブラウザ上で地図データの表示、外部データの描画を行うソフトウェア。 [/s2If] Maps on a StickはWindows/Mac OSX用のオープンソース・ソフトウェア。地図というのは非常に魅力的なコンテンツだ。旅行やイベント情報、出張、引っ越しなど様々な場面で地図データが使われる。リアルに密着したデータだからこそ利用価値が大きいのだ。 そんな地図データに対して外部のデータをマッピングする際によく使われるのがGoogle Earthだろう。だがグラフィックス機能を充実させたためにかなり動作が重たい。そこで使ってみたいのがブラウザベースで使えるMaps on a Stickだ。 Maps on a Stickは名前の通り、解凍するだけですぐに使えるソフトウェアだ。実行するとWebサーバが立ち上がるので、Webブラウザからアクセスすれば良い。外部
Spriteを使ったJavaScript製のアニメーションライブラリ·Sprite.js MOONGIFT
Sprite.jsはJavaScript製のオープンソース・ソフトウェア。JavaScriptを使ってゲームを作る場合、キャラクターの描画には二種類の方法が考えられるだろう。一つは画像を使う方法、もう一つはドット単位やCanvasを使って直接描画する方法だ。 32体の人形が歩き回るデモ 後者はあまりに面倒だ。だから大抵画像を使った方法を選択するはずだ。そんな時、歩いたりジャンプしたりするアクションごとに画像が分かれていると、予め読み込んでおくデータ数が増えてしまう。それを解決するのがSprite.jsだ。 Sprite.jsがユニークなのは、一枚の画像を使って一つのキャラクターを表現する所にある。つまりGoogleなどがよく使っている小さなアイコン画像を固めて一つの画像ファイルにし、CSSを使って表示場所を切り替えて描画するSpriteをアニメーションに使っているのだ。 キー入力で動くデモ
Webベースのファイルストア·DropBox MOONGIFT
DropBoxはPHP製のオープンソース・ソフトウェア。一般のPCに比べてサーバのHDDは耐久性があるものを選択する。だからクライアントPCに大量のデータを置いておくのは不都合なことだ。ファイルはできるサーバ上に置いておいた方が安全だ。 メイン画面 社内で皆で共有で使うファイルはもとより、個人的に大事なデータも含めてみんなサーバ上にホストしてしまおう。そのためのソフトウェアがDropBoxだ。同名サービスとは関連がないのでご注意いただきたい。 DropBoxはサーバ上に設置し、Perlで作られた設定ファイル生成を行えばすぐに使えるようになる。Basic認証を行うようになっており、認証したときのユーザ名を使ってファイルを保存できる。ファイルはプライベートまたはパブリックが指定可能だ。 パブリックにしたファイルは他のユーザもアクセスし、ダウンロードできるようになる。ファイルの一括アップロードが
MOONGIFT : ヘッダーに仕込んでおくと幸せになれるJavaScript「Head JS」 オープンソース・ソフトウェア/フリーウェアを毎日紹介
Head JSはヘッダーに組み込み、JavaScript/CSSの管理を補助するライブラリ。 [/s2If] Head JSはJavaScript製のオープンソース・ソフトウェア。HTMLのヘッダーで行うべき処理は多い。SEO対策としてキーワードの設定や説明文の追加、さらにJavaScriptファイルを読み込んだりCSSを設定したりする。いつの間にかヘッダーがとても長いものになってしまっていたりする。 スクリプトの読み込み さらにJavaScriptを多数読み込んだりすると表示速度に影響が出てしまう。作業の面倒さと複雑さを解決してくれる便利なJavaScriptライブラリがHead JSだ。ヘッダーに入れておくと便利に使えるはずだ。 Head JSが提供する機能は多い。JavaScriptの読み込みを指定することで平行して（しかし順番に）読み込んでくれる。そして読み込んだ後、指定した関数を
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
