Zenn
💨

既存システムのHTMLmockを作る

2020/11/02に公開
HTML
#
mockup
idea

引き継いだ仕様書が、Excel方眼紙だったんです。
時代もあるので、それは別に良いのですが、とはいえ自分はExcel方眼紙に書きたくないので、どうしようかと思っていました。
自分で開発するわけではなく、仕様書を書いて顧客と合意形成した後は開発者に依頼するので、変更したいのは見た目だけです。

ワイヤーフレームのツールを入れてみた

結論から言うと、元がExcel方眼紙なので、どのワイヤーフレームツールを使うにしても、１から書かないといけないです。それはあまりにも非効率です。CSSも全然違うし、少し試してみた感じ無理でした。ワイヤーフレームのツールは０からシステムを作るときにまた試してみようと思います。

HTMLを直接書けばいいんじゃないか

ある程度HTMLは書けるので、いっそHTMLを直接変更したら早いんじゃないかと思いました。
HTMLモックってやつですね。

例えばこれはgoogleのソースなんですが、これをコピペしてローカルにおいても、googleの画面のハリボテが表示できるわけではありません。

<!doctype html>
<html dir="ltr" lang="ja">
  <head>
    <meta charset="utf-8">
    <title>新しいタブ</title>
  </head>
  <body>
    <div id="oneGoogleBar"></div>
    <iframe id="backgroundImage"
        src="chrome-untrusted://new-tab-page/custom_background_image?url=https%3A%2F%2Flh5.googleusercontent.com%2Fproxy%2FoxUbE3Qn-c1CLtnPTEtvTl6ccUFz1pPakdmOuojrH53_8cWEYGoyaUIMT5IBCr8j0IZQUqb49gXHd4bDA7wdhsWDw8_MNOeOqCcSWJfcbfR6%3Dw3840-h2160-p-k-no-nd-mv">
    </iframe>
    <ntp-app></ntp-app>
    <script type="module" src="new_tab_page.js"></script>
    <link rel="stylesheet" href="chrome://resources/css/text_defaults_md.css">
    <link rel="stylesheet" href="shared_vars.css">
    <div id="oneGoogleBarEndOfBody"></div>
  </body>
</html>

HTMLコピペの手順

  1. ChromeでWebサイトを表示し、F12で表示したElementsの中身を右クリックして下図のようにCopy＞Copy outerHTMLでコピーします。

  2. テキストファイルを新規作成します。拡張子はhtmlかhtmにします。

  3. VS Codeで開きペーストします。（ない場合は右クリック＞編集やメモ帳で開く）

  4. VS Codeを開きショートカットで整形します。
    Shift ＋ Alt ＋　F
    これだけだとスタイルシートがないので、なんだか昔メモ帳で作ったような画面が表示されます。

  5. 本番環境からcssとimgを持ってきます。

これで画面のハリボテはできました。

HTMLで作るのが正しいのかはわからない

この方法が良いか悪いかはわかりませんが、方法を知らないと議論の俎上にも載せられないので、やり方が分かったのはとりあえずよかったです。

Discussion