WebでTitaniumの画面生成コードをさくっと作る·Titanium Form Designer MOONGIFT
Titanium Form DesignerはWebブラウザ上でTitaniumのUIコードを生成するソフトウェアです。 TitaniumはJavaScriptのコードの中でUIを定義して画面を作成します。プログラマーにとっては分かりやすいかも知れませんが、慣れてくると面倒に感じるかもしれません。そこでTitanium Form Designerを使ってビジュアル的に画面を作成してみましょう。 作成画面です。左側からコンテンツを中央の画面にドロップします。 ドロップするとプロパティウィンドウが表示されます。 画像の場合はURLを入力します。 右側にソースが表示されています。これをコードに貼付ければ画面が作成されます。 Titanium Form Designerではまだ単純に追加したオブジェクトごとに画面を生成するくらいしかできませんが、そこは将来性に期待といったところでしょうか。また基礎
unDonutの復活か。unDonut + WebKit·unChromium MOONGIFT
unChromiumはunDonutのレンダリングエンジンをChromiumに変更したWebブラウザです。 2001年くらいはIEコンポーネントを使ったタブブラウザが隆盛でした。そんな時、個人的に使っていたのがunDonutです。そして年月は流れ…unDonutに新しい魅力を追加してかえってきたのがunChromiumです。名前の通り、unDonutのレンダリングエンジンをChromiumにしたWebブラウザです。 起動！このキャラは…安堂なつさんとでもおっしゃるんでしょうか？6年4組なので推定11歳？ おお、ちゃんと見られるぞ！（失礼） HTML5も動くぞ！ Chrome 18相当だそうです。 オプションが豊富なのはunDonutの証（どこまで使えるか分かりませんが）。 WebKitベースのレンダリングエンジンが使いたいと思いつつも、Safari for Windowsの酷さに辟易してい
JavaScriptオブジェクト用問い合わせ言語·SpahQL MOONGIFT
SpahQLはJavaScriptオブジェクトのデータ抽出に使えるクエリライブラリです。 WebアプリケーションではデータをJSONで利用するのが一般的です。データが大量にあるのであれば、そこから欲しいデータだけを抽出する仕組みが必要になるでしょう。JavaScriptでそれを可能にするのがSpahQLです。 例です。hash1というキーに対応したデータを取り出しています。 ネストして調べられます。 配列、ハッシュどちらにも使えます。 配列の場合は0などとキー指定もできます。 配列でサイズが1以上のものをピックアップしています。 データは抽出するだけでなく、プロパティを使ってサイズやデータの種別を調べることもできます。さらに正規表現を絡めてマッチするか否かをチェックするといった機能もあります。node.js、Webブラウザどちらでも使えるライブラリになっています。 SpahQLはJavaS
吹き出し風CSSデザインをオープンソースで·CSS Arrow Please MOONGIFT
CSS Arrow PleaseはCSSだけで作成する吹き出しデザインをオンライン上で行えるサービスです。 Twitterをはじめコミュニケーションが基本のサービスで欲しくなるのが吹き出し風のデザインです。そんなデザインをオンラインで簡単に作成できるのがCSS Arrow Pleaseです。 トップページです。左に描かれている吹き出しデザインが右側のCSSで作成されています。 吹き出しの位置は上下左右から選べます。 色はカラーピッカーを使って自由に選択できます。 カスタマイズしたパターンです。 CSS Arrow Pleaseでは吹き出しの配置や色、線の太さなどを自由にカスタマイズできます。後は出来上がったスタイルをコピーして自分のサイトに組み込むだけです。 CSS Arrow PleaseはHTML/CSS製のオープンソース・ソフトウェア（MIT License）です。 MOONGIFT
テキストエディタ派に。Titaniumアプリをコンソール上でコンパイル·MakeTi MOONGIFT
MakeTiはコンソール上でTitaniumアプリをコンパイル、実行するソフトウェアです。 Titaniumで作ったiOS/Androidアプリを実行する場合、Titanium StudioやTiDev Communityを使うのが一般的です。ですがこれではテキストエディタで開発している時に切り替えるのが不便です。そこで使ってみたいのがMakeTi、コンソールベースのTitaniumアプリ実行ソフトウェアです。 ファイルの内容です。 ヘルプです。プラットフォームやバージョンを指定して実行することもできます。 実行しました。無事起動します。 そのままログも受け取れます。 プラットフォームを指定して実行もできます。 MakeTiはTextmate用のプラグインも用意されており、Textmateで編集してそのまま実行もできるようになっています。iOSデバイスであればdeployオプションで実機イ
CSS3だけで作るプログレスバー·CSS3 Progress Bars MOONGIFT
CSS3 Progress BarsはCSS3を使ってプログレスバー表示を行います。 最近、複雑な表示ですらCSSだけでこなしてしまうようなハックが流行っていますが、CSS3 Progress BarsはCSS3だけを使ってプログレスバーを表示します。 表示例です。角丸や複数の組み合わせ表示ができます。 さらに細めのタイプもあります。 コードです。styleのwidthでバーの長さを指定します。 色の指定もclass名でできます。 組み合わせの場合はこんな感じです。 細いタイプは_tinyをつければOKです。 CSS3 Progress BarsはCSS3だけでプログラレスバーを生成しているのでJavaScriptなどで動いたりするようにするのも簡単に実現できそうです。 CSS3 Progress BarsはCSS3製、MIT Licenseのオープンソース・ソフトウェアです。 MOONG
注目！Flash CS風のUIでHTML5のタイムラインアニメーション作成·Radi MOONGIFT
RadiはHTML5対応のタイムラインベースのアニメーション作成ソフトウェア。 RadiはMac OSX用のフリーウェア（β版中につき無料）。Webブラウザ上でインタラクティブでタイムラインベースのアニメーションを作ろうと思ったらFlashを使うのが一般的だ。しかしそれはHTML4までだ。HTML5になればCanvasタグを駆使することでアニメーションさえ自在に作れる。 メイン画面 とは言えそれはあくまでも「駆使」すればの話でしかない。やはりツールがなければ容易に作れるものではないし、容易でなければ普及しないだろう。そこで注目されるのがRadi、HTML5対応のアニメーション作成ソフトウェアだ。 RadiはFlashのようにレイヤーを重ねてタイムラインベースのアニメーションを作成する。作成したコンテンツはvideoタグ、canvasタグで出力することができる。フレーム間の動きは自動で補完で
スマートフォンに特化することでjQuery API互換ながら5KB以下なJavaScriptライブラリ·Zepto.js MOONGIFT
Zepto.jsはjQuery API互換のスマートフォンブラウザ向けJavaScriptライブラリ。 Zepto.jsはJavaScript製のオープンソース・ソフトウェア。最近のWebシステム開発ではjQueryを使わないことがなくなったとさえ言えるかもしれない。それくらい頼り切ってしまっている。普通にJavaScriptを書くのが苦しくなるくらいだ。 サンプル。大抵の機能はデスクトップブラウザにも対応。 そのためスマートフォン向けのサイトでもjQueryを使ってしまう。だがデスクトップのように高速な回線でない場合もあるため、jQueryの90KBくらいのサイズは非常に重たいのだ。そこで使ってみたいのがjQuery API互換の軽量ライブラリであるZepto.jsだ。 Zepto.jsは何と5KB以下で提供されている。eachやmap、$を使ったDOMアクセス、Ajax、findなど基
自前のDropboxを実現する1ファイルのシェルスクリプト·vbox MOONGIFT
vboxはシェルスクリプトで作られたDropboxライクなソフトウェア。 vboxはシェルスクリプト製のオープンソース・ソフトウェア。みんな大好きDropbox。指定されたフォルダを自動的に同期してくれて、別なPCともファイルが共有できる上にバージョン管理までしてくれる。普段は何もしないというのが良い所だ。 動作中 しかしそんなDropboxが便利だと感じる反面、自分だけのDropboxサーバを立てたいと感じている人も少なからず存在する。そんな方はvboxを使ってみるといいだろう。 vboxは何とたった一つのシェルスクリプトファイルでできている。技術的に言うと、自分でサーバを立てて、そこにある特定のディレクトリとローカルのディレクトリをrsyncで同期する。それでは単なるバックアップであり、vboxはリモートではGitを使ってバージョン管理を行っている。 複数のコンピュータで同期することも
JavaScriptを使ったクライアントサイドのテキスト差分表示ライブラリ·Pretty Diff MOONGIFT
Pretty DiffはJavaScriptでテキストの差分を表示するライブラリ。 Pretty DiffはJavaScript製のフリーウェア（ソースコードは公開されている）。人は間違うものだ。現実世界では一度破壊してしまったものを復元するのは難しい。だがデジタルの世界であれば、バックアップを使ったり履歴管理をしておくことで以前の状態に戻すことができる。 差分表示 最近のサービスでは履歴管理が次々に取り入れられている。Dropbox、WordPress、Wikiエンジンなど様々だ。そんな履歴管理された内容をグラフィカルにチェックできるのがPretty Diffだ。 Pretty DiffはWebベースの差分表示ライブラリだ。JavaScriptやCSS、各種言語に対応する他、CSVの差分表示もできる（ただしCSVは各項目ごとに改行されて表示される）。差分表示はインライン、またはサイドバイ
使い慣れたエディタで書き、コンパイルやエミュレータ起動はIDEから·Android Tools MOONGIFT
Android Toolsはビルドやエミュレータ起動と言った最低限の機能だけを備えたAndroid IDE。 Android ToolsはJava製のオープンソース・ソフトウェア。Androidはシェアを順調に伸ばしており、OS別で見ればUSでトップになろうとしている。台数の普及が進めば、自ずとアプリの数も伸びてくるはずだ。そろそろAndroidアプリの開発にチャレンジしようと思っている人もいるのではないだろうか。 インストーラー Androidアプリを開発する際に必要なものとしてEclipseがある。だがあの大きなIDEをどうにも使う気になれないという人はAndroid Toolsを使ってみよう。 Android Toolsはごく小さなAndroid開発IDEだ。IDEといってもコーディング環境はない。あるのは環境設定を行うインタフェースで、そこからエミュレータを起動したり、アプリをビル
使い道色々。jQueryを使ってSparklineグラフを描く·Peity MOONGIFT
PeityはjQueryでSparklineグラフ（円、棒、折れ線）を描くJavaScriptライブラリ。 PeityはjQuery/JavaScript製のオープンソース・ソフトウェア。Webサイトはテキストコンテンツが多い。一覧表などはテーブルタグを使えば簡単に実現できるが、それをグラフ化しようと思うと面倒に感じてしまうからだろう。 円グラフ だがライブラリを使えば容易に実現できる可能性がある。Canvasタグを使ってSparkline系グラフを描くライブラリがPeityだ。 Sparklineとは一行程度の小さなグラフで、縦軸横軸の説明は行わない。そのような説明がなくとも十分理解できるグラフについて使われる。ごく小さいので文章中に埋め込むのも容易だ。Peityでは円グラフ、折れ線グラフ、棒グラフの三種類を描くことができる。 折れ線グラフ タグの中に埋め込まれた文字を使ってグラフにして
開発者必携。150種類以上のソースコードをQuickLookでハイライト表示させる·QLColorCode MOONGIFT
QLColorCodeは150種類を超えるプログラミング系ファイルをQuickLookでハイライト表示させるプラグイン。 QLColorCodeはMac OSX用のオープンソース・ソフトウェア。Mac OSXのQuickLookは慣れるととても便利だ。10.6以降はファイルを選ぶダイアログでもQuickLookが使えるようになったので、ファイル指定前に内容を確認することができる。 Ruby ファイルを開く動作はアプリケーションを起動するので若干もたつくが、QuickLookであればスペースを押すだけで素早く内容が確認できる。そんなQuickLookでプログラムコードを確認したいという人はQLColorCodeを迷わず入れるべきだ。 QLColorCodeはHighlightを内蔵したQuickLookプラグインだ。Highlightは実に150種類以上のプログラミング言語に対応したコードハ
MOONGIFT : ヘッダーに仕込んでおくと幸せになれるJavaScript「Head JS」 オープンソース・ソフトウェア/フリーウェアを毎日紹介
Head JSはヘッダーに組み込み、JavaScript/CSSの管理を補助するライブラリ。 [/s2If] Head JSはJavaScript製のオープンソース・ソフトウェア。HTMLのヘッダーで行うべき処理は多い。SEO対策としてキーワードの設定や説明文の追加、さらにJavaScriptファイルを読み込んだりCSSを設定したりする。いつの間にかヘッダーがとても長いものになってしまっていたりする。 スクリプトの読み込み さらにJavaScriptを多数読み込んだりすると表示速度に影響が出てしまう。作業の面倒さと複雑さを解決してくれる便利なJavaScriptライブラリがHead JSだ。ヘッダーに入れておくと便利に使えるはずだ。 Head JSが提供する機能は多い。JavaScriptの読み込みを指定することで平行して（しかし順番に）読み込んでくれる。そして読み込んだ後、指定した関数を
MOONGIFT : Protocol Buffersを編集する「Protobufeditor」 オープンソース・ソフトウェア/フリーウェアを毎日紹介
ProtobufeditorはJava製のオープンソース・ソフトウェア。Protocol BuffersはGoogle製のデータ交換フォーマットだ。XMLの代替えを想定されており、高速でかつコンパクトなフォーマットになっている。既にライブラリも多数存在する。 メイン画面 そんなProtocol Buffersではあるが、バイナリであるために実際にやり取りされるデータが確認しづらいという難点がある。問題がなければ良いが、デバッグがやりづらい。そんな時にはProtobufeditorを使ってみよう。 ProtobufeditorはJava製のGUIアプリケーションで、Protocol Buffersのファイルを読み込んで内容を確認したり、編集することができる。ツリー構造で確認でき、さらに実際の値まで確認可能だ。一覧表で確認できるので内容が非常に分かりやすい。 データの確認 データをHTMLとし
HTML5製のWebベースウィンドウライブラリ·ChromeKit MOONGIFT
ChromeKitはHTML5/CSS3/JavaScriptによるフリーウェア（ソースコードは公開されている）。HTML5の登場によってWebブラウザの可能性があがれば、おのずとWebアプリケーションに対するニーズも高まっていくはずだ。その過程にはWeb OSのような可能性もある。 ローカルアプリケーションのようなウィンドウ表示 Webブラウザ上でまるでローカルOSのようなインタフェースを実現しようと思った時に必ず必要になるのがウィンドウ表示だ。まるでデスクトップのようなインタフェースを実現したい時に使えそうなのがChromeKitだ。 ChromeKitはHTML5/CSS3/JavaScriptの組み合わせで作られているウィンドウライブラリだ。Mac OSXライクに左側にボタンが並んだウィンドウで、ドラッグアンドドロップで移動することができる。重なりによってウィンドウの色が変わる仕組
AndroidとGoogle App Engineを同期する·Synctester MOONGIFT
SynctesterはAndorid + Python製/Google App Engine用のオープンソース・ソフトウェア。スマートフォン単体ではデータ量はたかが知れている。さらにもしスマートフォンを紛失したり壊してしまった場合に全てのデータがなくなってしまうのは大きなリスクだ。 データをオンラインサーバと同期する それを防ぐためにはオンラインのストレージにデータを同期できるのが良い。そういったサービスを提供しているところもあるが、自分で専用のサーバを立てたいならばSynctesterを使ってみると良いだろう。 SynctesterはAndoridアプリとGoogle App Engineの二つのシステムに分かれている。両方ともGoogleが提供するものというのが象徴的だ。データはタイトルとURLの二つとなっている。データを登録する際にはIDとPWを登録し、その上でデータをオンラインスト
テキストエリアを使ってコーディングしやすくする·CodeMirror MOONGIFT
CodeMirrorはJavaScript製のオープンソース・ソフトウェア。Webブラウザのテキストエリアの貧弱さは言うに事欠かない。メモ帳レベルの機能しかなく、とても使い勝手が悪い。HTMLを作成する場合はWYSIWYGなエディタに変換するCKEditorのようなソフトウェアも存在するが、Webブラウザ上でプログラミングしたいと思うような機能はない。 テキストエリアをハイライト もしWeb上で開発者向けのサービスや環境を提供しようと思うならCodeMirrorを使ってみるといいだろう。CodeMirrorはテキストエリアを開発のしやすいエディタ環境に変化させてくれるソフトウェアだ。例えばJavaScript/HTML/CSS/Python/Rubyといった言語向けにハイライト表示する機能がある。 それらは各言語向けのCSSとJavaScriptで作られたパーサーによって作られている。また
HTML5で提供されるクライアントベースのJavaScriptフレームワーク·Alex Framework MOONGIFT
HTML5ではWebブラウザ内にSQLite3が組み込まれ、データベースが使えるようになる。既にHTML5に一部対応しているSafari（iPhone含む）ではブラウザ内部にデータベースを持っている。これを使えばGearsのような操作が可能になる。 データベースを使ったサンプル JavaScriptから使うデータベースなので、使う場所はきちんと考える必要があるだろう。使う方法はAlex Frameworkを利用すれば良い。 今回紹介するオープンソース・ソフトウェアはAlex Framework、HTML5に向けたJavaScriptフレームワークだ。 Alex FrameworkはWebブラウザ内部で使えるデータベース向けO/Rマッパーを提供している。これを使えばサーバサイドからデータをダウンロードし、クライアントで参照したり、加工するのがとても簡単になる。使い方が簡単であれば、実際に利用
リアルタイムWebを促進する·Reverse HTTP MOONGIFT
これは技術的に相当面白い。勘違いがありそうな気もするので、間違った記述があればコメントなりTwitterなりでご指摘いただきたい。これまでのWebはプル型がメインだった。それはRSSフィードなどWeb2.0が騒がれるようになっても変わらず、Cometでも接続していなければ意味がない。 Reverse HTTPのデモ そんな制限を超えるのがWebHooksだ。そしてWebHooksを使いつつ、リアルタイム連携を強めたのがReverse HTTPだ。 今回紹介するオープンソース・ソフトウェアはReverse HTTP、リアルタイムWebを実現するソフトウェアだ。 Reverse HTTPではデモが用意されている。一つはテキストエリアが表示され、その文字を書き換えると別URLの表示がリアルタイムに書き変わるというものだ。ユーザが入力した情報を読み取る部分と、その結果を別な画面に反映するという二つ
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
