javascript

This category is - javascript -

サイトをサムネイル表示してくれるものは結構ありますが個性はそれぞれ。結構有名らしいんですがLink Thumbnailを紹介します。

テキストリンクにマウスを乗せるとサムネイル画像が表示されます。カチカチ変な音しないしスムーズに表示されるので気に入ってます。今このサイトの外部リンクは全てサムネイルが表示されるようにしてるんで適当にリンクにオンマウスして貰えれば効果が分かると思います。設置方法と効果は大きく分けて2種類あります。

  1. 別ドメインへのリンクを全てサムネイル表示させる方法
  2. リンク一つ一つにclassで埋め込む方法

簡単なのは別ドメインへのテキストリンク(サイト内はサムネイル表示されません)全てをサムネイル表示させる方法ですが、場合によっては邪魔になりすぎる場合もあるんで2パターン説明してみます。ちなみにサムネイル表示させる注意点が1つあります。

  1. リンクに<strong>とか付けてると何故か表示されません。

理由はよく分かりませんが表示されませんでした。取り合えずLink Thumbnailを見れば何となく分かるんですが①のDownloadをクリックしてlinkthumbスクリプトをゲットして下さい。

  1. arc90_linkthumb.js
  2. linkpic_shadow.gif

この二つを使います。この二つを好きな場所にアップして下さい。今回はMovable Typeでjsフォルダ、imgフォルダがトップディレクトリにあると想定してみます。まず<head>部分に下記を記述して下さい。

  1. <head>

  2. <script type="text/javascript"
  3. src="<$MTBlogURL$>js/arc90_linkthumb.js"></script>

  4. ↓↓↓↓↓↓これを入れると全部サムネイル表示↓↓↓↓↓↓

  5. <script type="text/javascript">

  6. <!--

  7. arc90_linkThumbUseClassName = false;

  8. -->

  9. </script>
  10. ↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑

  11. </head>

次に普段使ってるCSSに下記を加えて下さい。<head>内に入れても良いです。

  1. .arc90_linkpic {

  2. display: none;

  3. position: absolute;

  4. left: 0;

  5. top: 1.5em;

  6. }

  7. .arc90_linkpicIMG {

  8. padding: 0 4px 4px 0;

  9. background: url(画像保存先フォルダ/linkpic_shadow.gif) no-repeat bottom right;

  10. }

これで終わりです。これ専用にCSSファイル作っても良いですがそれもま~人それぞれって事で。ちなみに【↓↓↓↓↓↓これを入れると全部サムネイル表示↓↓↓↓↓↓】って部分を入れないで個々に設定する場合は<p>タグに囲まれたリンクテキストに、

  1. <p><a href="http://www.~.~/" class="linkthumb">サイト名</a></p>

を加えてください。ま、Movable Type等のブログであれば勝手に記事書いてるだけで<p>タグが付加されているケースが多いんで大丈夫でしょう。ちなみに<p>タグはarc90_linkthumb.js内でインライン要素にしてくれてるんで勝手に改行も入らないです。

最初はサムネイル画像がキャッシュ化されていないのか、表示されにくいですがすぐ表示されるようになります。他にもSimple APIを使ったのがありましたが私は設置出来ませんでした(謎)

ま、大体あってると思うんで後は試して見てください♪

kazuking searchのトップページでprototype.js でタブ切り替えを使っているんですが、

とにかく重い・・・。

あまりにも重過ぎてprototype.jsをgzip圧縮等と意味不明なこともしてみたりとあれこれ対策を講じていたんですが。結局のところkazuking searchではprototype.jsをタブ切り替えでしか使っていなかったので、prototype.jsを削ることにしました。

最新版のprototype.js(ver1.5.0)は72KBもあります。これだと気が遠くなりそうなので、所持しているver1.4.0(46.4KB)、ver1.3.1(28.3KB)の軽い方、ver1.3.1に手を付けることに。とは言えjavascriptの知識は哺乳瓶クラス。な~んとなく程度の知識なので削除→アップ→削除→アップ→修正→アップ・・・。この繰り返しで活動する事数時間。

≒3KBまで削ぎ落としました!

