JavaScriptでスクロールバーを作ってみた。



<span class="mt-enclosure mt-enclosure-image" style="display: inline;"><img class="mt-image-center" style="text-align: center; display: block; margin: 0 auto 20px;" alt="jsscroll.png" src="/legacy/assets/jsscroll.png" width="500" height="500" /></span>

Flickrから読み込んで表示するようにしたらめちゃくちゃコード量増えてしまった。このぐらいになってくるとprototypeとかjQueryとかライブラリを使う事も考えてみようかな。

ハンドルをつかんでスクロール、ボタンでのスクロールアップ／ダウン、ハンドル以外の場所をクリックで適当な位置にジャンプ、ができます。

```js
var assets = new ReplaceScroll.Assets();
var replaceScroll = new ReplaceScroll("外枠の要素", "スクロール対象要素");
replaceScroll.initialize(assets.get());
```

というのが基本

<a href="/lab/scroll_test/">初期状態のサンプル</a>

カスタマイズもできるようにした

```js
var assets = new ReplaceScroll.Assets();
assets.register({
  upArrowAsset  : "...", //REQUIRE
  baseBodyAsset : "...",
  baseBodyColor : "#...", //REQUIRE
  barTopAsset   : "...", //REQUIRE
  barBodyAsset  : "...",
  barBodyColor  : "#...", //REQUIRE
  barBottomAsset: "...", //REQUIRE
  downArrowAsset: "..." //REQUIRE
});
var replaceScroll = new ReplaceScroll("外枠の要素", "スクロール対象要素");
replaceScroll.initialize(assets.get());
```

対応関係は下の図のような感じ

<span class="mt-enclosure mt-enclosure-image" style="display: inline;"><a href="/legacy/assets/ReplaceScrollBar.jpg"><img class="mt-image-center" style="text-align: center; display: block; margin: 0 auto 20px;" alt="ReplaceScrollBar.jpg" src="/assets_c/2010/03/ReplaceScrollBar-thumb-500x387-66.jpg" width="500" height="387" /></a></span>

<a href="/lab/scroll_test/sample1.html">サンプル１</a>

<a href="/lab/scroll_test/sample2.html">サンプル２</a>

スクロールが極端に長くなったときのハンドル部分の対応とか、よく考えたら水平スクロールバーもあるし、まだまだ足りないなあ。

# JavaScriptでのクラスっぽいものの書き方

これまでは

```js
Class = function() {
  //...
}
Class.prototype.publicFunction = function() {
  //...
}
```
という書き方で頑張っていたんですが、prototypeプロパティを使った書き方だと内部変数が関数ごとに分断されてしまうので、いちいちthisキーワードをつかないといけなかったり、コードが煩雑になりがちです。

AS3を同時に勉強していたので同じような書き方がしたかったのですが、JavaScriptにはJavaScriptの特長があって、それを活かす書き方のほうがいいのかな、と最近は思っています。

```js
Class = function() {
  var privateVar = hogehoge;
  var privateFunction = function() {
    //...
  }
  this.publicVar = fugafuga;
  this.publicFunction = function() {
    //...
  }
}
```

こっちの方が便利だよなー

JavaScriptでスクロールバーをつくる

いつのまにか半年も経っていた・・・
ちょっと実験サイトを作りました。

<a href="http://www.curoko.net/">http://www.curoko.net/</a>



ついったーAPI、flickr API、lastfmのフィードを使ってインスタントに更新できるサイト。これだけじゃなんとなく寂しい気もするけど。

ついったAPIはクエリを投げるscriptタグをappendするとJSON形式のデータが返ってくるのでそれを受け取るコールバックを書けば終わり。

lastfmはRSSをgoogle feed API経由で取得するんですが、なぜか10件中4件しか拾えない。なんだろう。

flickr APIは読込み完了までローディングをつけるのと、ソート順の変更機能を付けてみた。view数でのソートがしたいけど、もともとの機能にはないらしい。

あと、select要素の置換え。option要素を走査して、代理のulリストを作成して同様の機能を持たせ、結果をselectにフィードバックする、ということをしています。結構、ゴリ押しです・・
CSS3のプロパティを使うと角丸＋ドロップシャドウで簡単にmacっぽいインターフェースにできる。IEさえなければ相当作業量減らせるのに。

細かい所でいろんな発見があったので、追々記事にしたいと思います。

久しぶりにJavaScriptでいろいろやってみた

flickr から画像を読み込んで、サムネール表示と拡大表示をやってしまおうという実験。

<img alt="flickrAPIxThickbox.png" src="/legacy/images/flickrAPIxThickbox.png" width="450" height="147" />



<a href="http://www.110chang.com/lab/flickr_js_test/">flickr API × Thickbox のテスト</a>

JavaScriptで flickrAPI にアクセスする方法は

<a href="http://itpro.nikkeibp.co.jp/article/COLUMN/20061101/252356/">第2回　JavaScriptからFlickr APIで画像検索</a>

こちらを参考にしました。

サムネール表示は参考サイトの通り作れば問題ないんですが、拡大表示にてこずりました。

Thickbox はドキュメント内から"thickbox"クラスを走査して、リンク先をLightbox風に表示する jQuery プラグインですが、普通に組み合わせても、flickrAPI のコールバックより早く"thickbox"クラスを走査してしまい動作しません。

Thickbox は jQuery の`ready`イベント

```js
$(document).ready(function(){ ...
```

で開始しますが、`ready`イベントは`body`内の`script`要素より早いので、通常の`function`に書き換え、flickrAPI のコールバック関数の最後から呼び出してやると、サムネール生成（クラス名付与）後に thickbox を開始することができます。
（ついでにフェードインのエフェクトをつけました。IE6では動いてないみたいですが）

説明不足とは思いますが、この辺で。こういう文書、書くのってホント難しいわ・・

Articles tagged 'flickr'

JavaScriptでスクロールバーをつくる

久しぶりにJavaScriptでいろいろやってみた

flickr API × Thickbox