jDataViewはjQueryを使ったJavaScriptライブラリ解析用ライブラリです。 jDataViewはJavaScriptでバイナリデータを読み込む際に利用するDataViewを拡張し、より使いやすくしてくれるJavaScriptライブラリです。バイナリーハッカー必見のライブラリです。 こんなイメージデータをJavaScriptから閲覧できます。 tarファイルを読み込んでファイル構造やテキスト内容を表示しています。 テキストエリアの中にファイルの内容が表示されています。 jDataViewを使うとバッファーをその場で作ったり、バイナリファイルをAjaxで読み込んでgetStringで指定部分だけを取り出すことができます。DataViewをそのまま使うよりも便利そうです。 jDataViewはjQuery/JavaScript製のソフトウェア（ライセンスはWTFPL）です。 M

PHP Bug Lost - A debug console and monitor tool for PHP scripts. 簡単に使えるクールなPHP用デバッグコンソールライブラリ「PHP Bug Lost」 画面上でログや、SQL、変数、実行時間、読み込んだファイルなどの実行に関する情報が綺麗なインタフェースで見れます。 フッタのバーをクリックすれば次のように開いて中身が見れます。 PHPのエラーが色分けされていて分かりやすい。 機能が沢山ありますが、他のツールなどとも組合せつつ便利に使えそうです。 利用法ですが、requireして専用の関数でコンソールにエラーを出すような感じのようです PHPBugLost - DOCS 関連エントリ TwitterやFacebookへのログイン機能をこれ１個で実装できるPHPライブラリ「HybridAuth」 WEBサービスで使えるPEAR以外

Jeditable - Edit In Place Plugin For jQuery 様々なインラインエディタ実装に使えるjQueryプラグイン「Jeditable」 Flickrが実装して有名になったあのUIもプラグインで簡単にできるようになりました。 今回紹介するプラグインもその１つなのですが、クリックした位置をドロップダウンにしたり、インラインの一部分だけを編集したり、ダブルクリックをトリガにしたりするといったカスタマイズが豊富なのが特徴のプラグインです よくあるパターン 「Edit me!」をクリックすると。 selectボックスが表示されて選択肢から選ぶ形に。OKを押せばテキストが変更されます テキストまるごとではなくインラインでの編集も可能。 関連エントリ コンテンツの折りたたみを楽々実装できるjQueryプラグイン「jQuery Collapse」 レスポンシブなjQuer

jQuery Collapse | webcloud コンテンツの折りたたみを楽々実装できるjQueryプラグイン「jQuery Collapse」。 コンテンツがいっぱいあるより、まずは少ないコンテンツのほうが、理解しやすくて分かりやすいですよね。 そこで折りたたみですが、アニメーションしつつ綺麗に実装できる折りたたみが簡単なマークアップとコードで実装できます。 見出しをhタグで作って中身をdivで書けばよいだけです これだけ作るだけでも一昔前は苦労していたものですが、技術の進歩によりどんどん簡単になりますね。 関連エントリ クールなタグ入力＆オートコンプリート機能付きフィールド実装jQueryプラグイン「TextExt」 面白いテキストアニメーションが作れるjQueryプラグイン「textualizer」 紙芝居のようなアニメーションでスライドするスライダー実装jQueryプラグイン「

Enlight ECサイトを作る際に便利なフレームワーク「Enlight」 PHP5.3、zend or symfony2ベースのフレームワークで、Eコマースサイトを自分で作る際に必要なコンポーネントが多数含まれるようです。 認証やデータグリッド、ナビゲーションやEメール配送システム等。 プラグインによって機能の拡張も容易。 OSコマース等と比較するのではなくあくまで自分で作りたいニーズ向けです。 自分でECサイトを作ることでカスタマイズ等もより自分好みにできるので本腰を入れたいような場合は参考にしてみるのもいいかもですね 関連エントリ お洒落なECサイトデザイン集３８ オシャレなECサイト構築用のWordPressテーマ３０ PHP＋MySQLなオープンソースの超多機能ECサイト構築ソフトウェア「LiveCart」

