アップした写真をお洒落に見せるJavaScript

category-icon

 久しぶりのJavaScriptネタです。最近は、マック(MBP)で作業することも多いのですが、アップルの提供する.MacLink というサービスを使うと簡単に見栄えのよいホームページ(HP)を作成することが出来ます。このサービスはマックを使ってこそ活きるものですが。

 で、何種類ものHP向けのテンプレートが予め用意してあるんですが、多くのテンプレには、デジカメで撮った写真を単に貼り付けるだけでなくて、それらをちょこっと斜めにしたり切手風に縁取りしたり出来て、お洒落に演出できるわけです。自分も以前からこういうことをppBlogでしたいなぁとは思っていて、現状、写真っぽく見せたりドロップシャドウを付けたりというのはスタイルシートを使って出来るようにしています。後は、切手風とか写真を少し傾けて貼り付けるとかですが、これらはサーバーサイドのPHPプログラムで画像を加工すれば可能なんだけど、写真をアップする際の手間が増えるのは好ましくないし、何よりプログラムを書かないといけない。

 画像の回転(写真を傾けて貼り付けたいので)なんて、クライアント側のJavaScriptで出来れば楽チンだけど無理だよなぁと思っていたんだけど、実は<canvas>Link を使えば簡単に出来ちゃうんですね。しかも画像同士を合わせることも簡単に出来る。これなら自分がやりたいことはJavaScriptで出来るじゃないか、ということで書いてみました。

WinterLeaves
Vistaに最初から付いてるサンプル写真

 これは通常の、ppBlogでデフォルトで出来ることです。つまり写真のように白枠を付けて、ドロップシャドウを付けて、ということですが、さすがに写真をちょいと傾けるとかは出来ません。ところが、これに、canvasを利用したJavaScriptをかますと以下のようになります。

WinterLeaves
photoeffect.jsを反映させたやつ-写真風

 この写真は上の写真と同じ画像ファイルを指定していますが、見栄えが随分と違ってます。しかもこれをJavaScriptでやっているわけで、canvas恐るべしですね。反対向きの傾きにしたらこんな感じです。

WinterLeaves
photoeffect.jsを反映させたやつ-写真風

 これは写真風のフレーム画像を合わせてますが、切手風のフレームを合わせたのが以下です。

WinterLeaves
photoeffect.jsを反映させたやつ-切手風

 てな感じです。どちらに傾けるかとか(傾けないというのもあります)、写真風か切手風かというフレームの選択は、何れもIMGタグの中でクラス指定をすることで実現します。

 ほかにいくつかデモを並べてみます。

TocoToucan

FrangipaniFlowers

OryxAntelope

Dock

Garden

 ちなみに、IE(インターネットエクスプローラー)はcanvasをサポートしていないので、こちらはVMLGを利用して同様の効果を見せるようにしています。こちらで動作が確認できたブラウザは、ウィンドウズではIE7, Firefox2.0でマックではSafariとFirefoxです。OperaやIE6以下は未確認です。

 一応、このスプリプトは外部読み込み形式で作動するようにしています。ppBlogであれば、各テーマのテンプレートHTMLファイルに、外部スクリプトを呼び込む要領で、

<script type="text/javascript" src="js/photoeffect.js"></script>

と記述して、あとはlib.jsDOM.onloadの最後の行にでも、

if(typeof photoEffect != 'undefined'){
 photoEffect.init();
}

と書いておけば動きます。あ、あと2種類のフレーム用の画像はトップページのImagesディレクトリにアップしておく必要があります。クラス名の指定ですが、IMGタグでのクラス指定で photo-effect が指定されていれば、それを認識して、このスクリプトが発動します。このスクリプトと画像ファイルを添付しておきます。まだ作りたてなので細かいところは見ていませんが興味ある方はどうぞ。

[Update:2007/10/8 17:31:18]

 傾きの角度は、自由に指定出来るようにしました。クラス名で photo-angle3photo-angle-3 みたいに指定します。数字は-360度から360度まで。マイナスの値なら、右肩上がり、正の値なら左肩上がりです。

 あ、ついでにppBlogユーザー向けも。これは、Firefoxに対するマウスオーバーチップ処理を追加しています。

— posted by martin at 04:35 am   commentComment [12]  pingTrackBack [3]

この記事に対するコメント・トラックバック [15件]

scrollUp1. ごはん — 2007/09/04@10:40:22

これは素敵
IE6, Opera9 ともに見れましたよ

Owner Comment martin Website  2007/09/07@07:47:49

動作報告ありがとうございます。
IE6,Opera9でも見れるなら,ほとんどのブラウザで
問題ないですねぇ。

