ベルーナネット

[Javascript] 2007年04月01日

■ リンク先のチラ見機能を追加

home07033101.jpg 最近、よくいろいろなサイトでリンク先のチラ見というかプレビューを小さい画像でポップアップ表示しているサイトなど見てて、便利と(自分は)思ったので、いろいろと試してみました。結果としては、今すでに導入しているSnapなのですが、それまで2種類ほど試してみましたのでその使い心地なども紹介したいと思います。


最初は、HeartRails Glance
home07033102.jpg 対応ブラウザは、Internet Explorer、Firefox、Operaということで、これを見たときに即導入しましたが、Firefoxできちんと表示されていたので大丈夫と思っていたらこのブログではInternet Explorerで表示した時にエラーが起き、ページ全部が表示された後に、画面が真っ白になり、エラー表示。他のサイトではきちんと表示されているようなので、ここだけの問題なのは確実なのですが、残念でした。ウィンドウのカラーが6 色から選択できたり、検索ボックスの種類の多さや、Amazon のアソシエイトプログラムにも対応していたりと高機能。導入もscriptタグを入れるだけなので簡単でした。「チラ見」 ウィンドウの必要を感じない方には無効にする機能も付いているのでユーザーの使い勝手に対応しているのは嬉しい機能でした。本当はこれを使いたかったんですが、他のエラーを調べる時間がなかったので断念しました。


次に同じような機能で見つけたのはWebSnapr。WebSnapr自体はプレビューを作成する機能だけなのですが、Pluginsでチラ見機能が実現できます。
home07033103.jpg PluginsのPreview Bubble Javascript v2.0を使用してみましたが、こちらは素材やjsファイルをダウンロードしてサーバー側に保存しておかないといけないのでちょっと手間がかかりますが、表示される画面はプレビュー画面だけのシンプルさです。Wordpress pluginやWindows Live Writer Pluginなどもあります。 ただプレビューの画面が、半日経っても表示できなくて「Thumbnail has been queued」と表示されるだけだったので諦めました。また表示も若干遅い感じがしました。



