楽天モバイルスマートフォン用の表示で見るスターをつけました引用をストックしましたストック一覧を見る閉じる引用するにはまずログインしてくださいログイン閉じる引用をストックできませんでした。再度お試しください閉じる限定公開記事のため引用できません。読み込み中・・・こんにちは、はてなブログ研究家のNAEです。はてなブログのカスタマイズや内部構造の特性を用いた高速化など、はてなブログでは色々と遊んできました。それらはいずれも「カスタマイズ」の範囲内。デザイン」からいじれるものに限られていました。今回はそのカラを破って、記事本体で遊んでみたいと思います。いうか、記事本体で遊べるようにしてみました。はてなブログで遊ぶ方法はてなブログの記事にテトリスを埋めこんでみたはてなブログテトリス(PC推奨)はてなブログテトリスでの工夫点CSSのインライン化テトリス面の大きさ調整ゲームプレイ時に上下キーでスクロールしてしまうのを防止まとめ:はてなブログの記事欄は結構なんでもできるはてなブログで遊ぶ方法はてなブログの記事にはHTMLを直接記述できます。それこそHTMLのDOMだけでなくJavaScriptだって。やろうと思えばDOMのstyle属性にCSSの記述を入れることもできます。記事ページというのは本当になんでもできる場なんですね。はてなブログの記事にテトリスを埋めこんでみたそこで今回、下記のサイトを参考にはてなブログの記事にテトリスを埋めこんでみました。参考にさせていただいたサイトではHTML、JavaScript、CSSの3点セットでテトリスを実装しています。テトリスページが独立しておりスクロールが発生しないことが前提となっていました。このままでははてなブログの記事ページでは使えません。そのため記事にテトリスを埋めこむにあたり、下記3点、変更しました。CSSのインライン化はてなブログでは<style>タグを記事内に記述できません。これははてなブログの仕様です。そのため掲載されていたCSSのコードを、HTMLのDOMの属性値に直接書き込んでしまうインライン化を施しました。いっても、元CSSでは<canvas>に対するものしかなかったのであまり手間にはなっていません。テトリス面の大きさ調整2つめはテトリス面の大きさを少し縮小しました。はてなブログの記事画面ではヘッダーやサイドバーなど記事本体以外の要素も表示されるため、独立したWebページ前提の元コードだとすこしテトリス面のサイズが大きすぎ、1画面内におさまらなかったのです。Flipの場合)そのため<canvas>要素に指定された幅と高さJavaScript内に定義されているブロックのサイズをちょっとだけ修正して、全体が縮小表示されるようにしました。本当はViewportなどを使ってデバイスの画面の大きさに応じて自動的に拡大縮小させたかったのですが、手間だったのでやめました。ゲームプレイ時に上下キーでスクロールしてしまうのを防止テトリス面が画面内に収まっても、プレイするときにPCの上下左右キーを押すと画面がスクロールしてしまっていました。そのためテトリス面にフォーカスがあたっているときは、「矢印キーが押された」という情報をスクロールを司るブラウザ側に伝えないよう、JavaScriptを修正しました。まとめ:はてなブログの記事欄は結構なんでもできる以上、はてなブログの記事にテトリスを埋めこんで遊んでみました。一部HTML要素ははてなブログ側でNGになっているものの、かなり多くの要素を自由に使えるため、幅広く遊べると思います。それこそ理論上はスーパーマリオも埋め込めちゃうと思いますよ。下記サイトはHTML+JavaScript+CSSで実装された、ブラウザで遊べるスーパーマリオです。Marioはてなブログはいろいろ遊べて楽しいですね。(id:nice_and_easy)外資コンサルでIT戦略やってるアラサー管理職です。余計なことを考えず、気楽に生きるアイデアを発信しています。