Atelier

　今日は朝から春雨が強く降っている。再開をはじめたDIYは今日はお休みにして、PC 前でRadio Senbokuを聴きながらJavaScript の晩学をした。教材は、W3Shools のものである。
　

• 今日は、まずコメントの書き方について。
  
  • 一行に書くときは行頭に //
  • 複数行にまたがるときは、コメントの先頭に　/* コメントの終わりを　*/　とする。
  • もちろん、スクリプトをコメントアウトするときにも使える。
　これは、当然のことながらActionScript の記述でも同じである。CSS では、/* -------- */ だけのようである。
　HTMLでは、コメントは一行でも複数行でも、行中でも、コメントの先頭は　<!--　で、終わりは　--> である。


• 次に、[JS Variables] の学習　
  
  • Variables（変数）は、情報を格納するコンテナである。
  • 変数は代数学(Algebra)の x=5, y=6,, z=x+y → z=11 と同じように、x, y, z が変数である。
  • 変数は、carname="VOLVO" のようにテキストも値として持てる。
  • 変数は、大文字・小文字を区分する。また、変数名は、文字で始まらねばならない。JavaScript そのものが大文字と小文字を区分する。


• 次に、[JS Operators] の学習
  • Operator（演算子） には、Arithmetic operators（算術演算子）や Assignment operators（代入演算子）などがある。
  • Arithmetic operators（算術演算子）には、つぎのようなものがある。
    
  
  
  • Assignment operators（代入演算子）には、つぎのようなものがある。
    
  
  
  • +（プラス）演算子は、テキストの連結にも使われる。

　JavaScript Tutorial に使われている英語は、JavaScript Language Specification を参考にさせていただいた。普通の英語辞書には載っていない。

　ブログで少し凝ったことを実現させようとすると Web を構成している言語を少しは理解する必要がある。HTML(HyperText Markup Language), CSS(Cascading Style Sheets)についてはある程度理解できるようになり、自分のサイトへの応用に少しはいじれるようになってきた。

　だが、カスタマイズに多用している JavaScript, Adobe Flash を制御する ActionScript については、ネットや参考書などで公開されている example を真似して作っている。それでは、少し自分向けにいじりたい場合には手も足もでなくなる。
　年寄りの冷や水であるが、基本的なことを学習しようかと思い始めた。学習したことをすぐ忘れてしまうので、自分自身への記録のためにブログ上に学習ノートを作ることにした。ブログとは、その語源からして自分のためようだから。

　教材は、W3Schools の tutorial を使うことにした。英語だが平易に書いてあり、頭の硬くなった老人でもなんとかついていけそうであるが、どこまで理解できるかは自信がない。

　W3Schools の Home 左メニューの BrowserScripting から Learn JavaScript を選択すると JavaScript Tutorial が出てくる。学習の仕方は、[JS Home] → [JS Introduction] とページを繰っていくのだが、ページの上下に [previous] [next] があるので、これに従えばよい。もちろん、記述は　example とかお試しページや関連ページへのハイパーリンクが設定されている。これらへリンクした後は、最初の内は元のページに戻って、 [next] ボタンで次のページに進んだ方がよさそうだ。

　Tutorial の [JS Introduction] に、　とある。一方、ActionScript のWikipedia による解説では、　とある。JavaScript の学習は、ActionScript の学習でもあるのをはじめて分かった。お恥ずかしい話である。

　[JS How to] [JS Where to] までは、いままで曲がりなりに、エキスパート達の JavaScript を使ってきたので理解できる。 　 [JS Where to] で Using an External JavaScript を実験するために、 　というような外部JSファイルをテキスト作成ソフト秀丸で作成し、サーバーに xxx_1.js というファイルをFTPソフト（私の場合 FFTP ）でアップした。ファイルを作成するとき、エンコードは UTF-8　でなければならない。秀丸は、このような機能が備わっているから便利である。

　なお、このエントリーに記述したHTMLは、次のようなものである。

　この外部JSをこのエントリーで実行してると、結果は次の通りとなる。JavaScript のなかに記述した HTML タグは、そのまま実行される。 直接 HTMLでエントリー編集すればできることであるが、外部JSファイルを使う学習するためである。

　これを第１回とし、今後、W3Schools の順序に従って学習したことを記していきたい。

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

1. Flash8 を立ち上げ、新規→フラッシュドキュメントを選択する。
2. 「修正」→「ドキュメント」で、ボタンを設置する場所に合わせて、ステージの大きさ・背景色を決める。デフォールトに設定しておくと、同じようなボタンを作る作業を続ける場合は、便利である。
3. 「挿入」→「新規シンボル」でボタンを選択して適当なボタン名を付ける。
4. ボタン作成画面の再生ヘッドがアップにある状態で、ツールパネルの矩形ツールでステージ内に長方形を描く。
5. レイヤー１のアップフレームをクリックし、ステージ上の長方形をクリックすると、プロパティ・インスペクターがシェイプに変わって、長方形を編集することができる。
6. アップ時のボタンの色（塗りのカラー）は、プロパティ・インスペクターにあるバケツの横の四角をクリックすると出てくるスポイドで、画面上の好きな色をクリックすると変えることができる。また、出てくる色パネルから選択したり、６桁の色番号を指定したリストことができる。色番号を指定する場合には、WebColorCreator というカラーピッカーを利用すると便利である。
7. テキストは、ツールパネルから、テキスト[A]アイコンをクリックし、プロパティ・インスペクターで、フォント・大きさ・色などを指定し、ステージ上で入力し、ボタン上にドラッグする。
8. 次に、ボタンのオーバーフレームを右クリックして、「キーフレームを挿入」をえらぶと、アップ・フレームと同じボタンが表示される。
9. アップ・フレームと変化をつける場合、たとえばボタンの色を同色で薄くする場合は、プロパティ・インスペクターのバケツアイコンをクリックしてでるカラーピッカーの「アルファ」を50%にでもすればよい。カーソルがボタンの上にくると音がでるようにするには、事前に、MP3ファイルをライブラリーに読み込んでおく。フレームをクリックしたときのプロパティ・インスペクターにあるサウンド・リストボタンをクリックすると読み込んでおいたMP3ファイルが表示されるので、これを選択する。効果：なし、同期：スタート、繰り返し：１でよい。（アップ・フレーム、ダウン・フレームでは、同期：ストップを選ぶ）
10. 次に、ダウン・フレームで「キーフレームを挿入」をえらぶとオーバーフレームのボタンがコピーされる。
11. ヒット・フレームにも「キーフレームを挿入」をえらんでおく。このフレームは表示されないから、そのままでも問題はないようだ。
12. 次に、ボタンをクリックしたときに、リンク先につながるようにするには、簡単な Action Script を使う。「タイムライン」横の「シーン１」をクリックし、ステージに先ほど作成したボタンをライブラリーからドラッグする。
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 ファイルを保存し、ＦＴＰソフトでサーバーにアップする。
    なお、.fla ファイルも保存をしておいた方が、後の編集に有用である。

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

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

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

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

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

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

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