「HTML5」の記事 - Crieit

Cocosを使ったゲームのご紹介 - 2022年9月まで

2023-01-09T22:53:17+09:00

Cocosエンジンを使っている会社が作ったゲームを紹介するのは、いつも素晴らしいことですが、今回は私たち自身のゲームもリストに加えました！ Steamにある私たちの無料ゲームをチェックしてみてください......と言いたいところですが、これについては後述します。

ショーケースには、中国でかなり話題になっているゲームやトップ10に入るような大作がたくさん並んでいます。多種多様なものを見て、私たちがデベロッパーと共有できるものは、私たちと一緒に作ることに興奮するような素晴らしいものでした。このリストを楽しんでいただければ幸いです。そして、今年12月に開催される最終ショーケースに向け、準備を整えています。

Paper Wedding Dress 4 - Red Silk Wrap
中国では規制の関係でホラーゲームはあまり見かけませんが、当たる時は超当たりますね。このゲームは、半年ごとに発売されているマルチシリーズの一つで、中国では非常に好調です。『ペーパーウェディングドレス4』は発売初日に1位を獲得し、ゲーマーはすでに第5弾の準備に取り掛かっています。このゲームについては、翌週のブログで少し紹介しました。

isles
多くの開発者は「ゲームエンジンの能力を試すために自分で作ったゲームがあってこそ、ゲームエンジンの開発者としての資質がある」と言っています。そして、それがislesという、ジャンプしたり、浮いたり、集めたりして全レベルをクリアするプラットフォーマーゲームを作るための作業の始まりです。また、このゲームのソースコードを当社のストアで販売していますので、そこから学びたい方はご利用ください。ゲームについての詳細は、ブログ記事からご覧ください。

Hero Village
この3Dボクセルシム経営ゲームは、中国での競争や規制によって開発者が国外に出ざるを得なくなり、多くの中国製ゲームが出始めている中の1つです。RPGの要素だけでなく、タワーディフェンスやフュージョンも加わって楽しいゲームです。開発者がフォーラムでこのゲームについて少し話してくれました。

Archer Castle
今年の Discord で共有されたゲームの 1 つです。このHTML5ゲームは、ブラウザとスマホでたくさんのゲームプレイを楽しめます。これは、多くのクレイジーなモンスターとアップグレードを備えたシンプルなタワーディフェンスです。午後のリラックスタイムに最適なゲームです。現在、poki.comでプレイ可能です。

Call Me Mister Big Boss
過去に取り上げた他の多くのゲームと同様に、この都市管理ゲームは古代中国の時代にさかのぼり、都市でできることを拡張します。中国のユーモアがたくさん詰まった楽しいストーリーゲームです。私たちはフォーラムでそれについて少し共有しました。

Pause! Let Me Check The Guide
新作アニメ『Pause! Let Me Check The Guide 』が中国の動画サイト「Bilibili」で超人気となっています。このゲームの面白いところは、アニメのファーストシーズンの最後にキャラクターの一人を視聴者が操作できるようになっているところです。これはサイトのビデオ画面から直接プレイできる最初のゲームの一つで、HTML5ゲームを使って番組を拡張するという点で、かなり画期的なことだと思います。

Jaws & Claws
このゲームは、開発者がゲームのリリースを間近に控えているため、当フォーラムを通じてお届けすることになりました。このプラットフォームファイターゲームでは、ゴリラ、ワニ、サイ、クマなど、クレイジーなキャラクターと一緒に戦うことができますストーリーモード、フリープレイ、サッカーなど、楽しいゲームモードが搭載されています。

Panda Pizza Parlor
Bitcakeは、今年の初めにGamesnacksに登場したゲームで紹介されました。彼らはその経験を生かし、今ではピザ屋のオーナーとして、ピザやスナックをお客さんに提供するという素晴らしい3Dタイムマネージメントゲームを作り上げました。モバイルとPCの両方で楽しめる楽しいゲームです。

Reincarnated As A Monster
モンスターとしての自分を作るだけでなく、勧誘、アップグレード、隠し装備の発見などが可能なカジュアルなアイドルゲーム。このゲームの大きな特徴は、戦いに挑み、親の力を融合させ子孫を作ることができる点です。非常に小さなチームで作られたこのゲーム、中国のアプリストア「TapTap」で9.0を超える大ヒットを記録しています。フォーラムへの投稿で、彼らのUIに関する技術について話をしました。

Coward Toraghi
冒険的なパズルゲームではありませんが、かわいらしさと巧妙なパズルは、物語の半分に過ぎません。また、このゲームは、新婚の二人の開発者が共同で開発したゲームであることも、多くの人が知っています。最近のブログで紹介されたので、どんなゲームなのか見てみてください。

