JavaScript

Google Libraries API

Image00230202_24432


Google Libraries API - Google CodeGoogle Libraries API - Google Code:新しいウィンドで開きます

| | コメント (0) | トラックバック (0)

[JQUERY]prettyPhotoのオプション

JQUERYを使ったLightroomクローン
prettyPhotoのオプションを説明します。
設置については
こちら
[prettyPhoto3]ステップbyステップ【prettyPhoto3の導入】: [FORCE][LINK]新しいウィンドで開きます
記事を参考にしてください。


GoogleMap等を設定する時はのサンプルはこちら[LINK]アイコン:新しいウィンドで開きます

サンプルのソースはこちらを使います
「prettyPhoto.html.txt」をダウンロード


 

■窓の形状
Force4u00221112_11700

light_square
[LINK]
「prettyPhoto.light_square.html.txt」をダウンロード

light_rounded
[LINK]
「prettyPhoto.light_rounded.html.txt」をダウンロード

facebook
[LINK]
「prettyPhoto.facebook.html.txt」をダウンロード


dark_square
[LINK]
「prettyphoto. dark_square.html.txt」をダウンロード

dark_rounded
[LINK]
「prettyPhoto.dark_rounded.html.txt」をダウンロード

 

■複数リソースの対応


Force4u00221112_12953


Force4u00221112_13011


[LINK]
「prettyPhotoXXX.html.txt」をダウンロード

 

■開く窓のサイズ

Force4u00221112_13630


[LINK]
「prettyPhotoWind.html.txt」をダウンロード

| | コメント (0)

[reflect.js2]ステップbyステップ【画像への移り込み効果】



jQuery系です。
Reflection.js[LINK]新しいウィンドで開きます
Force4u00220930_190518


の導入をステップbyステップで

 

【1】HTMLを用意します。



<!DOCTYPE html> 
<html lang="ja"> 
<head> 
<title>[reflect]</title>
<style type="text/css">
html { 
display: block;
}
body{
background-color: #000;
}
</style>
</head>
<body>
<div align="center">
<noscript> </noscript>
</div>
</body> 
</html> 




効果がわかりやすいように
背景を黒にしています。

「reflect.js.1.html.txt」をダウンロード

「reflect.js.1.html」をダウンロード

 

【2】画像を配置します。



<!DOCTYPE html> 
<html lang="ja"> 
<head> 
<title>[reflect]</title>
<style type="text/css">
html { 
display: block;
}
body{
background-color: #000;
}
</style>
</head>
<body>
<div align="center">
<noscript> </noscript>
<img src="http://force4u.cocolog-nifty.com/skywalker/prettyPhotoSomethingBlue/Images/7.jpg" />
</div>
</body> 
</html> 



「reflect.js.2.html.txt」をダウンロード

「reflect.js.2.html」をダウンロード


 


【3】reflect.jsを組み込みます



<!DOCTYPE html> 
<html lang="ja"> 
<head> 
<title>[reflect]</title>
<style type="text/css">
html { 
display: block;
}
body{
background-color: #000;
}
</style>
<script type="text/javascript" src="http://force4uip.appspot.com/reflect/reflection.js"></script>
</head>
<body>
<div align="center">
<noscript> </noscript>
<img class="reflect rheight50 ropacity30" src="http://force4u.cocolog-nifty.com/skywalker/prettyPhotoSomethingBlue/Images/7.jpg" />
</div>
</body> 
</html> 





「reflect.js.3.html.txt」をダウンロード

「reflect.js.3.html」をダウンロード

 


【4】imgタグにclass指定します。
形式は

class="reflect rheight50ropacity30"


となります。



<!DOCTYPE html> 
<html lang="ja"> 
<head> 
<title>[reflect]</title>
<style type="text/css">
html { 
display: block;
}
body{
background-color: #000;
}
</style>
<script type="text/javascript" src="http://force4uip.appspot.com/reflect/reflection.js"></script>
</head>
<body>
<div align="center">
<noscript> </noscript>
<img class="reflect rheight50 ropacity30"&#xA0;src="http://force4u.cocolog-nifty.com/skywalker/prettyPhotoSomethingBlue/Images/7.jpg" />
</div>
</body> 
</html> 



