HTML5とエロアプリの関係

※このページはアダルトコンテンツを含んでいます。18歳未満の方は退室して下さい。

18歳未満の方はコチラ

概要

今回のテーマはHTML5とエロアプリです。
スマホとHTML5、ひいてはエロアプリとHTML5には、とても深い関係があるのです。

今回の記事では、「なぜHTML5とエロアプリが深い関係にあるのか」を考えていきたいと思います。

そのためには、まずHTML5という技術とエロアプリが置かれている現状について知っておく必要があります。

HTMLの正式名称・読み方

HTML（エイチ ティー エム エル）は略称であり、正式名称は下記となります。

HyperText Markup Language

正式名称で呼ぶ事は滅多にありませんが、知っておいて損はありませんよね。

ちなみにHTML5の5の読みは『ファイブ』となります。

HTML5とは一体どんな言語なのか

アニメーションの再現やタッチデバイスに対応した新しいHTMLの規格の事をHTML5と言います。特にJavascriptとの親和性が高く、フロントエンドエンジニアのニーズが一気に高まりました。

まさしく、Flashで実現していた事を出来るようになりました。

これにより、FlashエンジニアはHTML5エンジニアにジョブチェンジ！しなくてはならない事態も発生しました。

HTML5はマークアップ言語としてWebサイトを適切に構造化する事ができます。
例えば、「ここはヘッダーですよー」「コンテンツですよー」「フッターですよー」などです。

また、デザインとの分離を行える事も特徴です。より厳密に構造とデザインを分離しています。

構造はHTMLファイル、デザインはCSSファイルという具合に、これまでの分離をより一層強める事に成功しています。

ちょっと寄り道！CSS3とは？

ここで少し寄り道をしましょう。前項で出てきた『CSS』とは、『CSS3』とは一体何でしょうか？

CSSは、Cascading Style Sheetsの略で、HTML文書のデザイン部分を定義・指定するための仕様や技術の事です。「スタイルシート」や「シーエスエス」と呼ばれています。

HTMLファイルだけでデザインを指定する場合、htmlファイルにインラインで指定をしなければいけませんでした。

これによって、html文書が複雑化して、ソースコードを目で追いづらいファイルになっていたのです。
また、一要素に対して、デザインを個別でインライン指定しているため、いざデザインの変更があった時に非常に手間がかかっていたのです。

しかし、CSSの登場によってこれらの問題点は解決されました。
文書構造はHTML、デザインはCSS、という具合に文書の分離が可能になったのです。

また、デザインの変更時もセレクタ名毎にCSSファイルでデザインを指定出来るため、共通部分は一括で編集出来るようになりました。

今でこそCSSを使ってWebサイトを装飾するのは当たり前の時代となりましたが、当時としては革新的な技術だったのです。

そして、CSS3の登場です。
CSS3では、これまでのCSS2.1では実現出来なかったような装飾が可能となったのです。


これまでPhotoshopでデザインしたPSDファイルをスライスでバラして、HTML＋CSSで苦労してコーディングをしていた作業が、CSSで実現出来るようになり格段と楽になったのです。

しかし、一方ではCSS3で簡単に実装で出来るようになったため、影やグラデーションを用いないフラットデザインが流行した、とも言われています。

HTML5のロゴの意味とは

W3CがHTML5のロゴは発表した際に、そのロゴデザインが注目を集めました。その理由は、人々が想像していたロゴのイメージを大きくかけ離れていたためです。

もちろん、それを受け入れて賛辞の言葉を発する人もいましたが、批判的なコメントも多く見受けられたように思います。

なんでHTML5のロゴのデザインがそんなに重要なのか。それは自身のWebサイトで表示する人がいるためです。HTML5を利用してWebサイトを制作した場合、その証明としてHTML5のロゴを画像を表示する事が可能なのです。

見る人が見れば「最新のHTML5を用いている」という事が一目でわかるメリットがあります。

また、HTML5のどの機能を使っているのかをセレクトボックスで選択して、ソースコードをアウトプットする機能があり、W3Cも本格に普及を進めています。

W3C HTML5

しかし、このロゴは見れば見る程に不思議な魅力があります。
何かを表しているのでしょうか？

実は、この件についてQ&Aコーナーにおいて公式はコメントしています。