Ghost Fight IO
このIOゲームは、ペレットを食べながら走り回り、より強いゴーストを撃退するゲームです。このゲームの素晴らしいところは、GoogleのDeveloper Summitで披露したCocos Creator 3.xのインフラで動いているところです。私たちは、webaudioだけでなく、将来のアップグレードも含めて、HTML5を改善するために努力しています。

引用元

JavaScriptのpostMessageでDOMツリーのノード参照を渡す方法[Xpath]

2020-08-24T18:47:06+09:00

ポップアップしたウィンドウに要素の参照（DOMノード）を送りたかったので、この記事を書いた。

Web MessagingはDOMノードを送れない

JavaScriptでは、window.postMessageを使うことで、ポップアップやiframeなどの別ウィンドウとWeb Messaging(HTML5)を介して通信することができる。

子ウィンドウ、親ウィンドウへの参照はそれぞれwindow.open()とwindow.openerで持つことができるから、window.postMessageと併せてあらゆるデータのやり取りが自由にできそうなものである。

しかし、window.postMessageでは送ることができないデータがある。

MDN web docsには、messageについて

他のウィンドウに送られるデータ。データは the structured clone algorithm に従ってシリアル化されます。つまり、手動でシリアル化することなく様々なデータオブジェクトを渡すことができます。
(window.postMessage - Web API | MDN)

と書かれている。

この「the structured clone algorithm」（日本語「構造化複製アルゴリズム」）という部分が重要で、この中で「構造化複製で動作しないもの」というのが示されいる。

Function オブジェクトは構造化複製アルゴリズムでは複製されません。複製しようとすると DATA_CLONE_ERR 例外が送出されます。

DOM ノードを複製しようとしても同様に DATA_CLONE_ERR 例外が送出されます。

つまり、例えばdocument.querySelector()などを使えば要素の参照を取得できるが、このような参照はWeb Messagingで送ることができない。
実際にwindow.postMessageでDOMノードを送ろうとすると、

Uncaught DOMException: Failed to execute 'postMessage' on 'Window': HTMLButtonElement object could not be cloned.

のようなエラーが発生する。

ウィンドウ間で互いのDOMの参照はできるのだから、DOMノードも送れるべきである。
そこで、住所のように、テキストでDOMツリーにおけるノードの位置を表現できる方法を探していると、「Xpath」という言語構文を見つけた。

Xpathとは

Xpathとは、XMLやHTMLのようなツリー状の階層構造を持つ文書で、様々なノードの位置や情報を表すことができる記法のことである。URLのようなパス表記ができることが特徴。

Introduction to using XPath in JavaScript | MDN

記法についてはこちらの記事が詳しいが、ざっくり言うと、例えばbody直下の

にアクセスするためのXpathは

/html/body/h1

となる。

また、2番目の

の3番目のにアクセスするためのXpathは

/html/body/div[2]/span[3]

といったように表すことができる。

要素のXpathを取得して送信する

まず、送るためにはDOMノードのXpathを取得する必要がある。
以下の記事のコードを使用して送信側のスクリプトを書いた。

ブラウザ上のクリックした要素のXpathを取得する - Qiita

parent.htmlのjs


let childWindow = window.open('child.html', 'child', 'width=300,height=400,scrollbars');

// クリックされたらその要素のXpathを子ウィンドウにpostMessageする
window.addEventListener('click', (e) => {
    childWindow.postMessage(getXpath(e.target), 'http://localhost');
});

/* https://qiita.com/narikei/items/fb62b543ca386fcee211 */
function getXpath(element) {
    if(element && element.parentNode) {
        var xpath = getXpath(element.parentNode) + '/' + element.tagName;
        var s = [];

        for(var i = 0; i < element.parentNode.childNodes.length; i++) {
            var e = element.parentNode.childNodes[i];
            if(e.tagName == element.tagName) {
                s.push(e);
            }
        }

        if(1 < s.length) {
            for(var i = 0; i < s.length; i++) {
                if(s[i] === element) {
                    xpath += '[' + (i+1) + ']';
                    break;
                }
            }
        }

        return xpath.toLowerCase();
    } else {
        return '';
    }
}

要素のXpathを受け取って参照する

受信側は以下のようになる。

child.htmlのjs

let parent = window.opener.document;

function receiveMessage(e) {
    if (e.origin !== "http://localhost") {return}
    parent.evaluate(e.data, parent, null, XPathResult.FIRST_ORDERED_NODE_TYPE).singleNodeValue.innerHTML = 'ok!';
}

