このブログを検索

大文字小文字を区別する 正規表現

Atelierで“LiM”が含まれるブログ記事

2013年2月 3日

隠居のブログ備忘録:JQuery lightbox 2.51 をカストマイズする

 
 昨年夏に、サムネイル写真をクリックするとウインドウ中央に写真が拡大表示される Llightbox を jQuery という JavaScript のライブラリーを使用した Lightbox2.51 を導入した。
 その時、カストマイズしたのは、デフォールトでは黒である背景画面の色を緑にしたのと、写真ページを閉じるボタンを デフォールトのclose.png から、自作の closelabel.gif に変更しただけである。

 私が管理している友人の Lightbox は、prototype.js という JavaScript のライブラリーを使った旧バージョン Lightbox2.0 を使っている。背景画面に、蝶をあしらった壁紙を使っていて、これを Lightbox2.51 で使う方策が分からなかったからである。
  Lightbox2.51 のカストマイズは、【jQueryのlightBoxプラグインの使い方】【jQuery LightBox Pluginの使い方】 などに詳しい。これらのプラグインは、新たに JavaScript を付け加えてカストマイズする方法である。だが、私のやり方が悪かったのか上手く行かなかった。
 そこで、当初導入した時にいじったJavaScript lightbox.js と スタイルシート lightbox.css 再度いじって見ることにした。 私にコードが理解できるわけではないから、やりかたは ここはと思われるスクリプト ないしは CSS をいじって、FTP でサーバーにアップロードし、実際のページでの変化を観察する方法である。幸い、JavaScript と CSS の変更は、すぐにページに現れるから楽である。この結果を備忘録として記録しておきたいと思う。

  1. 自作の closelabel に置き換える。
    lightbox.js の41行目を下のように独自の画像に置き換える。
          this.fileCloseImage = 'http://n-shuhei.net/atelier/Jquery2.51/images/closelabel.gif';

  2. セットで写真を表示している場合の表示を "image"(default) から "画像"に置き換える。44行目
          this.labelImage = " 画像 "; 

  3. セットの写真の何枚目を示す、表示を例えば "1 of 8" を " 1 / 8 "に置き換える。45行目
          this.labelOf = "/";  

  4. 背景画面を単一色から、壁紙画面に変える。lightbox.ccs の7行目あたりの背景色をコメントアウトして、壁紙イメージを挿入する。
    /*  background-color: #000000; */
    background-image: url("http://n-shuhei.net/atelier/lightbox2/images/overlay_1.jpg") ; 

  5. 画像の枠(台紙)の色をかえる。lightbox.ccs の35行目あたり。デフォールトは、"white;"
       background-color: #ffffe0;

  6. 画面の"前画面" "次画面" へのボタンを独自のボタンに置き換える。lightbox.ccs の112行目、117行目あたり。 
        background: url(http://n-shuhei.net/lightbox2/images/prevlabel.gif) left 40% no-repeat;

    background: url(http://n-shuhei.net/lightbox2/images/nextlabel.gif) right 40% no-repeat;

  7. 写真の説明文字の色を変える。lightbox.ccs の145行目あたり。デフォールトは灰色。
     color: #ffffff;

 その他、細かい部分も、CSS をいじることで変えられそうだ。
サンプル画像は、次のエントリー【隠居の探鳥ウォーク:ハリエンジュ 花芽ついばむ 鷽(ウソ)4羽 】などで確認できます。

  

2013年1月18日

野鳥の写真集

   今までに撮りためた野鳥の写真ばかり集めたサムネイル・テーブルを作ってみた。  自宅の庭、近所の公園、山小屋 H?tte Hachi などで、鳥の姿を見かけるとできるだけ写真を撮るように心がけてきたが、野鳥を撮るための超望遠・三脚など本格的な体制ではなかったので、2009年夏までは、NikonD70 with Tamron28-300mm の写真が中心である。
 2009年8月から野鳥の写真を撮るのにデジスコ・セットをそろえた。それ以降、野鳥の写真はコリメート法で撮影したものが中心になっている。だが、まだ気に入った写真は数枚しかない。
 その後、2010年3月に、ΣAPO 120-400mm の望遠を求め、NikonD70 につけて撮影していたが、同じ年の9月に一眼レフデジカメを NikonD90 に変えた。このカメラは、連写スピードが好いのと ISO 感度を自動設定できるので、野鳥撮影はかなり楽になった。
 さらに、2011年の7月には、望遠レンズをΣAPO 120-400mmからΣAPO 50-500mmに換え、同じ年の年末には一眼レフデジカメを NikonD7000に変えた。一秒に6コマの連写速度とISO感度は6400(設定によって25600まである)となったので、更に撮りやすくなった。
ほとんどの写真は、トリミングしているが、ブログに掲載するにはあまり問題はない。
 野鳥の分類方法についていろいろと考えたが、小宮輝之さんが出されている「日本の野鳥」という図鑑に準じて撮影した場所を、
  • 自宅(堺市泉北ニュータウン)近くの公園など
  • 自宅近くの池、川など
  • 山小屋のある兵庫県鉢伏山などの山林
  • 野鳥園などがある干潟など
に分け、目・科・種順に集めてみた。鳥の種名は自分なりに図鑑やネットサーチで調べたつもりであるが、間違いが多々あると思われる。もし分かれば、ご指摘いただきたい。
 同じ種でも異なる場所で撮っている場合は、どちらにも掲載した。
 なお、2011年2月から、写真撮影地点の地図を作成しだしている。サムネイル中に表示される【撮影地点地図】ボタンをクリックすると Google Map による地図が表示される。
 また、場所を示すタイトルをクリックすると、その場所で撮った写真のサムネイル集にリンクしている。また、鳥種名をクリックすると、その場所のサムネイルのその鳥名の個所に直接リンクする。

 各サムネイルをクリックすると大きな画像となる。動画の場合もある。各サムネイルの下の日付・場所を示すキャプションはその写真を掲載しているエントリーにリンクしている。
 MP3 レコーダー EDIROL R-1 (2010年9月からは、SANYO ICR-PS603RM)で録音した(最近では、スマホ Xperia acro で)野鳥のさえずりがある場合には、その鳥名の左にプレイボタンをつけている。クリックしてみてください。さえずりが聞こえてくるはずだ。ただし、MP3 ファイルを再生できる環境が必要です。

 
野鳥の写真サムネイル
泉州の公園など泉州の川・池など兵庫鉢伏などの山林干潟・野鳥園など
Revised on May. 29th, 2011
スズメ目
 ハタオリドリ科:スズメ
 ウグイス科:ウグイス
 アトリ科:ウソ
 アトリ科:マヒワ
 アトリ科:カワラヒワ
 アトリ科:アトリ
 アトリ科:シメ
 アトリ科:イカル
 メジロ科:メジロ
 シジュウカラ科:シジュウカラ
 シジュウカラ科:コガラ
 シジュウカラ科:ヤマガラ
 ヒタキ科:サメビタキ
 ヒバリ科:ヒバリ
 ホオジロ科:カシラダカ
 ホオジロ科:アオジ
 ホオジロ科:ホウジロ
 ホオジロ科:ホウアカ
 モズ科:モズ
 ツグミ科:ジョウビダキ
 ツグミ科:ツグミ
 ツグミ科:シロハラ
 ツグミ科:アカハラ
 ツグミ科:トラツグミ
 ツグミ科:イソヒヨドリ
 エナガ科:エナガ
 ツバメ科:ツバメ
 ムクドリ科:ムクドリ
 ヒヨドリ科:ヒヨドリ
 カラス科:ハシボソカラス
 カラス科:ハシブトボソカラス
キツツキ目
 キツツキ科:アリスイ
 キツツキ科:コゲラ
ハト目
 ハト科:カワラバト(ドバト)
 ハト科:キジバト
タカ目
 タカ科:オオタカ
キジ目
 キジ科:キジ
ブッポウソウ目
 カワセミ科:カワセミ
スズメ目
 セキレイ科:キセキレイ
 セキレイ科:セグロセキレイ
 セキレイ科:ハクセキレイ
 ウグイス科:オオヨシキリ
チドリ目
 カモメ科ユリカモメ
 チドリ科コチドリ
 シギ科イソシギ
 シギ科タシギ
 チドリ科ケリ
カイツブリ目
 カイツブリ科カイツブリ
 カイツブリ科カンムリカイツブリ
ツル目
 クイナ科バン
 クイナ科オオバン
カモ目
 カモ科コガモ
 カモ科オカヨシガモ
 カモ科カルガモ
 カモ科キンクロハジロ
 カモ科:ヨシガモ
 カモ科ヒドリガモ
 カモ科ホシバジロ
 カモ科ハシビロガモ
 カモ科マガモ
コウノトリ目
 サギ科ゴイサギ
 サギ科コサギ
 サギ科チュウサギ
 サギ科ダイサギ
 サギ科アオサギ
ペリカン目
 ウ科カワウ
スズメ目
 エナガ科:エナガ
 メジロ科:メジロ
スズメ目
 ウグイス科:ウグイス
 シジュウカラ科:シジュウカラ
 シジュウカラ科:ヤマガラ
 ホオジロ科:ホオジロ
 モズ科:モズ
 ツバメ科:ツバメ
キツツキ目
 キツツキ科:コゲラ
 キツツキ科:アカゲラ
カッコウ目
 カッコウ科:カッコウ
スズメ目
 エナガ科:エナガ
 ツグミ科:ジョウビタキ
 ツグミ科:イソヒヨドリ
 アトリ科:イカル
 セキレイ科:キセキレイ
 セキレイ科:ハクセキレイ
 セキレイ科:セグロセキレイ
チドリ目
 シギ科:アオアシシギ?
 シギ科:イソシギ
 シギ科:トウネン?
 カモメ科:ユリカモメ
カモ目
 カモ科:オナガガモ
 カモ科:カルガモ
 カモ科:マガモ
 カモ科:キンクロハジロ
 カモ科:ヨシガモ
 カモ科:ミコアイサ
 カモ科:ヒドリガモ
 カモ科:コハクチョウ
 カモ科:マガン
 カモ科:オオヒシクイ
コウノトリ目
 サギ科:アオサギ
 サギ科:ダイサギ
 コウノトリ科:コウノトリ
タカ目
 タカ科:チュウヒ
ペリカン目
 ウ科:カワウ
ツル目
 ツル科:ナベヅル

日本の野鳥 (フィールドベスト図鑑)
小宮 輝之
学習研究社
売り上げランキング: 285563

2012年7月17日

隠居のパソコン備忘録: jQuery lightbox (同一画面上に拡大写真をかっこよく表示する)を導入する


 先日来、個人的地図作成サービス Google Maps API V3 を学習してきた。このサービスを使って、加賀地方旅行地図を作成したことを記録している。このサービスを学習中に、jQuery という JavaScript のライブラリーが、いろいろな JavaScript ソフトを導入するときに使われていることが分かった。

 この JavaScript ライブラリーの jQuery を使って、拡大写真の表示を同一画面上に表示する JavaScript の lightbox が新しいバージョン(Version 2.51)になっていることも分かった。(従来のライブラリーは、prototype.js )
 これを、先の加賀地方旅行地図での写真表示に使って見ることにした。
サンプル画像

 インストールについては、Lightbox2 のページから、Lightboxv2.51 をダウンロードし、PC のどこかのフォルダ(例えば、lightbox2.51 を作成し )に解凍する。
  上のページの【How to use】を参考に、ブログをアップロードしているサーバーに新しいフォルダー(例えば、lightbox2.51 )を作成し、ファイル転送ソフト(私の場合、FFFTP )を使ってサーバーにアップロードする。解凍したフォルダーをまるままアップロードしても問題は無いと思う。ただ、サーバーに余裕がない場合には、先ほどのページを参考に、必要なファイルのみをアップロードしたほうが良い。このあたりは、【アクアラングウエスタンver.9.2】というページを参照させてもらった。

 このようにして、lightbox2 が動作するのを確認の上で、次のようなカスタマイズを行った。
  • 初期値では、写真を表示する画面の背景色は黒であるが、これを好きな色に変えるには、lightbox.css の冒頭にある次の青字部分を変更する。
    /* line 6, ../sass/lightbox.sass */
    #lightboxOverlay {
      position: absolute;
      top: 0;
      left: 0;
      z-index: 9999;
      background-color: #408080; 元は、black;
      filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=85);
      opacity: 0.85;
      display: none;
    }
    


  • 写真ページを閉じるボタンを close.png(close.png) から、自作の closelabel.gif(closelabel.gif) に変更した。変更は、lightbox.js の50行目あたりある次の青字部分を変更した。なお、赤字部分で示したように、imageのありかは、絶対パスで書いておいたほうが無難なようである。
      LightboxOptions = (function() {
        function LightboxOptions() {
          this.fileLoadingImage = 'http://n-shuhei.net/xxxxx/Jquery2.51/images/loading.gif';
          this.fileCloseImage = 'http://n-shuhei.net/xxxxx/Jquery2.51/images/closelabel.gif';
          this.resizeDuration = 700;
          this.fadeDuration = 500;
          this.labelImage = " photo  "; 元は、Image 
          this.labelOf = "of";
        }
    


 この Jquery lightbox2 を、Movable Type 4 で作ったブログの写真(多分1000枚以上ある)の表示に適用した。(従来は、prototype.js の lightbox 2.0 ) Movable Type に適用するには、テンプレートのヘッダーにある lightbox 2.0 の Javascript 表示を lightbox 2.51 のコードに置き換えるだけで、すべての写真表示が新しい lightbox2.51 の表示となるので極めて楽ちんである。(つまり、HTML でのコードは、 lightbox 2.0 でも lightbox2.51 でも同じである。)

2009年5月27日

隠居の花見:浜寺バラ園

 いつも行く散髪屋のマスターが、浜寺公園のバラ庭園で撮ってきたコンデジのプリントアウトを見せてくれた。そういえば、見に行くのを忘れていた。
 5月26日、快晴になったのでもう盛りは過ぎていると思うが、娘と5ヶ月の孫も連れて行ってみることにした。

 バラ園の入り口へのアプローチに群生させている真っ赤なバラはよく見ると少々くたびれている。
 入り口ゲートのツルバラとして使われているアンジェラは、まだまだきれいである。そばで盛りの過ぎた花がらを摘む作業をしていたから、このゲートもきっとそのような手入れをしているにちがいない。
 このバラ庭園に 250 種類のバラが植えられているらしい。株の根元などには花の名前を示す掲示がされている。250 種類全てを撮るわけにはいかなかったが、花の写真を撮ったあとに、この名札も撮っておいた。
アプローチのバラ:クリックすると大きな写真になりますアンジェラ:クリックすると大きな写真になりますJersey Beauty:クリックすると大きな写真になりますリンカーン:クリックすると大きな写真になります
Gold Bunny Climbing:クリックすると大きな写真になりますRose-Marie Viaud:クリックすると大きな写真になりますMozart:クリックすると大きな写真になりますVeilchenblau(ファイルヘンブラウ):クリックすると大きな写真になります


 バラ庭園の中では、ラベンダーセージモンシロチョウがとまっていたり、むかし浜寺海水浴場だったときの名残と思われる砂浜に廃船となった伝馬船がおいてあり、そばでハマナスが咲いていたりする。また、庭園の池では睡蓮が咲いていたり、シオカラトンボがもう飛び回っていた。
ラベンダーセージにモンシロチョウ:クリックすると大きな写真になります廃船となった伝馬船:クリックすると大きな写真になります睡蓮:クリックすると大きな写真になりますシオカラトンボ


 

2007年6月18日

デジタル写真の白い点々

クリックすると大きな写真になりますクリックすると大きな写真になりますクリックすると大きな写真になります 先のエントリー隠居の庭:夏の花7題で掲載した写真をよく見て欲しいが、拡大すると写真の中に白いゴミのような点々が現れる。レンズについた埃かもしれないと思っていたが、カメラマニアの友人のコメントではレンズについたゴミでは現れ方が異なるとのことである。気になるので、オリジナルやブログにアップした元の写真を再度確認してみると白いゴミのような点々はない。では、ブログにアップした時点で何らかのノイズが入るのかと、このエントリーで全く同じ写真をアップしてみると白いゴミのような点々は現れないではないか。Webでサーチしてみても的確な答えは見つからなかった。奇怪である。どなたか原因をご存知の方は指摘して欲しい。

続きを読む "デジタル写真の白い点々"

2007年3月14日

Web Radio を録音する:Ripping Live365

 友達に Live365.com の存在を教えたら、最近いろいろなステーションを探し出して楽しんでいるらしい。ついでに、愛聴しているステーション(Hawaiian:Live365 にある)の曲を車の中や散歩中に iPod で聴けるようにできないかとの相談があった。ちょっと面白いテーマなので取り組んでみることにした。

 例によって自分のブログサイト内で探索できるようにしている Google Search で "Web Radio Ripping" というような言葉でサーチしてみると殆どは海外サイトであるが沢山ヒットした。日本のサイトの「StationRipperでネットラジオを外へ持ち出せ」という記事に引かれて、StationRipper をインストールした。このStationRipper は対象とするRadioを<隠居、NetRadio で Jazz/Country を楽しむ!>で紹介したSHOUTcast では見事に動く。曲名・アーティスト・曲の長さなどが、Radio Station をフォルダー名として保存される。こんなことが合法的なのかどうか疑いたくなるくらいである。ただ、StationRipper では、Live365 のストリームを ripping することはできない。設定の方法が拙かったようだ。Live365 のストリームを録音することはできるらしいがまだよく分からない。
 さらに英語のサイトを中心にいろいろと調べていると、どうやら RipCast というソフトで Live365 を ripping できるらしいことがわかった。早速インストールしていろいろと試してみた。インストラクションでは、Live365を ripping できることがなっているがなかなか上手くいかない。さらに、サーチしてみると "OldSchoolLive.com" というミュージシャンのサイトにあたった。どうやらこのグループは、Live365で自らの演奏を流しているらしい。ここで、Live365 から ripping する方法を説明している。その説明を従って、Live365 を聴く player を Winamp に変えると ripping できるようになった。ただし、 SHOUTcast での ripping のようには曲毎を split してアーティストなどの情報をつけるようなことはしてくれない。昔、カセットテープでFM放送を録音した(aircheck といいましたね)と同じである。ストリーミングしている時間分だけディスクに MP3 ファイルとして保存してくれる。さきほどのOldSchoolLive.com" では、ストリームファイルを split するソフトも紹介されている。いつも使っている SoundEngine でも split できそうであるが、 split に特化したファイルがないか探してみると Direct WAV MP3 Splitter という手頃なソフトが見つかったのでインストールして使ってみた。このソフト、 ripping したファイルの pause (無声)部分を見つけて、そこでファイルを split してくれる。 pause の時間などを設定できるので、結構使えそうである。ただ、当然ながら SHOUTcast の ripping のように曲名とかアーティストの情報は付加してくれない。若いころ(30年以上も前)、FM放送を録音したカセット・テープから MP3 ファイルを作成するのと同じである。このような良い split ソフトはなかったので1曲ごと手動操作をしていた。古い LP の曲を MP3 にすることも split が面倒なので止めていたが再開しようかなと思ったりしている。
 ところで、気がかりなことが起こっている。以下のように、米国で、Web Radio を規制しようとする動きである。拝金主義のレコード会社のロビー活動と思われる。Live365 を ripping できるにもう一つの Free soft である StreamRipper のページには次のように出ている。
News 2006/05/02 Audio Broadcast Flag Bill and PERFORM Act
Please take a moment to educate yourself about a very dangerous proposal for legislation in the United States offered by Rep. Mike Ferguson (R-NJ), called the "Audio Broadcast Flag Licensing Act of 2006". If passed, this legislation would severely limit your rights to record and enjoy digital  audio.

 また、Live365 のページには、私のように趣味的に Web Radio を開設している人にも厳しい話がでている。そのうちにこのような世界は消えていくかもしれない。
Last week, the Copyright Royalty Board (CRB) issued the significantly higher new royalty rates for Internet radio for the 2006-2010 period. The ruling ignored webcasting community proposals and set out the SoundExchange proposed "per performance" rates (below) and a $500 minimum fee per channel per year. Although there is no clear definition of what a "channel" is, the $500 minimum fee per channel threatens Live365's ability to help make the small webcasters' voice heard on the Internet, by effectively forcing Live365 to raise the minimum broadcasting fees to a level that would cause most small webcasters to discontinue their service thus silencing their stations. The CRB's determination imperils small and large webcasters alike and threatens listening experiences of millions of Internet radio listeners.

(追記:2007/3/23) 現在、Ripcastでの Live365 の録音は上手くいかない。Ripcast のホームページに繋がらない状態が続いている。著作権の問題か何かで、 Ripcast が閉じられているのかもしれない。
(追記:2007/3/24) Live365 のストリームを Winamp で再生するように設定して、Winamp の Playlist Editor を表示させ、その画面に表示されているステーションを右クリックしたときにでるポップアップ画面にある View file info.. をクリックするとURLが表示されるので、これをコピーしてRipcast の CurrentDownload の ServerAddress 欄にペーストすると Ripping が始まる。聞くのには、SongTitle を右クリックすると出るポップアップ画面で、Play をクリックすればよい。
 いろいろと試したが、Live365の録音は強制的に停められているようだ。StreamRipper でも上手くいかない。ちょっとの間様子をみることにしようと思う。 

<参考エントリー>


2006年11月12日

Google Maps API の利用規約要約

 Sign up for the Google Maps API のページに次のような利用規約の要約がある。実に寛大である。
Here are some highlights from the terms for those of you who aren't lawyers:
  • There is no limit on the number of page views you may generate per day using the Maps API. However, if you expect more than 500,000 page views per day, please contact us in advance so we can provision additional capacity to handle your traffic. Otherwise your quality of service may be degraded.
  • There is a limit of 50,000 geocode requests per day per Maps API key. This translates to roughly one geocode request every 1.73 seconds. If you go over this 24-hour limit, the Maps API geocoder may stop working for you temporarily. If you continue to abuse this limit, your access to the Maps API geocoder may be blocked permanently.
  • The Maps API does not include advertising. If we ever decide to change this policy, we will give you at least 90 days notice via the Google Maps API Blog.
  • Your service must be freely accessible to end users. To use Google mapping technology in other types of applications, please use Google Maps for Enterprise.
  • You may not alter or obscure the logos or attribution on the map.
  • Google will upgrade the API periodically, and you must update your site to use the new versions of the API. The Maps team will notify you of updates on the Google Maps API Blog. If we make a non-backwards compatible change, we will give you at least a month's notice to make the transition, during which both versions of the API will be available.
  • There are some uses of the API that we just don't want to see. For instance, we do not want to see maps that identify the places to buy illegal drugs in a city, or any similar illegal activity. We also want to respect people's privacy, so the API should not be used to identify private information about private individuals.
  • Remember that we reserve the right to suspend or terminate your use of the service at any time, so feel free to contact us before you do all the integration work if you are unsure of whether your implementation will meet our Terms of Use.