lightboxを軽量化させたliteboxみたいなもんですかね?一部書き換えた部分もありますが以前に比べかな~りスムーズに稼動してます。読み込みのスピードは相当あがったんではないでしょうか?prototype.tab.jsとでも言うのかな?(笑)


  1. var Class = {
  2.   create: function() {
  3.     return function() { 
  4.       this.initialize.apply(this, arguments);
  5.     }
  6.   }
  7. }

  8. var Abstract = new Object();

  9. Object.extend = function(destination, source) {

  10.   for (property in source) {
  11.     destination[property] = source[property];
  12.   }
  13.   return destination;
  14. }

  15. Function.prototype.bind = function(object) {

  16.   var __method = this;
  17.   return function() {
  18.     __method.apply(object, arguments);
  19.   }
  20. }

  21. function $() {

  22.   var elements = new Array();

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

  24.     var element = arguments[i];
  25.     if (typeof element == 'string')
  26.       element = document.getElementById(element);

  27.     if (arguments.length == 1) 

  28.       return element;

  29.     elements.push(element);

  30.   }

  31.   return elements;

  32. }

  33. document.getElementsByClassName = function(className) {

  34.   var children = document.getElementsByTagName('*') || document.all;
  35.   var elements = new Array();
  36.   
  37.   for (var i = 0, len = children.length; i < len; i++) {
  38.     var child = children[i];
  39.     var classNames = child.className.split(' ');
  40.     for (var j = 0; j < classNames.length; j++) {
  41.       if (classNames[j] == className) {
  42.         elements.push(child);
  43.         break;
  44.       }
  45.     }
  46.   }
  47.   
  48.   return elements;
  49. }

  50. if (!window.Event) {

  51.   var Event = new Object();
  52. }

  53. Object.extend(Event, {

  54.   observers: false,
  55.   
  56.   _observeAndCache: function(element, name, observer, useCapture) {
  57.     if (!this.observers) this.observers = [];
  58.     if (element.addEventListener) {
  59.       this.observers.push([element, name, observer, useCapture]);
  60.       element.addEventListener(name, observer, useCapture);
  61.     } else if (element.attachEvent) {
  62.       this.observers.push([element, name, observer, useCapture]);
  63.       element.attachEvent('on' + name, observer);
  64.     }
  65.   },  

  66.   observe: function(element, name, observer, useCapture) {

  67.     var element = $(element);
  68.     useCapture = useCapture || false;
  69.     
  70.     if (name == 'keypress' &&
  71.         ((navigator.appVersion.indexOf('AppleWebKit') > 0) 
  72.         || element.attachEvent))
  73.       name = 'keydown';
  74.     
  75.     this._observeAndCache(element, name, observer, useCapture);
  76.   },

  77.   stopObserving: function(element, name, observer, useCapture) {

  78.     var element = $(element);
  79.     useCapture = useCapture || false;
  80.     
  81.     if (name == 'keypress' &&
  82.         ((navigator.appVersion.indexOf('AppleWebKit') > 0) 
  83.         || element.detachEvent))
  84.       name = 'keydown';
  85.     
  86.     if (element.removeEventListener) {
  87.       element.removeEventListener(name, observer, useCapture);
  88.     } else if (element.detachEvent) {
  89.       element.detachEvent('on' + name, observer);
  90.     }
  91.   }
  92. });

  93. /* prevent memory leaks in IE */

  94. Event.observe(window, 'unload', Event.unloadCache, false);

上記でタブ切り替えスクリプトに必要と思われるprototype.jsの役割は果たしております。もう少しスリム化 or 改変出来るところはあると思いますが、あればご指導コメント下さいませ。javascriptのLVは哺乳瓶クラスですので・・・。

CGI、PHP、JAVASCRIPT・・・。覚えることがいっぱいです(汗)

既に流行りきってしまっていると思われるprototype.jsですが。

動きが重くなる・・・。

javascriptの知識がヘタレな私では必要な部分だけ切り出すみたいなことも出来ません。今はkazuking searchのトップページで試験的にタブ切り替えやliteboxを導入してますが重い。

しかもバージョンが色々で最新のものは70KBも御座います。頭がHTMLとCSS程度の私にしたら、単なる文字の羅列が70KB!?って思っちゃいます。少し以前のものであれば40KBや30KB程度のありますが機能を使いこなしていない私とすれば何とか減らしたいのが本音でしょうか。

例えばliteboxにしたってprototype.lite.jsが同封されていて、多分必要最低限の中身にされているんだと思います。今利用させてもらってるタブ切り替えはAUSGANG SOFTさんのものでして、非常に便利です。

HTMLとCSSが分かっていれば簡単に導入出来ちゃいますし、他にも運用出来そうなんで隠れて色々作ってる最中です。が、重い。正直javascriptがどういう仕組みで動いてるのか不明ですがcgiやphpと同じなんでしょうか?

謎です。。。。

ネット検索していたらgzip圧縮なるものがあって、それで劇的に軽く出来るってなってました。ためしに圧縮(Lhaplusで)したところ40KB→7KB位まで圧縮出来ました。でもってそのまま外部リンク出来ちゃうんですね(笑)

<script type="text/javascript" src="prototype.js.gz">

でもってブラウザによっては(サファリ?)駄目みたいなので.htaccessに次の内容を記述とのこと。

RewriteEngine on
RewriteCond %{HTTP_USER_AGENT} ".*Safari.*" [OR]
RewriteCond %{HTTP:Accept-Encoding} !gzip
RewriteRule (.*)\.jgz$ $1\.js [L]
AddType "text/javascript;charset=UTF-8" .jgz
AddEncoding gzip .jgz

これで問題ないとの事。これで劇的に軽くなったprototype.jsを稼動出来る!!!なんて戯けた事を考えていたんですが甘かったです(汗)

あんま変わらない・・・。軽くなる意味が違ってた(汗)

初心者にはちんぷんかんぷんです。ま、gzip圧縮なるものの存在とそれが外部リンク出来るって知識が増えただけでも儲けものとしておきますかね?(笑)結局はprototype.jsが様々な処理をしてるわけで圧縮したからどうこうってのはないんだと思います。

ま、サーバーの容量が気になる方は良いかもです。私はまだ1GB程余ってますので必要ないかな?

Sponsored Link

Category

awasete.com

あわせて読みたい

Link

Web Tool

Banner Link

ホームページ作成 ランキング

SEO Stats

デル株式会社 

Right Relation