初めに
皆さんこんにちは、今回は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にやってもらいました。
それではまたお会いしましょう！