2014年10月20日

隠居のパソコン備忘録:mp3ファイルをWebページ内で再生する


 以前は、同じページ内で、Yahoo! のMedia Playerを使って、mp3ファイルをコントロールすることができた。
 ところが、最近になって、再生ボタンをクリックすると、QuickTime Player が別ページ(別ウインドウ)に立ち上がり再生が始まるようになった。(Windows Media Playerでも再生できるようにできるんだろうが、設定方法がわからない。)

 なんとか、同一ページ内で MP3ファイルを再生できるようにできないかとネットサーチをしてみると、いくつかの方法がみつかった。いずれもFlash Player を使う。
 その中で、Flash-mp3-player.net が提供している MP3 Player は、いくつかのパターンが用意されており、ページの body 部に下のような数行のコードを挿入することで、実現することができる。
 例えば、ツクツクボウシの鳴き声を録音した MP3 ファイルを配置すると次のようになり、再生ボタンをクリックすると、鳴き声が聞こえるようになる。再生中に表示されているポーズ・ボタンをクリックすると、再生が停止する。

  sample
  ツクツクボウシの鳴き声
sample の Flash MP3 player のコード

<object type="application/x-shockwave-flash" data="http://flash-mp3-player.net/medias/player_mp3_maxi.swf" width="25" height="20">
                    <param name="movie" value="http://flash-mp3-player.net/medias/player_mp3_maxi.swf" />
                    <param name="FlashVars" value="mp3=http%3A//n-shuhei.net/atelier/photo_insects/110923_tukutukuhousi.mp3&amp;showslider=0&amp;width=25" />
</object> ツクツクボウシの鳴き声
 再生をしたい MP3 ファイルは、青色文字で表示している。
 このコードは、Flash-mp3-player.net が提供している mini の MP3 Player の Generator で作成したコードを、一部修正したものである。今後は、少々面倒であるが、その都度記載することにしたいと思う。

 先日の和泉の国ジャズストリートで録音した飯田宗雪のライブ録音 MP3 ファイルを、同じように、ページ内で再生できるようにしてみた。

2011年10月 1日

隠居のMovable Type備忘録:ブログの記事に、MP3 Player を埋め込む 


 ブログの記事中に、小鳥のさえずりや虫の声などのMP3 ファイルを記載すると、小さな再生ボタンplay.JPGが表示されて、これをクリックすると音が聞こえてくるという JavaScript で作られた del.icio.us/js/playtagger を提供していたサービスページが閉じられてしまった。これは、URL のページHTML コードのどこかに(<head> 部分がリコメンドされているが)次のコードを挿入するだけでよかった。
<script type="text/javascript" src="http://del.icio.us/js/playtagger">
この playtagger という Javascript を運用してくれていたサイトが突如閉鎖したようでリンクが切れてしまった。非常に便利であったので残念である。
 それで、それに代るものをサーチしてみると【How to Embed MP3 Audio Files In Web Pages】というページがヒットした。
ここでは、Google と Yahoo! が提供するサービスが紹介されている。

Google Reader MP3 Player
 再生したい Mp3 ファイルを次のコードの中で指定すれば、ブログの中で MP3 が Windows Media Player などを介さずに再生される。
<embed type="application/x-shockwave-flash" flashvars="audioUrl=http://n-shuhei.net/xxxxxx/photo_insects/110923_tukutukuhousi.mp3" src="http://www.google.com/reader/ui/3523697345-audio-player.swf" width="400" height="27" quality="best"></embed>

  sample


Yahoo! Media Player
次のコードを URL の<head> 部分にでも一行書き入れ、
<script type="text/javascript" src="http://mediaplayer.yahoo.com/js"></script>

ブログの文中に、次のように MP3 file を指定すれば良い。del.icio.us/js/playtagger と同じ方式である。ただし、再生ボタンをクリックすると、下のスクリーンショットのような再生画面が表示される。右端の縮小ボタンで折りたためるが。
<a href="http://n-shuhei.net/xxxxx/photo_insects/110923_tukutukuhousi.mp3">ツクツクボウシ</a>

  sample
ツクツクボウシ
Yahoo_player.JPG

 上記以外にも、カスタマイズすることのできる Flash player を作成できる【MP3 Player】というサイトも見つかった。上の Google Rader MP3 Player とここで紹介されている Mp3 Player も Flash を使っている。
flash-mp3-player.net
コード例
<object type="application/x-shockwave-flash" data="http://flash-mp3-player.net/medias/player_mp3_button.swf" width="200" height="20">
    <param name="movie" value="http://flash-mp3-player.net/medias/player_mp3_mini.swf" />
    <param name="bgcolor" value="#0000ff" />
    <param name="FlashVars" value="mp3=http%3A//n-shuhei.net/xxxxxx/photo_insects/110923_tukutukuhousi.mp3" />
</object>

  sample

 Yahoo! の Javascript 方式を使えば、今までの記述を訂正しなくても良いので、これを使うことにした。Flash Player を使うとすべての MP3 file の記述を書き直す必要がある。Yahoo! なら、そう簡単に閉鎖をすることはあるまいと思っている。

関連エントリー
隠居のスマートフォン備忘録:(3)Xperia acro で音楽(mp3)を楽しむ

2009年11月 8日

隠居のパソコン:素晴らしい E-cards の紹介

 2006年7月にロサンゼルスに住んでいる先輩女史から送ってもらったアメリカ独立記念日のGreeting Cardがが素晴らしかったので、この E-cards を作成して有料で提供している jacquielawson と契約した。年間 $12 (2年間:$18 )で、作成されたそれぞれが素晴らしい E-cards が自由に使える。

クリックするとアニメーションが始まります 10月終わり近くになって、jacquielawson から、右のような新しい Hallowe'en(ハロウィン)の E-card をリリースしたとのメールが届いた。(メンバーになると新しい E-card が発表されるたびにメールをしてくれる)  E-cards はカードといっているが、 Flash で動くアニメーションである。余談ではあるが、このカラスはハシブトカラスだろう。
長い間 私の右サイトにボタンを置いている Season's Greeting を更新していなかったので、今回このハロウィンの E-card に置き換えた。最近作成された E-cards は、次の記述にあるように"back story"がついている。これもなかなか洒落ている。今回の "back story"は、scarecrow(かがし) について興味ある記述がつけられている。

