検索:ダリの雑記:WEBプログラム版タグ:HTML5HTML5でお絵かきツールHTML5のCanvasを使ってお絵かきツールv0.5を作ってみました。ベースはASCII.jpのこちらの記事を参考に作成。Painter」というサイトのソースを参考にさせてもらいながら作りました。ファイヤーフォックスでしか動かない、レイアウトが雑、ツールの機能がまだ不十分(特に不透明度・ブラシ(ぼかし))など問題点が多々ありますが、一応上げてみます。(this.toRGBに引数を付け加えただけ)だけです。その他については上記で掲載したサイトからダウンロードしたり、載っていたソースをそのまま使用しています。制作にあたり、今回は以下のサイトを参照させていただきました。その3(css3shadow)今回の方法では、ドロップシャドウ・テキストシャドウができます。「css3shadow」を利用する方法。(参考サイト:ppBlogさんのサイト)css3shadowでできるCSS3機能は以下のとおりです。テキストシャドウcss3shadowのIE用ドロップシャドウでは「box-shadow」ではなく、「-moz-box-shadow」または「-webkit-box-shadow」で記述します。両方書いていても大丈夫です。手順1.まずはこちらのサイトから「css3shadow」をダウンロードしてください。(リンク先の下のほうにある「添付ファイル:css3shadow.htc」をクリックしてください。)2.htmlファイルに以下を記述し、「css3shadow.htc」を呼び出してください。src="css3shadow.htc"></script><![endif]-->3.スタイルシートを設定してください。css3shadowではinsetによる内部シャドウが使用できます。(ie-css3とPIEでは現在確認したところ、できませんでした)通常のドロップシャドウにする場合はこの「inset」を削除してください。0.3);}4.スタイルは、ドロップシャドウ・テキストシャドウともにclass「box」という名前にしていますので、body内にそれぞれを含んだタグを記述してください。class="box"><p>「css3shadow」では、insetによる内部シャドウが使用できます。</p><p>「css3shadow.htc」を呼び出す場合は、behaviorではなく、scriptタグで呼び出してください。</p></div>これで、IEでも対応できるようになります。[新しいウィンドウで開く]※サンプルではinsetによる内部シャドウを使用しています。注意事項シャドウを設定しているクラスで「text-align:center;」を使うと、「こちら」のようにとんでもない結果になります。使う場合はそのクラスの中にもうひとつタグを入れてそちらで「text-align:center;」を使ってください。上記の問題、ご対応いただけたようです。CSS関連IEでHTML5で追加された新要素を使用する方法HTML5では、以下の新しい要素が追加されています。articleasidedialogfigurefooterheaderhgroupmenunavsectionこれらの要素とは一体なんなんだ?ということを、てっとり早く説明した記事がこちらになります。「html5を使ったブログのデザイン(HTML5.jp)」さらに詳細を知りたい方はこのページへ。「HTML要素(HTML5.jp)」さて、ここで問題となるのが、例によってIEではこれらの要素が実装されていないということです。これらにclassをつけてもそもそも要素として認識されないため、classにスタイルを設定しても無視されてしまいます。そこで、javascriptの出番。Sharp氏という方がこれらの要素を有効化できるプログラムを作ってくれていますので、その助けをかります。headタグに以下の記述を追加してください。src="html5.js"></script><![endif]-->これで、最初に記述した新要素が使えるようになります。その2(PIE)今回は、角丸・ドロップシャドウ・グラデーションを行います。※印刷にて重大なバグあり。beta4」においてある程度解消されましたが、その代わり、印刷においてPIEは実行されません。(試しに当サイトをIEで印刷プレビューをご覧ください。角丸の効果がなくなっています。)「PIE」を利用する方法。(参考サイト:コリスさんのサイト)PIEでできるCSS3機能は以下のとおりです。※「ボーダー画像」について、あまりピンとこない方はこちらのサイトをご参照ください。非常にわかりやすく説明されています。「PXT255;さん」のサイト手順1.まずはこちらのサイトから「PIE」をダウンロードしてください。2.次にスタイルにて、各設定を行います。url(PIE.htc);を入力しておきます。imagesの記述を追記しました。url("PIE.htcへのパス");」を記述するのを忘れないよう注意してください。※なおグラデーションは、Firefoxの場合3.6以上でないと表示されませんのでご注意ください。images」はclass「multiple_box」というclass名にしていますので、body内にそれぞれを含んだタグを記述してください。class="multiple_box"></div>これで、IE8でも対応できるようになります。[新しいウィンドウで開く]※サンプルでは見やすいようにタグのスタイルをあらかじめ設定しています。blog」さんのサイトから借用しました。正常に表示されればなかなかかっこいい背景になります。images」(※1)はなぜか、IEで正常に動作しませんでした。できるはずなんですけどねぇ・・・;こちらについてはもうしばらく調べてみます。PIEバグレポートを追加しました。HTML関連HTML5のvideoの現状HTML5自体新しい仕様ですから、まだまだタグの対応が全ブラウザには行きわたっておりません。その中でもブラウザによって仕様がばらばらなのがvideoタグ。videoタグで扱える動画形式がブラウザによって対応が異なるようで、せっかくすっきりと記述できるようになったのに、全ブラウザに対応させようとしたら結局はFlash形式も用意しなくてはならないのが現状のようです。各ブラウザの動画形式対応表はこちらをご参照ください:マイコミジャーナルvideoタグでは(canvasタグもそうですが)、これらのタグで囲んだ部分はnoscriptタグのように、「対応していないブラウザの場合のみ表示する」という仕組みになっています。poster="whale.png"><p>このブラウザでは対応しておりません。</p></video>上記のように書くと、たとえばIE6で見た場合「このブラウザでは対応しておりません。これでは不親切なので、この中にflashのobjectタグ等を埋め込むことで対応するわけですね。flash用動画を用意するくらいなら、もうそれだけでいいじゃんということにもなりかねないので、このタグについてはもうしばらく様子見かもしれません。(iPadにも対応させたい場合は便利ですが)それでも先んじてさまざまなクリエイターがプレイヤーを作ってくれています。参考サイト:Blitzさん「Flashモードあり」になっているのプレイヤーは、確認した限り「IE8」「FireFox」「Chrome」「Safari」で動作しました。HTML関連HTML5で棒グラフを表示する(Canvas)HTML5のCanvasを利用すると、棒グラフを表示することができます。HTML5.JP上記のサイトから「graph_vbar_1_0_4.zip」をダウンロードして解凍すると、そのフォルダの中に「examples」フォルダがありますので、その中のサンプルを実行してみてください。棒グラフが表示されるかと思います。このサンプルでは、スクリプト内に直接パラメータを配列で入力しなくてはなりません。20]];てことで、tableに入れたパラメータを吸い出してグラフ化するように変更しました。いえ、jsファイルを直接変更する必要はありません。htmlファイルの中に記述するスクリプトを編集しただけです。今回は「sample_graph_vbar_4.html」を改良して使用しました。(まずはサンプルを見たい方はこちら)手順1.bodyタグ内に、パラメータが入ったテーブルを記述してください。※tableタグにid="graph"を忘れずに記述してください。※theadタグとtbodyタグを忘れないよう注意してください。id="graph"><thead><tr><th>商品名</th><th>商品概要</th><th>日</th><th>月</th><th>火</th><th>水</th><th>木</th><th>金</th><th>土</th></tr></thead><tbody><tr><th>商品A</th><td>商品概要</td><td>20</td><td>58</td><td>40</td><td>14</td><td>38</td><td>20</td><td>40</td></tr><tr><th>商品B</th><td>商品概要</td><td>10</td><td>14</td><td>58</td><td>80</td><td>70</td><td>90</td><td>20</td></tr><tr><th>商品C</th><td>商品概要</td><td>10</td><td>14</td><td>58</td><td>80</td><td>70</td><td>90</td><td>20</td></tr><tr><th>商品D</th><td>商品概要</td><td>10</td><td>14</td><td>58</td><td>80</td><td>70</td><td>90</td><td>20</td></tr><tr><th>商品E</th><td>商品概要</td><td>10</td><td>14</td><td>58</td><td>80</td><td>70</td><td>90</td><td>20</td></tr></tbody></table>2.headタグ内のwindow.onload=function()の関数は、丸ごと削除して、以下のvbar_graphという関数を追記してください。※sample_graph_vbar_4.htmlでは「window.onload」で実行していますが、今回は関数化してbodyのonloadで読み込むことにしました。これは後々複数のグラフを表示する際、imgタグのonloadなどでも対応できるようにするためです。'注文数(個)')"」を実行するように記述してください。y_title)table_id:パラメータが入っているtableタグのID(今回の例では「graph」)output_id:グラフ出力先のcanvasタグのID(今回の例では「sample」)title_num:「項目名」が入っている、テーブルの列番号(今回の例では1列目)value_start_num:「値(数値)」が入っている、テーブルの開始列番号(今回の例では3列目)value_end_num:「値(数値)」が入っている、テーブルの終了列番号(今回の例では9列目)x_title:グラフX軸の項目名(今回は「曜日」)y_title:グラフY軸の項目名(今回は「注文数(個)」)列番号について:javascriptでは一番始めが0になるので、1列目は「0」、3列目は「2」、9列目は「8」になります。以上でサンプルの様に表示されます。[新しいウィンドウで開く]ざっくりと改造なので粗があるかもしれませんが、ご了承ください。JavaScript関連HTML5で円グラフを表示する(Canvas)※追記:グラフ出力について考慮されていなかったので、引数にoutput_idを付け足しました。(2010.07.21)HTML5のCanvasを利用すると、円グラフを表示することができます。HTML5.JP上記のサイトから「graph_circle_1_0_2.zip」をダウンロードして解凍すると、フォルダの中に「examples」フォルダがありますので、その中のサンプルを実行してみてください。円グラフが表示されるかと思います。このサンプルでは、スクリプト内に直接パラメータを配列で入力しなくてはなりません。10]];これはちょっと面倒。ことで、tableに入れたパラメータを吸い出してグラフ化するように変更しました。いえ、jsファイルを直接変更する必要はありません。htmlファイルの中に記述するスクリプトを編集しただけです。今回は「sample_graph_circle_1.html」を改良して使用しました。(まずはサンプルを見たい方はこちら)手順1.bodyタグ内に、パラメータが入ったテーブルを記述してください。※tableタグにid="graph"を忘れずに記述してください。※tbodyタグを忘れないよう注意してください。(thead内のデータはグラフに影響を与えません。id="graph"><caption>アンケート結果</caption><thead><tr><th>項目名</th><th>概要</th><th>値</th></tr></thead><tbody><tr><th>sample01</th><td>description</td><td>150</td></tr><tr><th>sample02</th><td>description</td><td>100</td></tr><tr><th>sample03</th><td>description</td><td>80</td></tr><tr><th>sample04</th><td>description</td><td>60</td></tr><tr><th>sample05</th><td>description</td><td>30</td></tr></tbody></table>※「sample_graph_circle_1.html」は「sample12」までありますが、今回は「sample05」までにしました。2.headタグ内のwindow.onload=function()の関数は、丸ごと削除して、以下のcircle_graphという関数を追記してください。※sample_graph_circle_1.htmlでは「window.onload」で実行していますが、今回は関数化してbodyのonloadで読み込むことにしました。これは後々複数のグラフを表示する際、imgタグのonloadなどでも対応できるようにするためです。2)"」を実行するように記述してください。value_num);table_id:パラメータが入っているtableタグのID(今回の例では「graph」)output_id:グラフ出力先のcanvasタグのID(今回の例では「sample」)title_num:「項目名」が入っている、テーブルの列番号(今回の例では1列目)value_num:「値(数値)」が入っている、テーブルの列番号(今回の例では3列目)列番号について:javascriptでは一番始めが0になるので、1列目は「0」、3列目は「2」になります。以上でサンプルの様に表示されます。(サンプルではテーブルがしょぼかったので少しスタイルを追加しています。[新しいウィンドウで開く]ざっくりと改造なので粗があるかもしれませんが、ご了承ください。JavaScript関連HTML5で3Dやろうぜ!最近話題のHTML5。自分は3Dに興味があるのでO3Dには度肝を抜かれました。Code)O3Dをダウンロードしないとみれませんが、無料なので試してみると面白いですよ。気に入ったサンプル(ゲーム)http://o3d.googlecode.com/svn/trunk/samples/io/io.htmlまだモデルを読み込むのすら苦戦している状態ですが、暇を見つけてなにか作ってみたいですね。Flashではできて、HTML5ではできないことはまだまだ多いみたい。(Animeより[2019/11/23])WordPressのパーマリンクでindex.phpが勝手に挿入される。雑多エンジニアのひとりごとより[2019/11/11])WordPressのパーマリンクでindex.phpが勝手に挿入される。(94アクセス)プロフィール和歌山でウェブプログラマーをやってます。使える言語はHTML・PHP・Javascriptなど。Perlも扱えるようになるといいなぁ、と思う今日この頃。ついでに書くと、漫画・アニメが大好きなオタクです。最近はアクアリウムにはまり中。