「reflect.js.4.html.txt」をダウンロード

「reflect.js.4.html」をダウンロード


 

【5】マウスイベントを追加します。



<!DOCTYPE html> 
<html lang="ja"> 
<head> 
<title>[reflect]</title>
<style type="text/css">
html { 
display: block;
}
body{
background-color: #000;
}
</style>
<script type="text/javascript" src="http://force4uip.appspot.com/reflect/reflection.js"></script>
</head>
<body>
<div align="center">
<noscript> </noscript>
<img onmouseover="Reflection.add(this, { opacity: 2/3 });" onmouseout="Reflection.add(this, { opacity: 1/3 });" class="reflect rheight50 ropacity30" src="http://force4u.cocolog-nifty.com/skywalker/prettyPhotoSomethingBlue/Images/7.jpg" />
</div>
</body> 
</html> 




「reflect.js.5.html.txt」をダウンロード

「reflect.js.5.html」をダウンロード

 

【6】クリックイベントを追加する事もできます。



<!DOCTYPE html> 
<html lang="ja"> 
<head> 
<title>[reflect]</title>
<style type="text/css">
html { 
display: block;
}
body{
background-color: #000;
}
</style>
<script type="text/javascript" src="http://force4uip.appspot.com/reflect/reflection.js"></script>
</head>
<body>
<div align="center">
<noscript> </noscript>
<img onclick="Reflection.add(this, { height: 1/3, opacity: 2/3 });" class="reflect rheight50 ropacity30" src="http://force4u.cocolog-nifty.com/skywalker/prettyPhotoSomethingBlue/Images/7.jpg" />
</div>
</body> 
</html> 



「reflect.js.6.html.txt」をダウンロード

「reflect.js.6.html」をダウンロード

 

classで指定するオプションは以下

Force4u00220930_192604


Force4u00220930_192702

Force4u00220930_193325


 

とても簡単に
クロスブラウザ環境で移り込みを再現できます
便利ですね。
写真を多く見せるサイトではカッコいいですね
フォトアルバム等
画像が変わる場合等や
画像の点数が多い場合は有効です

1ケ2ケで固定な画像なら
PNG24で透過画像を作る方がセオリーだろうなぁ

| | コメント (0)

[prettyPhoto3]ステップbyステップ【prettyPhoto3の導入】

prettyPhoto3
jQuery lightbox for images, videos, YouTube, iframes Stéphane Caron – No Margin For Errors[LINK]新しいウィンドで開きます

WEBページに埋め込む方法の
ステップByステップ


 

【1】HTMLを用意します。


<!DOCTYPE html> 
<html lang="ja"> 
<head> 
<title>[prettyPhoto3]sample01</title> 
</head>
<body>
<div>
<noscript> </noscript>
</div>
</body> 
</html> 


「sample_01.html.txt」をダウンロード

 

【2】CSSスタイルシートを組み込みます


<!DOCTYPE html> 
<html lang="ja"> 
<head> 
<title>[prettyPhoto3]StepByStepSample02</title>
<link rel="stylesheet" href="http://force4uip.appspot.com/css/prettyPhoto.css" type="text/css">
</head>
<body>
<div>
<noscript> </noscript>
</div>
</body> 
</html> 

 

【3】Jqueryを組み込みます


<!DOCTYPE html> 
<html lang="ja"> 
<head> 
<title>[prettyPhoto3]StepByStepSample03</title>
<link rel="stylesheet" href="http://force4uip.appspot.com/css/prettyPhoto.css" type="text/css">
<script src="http://www.google.com/jsapi" type="text/javascript"></script>
<script type="text/javascript" charset="utf-8">google.load("jquery", "1.3.2");</script>

</head>
<body>
<div>
<noscript> </noscript>
</div>
</body> 
</html> 

「sample_03.html.txt」をダウンロード

 

【4】prettyPhoto3を組み込みます


