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 AcrobatYouTube AddressBook Adobe Adobe InDesign AdobeAppleScript AdobeBridge AdobeIllustrator AdobeJSX aed Alfresco Android AnimationGif Apple AppleScript AppleScriptBasics AppleScriptCharacter AppleScriptColor AppleScriptDroplet AppleScriptErrorNum AppleScriptFolder AppleScriptFontBook AppleScriptRename AppleScriptTools AppleSymbols Applications Barcode Barcode2D BarcodePostal BetterHTMLExport Book Browser buzz Certificates CharacterEntity CharacterSets Colors Cool Site CSS Cutting DecoMail DecorationMail Design Desktop Diff DJ dmg DNS Documents Download eBook Editer eMail Envelopes ExifTool Facebook FFmpeg File System Fonts FontsTool FontsWeb FOOD FormPrint ftp Gadget Gif Animation Google HexEditor HTML info iPhoto ISBN ISO iTunes iWork iWorkNumbers iWorkNumbersCalendar iWorkNumbersTimecard iWorkPages JavaScript JeditX JeditX Regexp JeditXAppleScript JIS jquery 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 Office OSX Pantone Paper PDFlib Permission Photo Pictograms Print Public QuickLook QuickTime QuickTimeSetting QuickTimeSound Real Media ReName ResourceFork ruby Screen ScreenCast Search Security SEO Sharing SLAResource Sound Spotlight Stamp SWF Tutorial PSD TV Twitter Typography Unicode Utilities Video WebFont Wedding Windows WindowsMedia XML XMP XPS YouTube YouTube Rss