BootsrapをGoogle+風に·Bootplus MOONGIFT
BootplusはHTML5/JavaScript/CSS製のオープンソース・ソフトウェア（Apache License 2.0）です。 最近のWebデザインはフラットなスタイルが人気です。そのデザインはGoogleのサービスでも広く取り入れられています。そんなUIを自分のWebサービスでも実現したい、そう考える人に使ってみて欲しいのがBootplusです。 Bootstrapがベースになっていますが、デザインは白色系をベースにしたフラットになっています。 かなり思い切って色をカットしています。 こちらは黒地部分が大きく目立ちます。 メニューなどのウィジェットはもちろんBootstrapをベースにして構築されています。 カード形式のウィジェット。 プロフィールなどの表示に便利そうな表示です。 何となくGoogle+っぽい感じです。 ベースはBootstrapなので多彩なウィジェットやコンポ
HTMLテーブルをリッチに便利な機能を追加する·Grid MOONGIFT
GridはHTMLテーブルにソートやヘッダ固定、行選択と言った機能を追加するJavaScriptライブラリです。 業務システムを作っていると必ず発生するのがテーブルでの一覧表です。WebでExcelレベルのことは実現できませんが、リッチな表としてGridを使ってみるのは良さそうです。 デモです。 必要な場所だけチェックしてハイライトできます。 横スクロールしても左側の列はそのままです。 数値のオーダーも適切に動きます。 縦スクロールしてもヘッダー部はそのままです。 カラム幅の変更もできます。 GridはIE7以上、Google Chrome/Firefox/Safari/Operaに対応しています。jQueryやMootoolsと一緒に使うこともできます。機能はヘッダー、フッター、カラムの固定化やカラムのリサイズ、カラムのソート、行の選択などになります。データフォーマットはJSONの他、X
JavaScript製の高度なアニメーションライブラリ·tween.js MOONGIFT
tween.jsはActionScriptのTweenクラスを真似たJavaScriptアニメーションライブラリです。 かつてオンラインでアニメーションを表現しようと思ったならばFlashかGIFアニメーションを使うのが一般的でした。しかし今後JavaScriptの採用が増えていく中では別な作法を学ばなければなりません。そこで今回はJavaScript製のアニメーションライブラリtween.jsを紹介します。 デモ1。四角のエレメントが左右に動き回ります。 1,000本のバーが左右に動きます。 4096個のセルが徐々に色を変化させます。 グラフです。様々な描き方に対応しています。 動画の再生に合わせて右に動いていくデモです。同期されているのがポイントです。 デモ動画です。本当はもっと速く動きます。 tween.jsはActionScriptのTweenクラスを模して作られているとの事です。
Google製のクライアントサイド、JavaScript製テンプレートエンジン·JsTemplate MOONGIFT
JsTemplateはGoogleが開発したJavaScript製のテンプレートエンジンです。 Webアプリケーションがさらに開発されていくために必要なのが高機能なJavaScriptテンプレートエンジンの存在です。幾つか出てきていますが今回紹介するのはかなり有力です。なぜならGoogleが開発したテンプレートエンジンだからです。それがJsTemplateです。 デモです。左上がテンプレート、右上がJSONの元データになります。 そして左下が実際に生成されたHTMLで、右下がレンダリング結果になります。 idを使ってテンプレート名を定義しています。 こういう風にデータがない場合のチェックもできます。 実際のコードです。jsdisplayのところに検証が入っているのが分かります。 データがある場合はもちろん繰り返し表示します。 実際のコードです。 JsTemplateは再帰処理ができたりev
試そう！PHPコードを解析して修正点を指摘·phpca MOONGIFT
phpcaはPHPを静的に解析して小さなミスやコードの修正点を指摘してくれるソフトウェアです。 PHPを書く際にどう書けば小さなミスによるバグの発生を防げるでしょうか。一定の基準に沿って記述することで整然としたコードを実現し、可読性をあげることでバグの混入を防ぐことができます。そこで使いたいのがphpcaです。静的にPHPファイル（ディレクトリ単位も可）を解析し、修正すべき場所を指摘してくれます。 解析処理を実行しています。PHPのパスと、解析したいファイルやディレクトリ名を指定して実行します。解析処理中は随時メッセージが出力されます。 メッセージ例です。タブの利用や行の使い方に関してなどメッセージが表示されます。 ?>がない場合もメッセージが出ます。これはPHPの書き方としては逆かも知れません（確かない方が良いという話なので）。 PHPを書く上でありがちなミスやバグにつながりそうな指摘を
使われているコードのチェックもできる！Google製のJavaScriptカバレッジツール·ScriptCover MOONGIFT
ScriptCoverはGoogle製のJavaScriptカバレッジテストツールです。任意のWebサイトに対してテストできます。 Googleが開発したJavaScriptのカバレッジツールがScriptCoverです。Google Chrome機能拡張としてインストールすることで任意のWebサイトにおけるJavaScriptカバレッジ率が分かります。 インストールしたところです。パッケージは提供されていないようなので自分でコンパイルしてインストールする必要があります。 任意のWebページを見るとこうやってカバレッジ率が出ます。 クリックすると分析開始です。しばらく待ちます。 完了しました。JavaScriptなので実行状況によってカバレッジ率も変化するようです。 さらに詳細なスクリプト単位でのカバレッジ率も見られます。 See full coverage reportをクリックするとス
今後の伸びに期待がかかるPHP製CMS·Fork MOONGIFT
Forkはユーザフレンドリー、多数のテーマ、プラグインといった機能を備えたPHP製CMS。 ForkはPHP製のフリーウェア（ライセンスは独自）。世の中にはCMS（コンテンツマネジメントシステム）と呼ばれるソフトウェアがたくさん存在する。そのUI、機能はその時々のトレンドに合わせて変化してきた。昔からのCMSが決して良いという訳ではなく、時代に合わせてCMSも進化しているのだ。 ユーザ向け その点、最近できたCMSはどれもUIがとても優れている。全体のデザインはもちろんAjaxを使ったり、ユーザフレンドリーなインタフェースになっている。今回紹介するForkもその一つ、とても格好いいデザインのCMSだ。 Forkの特徴としてはまずユーザフレンドリーなインタフェースが挙げられる。デフォルトのデザインがそのままかっこうよく、初心者にもプロフェッショナルにも使いやすい。タブを使ったりツリー表示を使
jQuery製のコードハイライト表示·Snippet MOONGIFT
SnippetはjQuery/JavaScript製のオープンソース・ソフトウェア。ブログやWebサービスでプログラミングコードを扱っているのを見ることは多い。そう、ソースコードはコンテンツなのだ。Tips、関数、オブジェクトなど様々なコードがコンテンツになり得る。 ハイライト例と実際の使い方 そんなプログラミングコードを表示する際にJavaScriptのライブラリを利用することがよくある。幾つかあるが、ポイントは対応しているプログラミング言語と表示方法の多様さだ。その二つに重点を置くならSnippetは注目したいライブラリだ。 Snippetが対応するプログラミング言語は実に15種類もある。C/C++からはじまって、各種スクリプト言語、SQL、XML、Java、HTML、CSSなどに対応している。さらに拡張することでMakefileやLDAPファイル、Diff、Changelogといった
サイドバーを使ってチャットするFirefoxアドオン·SamePlace MOONGIFT
SamePlaceはGmail/Jabber/Twitter/AIM/ICQ/MSNに対応したFirefoxアドオンによるチャットクライアント。 [/s2If] SamePlaceはFirefox用のオープンソース・ソフトウェア。最近は無数のWebサイトがあり、情報を収集したり検索したりする。さらにWebアプリケーションを使ってローカルアプリケーションに代わる操作をWebブラウザ上で完結している人も多いだろう。 左側に表示されているのがSamePlace そうなると一日の中で最も長い時間触れているアプリはWebブラウザになるかも知れない。さらにコミュニケーション手段まで含めてしまえば、よりWebブラウザだけで終わる作業が増えるだろう。それを実現するのがSamePlaceだ。 SamePlaceはFirefoxアドオンであり、サイドバーを使ってチャットを行うソフトウェアだ。対応しているのはG
スマートフォン最適化サイトの本命か·jQuery Mobile MOONGIFT
jQuery MobileはjQuery公式が開発したスマートフォン向けサイト開発用ライブラリ。 MOONGIFTはこう見る jQuery Mobileは数ヶ月前に開発が発表され、ついに1.0α版が登場した待ちに待たれたライブラリ。既に幾つかこの手のライブラリはあるが、本家が打ち出してくる以上、人気は集まるだろう。既に機能も多いので、大抵のスマートフォンサイトならこなせそうだ。 jQTouchは不具合とは言わないまでも、利用に際してはコツを掴む必要があった。jQuery Mobileはぜひそのテツは踏まず、PC向けライブラリ同様の使い勝手を維持してほしいと願ってしまう。 jQuery MobileはJavaScript/jQuery製のオープンソース・ソフトウェア。iOS、特にiPhone/iPad用のWebサイトを作るための専用ライブラリは数多い。最適化され、iPhoneなどで見やすい画
jQuery製の時計ライブラリ·epiclock MOONGIFT
epiclockはjQuery/JavaScript製のオープンソース・ソフトウェア。JavaScriptで時刻を利用する機械は意外と多い。指定時間ごとに自動保存したり、指定時間になったりアラートを出すようなこともある。Webアプリケーションを開発する際には避けては通れないだろう。 古めかしい感じの時計表示 そんな時には独自で実装する必要はない。既にライブラリは多数ある。jQueryを使って開発しているならばepiclockを使って実装してみよう。単純な時間表示以外にも多彩な機能が提供されている。 epiclockではカウントアップ型のタイマーや逆にカウントダウン、有効期限までの時間、ストップウォッチなど様々な時刻表時に対応している。さらにレトロな時刻表時を行うモードもある。時間を扱う際の多様なニーズに応えられるはずだ。 他にも色々な機能が jQueryなので、他のライブラリと組み合わせる
Windowsユーザ必見のiPhone向けサイトデザイン&シミュレータ·MobiOne Studio MOONGIFT
MobiOne StudioはWindows用のフリーウェア。iPhone用のWebサイトを作ろうとした場合、Windowsでは相当不利になっていた。WebKitはあるので、ユーザエージェントを変えればレンダリング結果は近いものが得られるだろうが、やはり別物だった。 ビジュアルデザインが可能 さらにWebサイトのデザインをするのも画面構成が特殊なので、Mac OSXがないと難しかったはずだ。そんな面倒さにやきもきしていたWindowsユーザはMobiOne Studioを使おう。これを使えば一気に未来が開けるはずだ。 MobiOne StudioはiPhone用のWebサイトをデザインするためのIDEだ。30以上のコンポーネントがあり、ドラッグアンドドロップで配置してWebデザインができる。とても簡単に最適化サイトの設計ができるはずだ。専用のアイコンも60種類以上ある。 生成されるHTML
Webアプリケーション用のGUIツールキット·Socks MOONGIFT
Webアプリケーションを構築する上で最大のネックになるのがGUiインタフェースだろう。一般的なローカルOS向けのGUIツールキットとは異なり、Web向けには貧弱なコンポーネントしか用意されていない。YUIやExt JSなど多数のツールキットが登場しているのはそのせいだ。 アニメーションもこなすGUIツールキット そしてデザイン面のみならず、アクションまで踏まえてWebアプリケーションを構築できるのがSocksというGUIツールキットだ。 今回紹介するオープンソース・ソフトウェアはSocks、JavaScriptによるGUIツールキットだ。 SocksはJavaScriptで作られたGUiツールキットだ。HTMLはデザインする必要がなく、Socks上でオブジェクトを定義してテキストボックスやチェックボックスなどを配置していく。後は指定した表示形式に沿ってSocksが揃えて表示してくれる。 ハ
jQuery製のプレゼンテーション·jQuery Presentation MOONGIFT
jQuery-PresentationはjQuery/JavaScript製のオープンソース・ソフトウェア。プレゼンテーションを作成するソフトウェアと言えばPowerPointやKeynote、WebアプリケーションであればGoogleドキュメントを利用する方法がある。 HTMLでプレゼンを だが画一的な表示のプレゼンテーションは聴衆をすぐに飽きさせてしまう。もっと柔軟性に富んだプレゼンテーションを行いたいならばHTMLを使ってみると良いだろう。jQuery Presentationを使えばさらに拡張性も期待できそうだ。 jQuery Presentationは名前の通りjQueryを使って作られているプレゼンテーションソフトウェアだ。矢印キーの左右やリンクをクリックしてスライドを切り替えることが出来る。現状ではそれだけに限定されるようだ。ページ一覧や検索機能などがあるとさらに便利そうだ。
FirefoxをGoogle Chrome風にアレンジ·Chromifox Extreme Themes MOONGIFT
Chromifox Extreme ThemesはFirefox用のオープンソース・ソフトウェア。Google Chromeのシェア拡大が続いている。開発も積極的に行われており、JavaScriptエンジンもバージョンアップの度に高速化している。他のブラウザは置いていかれまいと必死だ。 一見するとFirefoxではないかのよう オープンソースなブラウザとして先輩のFirefoxについてもそれは変わらない。だが他のブラウザと異なりFirefoxには有利な点がある。強力な機能拡張環境だ。これによってFirefoxの魅力は自然と増す。Chromifox Extreme ThemesはChromeが気になるFirefoxユーザにお勧めのテーマだ。 Chromifox Extreme Themesをインストールすると、FirefoxがまるでGoogle Chromeになったかのように表示が変わる。ア
Windows用Googleリーダークライアント·Desktop Google Reader MOONGIFT
Desktop Google ReaderはWindows用のオープンソース・ソフトウェア。最近、Googleリーダーに出戻りした。共有だの友人だとの余計な機能が色々ついてしまって切り替えたのだが、記事部分だけを見る限りはさほど問題にならないことに気付いた。 ちょっと独特なインタフェース そんなGoogleリーダーだが、Webブラウザからの利用はもちろんWeb APIを使って各種インタフェースから利用できる。Webブラウザから使う以上のユーザビリティが得られるものも多い。Desktop Google Readerもその一つだ。 Desktop Google ReaderはWindows用であり、デスクトップから同期して購読できる。キーボードショートカットではなくマウス操作がメインになるようだ。とは言っても読んだというボタンをクリックしていくだけで良いので、読み進めるのは簡単だ。 ツイート機
CSS3だけでアクションを実現するフレームワーク·CSS3 Action Framework MOONGIFT
CSS3 Action FrameworkはCSS3製のオープンソース・ソフトウェア。HTML5に注目が集まっているが、同時に見逃せないのがCSS3だ。良く角丸やドロップシャドーがCSSだけでできるようになると言われているが、他にも様々な効果がCSSのみで可能になる。 CSSだけでオブジェクトの回転 これまでは同様の効果を出すためにはJavaScriptの利用が必須だった。だがこれからは簡単なアクションであればCSSだけで実現できるようになる。そのサンプルとして注目したいのがCSS3 Action Frameworkだ。 CSS3 Action FrameworkはJavaScriptを使わずCSSのみで作られている。だがマウスをオブジェクトの上に載せたり、クリックによって効果を出せるようになっている。効果はサイズの変更や回転とその組み合わせ、ドロップシャドー、さらに消失などだ。 Goog
HTML5対応の軽量WYSIWYGエディタ·Aloha Editor MOONGIFT
Aloha EditorはJavaScript製のオープンソース・ソフトウェア。最近は管理ページのような仕組みを持たず、コンテンツの編集をその場で行えるようなソフトウェアが増えている。そうなると需要を増すのがWYSIWYGエディタだ。 フローティング表示のツールバー 見たままに変更が適用されればコンテンツの編集がとても容易になる。既に幾つか有名なWYSIWYGエディタが存在するが、それでも新しいものが登場してくる。今回紹介するのはAloha Editorだ。 Aloha Editorの特徴としては、編集可能なコンテンツ部をクリックするとツールバーが表示される点だ。ツールバーはフローティングになっており、編集箇所の近くまで自動的に移動する（ロックすることもできる）。編集が完了するとツールバーは自動的に消える。 文字装飾、文字種変更も さらにHTML5対応である点も特徴になっている。これは今後
簡単便利なミニCMS·Nuggetz MOONGIFT
NuggetzはPHP製のオープンソース・ソフトウェア。Webサイトの開発を行っていて、度々持ち上がるのがサイト内の一部のコンテンツをメンテナンスする機能だ。コンテンツ管理機能を組み込めば良いが、後から追加するのは意外と面倒くさいものだ。 ページ内コンテンツを編集する サイト全体のシステム化であればCMSを導入すれば良いだろう。だが必要なのはサイト内の一部のコンテンツをメンテナンスする機能だ。そこで使えそうなのがNuggetzだ。PHPで作られたWebサイトなら導入も容易だろう。 Nuggetzは管理画面などは持たない。その代わりにNuggetzをライブラリとして読み込み、名前を指定してコンテンツを取り出す。後はそれをそのまま表示すれば良い。同時にログイン用のURLも生成する。ログインをクリックするとフローティングウィンドウが表示される。 編集画面 ログインするとそれまでの画面そのままで編
管理画面のないRails製CMS·Seed MOONGIFT
SeedはRuby on Rails製のオープンソース・ソフトウェア。CMSはユーザ画面と管理画面に分かれているのが一般的だ。だが管理画面を使ってコンテンツを作成すると、どうもユーザ画面でのイメージが掴めない場合がある。 シンプルなインタフェースのCMS そのため最近ではユーザ画面上でコンテンツの作成、編集を行うCMSが増えてきている。Seedはそこまで融合していないが、管理画面は持たずユーザ画面上からコンテンツを作成できるCMSだ。 Seedが管理できるのは記事、ニュース、ブログ、カレンダー、動画となっている。ブログなどにはテキストコンテンツの他、画像を添付することも可能だ。ユーザ管理機能も備わっている。ちょっとしたサイトであれば十分な機能ではないだろうか。 コンテンツ作成画面 ログインするとユーザ画面の一番上にツールバーが表示される。そこでコンテンツを作成できる仕組みだ。コンテンツの作
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