<!DOCTYPE html> 
<html lang="ja"> 
<head> 
<title>[prettyPhoto3]StepByStepSample04</title>
<link rel="stylesheet" href="http://force4uip.appspot.com/css/prettyPhoto.css" type="text/css">
<script src="http://www.google.com/jsapi" type="text/javascript"></script>
<script type="text/javascript" charset="utf-8">google.load("jquery", "1.3.2");</script>
<script src="http://force4uip.appspot.com/prettyPhoto/jquery.prettyPhoto.3.0.js" type="text/javascript" charset="utf-8"></script>
</head>
<body>
<div>
<noscript> </noscript>
</div>
</body> 
</html> 

「sample_04.html.txt」をダウンロード

 


【5】終了bodyタグの前にprettyPhotoの呼び出し部を付け加えます


<!DOCTYPE html> 
<html lang="ja"> 
<head> 
<title>[prettyPhoto3]StepByStepSample05</title>
<link rel="stylesheet" href="http://force4uip.appspot.com/css/prettyPhoto.css" type="text/css">
<script src="http://www.google.com/jsapi" type="text/javascript"></script>
<script type="text/javascript" charset="utf-8">google.load("jquery", "1.3.2");</script>
<script src="http://force4uip.appspot.com/prettyPhoto/jquery.prettyPhoto.3.0.js" type="text/javascript" charset="utf-8"></script>
</head>
<body>
<div>
<noscript> </noscript>
</div>
<script type="text/javascript" charset="utf-8">
$(document).ready(function(){
$(".gallery a[rel^='prettyPhoto']").prettyPhoto({theme:'dark_rounded'});
});
</script>

</body> 
</html> 

「sample_05.html.txt」をダウンロード

 


【6】リンクを作る所にDIVタグを指定します。
この時のクラスは『gallery clearfix』です。


<!DOCTYPE html> 
<html lang="ja"> 
<head> 
<title>[prettyPhoto3]StepByStepSample06</title>
<link rel="stylesheet" href="http://force4uip.appspot.com/css/prettyPhoto.css" type="text/css">
<script src="http://www.google.com/jsapi" type="text/javascript"></script>
<script type="text/javascript" charset="utf-8">google.load("jquery", "1.3.2");</script>
<script src="http://force4uip.appspot.com/prettyPhoto/jquery.prettyPhoto.3.0.js" type="text/javascript" charset="utf-8"></script>
</head>
<body>
<div>
<noscript> </noscript>
<div align="center" class="gallery clearfix">
</div>

</div>
<script type="text/javascript" charset="utf-8">
$(document).ready(function(){
$(".gallery a[rel^='prettyPhoto']").prettyPhoto({theme:'dark_rounded'});
});
</script>
</body> 
</html> 


「sample_06.html.txt」をダウンロード

 


【7】リンク行を作ります


<!DOCTYPE html> 
<html lang="ja"> 
<head> 
<title>[prettyPhoto3]StepByStepSample07</title>
<link rel="stylesheet" href="http://force4uip.appspot.com/css/prettyPhoto.css" type="text/css">
<script src="http://www.google.com/jsapi" type="text/javascript"></script>
<script type="text/javascript" charset="utf-8">google.load("jquery", "1.3.2");</script>
<script src="http://force4uip.appspot.com/prettyPhoto/jquery.prettyPhoto.3.0.js" type="text/javascript" charset="utf-8"></script>
</head>
<body>
<div>
<noscript> </noscript>
<div align="center" class="gallery clearfix">
 <a href="http://www.youtube.com/watch?v=Sy3LPj4Ea_M" title="YouTubeLink"><img border="0" alt="YouTube" src="http://i3.ytimg.com/vi/Sy3LPj4Ea_M/hqdefault.jpg" class="shadow"  hspace="5" vspace="5"></a>
</div>
</div>
<script type="text/javascript" charset="utf-8">
$(document).ready(function(){
$(".gallery a[rel^='prettyPhoto']").prettyPhoto({theme:'dark_rounded'});
});
</script>
</body> 
</html> 

「sample_07.html.txt」をダウンロード

 

