MAKOTO3.COM

Flickr Search by Silverlight 1.0の設置方法

2008 年 6 月 29 日 – 4:24 PM

Flickr Search by Silverlight 1.0とは

Flickr Search by Silverlight は、Flickrの画像を検索して表示するSilverlightアプリケーションで、Silverlightの練習用に制作したものです。MAKOTO3.NETにも設置しています。ウィンドウ下のテキストボックスにキーワードを入力し、右下のボタンをクリックすると検索結果が表示されます。画像をクリックすると回転しながら拡大されるなど、Silverlightっぽい動きも取り入れています。また、config.jsというテキストファイルを編集することで、色や背景画像、アニメーションの回転やスピードなどをある程度、カスタマイズできます。

なお、利用するためには、Silverlightプラグインをインストールしておく必要があります。インストールしていない場合は、ダウンロード用の画像が表示され、画像をクリックするとダウンロードページにジャンプします。ダウンロードは10秒程度で完了します。

Flickr Search by Silverlightは、どなたでもご自分のブログやホームページに設置できます。ただし、FlickrのAPI Keyが必要となりますので、利用する場合は、Flickrに登録してAPI Keyを取得してください。ここでは、API Keyを取得しているものとして、Flickr Search by Silverlight 1.0の設置方法およびカスタマイズ方法を説明します。

Flickr Search by Silverlight 1.0の入手と設置

1.flickr_silverlight.zipをダウンロードして、適当なフォルダで解凍します。
2.解凍でできたconfig.jsをテキストエディタで開き、次の行の"This is Your Flickr API Key"に、ご自分のAPIキーを入力して保存します。前後のダブルクォーテーションは消さないでください。

var var_flickr_api_key = "This is Your Flickr API Key";

3.FFFTPなどのFTPツールを使って、解凍でできたすべてのファイルをサーバー上のフォルダにアップロードします。フォルダは適当に作ってかまいません。

基本はこれだけです。あとは、アップロードしたフォルダ内にあるindex.htmlをブラウザで指定すれば動作します。たとえば、ホームページがhttp://www.sample.jp/で、ルートディレクトリ下にsilverlightというサブディレクトリを作り、そこにファイルをアップロードしたのなら、http://www.sample.jp/silverlight/index.html を指定すれば表示されます

ただし、これだと、ウィンドウの左上にポツンと表示されるだけです。ブログ記事やホームページ中で、他のコンテンツに溶け込ませたように見せるには、ブログやホームページのHTMLファイル中に、次のようなiframeのタグを挿入します。

<iframe src="index.htmlへのurl" width="265" height="310" frameborder="0" scrolling="no"></iframe>

"index.htmlへのurl"には、先ほどの例なら http://www.sample.jp/silverlight/index.html を指定すればOKです。

Flickr Search by Silverlight 1.0のカスタマイズ

Flickr Search by Silverlightの配色や動作は、解凍でできるconfig.jsというテキストファイルを編集するとカスタマイズできます。以下では、config.jsの各行の設定について説明します。説明のために、config.jsに含まれる各行に番号を振り、意味と設定方法を示します。

—–[config.jsの内容]————————————————–
[01] var var_flickr_api_key = "Your Flickr API Key";
[02] var var_border_on_color = "lightblue";
[03] var var_border_off_color = "white";
[04] var var_base_color = "white";    // if no color set "Transparent"
[05] var var_textbox_back_color = "black";
[06] var var_textbox_border_color = "black";
[07] var var_textbox_text_color = "white";
[08] var var_searchbtn_stroke_color = "White";
[09] var var_searchbtn_back_color = "black";
[10] var var_jmpbtn_on_color = "red"
[11] var var_jmpbtn_off_color = "white"

[12] var var_base_opacity = "0.5";
[13] var var_back_image = "back.jpg";

[14] var var_img_type = "_m";
[15] var var_first_word = "flower";

[16] var var_in_anime_move_duration = "0:0:0.3";
[17] var var_in_anime_angle_duration = "0:0:0.3";
[18] var var_in_anime_angle_by = "360";
[19] var var_in_anime_scale_begintime = "0:0:0.5";
[20] var var_in_anime_scale_duration = "0:0:0.2";
[21] var var_out_anime_move_duration = "0:0:0.2";
[22] var var_out_anime_angle_by = "360";
—————————————————————————

—–[各行の意味と設定方法]——————————————-
[01] FlickrのAPIキーを入力します。
[02] 画像サムネイルのマウスポインタを合わせたときの枠色
[03] 画像サムネイルの通常の枠色
[04] ベースの背景色（透明度を設定可）
[05] テキストボックスの背景色
[06] テキストボックスの枠色
[07] テキストボックスの文字色
[08] 検索ボタンにマウスポインタを合わせたときの枠色
[09] 検索ボタンの背景色
[10] 拡大画像の右下に表示されるジャンプボタンにマウスを合わせたときの色
[11] 拡大画像の右下に表示されるジャンプボタンの通常色
[12] [04]のベースの背景色の透明度
[13] 背景画像ファイルのurl
[14]  取得する画像の解像度の指定。指定できるキーワードは以下のとおりです。

　_s …… small square 75×75
　_t …… thumbnail, 100 on longest side
 　_m …… small, 240 on longest side
 　(blank) ……medium, 500 on longest side

[15] デフォルトのキーワード
[16] サムネイルのクリック時に画像が中央に移動してくる時間
[17] サムネイルのクリック時に画像が回転する時間
[18] サムネイルのクリック時に画像が回転する角度
[19] サムネイルのクリック時に画像が拡大を開始するまでの時間
[20] サムネイルのクリック時に画像が拡大するまでの時間
[21] 拡大画像が元の位置まで戻る時間
[22] 拡大画像が元の位置まで戻るときの回転角度
—————————————————————————

なお、時間は"時:分:秒"で指定します。たとえば0.5秒なら"0:0:0.5"と指定します。

<< JavaScriptでSilverlight 目次 >>

---