それで結局決めたのは、Snapで、こちらはWebSnaprののように、遅くもなく、表示できなかったサイトも表示できるようになるまでの反映が早かったことと、HeartRails Glanceのようなカスタマイズ機能もあり、下記のような点で導入しました。

  • 内部リンク内ではプレビューを表示しない設定ができる。

  • ユーザーが必要ないと思えば消すこともできて、消した後また表示させたいときの対応用にバナーがある。

  • 日本語表示にも対応。

  • スクリプトを貼り付けるだけで設置完了

  • このブログではトップページの左下にこの切替スイッチを置いておくことにしました。



    チラ見機能では無いですが、Technoratiからこのサイトへのリンクで見つけたevasiveさんのサイト http://evasive.jugem.jp/
    いろんなネットサービスを紹介されていますが、その中で紹介されていたサイト。

    home07033105.jpg AoD(アド・オン・デマンド )
    キーワードなどのクリックで表示されるAoD !デモのサイトを見ていて綺麗かつ便利そうなポップアップで驚きでした。

    ユンサンさん自体のブログはこちらになります。こういうものを見てるとあっという間に時間が過ぎてしまいます。


    アド・オン・デマンドの方では、アフィリエイト・プログラム用タグ作成、フィーダーツールも公開されているので、早速作って貼り付けてみました。こちらはAoD !と違ってポップアップでは無いですが、スクリプトを貼り付けるだけというシンプルさ。下記はウィルスをキーワードにソフトウェアカテゴリの売り上げ順3位までで表示したものです。う~ん。いろいろ遊んでみたくなります。

    Wait for feeding...

    [Javascript] 2006年05月09日

    ■ Webサイト側のコントロールのアクティブ化

    rev06050909.jpg

    IE7β2にした事で、ちょっとサイト側でコントロールのアクティブ化をやってみることにしました。
    Microsoftなどで公開されている情報では、
    ActiveX コントロールのアクティブ化
    の中にあるように、外部からの対話型コントロールの読み込みが必要なようです。

    外部ファイルなら良いのかとちょっとPHPでやってみましたがあっさり、ダメでした(笑)

    ということでMicrosoftで言われてるように、Javascriptでファイルを読み込むことに。
    このブログではカレンダーとワールドカップまでのカウントダウンのFlashのActiveXコントロールがありますが、ここではカレンダーだけやることにしました。
    ここで使用しているカレンダーは、Kinarie&MayさんのところのMT(MovableType)用カレンダーです。
    貼り付けるコードまで出してくれるので、非常に簡単にFlashカレンダーが設置できます。

    ブログに貼り付けるコードは

    <OBJECT classid='clsid:D27CDB6E~><PARAM~>
    <EMBED src='http://~'></EMBED></OBJECT>

    のようになっていますが、これを外部ファイルにする準備をします。
    MT上でも構いませんがJavascriptファイルを作成します。ここではcal.jsと言うファイル名にしました。

    cal.jsの中は関数名を書きます。ここではRunCalと言う関数名にしました。

    function RunCal()
    {
     document.write('<OBJECT ~>\n');
     document.write('<PARAM ~>\n');
     ・・・
     document.write('<EMBED ~>>\n');
     document.write('</EMBED>\n');
     document.write('</OBJECT>\n');
    }

    自分が行ったのは、元のコード
    <OBJECT ~><PARAM~>
    <EMBED src='http://~'></EMBED></OBJECT>
    のコードの < と >を1行としてdocument.writeの1行に対応するようにしました。
    (1行全部をdocument.writeの後に付けても良いかもしれないですが、見にくくなるのでやってないです。)

    このcal.jsファイルを作るときの注意点は、元のコードを貼り付ける時は、' (シングルクォーテーション)であるところを "(ダブルクォーテーション)に変更する点です。
    document.writeが (' と ') に区切られてるので、ここをミスするとカレンダーが表示できなくなります。
    cal.jsをMovableTypeのテンプレートページから作成している場合は、そのまま再構築で。エディタで作成している方は、保存後にFTPクライアントツールでサーバにアップロードすればとりあえず外部ファイル化の部分は完了です。

    次にできたcal.jsファイルを読み込ませる方法ですが、元々貼り付けたページの
    <head>~</head>の間に1行追加します。

    <script src="[path]cal.js" type="text/javascript"></script>

    [path]はこのcal.jsファイルを置いている場所です。

    そして、元々ページの中でカレンダーを表示するためのコードの部分は削除せずに
    <noscript>~</noscript>で囲みます。

    <noscript>
    <OBJECT classid='clsid:D27CDB6E~><PARAM~>
    <EMBED src='http://~'></EMBED></OBJECT>
    </noscript>


    その後、その<noscript>の前にcal.jsファイルの中で作った関数(ここではRunCal)を実行させるようにします。

    <script type="text/javascript">RunCal();</script>

    以上で、とりあえずアクティブ化は、できるようになります。
    ちなみに、このブログでは、一部だけ行っています。(2006年5月9日現在)
    そのページはセレクト - パソコンのページで、ここだけはクリックしなくてもアクティブ化してます。(IE7βで確認済)

    また以前もエントリしましたが、下記はアドビシステムズのサイトの内容のリンクです。
    アクティブコンテンツのアップデートに関する記事
    ここでは複数の埋め込みコンテンツがある場合 なども例として載っています。

    [Javascript] 2006年03月18日

    ■ Lightbox JSとFlashのパーツ

    以前、小粋空間さんのサイトで、サムネイル画像をクリックして大きく表示するときに、とてもインパクトのあるLightbox JSを紹介されていて、早速使用していたのですが、Flashのパーツを使っているため、Lightbox JSで表示した画像よりも前面にFlashのパーツが表示されて、ずっと気になっていました。
    実際に紹介するときにも気になってることを記載してましたが。

    過去関連エントリー

    ● 2006年01月22日 Lightbox JS


    今回、小粋空間さんのサイトで、その解決方法が記載されていたので早速報告です。
    Lightbox JS でブログパーツ等の Flash を PNG 背景画像の下に隠す
    objectタグがHTML上にある場合と無い場合も紹介されており、後者はBlogPetなどのペット系のブログパーツに適用できます。

    小粋空間さんいつもありがとうございます。感謝!

    WindowsUpdateでFlashパーツを1クリックしないと動作しない件も片付いて、こちらも片付いたのでこれで気になってるものは無くなりました。

    [Javascript] 2006年02月10日

    ■ あれこれポップアップ

    トップページだけ、あれこれポップアップをトップページだけ入れてみました。

    javas20060210.jpg
    半透明ブラック背景で角丸な「リッチスタイル」がSamurizeで最初に作ったスキンの背景オブジェクトにそっくりで。
    http://www.remus.dti.ne.jp/~a-satomi/bunsyorou/ArekorePopup.html

    これ入れてトラックバックの所の文字がt1,t2とかになってるの気付いたりw

    [Javascript] 2006年01月22日

    ■ Lightbox JS

    このブログのテンプレートやカスタマイズでお世話になっている小粋空間さんのサイトで紹介になっていて、ずっと気になってて試す時間ができたのでやってみました。サムネイル表示の画像をクリックした際、今までは別ウィンドウを出して表示させていたのですが、こちらの方が見た目が良いので、今後こちらにしていこうかと思います。
    どういう風になるのかと言うと、サムネイルの画像をクリックするとそのウィンドウの中心に大きくされた画像が表示されるようになります。クリックすればまた元の画面に戻ります。それだけと言ってしまえばそれまでですが、インパクトはあります。(Javascriptを実行しない環境だと通常の画像へのリンクになりますね。)

    今のデスクトップのスクリーンショットを撮ったもので試してます。うちではFlashを使っているため、Flashのパーツが前面に来てしまうのでそれほど大きい画像になると、別ウィンドウになるのかなって思ってます。

    desktop2006012201.jpg

    Lightbox JS自体の説明はこちら(英語)
    http://huddletogether.com/projects/lightbox/

    小粋空間さんのサイトでは検証もされていて、MT、FC2ブログの対応方法など解説されています。1月13日と15日の内容です。