【8】rel内にprettyPhotoの変数を指定します。
prettyPhoto
prettyPhoto[XXXXX]
prettyPhoto[movie]
prettyPhoto[unusual]
prettyPhoto[iframe]
prettyPhoto[inline]
prettyPhoto[mixed]
prettyPhoto[custom]
等があります。
今回はiframeを使います。


<!DOCTYPE html> 
<html lang="ja"> 
<head> 
<title>[prettyPhoto3]StepByStepSample08</title>
<link rel="stylesheet" href="http://force4uip.appspot.com/css/prettyPhoto.css" type="text/css">
<script src="http://www.google.com/jsapi" type="text/javascript"></script>
<script type="text/javascript" charset="utf-8">google.load("jquery", "1.3.2");</script>
<script src="http://force4uip.appspot.com/prettyPhoto/jquery.prettyPhoto.3.0.js" type="text/javascript" charset="utf-8"></script>
</head>
<body>
<div>
<noscript> </noscript>
<div align="center" class="gallery clearfix">
 <a href="http://www.youtube.com/watch?v=Sy3LPj4Ea_M&hd=1&fs=1&showsearch=0" rel="prettyPhoto[iframe]" title="YouTubeLink"><img border="0" alt="YouTube" src="http://i3.ytimg.com/vi/Sy3LPj4Ea_M/hqdefault.jpg" class="shadow"  hspace="5" vspace="5"></a>
</div>
</div>
<script type="text/javascript" charset="utf-8">
$(document).ready(function(){
$(".gallery a[rel^='prettyPhoto']").prettyPhoto({theme:'dark_rounded'});
});
</script>
</body> 
</html> 

「sample_08.html」をダウンロード

 

【9】開くウィンドウの大きさや種類を指定します。
種類は
dark_rounded
dark_square
facebook
light_rounded
light_square
があります。
開く大きさは
width=XXX&height=XXX
で指定できます。


<!DOCTYPE html> 
<html lang="ja"> 
<head> 
<title>[prettyPhoto3]StepByStepSample09</title>
<link rel="stylesheet" href="http://force4uip.appspot.com/css/prettyPhoto.css" type="text/css">
<script src="http://www.google.com/jsapi" type="text/javascript"></script>
<script type="text/javascript" charset="utf-8">google.load("jquery", "1.3.2");</script>
<script src="http://force4uip.appspot.com/prettyPhoto/jquery.prettyPhoto.3.0.js" type="text/javascript" charset="utf-8"></script>
</head>
<body>
<div>
<noscript> </noscript>
<div align="center" class="gallery clearfix">
 <a href="http://www.youtube.com/watch?v=Sy3LPj4Ea_M&hd=1&fs=1&showsearch=0&width=853&height=504" rel="prettyPhoto[iframe]" title="YouTubeLink"><img border="0" alt="YouTube" src="http://i3.ytimg.com/vi/Sy3LPj4Ea_M/hqdefault.jpg" class="shadow"  hspace="5" vspace="5"></a>
</div>
</div>
<script type="text/javascript" charset="utf-8">
$(document).ready(function(){
$(".gallery a[rel^='prettyPhoto']").prettyPhoto({theme:'light_square'});
});
</script>
</body> 
</html> 

light_square[LINK]新しいウィンドで開きます

light_rounded[LINK]新しいウィンドで開きます

facebook[LINK]新しいウィンドで開きます

dark_square[LINK]新しいウィンドで開きます

dark_rounded[LINK]新しいウィンドで開きます

 

【10】表示されるメッセージを加えます
img 内のalt属性がウィンドの外
a 内のtitle属性がウインド内
に表示されるメッセージになります。