Handy Tip!
Have you noticed how many of our recent cards include what we call a "back story" - a few extra pages of fascinating information about the subjects of the cards.
They're well worth exploring - recent cards have included hints on hunting for sunken(海底の) treasure, potted histories of the Blue Danube waltz and the Great Western Railway - and a story about hedgehogs!(ハリネズミ)

  提供されている E-cards は欧米圏の文化に基いており英語であり残念ながら年賀状はないが、誕生日・出産の祝い・結婚祝い・新築祝い・お見舞いなどもあるので年間1000円少しほど払って使ってみられたらいかがだろうか。(念のために言っておくが、私はこの jacquielawson のアフリエートをしているわけではない。) こういうものが容易く手にはいるようになったのも、インターネットの発展のおかげである。ネットの暗い部分ばかりに疑心暗鬼にならずに、sunny side を上手く活用すれば生活はもっと便利に潤いのあるものになるだろう。行動範囲の狭くなってきている私のような高齢者でも、パソコンの前に座ることによって若いときよりずっと世界が広がってきていると感じている。

2008年6月29日

Kinarie&Mayさんの横長Flash CalendarをMT4.1に設置する

 MT4.1 にアップグレードしてから、Kinarie&May さんのFlash Calendar が使えなくなっていた。MT3.3 のときに、アーカイブテンプレートのところにおいていた 月別XML の XML ファイルをどのように置き、アーカイブマッピングをどのように設定するのかの知識がなかったためである。

 それで、「小粋空間」さんが提供している「Ajax 月送りカレンダー(MT4版)」を3つ運営しているブログのうちひとつに導入した。うまく動くようなので、メインのこのブログにも導入してみた。ところが、はじめのブログでは上手く動いているのに、こちらではカレンダーは表示されるもののエントリーがある日のリンクをクリックすると、アドレスはリンク先のエントリーになっているのに
error in template: found but mtifnonzero was expected
というエラー・メッセージが表示されるだけである。

 この原因を探るうちに、Kinarie&May さんのFlash Calendar でつかう XML ファイルの置き場所とアーカイブマッピングの仕方が分かった。忘れないうちに書き留めておきたい。
 なお、エラーの原因はあとで判明したことであるが、テンプレートをいじっている間に、テンプレート・タグの残骸が「ブログ記事」テンプレートに残っていたためらしい。いつものように初歩的なミスである。

  1. 横長Flash Calendar 3.0 のダウンロードと解凍、アップロードなどについては、Kinarie&May さんのページ 「Falsh」→「MT用横長Flash Calendar 3.0」に詳しくでているのでそちらを参考にする。
     私の場合、MT3.3 のときに使っていた Flash File があったので、これを使った。
  2. MT4 になって、XML ファイルの設定が異なる。
    1. ブログ管理画面で(MT4 からダッシュボードという)設置するブログを選択し、「デザイン」→「テンプレート」→「アーカイブテンプレート」を選択する。
    2. 上段の「アーカイブテンプレートを作成」→「ブログ記事リスト」を選択する。
    3. 空白のテンプレート作成画面がでるのでファイル名を「月別XML」(なんでもいいようだが)とし、Kinarie&Mayさんの「月別XMLファイルのテンプレート修正」のページから、呈示されている XML ファイルを C&P して保存する。
    4. 保存すると、テンプレートの下に「アーカイブマッピング」が表示されるので、 「新しいアーカイブマッピングを作成」をクリックし、種類「月別」を選択し追加ボタンをクリックする。 「パス」はカスタムを選び、次のパスを入力(C&P)し保存する。
      xml/<MTArchiveDate format="%Y_%m"$>.xml
    5. Kinarie&Mayさんの手順にはないが、MT4では「デザイン」→「テンプレート」→「アーカイブテンプレート」→「ブログ記事リスト」の下部にある「アーカイブマッピング」で「日別」のパスを表示しておく必要がある。表示がない場合は、「新しいアーカイブマッピング作成」をクリックしてでてくるリストボックスから「日別」を選び「追加」をクリックする。パス表示はそのままでよいようだ。
  3. あとは、Kinarie&Mayさんの手順とおりに、Flash を貼り付けるHTMLソースをつくって、テンプレートに貼り付けるだけである。
    私の場合、MT3.3 のときのソースが残っていたので、URL のパス部分を変更して、MT4 の「テンプレートモジュール」→「ヘッダー」の<div id="header"> ~ </div> の部分に貼り付けた。ただし、私は「小粋空間」さんのテンプレート・セットを使わせてもらっている。


 友人が原稿を書いているもう一つのブログでは、「小粋空間」さんの「月送りカレンダー」を設置しているが、どちらも甲乙がつけがたい。「小粋空間」さんの「月送りカレンダー」では、スタイルシートでデザインをいじれるのがいい。
Kinarie&Mayさんのカレンダーは横長があるのと、投稿している日にカーソルを合わせるとエントリーのタイトルが出てくる。どちらも愛用させてもらっている。 

2008年3月11日