window.addEventListener("message", receiveMessage);

Introduction to using XPath in JavaScript | MDN

成功すると、親ウィンドウでクリックした要素に「ok!」と表示されるはず。
これで、親ウィンドウから子ウィンドウに送られたXpathを使って、子ウィンドウが親ウィンドウのDOMを参照し、当該要素にアクセスすることが可能になった。もちろんその逆も可能である。

imgタグで画像が読み取れなかったときになにも表示しないようにしたい

2019-11-10T10:05:13+09:00

タグを使って画像を表示したときに、読み込めないとこんな感じになる。

読み込めない場合に、こんな感じで、なにも表示しないようにしたかったときの備忘録。

やり方はこんな感じ。

ポイントは以下の2点

altを空文字で設定
onerrorでsrcを空にして、onerrorをnullにする

1. 「`alt`を空文字で設定」について

画像が表示されなかった場合に、代わりにalt属性のテキストが表示してくれる
このalt属性がなかった場合、読み取り不可の画像が表示されてしまう。

なので、alt属性に空文字を指定しておくことで、
「画像が表示されなかった場合に、代わりに空文字を表示する」ようにしている。

2. 「`onerror`でsrcを空にして」について

onerror属性を設定しておくと、画像の読み取りに失敗した場合に、
何らかの処理をすることができる。

この記事によると、srcとaltがともに空文字だと、読み取り不可の画像が表示されないよう。

Firefox, Chrome, IEで、バツ印を非表示にするには、以下のいずれかの状態にする必要があります。
・src属性が空文字 AND alt属性があり/空文字
・src属性がなし

なので、onerrorを使って、画像が読み取れなかったときにsrcを空にしている。

3. 「onerrorをnullにする」について

また、srcを空文字にすると依然として、画像が読み取れない状態が続くため、
onerrorが繰り返し呼び出されるため、onerrorが無限に呼ばれ続けることになる。

そのため、srcを空にするのとあわせ、onerrorを初期化して呼ばれないようにしている。

おわりに

とりあえず、目的は達成できたので、良い感じ。

ただ、

srcが空なのでエラーのまま
altが空文字

など、よくなさそうなところがあるので、

エラー画像に差し替えたり、
JavaScriptで自体を表示しないようにする

などのほうがお行儀の良いHTMLになりそう。

こんなのつくってます!!

積読用の読書管理アプリ『積読ハウマッチ』をリリースしました！
積読ハウマッチは、Nuxt.js+Firebaseで開発してます!

