0
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

jsのnavigationを使ってosとアプリの情報を取得するプログラムを作ってみた

Posted at

初めに

皆さんこんにちは、今回はjsのnavigationを使ってOSの情報を取得するプログラムを作ってみました。

ファイル構成

今回は多分html一つで大丈夫だと思います

プログラムを書いていく

早速プログラムを書いていきましょう。
では、htmlに以下のプログラムをコピペしてください。

html

<!DOCTYPE html>
<head>
    <title>navigatorからデータを取得する</title>
    <meta charset="utf-8">
    <style>
   body {
    font-family: Arial, sans-serif;
    margin: 0;
    padding: 0;
    text-align: center;
}

header {
    background-color: #333;
    color: #fff;
    text-align: center;
    padding: 20px 0;
}

.intro, .about {
    padding: 20px;
}

.intro {
    background-color: #f9f9f9;
}

.about {
    background-color: #eee;
}

footer {
    background-color: #333;
    color: #fff;
    text-align: center;
    padding: 10px 0;
}
/* 新しいCSSを追加 */
@keyframes headerAnimation {
    0% { background-color: #333; }
    50% { background-color: #555; }
    100% { background-color: #333; }
}

header {
    color: #fff;
    text-align: center;
    padding: 20px 0;
    animation: headerAnimation 4s infinite;
}
.a {
    color: rgb(109, 109, 255);
}
.a:hover {

    color: rgb(176, 176, 255)

}
    </style>
</head>
<header>
    <h1>navigationから情報を取得する</h1>
</header>
<body>
    <h2>os名:</h2>
    <h2 id="osname"></h2>
    <h2>システム言語:</h2>
    <h2 id="systemlanguage"></h2>
    <h2>UserAgent:</h2>
    <h2 id="useragent"></h2>
    <h2 id>アプリ名:</h2>
    <h2 id="appname"></h2>
    <h2 >appversion:</h2>
    <h2 id="appversion"></h2>
    <h2>cookienabled:</h2>
    <h2 id="cookienabled"></h2>
    <h2>support:</h2>
    <h2 id="vendor"></h2>
</body>
<footer>
    <h2>created by qqn5192</h2>
</footer>
<script>
    let doc = document
let Osname = navigator.platform;
let systemlanguage = navigator.language;
let navuseragent = navigator.userAgent;
let appname = navigator.appName;
let appver = navigator.appVersion;
let cookienabled = navigator.cookieEnabled;
let supported = navigator.vendor;
doc.getElementById("osname").textContent = Osname;
doc.getElementById("systemlanguage").textContent = systemlanguage;
doc.getElementById("useragent").textContent = navuseragent;
doc.getElementById("appname").textContent = appname;
doc.getElementById("appversion").textContent = appver;
doc.getElementById("cookienabled").textContent = cookienabled;
doc.getElementById("vendor").textContent = "supported by"+vendor;
</script>

これでプログラムは完成しました。

最後に

皆さん、いかがだったでしょうか?今回はjavascriptでosとアプリ情報を読み取るプログラムを作りました。ちなみに今回もheaderのcss部分はchatGPTにやってもらいました。
それではまたお会いしましょう!

0
0
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
0
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?