BetterMeansはフラットな組織におけるアジャイルに似たプロジェクトの進め方を推進するプロジェクト管理です。 BetterMeansは従来のトップダウン型のプロジェクト進行ではなく、民主的な手法を全員が一律にプロジェクトを進めていく方法を実現するプロジェクト管理システムです。 トップページです。オープンソースの他、Webサービスも提供しています。 ダッシュボードです。早速新しいプロジェクトを開始します。 新しいワークストリームを作成します。 作成しました。左がオープン、右が作業中のタスクになります。 タスクを追加しました。 タスクの詳細です。 タスクはドラッグアンドドロップで移動します。作業中になりました。 完了時にはコメントを登録します。 完了の枠が追加されました。 チームメンバー一覧です。 掲示板です。 普通にリプライできます。 Wikiもあります。 日本語も使えます。 Wiki

Filer.jsはHTML5のファイルシステムAPIを体感するWebアプリケーションです。 HTML5のAPIの一つ、ファイルシステムAPIを体験できるのがFiler.jsです。新しいWebの可能性を存分に知ることができます。 デモです。まずディレクトリをインポートします。 インポートしました。ディレクトリはマウスでたどれます。 アイコンまたはリスト表示をサポートしています。 画像やHTMLであればプレビューができます。通常のファイルはプレビューできませんがダウンロードはできます。 リスト表示です。 ログを表示しています。 Filer.jsではWebブラウザ上でディレクトリやファイルを作成することもできます。しかし実際のファイルシステム側には影響されませんのでご注意ください。また新しいフォルダやファイルをローカルに作っても反映されないようです。 Filer.jsはHTML5/JavaScr

js-tablesはCSV形式のテキストをフィルタリングやソートに対応したテーブル表示にしてくれるjQueryプラグインです。 js-tablesは業務システムで使えそうなjQueryプラグインです。CSVファイルやCSVのテキストを渡してフィルタリングや並び替えに対応したテーブルを表示してくれます。 サンプルです。元データはCSVファイルとなっています。 カラムごとに入っているデータをグルーピングして表示します。そこから選べばデータがフィルタリングされます。 end tagと入っているデータだけ抽出しました。ソートもできます。 フィルタリングはインクリメンタルに行われます。 任意のCSVファイルを指定してテーブル化できます。1行目が自動的にヘッダーになります。 実際の使い方です。単純にテキストを入れるだけでテーブル表示にしてくれます。 CSVを表示する場合にはYahoo! Pipesを使

Zoeyはzepto.jsを組み込んだ軽量なスマートフォン向けWebアプリケーションフレームワークです。 以前紹介したスマートフォン向けjQueryと言えるのがzepto.jsですが、そのzepto.jsを組み込んだスマートフォン向けWebアプリケーションフレームワークがZoeyです。 デモです。 ボタンコンポーネントです。 リストとコントロールグループです。 フォーム用コンポーネントも用意されています。 2カラム、３カラムのグリッドレイアウトに対応しています。 ZoeyはHTML5/CSS3を使って作成されており、iOS4.2とAndroid2.2のWebブラウザでテストされています。コンポーネントも揃っていますのでちょっとしたスマートフォン向けWebサイトを構築するのに使えそうです。 ZoeyはHTML5/JavaScript製、MIT Licenseのオープンソース・ソフトウェアです

綺麗なUIのサイトがサクサク組めるTwitter Bootstrapを使ったjQuery UIテーマ「jQuery UI Bootstrap」 2012年01月10日- jQuery UI Bootstrap 綺麗なUIのサイトがサクサク組めるTwitter Bootstrapを使ったjQuery UIテーマ「jQuery UI Bootstrap」 Twitter Bootstrapでデザインがあまり出来ずともTwitter風の綺麗なUIが作れる事で話題を集めましたが、jQuery UIにTwitter BootstrapのCSSでをあてはめた物が出たようです。 Twitter Bootstrapのメリットを享受しつつjQuery UIも使えてしまいます。 サンプルでは１ページにjQuery UIのウィジェットが配置されているのですが、１ページにあることで、削ったり切り貼りすることでデザ