MT用フォトサムネイラーのインストール

 このブログに 2005年3月から掲載してきた種々雑多な写真も結構な量になってきた。これらの写真をカテゴリー別にアルバムにしたいと、ブログのタイトルなどで使っている Sothink SWF Quicker という Flash 作成ソフトのテンプレート利用も考えてきたが、日本語対応ができないなど意図したとおりにできないので諦めていた。

 写真のアルバムは、DIY作品集で実現しているが、新しいエントリーをあげるたびに修正しなければならないなど結構面倒な作業である。サムネイルに載せる写真を選択できるのは、いい点であるが。

 Flash カレンダーや Flash 天気予報を利用させていただいている Kinarie&May さん にMT用フォトサムネイラーというエントリーの中の画像ファイルをサムネイルで表示する Flash プラグインがある。前から気になっていたが、トライする機会がないままになっていた。今回、試してみると思い通りのインストールができたので、注意点などを記録として残しておきたい。

 次のサムネイルは、私のブログでカテゴリーを Gardening として分類しているエントリーに掲載されている写真である。下の << Prev ボタンをクリックすると日付を遡って見ることができる。サムネイルをクリックすると該当するエントリーが表示される。サムネイルに戻る場合は、ブラウザーの戻るボタンを使う。

   


 インストールの手順は、Kinarie&May さんのMT用フォトサムネイラー1.20 に親切に書いてある。
 以下は、注意点。
  • サムネイルされる写真は、HTMLに、<"img","src" >で指定される .jpg 写真である。いずれも小文字でなければならない。Picasa2 でエクスポートした写真は、大文字の .JPG となりサムネイルされないので要注意である。
  • テンプレートの新規作成で作成した xml ファイルは、作成した blog のルートフォルダーに保存される。ダウンロードしたphoto_thumbnailer120.zip を解凍してできる photo_thumbnailer120.swf ファイルは、同じフォルダーに置けばよい。
  • カテゴリー別にサムネイルを作る場合は、 xml ファイルの中で、<MTEntries category="004Gardening" lastn="999"> のようにするが、category の名前は、ブログ管理画面のカテゴリー名と一致させる必要がある。なお、サブカテゴリーも指定できる。私の場合、ソートのためにつけていた頭3桁の数字を忘れていたので、当初上手くいかなかった。
  • いくつかのカテゴリーでサムネイル集を作成する場合は、出力名を変えた xml ファイルをいくつか作ればOKである。

 このプラグインを応用して、私のサイトで運営している友達のブログの写真集とかのようなカテゴリー別のサムネイル集を作成していきたいと考えている。
 Kinarie&May さん Thanks a lot !!

(追記:2008/3/12) 私のサイトで運営している Studio YAMAKO はプロ級の腕前の YAMAKO が撮った趣味の蝶の写真が中心である。この蝶の写真のサムネイルを MT用フォトサムネイラー1.20 で作成してみました。右サイドメニューの Studio YAMAKO をクリックしてみてください。素晴らしい写真集がご覧になれます。

(追記:2008/3/13)サムネイルされる写真の拡張子は小文字の jpg でなければならない。ブログに写真を掲載するには Picasa2 でデジカメ写真を整理しエクスポートするのが便利であるが、拡張子が大文字の JPG となる。そのため、MTで写真ファイルをアップする前に該当するフォルダーの写真ファイルを Renamin.exe で拡張子を小文字の jpg としなければならない。ただし、この逆手をとって、サムネイルに載せたい写真だけ、小文字の jpg とする手もあるが、サーバーとエントリーのファイル名を変えねばならない。 

2008年2月23日

