SlideShare a Scribd company logo
短期間+大規模ゲーム開発でも破綻
しない HTML・SCSS




                株式会社 Aiming
                   岩野 尚吾
自己紹介
• @shiwano 
• HTML版ロードオブナイツのプロジェ
 クトには、6月中旬からアサイン

• ゲーム開発への本格的な参加は、今回
 が初めて

• それまでは普通の Web 製作で、マー
 クアップとかやってた
本筋を進める前に
HTML版ロードオブナイツ
   について軽く説明
もともとは Unity 製の
スマートフォン・ネイティブアプリ!
  (最近 Android 版も出た)
それを HTML5 に移植したのが
 HTML版ロードオブナイツ
開発時に伝えられていた
   要件は―
マルチデバイス対応!



• PC版とモバイル版を同時リリース
  → Mobage と Yahoo! Mobage で

• モバイル版はもちろん Android にも対
 応(2.2から)
IE8 対応!




    やはり 20% 超の
ユーザーベースはふつう切れない
デザイン一新!

• PC版もモバイル版も新規デザインに
• モバイル版は縦持ち用
• ネイティブアプリをそのままコピーす
 ればいいというわけではない
  → UI 作り直し!!!
Unity版


         HTML・モバイル版
Unity版
         HTML・PC版
そして、なにより…
スケジュール最優先!


• なにより期日優先!!!!
• タイトなスケジュール
  → 自分がアサインされてから、
    リリース予定日まで 2ヶ月しかない…

• 社内で優先度が一番高いプロジェクトに
ということで、
開発はすごく大変でした
今日のテーマ


• そういう厳しい開発の中で、プロダク
 トを完成させるために、何を諦めて、
 何を諦めなかったか

• 主にマークアップ方面を担当した者の
 視点から
ゲーム開発で大切なことって何だろう?
期日を守ることです
(今回のプロジェクトでは)
人は何かの犠牲なしに
何も得ることは出来ない
限られた工数の中で
   期日を守るために
まず、何を犠牲にしたのか?
諦めたもの・その1


セマンティック・ウェブ
セマンティック・ウェブとは




• Webサイトの各記述の意味を適切に捉
 え、正しいタグやメタデータを付与し
 ていきましょうという考え方

• HTML5 では特に重視されている
セマンティック・ウェブとは




• 付与したメタデータをもとにコン
 ピュータが情報を収集・解釈できた
 り、ハンディを持つ人たちが情報にア
 クセスしやすくなる
具体的にどうしたの?
• ワイルドマークアップ 
• ID やクラスの命名規則は、ほとんど決
 めてない

• タグは基本 div(たまに ul, li)
  →   a タグも使ってない
  →   HTML5 新規のタグは機能的に
      必要なもの以外は使わない
  →   アウトライン?
      セクショニング・コンテンツ? なにそれ
で、どうだった?