HTML5のロゴは礎石を表していたんですね。
建物を支えるために重要なのが礎石ですが、Webサイトを支える、Webを支えるという意味が込められているのでしょうか。

HTML5の正式策定期間

HTML5が発表され使用できるようになったからと言って、即すべてのWebサイトをHTML5化するのは不可能です。

ですので、2014年までを正式勧告期間としています。

HTML5以外のHTMLで記述されたソースを書き換えるのは時間がかかりますし、HTML5化する事によるメリットを感じていない人も大勢います。

また、ユーザーがインターネットを閲覧するために使用するWebブラウザの問題があります。
いくらWebサイトがHTML5化しても、ユーザーが利用するWebブラウザがHTML5に対応していないと意味がないためです。

現在では、徐々に旧式のブラウザをサポートしないWebサービスも増え始めており、HTML5が徐々に浸透しているのは事実です。

この波に、エロアプリ業界も乗ったと言っても良いでしょう。

エロアプリを取り巻く環境

ネイティブアプリマーケットについて

スマホでエロアプリをするには、Webブラウザ上でないといけません。ことiPhoneでは特に。

何故ならば、エロゲー・エロアプリに分類される類のものはStoreの審査を通らないためです。Google Playはまだ緩いですが、それでも完全な「エロ」はダメ。App Storeはもっと厳しいですよね。

これは、スマホートフォン専用のアプリとしてリリースするため、公式マーケットの審査を受けないといけないためです。

エロ系のニーズは高いですが、許してしまうとマーケットの質が下がってしまいます。

当初のGoogle Playはエロアプリに対して比較的緩かったのですが、App Storeが厳しい措置をとる事によって、そちらに合わせるように厳しくなりました。

Yahoo!ショッピングと楽天モールのように、違う路線を進むのもアリだと思うのですが、そういうわけにもいかないようです。
（そもそもAndroid OSは汎用性が高い事から人気が出たわけですし。）

Webブラウザ

ではどうやってエロアプリをすればいいのか？
スマホアプリではダメという事は、Webブラウザ上で起動アプリでないとダメです。
これは、いわゆる「ウェブアプリ」に分類されるアプリケーションを指します。

私達が、そしてアナタが今インターネットを利用するのに用いているアプリケーションが「ブラウザ」です。

わかりやすく言うとInternet Explorerなどを代表とするアプリケーションです。


要するに、ブラウザ上で起動するエロアプリケーションをプレイすればいいのです。

Flashという技術

さて、話を進める前に一応Flashについても触れておこうと思います。
何も、スマートフォンが普及してからウェブアプリが台頭してきたわけではありません。

パッケージ版のゲームを主にプレイしていたのは、もう少し前の話で、スマホが普及する以前からブラウザ上でゲームを楽しむのは主流でした。

それは、Adobe社が提供していた技術、Flashを用いたゲームです。
Flashという言葉自体は有名ですので、聞いた事のある方が多かったのではないでしょうか？

このFlashというのはとても流行って、一時期は大手企業のサイトならばFlashを使っていないサイトを探す方が難しいぐらいでした。
しかし、今は見かける事は少ないです。

では、何故Flashは衰退してしまったのでしょうか。
アニメーション制作でも、ゲームプレイでも、インタラクティブなUIの設計においても、とても素晴らしい技術だったにも関わらず。

それは、Apple者のとった措置によるものが大きいです。
Appleが提供しているiPhone・iPadはFlashに対応していません。（Androidは対応）

iPhoneがFlashに対応していない理由

実は、Flashが衰退する前から新しくHTML5・CSS3という新しいバージョンが浸透しようとしていたのです。

その当時はまだ浸透していませんでしたが、とても革新的な技術であった事は確かです。これまでFlashでしか実現出来なかった事が、より手軽に出来るようになったのです。

また、Flashには非常に大きなデメリットがあり、こちらもずっと懸念されていました。
それは、クローラーがFlashの中身を理解出来ない、という点です。

詳しくは、下記のブログで丁寧にまとめておられます。
リンクを貼っておきますので興味のある方は是非。

iPhoneはなぜFlashに対応していないのか?

HTML5新技術

HTML5のDOCTYPE宣言

HTMLファイルを書く時には、冒頭で必ず宣言をします。
この宣言というのは、「HTMLの〇〇を使用します」という宣言であり、ウェブブラウザに伝えるという役割があります。

