「javascript」一覧

画像拡大スクリプト「Highslide JS」「Thickbox Gallery」

2006/12/23 ウェブデザイン・文章

Highslide JS

Highslide JS – JavaScript thumbnail viewer が格好いいです。なんとなく「Web2.0」という言葉と同じくらいにアリガチな「サムネイルをクリックすると画像拡大する」という JavaScript ですが、拡大の方法が面白い。百聞は一見にしかず、ということで“Examples with settings”からどのような動作か確認してみてください（初めて見たら結構驚く）。

今日、写真拡大に便利なJavaScriptライブラリ（Highslide.js） – youmos で知ったのですが、画像の拡大プレビューを超クールに行える「Highslide JS」:phpspot開発日誌でも取り上げられていましたね（ということは一度見たことがあるはずだが、覚えがない）。

Movable Typeで画像をページ内でPopUp – Highslide JS/楽で、MTで実装する方法が紹介されています。MT から画像をアップロードすると、自動的にHighslide JS に適した HTML が生成されるようです。

Thickbox Gallery

さらに、Thickbox Gallery が凄い。PHPとThickbox JSを使用した簡易ギャラリースクリプトという、これまたアリガチな物かと思いきや、Thickboxだけではなく、Lightbox JS v2.0, Highslide JS, Liteboxを利用することもできます。

Highslide JS を使ったサンプルもあります。表示に使う JavaScript ファイルは、設定ファイルを一部書き換えるだけで変更可能です。──たぶん、ちょっと PHP をかじったことがある人なら、動的に切り替えることもできそう（クッキー使ったり URL で切り替えたり？）。夢がひろがりんぐ。

ブログパーツでゲームもコメントもトラックバックも！

2006/12/19 画像・動画・おもしろ

ブログバトラー盛り上がり中

「IT戦記」の中の人と死闘！（「ブログバトラー」で） : 亜細亜ノ蛾で紹介したブログバトラー [Blog Battler]、いろいろなブログで取り上げられていますね。大まかに分けて「速攻でブログに張り付け派」と「記事やブクマで ID だけ晒す派」に分かれるようです。──張り付けなくても盛り上がるブログパーツって初じゃね？と凄いポイントに気がつきました。

あと、公式サイトがちょくちょく更新されているようなので要チェックです。さっき確認すると、張り付けるコードが微妙に変わっていました。JavaScript が動作しない環境で画像を表示するようになりましたね。

今回はブログパーツというか、「数行書き加えるだけでページを面白くしてくれるプログラム」について、ちょっと考えてみました。

「oitake blog」──ブルブルでタイポなサイト

2006/11/29 画像・動画・おもしろ

ブルブルでタイポで自爆！

ステキサイトの紹介です。

ブルブル！という「リンクをブルブルさせるスクリプト」（なんのこっちゃ、というひとは左記のリンク先をどうぞ）が有名ですが、他にも面白いスクリプトがあります。

JavaScript ライブラリ戦争後、jQuery は「アリ」か？

2006/11/20 画像・動画・おもしろ

じゃばすくりぷとが使いたい！

JavaScript をイチから勉強中。──なのですが、手っ取り早くなんか作りたい！という時は、JavaScript ライブラリに手を出すのがお手軽かと（初心者にありがちな勘違い）。

となると prototype.js を使う、となるのが自然ですかねぇ（ref: もっとも人気のあるAJAX言語は? フレームワークは? (MYCOMジャーナル)）。

──ですが、まぁそこは天の邪鬼な自分なので、jQuery が気になる今日この頃。どのあたりが気になるのか、うだうだ書いてみます。

prototype.jsを10KBにする方法の続き（.htaccessをスマートに使う）

2006/11/19 画像・動画・おもしろ

2006-11-26T00:53:01+09:00 追記

いろいろ問題がありました（またか……）。記事を修正し、新しくサンプルページ（prototype.jsをgzip圧縮して利用するテスト（Safari 対応版））を作りました。

ありがたや！

prototype.jsを10KBにする方法 : 亜細亜ノ蛾は思っていた以上に反響（というかブクマ）があって、うれしい限り。

──といいたいところですが、なんというか、自分は return false ってなんスか？というひと（JavaScript 解ってない）なので、もうちょっと「それは違うよ」という批判記事が読みたいような。──スンマセンね、ツン照れというか天の邪鬼なので。