<!DOCTYPE html> 
<html lang="ja"> 
<head> 
<title>[prettyPhoto3]StepByStepSample12</title>
<link rel="stylesheet" href="http://force4uip.appspot.com/css/prettyPhoto.css" type="text/css">
<script src="http://www.google.com/jsapi" type="text/javascript"></script>
<script type="text/javascript" charset="utf-8">google.load("jquery", "1.3.2");</script>
<script src="http://force4uip.appspot.com/prettyPhoto/jquery.prettyPhoto.3.0.js" type="text/javascript" charset="utf-8"></script>
</head>
<body>
<div>
<noscript> </noscript>
<div align="center" class="gallery clearfix">
<a href="http://www.youtube.com/watch?v=Sy3LPj4Ea_M&hd=1&fs=1&showsearch=0&width=853&height=504" rel="prettyPhoto[iframe]" title="ウィンドウ内に表示されるメッセージ"><img border="0" alt="ウィンド外に表示されるメッセージ" src="http://i3.ytimg.com/vi/Sy3LPj4Ea_M/hqdefault.jpg" class="shadow"  hspace="5" vspace="5"></a>
</div</div>
<script type="text/javascript" charset="utf-8">
$(document).ready(function(){
$(".gallery a[rel^='prettyPhoto']").prettyPhoto({theme:'dark_square'});
});
</script>
</body> 
</html> 


「sample_13.html」をダウンロード


他にもオプションの使い方等
色々ありますので
試してみたいですね。

  
 


追記
prettyPhoto3はリクエストされたURLを検索して
if (itemSrc.match(/youtube\.com\/watch/i)) {
return 'youtube';
}else if (itemSrc.match(/vimeo\.com/i)) {
return 'vimeo';
}else if(itemSrc.indexOf('.mov') != -1){ 
return 'quicktime';
}else if(itemSrc.indexOf('.swf') != -1){
return 'flash';
}else if(itemSrc.indexOf('iframe') != -1){
return 'iframe';
}else if(itemSrc.indexOf('custom') != -1){
return 'custom';
}else if(itemSrc.substr(0,1) == '#'){
return 'inline';
}else{
return 'image';
};
};
それぞれのファンクションに分岐します


他オプションの種類は
こちら
[JQUERY]prettyPhotoのオプション: [FORCE][LINK]新しいウィンドで開きます
の記事にも書いています。


| | コメント (0)

[javascript]IPアドレスを取得する。

 
Google App Engineを使った[LINK]OpenNewWindow方法が
あるようです。
JSONを使って
簡単なPythonプログラムを使ってIPアドレスを取得
出来ます。

Screencapture00220726_170844jst

 


jsonipの解説ページはこちら[LINK]OpenNewWindow

Screencapture00220726_174840jst


Python scriptプログラムソース

ついてはこちら[github]OpenNewWindowで見る事が出来ます。


HTMLからの呼び出し方法についてはこちら[LINK]OpenNewWindow

こちら[github]OpenNewWindow
見る事が出来ます。


とても簡単な17行のプログラムです。
それを
JSON形式で
Content-Type: application/javascriptにして
渡す
ダケのシンプルな物です

ビギナー向きにはピッタリですね。

 


一時期、ちょっと前なら
SSI使っていましたが、昨今便利な世の中で
JSON使ってアクセスしている利用者のIPアドレスを取得する事が出来ます。


jsonip.appspot.com

を使います。
 
517x125_jsonip_02


http://jsonip.appspot.com/』のリクエスト
に対して
IPアドレスを返してきます。

 

callbackのオプションを使います。

516x117_jsonip_01_2

『http://jsonip.appspot.com/?callback=getip』

callback』オプションを付ける事で
戻り値を変数として格納?出来るのかな?

573x122_jsonip_03

そのようですね。
callbackオプションで指定した『ID』(この場合はgetipやgetaddress)
にIPアドレスが格納されます。

 

サンプルはこちら[LINK]OpenNewWindow

HTMLソースはこちら[LINK]OpenNewWindow

 

JSONP入門[LINK]OpenNewWindow
JSONPの守り方[LINK]OpenNewWindow
読む限り
http://jsonip.appspot.com/をそのまま利用するより
自前で用意した方が
セキュリティ上も好ましいようです。

appspot.comの一般的なアプリケーションは
作者がいるわけで
その作者がまぁ悪い人ではないでしょうが
悪意のあるコードを埋め込んだと『したら』
そのコードを利用している人
はもちろん
サイトで使っているなら
サイトに訪れた人を危険にさらす事になりますね。
大きいプロジェクトになったいる
appspot.comのアプリケーションは
まぁ
大丈夫だと思いますが
気を付けたいですね。

 

