2007年09月22日

「Filey」ストレージ画像への直リンク

filey.jp」は、500MBを無料で使えるオンラインストレージ×ファイル共有サービス。ログインするとアップロードした画像のサムネイルが一覧表示される。(下図)


表示サイズは、小(100px)・中(150px)・大(250px)の3種類。サムネイル画像のアドレス(URL)は、表示画像上で右クリック→プロパティから得られる。たとえば

 (小) https://www.filey.jp/client/free/resource
      /3287/th_100_o1hFUt2PQ7YXmqZ2.jpg

 (中) https://www.filey.jp/client/free/resource
      /3287/th_150_o1hFUt2PQ7YXmqZ2.jpg

 (大) https://www.filey.jp/client/free/resource
      /3287/th_250_o1hFUt2PQ7YXmqZ2.jpg

上記URLの赤字部"th_???"を、"wm"に書き換えると原寸画像のURLとなる。

 (原寸) https://www.filey.jp/client/free/resource
         /3287/wm_o1hFUt2PQ7YXmqZ2.jpg

これらURLを外部から呼び出せばよい。

 
posted by localghost at 21:07| WEB(HTML,CSS,Javascript,DHTMLなど)

2007年09月20日

「Picasa Web Albums」の画像を外部呼出し(=直リンク)する方法

「Picasa Web Albums」の場合、非公開画像も外部呼出しできるのがいい。
下は非公開画像をアルバム内に表示させたところ(縮小しているのできたないです)。
右下赤枠部「この写真へのリンク」に、埋め込み用HTMLが用意されている。
画像サイズは、サムネイル144px、小288px、中400px、大800pxの四種類を選べる。ブログやホームページで表示させるにはこれで十分。



しかし、実はもっとたくさんのサイズを利用できる。
上記赤枠部から取得できる中サイズ(400px)画像のURLは次のようになっている。

<img src="http://lh5.google.com/picasa/RvIqSnkUNxI
/AAAAAAAAAj4/K1WkRfaW58I/s400/Bliss_Like_1600.jpg" />

この中の"s400"が画像のサイズ400pxを意味している。この数字"400"の部分を、
[72 , 144(サムネイルDefault値) , 200 , 288 , 320 , 400 , 512 , 576 , 640 , 800 , 1024 , 1152 , 1280 , 1600 , ・・・ , 2048(最大値) ] の中から選ぶことができる。全部ではないが、麻雀の点数をかぞえるときの語呂合わせに似た数字が多いので、憶えなくても片っ端から入れてみればわかるだろう(笑)
原寸で表示したいときは、"s400"の部分に原寸以上の数値を上の[ ]内から選べばよい。

下は"s72"と"s288"の場合
 

以上は、<img src="...">部分に適用する画像のURLだが、これをs400を超える拡大画像へのリンク<a href="...">部分に適用してもうまく機能しない。リファラーで弾くようGoogleがそういう仕様にしているみたいで、これにはちょっとした裏ワザが必要となる。

結論から言うと、href="..."部分に入れる画像URLをつぎのようにする。

<a href="http://lh5.google.com/picasa/RvIqSnkUNxI
/AAAAAAAAAj4/K1WkRfaW58I/s1600-h/Bliss_Like_1600.jpg">

つまり、サイズ指定数字のあとに"-h"を付加する。これだけ。
下はこのようにして外部呼出しした画像。(クリックで別ウィンドウに原寸表示)



posted by localghost at 17:33| WEB(HTML,CSS,Javascript,DHTMLなど)

「Windows Live SkyDrive」の公開画像を外部呼出し(=直リンク)する方法

この記事は、「Windows Live SkyDrive」のアップデートにともない、2007-10-23に一部訂正されました。

下図のように「Windows Live SkyDrive」公開フォルダ内の画像を表示すると、下部にURLと埋め込み用HTMLタグがあるが、これらは画像自体ではなく、表示サイトのURLとダウンロード用の埋め込みタグなので今回の対象外。



1.まず、対象となる画像ファイルを表示(上図)
2.画像の上にポインタを持って行くと「ダウンロード 開く」というツールチップが出るが、ここで「右クリック」
3.右クリックメニューの「プロパティ」に表示されているアドレス(URL)が1.で表示されている画像のURL。
4.原寸画像のURL取得は、同じく右クリックメニューに表示される「ショートカットのコピー」で。もしくは「開く」をクリックで表示される画像が原寸画像。
5.3.と4.で取得されるURLは、いずれも末尾に "?download" という文字列が付いているので、貼付けるときはこれを削除する。

このようにして外部呼出しで貼った画像の例(オンクリックで別ウィンドウに原寸表示)

 
posted by localghost at 12:57| WEB(HTML,CSS,Javascript,DHTMLなど)

2007年09月03日

水面に反射するようなロゴを生成してくれるオンラインサービス

■Web2.0 Logo Creator by Alex P
 テキスト入力(日本語不可)。背景色は白固定
 http://www.h-master.net/web2.0/
 

■Logo Maker : Web 2.0 Stylr
 テキスト入力(日本語不可)。背景色指定可
 http://web2.0stylr.com/stylr.aspx
 

■Reflection.js
 画像入力専用。テキスト入力不可。背景色指定可
 ※IE専用(生成にfilter属性を使用している)
 (ホームページ) 
 http://cow.neondragon.net/stuff/reflection/
 (Reflectomatic:クイック・トライ&プレビューページ)
 http://cow.neondragon.net/stuff/reflection/reflectomatic.html
  
reflection.js



posted by localghost at 10:51| WEB(HTML,CSS,Javascript,DHTMLなど)