In the WoodsにてjQueryで重力をシュミレートする方法が記載されています。
以下のリンクからデモを見ることが出来ます
View Demo
これは面白いですね。
下に使用方法も載っているの、これを使って何か作ってみるのも良いかもしれませんね。
HOME » Javascript
コードの説明をすると、
がミソですね。
そして、
そして、
要は、元となる数字を半分にしながら、繰り返す文字を倍にしていって、数字が1になったら最後にもう一個繰り返す文字を足すということをやっているコードだと思います。
# 間違っていたらどなたか突っ込んでください。
とてもきれいなコードですね。
こんなコードを簡単に書けるようになりたいものです。
高速に同じ文字を繰り返し入力するときのアルゴリズム - アルゴリズム - 同じ文字列のn回繰り返しをlog n回で作る方法
次に<body>タグにonload属性を付与します。
最後に色付けするコードを以下のように<pre>タグでくくります。
これだけで、色付けが出来ます。「使用する言語」の部分は言語によって変えてください。
色付けに対応している言語はBash、C、C++、CS、HTML、Java、JavaScript、XML、Perl、Python、Ruby、PHP、CSS、SQL、VB等との記載がありました。
ただし、コードの中を見てみると色付けの仕方が非常に適当ですね。
きちんと対応しているのは以下の言語だけのようです。
それ以外の言語に関してはfunctionで色付けしたり”"を文字列として色付けしたりとかなりアバウトにやっているようです。
これならsyntaxhighlighterのほうがいいと思います。
ただし、複数言語が混じっても色付けしてくるようなので、そういう場合はGoogle Code Prettifyという選択肢もいいのではないでしょうか？
非常に簡単に出来ますので、一度お試しあれ！
簡単に色付けを行う - Google Code Prettify
なめらかにスライドするjavascript - Moving Boxes
画像を滑らかに動かすjavascriptは結構ありますが、これは非常にきれいです。
デモを見てみるとそのすばらしさが分かると思います。
Demo画面
ソースコードもページからダウンロード可能ですので、使用するのも簡単です。
アルバムとかを作る際に便利なんじゃないですかね。
なめらかにスライドするjavascript - Moving Boxes
ｊQueryを使用したiPhoneカレンダーを再現する方法
iPhoneカレンダーを再現するためのjQueryのコードが公開されています。
Create astonishing iCal-like calendars with jQuery
デモ画面で動いてるところを見てみると、作りこみ度が分かると思います。
demo画面
カレンダーを使用する機会は多いので、覚えておいて損は無いと思います。
高速に同じ文字を繰り返し入力するときのアルゴリズム
404 Blog Not Foundで同じ文字を高速に繰り返し入力する際のアルゴリズムが公開されています。
コードは以下となります。
function (str, n){
var result = '';
for(n *= 1; n > 0; n >>>= 1, str += str) if (n & 1) result += str;
return result;
}
コードの説明をすると、
for(n *= 1; n > 0; n >>>= 1, str += str)
がミソですね。
n >>>= 1で、繰り返し入力したい文字列の個数であるnが半分になります。
そして、
str += strで、現在繰り返し入力した文字列の個数が倍となります。
そして、
if (n & 1) result += str;で、最後に2で割り切れなかった場合繰り返し文字列を1つ足して終了します。
要は、元となる数字を半分にしながら、繰り返す文字を倍にしていって、数字が1になったら最後にもう一個繰り返す文字を足すということをやっているコードだと思います。
# 間違っていたらどなたか突っ込んでください。
とてもきれいなコードですね。
こんなコードを簡単に書けるようになりたいものです。
高速に同じ文字を繰り返し入力するときのアルゴリズム - アルゴリズム - 同じ文字列のn回繰り返しをlog n回で作る方法
Google Code Prettify でソースの色付けをやってみた
MOONGIFTさんのサイトでGoogle Code Prettifyが紹介されていました。
ソースコードの色づけを行う「Google Code Prettify」
私のサイトではsyntaxhighlighterを使っているのですが、ちょっと気になったので使ってみました。
以下使い方です。
まずは、google-code-prettifyからソースをダウンロードしてきます。
ここでは、圧縮されて軽いほうをダウンロードしてきました。
ソースの中身を見たい人は圧縮されていないほう（上のリンク）からダウンロードしてきましょう。
使い方は非常に簡単ですね。
まず、cssとjavascriptをインクルードします。
<link href="prettify.css" type="text/css" rel="stylesheet" /> <script type="text/javascript" src="prettify.js"></script>
次に<body>タグにonload属性を付与します。
<body onload="prettyPrint()">
最後に色付けするコードを以下のように<pre>タグでくくります。
<pre class="prettyprint lang-使用する言語"> ここにコードを記載 </pre>
これだけで、色付けが出来ます。「使用する言語」の部分は言語によって変えてください。
色付けに対応している言語はBash、C、C++、CS、HTML、Java、JavaScript、XML、Perl、Python、Ruby、PHP、CSS、SQL、VB等との記載がありました。
ただし、コードの中を見てみると色付けの仕方が非常に適当ですね。
きちんと対応しているのは以下の言語だけのようです。
- CSS
- Haskell
- Lisp
- LUA
- SML
- Protocol
- SQL
- Visual Basic
- WikiText
それ以外の言語に関してはfunctionで色付けしたり”"を文字列として色付けしたりとかなりアバウトにやっているようです。
これならsyntaxhighlighterのほうがいいと思います。
ただし、複数言語が混じっても色付けしてくるようなので、そういう場合はGoogle Code Prettifyという選択肢もいいのではないでしょうか？
非常に簡単に出来ますので、一度お試しあれ！
簡単に色付けを行う - Google Code Prettify