という事はHTMLをHTML5で書く際は「HTML5を使用します」という宣言をしなくてはならないのです。

このドキュメント宣言（DOCTYPE宣言）は、これまでの記述では中々複雑なものでした。

プロフェッショナルの方でも強者のコーダーはこのあたりも暗記していたかもしれませんが、定型文であるため通常暗記するようなものではありません。それだけ長ったらしい宣言だったのです。

しかし、HTML5のDOCTYPE宣言はかなり簡略化されています。
下記がHTML5のDOCTYPE宣言例です。


ご覧いただくと、ドキュメント宣言がかなり簡略化されたのがおわかりいただけると思います。

ドキュメント宣言はエロ・エロアプリ系のサイトでも必要ですので、HTML5でエロアプリサイトを制作する場合は、ちゃんと宣言するようにしましょう。

html要素

ドキュメント宣言と併せて、html要素を記載しましょう。ドキュメント宣言だけでは、htmlファイルだと定義はされません。

html要素内には、聞きなれたhead要素とbody要素が入るのはおわかりですね。
そして、head内直下にはエンコードの指定が入ります。


こちらもかなりシンプルになりましたね。
このあたりは定型文のようにセットで覚えても良いと思います。

hgroup要素

これはhタグと呼ばれる見出しをセクション毎にグループ化出来る新要素です。

例えば、これまでのWebサイトのhタグのマークの仕方は、ロゴ・サイトタイトルにh1を使って、各カテゴリーの見出しによってh2を使って、記事タイトルにh3を使って…といった具合にサイト全体でhタグを振り分けるような形で使用されてきました。

しかし、デザインがコンテンツに追いついていないと言われており、昨今のコンテンツ重視型のWebサイトに対応する事が出来ませんでした。

hgroup要素を使えば「大見出し」「副題」「小見出し」といったように、1セクションで必要とされる構成を実現する事が可能です。

hgroup要素内では、h1～h6以外の要素を使用する事が出来ないため、hgroupはhタグだけに使う、と覚えましょう。

また、HTML5で宣言をしていても、hgroupを必ず使用しなければいけないわけではなく、HTML5で宣言されていてもhタグがグループ化されていないサイトはまだまだ存在します。


エロアプリでは副題がついているケースがほとんどですので、hgroupで分けて記載するようにしましょう。

header要素

これまでブロック要素であるdivを使って表す事が多かったですが、header専用の要素としてheaderが追加されました。

基本的には、サイトのロゴ、タイトル周りに使う事になると思います。
見る人にとっても検索エンジンにとっても、『ここはヘッダーである』という具合に文書構造的に示す事が出来るのです。

また、ロゴ以外では目次や検索フォームなどを内包している事が多いでしょう。
前述したhgroupとの併用も十分に考えられます。

header要素内にheader要素、後述するfooter要素を内包する事は出来ません。
エロアプリのサイトでもheaderは当然ありますので、使うようにしましょう。

footer要素

前項のheader要素と同様に、これまではdivなどでfooterを表してきましたが、footer要素が追加されました。

footer要素では、リンク集や著者表記などが通常使用される事が多いです。また、グローバルナビやサイドナビとは別に、フッターナビが入る事も想定されます。

近年ではfooterエリアのテンプレートにサイトマップを表示する事も多く、footerの常重要度も年々上がってきているように思います。

お洒落は足元から、と言いますが、Webサイトのお洒落も足元からなのです。
footerだからと言って、軽視する事がないようにしましょう。

footerが重要なのは、エロアプリ業界でも同じです。footerにエロアプリのリンク集などを表示するケースは多々あります。

nav要素

これまでdivなどで対応していたナビゲーション専用の属性なのがnav要素です。
Webサイト一つとってみても、ヘッダーナビゲーション、サイドナビゲーション、フッターナビゲーションなど、様々なナビゲーションがあります。

このnav要素は、その中でも最重要なナビゲーションに使用する必要があります。
セオリー通りでいけば、主にヘッダーに位置するグローバルナビゲーションを呼ばれる 部分です。

それ以外のナビゲーションにはnav要素を用いずに、divなどの要素で対応するようにしましょう。

