WebでTitaniumの画面生成コードをさくっと作る·Titanium Form Designer MOONGIFT
Titanium Form DesignerはWebブラウザ上でTitaniumのUIコードを生成するソフトウェアです。 TitaniumはJavaScriptのコードの中でUIを定義して画面を作成します。プログラマーにとっては分かりやすいかも知れませんが、慣れてくると面倒に感じるかもしれません。そこでTitanium Form Designerを使ってビジュアル的に画面を作成してみましょう。 作成画面です。左側からコンテンツを中央の画面にドロップします。 ドロップするとプロパティウィンドウが表示されます。 画像の場合はURLを入力します。 右側にソースが表示されています。これをコードに貼付ければ画面が作成されます。 Titanium Form Designerではまだ単純に追加したオブジェクトごとに画面を生成するくらいしかできませんが、そこは将来性に期待といったところでしょうか。また基礎
クエリの改善に。MySQLのSlow Query Logを可視化する·MySQL slow-query-log Visualizer MOONGIFT
MySQL slow-query-log VisualizerはMySQLの時間のかかるクエリをWeb上で閲覧するソフトウェアです。 MySQLには実行時間の遅いクエリをログファイルに書き出す機能があります。単純にテキストに吐かれるだけなので分析に時間がかかってしまうのではないでしょうか。そこで使ってみたいのがWebブラウザベースの解析ソフトウェアMySQL slow-query-log Visualizerです。 サンプルです。データ量が多くないとあまり面白くないですね。 公式サイトより。曜日ごとに発生回数をグラフ化しています。 クエリログファイルをWebブラウザの画面にドロップするだけで解析処理が行われます。その結果はグラフに描かれる仕組みです。また、クエリは一覧で表示され、任意の文字でフィルタリングすることもできます。曜日と時間によって分析されるので対応すべきポイントが分かりやすくな
国際化対応した請求書管理システム·siwapp MOONGIFT
siwappはWebベースの請求管理システムです。 ビジネスをやっていたら忘れてはならないのが請求書です。月1回か2回かは会社によって違いますが、いずれにしても手作業で作っていてはかなり面倒なはずです。そこで使ってみたいのがオンラインの請求管理であるsiwappです。 トップページです。 ログインしました。都度の請求書と定期的に繰り返す請求書の二つがあります。 請求書の詳細です。 こちらは継続請求の一覧です。 請求書を作成する画面です。 入金処理を実行します。 設定画面です。 siwappは請求書をPDFで出力できます。税設定や複数の通貨単位にも対応しているので、英語版ながら日本でも使えるでしょう。 siwappはPHP製のオープンソース・ソフトウェア（MIT License）です。 MOONGIFTはこう見る 個人的には請求書の管理を独自のシステムで行っていましたが、最近Make Lea
Googleマップをもっと簡単に使おう·gmaps.js MOONGIFT
gmaps.jsはGoogleマップを使いやすくするJavaScriptライブラリです。 GoogleマップではJavaScriptのAPIも提供されていますが、使い勝手が良いとは言えません。活用していくならばもっと使いやすいgmaps.jsを利用しましょう。 まず普通の表示。GMapsに位置情報を渡すだけです。超簡単。 イベントも取れます。クリックやドラッグなど様々なイベントが使えます。 マーカーの追加も分かりやすいです。マーカーにイベントをつけるのも簡単。 HTMLコンテンツを表示するのも手軽です。 HTML5の位置情報取得にも対応しています。 住所を検索してジオコーディング。 ドローです。指定は大変ですが。 オーバーレイ表示です。 ルート検索です。二つの位置情報を渡すだけです。 ルート検索をさらにポイントごとに表示していくこともできます。 こちらは静的なマップ。画像として表示できます
DeNA製。高速、安全、習得容易なJavaScript代替言語·JSX MOONGIFT
JSXはDeNAの開発したJavaScript代替えのプログラミング言語です。 JavaScriptの冗長的な書き方は嫌だ、もっと楽に書きたいと考えた人が生み出した代替え言語がCoffeeScriptです。そんなCoffeeScriptに似たJavaScript代替え言語がJSXです。DeNA社の生み出した魅力的なプログラミング言語になります。 デモです。左側がJSXのコード、右側はJavaScriptに変換されたコードです。 log関数はconsole.logに出力されます。 静的な型チェックも行われています。 こんな感じで文字列を与えるとエラーになります。 インタフェースもサポートしています。 ちゃんとエラーになります。 変数の宣言も強制されます。 デモです。シューティングゲームです。 花火のデモです。 Box2Dのデモです。落下するのみで動かせません。 JSXの特徴は大きく分けて3つ
アプリ開発者必見。リアルタイムアプリ利用解析·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で提供されているものに加えて色々な場面で役立
JavaScriptにもMedia Queryを·Javascript onMediaQuery MOONGIFT
Javascript onMediaQueryはMedia Queryライクな振り分けをJavaScriptで実現するライブラリです。 CSS3ではMedia Queryという仕組みがあります。これはデバイスの画面幅や高さ、色などをキーにして専用のスタイルを適用する技術です。そして同様のメディアによる振り分けをJavaScriptにも提供するのがJavascript onMediaQueryです。 こちらはデスクトップの場合。 こちらはiPhoneの場合。画面幅を調整すればメッセージが変わります。 実際のコードです。contextによる指定で実行される関数が変わります。 Javascript onMediaQueryは画面幅を常に監視しているようで、Webブラウザウィンドウの大きさを変えるとメッセージが切り替わるようになっています。スマートフォンかタブレットかによる区別ではなく、画面幅に応
Webブラウザ上でreStructuredText記法で文書作成·Online reStructuredText editor MOONGIFT
Online reStructuredText editorはWebブラウザ上でreStructuredTextを記述できるソフトウェアです。 最近は様々なテキスト記法がありますが、その一つがreStructuredTextです。記法にまだあまり慣れていない、そんな方でも気軽に記述できるようになるのがOnline reStructuredText editorです。 メイン画面です。左がエディター、右が変換された後の文書が表示されます。 サンプルの記述です。ツールバー部分のボタンを使うと記法が自動で挿入されます。 リアルタイムのコードチェックも入っています。 日本語も問題なく扱えます。 リストを使ってみました。リストの自動挿入などはありません。 Natureに切り替えるとCSSを当てた見栄えになります。 対応しているマークアップは見出しや文字装飾、リスト、画像やリンクの挿入など多数あります
どこまでも自由に情報をまとめる·Meshcraft MOONGIFT
Meshcraftは自由度の高いコンセプトマップエディターです。 Webはとても自由度が高いです。しかしHTMLという枠の中で行動を迫られます（FlashやJavaアプレットもありますが）。しかしそうした枠を超えてとにかく自由に情報を蓄積していけるソフトウェアがMeshcraftです。 トップページです。色々な枠やテキストが浮かんでいます。これらは自由に動かしたり編集したりできます。マウスで全体の視点を動かすこともできます。 登録フォームです。下の部分が大きくなるのはなかなか気持ちいい感覚です。 こんな感じで情報を結びつけることもできます。 新しい項目を追加します。左クリックで追加されます。 項目を追加した後、ドラッグで線を引きます。これでリレーションができます。 互いの関係性を明記します。 枠付きの他、ラベルも追加できます。 Meshcraftはコンセプトマップエディターという名称になっ
これはいい！ドロップダウンに画像と説明文を追加·ddSlick MOONGIFT
ddSlickはドロップダウンメニューにアイコン、説明文を追加できるjQueryライブラリです。 常々HTMLのコンポーネントは貧弱だと思っていた。特にドロップダウンの使い勝手の悪さったらない。テキストしか表示できず、情報選択のUIとしてあまりに粗雑ではなかろうか。そしてみんなが望んでいたライブラリが登場した。それがddSlickだ！ 見よ、この格好いいドロップダウン！テキストに加えて画像が表示できるようになっています！ ダイナミックに変更も可能です。まず普通のドロップダウン。実にいけてない。 じゃじゃーん！ もちろん普通のドロップダウンライクに値が取得できます。選択した項目のデータも取れます。 外部から値を与えて表示項目を変更することもできます。 コールバック対応！ デフォルトの選択もできます。 画像を右に寄せられます。 さらに説明をつけて行ごとに高さを可変にもできます。 画像がない場合
JavaScriptオブジェクト用問い合わせ言語·SpahQL MOONGIFT
SpahQLはJavaScriptオブジェクトのデータ抽出に使えるクエリライブラリです。 WebアプリケーションではデータをJSONで利用するのが一般的です。データが大量にあるのであれば、そこから欲しいデータだけを抽出する仕組みが必要になるでしょう。JavaScriptでそれを可能にするのがSpahQLです。 例です。hash1というキーに対応したデータを取り出しています。 ネストして調べられます。 配列、ハッシュどちらにも使えます。 配列の場合は0などとキー指定もできます。 配列でサイズが1以上のものをピックアップしています。 データは抽出するだけでなく、プロパティを使ってサイズやデータの種別を調べることもできます。さらに正規表現を絡めてマッチするか否かをチェックするといった機能もあります。node.js、Webブラウザどちらでも使えるライブラリになっています。 SpahQLはJavaS
1行のコードで既存のテーブルにソート機能を追加·Table Sorting MOONGIFT
Table Sortingは既存のHTMLテーブルにソート機能を追加するJavaScriptライブラリです。 業務システムなどでテーブルを表示すると常に足らない機能を求められます。その第一が並べ替え機能でしょう。DBを操作しても良いですが、もっと単純に解決したいならTable Sortingを使ってみても良さそうです。 デモです。 カラムのクリックでソートが実行されます。 金額部分もきちんとソートされます。 JavaScriptのコードです。単純にクラスを指定するだけ。 HTMLのコードです。数値部分にも特に設定を行っていないところに注目。 Table Sortingは既存のテーブルを渡すだけで自動的にソート機能を追加してくれます。オブジェクトの型も判断して並び替えてくれるので手間いらずです。 Table SortingはJavaScript製、GPL v3のオープンソース・ソフトウェアで
潜むセキュリティ問題を事前に暴きだす·Rails Brakeman MOONGIFT
Rails BrakemanはRailsアプリケーションのリポジトリを読み込んでセキュリティチェックしてくれるサービスです。 セキュアなプログラミングをするためのノウハウは幾つかあります。つまりそれに沿って現状のコードを確認すれば、万一のセキュリティインシデントを未然に防げるかも知れません。Railsアプリケーションについてそれを行うのがRails Brakemanです。 プロジェクト詳細。こうやって一覧で確認できます。 セキュリティウォーニング、モデル、ビューのセキュリティウォーニングが出ています。 クロスサイトスクリプティング関係のウォーニングが多いです。 クリックするとどの行における警告か確認できます。 Rails Brakemanでは盲目的にパラメータを放り込んだり、その結果をそのままリダイレクトに使ったりすることを禁じています。なおこのチェックはバグを発見している訳ではなく、セキ
試そう。Webブラウザ上で3Dモデリング·Shapesmith MOONGIFT
ShapesmithはWebブラウザ上で3Dオブジェクトのモデリングを行うソフトウェアです。 テキストを書くサービスはたくさんあります。最近ではWeb上で画像編集を行えるサービスもあります。YouTubeなどは動画の編集にも対応しています。次にくるのはそう、3Dです。ShapesmithはWeb上で3Dモデリングが行えるソフトウェアです。 図面です。座標軸が表示されています。 右クリックしてオブジェクトを選択します。 配置しました。 次に別なオブジェクトを配置します。 高さを変更しています。 めり込んだ図形です。 基本オブジェクトはいくつもあります。 拡張メニューです。 デモ動画です。 Shapesmithは基本的なオブジェクトを使ってそれらを組み合わせてモデルを作り上げていきます。慣れるまではなかなか思い通りに動かないかも知れません。が、3D空間でモデルを作り上げていく感覚はとても面白い
こんなことまで。HTML5による動画チャットや通話を可能にする·sipML5 MOONGIFT
sipML5はHTML5で実装されたSIPクライアントです。 インターネット電話というとSkypeやLINEが有名ですが、IP電話もまたインターネットを使った電話システムです。そこで使われているSIPをHTML5でサポートしたのがsipML5です。 コネクトしました。 が、対話しようとしてもできませんでした…。 利用に際してはMediaStream（WebRTC）を有効にする必要があります。 デモ動画（iPadで会話する図） デモ動画（Androidで会話する図） sipML5は任意のSIPサーバに接続し、動画や音声通話が楽しめるようになります。これまで同様の機能を実現するにはFlashの力を使わざるを得なかったのですが…すごい時代になったものです。 sipML5はHTML5/JavaScript製、GPL v3のオープンソース・ソフトウェアです。 MOONGIFTはこう見る sipML5
スムーズなアニメーションが格好いい、埋め込み型プレゼンテーション·Presenteer.js MOONGIFT
Presenteer.jsはページ内の一部をクリックで動作するプレゼンテーションにするライブラリです。 Web上で動くスライドライブラリは多数あります。大抵プレゼンテーションを前提に大画面で表示されるものですが、Presenteer.jsはちょっと違います。Webサイト内に埋め込んでサービスを紹介したりするのに使えるプレゼンテーションライブラリです。 この中央部、水色の部分がプレゼンテーション部です。 クリックで内容が切り替わりますが、そのダイナミックな動きが目を引きます。 こんな感じで文字のローテーションも可能です。 スライダー風にも使えます。 デモ動画です。格好いい動きが分かるかと思います。 Presenteer.jsの魅力は何と言ってもスムーズなアニメーションにあると言えるでしょう。クリックするたびに異なるアニメーションが起こるので目を奪われます。テキスト主体のプレゼンテーションにな
PDFをPDFのまま差分チェック·DiffPDF MOONGIFT
DiffPDFはPDFファイル同士のテキスト、描画の差分を表示するソフトウェアです。 プログラマーが開発中によく使うのがDiffです。行や単語単位で比較し、どこが違うか分かるので修正したり相違点をチェックしたりするのにとても便利です。そんなDiffをPDFでも使えるようにするのがDiffPDFです。 メイン画面です。 二つのファイルを指定して比較しました。異なるテキスト部分がハイライト表示されています。 こんな感じです。 線の表示の違いも取れます。 こうするとぐっと分かりやすくなります。 この手のソフトウェアとしてPDFをテキスト化して、それを比較するものはありましたが、PDFのまま比較してくれるという点においてDiffPDFは非常に便利です。なお日本語には対応しておらず、PDFとして表示した時点でも内容が抜け落ちてしまっています。 DiffPDFはWindows/Mac OSX/Linu
情報をリスト化して整理するオンラインリストマネージャ·Surreal ToDo MOONGIFT
Surreal ToDoはAjaxを活用したオンラインのリストマネージャです。 会議室でホワイトボードを前に挙がったアイディアをメモしたり、やるべき作業をリストアップして付箋で貼付けたりしたことはないでしょうか。同様の管理をオンラインで提供するのがSurreal ToDoです。 デモです。ページとリスト、アイテムの三階層でデータを管理します。 ドラッグで並び替えたり、ダブルクリックで編集したりします。 タブを追加できます。 プラス画像をクリックして項目を追加します。 右クリックでコンテクストメニューが表示されます。 WYSIWYGエディタを使って編集もできます。 Surreal ToDoはブレインストーミングやプロジェクト管理に使うこともできます。ドラッグアンドドロップやインラインの編集などJavaScriptを活用した作りになっており、操作はとてもスムーズです。タブやページ、リストを使っ
お試しを！クールなUIの掲示板·esoTalk MOONGIFT
esoTalkは格好いいUIの掲示板ソフトウェアです。 Webコミュニティの基本と言えば掲示板です。２ちゃんねるからphpBBをはじめ、多数の掲示板ソフトウェアが存在しますが今回紹介するのは最近のスタイルを活かしたesoTalkです。 スレッド一覧です。 スレッド詳細です。 新規登録します。 登録すると既読管理ができるようになります。 タグで絞り込んだりできます。 返信用ボックスです。 esoTalkはスタイリッシュな見栄えに加えて、JavaScriptを使った各種アニメーションが特徴となっています。実際使ってみると、その使い勝手の良さが分かるはずです。 esoTalkはPHP製のオープンソース・ソフトウェア（GPL v2）です。 MOONGIFTはこう見る インターネット上のサービスは流行り廃りがありますが、それでも２ちゃんねるは根強く生き残っています。コミュニティサイトは一度形成される
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