• まあ、問題ない
  →   もともと、アプリの性質上、それほど
      アクセシビリティに気を配る必要ない
  →   基本、DOM さえあればいい(えっ
  →   後ろめたい気持ちはある

• もっとゲームに特化した意味付けをで
 きるスキーマがあってもいいのでは?
諦めたもの・その2


一般的な段組レイアウト
一般的な Web サイトでは

• HTML の要素順 + スタイルシート の
 float プロパティを使った段組レイアウ
 トが一般的

• 最近だとそれに加えて、「レスポンシ
 ブ・ウェブ・デザイン常識だよね」と
 いう感じ
しかし、ゲームの UI って複雑
複雑な UI の一例
縦横無尽にクリックできる!
Web サイトと同じように
 レイアウトを組むのは
      難しい
具体的にどうしたの?

• position: absolute; 多用
  → どこもかしこもこれで要素の
    位置を指定している

• z-index も多用
  → マップタイルの重なり制御など
    かなり複雑化している
で、どうだった?

• ぜんぜんレスポンシブじゃない
  → でもゲームってそんなものかも

• 工数削減にはなった
  → ただし、メンテナンス性は微妙…

• エディタで CSS を編集して、ゲームの
 UI を作るのは筋が悪いのでは?
  → GUI ツールの必要性をちょっと感じた
諦めたもの・その3


画像アセット管理
画像組み込みのフロー


PSDで
         画像    マーク
元素材                  コミット
        スライス   アップ
 作成
画像組み込みのフロー


PSDで
         画像    マーク
元素材                  コミット
        スライス   アップ
 作成


        この部分を自動化しないとつらい!
アセット管理の重要性
• オンラインゲームの開発は初回リリー
 スで終わりではない

• 継続的に行われるアップデートで、ど
 のアセットが必要となるか、管理する
 ことがとても大切!
  → 普通の Web サイトでも大切だが、
    ゲームだと特に重みを増す

• テクニカル・アーティストの職域
具体的にどうしたの?




• マンパワーでなんとかする!!! 
で、どうだった?




• やっぱり事故る!!! 
諦めたもの・その4


 IE8 対応
当初は、タスクとして見積
   もっていたが…
• スケジュールの都合で、モバイル版のデ
 ザインをそのまま、PC版に持ってくる
 ことに

• CSS も IE8 対応にするために、余分な
 工程をたくさん踏まねばならなかった
  → Retina 対応と IE8 対応の矛盾

• そもそも JS が動かない
ということで、IE8 は
 対応しないことに
で、どうだった?

• 開発的にはすごくハッピー!!! 
• 運営的にはやはり潜在的な顧客が減る
 ので微妙…

• スケジュールのために、一度でも IE8
 対応をスコープから外すと、もう二度
 と復活しない
諦めたもの一覧


 • セマンティック・ウェブ
 • 一般的な段組レイアウト
 • 画像アセット管理
 • IE8 対応
じゃあ、それらを諦めて、
 代わりに何やったの?
大切なのは、期日
つまり、重視すべきは
開発効率!
メンテナンス性:開発効率
      ↓
     1:3
こんなことをやりました

• 開発環境でのマークアップ管理
• 画像最適化
• SCSS + Compass の導入
• PC版・モバイル版の出し分け準備
• 実装の把握
やったこと・その1


開発環境でのマークアップ管理
何が問題だったの?


    デザイン確認用のマーク
    アップは、Rails の
    public ディレクトリで管
    理していて煩雑だった
何が問題だったの?


      この部分が
      必要なだけなのに
      DRY に書けない
どう対応したの?



• デザイン確認用のマークアップに、専
  用のルーティングを用意して、Rails で
  表示できるようにした

• http://localhost:3000/pc/map/
何がよかった?

• 開発環境はひとつだけというのが明確
 になった
  → デザイン用に環境を分けるのは、
    よくないと思う

• DRYレイアウトファイルに共通部分を書ける
   →
      に書ける

  → Rails のヘルパーメソッドが使える

• 実装するときも組み込みやすい
  → PC版の開発速度が上がった
やったこと・その2


画像最適化
画像の最適化大事

• 特にモバイル版 
• 3G 回線経由だと、画像のファイルサイ
 ズがボトルネックになりうる

• また、高解像度ディスプレイで綺麗に
 見えるよう画像も高解像度のものを使
 わなければならない

• 両立は大変! 
高解像度ディスプレイ対応




 横 720px 用にデザインされた画像を
      縮小して配置している
どう対応したの?


   • モバイル版重視
   • Chrome の開発者ツール
    で読み込んでいる画像サ
    イズを確認しながら、丁
    寧に最適化を行った
何がよかった?

• モバイル版の画像サイズを抑制できた
  → 同等の機能で実質解像度的にも
    大した差はない中で

• モバイル版の総画像サイズ
  → 5.3 MB

• PC版の総画像サイズ
  → 6.6 MB
最適化ツールなど

• ImageOptim (画像ファイルサイズ最適化)
  → http://imageoptim.com/

• ImageAlpha (透過を保ちつつPNG高圧縮)
  → http://pngmini.com/

• CSSスプライト
  → 類似の画像をまとめるなど
    必要な部分だけ
やったこと・その3


SCSS + Compass の導入
+

やっぱり便利!
簡単に説明すると―
SCSS とは

 • CSS の拡張メタ言語
  → CSS のスーパーセット

 • 便利な機能がたくさん
  →   変数
  →   演算式
  →   Mixin
  →   Function
Compass とは

  • SCSS のフレームワーク
  • CSS3 の記述を簡潔にする
   Mixin が多数用意

  • Web 制作に便利な再利用可
   能パターンを多数用意
   → CSS スプライトの
     自動生成など
最近は、紹介記事も増えて
 業務で使う人も多い?
(デファクトスタンダードになってほしい)
具体的にどんな感じで
  書いてるのか
たとえば、アイコン



      • data 属性の値
       で、アイコンが
       差し替わる
このような SCSS を使用
モバイル版のマップ


    • マップタイルのサイズ
     は 42px!
PC版のマップ


   • マップタイルのサイズ
    に 64px!

   • モバイル版よりちょっ
    と大きい
このような SCSS を使用




  変数の値を調整するだけ
SCSS ファイルの
トータルのコード行数は
    16685
展開される CSS ファイルの
 トータルのコード行数は
     32712
(expanded style, line_comments OFF)
何がよかった?

• 開発速度アップ!
  → コード行数の大幅削減
  → PC版の開発をしているときに
    マップ部分のデザインが一瞬で終わった

• DRY に書けた
  → PC版・モバイル版のコードを共通化
  → Compass の Mixin 便利!
やったこと・その4


PC版・モバイル版の
  出し分け準備
PC版・モバイル版のデザインを
   効率的に管理したい!
要件について整理

• HTML版ロードオブナイツは
 Single Page Application
  → HTMLファイルはたった一つ
  → CSSファイルは少なければ少ないほどよい

• 現在は、PC版・モバイル版だけだが、将
 来的に新しいバージョンが追加されるこ
 とがありうる
  → 適切なディレクトリ分けが必要
よって、SCSS は
 このような形に
SCSS のディレクトリ構成



• modules
   → 共通で使う mixin や 変数などを
     まとめたディレクトリ

• partials
   → プラットフォームごとに使う
     SCSS ファイルをまとめたディレクトリ
SCSS の中身




 このように import して
最終的に1ファイルに出力!
View(HTML) は
  このような形に
View のディレクトリ構成




• app/views 以下に、pc と mobile と
 いうディレクトリを作成
  → View ファイルはすべて ERB 形式で記述
View の中身の例




  ゲームで使う HTML は
独自ヘルパーメソッドを使って
    テンプレート化
テンプレートの例




テンプレート化された HTML は、
  このように Mustache 化も
    されていたりする
そして最終的には
全 2766 行数の単一のHTML
   ファイルとして出力
何がよかった?

• この規模のゲームを Single Page
 Application として運用したこと
  → モバイル版でも、特にパフォーマンス
    に問題はなかった

• PC版とモバイル版のデザインを適切に
 出し分けることができた

• 新しいバージョンを追加する作業が容
 易になった
やったこと・その5


実装の把握
何が問題だったの?


• 基本、DOM 依存が激しいゲーム
  → それ関連のバグが山ほどある

• JS 側のバグか HTML・CSS 側のバグ
 か、判別もけっこう大変
例えば、こんなバグチケット!
どう対応したの?

• ペアプロする!
• JS のコードはなるべく読む
  → 特に View 側
  → Github 見やすくて便利

• 自分でマークアップして、自分で実装
 のパターンも
何がよかった?

• 結果的に工数削減!
  → コミュニケーションコストが減るため

• デザイン側のバグ、JS 側のバグの対
 応・判別が容易

• 自分の関われる範囲が増えるのは、や
 はり嬉しい!
結果、期日はどうなったの?

• プロジェクト初期に、想定されていた7
 月中旬に出すというのは守れなかった

• 8月3日に Mobage 審査に出すという
 約束は守れた
  → 途中審査落ちるなど色々ありつつも、
    8月中に何とかリリースできた
ということで、まとめ!
まとめ
• プロジェクトの性質によって、何が大
 切かよく変わるので、みんなしっかり
 考えよう

• Web 制作のセオリーをそのまま無批判
 にゲーム開発に持ってくるとつらい

• アセット管理大事
• SCSS + Compass みんな使おう
あと、何より―
ゲーム開発って、面白い!
ご清聴ありがとうございました
最後に、このプロジェクトの
   管理手法について

• 弊社開発者ブログに記事があるので、
 ご覧になってない方は是非

• JS 大規模プロジェクトの管理手法 ‒
 ロードオブナイツの実例紹介
  → http://goo.gl/JFrlt

More Related Content

What's hot

エンジニアの為のWordPress入門 〜WordPressはWebAppプラットフォームです〜
エンジニアの為のWordPress入門 〜WordPressはWebAppプラットフォームです〜エンジニアの為のWordPress入門 〜WordPressはWebAppプラットフォームです〜
エンジニアの為のWordPress入門 〜WordPressはWebAppプラットフォームです〜
Yuji Nojima
 
業務アプリケーションにおけるモダンWeb開発の現状ーHTML5開発って簡単なの?
業務アプリケーションにおけるモダンWeb開発の現状ーHTML5開発って簡単なの?業務アプリケーションにおけるモダンWeb開発の現状ーHTML5開発って簡単なの?
業務アプリケーションにおけるモダンWeb開発の現状ーHTML5開発って簡単なの?Fumio SAGAWA
 
Win32 APIをてなずけよう
Win32 APIをてなずけようWin32 APIをてなずけよう
Win32 APIをてなずけよう
Kouji Matsui
 
インタラクティブコンテンツにおけるHTML5とFlash
インタラクティブコンテンツにおけるHTML5とFlashインタラクティブコンテンツにおけるHTML5とFlash
インタラクティブコンテンツにおけるHTML5とFlash
Yasunobu Ikeda
 
カヤックHTMLファイ部のUI・UX (第57回 HTML5とか勉強会 / 2015.5.19)
カヤックHTMLファイ部のUI・UX (第57回 HTML5とか勉強会 / 2015.5.19)カヤックHTMLファイ部のUI・UX (第57回 HTML5とか勉強会 / 2015.5.19)
カヤックHTMLファイ部のUI・UX (第57回 HTML5とか勉強会 / 2015.5.19)
Shin Fujisawa
 
HTML5でスマートフォン開発の理想と現実
HTML5でスマートフォン開発の理想と現実HTML5でスマートフォン開発の理想と現実
HTML5でスマートフォン開発の理想と現実Takumi Ohashi
 
Nespのコード生成
Nespのコード生成Nespのコード生成
Nespのコード生成
Kouji Matsui
 
我が家のフロントエンド開発事情
我が家のフロントエンド開発事情我が家のフロントエンド開発事情
我が家のフロントエンド開発事情
Naoki Yamada
 
Static Web AppsとBlazor WebAssemblyのすすめ
Static Web AppsとBlazor  WebAssemblyのすすめStatic Web AppsとBlazor  WebAssemblyのすすめ
Static Web AppsとBlazor WebAssemblyのすすめ
TomomitsuKusaba
 
HTML5 アプリ開発
HTML5 アプリ開発HTML5 アプリ開発
HTML5 アプリ開発
tomo_masakura
 
2014年メディア工房勉強会 第1章「Webの仕組みとHTML5」
2014年メディア工房勉強会 第1章「Webの仕組みとHTML5」2014年メディア工房勉強会 第1章「Webの仕組みとHTML5」
2014年メディア工房勉強会 第1章「Webの仕組みとHTML5」Takashi Endo
 
JavaScriptと共に歩いて行く決意をした君へ
JavaScriptと共に歩いて行く決意をした君へJavaScriptと共に歩いて行く決意をした君へ
JavaScriptと共に歩いて行く決意をした君へ
Muyuu Fujita
 
無償版Visual StudioでいろいろWeb開発
無償版Visual StudioでいろいろWeb開発無償版Visual StudioでいろいろWeb開発
無償版Visual StudioでいろいろWeb開発
Narami Kiyokura
 
Word pressはじめの一歩 テーマ作成ハンズオン
Word pressはじめの一歩 テーマ作成ハンズオンWord pressはじめの一歩 テーマ作成ハンズオン
Word pressはじめの一歩 テーマ作成ハンズオン
Hidetaka Okamoto
 
BuddyPressで街のポータルサイトを作ろう
BuddyPressで街のポータルサイトを作ろうBuddyPressで街のポータルサイトを作ろう
BuddyPressで街のポータルサイトを作ろう
松田 千尋
 
モダンWeb開発ワークショップ
モダンWeb開発ワークショップモダンWeb開発ワークショップ
モダンWeb開発ワークショップ
Staffnet_Inc
 
Word press初心者が 基本アーキテクチャを ざっくりと学ぶ
Word press初心者が 基本アーキテクチャを ざっくりと学ぶWord press初心者が 基本アーキテクチャを ざっくりと学ぶ
Word press初心者が 基本アーキテクチャを ざっくりと学ぶ
climbFrog
 
CSSフレームワークとCMS+RWDテンプレでレスポンシブWebデザインサイトを構築しよう
CSSフレームワークとCMS+RWDテンプレでレスポンシブWebデザインサイトを構築しようCSSフレームワークとCMS+RWDテンプレでレスポンシブWebデザインサイトを構築しよう
CSSフレームワークとCMS+RWDテンプレでレスポンシブWebデザインサイトを構築しよう
Masayuki Abe
 
いろいろ見せますLord of Knightsのクライアント開発事例紹介
いろいろ見せますLord of Knightsのクライアント開発事例紹介いろいろ見せますLord of Knightsのクライアント開発事例紹介
いろいろ見せますLord of Knightsのクライアント開発事例紹介
Kouji Hosoda
 
がんばらなくても C# で Single Page Web アプリケーションが書けてしまう「Blazor」とは
がんばらなくても C# で Single Page Web アプリケーションが書けてしまう「Blazor」とはがんばらなくても C# で Single Page Web アプリケーションが書けてしまう「Blazor」とは
がんばらなくても C# で Single Page Web アプリケーションが書けてしまう「Blazor」とは
Jun-ichi Sakamoto
 

What's hot (20)

エンジニアの為のWordPress入門 〜WordPressはWebAppプラットフォームです〜
エンジニアの為のWordPress入門 〜WordPressはWebAppプラットフォームです〜エンジニアの為のWordPress入門 〜WordPressはWebAppプラットフォームです〜
エンジニアの為のWordPress入門 〜WordPressはWebAppプラットフォームです〜
 
業務アプリケーションにおけるモダンWeb開発の現状ーHTML5開発って簡単なの?
業務アプリケーションにおけるモダンWeb開発の現状ーHTML5開発って簡単なの?業務アプリケーションにおけるモダンWeb開発の現状ーHTML5開発って簡単なの?
業務アプリケーションにおけるモダンWeb開発の現状ーHTML5開発って簡単なの?
 
Win32 APIをてなずけよう
Win32 APIをてなずけようWin32 APIをてなずけよう
Win32 APIをてなずけよう
 
インタラクティブコンテンツにおけるHTML5とFlash
インタラクティブコンテンツにおけるHTML5とFlashインタラクティブコンテンツにおけるHTML5とFlash
インタラクティブコンテンツにおけるHTML5とFlash
 
カヤックHTMLファイ部のUI・UX (第57回 HTML5とか勉強会 / 2015.5.19)
カヤックHTMLファイ部のUI・UX (第57回 HTML5とか勉強会 / 2015.5.19)カヤックHTMLファイ部のUI・UX (第57回 HTML5とか勉強会 / 2015.5.19)
カヤックHTMLファイ部のUI・UX (第57回 HTML5とか勉強会 / 2015.5.19)
 
HTML5でスマートフォン開発の理想と現実
HTML5でスマートフォン開発の理想と現実HTML5でスマートフォン開発の理想と現実
HTML5でスマートフォン開発の理想と現実
 
Nespのコード生成
Nespのコード生成Nespのコード生成
Nespのコード生成
 
我が家のフロントエンド開発事情
我が家のフロントエンド開発事情我が家のフロントエンド開発事情
我が家のフロントエンド開発事情
 
Static Web AppsとBlazor WebAssemblyのすすめ
Static Web AppsとBlazor  WebAssemblyのすすめStatic Web AppsとBlazor  WebAssemblyのすすめ
Static Web AppsとBlazor WebAssemblyのすすめ
 
HTML5 アプリ開発
HTML5 アプリ開発HTML5 アプリ開発
HTML5 アプリ開発
 
2014年メディア工房勉強会 第1章「Webの仕組みとHTML5」
2014年メディア工房勉強会 第1章「Webの仕組みとHTML5」2014年メディア工房勉強会 第1章「Webの仕組みとHTML5」
2014年メディア工房勉強会 第1章「Webの仕組みとHTML5」
 
JavaScriptと共に歩いて行く決意をした君へ
JavaScriptと共に歩いて行く決意をした君へJavaScriptと共に歩いて行く決意をした君へ
JavaScriptと共に歩いて行く決意をした君へ
 
無償版Visual StudioでいろいろWeb開発
無償版Visual StudioでいろいろWeb開発無償版Visual StudioでいろいろWeb開発
無償版Visual StudioでいろいろWeb開発
 
Word pressはじめの一歩 テーマ作成ハンズオン
Word pressはじめの一歩 テーマ作成ハンズオンWord pressはじめの一歩 テーマ作成ハンズオン
Word pressはじめの一歩 テーマ作成ハンズオン
 
BuddyPressで街のポータルサイトを作ろう
BuddyPressで街のポータルサイトを作ろうBuddyPressで街のポータルサイトを作ろう
BuddyPressで街のポータルサイトを作ろう
 
モダンWeb開発ワークショップ
モダンWeb開発ワークショップモダンWeb開発ワークショップ
モダンWeb開発ワークショップ
 
Word press初心者が 基本アーキテクチャを ざっくりと学ぶ
Word press初心者が 基本アーキテクチャを ざっくりと学ぶWord press初心者が 基本アーキテクチャを ざっくりと学ぶ
Word press初心者が 基本アーキテクチャを ざっくりと学ぶ
 
CSSフレームワークとCMS+RWDテンプレでレスポンシブWebデザインサイトを構築しよう
CSSフレームワークとCMS+RWDテンプレでレスポンシブWebデザインサイトを構築しようCSSフレームワークとCMS+RWDテンプレでレスポンシブWebデザインサイトを構築しよう
CSSフレームワークとCMS+RWDテンプレでレスポンシブWebデザインサイトを構築しよう
 
いろいろ見せますLord of Knightsのクライアント開発事例紹介
いろいろ見せますLord of Knightsのクライアント開発事例紹介いろいろ見せますLord of Knightsのクライアント開発事例紹介
いろいろ見せますLord of Knightsのクライアント開発事例紹介
 
がんばらなくても C# で Single Page Web アプリケーションが書けてしまう「Blazor」とは
がんばらなくても C# で Single Page Web アプリケーションが書けてしまう「Blazor」とはがんばらなくても C# で Single Page Web アプリケーションが書けてしまう「Blazor」とは
がんばらなくても C# で Single Page Web アプリケーションが書けてしまう「Blazor」とは
 

Viewers also liked

Drupal 8 へのスタンドアロン behat の導入
Drupal 8 へのスタンドアロン behat の導入Drupal 8 へのスタンドアロン behat の導入
Drupal 8 へのスタンドアロン behat の導入
tom_konda
 
持続可能な里山とは?~里山保全の同時代史と里山ガバナンスの今後
持続可能な里山とは?~里山保全の同時代史と里山ガバナンスの今後持続可能な里山とは?~里山保全の同時代史と里山ガバナンスの今後
持続可能な里山とは?~里山保全の同時代史と里山ガバナンスの今後
marrmur
 
芸術情報演習デザイン(web) 第2回:HTML入門
芸術情報演習デザイン(web) 第2回:HTML入門芸術情報演習デザイン(web) 第2回:HTML入門
芸術情報演習デザイン(web) 第2回:HTML入門Atsushi Tadokoro
 
PtengienのヒートマップとOptimizelyとの連携
PtengienのヒートマップとOptimizelyとの連携PtengienのヒートマップとOptimizelyとの連携
PtengienのヒートマップとOptimizelyとの連携
Ptmind_jp
 
三角ポップ大作戦!!(京大CARP)
三角ポップ大作戦!!(京大CARP)三角ポップ大作戦!!(京大CARP)
三角ポップ大作戦!!(京大CARP)
pj_wcj
 
情報編集 (web) 第2回:HTML入門
情報編集 (web) 第2回:HTML入門情報編集 (web) 第2回:HTML入門
情報編集 (web) 第2回:HTML入門Atsushi Tadokoro
 
2016年12月冥炎強化月間
2016年12月冥炎強化月間2016年12月冥炎強化月間
2016年12月冥炎強化月間
paul01647
 
マークアップ講座 01b HTML
マークアップ講座 01b HTMLマークアップ講座 01b HTML
マークアップ講座 01b HTML
eiji sekiya
 
Ptengineの使い方
Ptengineの使い方Ptengineの使い方
Ptengineの使い方
Ptmind_jp
 
HTMLデザインを崩さないテンプレートエンジンの作り方
HTMLデザインを崩さないテンプレートエンジンの作り方HTMLデザインを崩さないテンプレートエンジンの作り方
HTMLデザインを崩さないテンプレートエンジンの作り方
kwatch
 
D D Mapで守り隊!伊都はいいとこPJ(九大CARP)
D D Mapで守り隊!伊都はいいとこPJ(九大CARP)D D Mapで守り隊!伊都はいいとこPJ(九大CARP)
D D Mapで守り隊!伊都はいいとこPJ(九大CARP)
pj_wcj
 
まちづくり門前
まちづくり門前まちづくり門前
まちづくり門前
Takahiro Inoue
 
GRADEの基礎:概要と問題設定
GRADEの基礎:概要と問題設定GRADEの基礎:概要と問題設定
GRADEの基礎:概要と問題設定
Yuko Masuzawa
 
メディア芸術基礎 Ⅰ 第2回 HTML入門
メディア芸術基礎 Ⅰ 第2回 HTML入門メディア芸術基礎 Ⅰ 第2回 HTML入門
メディア芸術基礎 Ⅰ 第2回 HTML入門Atsushi Tadokoro
 
Html講習会資料
Html講習会資料Html講習会資料
Html講習会資料
竹島 泉
 
失敗という概念が存在しない退屈なweb開発
失敗という概念が存在しない退屈なweb開発失敗という概念が存在しない退屈なweb開発
失敗という概念が存在しない退屈なweb開発
Tsunenori Oohara
 
防災するけん!岡山県~岡山防災意識革命~(岡山CARP)
防災するけん!岡山県~岡山防災意識革命~(岡山CARP)防災するけん!岡山県~岡山防災意識革命~(岡山CARP)
防災するけん!岡山県~岡山防災意識革命~(岡山CARP)
pj_wcj
 
Basic HTML Introduction
Basic HTML IntroductionBasic HTML Introduction
Basic HTML Introduction
Minoru Hayakawa
 
イマドキの「タグ=HTML」とスタイルシート=CSS」を知ろう
イマドキの「タグ=HTML」とスタイルシート=CSS」を知ろうイマドキの「タグ=HTML」とスタイルシート=CSS」を知ろう
イマドキの「タグ=HTML」とスタイルシート=CSS」を知ろう
Mori Kazue
 

Viewers also liked (20)

Drupal 8 へのスタンドアロン behat の導入
Drupal 8 へのスタンドアロン behat の導入Drupal 8 へのスタンドアロン behat の導入
Drupal 8 へのスタンドアロン behat の導入
 
持続可能な里山とは?~里山保全の同時代史と里山ガバナンスの今後
持続可能な里山とは?~里山保全の同時代史と里山ガバナンスの今後持続可能な里山とは?~里山保全の同時代史と里山ガバナンスの今後
持続可能な里山とは?~里山保全の同時代史と里山ガバナンスの今後
 
芸術情報演習デザイン(web) 第2回:HTML入門
芸術情報演習デザイン(web) 第2回:HTML入門芸術情報演習デザイン(web) 第2回:HTML入門
芸術情報演習デザイン(web) 第2回:HTML入門
 
PtengienのヒートマップとOptimizelyとの連携
PtengienのヒートマップとOptimizelyとの連携PtengienのヒートマップとOptimizelyとの連携
PtengienのヒートマップとOptimizelyとの連携
 
三角ポップ大作戦!!(京大CARP)
三角ポップ大作戦!!(京大CARP)三角ポップ大作戦!!(京大CARP)
三角ポップ大作戦!!(京大CARP)
 
情報編集 (web) 第2回:HTML入門
情報編集 (web) 第2回:HTML入門情報編集 (web) 第2回:HTML入門
情報編集 (web) 第2回:HTML入門
 
2016年12月冥炎強化月間
2016年12月冥炎強化月間2016年12月冥炎強化月間
2016年12月冥炎強化月間
 
マークアップ講座 01b HTML
マークアップ講座 01b HTMLマークアップ講座 01b HTML
マークアップ講座 01b HTML
 
Htmlのコトバ
HtmlのコトバHtmlのコトバ
Htmlのコトバ
 
Ptengineの使い方
Ptengineの使い方Ptengineの使い方
Ptengineの使い方
 
HTMLデザインを崩さないテンプレートエンジンの作り方
HTMLデザインを崩さないテンプレートエンジンの作り方HTMLデザインを崩さないテンプレートエンジンの作り方
HTMLデザインを崩さないテンプレートエンジンの作り方
 
D D Mapで守り隊!伊都はいいとこPJ(九大CARP)
D D Mapで守り隊!伊都はいいとこPJ(九大CARP)D D Mapで守り隊!伊都はいいとこPJ(九大CARP)
D D Mapで守り隊!伊都はいいとこPJ(九大CARP)
 
まちづくり門前
まちづくり門前まちづくり門前
まちづくり門前
 
GRADEの基礎:概要と問題設定
GRADEの基礎:概要と問題設定GRADEの基礎:概要と問題設定
GRADEの基礎:概要と問題設定
 
メディア芸術基礎 Ⅰ 第2回 HTML入門
メディア芸術基礎 Ⅰ 第2回 HTML入門メディア芸術基礎 Ⅰ 第2回 HTML入門
メディア芸術基礎 Ⅰ 第2回 HTML入門
 
Html講習会資料
Html講習会資料Html講習会資料
Html講習会資料
 
失敗という概念が存在しない退屈なweb開発
失敗という概念が存在しない退屈なweb開発失敗という概念が存在しない退屈なweb開発
失敗という概念が存在しない退屈なweb開発
 
防災するけん!岡山県~岡山防災意識革命~(岡山CARP)
防災するけん!岡山県~岡山防災意識革命~(岡山CARP)防災するけん!岡山県~岡山防災意識革命~(岡山CARP)
防災するけん!岡山県~岡山防災意識革命~(岡山CARP)
 
Basic HTML Introduction
Basic HTML IntroductionBasic HTML Introduction
Basic HTML Introduction
 
イマドキの「タグ=HTML」とスタイルシート=CSS」を知ろう
イマドキの「タグ=HTML」とスタイルシート=CSS」を知ろうイマドキの「タグ=HTML」とスタイルシート=CSS」を知ろう
イマドキの「タグ=HTML」とスタイルシート=CSS」を知ろう
 

Similar to 短期間+大規模ゲーム開発でも破綻しないHTML・SCSS

20120407 ASP.NET+C#で開発する大規模ソーシャルゲーム
20120407 ASP.NET+C#で開発する大規模ソーシャルゲーム20120407 ASP.NET+C#で開発する大規模ソーシャルゲーム
20120407 ASP.NET+C#で開発する大規模ソーシャルゲーム
hideyuki ikeda
 
Htmlコーディングの効率化 前編
Htmlコーディングの効率化 前編Htmlコーディングの効率化 前編
Htmlコーディングの効率化 前編
Yasuhito Yabe
 
これからのNOTESモバイルアプリはこう作れ
これからのNOTESモバイルアプリはこう作れこれからのNOTESモバイルアプリはこう作れ
これからのNOTESモバイルアプリはこう作れMitsuru Katoh
 
レスポンシブWebデザイン【基礎編】
レスポンシブWebデザイン【基礎編】レスポンシブWebデザイン【基礎編】
レスポンシブWebデザイン【基礎編】
Yasuhito Yabe
 
HTML5時代のwebクリエイターに必要なこと
HTML5時代のwebクリエイターに必要なことHTML5時代のwebクリエイターに必要なこと
HTML5時代のwebクリエイターに必要なことMasakazu Muraoka
 
AndroidのUI設計で押さえておきたいポイント
AndroidのUI設計で押さえておきたいポイントAndroidのUI設計で押さえておきたいポイント
AndroidのUI設計で押さえておきたいポイントTakayuki Inoue
 
無償でここまで使えるアドビのWeb制作ツール for デブサミ2013
無償でここまで使えるアドビのWeb制作ツール for デブサミ2013無償でここまで使えるアドビのWeb制作ツール for デブサミ2013
無償でここまで使えるアドビのWeb制作ツール for デブサミ2013
Keisuke Todoroki
 
実演・開発の進め方
実演・開発の進め方実演・開発の進め方
実演・開発の進め方
TechGardenSchool
 
Smartphone ui:ux」 de na creative seminar vol.1 レポート
Smartphone ui:ux」 de na creative seminar vol.1 レポートSmartphone ui:ux」 de na creative seminar vol.1 レポート
Smartphone ui:ux」 de na creative seminar vol.1 レポートMasaru Kimura
 
Browser oh browser browser
Browser oh browser browserBrowser oh browser browser
Browser oh browser browser
Teppei Sato
 
Xamarin 概要 2014年08月版
Xamarin 概要 2014年08月版Xamarin 概要 2014年08月版
Xamarin 概要 2014年08月版
Yoshito Tabuchi
 
DEV-022_これから始める Xamarin ~環境構築から iOS/Android/UWP アプリのビルドまで~
DEV-022_これから始める Xamarin ~環境構築から iOS/Android/UWP アプリのビルドまで~DEV-022_これから始める Xamarin ~環境構築から iOS/Android/UWP アプリのビルドまで~
DEV-022_これから始める Xamarin ~環境構築から iOS/Android/UWP アプリのビルドまで~
decode2016
 
レスポンシブWebデザインによる開発効率化
レスポンシブWebデザインによる開発効率化レスポンシブWebデザインによる開発効率化
レスポンシブWebデザインによる開発効率化亮 門屋
 
パララックスでレスポンシブでJ query mobileなサイトのつくりかた
パララックスでレスポンシブでJ query mobileなサイトのつくりかたパララックスでレスポンシブでJ query mobileなサイトのつくりかた
パララックスでレスポンシブでJ query mobileなサイトのつくりかた
Shumpei Shiraishi
 
Firefox Mobile
Firefox MobileFirefox Mobile
Firefox Mobile
Makoto Kato
 
RDB経験者に送るMongoDBの勘所(db tech showcase tokyo 2013)
RDB経験者に送るMongoDBの勘所(db tech showcase tokyo 2013)RDB経験者に送るMongoDBの勘所(db tech showcase tokyo 2013)
RDB経験者に送るMongoDBの勘所(db tech showcase tokyo 2013)
Ryuji Tamagawa
 
Mochrom - スマートフォンビジネスサミット
Mochrom - スマートフォンビジネスサミットMochrom - スマートフォンビジネスサミット
Mochrom - スマートフォンビジネスサミットKatsuaki Sato
 
Sketchのライセンスを更新した男の話
Sketchのライセンスを更新した男の話Sketchのライセンスを更新した男の話
Sketchのライセンスを更新した男の話
anysense_ss
 
F-site発表資料「Flashユーザーが今覚えておきたいHTML5」
F-site発表資料「Flashユーザーが今覚えておきたいHTML5」F-site発表資料「Flashユーザーが今覚えておきたいHTML5」
F-site発表資料「Flashユーザーが今覚えておきたいHTML5」Yasunobu Ikeda
 
HTML5な今日この頃に贈る、Webデザイナーこれからの生きる道
HTML5な今日この頃に贈る、Webデザイナーこれからの生きる道HTML5な今日この頃に贈る、Webデザイナーこれからの生きる道
HTML5な今日この頃に贈る、Webデザイナーこれからの生きる道
Hideki Akiba
 

Similar to 短期間+大規模ゲーム開発でも破綻しないHTML・SCSS (20)

20120407 ASP.NET+C#で開発する大規模ソーシャルゲーム
20120407 ASP.NET+C#で開発する大規模ソーシャルゲーム20120407 ASP.NET+C#で開発する大規模ソーシャルゲーム
20120407 ASP.NET+C#で開発する大規模ソーシャルゲーム
 
Htmlコーディングの効率化 前編
Htmlコーディングの効率化 前編Htmlコーディングの効率化 前編
Htmlコーディングの効率化 前編
 
これからのNOTESモバイルアプリはこう作れ
これからのNOTESモバイルアプリはこう作れこれからのNOTESモバイルアプリはこう作れ
これからのNOTESモバイルアプリはこう作れ
 
レスポンシブWebデザイン【基礎編】
レスポンシブWebデザイン【基礎編】レスポンシブWebデザイン【基礎編】
レスポンシブWebデザイン【基礎編】
 
HTML5時代のwebクリエイターに必要なこと
HTML5時代のwebクリエイターに必要なことHTML5時代のwebクリエイターに必要なこと
HTML5時代のwebクリエイターに必要なこと
 
AndroidのUI設計で押さえておきたいポイント
AndroidのUI設計で押さえておきたいポイントAndroidのUI設計で押さえておきたいポイント
AndroidのUI設計で押さえておきたいポイント
 
無償でここまで使えるアドビのWeb制作ツール for デブサミ2013
無償でここまで使えるアドビのWeb制作ツール for デブサミ2013無償でここまで使えるアドビのWeb制作ツール for デブサミ2013
無償でここまで使えるアドビのWeb制作ツール for デブサミ2013
 
実演・開発の進め方
実演・開発の進め方実演・開発の進め方
実演・開発の進め方
 
Smartphone ui:ux」 de na creative seminar vol.1 レポート
Smartphone ui:ux」 de na creative seminar vol.1 レポートSmartphone ui:ux」 de na creative seminar vol.1 レポート
Smartphone ui:ux」 de na creative seminar vol.1 レポート
 
Browser oh browser browser
Browser oh browser browserBrowser oh browser browser
Browser oh browser browser
 
Xamarin 概要 2014年08月版
Xamarin 概要 2014年08月版Xamarin 概要 2014年08月版
Xamarin 概要 2014年08月版
 
DEV-022_これから始める Xamarin ~環境構築から iOS/Android/UWP アプリのビルドまで~
DEV-022_これから始める Xamarin ~環境構築から iOS/Android/UWP アプリのビルドまで~DEV-022_これから始める Xamarin ~環境構築から iOS/Android/UWP アプリのビルドまで~
DEV-022_これから始める Xamarin ~環境構築から iOS/Android/UWP アプリのビルドまで~
 
レスポンシブWebデザインによる開発効率化
レスポンシブWebデザインによる開発効率化レスポンシブWebデザインによる開発効率化
レスポンシブWebデザインによる開発効率化
 
パララックスでレスポンシブでJ query mobileなサイトのつくりかた
パララックスでレスポンシブでJ query mobileなサイトのつくりかたパララックスでレスポンシブでJ query mobileなサイトのつくりかた
パララックスでレスポンシブでJ query mobileなサイトのつくりかた
 
Firefox Mobile
Firefox MobileFirefox Mobile
Firefox Mobile
 
RDB経験者に送るMongoDBの勘所(db tech showcase tokyo 2013)
RDB経験者に送るMongoDBの勘所(db tech showcase tokyo 2013)RDB経験者に送るMongoDBの勘所(db tech showcase tokyo 2013)
RDB経験者に送るMongoDBの勘所(db tech showcase tokyo 2013)
 
Mochrom - スマートフォンビジネスサミット
Mochrom - スマートフォンビジネスサミットMochrom - スマートフォンビジネスサミット
Mochrom - スマートフォンビジネスサミット
 
Sketchのライセンスを更新した男の話
Sketchのライセンスを更新した男の話Sketchのライセンスを更新した男の話
Sketchのライセンスを更新した男の話
 
F-site発表資料「Flashユーザーが今覚えておきたいHTML5」
F-site発表資料「Flashユーザーが今覚えておきたいHTML5」F-site発表資料「Flashユーザーが今覚えておきたいHTML5」
F-site発表資料「Flashユーザーが今覚えておきたいHTML5」
 
HTML5な今日この頃に贈る、Webデザイナーこれからの生きる道
HTML5な今日この頃に贈る、Webデザイナーこれからの生きる道HTML5な今日この頃に贈る、Webデザイナーこれからの生きる道
HTML5な今日この頃に贈る、Webデザイナーこれからの生きる道
 

Recently uploaded

ReonHata_便利の副作用に気づかせるための発想支援手法の評価---行為の増減の提示による気づきへの影響---
ReonHata_便利の副作用に気づかせるための発想支援手法の評価---行為の増減の提示による気づきへの影響---ReonHata_便利の副作用に気づかせるための発想支援手法の評価---行為の増減の提示による気づきへの影響---
ReonHata_便利の副作用に気づかせるための発想支援手法の評価---行為の増減の提示による気づきへの影響---
Matsushita Laboratory
 
Generating Automatic Feedback on UI Mockups with Large Language Models
Generating Automatic Feedback on UI Mockups with Large Language ModelsGenerating Automatic Feedback on UI Mockups with Large Language Models
Generating Automatic Feedback on UI Mockups with Large Language Models
harmonylab
 
遺伝的アルゴリズムと知識蒸留による大規模言語モデル(LLM)の学習とハイパーパラメータ最適化
遺伝的アルゴリズムと知識蒸留による大規模言語モデル(LLM)の学習とハイパーパラメータ最適化遺伝的アルゴリズムと知識蒸留による大規模言語モデル(LLM)の学習とハイパーパラメータ最適化
遺伝的アルゴリズムと知識蒸留による大規模言語モデル(LLM)の学習とハイパーパラメータ最適化
t m
 
This is the company presentation material of RIZAP Technologies, Inc.
This is the company presentation material of RIZAP Technologies, Inc.This is the company presentation material of RIZAP Technologies, Inc.
This is the company presentation material of RIZAP Technologies, Inc.
chiefujita1
 
JSAI_類似画像マッチングによる器への印象付与手法の妥当性検証_ver.3_高橋りさ
JSAI_類似画像マッチングによる器への印象付与手法の妥当性検証_ver.3_高橋りさJSAI_類似画像マッチングによる器への印象付与手法の妥当性検証_ver.3_高橋りさ
JSAI_類似画像マッチングによる器への印象付与手法の妥当性検証_ver.3_高橋りさ
0207sukipio
 
TaketoFujikawa_物語のコンセプトに基づく情報アクセス手法の基礎検討_JSAI2024
TaketoFujikawa_物語のコンセプトに基づく情報アクセス手法の基礎検討_JSAI2024TaketoFujikawa_物語のコンセプトに基づく情報アクセス手法の基礎検討_JSAI2024
TaketoFujikawa_物語のコンセプトに基づく情報アクセス手法の基礎検討_JSAI2024
Matsushita Laboratory
 
論文紹介:Deep Learning-Based Human Pose Estimation: A Survey
論文紹介:Deep Learning-Based Human Pose Estimation: A Survey論文紹介:Deep Learning-Based Human Pose Estimation: A Survey
論文紹介:Deep Learning-Based Human Pose Estimation: A Survey
Toru Tamaki
 
論文紹介:When Visual Prompt Tuning Meets Source-Free Domain Adaptive Semantic Seg...
論文紹介:When Visual Prompt Tuning Meets Source-Free Domain Adaptive Semantic Seg...論文紹介:When Visual Prompt Tuning Meets Source-Free Domain Adaptive Semantic Seg...
論文紹介:When Visual Prompt Tuning Meets Source-Free Domain Adaptive Semantic Seg...
Toru Tamaki
 
キンドリル ネットワークアセスメントサービスご紹介 今のネットワーク環境は大丈夫? 調査〜対策までご支援します
キンドリル ネットワークアセスメントサービスご紹介 今のネットワーク環境は大丈夫? 調査〜対策までご支援しますキンドリル ネットワークアセスメントサービスご紹介 今のネットワーク環境は大丈夫? 調査〜対策までご支援します
キンドリル ネットワークアセスメントサービスご紹介 今のネットワーク環境は大丈夫? 調査〜対策までご支援します
Takayuki Nakayama
 
LoRaWAN 4チャンネル電流センサー・コンバーター CS01-LB 日本語マニュアル
LoRaWAN 4チャンネル電流センサー・コンバーター CS01-LB 日本語マニュアルLoRaWAN 4チャンネル電流センサー・コンバーター CS01-LB 日本語マニュアル
LoRaWAN 4チャンネル電流センサー・コンバーター CS01-LB 日本語マニュアル
CRI Japan, Inc.
 

Recently uploaded (10)

ReonHata_便利の副作用に気づかせるための発想支援手法の評価---行為の増減の提示による気づきへの影響---
ReonHata_便利の副作用に気づかせるための発想支援手法の評価---行為の増減の提示による気づきへの影響---ReonHata_便利の副作用に気づかせるための発想支援手法の評価---行為の増減の提示による気づきへの影響---
ReonHata_便利の副作用に気づかせるための発想支援手法の評価---行為の増減の提示による気づきへの影響---
 
Generating Automatic Feedback on UI Mockups with Large Language Models
Generating Automatic Feedback on UI Mockups with Large Language ModelsGenerating Automatic Feedback on UI Mockups with Large Language Models
Generating Automatic Feedback on UI Mockups with Large Language Models
 
遺伝的アルゴリズムと知識蒸留による大規模言語モデル(LLM)の学習とハイパーパラメータ最適化
遺伝的アルゴリズムと知識蒸留による大規模言語モデル(LLM)の学習とハイパーパラメータ最適化遺伝的アルゴリズムと知識蒸留による大規模言語モデル(LLM)の学習とハイパーパラメータ最適化
遺伝的アルゴリズムと知識蒸留による大規模言語モデル(LLM)の学習とハイパーパラメータ最適化
 
This is the company presentation material of RIZAP Technologies, Inc.
This is the company presentation material of RIZAP Technologies, Inc.This is the company presentation material of RIZAP Technologies, Inc.
This is the company presentation material of RIZAP Technologies, Inc.
 
JSAI_類似画像マッチングによる器への印象付与手法の妥当性検証_ver.3_高橋りさ
JSAI_類似画像マッチングによる器への印象付与手法の妥当性検証_ver.3_高橋りさJSAI_類似画像マッチングによる器への印象付与手法の妥当性検証_ver.3_高橋りさ
JSAI_類似画像マッチングによる器への印象付与手法の妥当性検証_ver.3_高橋りさ
 
TaketoFujikawa_物語のコンセプトに基づく情報アクセス手法の基礎検討_JSAI2024
TaketoFujikawa_物語のコンセプトに基づく情報アクセス手法の基礎検討_JSAI2024TaketoFujikawa_物語のコンセプトに基づく情報アクセス手法の基礎検討_JSAI2024
TaketoFujikawa_物語のコンセプトに基づく情報アクセス手法の基礎検討_JSAI2024
 
論文紹介:Deep Learning-Based Human Pose Estimation: A Survey
論文紹介:Deep Learning-Based Human Pose Estimation: A Survey論文紹介:Deep Learning-Based Human Pose Estimation: A Survey
論文紹介:Deep Learning-Based Human Pose Estimation: A Survey
 
論文紹介:When Visual Prompt Tuning Meets Source-Free Domain Adaptive Semantic Seg...
論文紹介:When Visual Prompt Tuning Meets Source-Free Domain Adaptive Semantic Seg...論文紹介:When Visual Prompt Tuning Meets Source-Free Domain Adaptive Semantic Seg...
論文紹介:When Visual Prompt Tuning Meets Source-Free Domain Adaptive Semantic Seg...
 
キンドリル ネットワークアセスメントサービスご紹介 今のネットワーク環境は大丈夫? 調査〜対策までご支援します
キンドリル ネットワークアセスメントサービスご紹介 今のネットワーク環境は大丈夫? 調査〜対策までご支援しますキンドリル ネットワークアセスメントサービスご紹介 今のネットワーク環境は大丈夫? 調査〜対策までご支援します
キンドリル ネットワークアセスメントサービスご紹介 今のネットワーク環境は大丈夫? 調査〜対策までご支援します
 
LoRaWAN 4チャンネル電流センサー・コンバーター CS01-LB 日本語マニュアル
LoRaWAN 4チャンネル電流センサー・コンバーター CS01-LB 日本語マニュアルLoRaWAN 4チャンネル電流センサー・コンバーター CS01-LB 日本語マニュアル
LoRaWAN 4チャンネル電流センサー・コンバーター CS01-LB 日本語マニュアル
 

短期間+大規模ゲーム開発でも破綻しないHTML・SCSS