navの中には、従来通りリンクの集まりを表す際に使用するulタグを使用して下さい。
また、ナビゲーションの性質上、nav要素にはaタグが内包されている必要があります。

エロアプリのサイトでは、一昔前に比べるとコンテンツが多岐に渡るようになりました。
これは、エロアプリの進化、活性化が起因していますが、サイトが複雑になりがちです。

グローバルナビゲーションをしっかり示すという意味で、nav要素を使うようにしましょう。

aside要素

この要素は、メインコンテンツと関連性がない、関連性が薄いコンテンツに使用します。
例えば、広告のadエリアや関連性の低いブログのウィジェットエリアなどです。

コンテンツと関連性が薄い事を示すメリットは、検索エンジンがコンテンツとの切り離しをしてくれる事にあります。

例えば、そのページで訴えたいキーワードと、関連性のないキーワードが混在している場合、本来伝えたい部分の効果が弱くなってしまう恐れがあります。

そういった時は、関連性のない部分にasideを使用する事により、関係がないという事を文書構造レベルで自ら伝える事が出来るのです。

また広告以外でも、補足コンテンツ部分などに使用されます。

エロアプリサイトでは広告エリアは必須です。
aside要素は必須だと言えるでしょう。

figure要素

図面・写真・ソースコードなどに用いられる新しい要素です。自己完結しているコンテンツを表します。

気を付けなければいけないのは、補足するような別ページがあったとしても、figure要素は完結する形でなければいけない、という点です。

この自己完結というのが使い方をややこしくしている要因だと考えられていますが、ここの差別化がなければ、figure要素を新しく追加した意味もありませんので難しいですね。

中々使いどころが難しいため、figure要素を使用しているサイトはまだまだ少ないです。普及には時間がかかりそう。

ですので、よくわからない場合は無理して使う必要はないかもしれませんね。
考え方次第では便利な要素。


ソースコードを見た時にわかりやすくはなりますが、一手間増えてしまうという考えできます。前述した通り、使用については任意で構わないと思います。

section要素

HTML5を理解する上で、section要素とarticle要素でつまづいてしまった人も多いのではないでしょうか。
section要素とarticle要素を理解するのは難しいのですが、慣れてしまえばどうという事はありません。

HTML5の追加要素の中でも、この二つは重要な要素だと位置付けられています。把握するまではもどかしさが残りますが、ここは少し頑張って理解していきましょう。

section要素は、わかりやすく言うとコンテンツの階層管理を表します。つまり、章や節を表しているのです。

従来の章や節は、hタグの区切りなどで表していました。
hタグのみの区切りだと、そのhタグの見出しデザイン的に区切られているのはわかるのですが、文書構造的に区切られているわけではなく、同じ階層にあるフラットな関係性になります。

前述したように、section要素は章や節を示すものですので、hタグを内包する必要があります。なぜなら、章や節の冒頭では、そのセクションを示す見出しが必須だと言えるからです。

また、章や節の方に引っ張られてしまいがちですが、階層管理の表現でもある事を忘れてはいけません。
要するに、sectionの中にsectionが内包されていても良いわけです。それが階層管理で表現すべき部分であるのなら。

たとえば、多くの場合はh2という大きな章があれば、その章の中にはh3で見出しを付けられたセクションが複数あります。

h2そのものは章や節に該当しますが、それぞれのh3の小見出しも章や節に該当します。 この場合だと、h2を大きくセクショニング、そしてh3のそれぞれの章もセクショニングする事が可能なのです。

これでいくと、HTMLとして文書構造として、章や節を表現する事が可能なのです。

注意しなければいけないのは、section要素は、レイアウトを表現するために使用するのは望ましくないという点です。
例えば、大きなカラム構成を実現するために、sectionを用いてはいけない、という事です。


こうやってサンプルを見ればわかりやすくなると思います。
section要素は、使っている方も多く、ブログシステムやデザインテンプレートもsectionやarticleが使われているものも多く見受けられますので、押さえておきましょう。

article要素

前項ではsection要素の説明をしました。
この項ではもう一つの重要な要素、article要素について説明したいと思います。

section要素もarticle要素も単体で見れば、さほど難しくはないのですが、この2つが同時に追加された事による使い分けで複雑に感じてしまいます。

article要素は、その一つが独立としたコンテンツとして成り立っている場合に使用します。文字だとわかりづらいかもしれませんが、よく思い出してみて下さい。
section要素は、章や節に使用するものでした。

