ソースコードの色づけを行う·Google Code Prettify MOONGIFT
ブログや開発者向けのWebサービスなどで、ソースコードのハイライトを行うケースはよくある。言語があらかじめ決まっている場合は良いが、言語がよくわからない場合や、JavaScriptとHTMLのように埋め込みで複数の言語が重なる場合もある。 各種言語に対応したハイライター そのような、特定の言語に依らずにソースコードをハイライト化したい場合に便利なのがこのライブラリだ。 今回紹介するオープンソース・ソフトウェアはGoogle Code Prettify、JavaScriptによるソースコードハイライターだ。 Google Code Prettifyの使い方は簡単だ。prettify.jsとprettify.cssを読み込んで、<pre class="prettyprint">または<code class="prettyprint">タグの中にコードを書き込めば良い。後はprettyPrint
新規でサイトを作るのに使えそうなの一式。Ver 3
随分前に、Ver2の見直しをして3になってたんですけど、公開してなかったので今更ながら公開です。 中身は2を使ってみて、社内のマークアップエンジニアからフィードバックもらったり、自分でも違和感が有った部分を調整してます。 それなりの期間使ってみて、問題をあんまり感じていないので、完成度としては大分良くなったかなぁって思います。 新規でサイトを作るのに使えそうな一式。Ver 3をDL（zip：40kb） Ver 3を見る Ver.3の中身ご説明 主な変更点を。 style.cssのwidthなどのプロパティをまとめていたのをVer1と同じに。 default.cssに書かれていた、p要素のmargin-bottomの指定をstyle.cssに移動。 default.cssのfont-familyの指定を若干変更。 index.htmlにGoogleカスタムサーチ用に使えるソースを記入。 Ja
魅力的なウェブサイトを作成するために知っておくと便利な9つのスクリプト - GIGAZINE
個人的なウェブサイト作成や仕事としてウェブサイトを作成している人だけでなく、何かのサイトを発注して作ってもらう際などにこういうのを知っておくと、かなりはっきりと具体的なイメージを相手に伝えやすくなるので、スムーズにコミュニケーションできるはずです。あるいはクライアントにこれらのリソースの存在を認知してもらうことで、話が進めやすくなるかもしれません。 というわけで、魅力的なウェブサイトを作成するために知っておくと便利な無料の各種スクリプトは以下から。 Woork: Useful resources and tutorials for developing stunning web sites 1. ModalBox http://www.wildbit.com/labs/modalbox/ Web2.0スタイルのダイアログボックスなどを表示させることができます。Mac OS Xのダイアログボ
標準のINPUTを拡張してフォーム入力を便利にする「inputEx」:phpspot開発日誌
inputEx Documentation - Examples 標準のINPUTを拡張してフォーム入力を便利にする「inputEx」。 input 入力の際に、数値Onlyや、Validate機能、色入力機能、オートコンプリートを提供して、フォーム入力をより便利にするものです。 色入力 メールアドレスバリデーション。ＵＲＬやパスワードなんかもあり 階層型のツリーデータを入力 うまく導入してフォームのユーザビリティに役立てたいですね。 関連エントリ JavaScript製のフォームバリデータライブラリいろいろ 超クールなカレンダー型日付入力補助用JSライブラリ
[JS]jQueryのプラグイン33 1選 -2008年3月 | コリス
紹介済みから未紹介のものまで、jQueryのプラグイン34選です。 Galleria 画像ギャラリー。 jQuery Multimedia Portfolio 画像・動画・音声のスライドショー。 Ea
クリック後の説明文を凄くオシャレに表示できる「mooSlide」:phpspot開発日誌
mooSlide - ajax based slider - lightbox replacement The mooSlideBox v3 is a small and slim ajax based extension or replacement of the common "lightbox" that can be found on nearly every page. This lightbox clone works in IE 6/7, Opera and Firefox. クリック後の説明文を凄くオシャレに表示できる「mooSlide」。 LightBoxの一種になると思うのですが、表示の仕方がかなりオシャレなmooSlide。 クリックしたところ、ページ下部からブロックがアニメーションして説明が表示されます。 仕組みはLightBoxでも、みせ方次第でこれだけ印象って変
入力値を簡単に制限する「yav」とかフォーム入力チェックいろいろ
メール送信フォームやらアンケートの回答フォームやら、とにかくネット上には様々なフォームが存在しています。入力する値が間違っていると「エラー」表示を出すタイプのモノが多いですが、出される側から見れば「そんな値を入力できるようにするなよ！」「8文字までしか受け付けないんだったら、最初から入力可能な文字数を8文字に制限しておけよ！」「エラーが出たらどこを再入力すればいいのかわかりやすく表示してくれ！」などと思うこともしばしば。 というわけで、この「yav」は入力エラーチェックだけでなく、最初から入力できる値を制限したり、数字であれば範囲指定したり、入力チェック後にフォームの色を変えてわかりやすくしてくれたり、とにかくいろいろ便利な入力チェック機能を簡単に組み込むことができるオープンソースで開発されているJavaScriptファイルです。入力チェック後のエラー表示もポップアップウインドウやページ内
MOONGIFT: » 日本語可！Flashで作る動的グラフ「Open Flash Charts」:オープンソースを毎日紹介
これまでにもオープンソースで生成できるグラフライブラリを各種紹介してきた。パターンとしては、画像として出力されるもの、JavaScriptで表示されるものの二つがあったように思える。 これはそのどちらでもない。Flashによるグラフ生成ライブラリだ。 今回紹介するオープンソース・ソフトウェアはOpen Flash Charts、Flash製のグラフ生成ライブラリだ。 特に細かい説明をする事もないだろうが、単純に言えばFlashファイルに対して、データのファイルのパスを渡せば表示がされるようになっている。データファイルの生成を動的に行えば、システムに連携したグラフも簡単に作ることができる。 Flashで生成されるだけあって、グラフィカルなものが可能だ。日本語出力にも対応しているのが優位な点だろう。棒グラフ、折れ線グラフ、背景色の変更、複数グラフの描画等、多彩な機能を備えている。 グラフの種類
ライブラリ活用編 - JavaScriptist
カラーピッカーを表示し、HTMLの色情報入力の際に便利に使えるJavaScriptウィジェットを紹介します。 > ライブラリを見る
フォーム値のチェックをJavaScriptで簡単かつクールに行う「fValidator」:phpspot開発日誌
fValidator - Alone Simple form using fValidator フォーム値のチェックをJavaScriptで簡単かつクールに行う「fValidator」。 fValidator を使えば、次のように input エレメントの class 属性に 値を指定するだけで入力チェックの機構を実装できます。 <input id="exA_Id" class="fValidate['required']" name="id" type="text"> <input id="exA_cPassword" class="fValidate['required','=exA_Password']" name="cpassword" type="password" > JavaScript で入力チェックというと結構面倒なイメージがありますが、このライブラリを使ってしまえばHT
フォームの入力値チェックをしてくれるJavascriptのライブラリ『Validate.js』 | S i M P L E * S i M P L E
これは便利そう。 『validate.js』ではフォームのさまざまな入力をチェックしてくれます。URLやメールアドレスなどのよくあるチェックに加え、ISBNかどうかといったマニアックなチェックもできます。 マニュアルに載っている命令をご参考までに。 hasValidChars isSimpleIP isAlphaLatin isNotEmpty isIntegerInRange isNum isEMailAddr isZipCode isDate isMD5 isURL isGuid isISBN isSSN isDecimal isplatform addRules Apply サイトでは動作チェックのデモもあります。コードも見れますよ。 ↑ こんな感じでさまざまなチェックができます。 詳細＆ダウンロードはこちらからどうぞ。 » Mutationevent :: Validate.js
Orangoo Labs - GreyBox
A pop-up window that doesn't suck. Introduction GreyBox can be used to display websites, images and other content in a beautiful way. Why use GreyBox: It does not conflict with pop-up blockers It's only 22 KB! It's super easy to setup It's super easy to use You can easily alter the style as it is controlled through CSS Examples One website Launch google.com in a 500x500 center window Launch google
フォームの入力値をリアルタイムにバリデーション「Realtime validation」:phpspot開発日誌
Realtime validation using Ajax Ajaxなどを駆使して、入力値を動的にチェックするライブラリ、realtime validation を公開しました。 >> http://masuidrive.jp/validation 正規表現とメッセージを指定するだけで、入力した瞬間にユーザに対してガイドメッセージを表示させる事ができ、今までの様に画面遷移後にエラーが出て、ユーザがエラー位置を把握しづらいと言う事がありません。 フォームの入力値をリアルタイムにバリデーション「Realtime validation」。 prototype.js と、配布している validate.js を読み込んだあと次のようなコードを書くだけ。 Validator.register({ "#mail" : { "/^([^@\s]+)@((?:[-a-z0-9]+\.)+[a-z]{2
画像やページをLightBox風に表示できるThickbox:phpspot開発日誌
Thickbox - One box to rule them all. Thickboxを使えば簡単に画像やHTMLファイルの中身をLightBox風にカッコよくページ内表示できます。 画像の場合 必要なCSSファイルとJavaScriptファイルをインクルードした上で、次のように画像タグを<a>タグで囲います。 <a>タグには class="thickbox" を指定し、title属性に画像の説明文を入れます。 <a href="images/image2.jpg" title="画像と一緒に表示させたい文字列" class="thickbox"><img src="images/image2_t.jpg" alt="Image 2"/></a> たったこれだけで、次のようにLightBox風に画像を開くことが出来ます。 titleで指定した説明文が画像の下に入ってます。 次にHTML
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
JavaScriptでカレンダーを実現するための38のスクリプト | IDEA*IDEA
ちょっとした説明に便利なTooltipsのスクリプトいろいろ | IDEA*IDEA
[JS]テーブルのセルをハイライトさせる -tablecloth.js