3. BENIT — 2007/09/09@22:36:57

早速設置してみましたが、これは……良いですね!
Firefoxだと表示に一瞬ラグがあったりしましたが、許容範囲内だと思います。

気になった点を二つほど要望として書かせていただきます。実装予定でしたらスルーしてください。

1.既存の「画像が大きい場合は縮小表示・クリックで拡大」との同時使用
2.画像ギャラリーへの反映(使用していない画像にカウントされてしまいますね)

ブログの方を拝見したらまもなく日本を発たれてしまうとのことですが、お手すきのときにでも検討して頂ければ幸いです。

Owner Comment martin Website  2007/09/11@07:46:46

BENITさん、ご指摘ありがとうございます。
1、2ともに次回のバージョンアップに反映させようと
思っています。日本を発つ前には、バージョンアップ
します。

5. Nの法則 Website — 2007/09/13@00:32:24

現在、Nの法則が使わせてもらってるBlogスクリプトppBlogはヴァージョンが1.6.2か1.6.3です。で、最新ヴァージョンは1.6.4が出てます。1.6.4からは今までの文字コードEUC-JP版...
続き »

scrollUp6. yakkung Website — 2007/09/13@17:06:51

失礼します。フォーラムにも書きましたが、要望はこちらに書いたほうがよいかと思ったので・・・。
上記、とっても遊び心のある素敵な細工と思います。
でも今のわたしの要望は、「ただの枠線」なんです。画像につける効果に「白枠」「影」ともうひとつ「枠線」(ちょうどここのタイトル画像のようなの)を増やしていただけるとうれしです。
よろしくご検討ください。

Owner Comment martin Website  2007/09/18@02:46:48

こんばんは。シンプルな「枠線」であれば、画像挿入のポップアップ画面で、「影なし」「白枠なし」を選択すれば、IMGタグを囲むPタグにphoto-noshadowというクラスが指定されます。なので、これを、各テーマファイルのスタイルシートで指定すれば、好みの枠線を指定できると思います。

8. ぎはんぺ〜じ Website — 2007/09/18@21:54:27

このサイトで利用しているppBlogの公式サイトでアップした写真を傾けたり,切手風にできるJavascriptが公開されていたので試してみました。下の運動会の記事の写真のような感じにすることができます...
続き »

9. ぎはんぺ〜じ Website — 2007/09/18@21:56:14

このサイトで利用しているppBlogの公式サイトでアップした写真を傾けたり,切手風にできるJavascriptが公開されていたので試してみました。下の運動会の記事の写真のような感じにすることができます...
続き »

10. yakkung Website — 2007/09/19@10:02:19

今日こちらのページを拝見したところ、写真の表示効果がまったく適用されていない状態でした。先のコメントを書き込んだときはちゃんと切手風とかになっていたのですが・・・。なにかそちらで変えたのか、こちらの設定なのかf(--;???よくわかりませんが・・・IE6です。

scrollUp11. yakkung Website — 2007/09/19@10:05:35

あれ?コメント送信したらちゃんと表示された・・・。失礼しました。

12. yakkung Website — 2007/09/19@10:07:24

あれあれあれ~?上のコメント送信したらまた表示されなくなった・・・なんなんでしょうね?このコメント送信したらまたちゃんと表示されたりして・・・。

13. silicca — 2007/10/10@16:18:55

はじめまして。
使わせていただこうと思ったのですが、添付のリンクをクリックすると、oops!と表示されてしまいます…。

scrollUpOwner Comment martin Website  2007/10/10@16:55:59

あ、すみません。別のスクリプトの調整中でして、そこでひっかかってたようです。今はOKだと思います。

15. つんつわ — 2007/10/10@21:28:43

こんばんわ

ppblog以外の一般のサイトは、photoeffect.jsとphotoframesのイメージで動きますか?
一般サイトで使用したいのですが・・f(--;

この記事に対する TrackBack URL:

設定によりTB元のページに、こちらの記事への言及(この記事へのリンク)がなければ、TB受付不可となりますのであらかじめご了承下さい。

コメントをどうぞ。 名前(ペンネーム)と画像認証のひらがな4文字は必須で、ウェブサイトURLはオプションです。

ウェブサイト (U):

タグは使えません。http://・・・ は自動的にリンク表示となります

:) :D 8-) ;-) :P :E :o :( (TT) ):T (--) (++!) ?;w) (-o-) (**!) ;v) f(--; :B l_P~

     
T: Y: ALL: Online:
Created in 0.0191 sec.
prev
2007.9
next
            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