Parallax Slider with jQuery パララックス効果を使った秀逸なjQueryスライダー実装チュートリアル＆サンプルDL スライダーの背景がパララックスを利用していて画像が切り替わる際に奥行きが表現されるというものです。 サンプルのUIも超カッコいいのですが、画像が切り替わった時の奥行き感が素晴らしい。 ちょっと古い記事なんですが、知らなかったのでご紹介です デモはこちら パララックス効果を導入してみたいという方にはいいチュートリアルにもなります 関連エントリ 並べた画像を敷き詰めて超カッコよくするjQueryサンプル 円形で回転するタイマーを実装できるjQueryサンプル 良い感じで動作するニュースティッカー実装jQueryサンプル

Make It Snow on Your Website With CSS Keyframe Animations | Design Shack CSSだけでページに雪を降らせるデモ。 スクリプトを一切使わずにCSSだけで雪を降らせています。 デモページ 昔はCSSでこんなことをするようになるとは思いもしませんでした。 未来のWEBはどうなっているんでしょうね。 関連エントリ CSSで様々なアニメーションが実現できる「Animate.css」 ピュアCSS3でタイピングアニメーションするデモ これは超カッコいい!CSS3を使ったアニメーションするボタン実装サンプル集 ピュアCSSでアニメーションするアコーディオン実装デモ

TmpltrはHTML/JSON/CSSを組み合わせたJavaScriptのテンプレートエンジンです。 Webアプリケーションを作る際にテンプレートエンジンとしてチェックしたいのがTmpltrです。HTMLだけでなく、スタイルシートにも考慮されているのが特徴です。 左上がJSON、中央がHTMLテンプレート、下がCSSになります。それらを組み合わせた結果が右側の表示になります。 フッターです。{{#fotter}}〜{{/footer}}といった区切りを設けています。 スタイルや構造を変更すればリアルタイムに右側のコンテンツが変更されます。 スタイルの内容はheaderタグの中にstyleとして出力されています。 Tmpltrは単純な文字列出力の他、配列やハッシュでの表示にも対応しています。元データの内容が書き変わると同時にレンダリング結果がリアルタイムに修正されるのが特徴です。 Tmpl

Crunch!はLESSコンパイルツール兼エディターです。 CSSの煩わしさから解放してくれる記法が幾つかありますが、今回取り上げるのはLESSです。そしてCrunch!はLESSファイルを編集するためのエディタで、CSSへのコンパイル機能を備えています。 インストールです。Adobe AIRが必要です。 インストール自体はウィザードで進められます。 起動しました。左がファイルブラウザ、右がエディターになります。 ファイルを開いたところです。ハイライト表示に対応しています。 CSSを生成して保存できます。 フォルダを開きました。その内容が左にツリー表示されています。 ファイルツリーはリアルタイムに更新されます。編集したら画面中央のCRUNCH ITを押すとCSSが生成されます。 LESSからCSSを生成するソフトウェアは幾つかありますが、エディタ機能を備えているのはあまり多くありません。A

Responsive Design in 3 Steps ３ステップではじめるレスポンシブWEBデザイン。 今後新しくサイトを公開する時はスマホ対応なんていうのは当たり前になってきている時代で、デザイナーさんにとっては必須であるレスポンシブWEBデザインを３ステップで簡単に説明してくれています。 CSSが分かる人ならさほど難しいものではないのでサクッと理解しちゃえます。 METAタグを付与 IEでもMedia Queriesを使えるようにスクリプトをインクルード レイアウトを作る css3 media query を記述。ブラウザの幅によって要素を非表示にしたりしてCSSを切り替えられるというわけですね JavaScriptが不要っていうのは素晴らしいですね 関連エントリ 使うっきゃないレスポンシブWEBデザインなWordPressテーマ２５ レスポンシブWEBデザインのサンプル26 HT