こう考えると全く別なものだという事がわかります。
章や節は、独立したコンテンツとしては成立しないためです。

一番わかりやすい例が、トップページの新着情報の記事です。
通常、トップページの新着情報は3件～程度表示される事が多いのですが、それぞれは新着情報という大きなエリアの、独立したコンテンツのはずです。

こういった一記事に対してarticle要素は使用する事が出来ます。
新着情報で例を出しましたが、ブログの記事もそれに該当します。それぞれの記事は、一つ一つが独立したコンテンツなためです。

ですので、一覧ページの場合は、表示件数にもよりますが、複数のarticle要素を使用します。

判断する一つの基準として、それがRSSフィードで流れて不自然なコンテンツではないか、ソーシャルでシェアされた時に不自然なコンテンツではないか、それを意識しましょう。


ちょっとした例外（？）として、ブログのコメント欄などもarticle要素で囲います。

エロアプリの場合は、エロアプリの一つ一つのレビューがフィードに流れるものと想定して下さい。

という事は、新着情報やブログ記事の例と同じように、一覧では一つのエロアプリに対してarticle要素を使用すれば良いという事となります。

HTML5で変更があった要素

aタグのtarget=”blank”

何年も前から別ウインドウで開くリンクの時は重宝していたaタグのblank。実際に私が運営しているサイトでも、外部リンクの場合は必ず別ウインドウで開くようにしています。

ある段階からtarget=”blank”は非推奨になってしまいました。非推奨になったからと言って使用できないわけでもありませんが、Javascriptで対応したりする人もいました。

多くの場合が非推奨になってもtarget=”blank”を使い続けていました。（私もその一人です。）

リンクを別ウインドウで開くためだけにわざわざJavascriptを実装するのが面倒でしたし、それはそれで現実的だと思えなかったためです。

しかしながら、HTML5でtarget=”blank”が再び非推奨から復活したため、引け目を感じる事なく使用する事が出来るようになったのです。

address要素

コピーライトでも使用でしていたaddress要素ですが、HTML5からは連絡先情報と限られるようになりました。

また、使う場所によって意味が変わるようになりました。
例えば、article記事中に使用されると、その記事の執筆者の連絡先情報を示します。
そうでない場合はWebサイトの管理者の連絡先情報を示します。

1つのWebサイトを、複数の執筆者・運営者で運営する事は、決して珍しい事ではありませんので、これで使い分けが出来るようになったのです。

b要素

strong要素が一般的に使用されるようになり、あまり見かけなくなったb要素ですが、HTML5からは重要性を持たないが差別化したい時に用いる要素になりました。

重要性がある時はstrong要素などを使って、その他特定の属性に該当はしないが文字を強調したい際にb要素を使いましょう。

無理して使う必要はないかもしれませんが、strong要素を使う程ではないけど強調したいケース、というのはない事もないです。

エロアプリプラットフォーム

使い手ばかりでなく、技術やデバイスが変わると開発者も悩んでいます。
そんな時のために、より開発しやすい環境を簡単に構築できるプラットフォームがリリースされています。

ティラノ・スクリプト

ティラノ・スクリプト

ライセンスがオープンソースになっているゲームエンジン。
プログラミングの知識はあまり必要とせず、簡単な処理でゲームを開発する事が出来る。
商用も可能との事。

サンプルもあるので見てみるベシ。

if-engine

if-engine

HTML5とJavascriptで実装されているノベルゲームエンジン。iOSとAndroidでも動作する。

デモ動画では、ノベル系のエロゲ…だろうか？動作してプレイしている様子を伺える。また、スマホとタブレットで動作している事を動画で確認する事が出来る。

まとめ

新しい技術を採用しないと機能しない程、スマートフォンというのは革新的なデバイスなのです。逆に言えば、技術の進歩がなければ誕生しなかったデバイスとも言えます。

もし、エロアプリ開発を考えている人がいたら、HTML5・CSS3・Javascriptを勉強してみてはいかがだろうか。

紙芝居程度のノベルゲーなら、すぐ作れるようになるでしょう。

ダウンロードはこちら

• 
• 
• 
• 
• 
• 
• 
• 
• 

シェアはこちらから。

関連記事