カテゴリ:Web( 12 )   


2008.8.19

最近AdobeのFlash Playerがどんどんバージョンアップしているわけで、最新版の普及率は良いものの旧バージョンの方もやぱっし結構いる。チラホラ旧Flash Playerで見るとおかしなサイトを見かけます。。。WEB制作者としてはチェックは大切やな~と痛感。

Flash Playerってインストールしてしまうと、古いのに戻す方法がないと思ってたらこんなサイトを発見。米アドビがダウングレードするためのアーカイブを残してた。

http://support.adobe.co.jp/faq/faq/qadoc.sv?228683+002

でも難点はIE用はないことか・・・

[PR]

by masak1tkd | 2008-08-19 17:50 | Web


2008.7.24

現在、制作中のWebサイトにWordPressを導入していたのだが、先日最新バージョンがリリースされたようで、本日アップグレードしてみました。2.5x系から2.6へのアップグレードでしたが、プラグインは問題なく動作しています。

>> WordPress 2.6 日本語版リリース
>> アップグレードの手順

そして今日ついでに携帯閲覧用のプラグインも入れてみた。簡単に出来ていい感じです。

>> Ktai Style (携帯対応プラグイン)

[PR]

by masak1tkd | 2008-07-24 14:00 | Web


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


MODx   

2008.6.24

f0106032_23314166.jpgMODx 非常に便利です。Movable TypeやWord Pressのようなインストール型のCMSで、フリーのオープンソース。ブログとしての機能だけでなく、一般的なWEBページの管理作成ができる。DBも自動的に作成してくれるし、本格的な動的WEBサイトが簡単に出来ます。管理、編集のツールに実装されてるエディタはスゴイ。ホームページ作成アプリのような感覚で使える。PHPで動いているみたいです。

世界には、いろんなモノ作ってくれる人いるな~



■ ダウンロードは本家サイトで! >> http://modxcms.com/
インストール方法、日本語の設定方法の紹介 >>

[PR]

by masak1tkd | 2008-06-24 23:38 | 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


2008.1.4

ここ最近、自分のPCのIEを7にバージョンアップしてから、Web制作仕事でIE6の表示確認が大変面倒になっていた。ちょっと今日ネットで調べてたらいいものをみっけた。

http://browsers.evolt.org/?ie/32bit/standalone

いいもの作ってくれる人いるなぁ~
IE7環境下で、IE6以下のほとんどの表示確認ができます。
その他こんな記事もありました。
CSSってデザインの幅広がったけど、やっぱり表示確認が面倒やな~。

[PR]

by masak1tkd | 2008-01-04 12:21 | Web


2007.11.13

だいぶ前になるがこんな本を買った。「10日でおぼえるPHP5入門教室」

10日で覚えようってのがオオチャクな話だが、まず勉強へのモチベーションを上げるにはちょうど良いかと思っていた。しかし案の定、時間なくて見きれず・・・・・昨日からまた勉強再開。最初からやりなおしてるが、どちらかと言えばデザイン寄りの自分には敷居が高い。ウェブサーバーやら、設定ファイルだの仕組みの部分から話が始まるのでチンプンカンプン。言語の勉強だけなら何とかなる気がしたが。本日はMyレンタルサーバーの設定で四苦八苦。これ続くかな~

f0106032_23434855.jpg

[PR]

by masak1tkd | 2007-11-13 23:55 | Web


SWFObject   

2007.11.09

今日は最近良く使うSWFObjectについて記録しておこうと思う。HTMLにswfファイルを埋め込む場合、objectタグやJavaScriptでdocument writeしたりすること多かったけど、コレを使い始めてから、こいつが一番良いのではないかと感じてます。SWFObjectといっても、ようはJavaScriptな訳でして・・・。使い方は簡単!!swfobject.jsという外部ファイルをhead部で読み込み、簡単なScriptを記述して呼び出すといったもの。ちょっと説明すると、

設置したい場所にdivタグを記述。それにid名(例えばflashcontent)をつける。そしてJavaScriptで
var so = new SWFObject("movie.swf", "mymovie", "200", "100", "7", "#336699");
so.write("flashcontent");
な感じに書いて呼び出す。基本はこれだけ。divタグ内に記述した内容がプラグインがないユーザー、またはJavaScriptがOFFのユーザーへの表示になります。

詳細はリファレンスをご覧ください。


いくつか自分が思う利点を書いてみます。

Flashプラグインがインストールされてない場合の表示が簡単にできる。
JavaScriptがOFF設定のユーザーへの表示対応も可能。
FlashPlayerのバージョンが検出でき、Express Installと併用すれば、FlashPlayerの自動アップグレードが可能。
アップグレードさせた後のリダイレクトページ設定も簡単。
swfファイルのwidth、height、background color(透明指定も可)などが制御できる。
動的ページなんかでパラメータをswfに渡すのも簡単に行える。
これでswfを埋め込めば、IEのActiveコントロールも回避できる。
などなど


SWFObjectで検索すれば色々でてきますが、ここが分かりやすかった。参考までに!!
SWFObjectリファレンス
SWFObjectリファレンス(翻訳版)

こんなページで使ってます。
マゴリアムおじさんの不思議なおもちゃ屋
[PR]

by masak1tkd | 2007-11-09 23:30 | Web


2007.10.30

WEB制作において、ブラウザの仕様の違いは本当に困る。シェアが少ないとは言え、どのブラウザにも利用者がいるわけで、やっぱりデザインするにあたり、どのブラウザでもレイアウトが崩れないって事は考慮したい。そんなWEB制作にかかわる人に便利なツールを作ってくれてる人も世の中にはいる。以下海外サイトが多いですが、結構使えます。

CSS参考
スタイルシート・スタイルブック
Web Browser CSS support
RichInStyle.com - CSS support table
Quick Lookup
CSS-only Filters Summary
CSS Lookup

便利ツール(検証関連)
W3C CSS検証サービス
CSS Grid Calculator

便利ツール(最適化関連)
Clean CSS
CSS Tweak

便利ツール(コード生成)
The Generator Form
Table Border Style Wizard
CSS Round Box Generator

便利ツール(フォント系)
Em Calculator
Typetester

便利ツール(色見本)
I like Your Colors
Color Codes Matching Chart HTML

便利ツール(その他)
Dynamic Drive CSS Library

[PR]

by masak1tkd | 2007-10-30 22:03 | Web


2007.10.27

世の中には美しいCSSデザインを紹介しているページが山ほどあるな~と実感した。下に紹介するのは一部ですが、いろんなサイトのソース見てると結構勉強になる!!

CSS Beauty
CSS Heaven
Stylegala
Nmatched Style
Web Creme
CeeSes
CSSBlast
Design Snack
CSS Princess
Church Beauty
The Daily Slurp

[PR]

by masak1tkd | 2007-10-27 22:59 | 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 31

カテゴリ





最新のトラックバック

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



ブログパーツ


ファン


記事ランキング


ブログジャンル


画像一覧




BLOG TOP PAGE TOP