管理画面もあるPHP製の認証システム·AuthManager MOONGIFT
AuthManagerは認証およびユーザ管理を提供するシステムです。 Webサイトを作っていて認証はよく必要になります。しかしその度に作っていては面倒に感じることでしょう。そこでAuthManagerを組み入れてみましょう。認証とユーザ管理を一手に引き受けてくれる便利なソフトウェアです。 登録画面です。 ログイン画面です。 ログインしました！アイコンも表示されています。 こちらは管理向け。ユーザ管理画面です。 設定です。 reCAPTCHAの設定です。 AuthManagerの主な機能は指定されたコードを埋め込むことでコンテンツへのアクセスを制限できるようにする、管理画面を使ったユーザ管理、reCAPTCHA対応、Facebookコネクト、メールテンプレート、アクセスログ、Google Analyticsサポートとなっています。 AuthManagerはPHP製のソフトウェア（ソースコード
その場で編集。Webベースのガントチャートエディター·jQuery Gantt editor MOONGIFT
jQuery Gantt editorはjQuery製のガントチャートエディターです。その名の通り、その場でデータの編集ができます。 プロジェクト管理において進捗や各人のステータスによる作用を判断するのに便利なガントチャート。オンライン版も幾つか出ていますが、既存サイトに組み込みたいならjQuery Gantt editorを使ってみましょう。その名の通り、jQueryベースのガントチャートエディターです。 メイン画面です。まさにガントチャートの画面です。 日程や階層の深さを編集できます。 詳細な情報も変更できます。 タスクの追加も可能です。 人員のアサインにも対応しています。 データはそのまま保存したり、JSONとしてエクスポートできます。従ってJSONデータを使えば同じ画面を再現するのは難しくありません。Undo/Redoをサポートし、クロスブラウザで動作します。閲覧だけでなく、編集ま
これは凄い。JavaScriptで作られたPHP VM·php.js MOONGIFT
php.jsはJavaScriptで作られたPHP VMです。PHPコードをJavaScriptに変換して実行します。 世の中には色々変わったことを考える人がいます。Webブラウザでデフォルトで実行できるプログラミング言語がJavaScriptだけなんて許しがたい、そう考えたPHPプログラマーが生み出したのがphp.jsです。その名の通り、PHPの実行エンジンをJavaScriptに実装したというとんでもないソフトウェアになります。 確かに実行できています。PHPのコードからJavaScriptに変換を行っているようです。 配列、クラスさらにvar_dumpまで実装されているのが興味深いです。 かなり突っ込んだPHPの処理もできている模様です。これは面白い。 ダブルクオートの中に変数を入れて普通に出力できているのが興味深いです。 php.jsではPHPのコードがそのまま実行できます（もちろ
問題が起きる前に。Webサーバセキュリティチェッカー·Websecurify MOONGIFT
Websecurifyは主立ったWebサーバにおけるセキュリティチェックを自動化してくれるソフトウェアです。 Webサイトを巡るセキュリティ問題は多々あります。自動化されている攻撃ソフトウェアもあり、ちょっとした油断で一気に重要データが引き抜かれたり、逆に破壊されてしまう可能性があります。それを事前に確認すべく使っておきたいソフトウェアがWebsecurifyです。 メイン画面です。 テストを行うURLを入力します。実行前に確認が出ます。 テストの実行中です。 完了しました。 レポート画面でインシデントの詳細が確認できます。 Websecurifyは代表的と言えるセキュリティチェックについて自動で行ってくれます。SQLインジェクション、ローカルファイルの読み込み、クロスサイトスクリプティング、CSRFなど多岐にわたります。サーバの種別を判断した上でやり方を変えるので、より確度が高くなります
シンプルで格好いい。親切なコードレビューシステム·Barkeep MOONGIFT
BarkeepはGitリポジトリに対応したユーザビリティ高いコードレビューシステムです。 会社でプログラミングを行っているとそのコードの品質はばらつきが出てきます。そうするとバグが多くなったり、予期しない問題に直面したりします。それを防ぐのに有効なのがコードレビューです。Barkeepはユーザフレンドリーなコードレビューシステムになっています。 メイン画面です。コミットログが並んでいます。 詳細です。差分が表示されています。 サイドバイサイド。アニメーションしながら表示されて格好いいです。 コードをダブルクリックするとコメントできます。 コメントしました。 一つにまとまっている場合もコメントできます。 レビュー依頼もできます。 ステータスです。レビューされている、されていないといった情報が一目で分かります。 検索結果です。 こちらはプロフィール。 Barkeepは検索における入力補完やフィ
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で提供されているものに加えて色々な場面で役立
こんな手が…。Dropbox上で動的システムを動かす「Drapache」 - MOONGIFT|オープンソース・ソフトウェア紹介を軸としたITエンジニア、Webデザイナー向けブログ
DrapacheはDropbox内のファイルを読み込んで動的に動かすWebサーバです。 DropboxではPublicに入れたファイルをHTTPを通じて読み込めるようにしています。この機能を使って静的なWebサイトを提供している人もいます。しかしそれで十分ではありません。時代は動的システム、Dropbox内のファイルを動的システムに対応させるソフトウェアがDrapacheです。 まずドメインを取ります。 次にDropboxをコネクトします。 接続を許可します。 完了です。そうするとアプリフォルダの中にDrapacheフォルダができあがります。 ファイル構成はこんな感じです。 サンプルのスクリプトです。確かに動的ファイルが動いています。 動的です。もちろん修正すれば若干のタイムラグはあれど反映されます。 Drapacheの仕組みとしては登録したユーザのデータを読み込み、DrapacheがWe
多彩なフレームワークに対応したPHP向け認証ライブラリ·Opauth MOONGIFT
OpauthはPHP向けの認証ライブラリです。抽象化することで多様なプロバイダーに容易に対応できます。 Webサービスで認証を用意すると言っても今は多様な技術が存在します。単なるID/パスワードに限らず、OpenIDやOAuthもあります。サービスプロバイダーごとに実装も若干変わったりします。そうした認証技術を統合して使えるのがOpauthです。 デモです。 Facebook認証です。 問題なく認証できました。各種データも取得できているのが分かります。 こちらはGoogle認証です。 こちらもユーザプロフィール含めて取得できています。 最後はTwitterです。 はい、問題ありません！ OpauthはRubyの認証ライブラリOmniauthにインスパイアされて作られており、認証部分を抽象化することでプロバイダーを切り替えて容易に様々なサービスに対応できるようになっています。技術的にはOpe
ワンクリックでMac OSX上にRuby on Rails開発環境を構築·Rails One Click MOONGIFT
Rails One ClickはMac OSXのRuby on Rails開発環境をボタン一つで整えてくれるソフトウェアです。 Mac OSXにおけるRuby on Rails開発環境を一気に整えてくれるのがRails One Clickです。ウィザード方式でボタンクリックだけでRuby on Railsが開発できるようになります。 メイン画面です。ボタンを押すとインストールが開始します。予めXcodeがインストールされている必要があります。 ダウンロードやコンパイルも同時なのでちょっと時間がかかります。 ログです。 完了しました。 この画面が表示されていれば完了です。 デモ動画です。 Rails One ClickはDocuments以下に一通りの環境をインストールするので、ルート権限不要で使えるのが便利です。 Rails One ClickはMac OSX用のオープンソース・ソフトウェ
1,000のサーバでも監視できるnode.js製死活チェッカー·uptime MOONGIFT
uptimeはnode.jsで作られたWebサーバ死活チェッカーです。 Webサーバがきちんと正常に動き続けているかどうか一番簡単にチェックするのは定期的にアクセスしてレスポンスタイムを見ることです。そんなWebサービスの死活チェックに使えるのがuptimeです。 サーバを立ち上げました。最初に監視するWebサーバを設定します。 URLと監視する間隔を指定するくらいです。 監視を開始しました。グラフは自動更新されないのでご注意ください。 イベントがあればこちらに出力されます。 グラフではなく一覧で結果を確認できます。 徐々にグラフが更新されていきます。 uptimeは1000以上のWebサーバを一括で監視できるパフォーマンスを持っています。またダウンしている際にはWebアラートを表示できます。エラーがあった際にはHTTPステータスやその内容を記録してくれます。サーバはタグを使ってグループ管
Bootstrapを使おう！様々なカラーテーマ、プラグインを用意·Kickstrap MOONGIFT
KickstrapはBootstrapをベースにしたテーマ、プラグインを提供するソフトウェアです。 最近作られるWebサービスでよく使われているBootstrap。そんなBootstrapは固定色でそれっぽさが感じられてしまうのが欠点でしたが、見事に打ち消してくれるのがKickstrapです。 色が変わると随分印象が違います。 テーマ機能があります。 青と白。 こんな感じのシンプルなテーマも。 逆にカラフルなものもあります。 基本は同じですが、印象は違いますね。 好みのテーマを選べます。 JavaScriptプラグインがデフォルトよりもぐっと増えています。 Kickstrapを使えばBootstrapをより便利に使えるでしょう。JavaScriptプラグインも通知機能をはじめ、色々なものが追加されていますのでWebサイトをより強力にパワーアップできるはずです。 KickstrapはHTML
すごいぞ！HTML5で顔認識·HTML5 Face Detection MOONGIFT
HTML5 Face DetectionはHTML5を使って動画から顔をリアルタイム認識します。 HTML5はどこまで行くのか、それを改めて思い起こさせる凄いソフトウェアがHTML5 Face Detectionです。何と動画の顔認識をリアルタイムに行ってしまいます。 デモ動画です。上が動画、下がそれを解析して顔認識しているものです。 顔を動かしても付け目がね＋鼻が追いかけてきます。 筆者トライの図。Glassesをタップすると認識処理が開始されます。 デモ動画 HTML5 Face Detectionは動画のフレームを読み込み、JavaScriptで顔認識をした後、Canvasタグに鼻眼鏡とともにレンダリングしています。はっきり言ってかなり重たいのですが、技術的にはとても面白いソフトウェアです。 HTML5 Face DetectionはHTML5/JavaScript製のソフトウェア（
これは格好いい。Windows 8のMetro UIをHTML5で再現·Metro UI CSS MOONGIFT
Metro UI CSSはWindows 8のMetro UIをHTML5/CSS3で再現したソフトウェアです。 次期WindowsのWindows 8ではMetro UIと呼ばれる新しいインタフェースが利用されています。そんなMetro UIをCSSで再現したのがMetro UI CSSになります。 デスクトップで見たイメージです。アイコンが並んでいます。 選択できる画像リストです。 選択できるリストです。画像も埋め込めます。 チャットなどで使えそうなリストです。吹き出しもついています。 アプリケーションリストです。 時計などのウィジェットです。 iPadでの表示です。タブレットの方が最適化されています。 左右の移動もできます。 デモ動画です。動きはスムーズです。 動きはかなりスムーズで格好いいです。パネルを押すとちょっとへこんだり、ボタンも多数用意されています。リストをタップして選択し
プロジェクト管理に使ってみたい。jQuery製のガントチャートライブラリ·jQuery.ganttView MOONGIFT
jQuery.ganttViewはjQuery製のガントチャート表示ライブラリです。 jQueryを使ってガントチャートを表示するライブラリがjQuery.ganttViewです。表示だけでなくデータのメンテナンスもできるようになっています。 いい感じにガントチャートが表示されています。 ドラッグでタスクを左右に移動させられます。 期間の変更は枠の端をドラッグします。 データはJSONで与えるだけです。 jQuery.ganttViewは表示系のライブラリなのでデータベースに蓄積された内容をガントチャートにして表示すると言った使い方が便利そうです。なお表示はタスクごとに横に表示される形で、複数のタスクを同一線上に表示することはできないようです。 jQuery.ganttViewはjQuery/JavaScript製のオープンソース・ソフトウェア（MIT License）です。 MOONGI
小規模なWebサイトにぴったり。PHP製のメールフォーム·TransmitMail MOONGIFT
TransmitMailは日本製の汎用型メールフォールソフトウェアです。 Webサイトにメールフォームの設置というのはよくあることです。そんな時に使える日本語対応のメールフォームソフトウェアがTransmitMailです。 デモです。多数の入力項目、入力チェックに対応しています。 必須チェックのエラーです。画面上と項目の横と二つ表示されます。 メールアドレスフォーマットのチェックもできます。 半角英数などの文字種チェックもあります。 入力の後、確認画面が表示されます。 完了ページです。 確認メールも送信されて、入力内容の確認ができます。 TransmitMailはPHP5.2以上で動作します。また、マークアップエンジニアが開発したとのことで、Dreamweaverやマークアップエンジニアにとって優しい作りになっています。セッションによって重複送信を防ぐ仕組みがあります。静的サイトにメールフ
ここまでやるか。SQLiteをJavaScriptに変換·SQL.js MOONGIFT
SQL.jsはSQLiteをEmscriptenを使ってJavaScript化したソフトウェアです。 SQL.jsはWebブラウザ上で使えるデータベースです。Emscriptenを使ってSQLiteをJavaScriptに変換した面白いソフトウェアです。 デモです。テキストエリアに書かれたSQLを実行できます。 実行した結果です。最終的な結果だけが出力されています。SELECTの結果はJSONデータとして取得されています。 もちろん普通にSQLが使えます。 日本語は出力時は化けてしまいましたがデータ上は問題ないと思われます。 SQL.jsはSQLiteがそのままJavaScriptになってしまったようなソフトウェアです。慣れた使い勝手でSQLを実行したり、データを取得できてしまうのは面白そうです。なお現状Google ChromeやFirefoxにしか最適化されていません。 SQL.jsは
これはnode.jsの時代が来るか！？全て揃ったnode.jsフレームワーク·Tower.js MOONGIFT
Tower.jsはフルスタックのnode.js用Webアプリケーションフレームワークです。 こ、これはやばい…。ついにnode.jsの時代が来るかもしれない、そう感じさせるWebアプリケーションフレームワークがTower.jsです。 インストールはnpmで簡単にできます。 まず新しいアプリケーションを作成します。 Scaffoldで簡単にコントローラ、モデル、ビューを生成。 生成された際の構成はこんな感じです。 towerコマンドのオプションです。 Webサーバを立ち上げ場合です。 Tower.jsはMongoDBをデータベースに、Redisはバックグランドジョブ、CoffeeScriptをメインの記述に使いつつ、Jasmineをテストフレームワーク、jQueryも使えるフレームワークです。メール、マイグレーション、MVC、RailsばりのO/Rマッピング、バリデーション、ルーティング、B
jQuery Mobile向けBootstrapテーマ集·Twitter Bootstrap jQuery Mobile Theme MOONGIFT
Twitter Bootstrap jQuery Mobile ThemeはTwitterのBootstrapとjQuery Mobileを組み合わせて使えるテーマ集です。 TwitterのBootstrapは最新版でスマートフォンにも対応しています。そしてスマートフォン向けのJavaScriptライブラリと言えばjQuery Mobileです。この二つを組み合わせて使えるのがTwitter Bootstrap jQuery Mobile Themeになります。 Aデザイン。 Bデザイン。全体として青。 Cデザインは赤。 Dデザインは緑。 Eデザインは水色。 Fデザインはオレンジ。 Twitter Bootstrap jQuery Mobile ThemeはjQueryとBootstrapを組み合わせ使えるテーマ集です。面白いのはA〜Fまでカラーが用意されており、data-themeを変更
凄いん…だよな？デザインの自由度を最大化したCMS·Berta MOONGIFT
Bertaはデザインの自由度が高いCMSです。データベースを使わないCMSになっています。 なんか凄いソフトウェア…。BertaはCMSですが、自由度が非常に高く、コンテンツの配置が自由にできてしまいます。その自由度の高さも相まって、デザインや写真家の方が数多く使っているようです。 まずログインします。 サイトをセットアップします。 セクションを作ります。これがメニューになります。チュートリアルのヘルプ付きで分かりやすいです。 セクションを作ったら、その内容を編集します。 これがページです。ほぼ何もありません。ここから自由にコンテンツを配置していきます。 配置する場所はX/Y軸ともに自由です。 ファイルを貼付けたりテキストを入れたりできます。 例えばこんな画像を。場所は自由に設定できます。 実際にBertaを使ったWebサイトです。ポートフォリオ的なサイトでしょうか。 こういった写真系のサ
Webプログラマ必見。HTML5のセキュリティチートシート·HTML5 Security Cheatsheet MOONGIFT
HTML5 Security CheatsheetはHTML5のセキュリティに関するチートシートです。問題点と対象Webブラウザ、対処法が一覧になっています。 HTML5 Security CheatsheetはHTML5におけるセキュリティホールになりえる問題点をコードを通じて広めていこうというプロジェクトです。Webプログラマ必見と言えるでしょう。 トップページです。様々な項目が並んでいます。 左側は各セキュリティチェックすべき項目で、対象になるWebブラウザとそのバージョンが並んでいます。問題点の提示とともに、その回避策についても書かれていますのでとても参考になります。 まだ日本語化されていない部分もあります。 ほぼ全てのWebブラウザが対象になる部分もあるようです。 項目は非常に多いですが、セキュリティを重視するためにもチェックしておくべきです。 HTML5ではありますがIE6など
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
