html」タグアーカイブ

Speakedraw – Javascript でお絵描きと音再生


前回のプログラムをブラッシュアップました。
今回の修正ではまず起動時に三色の円の大きさと配置をランダムで変化するようにしています。また移動速度も起動するたびに違う設定になります。

スタートボタンをクリックすると、オブジェクトが動き出し壁に当たったり、他のオブジェクトとぶつかると方向が変わり色が変わるようになります。またその時には再生する音も変化します。

音再生用のプログラムはこちらにて解説しています。今回はこのクラスを流用して音を再生します。

動作するプログラムはこちらです。
続きを読む

WordPressのメニューにBootstrapのNavbarとDropdown


前回の続きで今回はメニューのカスタマイズについて説明していこうと思います。当初はW3.CSSを採用したかったのですが、ナビゲーションシステムがリストを使っていなかったのでちょっと面倒臭くなりそうということでBootstrap4を使うことにしてNavbarとDropdownを適用してみることにしました。
当初はそのままheaderのナビゲーションのコードを書いていたのですが、メニュー設定は管理画面からやりたいなぁと思いフィルターフックでクラスなどを書き換えてみたのですが、複数階層のドロップダウンを使用するにはWaler_Nav_Menuの派生クラスを使った方がいいのでは?」と思った次第です。
メニューに子供がいる場合はドロップダウン表示をする感じのイメージです。

モバイル画面だとこんな感じです。リンクを格納してアイコンをクリックすると開くようにします。


実際のコーディングですが。。。
続きを読む

Hello New World Clone

スクリーンショット 2016-05-21 13.59.58
はい、やりっぱなしはアレなので前回のおさらいでもしてみましょう。
サンプル

基本的なHTMLについての説明は省略します。タグの説明に付いてはこちらで確認してみてください。改めて見ると、意味もわからずおまじない扱いしてきたやつがかなり多いですね。ちゃんと理解して使った方がやっぱりいいです。

さて早速javascriptのコードを見てみましょう。


  1. “id”が「display」となっている要素をdisplay_boxと言う変数に代入します。
    行末の「;」は文章で行くところの読点にあたる感じでしょうか。1つの処理を書き終えたらかならず「;」を付けましょう。
    ※プログラムによっては改行することによって自動的に処理を終了することを認識する物もあります。
    <div id=“display”></div>
    はプログラムの中でdisplay_boxと言う変数を使って操作されます。

  2. id”が「greeting」となっている要素をselect_boxと言う変数に代入します。

  3. この部分で実際画面の動きが始まります。
    ここでは選択ボックスで選んだ値の条件によって表示する文字列を変える動きを表現しています。
    最初のif (select_box.value == ‘1’)からは「もしselect_boxの値が1の場合display_boxの要素の中のテキストを’Konnichiwa Atarashii Sekai!’にしなさい」という事を記述しています。
    japaneseを選択した時は値(value)は1となるのでこの動きはjapaneseを選択した時に実行される処理となります。
    続いてelse if (select_box.value == ‘2’)からは「それ以外でもしselect_boxの値が2の場合display_boxの要素の中のテキストを’Hola El Mundo Nuevo!’にしなさい」という事を記述しています。
    spanishを選択した時は値(value)は2となるのでこの動きはspanishを選択した時に実行される処理となります。
    最後のelseからは「それ以外の場合display_boxの要素の中のテキストを’Hola El Mundo Nuevo!’にしなさい」という事を記述しています。
    選択した値が「1」でも「2」でもない場合、すなわち「japanese」と「spanish」以外が選択された場合に実行される処理となります。
    イメージできましたでしょうか? また{}は場合の範囲を仕手いる物です。条件に対する処理が1つだけ場合は省略は可能ですが、処理の範囲を明確にするためにも記述した方が良いかと思います。

  4. “id”が「display」となっている要素の中のテキストをclone_display_boxの要素の中のテキストにしてくださいと命令しています。
    さて結果はどうなるでしょうか?display_boxの要素の中と同じテキストになりましたよね。
    あれ?clone_display_boxは今まで何の処理もしていませんでしたよね?でも前に「var clone_display_box = display_box;」と言う処理がありました。こちらは変数に代入すると説明していましたが、実際はclone_display_boxはdisplay_boxの中を参照してくださいと言う意味になります。なのでdisplay_boxでの操作=clone_display_boxでの操作となり同じ内容が表示されるのです。
    さて最後に宿題です。

    とした時に、number2の値はどうなるでしょうか?

はい、こんなところでいかがでしょうか?
思ったより説明するのは大変ですね。まぁでも次も適当にやってみようかと思いますのでよろしくお願いします。