amyu2TweetPocket普段、残業なんて滅多にしない職場で働いている自分ですが、この2週間ほどは激務でした(どれぐらい激務だったかはいいません。個人的にそう思っただけで、中にはそんなの激務じゃないと言われそうなレベルの量なので)それはともかく、その間にやっていた仕事がframesetやframeタグを使っているフレームを利用したHTMLファイルをHTML5化するというもの。知ってる人も多いと思いますが、framesetやframeタグはHTML5で廃止されてしまっています。代替方法としてiframeタグを使うことになったのだけれども(この実装方法に突っ込まないでください。時間がなかったのでこうするしかなかった)、最初、うまい実装方法が思いつきませんでした。対応ブラウザはIE6以上と言われています(HTML5なのに、IE6以上って.........)。noresize><noframes><body>このページはフレームを使用しています</body></noframes></frameset>サンプルページヘッダとして上部に50px、フッタとして下部に70px、そしてメインのページをその間に入れたフレームページです。ヘッダとフッタは問題ありません。問題はメインページです。動的に高さを変更しなければいけないわけですが、うまい方法が思いつきませんでした。最初はそれぞれのiframeをtable,tr,tdタグで囲って、tableの高さを100%にし、一番上のtrの高さを50px、一番下のtrの高さを70pxにしてみました。うまくいったように思えたのですが、IE10以下でダメでした・・・。次に考えたほうほうが、#mainをdivタグで囲み、そのdiv(#main_containerとする)をbodyと同じ幅と高さと位置にして、box-sizingをborder-boxにしたうえで、padding-topを50px、padding-bottomを70pxにしたうえで、#mainの高さと横幅を100%にしたらいけるんじゃ・・・なんて思ったけど、よくよく考えるとIE7ではbox-sizing非対応だったのでできません(IE6はもともとbox-sizing:border:box;と指定した時と同じ振る舞いだったはずです)。したらいいんだ・・・。思いながらふと思いついた。先ほどの#main_containerのtopを50pxにして、bottomを70pxにしたらどうなるんだろう・・・。結果、期待通り、上部に50px、下部に70px空いた要素となりました(てっきり、どっちも指定している場合、どっちかが優先されるもんだと・・・。CSSはある程度わかってきたと思ったんだけどなぁ。CSS界隈では常識だったりするんだろうか?)というわけで、以下が実装結果。id="footer">footer</iframe>サンプルページIE6やIE7ではうまくいかないところもあったので、何度か試行錯誤してどのブラウザでも実装することができました。同じように左・中央・右にわけたフレームページでは下記のようになります。*/width:100%;height:100%;}HTML5:サンプルページ応用として、framesetの中にframesetがあるページも下記の通り。HTML4:サンプルページHTML5:サンプルページただし、最後のはIE6でうまく動きませんでした。いうページの場合は、最初に作ったframe1-html5.htmlの中の#mainのsrc属性を、二つ目に作ったframe2-html5.htmlにするほうがいいかもしれません。関わらず、今年に発売されたHTML5について描かれてる本にhgroupタグについての記述が書かれているのを何冊か見てきました。具体的にいうと、下記の3冊に、hgroupタグについての記述が書かれていました。―新しいWebプラットフォームの基盤技術(ただし、まだ読みきれてません)この中だと、『フロントエンド開発徹底攻略』が過去にWeb+DBで掲載された特集を収録した本で、『モダンWeb』は2013年4月に発売された本の翻訳本なので、分からなくはないのですが、最初の本はそういった理由があるわけではなさそうです(大学の教科書用として作られたそうなので、もっとチェックしてほしかったところ)。自分はhgroupを知ったのはいつだったかは覚えてないのですが、このタグを知った時にモヤモヤしたような気がします。下記のようなHTMLの構文があったとします。<p>2013年に発売されたゲーム</p>12345<h1>人気ゲームソフト</h1><h2>ポケモン</h2><p>1996年に発売されたゲーム</p><h2>妖怪ウォッチ</h2><p>2013年に発売されたゲーム</p>これにhgroupを入れると下記のようになります。<p>2013年に発売されたゲーム</p>1234567<hgroup><h1>人気ゲームソフト</h1><h2>ポケモン</h2></hgroup><p>1996年に発売されたゲーム</p><h2>妖怪ウォッチ</h2><p>2013年に発売されたゲーム</p>こんな書き方需要ないだろと。突っ込まれそうなので、実際にどう使われていたかというと、ウェブサイトの主題と副題(セクションの見出し)をグループ化する時に使われていたようです。ここのブログだと、下記のようになります。id="site-description">ころころ興味対象が変わるプログラマの技術ブログ(多分)</h2></hgroup>って、いま気づいたけど、このブログ、ブログタイトル箇所はhgroupで囲ってあったのか・・・。いい加減、変更しなければ・・・。このへんはよく分からないのですが、また仕様に追加されるということもあるということなのだろうか。ややこしいので、削除したり復活したりということはあまりやってほしくないのだけれども。ところで、HTML5の仕様から削除されたものはhgroupだけではないらしく、menuタグやcommandタグというものもあるよう。『しらぎくのWWW作成入門』メモ)。なんだか悲しくなってきた。やって調べてみると需要はあるように思うのだけど、何で削除したんだろう。テクニックバイブルで知ったことのメモ。今回はデスクトップ通知について。なんと、HTML5では、ブラウザからデスクトップ通知を表示することができるそうです。通知を指示するページを表示してなくても(ブラウザを最小化してたり、別タブで違うページを見てたりしててもという意味)。サンプルページとして、カウントダウンタイマーを作成して0秒になった時点でデスクトップ通知を表示するウェブページを作ることにします。false);});});サンプルページ:最新のChromeやFirefoxではうまく動くはずです。ページを開くと『デスクトップ通知を有効にする』というボタンが表示されていると思うので、そのボタンを押し、デスクトップ通知の許可をしてください。その後、スタートボタンが押せるようになると思うので、分と秒の数値を指定し、スタートボタンを押してください。カウントダウンがはじまります。0秒になるとデスクトップの右下に通知が表示されます。試しに10秒ぐらいで試してみて、ブラウザを最小化したり、別タブを見たりしてみてください。それでも表示されると思います。通知をクリックすると通知元のページを表示するようにしています。テクニックバイブルという本を読んでいるのですが、初めて知ったことがいろいろ書いてあって驚愕する日々を送っています。URI形式ではなく、バイナリ形式にしてPOST送信する方法のメモ。IE9では使えないよう。受け取り側のPHPを記述。普通にフォームの画像ファイルを受け取ってサーバーにファイルを保存するような記述を書いておきます。Laboを参考にしました。"アップロードしました。"ファイルをアップロードできません。"ファイルが選択されていません。"アップロードしました。"ファイルをアップロードできません。"ファイルが選択されていません。";}?>上記のPHPでは、acceptImageというプロパティに対応するファイルをtest.pngという名前で保存するようにしたPHPです。試しに、下記のようなHTMLを書いて普通にファイル選択してPOSTするとうまく動きました。/></form>というわけでつづいて、前に作ったCanvasお絵描きツールの投稿先を、上記PHPに変更し、JavaScriptでCanvasのデータをPOST渡しできるよう記述するように投稿ボタンを押した時の処理を下記のようにしてみました。テクニックバイブルのほうでは、jQueryを使わずに純粋にXMLHttpRequestオブジェクトを使ってAjax送信しているコードが載っていたのですが、自分は最近Ajaxを使う時はjQueryを使うことにしてるので、jQueryを使って書いてみました。Sarabande.jp)。HTML5テクニックバイブルに載っているコードでは、そんな記述が必要ない分、もう少しシンプルな記述となっています。それにしても、上記コードは自分が初めて知ることがたくさんあります。簡単に説明すると、BlobオブジェクトはMIMEタイプを含んだバイナリデータを表し、ArrayBufferオブジェクトは固定長のバイナリデータを表し、Uint8Arrayは8ビットの符号なし整数を表すようです。Uint8Arrayの説明には、C言語での同等タイプに『uint8_t』という記述が。Wikipedia)。HTML5はある程度知っているつもりでいましたが、まだまだ知らないことが多くありそうです。ところで、Blobオブジェクトの取得については、canvasオブジェクトにtoBlobメソッドが実装されていれば、そのメソッドを使うことにより、簡単に取得できるようです。このメソッドは残念ながら、Firefoxでしか実装されていないよう。Chromeですら実装してないとなると、さすがに使うのに躊躇します。amyu返信TweetPocket描き間違いがあったときに一つ前の状態に戻る機能がほしくなったので、その機能を追加することに。五回分を保存できるようにしてみた。塗りつぶし機能よりは簡単に実装できました。true);}}});以下、動作サンプル。canvasを使ったお絵描き投稿システムsaveImageDataという関数は、初期状態やキャンバス上でマウスボタンやタッチが離された時に実行するようにしています。いう配列に保存し、戻るボタンや進むボタンをおした時に現在の番号(flagMemory)の前や次に対応したimageMemoryに入っているキャンバスのデータをputImageDataでキャンバス上に描画しています。何度か戻った後に新しくキャンバスに絵を書いた場合、次の画像というものがないのが自然な気はしますが、わざわざ消す必要もないだろうと思い、消してません(面倒だっただけだろと突っ込まないでください)。なんというか、本当思いついたらその分追加するだけのコードになっているので、汚い気はします。キレイなコードを書けるようになりたいです。世界一のアニメーション企業の今まで語られなかったお金の話(ブクログレビュー)当サイトは以下のサービス、ツールによって運営されています。