2007 -06-21 ( Thu )

このブログや春木屋でも書いているように、フォトギャラリーテンプレを作るのであれば、ごく普通の書き方でフォトログを更新している人でも導入できるものにしたい、と考えてます。

FC2ブログの<!--image-->関連の変数はサムネイルを作らないときちんと動作しない（のかな？）ので、こちらで対処を考えなくてはなりません。

趣味のモブログのHTMLと、JavaScriptistのリファレンスを材料に、イメージしている処理を作ってみました。

う〜ん…ソースが酷い（＾＾ゞ
こういうのなら、もう共有プラグインで作っている人がいそうです。

サムネイル生成の実験（ページ先頭のボタンを押してみてください）

More

このサムネイル生成の処理には「prototype.js」を使用しています。
ここまでの処理の流れは以下のような感じです。

  1. HTMLの記事タイトルに貼ってある「個別記事へのリンク」に「permalink」クラスを付ける
  2. getElementsByTagNameでimg要素とa要素を全て取得
  3. a要素は更にprototype.jsのElement.hasClassNameで「permalink」クラスが付いているものを絞り込む
  4. img要素のsrc属性とa要素のhref属性を組み合わせてサムネイルリストを作り、document.getElementById('entrySet').innerHTMLで普通の記事と入れ替える

…と、すんなりできているように見えますが、実際のブログは一つの記事に複数の画像が貼られていたり、複雑なURIを含むバナーであったり、そもそも1ページの記事数がブログによって全く異なったりします。
配列の繰り返し処理は必須ですし、規格外のものをふるいにかけることもある程度しなければいけませんね。
それ以前にアクセスと同時に処理する類のものなので、崩れたページを見られないようプリロードイメージなどで目隠しする必要が出てきそう。う〜んう〜ん。

FC2ブックマークに追加
Tag
JavaScript ライブラリ 写真 カスタマイズ 

Comment

あ、しまった。

「thumbnail」のm抜けてましたi-183
天然で間違えたわけではないと弁明しておきます。

直さなきゃ…

Re:考察：普通のブログ記事からサムネイルリストを生成する

JavaScript は殆ど知らないので、良い課題を見つけたと思って今朝からチョコチョコとこの問題を解いてみました。

私が作ったのは、１ページの記事数に関係なく、１つの記事内にいくら画像があっても OK というところまでですが…。
複雑なURIっていうのはサンプルが思いつかなかったので放置です（笑

もしよろしければ、ご紹介させて頂きますが、どうですか？
（邪魔でなければコメント欄が良いです…）

こんにちはR'styleさん

＞もしよろしければ、ご紹介させて頂きますが
わ、是非拝見したいです（'▽'*
コメント欄で構いません。たぶん長いコードを書いても崩れないと思います。

＞複雑なURI
半角?とか=とかが入っているとJavascriptの処理に悪影響が出ないのだろうかという、ただの素人考えです。
そんな単純なものでは無いですよね…（笑）

「車輪の再発明」になりそうな予感激大なので、時間があるときにライブラリなど調べてみたりしてます。
写真周りではLightboxが有名ですけど、「スライドショー」を作ることが目的では無いんですよね。

Re:考察：普通のブログ記事からサムネイルリストを生成する

おぉ、作った甲斐がありました＾＾
------------------------------
function webGallery(EntryClass, PamalinkClass) {

var entries = document.getElementsByClassName(EntryClass);

var urls = new Array();
var imgs = new Array();

for (var i = 0; i < entries.length; i++) {

urls.push(new Array());

var as = entries[i].getElementsByTagName('a');
for (var j = 0; j < as.length; j++) {

if (Element.hasClassName(as[j], PamalinkClass)) {

urls[i].push(as[j].getAttribute("href"));
}
}

imgs.push(new Array());
imgs[i] = entries[i].getElementsByTagName('img');
}

var gallery = "";
for (var m = 0; m < urls.length; m++) {

for (var n = 0; n < imgs[m].length; n++) {

gallery += "<a class='thumb' href='";
gallery += urls[m][0];
gallery += "'><img src='";
gallery += imgs[m][n].getAttribute("src");
gallery += "' width='88' height='72' /></a>";
}
}

document.getElementById('entrySet').innerHTML = gallery;

}
------------------------------
webGallery('kiji', 'pamalink') とすれば、洵さんのサンプル HTML で使えます。
記事単位で div 等にクラスを付けて括っている必要がありますが、テンプレートに入れてしまうなら大丈夫ですよね…？