隠居、メニューをFlashボタンに変えてみる

 エントリーした日が表示される Flash の横長カレンダーや表示する地方を指定できる Flash 天気予報は、Kinarie&May さんの作品を使わせてもらっている。

 このサイトのメニューボタンが、なかなか洒落ている。自分でカストマイズできるように、Flashメニュー素材も公開されている。変化するメニューボタンを作りたかったので導入させてもらおうと思ったが、今気に入っている動きのあるタイトルを変えなければならないので諦めた。

 もう一度、Flash8 を学習しなおすうちに、先日作った「音の鳴る動きのあるリンク・ボタン」を作ったときの方法を応用すれば、少し似通ったものができるのではないかと気がついた。どうにか形になったので、例によって自分の記録用にかきとめておきたい。
 
  1. Flash8 を立ち上げ、新規→フラッシュドキュメントを選択する。
  2. 「修正」→「ドキュメント」で、メニューボタンを設置する場所の大きさに合わせて、ステージの大きさ・背景色を決める。今回は、1000px X 40px の大きさで、カラーピッカーでスポイドしたブログ・タイトルの背景色(#784028)にした。
  3. 「挿入」→「新規シンボル」でボタンを選択して、title_homeとボタン名を付ける。(名前はなんでもよい。)
  4. ボタン作成画面の再生ヘッドがアップにある状態で、ツールパネルの矩形ツールでステージ内に長方形を描く。
  5. レイヤー1のアップフレームをクリックし、ステージ上の長方形をクリックすると、プロパティ・インスペクターがシェイプに変わって、長方形を編集することができる。今回は、130 x 25px の長方形を描いた。
  6. アップ時のボタンの色(塗りのカラー)は、プロパティ・インスペクターにあるバケツの横の四角をクリックすると出てくるスポイドで、画面上の好きな色をクリックすると変えることができる。また、出てくる色パネルから選択したり、6桁の色番号を指定したリストことができる。色番号を指定する場合には、WebColorCreator というカラーピッカーを利用すると便利である。
  7. ボタンの枠線は、境界線を明瞭にするために、細い実線とした。
  8. テキストは、ツールパネルから、テキスト[A]アイコンをクリックし、プロパティ・インスペクターで、フォント・大きさ・色などを指定し、ステージ上で入力し、ボタン上にドラッグする。今回は、フォントは Verdana 12pt Bold 白を選んだ。
  9. 次に、ボタンのオーバーフレームを右クリックして、「キーフレームを挿入」をえらぶと、アップ・フレームと同じボタンが表示される。
  10. アップ・フレームと変化をつけるため、塗り色は、プロパティ・インスペクターのバケツアイコンをクリックしてでるカラーピッカーで水色を選んだ。
  11. 次に、ダウン・フレームで「キーフレームを挿入」をえらぶとオーバーフレームのボタンがコピーされる。
  12. ヒット・フレームにも「キーフレームを挿入」をえらんでおく。このフレームは表示されないから、そのままでも問題はないようだ。
  13. 「タイムライン」横の「シーン1」をクリックし、ステージに先ほど作成したボタンをライブラリーからドラッグする。このとき、「表示」→「表示比率」→「ウインドウに合わせる」に設定しておくと全体像がつかめる。
  14. ステージにあるボタンをクリックするとプロパティ・インスペクターのプロパティがボタンに変化するのを確かめて、インスペクターの左下の位置決めを、今回の場合、w 130 H 25 X 0.0 Y 15 .0 とした。
  15. 次に、ボタンをクリックしたときに、リンク先につながるようにするには、簡単な Action Script を使う。「アクション」パネルを開き、「ムービークリップ制御」「ブラウザ/ネットワーク」から、下のようなスクリプトを作る。
    on (release) {
    getURL("http://n-shuhei.net/blog/);
    }
  16. ここまで作成した Flash ボタンの動きは、「ファイル」→「バブリッシュ・プレビュー」→「Flash」で確認するのがよいようだ。 [F12]キーを押してHTMLでの確認はうまくいかなかった。
    クリックすると大きくなりますこの時点での画面は、左の screenshot のようになる。




  17. ここまでうまくいけば、あとは同様の作業の繰り返しとなる。まず、右のライブラリーの title_home のボタンを右クリックして、「複製」を選択すると、ポップアップ画面がでるので、新たなボタン名を、例えば、title_radio のようにつける。
  18. このライブラリーのtitle_radio ボタンをダブルクリックすると、 title_home のボタンの複製ボタンがでてくるので、アップ・オーバー・ダウン フレームのそれぞれのテキスト部分を RadioSenboku のように変える。
  19. シーン1上に、このボタンをライブラリーからドラッグして、設置する。このときの位置表示は、w 130 H 25 X 130.0 Y 15 .0 とすればよい。
  20. ステージ上でこのボタンを選択して、アクションパネルから、新しいリンク先URLを含むスクリプトを入力する。これで、メニューボタンの2つめができる。
  21. ほかのボタンの設置は、17~20 の繰り返しである。
  22. このようにしてできたファイルを「書き出し」→「ムービーの書き出し」で swf ファイルで保存し、FTPソフトでサーバーにアップロードする。あとは、Web Title 部分に設置するだけである。
  23. なお、ボタンのオーバーフレームのときに音を出すようにするのは、「音の鳴る動きのあるリンク・ボタン」のエントリーでの 9.項を参照にして設定する。


 このエントリーは前に書いたエントリーが基礎になっている。記録することによって、知識はアンプリファイ(増幅)することを身にしみて感じている。

2008年2月 7日

隠居、音の鳴る動きのあるリンク・ボタンをつくる

 リンクボタンを Flash で作成する方法をすぐに忘れてしまい、新たに作るときは一からの学習となるので、今回右サイドメニューのリンクボタンをいじった経緯を備忘録として書いておきたい。
 Flash 作成は、日本語が扱えるので Macromedia FLASH8 を使用しているが、使い込めばいろいろと面白いことができそうだが、まずは基本的な学習からである。
 なお、Flash リンクボタンの作成については、過去に何度かエントリーしている。それらは、ほとんど tutorial のものまねである。過去のエントリーについては、TagCloud の "Flash" で検索して欲しい。

  1. Flash8 を立ち上げ、新規→フラッシュドキュメントを選択する。
  2. 「修正」→「ドキュメント」で、ボタンを設置する場所に合わせて、ステージの大きさ・背景色を決める。デフォールトに設定しておくと、同じようなボタンを作る作業を続ける場合は、便利である。
  3. 「挿入」→「新規シンボル」でボタンを選択して適当なボタン名を付ける。
  4. ボタン作成画面の再生ヘッドがアップにある状態で、ツールパネルの矩形ツールでステージ内に長方形を描く。
  5. レイヤー1のアップフレームをクリックし、ステージ上の長方形をクリックすると、プロパティ・インスペクターがシェイプに変わって、長方形を編集することができる。
  6. アップ時のボタンの色(塗りのカラー)は、プロパティ・インスペクターにあるバケツの横の四角をクリックすると出てくるスポイドで、画面上の好きな色をクリックすると変えることができる。また、出てくる色パネルから選択したり、6桁の色番号を指定したリストことができる。色番号を指定する場合には、WebColorCreator というカラーピッカーを利用すると便利である。
  7. テキストは、ツールパネルから、テキスト[A]アイコンをクリックし、プロパティ・インスペクターで、フォント・大きさ・色などを指定し、ステージ上で入力し、ボタン上にドラッグする。
  8. 次に、ボタンのオーバーフレームを右クリックして、「キーフレームを挿入」をえらぶと、アップ・フレームと同じボタンが表示される。
  9. アップ・フレームと変化をつける場合、たとえばボタンの色を同色で薄くする場合は、プロパティ・インスペクターのバケツアイコンをクリックしてでるカラーピッカーの「アルファ」を50%にでもすればよい。カーソルがボタンの上にくると音がでるようにするには、事前に、MP3ファイルをライブラリーに読み込んでおく。フレームをクリックしたときのプロパティ・インスペクターにあるサウンド・リストボタンをクリックすると読み込んでおいたMP3ファイルが表示されるので、これを選択する。効果:なし、同期:スタート、繰り返し:1でよい。(アップ・フレーム、ダウン・フレームでは、同期:ストップを選ぶ)
  10. 次に、ダウン・フレームで「キーフレームを挿入」をえらぶとオーバーフレームのボタンがコピーされる。
  11. ヒット・フレームにも「キーフレームを挿入」をえらんでおく。このフレームは表示されないから、そのままでも問題はないようだ。
  12. 次に、ボタンをクリックしたときに、リンク先につながるようにするには、簡単な Action Script を使う。「タイムライン」横の「シーン1」をクリックし、ステージに先ほど作成したボタンをライブラリーからドラッグする。
  13. ステージにあるボタンをクリックするとプロパティ・インスペクターのプロパティがボタンに変化するのを確かめて、「アクション」パネルを開き、「ムービークリップ制御」「ブラウザ/ネットワーク」から、下のようなスクリプトを作る。
    on (release) {
    getURL("http://n-shuhei.net/xxxxx/xxxx", "_blank");
    }
  14. 問い合わせなどのメール送信ボタンの場合には、次のようなスクリプトにする。
    on(release){
    mURL="mailto:xxxxxxxxxxx@n-shuhei.net";
    mURL+="?subject="+"問い合わせ:";
    mURL+="&body="+"よろしければ、お名前をお聞かせください。";
    getURL(mURL);
    }
  15. このようにして作成した Flash ボタンの動きは、[F12]キーを押してHTMLで確認する。「ファイル」→「バブリッシュ・プレビュー」→「HTML」でも確認できる。
  16. 動きが確認できれば、「ファイル」→「書き出し」→「ムービーの書き出し」で、.swf ファイルを保存し、FTPソフトでサーバーにアップする。
    なお、.fla ファイルも保存をしておいた方が、後の編集に有用である。


 あとで気づいたことであるが、2006年12月のエントリーが多いに参考になる。何回も同じことを繰り返すのは、アルツハイマーの典型的な症状である。
(追記:2007/2/11) メール送信ボタンの試験をしていて気づいたことがある。動きの確認で、うまくメールが立ち上がるときと立ち上がらないときがある。ActionScript に自信がないので、そのせいかと疑ったが違うらしい。いろいろとサーチしてみたが、よく分からなかった。
 うまくメーラーが立ち上がるときは、Outlook が立ち上がる。私は、普段メーラーは、Beckey! を使っているのに、「コントロールパネル」→「インターネット・オプション」→「プログラム」の電子メールが「Microsoft Outlook」となっているせいであった。これを「Beckey!」に変えると、問題なく動くようになった。
 基本的なところで抜かっている。歳のせいにしておきたい。

2007年6月16日

隠居のHP備忘録:音の出るリンクボタンの作成

 Atelier Shuhei Weblog の右サイドメニューでのサイト内リンクボタンの統一が取れていなかったので、作り直すことにした。物覚えが悪くなって Flashのリンクボタンを作るたびに参考書を片手に一からやり直すことになるので、今回は備忘録として書き留めておくことにした。Flash製作に長けた人なら幼稚な話であるが。
 下に、今回作成した 蝶の写真集 Studio YAMAKO へのリンクボタンを例示する。

続きを読む "隠居のHP備忘録:音の出るリンクボタンの作成"

2007年4月23日

XHTMLstrict に Flash を表示する

隠居のFlash:<object> と<embed>で書いたように、どのブラウザでも動くように Flash をHTMLに埋め込むには、<object> と<embed>という同じようなタグを書かねばならない。最近はHTMLをもっと厳密(strict)に書いて、どのブラウザでも動くようにしようということで、W3C(The World Wide Web Consortium )は、XHTML strict を推奨している。この XHTML strict では、<embed>タグは使えない。現在MovableTypeで使っている「小粋空間」さんのテンプレートは、移行段階のXHTML Transitional なので現状で困っているわけではないが、Flashを XHTMLstrictで表示させる(embedタグを使わずに表示させる)コードが紹介されていたので、ブログのヘッダー部分の Flash を変更してみた。

続きを読む "XHTMLstrict に Flash を表示する"

2007年1月 5日

MTに自作Flashリンクボタンを置く

 右サイドのメニューに、総集編的なページや昔のHPなどにリンクするボタンを置いてきた。これらのボタンは、SothinkSWFQuickerのテンプレートを使って Flash で作ったものもあるが、それぞれ個別に作ってきたので統一がとれていなかった。テンプレートでは、自分の思うようにデザインができないことも不満であった。それに大枚をはたいて手に入れた Flash8 をなんとか使ってみたいという願望もあった。初心者向けの参考書これで完璧 Flash8では、もうひとつ自分の思うような例がなかった。Flash8 のヘルプに、ファーストステップガイドやチュートリアルもあるが、記憶力が悪くなっているので印刷物でないと使いづらい。それでまた、下の『Flash 8 レベルアップコース』という書籍を買った。何のことはない書籍代に結構使っている。
この『Flash 8 レベルアップコース』は丁寧に書いてあり、なかなか手助けになる。この中の作成例を参考になんとかたどり着いたのが、現在の Flash リンクボタンである。一応、Flash の基本であるボタンへのカーソル状況によって、動いたり音がでたり、半透明のカバーが覆けられる。もちろん、クリックによって目的とするURLが現れる。また、作例にはなかったが管理者(私)へメールするリンクボタン(mailto:)も同じ動きで設置できるようになった。歳をとっての学習は、エキスパートの真似をなんども繰り返してするしかないかと変に得心している。幸い時間はある。

Flash8 レベルアップコース
Flash8 レベルアップコース
posted withamazleton 07.01.05
ななきち
毎日コミュニケーションズ
売り上げランキング: 210708






2006年12月16日

X'mas e-Card : A Excellent Flash Work

 昨年、ロサンゼルスに住んでいる先輩女史から送ってもらった Greeting Card が素晴らしかったので、その作者 Jacquie Lawson さんのサイトに年8$でメンバーになった。新しい作品ができるとメールで教えてくれるが、今年のChristmas e-cardの新作の知らせが届いた。今年も素晴らしい出来である。Flashを使いこなせば、こんなに凄いものができるんですね。
 このアニメーションは、深雪の山小屋で暖かいストーブの前に、いささかのアルコールが入って寝そべって雪景色を眺めているような感じでとくにお気に入りである。もちろん、実際は雑木や畑に雪が積もって汚いものが見えないだけであるが。雪のシーズン、hute にたどり着くまでは大変であるが、今シーズンは屋根も修復したし水の心配もないので、機会を作って行こうという思いが強くなってきている。

2006年12月15日

隠居のFlash参考書:『これで完璧 Flash8』

 初心者向けのFlash8参考書である。図が多く使われ、tutorial 的な例示のサンプルも指定サイトから DL できるので分かりやすい。ただ、一つずつの説明は丁寧だが、何のための機能なのかの説明がないので自分の目標とする項目を探すのが難しいのように思う。

これで完璧 Flash8
これで完璧 Flash8
posted with amazlet on 06.12.15
菊池 博美 E‐Creator.jp
ローカス
売り上げランキング: 250557

隠居、Flash8で Flash リンクボタンを作る

 ブログの右サイドメニューに Flash のリンクボタンを作るときには、Sothink SWF Quicker のテンプレートを使って作ってきた。Sothink SWF Quicker はFlash ムービーを作るためのソフトとしては比較的安いし、テンプレートや tutorial も充実しているので重宝している。欠点は、Flash version8 に徐々に対応してきているがまだ十分でないことと日本語のテキストが扱えないことである。そのために、Macromedia Flash Basic 8 を泣く泣く購入したが、主目的だった MP3 ファイルの再生ボタンはインターネットで見つけたフリーの Flash MP3 Player で十分だった。それで個人が少し遊ぶ程度には高い買い物だった Flash 作成ソフトはあまり使う機会がなくなっていた。最近 Google Maps API を使った「泉北近辺私的観光地図」というページを立ち上げたので、そのページへのリンクボタンを Flash で作成することにした。ボタンの表示を日本語にしたかったので、Sothink SWF Quicker のテンプレートでは作成できない。宝の持ち腐れだった Flash Basic 8 にトライすることにした。
 狙いはボタンの上にカーソルを当てると音が出て、クリックするとリンク先が表示されるようにすることである。これだけのことをするのに、アルツハイマー症的になっている頭では結構時間がかかった。Flash作成ソフトには沢山の機能がついており、エキスパートはこれらを使いこなしていろいろな素晴らしいアニメーションを創られているが、私のような初心者にはなかなか理解が進まない。学習には、以前に買っていた「これで完璧Flash8」という参考書も見たが、 英語版ではあるが teacherClic という Tutorial が有用であった。試行錯誤してようやくできたのが、右サイドに置いている「泉北近辺私的観光地図」へのFlashボタン  である。カーソルがボタンの上に来ると鶯の鳴き声が始まる。クリックすると Google Maps API で作った「泉北近辺私的観光地図」へリンクする、という簡単な作品である。
 気が向いたら、もう少しデザインなどを学習していいものにしたいと思っている。
(追記:2007/10/3)「泉北近辺私的観光地図」のリンクボタンは、その後何度か作りかえている。

2006年12月11日

隠居のFlash:&lt;object&gt; と&lt;embed&gt;

 先日来、右サイドメニューに Flash リンクボタンを置くことを試みている。Flash8 Basic で、日本語表示のFlash リンクボタン・ファイル(xxx.swf)をいくつか作って設置してみる作業である。この作業の中で、エキスパートの方なら常識と思うが、初心者には新たな発見があったので備忘録的に書き留めておくことにした。
 メインページおよびエントリー・カテゴリー・日付各アーカイブのテンプレートでは、リンク用のテンプレートを別に作って readfile している。このリンク用テンプレートでの flash file の設置するためのコードは、引用のように、Flash のエキスパートが提供してくれているものをコピペし、 flash file のありかなどを指示するなどの必要箇所を訂正して使っている。
<!--泉北近辺私的観光地図-->
<span align="left"> <object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=6,0,29,0" width="120" height="30"> <param name="movie" value="http://xxxxxxxxxx/xxxxx/map_03.swf" /> <param name="quality" value="high" />
<!-- LiteboxでFlash を隠す -->
<param name="wmode" value="transparent" />
<embed src="http://xxxxxxxxxx/xxxxx/map_03.swf" quality="high" pluginspage="http://www.macromedia.com/go/getflashplayer" type="application/x-shockwave-flash" wmode="transparent" width="120" height="30"></embed></object></span>

   この HTML には、<object>と<embed>という同じようなタグが使われている。この経緯については、高橋 登史朗さんのAllAboutの解説に詳しい。この解説でも分かるように、ブラウザーによって表示が変わる。私の場合、主として編集は Firefox2.0 を使い、サイトの確認は使用している人が多い IE7 で行う。この確認作業で、Firefox と IE では表示が異なることに気が付いた。<object>と<embed>タグ部分で同じような名前の swf ファイルを使っていて分かったのであるが、 IE7 では<object>タグでのファイルが使われ、Firefox2.0では<embed>タグでのファイルが使われる。Netscape でも<embed>タグでのファイルが使われるようである。
 どちらのタグ部分でも同じファイル名にするのは当たり前の話であるが。

2006年9月30日

MTサイドメニューに天気予報のFlashを

 私のブログサイトで使わせてもらっているFlashの横長カレンダーの作者である Kinarie&May さんのサイトを久しぶりに訪問した。サイドメニューに天気予報が格好良く配置されている。最新のFlash作品を探ると Flash天気予報1.10 という Flash が紹介されている。この頃は自分のブログサイトがポータル・サイト化しつつあるので天気予報を取り込むことに飛びついた。早速、PHPとSWFのファイルをダウンロードし、用意されているHTML用ソース作成ページでパラメータを指定した。地域として10の都市を指定できるので住んでいるところと出かけるときに気になる地方および主要都市を指定した。タイトルのバックグランドカラーも指定できるので使っているテンプレートに合わせた。また、できあがったソースのままではlitebox-1.0 を使っているとFlashの画像である天気予報が背景に隠れないので、「隣の花は紅い」のエントリーで記載した方法でソースにパラメータを加えると今度も上手く隠れた。なお、この方法については、「小粋空間」さんのLightbox JS でブログパーツ等の Flash を PNG 背景画像の下に隠すというエントリーに詳しく出ている。
 天気予報のデータは livedoor の Weather Hacks に依存しているとのことだ。 livedoor の継続性( going concern) が気になるところだが。

2006年8月 7日

隠居、新しいFlash MP3 Playerを導入

 今日は大阪は全国で最も気温が高い37℃が予測されている。昨日に続いて、クーラーをつけた部屋で室内DIYをすることにした。

 「音楽方丈記」というブログを開設されているTANさん という方が、デザインの優れた三つのブログで使えるFlash MP3 Playerを紹介されていることは以前のエントリーで投稿した。この中のPlay Tagger by del.icio.usというPlayerはブログ・テキストの横にボタンが設置されるのと、一行のJavaScriptをHTMLに置くだけなので音を出すシーンでは好んで使わせてもらっている。他の二つのデザインも捨てがたいので元ページに遡って利用について調査した。
 FLASH SINGLE MP3 PLAYER はすっきりしたデザインですぐにでも使えそうである。Download した zip ファイルを解凍すると singlemp3player.html が3つの種類の Player をブラウザに表示する。このHTMLのソースコードを開くとそれぞれの Player の object コードがあるので、これを Player を置きたいエントリーにコピペすればよい。MP3 file を置いているフォルダーなどのパラメーターを弄るだけでOKである。もちろん、singlemp3player.swf というフラッシュファイルをエントリーを投稿するフォルダーに置いておかなければならない。

 <隠居、ヒグラシの鳴き声に泣く>というエントリーの Flash MP3 Player を自作のものと置き換えた。また、HPの MUSIC サイトの左フレームにある Flash MP3 Player も置き換えた。

 紹介されているもう一つ alasacreations という Flash MP3 Player の元ページを訪ねるとなんとフランス語である。画像でなんとなく見当はつくが応用するには時間がかかると思い、次の機会にすることにした。 FLASH SINGLE MP3 PLAYER の作者もどうやら EU 圏の人らしい。 EU 圏の作者のデザインは地味な感じで私好みなんですが、アメリカの作者に多い派手なものと異なるのは背景の文化が違うからなんでしょうか。

続きを読む "隠居、新しいFlash MP3 Playerを導入"

2006年7月21日

隠居のJazz Collection

 梅雨が長引いておまけに強い雨が連日降るので、PC前のDIY時間が増えている。
 この6月・7月は eMusic からのMP3 Jazzperdido のテーマでダウンロードした。track名「perdido」で検索すると125tacksがヒットするが、他の曲名の中に「perdido」という単語が含まれる曲もあるしJazz以外例えばRockの曲もあるので、それらを除いた70曲をDLした。ちなみに「perdido」はスペイン語で英語では「Lost」の意味のようである。1ヶ月10$で40tracksがDLの限度であるから、このように多くのtracksがある曲では2ヶ月がかりのDLになる。ただ、Booster Pack というオプションがあって、もう15$だせば more 50tracks DLできる。場合によっては、そのような Booster Pack を購入することもあるが、DLした曲を聴く機会が減っているので最近は1ヶ月40tracksの範囲内にしている。
 DLしたperdidoの中から、Dave Brubeckの演奏をCopyrightで許される程度に短くして、HPの Music ページ先に紹介した Flash MP3 Player を使ってアップした。

2006年7月20日

隠居、新しいMP3 Playerに感激!

 隠居の身にとっては高い買い物の Macromedia Flash 8 Basic を導入したので、MP3 Flash Player をもう少し格好よいものに換えたくていろいろトライしてみた。が、Action Script の敷居が高く挫折しかけていた。Googleで Flash MP3再生 ボタン というようなキーワードでサーチしてみると TANさん という方の「音楽方丈記」というブログに、求めるブログで使えるFlash MP3 Playerが紹介されていた。紹介されている3つのPlayerはどれもすぐに使いたくなるものばかりだが、Play Tagger by del.icio.usは、ブログ・エントリーの文書の中に取り込めるのが気に入った。早速の前のエントリーに取り込んでみた。歳をとって何でもに感激症になっているが、これは感激である。JavaScript と アンカータグだけを書き込めばいいのが特に良い。JavaScript が置いてあるサイト del.icio.usが何者なるものかまだよく分かっていないが閉鎖されないのを祈るばかりである。
下にサンプルを示してみる。
Spaghetti RagというRagtime Piano
堺自然ふれあいの森の鶯の鳴き声

続きを読む "隠居、新しいMP3 Playerに感激!"

2006年7月 4日

隠居に届いたアメリカ独立記念日 e-card

 ロサンゼルスに住んでいる先輩からアメリカ独立記念日のGreeting Cardが、e-cardで届いた。この作者JacquieLawsonの作品はなかなか洒落ている。年間8$でメンバーになると誰にでも彼女の作品を電子的に送ることができる。早速メンバーになった。
 届いた e-card はご覧いただければわかるように米国50州の州花がBGMも入ってスライドショウ的に現れる。ページめくりがちょっと早いと思うが、スライドショウが終わった後各州の花と名前をじっくりと見ることができる。

2006年5月 2日

MP3 Flash Player

 ウグイスの鳴き声エントリーで使っていた音声コントローラに代わるもっと小さいアイコンのクリックで音声の再生と停止ができないかを調査してきた。調査といってもWebが頼りである。ただ、このような音声系のカスタマイズは、英語の世界の方が数多くの例示があるので範囲を広げた。その結果見つけたMP3 Flash Playerがpickle playerであった。FlashというクリップををWebのページに掲載できることを知ったのはまだ6ヶ月も前のことであるので、Flashの技を競い合っておられる方々が公開されているFlashをなんとか使わせてもらってきた。そのため、Flashのカストマイズは公開されておられる方が許容されている範囲内でしかできなかった。今回のカスタマイズは福井県の学生さんのサイトで教えてもらった。今までのカストマイズとそんなに変わるわけではないが、ボタンに使った画像の色・形とかサイズについて自分で選択することができた。ただ、このカスタマイズはFlashPlayer8対応であり、私が使っているSothink SWF Quickerでは作成できなかった。試用版のMacromedia Flash8をDLして、これを使った。このソフトは欲しいのですが、まともに買えば9万円近くするので諦めている。 (追記)Basic版は25000円ですね。個人ではそれで十分なようだが、それにしても・・・。
 そのうちにきっとSouceTecがグレードアップしてくれると期待している。

続きを読む "MP3 Flash Player"

2006年4月28日

鶯(<small>bush warblers</small>)来鳴きて・・

ウグイス

 MP3での録音ができるEDIROL R-1は以前にも書いたように、里山でのウグイスの声を録音したいというのがきっかけだった。本日(2006年4月28日)、晴天に恵まれたので堺自然ふれあいの森にウグイスの声を音録すべく出かけた。農業用水用の小さな川の流れる音とかカラスの鳴き声などが混ざって、ウグイスの鳴き声だけを選別するのは少し難しかったが、帰って音声編集ソフトSoundEngineで増幅したり切り貼りしたりするとなんとか様になるMP3ファイルができた。MP3の編集は今まで手がけてきているので扱いやすく重宝する。
 少し見つけにくいと思うが(コナラの丘あたり)案内図にある小鳥のアイコンをクリックすると、遠くで逆光なのであまりうまく撮れていないウグイスの写真がでる。また、左下のサウンド・コントローラ(pickle player)でウグイスの声を、再生したり一時停止したりして音が聞ける。いちど試してみてください。  ところで、標題のような出だしの合唱曲があったと思いますが、どなたか作詞者とか作曲者をご存知ありませんか。標題に続く歌詞は、「・・春は還りぬ」だったと思います。  

続きを読む "鶯(<small>bush warblers</small>)来鳴きて・・"

2006年4月20日

ムクドリ?のさえずり

鳥の鳴き声録音(実験2)

 今の季節、日の出頃にかなりうるさい鳥の声で目が覚める。昨日EDIROL R-1を使って録音を試みた。この鳴き声は多分ムクドリと思うのですが、詳しい方教えてください。どこかで犬もほえているようですが。 <雀のさえずり>で録音再生のこころみを掲載したがどうも気に入らないので、自分でFlashソフトを使って作ってみた。これだとFlashファイル(.swf file)を背景の好きなところにおける(ちょっと苦労したが)ので、ご覧のように写真と同じように録音した場所を指定できる。 また、Netscapeでご覧の方も音が聞こえるはずである。(Netscapeでは鳥のFlash画像の位置がずれる。positionタグはNN6でOKになっているのだが?Netscape7.1のせいかな。再生を停めるには他のエントリーに移るか、画面を閉じてください。swf fileをボタン化すると再生・停止ができるようになるが、まだ十分に学習ができていないので。
 いずれにしても録音技術やWeb(Blog)作成技術を高める必要は感じているが、遊びの幅が広がってきたので楽しくなっている。
今日は春何番かしらないが強風が吹き荒れている。鳥も啼くのをやめたようだ。

続きを読む "ムクドリ?のさえずり"

2006年4月18日

雀のさえずり

 「堺自然ふれあいの森」のエントリーで、ウグイスの鳴き声の音録について触れた。小鳥の啼き声を録音したいというのは、退職後にやりたいと思ってリストしていた中の一項目であった。さきの里山の散策でこの想いが一段と募った。Googleで、”小鳥の鳴き声を録音する”という文章で検索してみるとローランド エディロールR-1というのとSONY PCM-D1が良い製品と分かった。会議や講演の録音には、OLYMPUSのVoice Trekが売れているようだが、小鳥の啼き声には向いていないようだ。SONY PCM-D1はプロがLiveを録音するような代物だし、価格的に手が出ない。結局、WAVEまたはMP3で録音でき、野鳥の会のメンバーも使っているという説明につられて、少し高い買い物であるがEDIROL R-1をweb-shoppingした。
 本日午後品物が届いた。開梱ももどかしく取説をざーと読んで、鳥の鳴き声がいつも聞こえる近くの公園に録音テストにでかけた。音源が梢の先で少し小さかったけれどもどうやら録音OKのようなので、帰宅して聴くに堪えるものなのか再生してみた。予想通り録音レベルが-36dBくらいなので、音楽を聴くボリュームレベルではほとんど聞こえない。例のSoundEngineで音量を平均-17dBに調整すると雀のさえずり(と思っているのですが)が明快に聞こえるようになった。録音ファイル・フォームが、waveまたはMP3という使い慣れた形式であるのが嬉しい。上空を飛ぶ飛行機の音や犬を散歩させている人の声なども混ざるが、これは使えそうである。また、遊びのタネが増えた。まるで幼児である。
 Webで求めたPodCastPickleというFlash FreeSoftで聴いてみてください。このソフトについてはまだよく理解していないが面白そうなので、こんどの機会にエントリーしようと思っている。









(追記:2006/4/20) とほほのWeb入門にHPに動画を載せる方法が紹介されていたのでPodCastPickleから変更した。IEのWindowsMediaPlayer7.0用である。Netscapeでは機能しないようだ。 







<追記:2006/9/19> 最近はMP3再生ボタンは、<新しいFlash MP3 Playerを導入>で紹介したようにPlay Tagger by del.icio.usを専ら使っている。ちなみに、雀のさえずりは、左のPlayボタンをクリックすれば聞こえてくる。

2006年4月11日

庭花の写真:夏・秋・冬編

 hi-hoの写真albumサービスを利用しているHPのGardeningページ花の写真集をWeblogへ順次移転しているが、本日、夏編秋編冬編をFlash Albumにして移転した。

2006年4月10日

「みんなの写真くらぶ」移転

 hi-hoが提供してくれていた「みんなの写真くらぶ」が閉鎖になる。有料にして継続の話もあったが、結局4月末で閉鎖することになったらしい。このサービスは、ML仲間とオフラインで何かイベントをしたときのデジカメ写真を共有するのに便利していた。また、私はHPからリンクして使ったりもしていた。同様のサービスがNikon等にあるが、許される容量が20MBくらいしかなく、すぐに満タンになりそうである。有料で容量増ができるが結構高い。同じ容量を増やすなら、レンタルサーバーの方が何かにつけ便利なので、Weblogと同じサイトに置くことにした。今のところ、Flashのalbumにするのが比較的簡単そうなので、HPのGardeningページでリンクしているalbumの移転を始めた。取りあえず、春の庭花の写真の半分をSothink SWF Quickerで提供してくれているテンプレートを使ってFlash Albumにした。ただ、一旦albumを作成すると修正が難しいのが難点である。ActionScriptとXMLの基本ぐらいは学習したいと思うが、なかなか難しそうである。
 今月中に順次、移転を進めたいと考えている。 

続きを読む "「みんなの写真くらぶ」移転"

2006年3月 4日

Flash型カウンター

  Flash形式のカウンターを探していたら、適当なもの(speedさんの作品)が見つかったので、HPのカウンターに設置した。lolipopは、cgiを設定させてくれるので、自由度が高い。
 1昨日から、熱はあまりでないが、のどがイガイガするような風邪を引いてしまった。良い天気だし、梅の見頃だと思うのですが、PCの前で静養(?)している。

2006年3月 2日

MTにFlash 実験_2

HPに掲載していたFlashボタンをMTに持ち込んで見ました。いけるようですね。




MTにFlashを動かす実験_1

HPに掲載していたFlash MovieをMTに持ち込んでみました。HPでのHTMLコードをコピペして、サイトパスを変更しました。