もしよかったら、遊んでみてくださいヽ(=´▽`=)ﾉ

要望・感想・アドバイスなどあれば、
公式アカウント(@MemoryLoverz)や開発者(@kira_puka)まで♪

参考にしたサイト

俺的CSS便利Property・Value・Selector 50連発！

2019-08-16T15:05:02+09:00

最近すごくHTMLやCSSを書いている気がするので、ここらでCSSのよく使うプロパティや知っていると便利なプロパティをまとめてみることにしました。早速行ってみましょう！

よく使うもの

1. ::before, ::after

これを指定した要素の子要素として挿入される疑似要素。子要素を持てない要素(img, inputなど)には指定不可能。contentプロパティを指定しない限り挿入されない。なにも入れるcontentがない場合はcontent: ""を指定する。

2. min-height, min-width

高さや幅の最小値を指定する。mainコンテナのように、必ずある大きさ以上の大きさが必要な要素に指定すると、コンテンツの大きさにかかわらず設定した大きさより小さくならない。

3. max-height, max-width

上のmin-系とは逆に、高さや幅の最大値を設定する。指定すると、コンテンツの大きさにかかわらず、設定した大きさより大きくならない。

4. order

HTMLの要素の兄弟順をオーバーライドする。これを指定すると、強制的に兄弟要素の中でその順番になるように表示される。nth-系には影響しない。

5. visibility

display: noneと違って、表示したくないけれど領域は確保したいという場合に使える。

6. z-index

要素の描画順を設定するプロパティ。position: fixed;と使うことが多い。

7. clip-path

要素の見かけの外形を設定するプロパティ。うまく使えばCSSだけでいろんな表現が可能に。

8. will-change

要素のCSSプロパティがアニメーションで変化することをあらかじめブラウザに知らせる。パフォーマンス爆上がり。

9. transform

要素を移動、回転、拡縮、変形させるプロパティ。ちょっと場所がずれるときとか、アニメーションで動かしたいときに便利。

10. :root

root疑似クラス。document.documentElementを指し示すセレクタ。カスタムプロパティと組み合わせると応用範囲は無限大。メディアクエリと組み合わせるとモバイルビュー判定にも使える。

@media screen and (max-width: 960px) {
    :root {
        --is-mobile: yes;
    }
}
@media screen and (min-width: 961px) {
    :root {
        --is-mobile: no;
    }
}

11. transform-origin

transformプロパティの基準になる点を指定するプロパティ。ローディング画面のスピナなどを作るときなど、意外と使える場面が多い。

12. position: relative

position: absoluteが親要素を基準とした位置取りにならない！？って思ったときは大概こいつの設定忘れが原因。これが設定された要素の子要素にposition: absoluteが指定された場合、これが設定された要素を基準とした位置取りになる。

13. appearance: none

デフォルトの見た目をなくすプロパティ。input要素に独自のスタイルを当てたいときなど、これを設定するとうまくいくことが多い。

14. box-shadow

要素が落とす影を設定するプロパティ。背景が設定されていない要素につけると違和感マシマシ。そういうインラインなテキスト要素に影をつけたい場合は、text-shadowプロパティを使うこと。

15. background-clip

きれいなタイトル文字の修飾をしたいときに。ヘッディング要素のbackground-imageプロパティに適当な画像を設定して、このプロパティの値をtextにすると、背景が文字の形で切り抜かれる。

16. background-attachment: fixed

要素内のコンテンツが動いても、背景を動かしたくない場合に使う。サイトの背景に設定するといい感じになるかも。

17. border-radius

要素を角丸にできる。もはや説明不要。

18. :not

セレクタにマッチしない要素にマッチする。例えば、:not(.not-select)というセレクタは、not-selectクラスを持たない要素にマッチする。

19. :first-child, :last-child, :nth-child, :nth-last-child

指定された順番にある兄弟要素にマッチする疑似クラス。

20. :first-of-type, :last-of-type, :nth-of-type, nth-last-of-type

指定された順番にある同じタグ(spanどうし、divどうしなど)の兄弟要素にマッチする疑似クラス。

21. :required

required属性のあるformパーツにマッチする。

22. :invalid

入力された値が要求された形式に従っていないformパーツにマッチする。

23. outline

borderの外側に描画されるborderみたいなやつ。borderと違って、それ専用に場所が確保されない。

24. attr()

print画面でだけ::after疑似要素にurlを表示したいときなど、CSSのプロパティに特定のHTML属性を設定したいときに使用する。

25. user-select

ユーザーが要素を選択可能かどうかを設定する。spanにclickイベントを設定したときなど、選択されるのが鬱陶しかったり、要素を選択してほしくないときに使う。

26. pointer-events

要素のどこがマウスイベントをキャプチャするか指定するプロパティ。オーバーレイなど、ほかの要素より前に出るがマウスイベントをキャプチャしたくない要素にはnoneを設定すると吉。

27. cursor

要素の上に乗ったカーソルの表示の種類を設定する。ユーザビリティが上がるらしい。

28. :checked

チェックが入っているチェックボックスにマッチする。うまく活用するとHTML/CSSだけで開閉するメニューなどの2つの状態を持つUIが記述できる。

29. display: flex

要素をflexboxにする。子要素の数によって、自動でいい感じに配置を決めてくれる。すごく便利。ついつい多用しがち。

30. justify-content

要素の配置を決めるプロパティ。上のdisplay: flexと組み合わせて使うことが多い。

31. flex-flow

flexboxで、要素を配置する向きを決める。

32. flex

flexboxの子要素に指定するプロパティ。flex-grow、flex-shrink、flex-basisの3つを一気に指定できる。flex-growは要素がコンテナより小さいときにどれくらい大きくするか、flex-shrinkは逆に要素がコンテナより大きいときにどれくらい小さくするか、flex-basisは要素がコンテナの中でどれくらいの初期サイズを持っているのかを指定する。

そこまで使うわけでもないけど知っていたら便利なもの

33. position: sticky

これを設定された要素が親要素の中でrelative + fixedのような振る舞いをするようになる。Qiitaのいいねボタンやストックボタンのスマホ版みたいな振る舞いがこれ(とtop, bottom, right, leftプロパティのどれか1つ以上)だけで記述可能。

34. text-indent

行頭字下げをするプロパティ。パラグラフの先頭で字下げしたいときに有効。

35. ::first-letter

ある要素の中で、最初の文字にマッチする疑似要素。パラグラフの最初の文字だけ大きくするような表現に使える。

36. ::select

ある要素の中で、現在選択されているものにマッチする疑似要素。選択部分の強調などに使える。

37. ::target

urlのターゲットになっている要素にマッチする。ページ内リンクで飛んだ先の要素を強調するのに使える。

38. perspective

transformと組み合わせて使う。遠近法をどの程度かけるか指定するプロパティ。

39. transform-style: preserve-3d

これを三次元の移動回転変形を指定したtransformプロパティを持つ要素の親に指定することで、3次元的な描写を可能にすることができる。

40. filter

要素に指定したSVGフィルタをかける。::beforeに指定して背景をぼかしたり、グレイスケール化したり、いろいろな視覚効果を追加することができる。

41. ::marker

::marker
リストのマーカーにマッチする疑似要素。

←これがリストのマーカー。

42. ::placeholder

formパーツ要素のplaceholderにマッチする。placeholderの色やフォントなどを変えたいときに便利。

43. :defined

任意のCustomElementにマッチする。

44. quotes

～のタグを使ったときに表示される引用符を制御できる。それ以外のタグの場合も、以下のようにして利用できる。

blockquote {
    quotes: "「" "」";
}
blockquote::before {
    content: open-quote;
}
blockquote::after {
    content: close-quote;
}

より正確な動作の説明としては「open-quoteとclose-quoteの値を制御する」ということになる。

45. text-overflow

文字がコンテナのサイズを超過したときの処理を設定する。...のような記号で省略したり、それ以外の文字で省略したり、あるいはそれ以上を表示しなかったりするような表現が可能。

46. writing-mode

文字を縦書きにするか横書きにするか設定できる。サイトの種類によっては多用することもあるかも。

47. text-orientation

writing-modeをvertical-rlまたはvertical-lrにしたときに、文字をどの向きで配置するか設定する。

48. clear

浮動要素のまわりの固定要素の配置(回り込み)を指定する。浮動要素しか含まないような要素の高さを維持するために使うこともできる。

.float-only::after {
    content: "";
    display: block;
    clear: both;
}

49. all

すべてのプロパティを一気に設定できる。親要素からすべてのスタイルを継承したいときや、逆に継承したくないとき、デフォルトの見た目にしたいときに使える。

50. touch-action

要素に対して可能なタッチアクションの種類を制限できる。たとえば、ズームしてほしくないとか、縦方向のスクロールを制限したいとかそういう場合に便利。Cookie Clickerのタッチ領域にこれを指定してほしいと何度思ったことか。

まとめ

CSS難しい……。MDNの解説ってプロパティごとに内容の質にけっこうばらつきが大きいんですね。

参考

https://developer.mozilla.org/en-US/docs/Web/CSS
https://www.w3schools.com/cssref/

Happy Hacking!

この記事はブログにも投稿しています。

HTMLとは？

2018-07-23T07:24:21+09:00

HTMLとは何かというのを分かりやすくいうと、Webサイトのページに何を表示するかを指定するための指示がまとめられたテキストです。実際にWindowsであればメモ帳などでも作れます。

とはいえ何も知らない初心者からするとそれでもよくわからないと思いますので、具体的な例を少しあげてみます。

単なるテキストを表示する

例えば単に

HTML

というテキストを書くと、Webサイトのページにも単に

HTML

と表示されます。

テキストを太字にする

次に

HTML

と書くと、下記のように太字で表示されます。

HTML

画像を表示する

文字だけでなく、画像を表示したい場合は

のように書くと、下記のように画像が表示されます。

まとめ

このように、ページに表示したいものをルールに沿ってまとめて書いたものがHTMLです。他にもリンクやボタンなど、普段あなたがWebサイトを閲覧する際に見たことのあるすべてのものをHTMLによって表示することができます。

たとえばGoogle Chromeでサイトを見ている場合、右クリックメニュー→ページのソースを表示でそのページのHTMLを見ることができます。

上記であげた例以外にも、かなり多くの機能があります。ただ、普段良く使うHTMLタグはそれほど多いわけではないので、やりたいことを調べつつHTMLを書いていくようにすれば徐々にしっかりしたサイトを作れるようになっていくと思います。

ここではHTMLの概念のみの紹介ととどめさせていただきますが、１ページまるまるのHTMLの書き方などは「HTML5 書き方」でヒットする下記などが参考になります。
HTML5でWebページを作成する時用の必要最小限をまとめたシンプルなテンプレート（IE8以下も配慮） | コリス

また、書いたHTMLをサーバーにアップしてWeb上で公開するためには、レンタルサーバーであればFTPやSFTP, SCPでアップロード、その他GitHub、HerokuなどのWebサービス用プラットホームであればGitを使って公開、Firebaseであればコマンドで公開、など、色々な方法がありますので気になったものを調べてみてください。