タグ:tools ( 2 ) タグの人気記事   


2008.6.25

f0106032_2104332.jpg最近使い始めましたAptana Studio。オープンソースIDEの中でも評価の高いEclipseがベースらしく、Windows環境はもちろん、Mac OSX、Linux環境のサポートもされるなど、幅広いユーザーに対応可能なオーサリングツールです。

HTMLエディタだけでなくJavaScript,CSSエディタとそのアウトライン機能を搭載。ブラウザを立ち上げなくてもIEやFirefoxなどのチェックが出来る。またFTP, SFTP接続もサポートし、ファイル更新と同時にFTP, SFTP経由でWebサーバにファイルをアップロードしてWebページを更新することも可能。

プラグインを追加インストールすることでRuby on RailsやPHPでの開発や、AIRプロジェクトの開発も出来ます。

今までWEB開発業務では、テキストエディタ(秀丸)を使っており、これはこれで大変便利だと思っていたのだが、Aptana Studioを導入してから更に効率UP。素晴らしい!!テキストエディタとFTPとデザイン作成アプリをガッチャンコした感じのツールです。

■ ダウンロードはこちらから >> http://www.aptana.com/

[PR]

by masak1tkd | 2008-06-25 02:20 | Web


2008.6.8

『PicLens』というイメージファイルや動画ファイル(FLV)をスライドショーで見るプラグインが出ました。見た目も凄いが、画像一覧の閲覧という点ではすごく勝手が良い。Google イメージ検索や、YOU TUBEなどでも実装されてます。仕事でかかわっているサイトにも実装してみましたが、なかなか面白いです。

対応ブラウザは以下のとおり。
Firefox (Windows)
Firefox (Mac)
Internet Explorer ※IE6でもありました。
Safari (Mac)

f0106032_1161661.jpg

サムネイル画像をマウス操作orカーソルキー操作すると、拡大画像表示や動画(FLV)の再生が出来ます。『次のページへ...』とクリックしてページを切り替える必要なく全てのファイルを見れるので、画像閲覧や動画閲覧のユーザビリティがとてもよくなると思います。webサイトでこの機能を対応させると、一覧ページのアクセス数は減るかもしれませんが、『PicLens』ビューアーからコンテンツへのリンクも貼れるので、逆に増える可能性もあるかと...
f0106032_1163966.jpg

利用方法
f0106032_2851.jpgプラグインはコチラPicLensのサイト(http://www.piclens.com/)からダウンロードできます。ブラウザごとに異なるので、利用したい対応ブラウザでダウンロードを行いインストールします。インストールするとブラウザにPicLensを立ち上げるボタンが出ます。下画像はWindows版 Fire Fox2.0のモノで、右上に窓のようなボタンが出ます。ブラウザによってインターフェイスは異なります。対応ページでは青色になり、未対応ページでは黒色です。それをクリックするとPicLensが動作します。また対応ページでは、画像にマウスオーバーすると、再生ボタンのような表示が出る(※左画像)ので、それをクリックしてもPicLensが動作します。

f0106032_117042.jpg

実装方法
基本的にはRSSを作るだけ。Piclensのサイトにリファレンスがあります。簡単に説明すると以下のとおり。

Step1 : 文字コードUTF-8で、以下の形のRSSを作成します。マルチバイト文字がいずれかの項目に入ってしまうと、IEなどでは正常に動作しませんでした。<title>には任意の名前、<link>にはリンク先のURL、<media:thumbnail url="xxxx.jpg"/>にはサムネイル画像パス、<media:content url="xxxx.jpg"/>には拡大画像(またはFLV)を指定します。
<?xml version="1.0" encoding="utf-8" standalone="yes"?>
<rss version="2.0" xmlns:media="http://search.yahoo.com/mrss" xmlns:atom="http://www.w3.org/2005/Atom">
<channel>
<item>
<title>A.jpg</title>
<link>pl_images/A.jpg</title>
<media:thumbnail url="pl_thumbs/A.jpg"/>
<media:content url="pl_images/A.jpg"/>
</item>
.
.
.
<item>
<title>Z.jpg</title>
<link>pl_images/Z.jpg</link>
<media:thumbnail url="pl_thumbs/Z.jpg"/>
<media:content url="pl_images/Z.jpg"/>
</item>
</channel>
</rss>


Step2 : HTMLのヘッダ部分に以下のタグを入れます。
<html>
<head>
<link rel="alternate" href="作成したRSSのURL" type="application/rss+xml" title="" id="gallery" />
</head>
<body> ... </body>
</html>


Step3 : Step2まで行えば動作しますが、こんなことも出来ます。
 RSSの連続読み込み
3ページからなる一覧ページ、AAA.htmlのRSS(AAA.rss)、BBB.htmlのRSS(BBB.rss)、CCC.htmlのRSS(CCC.rss)があったとします。個々のRSSに前後ページのRSSを書いておくと、連続してRSSを読み込み、サムネイル画像を表示していってくれます。何ページもある一覧だと、永遠と続くスライドショーが出来ます。
例)BBB.rssには、
<atom:link rel="previous" href="AAA.rss" />
<atom:link rel="next" href="CCC.rss" />

というタグを書きます。

 動画(FLV)の再生
<media:content url="画像ファイル名"/>
のところを
<media:content type="video/x-flv" url="FLVファイル名"/>
に変更します。

 HTML内にボタン表示
RSSの<link>の要素が、HTML内Aタグのhrefの値に書かれていると、そのAタグで囲った部分にマウスオーバーすると、再生ボタンのような表示が出ます。
<link>/sample/AAA.jpg</link> (RSSの方)
<a href="/sample/AAA.jpg"><img src="images/A.jpg"></a> (HTMLの方)


他にもJava ScriptでPiclensを動作させたり、音楽再生させたりと、機能はあるので詳細はリファレンスを見てください。
[PR]

by masak1tkd | 2008-06-08 01:44 | Web


S M T W T F S
1 2
3 4 5 6 7 8 9
10 11 12 13 14 15 16
17 18 19 20 21 22 23
24 25 26 27 28 29 30

カテゴリ





最新のトラックバック

おwれwのw骨wでw
from ガリガリ
映画館にて
from 国際派
天職キタ(*´ω`*)
from 大岩井



ブログパーツ


ファン


記事ランキング


ブログジャンル


画像一覧




BLOG TOP PAGE TOP