ちなみに、pamalink の取得で回りくどい事やってますが、一つの記事内に pamalink クラスの a 要素が２個以上あった場合におかしくならない為の保険です（笑
ユーザは何するか分からないので。

洵さんのサンプル HTML なら kiji クラス内の h3 の中の a ってやるとまだ多少簡単になるかもしれません。この場合も保険は要りますけど（笑

＞半角?とか=とかが入っているとJavascriptの処理に悪影響が出ないのだろうかという、ただの素人考えです。
＞そんな単純なものでは無いですよね…（笑）
なるほど、そういう事でしたか。
いや、逆にもっと単純にただの文字の並びとして扱っていいと思います（笑

Lightbox とか Ajax とか使いたいんですが、Lightbox は画像少ないのであんまり…、Ajax はアイデアが…。
私は普通にブログがあればいいので（笑

今回は JavaScript の良い勉強になりました＾＾

お陰でできたっぽいです〜＾＾

＞R'styleさん
昨日のテストページにランダムにバナーを混ぜてテストしてみました。
すばらしいです〜（-人-）謝謝

やっぱりXML解析のように、エントリーを一個づつ配列に入れてから処理しないと無理がありますよね…こちらこそとても勉強になります。
＞pamalink の取得
なるほど…2回書かれることを想定してませんでした（何）
私は、この処理をimg要素に対してやろうかと考えていたんです。
（配列の最初にあるimg要素だけサムネイルされる…的な）

＞kiji クラス内の h3 の中の a
う〜ん、こっちにしても保険は要りますよね（=_=；

R'styleさんのスクリプトを参考にさせてもらって、イメージしているものにかなり近づいてきました。ありがとうございます。
http://blog10.fc2.com/w/webbingstudio/file/webgallery002.html

アフィリエイトサイトに組み込んでみたものがこちらです。
http://littlehappy1.blog27.fc2.com/?style2=gallerytest&index

これ、共有プラグインにできないかな〜

Re:考察：普通のブログ記事からサムネイルリストを生成する

凄い！長いのが消えてる（笑
JavaScriptって結構いろいろできて面白いですね＾＾
アイデアさえあれば… orz

そういえば、キューブ灰皿を某人にプレゼントした記憶が…
あるけど、ない…（笑

Re:考察：普通のブログ記事からサムネイルリストを生成する

Websiteをお借りしてるものです。

おふたりともすごいですねっ！
あのアフィフェリエイトのサムネイルなんてそのまんまWebsiteのTOPページとしてもかっこいいかも。
共有プラグインになったら楽しそうだけど、設置をどうしよう。
WebsiteではTOP、カテゴリに決まった写真になってますが、ここにサムネイル一覧を表示できたらいいのにとか思ってます。

スライさんこんにちは

websiteをご利用頂きありがとうございます♪

＞共有プラグインになったら楽しそうだけど、設置をどうしよう
う〜ん、共有プラグイン化はちょっと難しいかも（-_-；
「同じページ内にある画像」しかリストアップできないので、毎日写真を撮っている人でもない限り実用性が無いんです…
きちんとテンプレートでご提供した方が良いかもしれません。

＞WebsiteではTOP、カテゴリに決まった写真になってますが、ここにサムネイル一覧を表示できたらいいのにとか思ってます
いい感じですね（＾＾
今のところの案としてはwebsite001のトップのように
・ランダムで原寸写真を一枚（もしできれば）
・その後にその一枚以外のサムネイル
・プラグイン
…というような感じでいけないかと考えています。

Re:考察：普通のブログ記事からサムネイルリストを生成する

洵さん

お返事ありがとうございますっ！
実は写真サークルに入っていて、何人かで一つのブログを共有しようかとも考えています。
TOPにサムネイルが並ぶ（数は限定されますが）と見てくれる人には一直線にそのエントリに行けていいかなと思って。
それにアフィリの黒バックのサムネイル一覧がかっこいいｗ

Post comment

管理者のみ読めるようにする

Trackback

trackback URL
http://webbingstudio.blog10.fc2.com/tb.php/469-627bd452
引用して記事を書く（FC2ブログ用）

What's new

FC2ブログ 一戸建て  無料ホームページ アフィリエイト レンタルサーバー