.htaccess をスマートに使う

そんな中で、今回はいいモン仕入れて来たよー、というハック（むしろ基本テク？）。

Accept-Encoding に gzip が含まれるときだけ gzip 圧縮された prototype.js.gz を、含まれないときは prototype.js を返すようになる。

odz buffer – Apache で gzip 圧縮されたファイルを返す

表示の遅い JavaScript を JavaScript で何とかしたい！

2006/11/18 ウェブデザイン・文章

外部 JavaScript を読み込む方法

JavaScript を利用して外部の JavaScript を読み込む方法は、いろいろ考えられます（ref: JavaScriptな日々 | 外部JavaScriptファイルの動的・静的ロードの方法）。今回は、表示までに時間がかかるスクリプト（おそらく document.write が原因）のせいで、ページ全体の表示が遅くなる、という問題にしぼって考えてみます。

問題のページ

次のようなページがあって、heavy.js の表示が遅く、その後に続く <div></div> がなかなか出てこない、という状況。これを何とか解消したいので「あーだこーだ」いうことにします。

<html>
<head></head>
<body>
<div id="heavi_div"><!-- ここが重い -->
<script type="text/javascript" src="http://example.com/js/heavy.js"></script>
</div>
<div></div>
<div></div>
<div></div>
</body>
</html>

prototype.jsを10KBにする方法

2006/11/16 画像・動画・おもしろ

2006-11-20T14:20:42+09:00 追記

「何者か」に攻撃を受けて、このページの内容が差し変わっていました。あわててバックアップファイルから復旧しました（「何者か」 = 酒……）。

prototype.jsを10KBにする方法の続き（.htaccessをスマートに使う） : 亜細亜ノ蛾に続きを書きました。合わせてどうぞ。

JavaScript ファイルを圧縮する

正真正銘、Prototype（“prototype-1.4.0.js”）を10キロバイト（10,453 bytes）に圧縮して、しかも（当たり前ながら）動作するようにする方法です。

──と聞いて真っ先に思い浮かぶのが「各種JavaScriptファイル圧縮サービス」、という人も多いでしょう。

しかし、自分が試してみたところ、例えば/packer/で圧縮したJavaScriptファイルは上手く動作しませんでした（他は調べてない）。どうも元のファイルで行末に ; が欠けているのが原因らしいです。（ref: #4729 ([PATCH] Make Prototype js-packer compatible) – Ruby on Rails – Trac）

また、仮に元ファイルを修正してから圧縮しても、せいぜい20KB超というところ（それで十分という人も多いと思うが）。

今回紹介するのは、もっとシンプルで効果的な方法です。

2006-11-22T11:43:56+09:00 追記

どうも「mod_gzip ではダメなのか」という意見が多数見られますが、今回の趣旨は「こういう選択もあるよ」という提案なので、それを言われると、ンガググ。転送時に圧縮する方法もあれば、元から圧縮しておく方法もある──選択肢が増えることによって、ちょっと得するひともいるのでは、と思って書きました。

転送時圧縮についてはCSSファイルを圧縮する方法 : 亜細亜ノ蛾で PHP を利用する方法を紹介してあります。

あと、展開後のスクリプトの動作を改善するわけでは無いです。それは、今回の趣旨からは外れているので悪しからず……。

コンパクトでサンプル豊富なJavascript本

2006/8/19 PC

#### Javascriptを覚えたい！
自分のサイトを持つようになると、自分なりにデザインをカスタマイズしたくなるものです。細かいデザイン指定がしたくなった場合、(X)HTMLとCSSを覚えることが必要になってきます。
その後に必要なのが、Javascriptの知識でしょう。
(X)HTMLやCSSは「何となく見よう見まね」で*結構なんとかなる*、と自分は考えています。しかし、Javascriptはなかなか身に付きませんでした。
そういったときは、専門書を購入するのが一つの手です。しかし、自分はJavascript関連の本を買ったことがありませんでした。──高かったり解りにくかったりしたので。あと、*内容が古い*物が多くて、読む気にならない！ということも多かったです（「IEのウィンドウを振動させてみましょう」とか言われても）。
そういったわけで、前からJavascriptの本を探していました。何気なく書店で見かけた、この本が気に入ったので買ってみました。

JavaScriptリファレンス&逆引きユーザー便利帳―Ajax対応

井上健語
秀和システム
2006-07
￥ 1,680
Book