そんな訳で 
簡単なので
自分用にも作ってみた
[http://force4uip.appspot.com/]OpenNewWindow

Screencapture00220726_184345jst


 

geoiptoolとかも[LINK]OpenNewWindow
      
Screencapture00220715_75923

同様の仕組みですね

 

今でもjavascriptのみでIPアドレスを取得するには
ブラウザに依存したりしていますが
一般的にjavascriptではIPアドレスを取得出来ない
って事になるのかな?
でも
今回紹介したように
新しいテクニックや技術がどんどん出てきますので
WEB上で検索した結果だけを鵜呑みにして
信じるのは危険ですね
実際ウィキペディアに関しても
更新されていない項目なんかは
内容が間違っているのを良く見かけます。
(当時はそれで良かったが今は違うでしょみたいな)

まずは
手軽ですのでWEB検索するのは良いとして
その情報が本当なのか(今も)

考える必要がありますね

  


| | コメント (0)

JavaScript Frameworks

jQuery[LINK]
Prototype[LINK]
script.aculo.us[LINK]
MooTools[LINK]
ExtJS[LINK]
Qooxdoo[LINK]
Yahoo! UI Library (YUI)[LINK]
MochiKit[LINK]
Midori[LINK]
The Dojo Toolkit[LINK]

| | コメント (0)

その他のカテゴリー

Accessibility | AccessibilityCheck | AccessibilityForm | AccessibilityInDesign | AccessibilityPDF | Acrobat | Acrobat Action | Acrobat Annotation | Acrobat AppleScript | Acrobat Layer | Acrobat Plug-ins | Acrobat Portfolios | Acrobat Print | AcrobatBarcode | AcrobatDialog | AcrobatForm | AcrobatJS | AcrobatMenu | AcrobatPDF | AcrobatStamp | AcrobatX | AcrobatYouTube | AddressBook | Adobe | Adobe InDesign | AdobeAppleScript | AdobeBridge | AdobeIllustrator | AdobeJSX | aed | Alfresco | Android | AnimationGif | Apple | AppleScript | AppleScriptBasics | AppleScriptCharacter | AppleScriptColor | AppleScriptDroplet | AppleScriptErrorNum | AppleScriptFolder | AppleScriptRename | AppleScriptTools | AppleSymbols | Applications | Barcode | Barcode2D | BarcodePostal | BetterHTMLExport | Book | Browser | buzz | CAD | Certificates | CharacterEntity | CharacterSets | Chrome | Colors | Cool Site | CriminalMind | CSS | Cutting | DecoMail | DecorationMail | Design | Desktop | Diff | DJ | dmg | DNS | Documents | Download | DTP | eBook | Editer | eMail | Envelopes | ExifTool | Facebook | FFmpeg | File System | Fonts | FontsTool | FontsWeb | FOOD | FormPrint | ftp | Gadget | Gif Animation | glee | Google | Graphic | HexEditor | HTML | info | iPhoto | ISBN | ISO | iTunes | iWork | iWorkNumbers | iWorkNumbersCalendar | iWorkNumbersTimecard | iWorkPages | JavaScript | JeditX | JeditX Regexp | JeditXAppleScript | JIS | jquery | Kanji | Kids | Letterpress | Library | logo | Mac Admin | Mac Archiver | Mac Browser | Mac Browser Plugin | Mac QuickLook | Mac Spotlight | Mac Video | Map | Mobby | Moto | Movies | Music | Network Basic | ntp | OCR | OCR Font | Office | OfficePowerPoint | OSX | Pantone | Paper | PDFlib | Permission | Photo | Pictograms | Pictures | Press | Print | Printing | Public | QuickLook | QuickTime | QuickTimeSetting | QuickTimeSound | Real Media | ReName | ResourceFork | ruby | Sample | Screen | ScreenCast | Search | Security | SEO | Sharing | Sign | SLAResource | Sound | Souvenir | Spotlight | Stamp | SWF | Tutorial PSD | TV | Twitter | Typography | Unicode | Utilities | Video | WebClip | WebFont | Wedding | Windows | WindowsMedia | XML | XMP | XPS | YouTube | YouTube Rss