各カードの埋め込みテスト

hiroyuki-ichikawa / fujicity_covid19

富士市版新型コロナ対策サイト

MIT License

1 stars 6 forks source link

各カードの埋め込みテスト #25

Closed hrsano645 closed 3 years ago

hrsano645 commented 3 years ago

改善詳細 / Details of Improvement

富士市の新型コロナ対策サイトの各カード埋め込みテストをします

スクリーンショット / Screenshot

作業の進捗と結果をコメントで載せます

動作環境・ブラウザ / Environment

macOS / Windows / Linux / iOS / Android
Chrome / Safari / Firefox / Edge / Internet Explorer

hrsano645 commented 3 years ago

作業方法

適当なディレクトリを作成: 例えばembed_code_check
ディレクトリへcd
index.htmlを作成して、以下のhtml構造を作成
ディレクトリ内で python3 -m http.server 8800 （ポート番号は被らなければなんでも良しです

html構造はこちら

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div>
        <!-- この中に埋め込みタグをいれます -->
        <!-- <iframe width="560" height="500" src="https://stopcovid19-fuji.netlify.app/cards/number-of-confirmed-cases?embed=true" frameborder="0"></iframe> -->
    </div>
</body>
</html>

hrsano645 commented 3 years ago

カードのurl: https://stopcovid19-fuji.netlify.app/cards/number-of-confirmed-cases/

埋め込みタグ

<iframe width="560" height="315" src="https://stopcovid19-fuji-dev.netlify.app/cards/number-of-confirmed-cases?embed=true" frameborder="0"></iframe>

テストしたhtml構造。iframeのheightを調整してます。グラフが見える最低限の大きさにしました。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div>
        <!-- この中に埋め込みタグをいれます -->
        <iframe width="560" height="500" src="https://stopcovid19-fuji.netlify.app/cards/number-of-confirmed-cases?embed=true" frameborder="0"></iframe>
    </div>
</body>
</html>

埋め込みのスクリーンショット

埋め込みがやや重いのですが、結局このカードのレンダリングになるので、しょうがないかなと思います。

hrsano645 commented 3 years ago

カードのURL: https://stopcovid19-fuji.netlify.app/cards/attributes-of-confirmed-cases

埋め込みタグ

<iframe width="560" height="315" src="https://stopcovid19-fuji.netlify.app/cards/attributes-of-confirmed-cases?embed=true" frameborder="0"></iframe>

テストしたhtml構造。iframeのheightを調整してます。グラフが見える最低限の大きさにしました。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div>
        <!-- この中に埋め込みタグをいれます -->
        <iframe width="560" height="500" src="https://stopcovid19-fuji.netlify.app/cards/attributes-of-confirmed-cases?embed=true" frameborder="0"></iframe>
    </div>
</body>
</html>

埋め込みのスクリーンショット

hrsano645 commented 3 years ago

挙動は重めですが、表示自体は問題ないと思います。

hrsano645 commented 3 years ago

挙動確認できたので終了します。