YouTube動画

  • 投稿日:
  • by

YouTubeにアップした動画一覧です。アカウントは、sigmasns を使っています。
※青春ぶらり旅の動画はこのアカウントにアップすることにした。

  1. 柿田川の大白鷺 http://youtu.be/yPgUX5Wz4fk  121127 2'30" 720p/3216kbps/61MB HD/11994Kbps/220MB
  2. 熊野古道 中辺路 http://youtu.be/QXBoQsBiap8 121220 1'24" 720p/2747Kbps/29MB HD10556Kbps/190MB
  3. 熊野古道 小辺路 http://youtu.be/2Sv8TL8kJwY 121220 1'10" 720p/2759Kbps/25MB
  4. 熊野古道 大門坂
  5. 鎌倉・朝比奈切通 http://youtu.be/mNfQ7pbYS2c 130118 1'08" 720p/2793Kbps/23MB

HP作成ツールの経緯

  • 投稿日:
  • by

1990年代のHPは、テキストエディター(Windowsではメモ帳notepad.exe)で作成され、その後FrontpageやMS Wordでも作成できるようになり、さらにYahoo!などのインターネット企業はオンラインでHPを作成するツールを提供するようになりました。

2000年代に入ると、Weblog(略してBlogブログ)が普及し、ブログを開設、作成、編集、運営するための「個人出版ツール(ブログツールと呼ぶ)」が全盛を迎えるようになりました。Blogger, LiveJournal, Wordpress, Movable Typeなどが雨後のタケノコのように開発され、合従連携(M&A)が繰り返され、淘汰されていきました。

筆者は2004年頃からレンタルサーバにブログツールをインストールして使うようになったが、その後も継続して運営しているのがWordpressやMovable Typeを使って構築したサイトです。数年前からは飛躍的に進化したCMS(コンテンツ管理ソフト)やSNS構築ツールを使っています。すべて無料のオープンソース開発のツールです。

Mediabox

John EinselenがLightbox, Slimbox, Mootools javascript libraryをもとに作成したMediaboxAdvanced1.3.4を改変した。Mootool最新バージョンは1.3.2だが、ここでは1.2.5を使っている。フラッシュスキンにはNonverBlasterおよびJWMediaplayer5.6を採用した。

JR東海テレビCM

表示サイズのデフォールト値は640x360に設定した。mediabox.jsで変更する。

Web特別映像

表示サイズは rel="mediabox[flash 400 300]" のように指定する。

飛鳥篇

動画と写真を同じグループに指定できる。キャプションはtitleタグに書く。

 

写真の表示

001
002
003
004
005

留意事項

  1. mediaboxAdv-1.3.4.js, mootools-1.2.5.js, quickie.js を統合してmediabox.jsとした。mediaboxAdv-1.3.4.jsを最初に書くと機能しない。
  2. 動画と写真が混在できる。上記の最後の写真は動画とおなじグループ。
  3. ポップアップサイズは[]の中で指定できる。写真はウィンドウサイズ以内に自動調整される。
    ※imagePadding: 100 でウィンドウのオフセットを設定する。80にした。
    ※imgBackground: true (mediaboxAdvanced.js 77行目)にすると元のサイズで表示される。
  4. lightbox.jsと区別するためにrel="lightbox"となっていたのをrel="mediabox"に変更した。
  5. スタイルはmediaboxAdvBlack21.cssを採用。改変してmediabox.cssとした。
  6. mediaplayer.swfにした。mediabox.jsでパス(呼出し元からの相対アドレス)を変更する。
  7. 動画ファイルをURLで指定するとローカルで再生できない。
  8. JW Media Playerを使うときは useNB: false とする。

About

  • 投稿日:
  • by
年月日別の写真集。写真ファイルはyyyy/mmdd/img/に保存。達磨写真館(Album)から参照する写真の一覧(thumb.html)やスライド(slide.html&slide.xml)を作成する。動画再生にはscript/mediabox.jsを使う。

mBanner

バナー写真を順番に表示する。

  1. <head>~</head>で次のスクリプトを呼び出す。
    <script type="text/javascript" src="../../script/mBanner.js"></script>
    ※リンク先が写真の場合、クリックするとmediabox.jsで拡大表示できるように改変した。
     112行目に rel="mediabox[mBanner]" を追加し、<head>で script/common.js を呼び出す。
    〔注〕photo/script/mBanner.jsではlightboxを採用した。

  2. CSSを追加する。
    .m_banner_hide { display:none; }
    .m_banner_show { display:block; }
  3. バナーを表示する位置に次のスクリプトを書く。
    <script language="javascript">
    banner1 = new Banner('banner1');
    banner1.add("IMAGE", "wide/003.jpg", 5, 140, 600,"wide/003.jpg","mb");
    banner1.add("IMAGE", "wide/002.jpg", 5, 140, 600,"wide/002.jpg","mb");
    banner1.add("IMAGE", "wide/004.jpg", 5, 140, 600,"wide/004.jpg","mb");
    banner1.add("IMAGE", "wide/005.jpg", 5, 140, 600,"wide/005.jpg","mb");
    banner1.add("IMAGE", "wide/001.jpg", 5, 140, 600,"wide/001.jpg","mb");
    document.write(banner1);
    banner1.start();
    </script>
各写真の表示時間(秒)、縦横の大きさ(ピクセル単位)を指定できる。

〔例〕 バナーのリンク先を写真にした例