Scott Blake - Bar Code Art I created this web clock using code from a JavaScript resource found on the Internet.JavaScriptなバーコード時計。 一見バーコードに見えますが、時計になっているというアイデアが面白いですね。 ソースを見て応用して何か面白い時計を作ってみるのもよいかもしれませんね。
Scott Blake - Bar Code Art I created this web clock using code from a JavaScript resource found on the Internet.JavaScriptなバーコード時計。 一見バーコードに見えますが、時計になっているというアイデアが面白いですね。 ソースを見て応用して何か面白い時計を作ってみるのもよいかもしれませんね。
サイトのCSSを見たままリアルタイムに編集するツール色々。 WEBデザイン開発において、編集→リアルタイム反映というのはなかなか効率がよいですね。 ということで、各種、リアルタイムCSS編集ツールをピックアップします。 FireFox拡張 or スタンドアロンアプリ FireBug - リアルタイムに指定部分のCSSが切り替え可能(参考記事)。CSS以外にも便利機能満載。 EditCSS - FireFox拡張で、エディタがインストールされ、エディタ編集と同時に即座にCSSが反映される。 CSSVista - IEとFireFoxの画面で一括プレビューが可能。 Web Developer ToolBar - WEBデザイナー必須のFireFox拡張。CSSの直接編集も可能。 他にもCSSやアクセシビリティに関する便利機能満載。 ブラウザ上で動作するオンラインツール たぬきのしっぽ - CS
過去と他人はかえられないが、未来と自分はかえられる - Services_Hotpepper ホットペッパー.jpから公開されているWeb APIサービスを利用する為のライブラリです。 ホットペッパーウェブサービスを簡単に使える「Services_Hotpepper」。 次のように簡単に使えるようです。 <?php require_once 'Services/Hotpepper.php'; $service = new Services_Hotpepper('guest'); $options = array(); $res = $service->getGourmetSearch($options); var_export($res); ?> 関連エントリ
JavaScriptでスターレーティングを行うライブラリやサービス色々。 スターレーティングとは最近ではお馴染みの、5つ表示された星をクリックするだけで投票がAjaxで行えるものです。 ライブラリ jQuery Star Rating Super Interface! - jQueryを使ったライブラリ Unobtrusive AJAX Star Rating Bar - 以前、当ブログで紹介したAjax+PHP+MySQLな投票ウィジェット。 prototype.jsを使ったものも欲しいところでしょうか。 サービス サイトにレーティングウィジェットを簡単設置「Star It!」 - ページに貼り付けられるウィジェットです 関連エントリ JavaScriptで使えるカラーピッカー作成ライブラリまとめ ブラウザ上で動作するOSのまとめ JavaScriptを使った各種WYSIWYGライブラ
Programming and Designing for the Web FrogJS Javascript Gallery FrogJS is a simple, unobtrusive javascript gallery. It is not a replacement for other thumbnail galleries such as Lightbox JS, but rather a different way of showing galleries. 超クールな画像スライドショーを実現するためのJavaScriptライブラリ「FrogJS」。 以下のデモサイトを見ると分かりますが、今までにない超クールなスライドショーを実装できます。 実装方法は、まずスクリプトを読み込みます。 <script type="text/javascript" src="scripts/p
Comeeko - Creating comic strips from your photos Ajaxを駆使した超リッチUIで4コマ漫画が作れるサービス「Comeeko」 アカウントを作成する必要がありますが、これは1開発者として1回使ってみたいUIなので是非使ってみましょう。 尚、EメールアドレスのValidateは必要ないようで、登録後、すぐつかえます。 「Create」タブを押して作成を開始。 1) 漫画のコマ数を決める 4コマ、と書きましたが、2〜9コマ漫画まで作成できます。 好きなレイアウトを選択したら、ページ下部の「Step 2 Adjust Layout」に移ります。 ここでは3コマにしてみました。 2) 漫画の枠線のボーダーの色、幅などを決める Ajaxによってリアルタイム反映なので、UI的に非常に便利なものとなっています。 3) 元画像のアップロード or Flick
複数RSSを1つに統合したり、RSSをPDF等各種形式に変換できるサービス「xFruits」 2007年02月22日- xFruits - Compose your information system 複数RSSを1つに統合したり、RSSをPDF等各種形式に変換できるサービス「xFruits」。 今やRSSといえば、サイト作成においてなくてはならないほどのフォーマットになりました。 そのRSSを色々便利に加工できるサービスがxFRUITSです。 複数のRSSを1つにまとめたり、RSSをメールで送ったり、RSSをPDFにしたりと、様々な便利な機能が提供されています。 このツールを活用し、工夫することで、よりよいRSSライフが送れそうです。
Fireworks.js: A DHTML fireworks effect 花火アニメーションをJavaScriptで実装「Fireworks.js」。 Fireworks.jsライブラリを読み込めば、以下のようなシンプルなAPIによって花火のアニメーションを表示することが出来ます(音も出るので注意)。 createFirework(79,19,1,3,null,null,null,null,false,true); サイトで何か嬉しい出来事が起こった際に、このアニメーションを表示することで、利用者に驚きを与えることが出来そうです。 これは楽しいですね。 関連エントリ JavaScriptで3Dオブジェクトを作成するためのライブラリ「JS3D」 JavaScriptでMP3を扱えるライブラリ「SoundManager 2」 JavaScriptによるモーショントゥイーンアニメーション実装
CSSTYPE - web safe typography on screen for pixel perfectionists サイトに使用するフォントのCSSを選ぶ際に役立つ「CSSTYPE」。 次のようなUIが用意されていて、フォントやサイズを選択すればすぐさまプレビューされ、確認を簡単に行うことが出来ます。 このサイトを知っておくことで、サイト構築時のフォントの表示調整にかなり役立ちそう。 確認できるのは、font, font-size, text-decoration, word-spacing, line-height, letter-spacing, text-align, color, background, width, padding, text-indent, button-text。 次の図は、実際のプレビュー画面。 letter-spacing とか line-h
GlossyBlue High-tech, glossy Mac style, Web 2 Mini icons, validated CSS and XHTML, Web 2.0 colors… perfect WordPress theme for your technology-related blog. This theme contains all required template files: index or category view, search & results, comments, 404 error, single view, and static page template. Also, print.css file is included to make sure that your page still look nice on print out. W
Visioのような図が書けるJavaScriptライブラリ「Open-jACOB Draw2D 」 2006年11月26日- Open-jACOB Draw2D Create drawings and diagrams with the free Javascript library. The User interface allows interactive drawing by using your standard browser. No additional software; no third party plug ins. Just run it and use it. Visioのような図が書けるJavaScriptライブラリ「Open-jACOB Draw2D 」。 次のような図形描画機能を、ライブラリを使うことで自分のツールに組み込めるのが嬉しいところです。 描画した図形
A List Apart: Articles: Super-Easy Blendy Backgrounds CSSを使い、1枚の画像だけでカラフルなグラデーション背景を作る例。 次のような透過PNGがあったとして、更にこの下に色を付けると・・・。 大体どうなるか分かると思いますが次のようなグラデーション背景が出来ます。 そんなCSSのテクニックが紹介されてます。 example one (FireFoxのみ) example two (FireFoxのみ) example three (FireFoxのみ) example four (FireFoxのみ) Example five (FireFoxのみ) Example six (IEも動きます) Example seven (IEも動きます) アイデア次第でこういった技もできてしまいますね。 通常なら画像をPhotoShopなんかで
DHTML Site - Free 16x16 Icons 22 Free Essential Icon Sets フリーのWeb2.0風の16x16アイコンを配布しているサイト集。 サイトの彩りやユーザビリティに欠かせないアイコンがフリーということでアイコンが書けない開発者にはうれしい限り。 Silk Icons Mini Icons Sweetie Tango Icon Gallery Web Control Icons IceCons Mini Pixel Icons Gallery 2 Web Icon Set →他にも見る これだけ沢山のフリーアイコンがあるとサイト作りがますます楽しくなりそうです。 フリーですが、ライセンスについては各サイト上の明記を確認の上で使いましょう。
pixer.us :: online photo editor AJAXを使ったオンラインフォトエディタ「pixer.us」 同じようなサイトで、「snipshot」というサイトもありますが、こちらも使いやすいので紹介。 画像のアップロードにはじまって、 画像の回転 リサイズ キリトリ 左右、上下反転 各種エフェクト が簡単に行えます。 これは便利ですね。 関連エントリ prototype.jsベースの画像切抜き用JavaScriptライブラリ ブラウザのみで画像のキリトリ&リサイズ&フィルタ実行が可能な「Picture Resizer」
記事の訂正です。 本日投稿の「フリーのWEBアプリで使える高品質アイコン集「aspneticons.com」」においてライセンスの見落としがありました。 ASP.net言語による開発者のみ向けに無料であり、「PHP, Perl, ColdFusion and other platforms is not allowed」ということで、PHP,Perl,ColdFusionによる利用は出来ないそうです(TT) 利用の際はご注意ください。 尚、無料にて使えるアイコンとして「Silk Icons」がオススメです。 その他無料アイコンサイト 2色のハイクオリティなフリーアイコン配布サイト「2pt3」 ソーシャルブックマークのアイコン集 フリーのWindowsVista用アイコン等をダウンロード ロイヤリティフリーのアイコンを試す ※SHIVA さん、ご報告ありがとうございました。
Leak Monitor :: Mozilla Add-ons :: Add Features to Mozilla Software JavaScriptのメモリリークを検出するFirefox拡張。 Firefox用のメモリリーク検出用機能拡張である、Leak Monitorをインストールするといろんなところでメモリリークが起きていることが検出できます。 script.aculo.us でさえ、prototype.js の影響によって次のようなメモリリークが出てしまう模様。 JavaScriptの場合、マニュアルなどが整備されておらず、ブラウザごとに仕様が違うため、 何を対策すべきか、といったことがよく分からなかったりしますが、この拡張があれば、少なくともFirefoxの場合においてはメモリリークを防げそうですね。 関連エントリ WebデザイナーのためのFirefoxエクステンション20
FREE Logo Maker - FREE Logo Creator - FREE Online Logo Design クールなロゴをオンラインでお手軽作成「FREE Logo Maker」。 4つのステップで次のようなカッコいいロゴが簡単に作成できます。 ソフトはブラウザだけあればよく、Flashを使ったインタフェースでデザインを行えます。 手順は、 (1) エンジニアリング、スポーツといったカテゴリを選択 (2) ロゴのベースとなるアイコンを選択 (3) フォントを選んでデザイン実行 (※ ロゴをデザイン中の画面) ↓↓↓↓↓↓ (※実際に作ってみたロゴ) これは簡単で実用的ですね。サイトのロゴを作成するのに役立ちそうです。
Abe Fettig’s Weblog 実Detecting IE7 in Javascript IE6とIE7を判別するJavascriptコード。 判別は次のようなコードで出来るようです。 if (typeof document.body.style.maxHeight != "undefined") { // IE 7, mozilla, safari, opera 9 } else { // IE6, older browsers } IE7もそろそろ正式版がリリースされるようですのでメモしておくとよいかも。 関連エントリ 古いバージョンのIEを1台のPCで使う方法 IE7 Is Coming This Month...Are you Ready?
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く