| 607 | |
| 608 | これだけでは面白くないので、もっと実践的な例を示しましょう。表示方法を設定するスタイルシートを用いれば、 HTML 要素を固定の表示位置に表示することができます。以下の HTML ファイルを見てみましょう。 |
| 609 | |
| 610 | {{{ |
| 611 | <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"> |
| 612 | <html> |
| 613 | |
| 614 | <head> |
| 615 | <meta http-equiv="content-type" content="text/html; charset=UTF-8"> |
| 616 | <meta http-equiv="content-style-type" content="text/css"> |
| 617 | <meta http-equiv="content-script-type" content="text/javascript"> |
| 618 | <title>absolute position sample</title> |
| 619 | </head> |
| 620 | |
| 621 | <body> |
| 622 | |
| 623 | <div style=" |
| 624 | background: #09f; |
| 625 | border: 1px solid #000; |
| 626 | position: absolute; |
| 627 | left: 100px; |
| 628 | top: 50px; |
| 629 | width: 100px; |
| 630 | height: 100px;"> |
| 631 | </div> |
| 632 | |
| 633 | </body> |
| 634 | |
| 635 | </html> |
| 636 | }}} |
| 637 | |
| 638 | この HTML をブラウザに読み込ませると、青い矩形が画面上に表示されます。この矩形は <div> 要素ですが、 style 属性によっていくつかの表示方法が設定されています。 |
| 639 | |
| 640 | {{{ |
| 641 | <div style=" |
| 642 | background: #09f; |
| 643 | border: 1px solid #000; |
| 644 | position: absolute; |
| 645 | left: 100px; |
| 646 | top: 50px; |
| 647 | width: 100px; |
| 648 | height: 100px;"> |
| 649 | </div> |
| 650 | }}} |
| 651 | |
| 652 | わかりやすさの為、 style 属性の値はスタイルのパラメータ毎に改行してありますが、 background が背景 (矩形の中の色や模様; サンプルでは色のみ指定)、border が枠線の表示方法を指定するパラメータです。ポイントはその次の行からで、 |
| 653 | |
| 654 | {{{ |
| 655 | position: absolute; |
| 656 | }}} |
| 657 | |
| 658 | と書くことによって、その次の 2行、すなわち left や top パラメータを用いてその要素の表示位置を座標で指定してあげることができるようになります。 width と height はそれぞれ、矩形の幅と高さです。 |
| 659 | |
| 660 | DOM を用いると、このスタイルシートをパラメータ毎に変更することができるようになります。ということは、この矩形の表示位置を動かしたり、色や大きさを変えたりすることができる、ということです。試しに、ボタンを押すと矩形が右に動くだけの、簡単なプログラムを作ってみましょう。 |
| 661 | |
| 662 | まず、動かしたい矩形 <div> 要素のオブジェクトを取得します。あらかじめ HTML に <div> 要素を書いておいて document.getElementById() してもよいですが、せっかくなので document.createElement() を用いて 1から作るようにしてみましょう。 |
| 663 | |
| 664 | {{{ |
| 665 | // 最初の表示位置、大きさ |
| 666 | var pos_x = 0; |
| 667 | var pos_y = 50; |
| 668 | var rect_width = 100; |
| 669 | var rect_height = 100; |
| 670 | |
| 671 | // 生成した <div> 要素のオブジェクトを入れておく変数 |
| 672 | var div; |
| 673 | |
| 674 | // HTML の読み込みが終わったら実行されるハンドラ |
| 675 | window.onload = function() { |
| 676 | // <div> 要素を作成する |
| 677 | div = document.createElement("div"); |
| 678 | }}} |
| 679 | |
| 680 | <div> の生成は window.onload() メッセージハンドラ内で行います。 window.onload() は HTML 文書の読み込みが完了したときに呼び出されます。そうすると、 HTML 文書に含まれる全ての HTML 要素に DOM としてアクセスすることができます。例えば <body> 要素にも document.body プロパティとしてアクセスできるので、ここで生成した <div> 要素を、あとで |
| 681 | |
| 682 | {{{ |
| 683 | document.body.appendChild(div); |
| 684 | }}} |
| 685 | |
| 686 | と書いてやれば、<body> 要素内に、新たに作った <div> 要素を追加することができるのです。 |
| 687 | |
| 688 | window.onload() メッセージハンドラより手前で、変数をいくつか定義しています。これらは、後で矩形の表示位置を変更する際に、役に立つものです。 |
| 689 | |
| 690 | 次に、この <div> 要素にスタイルを設定します。 DOM を用いる場合、 <div> 要素のスタイルは、 div.style プロパティにオブジェクトとして用意されていますので、以下のようにしてスタイルを設定してやることができます。 |
| 691 | |
| 692 | {{{ |
| 693 | // <div> 要素のスタイルを設定する |
| 694 | div.style.background = "#09f"; |
| 695 | div.style.border = "1px solid #000"; |
| 696 | div.style.position = "absolute"; |
| 697 | div.style.left = pos_x + "px"; |
| 698 | div.style.top = pos_y + "px"; |
| 699 | div.style.width = rect_width + "px"; |
| 700 | div.style.height = rect_height + "px"; |
| 701 | }}} |
| 702 | |
| 703 | スタイルシートのパラメータの名前と、 style オブジェクトが持つプロパティの名前はだいたい同じだと思ってよいでしょう。但し、 background ではなく background-color を指定したい場合、 style オブジェクトのプロパティの名前は backgroundColor といったように、ハイフン "-" で繋がれた次のアルファベットを大文字にした名前となります。 |
| 704 | |
| 705 | ちなみにこの部分は、 !JavaScript の '''with''' という構文を用いることで、以下のようにもう少しすっきり書くことができます。もっとも、これは好みの分かれる書き方ですが…。 |
| 706 | |
| 707 | {{{ |
| 708 | // <div> 要素のスタイルを設定する |
| 709 | with (div.style) { |
| 710 | background = "#09f"; |
| 711 | border = "1px solid #000"; |
| 712 | position = "absolute"; |
| 713 | left = pos_x + "px"; |
| 714 | top = pos_y + "px" |
| 715 | width = rect_width + "px"; |
| 716 | height = rect_height + "px"; |
| 717 | } |
| 718 | }}} |
| 719 | |
| 720 | <div> 要素の準備はできたので、 <body> 要素にこの <div> 要素を突っ込んでやります。 window.onload() でやる作業はここまでです。 |
| 721 | |
| 722 | {{{ |
| 723 | document.body.appendChild(div); |
| 724 | } |
| 725 | }}} |
| 726 | |
| 727 | そして、ボタンが押されたときに呼び出される関数 moveRectangle() を実装します。この関数は、矩形の水平位置を、矩形の幅の半分ずつ右に動かす、というものです。 |
| 728 | |
| 729 | {{{ |
| 730 | // 矩形を右に動かす |
| 731 | function moveRectangle() { |
| 732 | pos_x += rect_width / 2; |
| 733 | div.style.left = pos_x + "px"; |
| 734 | } |
| 735 | }}} |
| 736 | |
| 737 | pox_x や rect_width といった変数を用意しておいたのは、 div.style.left プロパティ自体は直接足し算ができない文字列だからです。また、変数 div も、この <div> 要素にいちいち ID 名を設定し、あとで document.getElementById() で取得するのが面倒だったので用意しておいたのでした。 |
| 738 | |
| 739 | サンプルプログラムの全体像を以下に示します。 |
| 740 | |
| 741 | {{{ |
| 742 | <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"> |
| 743 | <html> |
| 744 | |
| 745 | <head> |
| 746 | <meta http-equiv="content-type" content="text/html; charset=UTF-8"> |
| 747 | <meta http-equiv="content-style-type" content="text/css"> |
| 748 | <meta http-equiv="content-script-type" content="text/javascript"> |
| 749 | <title>moving rectangle sample 1</title> |
| 750 | <script type="text/javascript" language="JavaScript"><!-- |
| 751 | // 最初の表示位置、大きさ |
| 752 | var pos_x = 0; |
| 753 | var pos_y = 50; |
| 754 | var rect_width = 100; |
| 755 | var rect_height = 100; |
| 756 | |
| 757 | // 生成した <div> 要素のオブジェクトを入れておく変数 |
| 758 | var div; |
| 759 | |
| 760 | // HTML の読み込みが終わったら実行されるハンドラ |
| 761 | window.onload = function() { |
| 762 | // <div> 要素を作成する |
| 763 | div = document.createElement("div"); |
| 764 | // <div> 要素のスタイルを設定する |
| 765 | with (div.style) { |
| 766 | background = "#09f"; |
| 767 | border = "1px solid #000"; |
| 768 | position = "absolute"; |
| 769 | left = pos_x + "px"; |
| 770 | top = pos_y + "px" |
| 771 | width = rect_width + "px"; |
| 772 | height = rect_height + "px"; |
| 773 | } |
| 774 | document.body.appendChild(div); |
| 775 | } |
| 776 | |
| 777 | // 矩形を右に動かす |
| 778 | function moveRectangle() { |
| 779 | pos_x += rect_width / 2; |
| 780 | div.style.left = pos_x + "px"; |
| 781 | } |
| 782 | //--></script> |
| 783 | </head> |
| 784 | |
| 785 | <body> |
| 786 | |
| 787 | <form> |
| 788 | <input type="button" value="click!" onclick="moveRectangle();"> |
| 789 | </form> |
| 790 | |
| 791 | </body> |
| 792 | |
| 793 | </html> |
| 794 | }}} |
| 795 | |
| 796 | いかがですか? ここまでくると、なんだかいろいろなことに応用できそうな気がしてくるでしょう? |
| 797 | |
| 798 | 最後に、これのさらなる応用例を 2つ程お見せしましょう。まず 1つ目は、タイマーを用いて矩形が勝手に動き続けるサンプルです。 |
| 799 | |
| 800 | {{{ |
| 801 | <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"> |
| 802 | <html> |
| 803 | |
| 804 | <head> |
| 805 | <meta http-equiv="content-type" content="text/html; charset=UTF-8"> |
| 806 | <meta http-equiv="content-style-type" content="text/css"> |
| 807 | <meta http-equiv="content-script-type" content="text/javascript"> |
| 808 | <title>moving rectangle sample 2</title> |
| 809 | <script type="text/javascript" language="JavaScript"><!-- |
| 810 | // 移動量 (制限値) |
| 811 | var MAX_MOVE_TIME = 8; |
| 812 | |
| 813 | // タイマーのウェイト (ミリ秒) |
| 814 | var TIMER_WAIT = 125; |
| 815 | |
| 816 | // 移動方向を表す定数オブジェクト |
| 817 | var Direction = { |
| 818 | "RIGHT": 0, |
| 819 | "BOTTOM": 1, |
| 820 | "LEFT": 2, |
| 821 | "TOP": 3 |
| 822 | }; |
| 823 | |
| 824 | // 表示位置、大きさ |
| 825 | var pos_x = 0; |
| 826 | var pos_y = 0; |
| 827 | var rect_width = 100; |
| 828 | var rect_height = 100; |
| 829 | |
| 830 | // 移動方向、カウント |
| 831 | var direction = Direction.RIGHT; |
| 832 | var count = 0; |
| 833 | |
| 834 | // 生成した <div> 要素のオブジェクトを入れておく変数 |
| 835 | var div; |
| 836 | |
| 837 | // タイマーオブジェクトを入れておく変数 |
| 838 | var timer; |
| 839 | |
| 840 | window.onload = function() { |
| 841 | div = document.createElement("div"); |
| 842 | with (div.style) { |
| 843 | background = "#09f"; |
| 844 | border = "1px solid #000"; |
| 845 | position = "absolute"; |
| 846 | left = pos_x + "px"; |
| 847 | top = pos_y + "px" |
| 848 | width = rect_width + "px"; |
| 849 | height = rect_height + "px"; |
| 850 | } |
| 851 | document.body.appendChild(div); |
| 852 | |
| 853 | // タイマーを設定する |
| 854 | timer = setInterval(moveRectangle, TIMER_WAIT); |
| 855 | } |
| 856 | |
| 857 | // 矩形を動かす |
| 858 | function moveRectangle() { |
| 859 | // 矩形の位置を変更 |
| 860 | switch (direction) { |
| 861 | case Direction.RIGHT: pos_x += rect_width / 2; break; |
| 862 | case Direction.BOTTOM: pos_y += rect_height / 2; break; |
| 863 | case Direction.LEFT: pos_x -= rect_width / 2; break; |
| 864 | case Direction.TOP: pos_y -= rect_height / 2; break; |
| 865 | } |
| 866 | div.style.left = pos_x + "px"; |
| 867 | div.style.top = pos_y + "px"; |
| 868 | |
| 869 | // 方向転換 |
| 870 | if (++count >= MAX_MOVE_TIME) { |
| 871 | direction = (direction + 1) % 4; |
| 872 | count = 0; |
| 873 | } |
| 874 | } |
| 875 | //--></script> |
| 876 | </head> |
| 877 | |
| 878 | <body> |
| 879 | </body> |
| 880 | |
| 881 | </html> |
| 882 | }}} |
| 883 | |
| 884 | このサンプルでは、矩形は右だけでなく、下、左、上にも移動し、際限なく回転をし続けます。 window.setInterval() メソッドを用いることで、このように、一定の時間間隔で処理を繰り返すプログラムを作ることができます。 |
| 885 | |
| 886 | もう 1つは、矩形をマウス操作のドラッグ&ドロップで動かすことができる、というものです。 |
| 887 | |
| 888 | {{{ |
| 889 | <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"> |
| 890 | <html> |
| 891 | |
| 892 | <head> |
| 893 | <meta http-equiv="content-type" content="text/html; charset=UTF-8"> |
| 894 | <meta http-equiv="content-style-type" content="text/css"> |
| 895 | <meta http-equiv="content-script-type" content="text/javascript"> |
| 896 | <title>moving rectangle sample 3</title> |
| 897 | <script type="text/javascript" language="JavaScript"><!-- |
| 898 | // 表示位置、大きさ |
| 899 | var pos_x = 0; |
| 900 | var pos_y = 0; |
| 901 | var rect_width = 100; |
| 902 | var rect_height = 100; |
| 903 | |
| 904 | // マウスを動かし始めた位置 |
| 905 | var mouse_pos_start_x; |
| 906 | var mouse_pos_start_y; |
| 907 | var pos_start_x; |
| 908 | var pos_start_y; |
| 909 | |
| 910 | // 生成した <div> 要素のオブジェクトを入れておく変数 |
| 911 | var div; |
| 912 | |
| 913 | window.onload = function() { |
| 914 | div = document.createElement("div"); |
| 915 | with (div.style) { |
| 916 | background = "#09f"; |
| 917 | border = "1px solid #000"; |
| 918 | position = "absolute"; |
| 919 | left = pos_x + "px"; |
| 920 | top = pos_y + "px" |
| 921 | width = rect_width + "px"; |
| 922 | height = rect_height + "px"; |
| 923 | } |
| 924 | div.onmousedown = startMoveRectangle; |
| 925 | document.body.appendChild(div); |
| 926 | } |
| 927 | |
| 928 | // マウスの位置を取得する |
| 929 | function getMousePos(ev) { |
| 930 | var pos = {}; |
| 931 | if (window.event) { // IE の場合 |
| 932 | ev = window.event; |
| 933 | var scroll_x = document.documentElement.scrollLeft || document.body.scrollLeft; |
| 934 | var scroll_y = document.documentElement.scrollTop || document.body.scrollTop; |
| 935 | pos.x = scroll_x + ev.clientX; |
| 936 | pos.y = scroll_y + ev.clientY; |
| 937 | } |
| 938 | else { // それ以外の場合 |
| 939 | pos.x = ev.pageX; |
| 940 | pos.y = ev.pageY; |
| 941 | } |
| 942 | return pos; |
| 943 | } |
| 944 | |
| 945 | // 矩形を動かし始める |
| 946 | function startMoveRectangle(ev) { |
| 947 | // 動かしはじめのマウスの位置を記憶しておく |
| 948 | var pos = getMousePos(ev); |
| 949 | mouse_pos_start_x = pos.x; |
| 950 | mouse_pos_start_y = pos.y; |
| 951 | pos_start_x = pos_x; |
| 952 | pos_start_y = pos_y; |
| 953 | // ドキュメント全体に、マウスを動かした場合、マウスボタンを放した場合の処理を設定する |
| 954 | document.onmousemove = moveRectangle; |
| 955 | document.onmouseup = endMoveRectangle; |
| 956 | |
| 957 | return false; // Firefox、 Opera でテキストの選択を禁止する |
| 958 | } |
| 959 | |
| 960 | // 矩形を動かす |
| 961 | function moveRectangle(ev) { |
| 962 | // 矩形の位置を変更 |
| 963 | var pos = getMousePos(ev); |
| 964 | pos_x = pos_start_x + pos.x - mouse_pos_start_x; |
| 965 | pos_y = pos_start_y + pos.y - mouse_pos_start_y; |
| 966 | div.style.left = pos_x + "px"; |
| 967 | div.style.top = pos_y + "px"; |
| 968 | |
| 969 | return false; // IE でテキストの選択を禁止する |
| 970 | } |
| 971 | |
| 972 | // 矩形を動かし終える |
| 973 | function endMoveRectangle(ev) { |
| 974 | moveRectangle(ev); |
| 975 | document.onmousemove = document.onmouseup = function() { }; |
| 976 | } |
| 977 | //--></script> |
| 978 | </head> |
| 979 | |
| 980 | <body> |
| 981 | </body> |
| 982 | |
| 983 | </html> |
| 984 | }}} |
| 985 | |
| 986 | ブラウザ依存の部分もあるので若干わかりにくくなっていますが、ハンドラメソッドに渡されるイベントオブジェクトからマウスの位置を取得し、それを元に矩形の位置を移動する、という実装になっています。これをさらに応用すると、 Web ページ内でウィンドウを表示したり、ドラッグ&ドロップを表現したりすることができるようになり、 Web アプリケーションの幅が広がります。 |
| 987 | |