開発記録

みさの頑張りを見てください

JavaScriptを学ぶ

やあやあ！みさです。

 

今日の24時頃に東京へ向かいます。何しに行くんだって？

推しに会いに行くんだよ！！！！！！！

舞台を見に行ってきます。推しが目の前で動いてる…だと…ってなりそう。

 

さあ東京に行く前にJavaScriptに手を出そうと思いまして書いてみました。

ただただコンソール画面に文字を表示させるだけです。

 

f:id:missamisa3333:20170602205350p:plain

 

簡単ですね。

さて、私が今作ろうと思っているのは10秒当てゲームです

 

JavaScriptで5秒当てゲームを作ろう　－　ドットインストール(http://dotinstall.com/lessons/just_five_js_v3)

 

上記のサイトを参考にして作ってみようと思っています。

 

以下ソース

<!DOCTYPE HTML>

<html>
<head>
<meta charset="UTF-8">
<title>JavaScript</title>
</head>

<body>

<script>

var m="表示成功したよ";
var s="やったね";
var g="いええええええい！";

console.log(m);
console.log(s);
console.log(g);

</script>
</body>
</html>

 

BMI値計算アプリ(PHP)

やあやあこんばんは(?)

 

PHPでなんかほかにも作ってみたいなということで！

毎年健康診断のあとに調べるBMI値の計算が簡単に行えるものをPHPを用いて作りました。

 

こんな感じです。

f:id:missamisa3333:20170602021528p:plain

f:id:missamisa3333:20170602021550p:plain

 

……はい。

 結果の数値こんなにいらないですかね。

 

次は何を作ろうかと考えているのですがとりあえずJavaScriptで何か作ろうかなと。

それかPythonに手を出してみてもいいかなとも思っているのでそれは追々ということで。

 

Webアプリ(ゲーム)を今年か来年の春までには作って実力がついてきたらandroidアプリを作ってみたいなあと思っております

 

UnityもやりたいしRubyもやりたいしJavaもC#もやりたいし……！

やりたいことがいっぱいだな…。

 

以下ソースコード

ホーム

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>BMIの計算</title>
</head>

<body>
<?php
 $bgcolor = "#ffe4c4";
 $textcolor = "#80000";
 ?>

<body bgcolor="<?php print $bgcolor; ?>" text="<?php print $textcolor; ?>">


<form action="bmikekka.php" method="post">

<br>
<h1>あなたのBMI値を計算します</h1>
<br>
<li>身長</li>
<br>
<input type="text" name="height">
<br>
<br>
<li>体重</li>
<br>
<input type="text" name="weight">
<br>
<br>
<input type="submit" name="submit" value="送信">
<br>

</form>
</body>
</html>

 

結果

<?php
function bmi($height,$weight)
{
 $height=$height/100;
 $weight=$weight/($height*$height);
 return $weight;
}

function bmikekka($str){
 return htmlspecialchars($str,ENT_QUOTES,"UTF-8");
}

?>

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>BMIの計算</title>
</head>

<body>
<?php
 $bgcolor = "#ffe4c4";
 $textcolor = "#800000";
 ?>

<body bgcolor="<?php print $bgcolor; ?>" text="<?php print $textcolor; ?>">

<?php
if(isset($_POST["submit"])){

$bmi=bmi($_POST["height"],$_POST["weight"]);

print "<font size=5><br>あなたのBMI値は".bmikekka($bmi)."です<br>";

}else{

print "あなたのBMI値を計算します";

}

if($bmi<18.5){

print "<font size=4.5><br>痩せ気味ですね";

}else if($bmi>25){

print "<font size=4.5><br>太り気味ですね";

}else{

print "<font size=4.5><br>標準です!このままキープしましょう";

}

print "<br><br>";

$text = "<font size=4>戻る";

if (empty($_SERVER['HTTP_REFERER'])) { 
  echo $text;
}

else {
  echo "<a href=\"{$_SERVER['HTTP_REFERER']}\">".$text."</a>";
}
?>


</body>
</html>

 

 

占いアプリ完成(?)

やあやあ！みさです。

 

ここ数日テストやら課題やら実験やらで中々忙しい日々を過ごしてました。

ブログ更新しろやと誰かさんに言われた気がするので書いてます(?)

 

前回作っていた占いアプリ(笑)の背景色変更、文字色・文字サイズの変更、画像(フリー素材)の挿入を行いました。

 

こんな感じです。

f:id:missamisa3333:20170530231816p:plain

f:id:missamisa3333:20170530231840p:plain

 

これで完成のつもりです。

お疲れ様、私！(作成時間約5時間)

 

以下ソースコード

ホーム

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>占いページ</title>
</head>

<body>
<?php
 $bgcolor = "#ffffe0";
 $textcolor = "#a52a2a";
 ?>

<body bgcolor="<?php print $bgcolor; ?>" text="<?php print $textcolor; ?>">

<form action="uranaikekka.php" method="post">

<h1>今日の運勢を占います</h1><br>

<img src="teller1.gif">

<br>
<br>

<input type="submit" name="submit" value="占う">

</form>

 


</body>
</html>

 

結果

<html>
<head>
<title>占い</title>
</head>
<?php
 $bgcolor = "#ffffe0";
 $textcolor = "#a52a2a";
 ?>

<body bgcolor="<?php print $bgcolor; ?>" text="<?php print $textcolor; ?>">


<?php


if(isset($_POST["submit"])){

$uranai="<font size=6><br>運勢は◎！　他人に優しくしてみよう";
$uranai="<font size=6><br>運勢は〇！　新しい発見があるかも";
$uranai="<font size=6><br>運勢は△！　忘れ物に気を付けて！";
$uranai="<font size=6><br>運勢は×！　何か悪いことが起きるかも";
$uranai="<font size=6><br>運勢は◎！　新しい出会いがあるかも！";
$uranai="<font size=6><br>運勢は〇！　外食したら何かいいことがあるかも";
$uranai="<font size=6><br>運勢は△！　会いたくなかった人と再会してしまうかも";
$uranai="<font size=6><br>運勢は×！　たまには気分転換してみよう！";
$uranai="<font size=6><br>運勢は×！　今日あなたの身に危険が…！";
$uranai="<font size=6><br>運勢は◎！　憧れのあの人と出会えるかも！";


$min=0;
$max=count($uranai)-1;

$key=mt_rand($min,$max);

print $uranai[$key];

print "<br><br>";


$text = "<font size=5>戻る";

if (empty($_SERVER['HTTP_REFERER'])) { 
  echo $text;
}

else {
  echo "<a href=\"{$_SERVER['HTTP_REFERER']}\">".$text."</a>";
}


}else{

}


?>

</html>

 

 

 

占い(笑)アプリ作成

やあやあ！みさです。

もはやこれ登場文句だな。

 

今日はPHPで占いアプリの開発を行ってました。

画像あげます。こんな感じです。

f:id:missamisa3333:20170528001120p:plain

f:id:missamisa3333:20170528001141p:plain

占うボタンを押すと結果表示

結果表示画面の戻るボタンを押せばホーム画面に戻る仕様です

 

なーーーーんか物足りないといいますか、変な感じがするんですよねこのアプリ(と言っていいのかわからないもの)。

私的には生年月日診断とか動物占いとかにしようかと思ってたんです。

診断結果の結果数が多すぎて短時間ではできないなと思いました。はい。

 

３～５時間くらいでここまで作れたらいいほうなのではと思えてきたので今日のところはこれでいいでしょう。

 

追加機能だったり背景色やらなんやら変えたりするのも検討してみたいと思います。

 

以下ソースコード

ホーム

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>占いページ</title>
</head>

<body>

<form action="uranaikekka.php" method="post">

<h1>今日の運勢を占います</h1><br>

<br>

<input type="submit" name="submit" value="占う">

</form>

 


</body>
</html>

 

結果ページ

<html>
<head>
<title>占いページ</title>
</head>
<?php


if(isset($_POST["submit"])){

$uranai="運勢は◎！　他人に優しくしてみよう";
$uranai="運勢は〇！　新しい発見があるかも";
$uranai="運勢は△！　忘れ物に気を付けて！";
$uranai="運勢は×！　何か悪いことが起きるかも";
$uranai="運勢は◎！　新しい出会いがあるかも！";
$uranai="運勢は〇！　外食したら何かいいことがあるかも";
$uranai="運勢は△！　会いたくなかった人と再会してしまうかも";
$uranai="運勢は×！　たまには気分転換してみよう！";
$uranai="運勢は×！　今日あなたの身に危険が…！";
$uranai="運勢は◎！　憧れのあの人と出会えるかも！";


$min=0;
$max=count($uranai)-1;

$key=mt_rand($min,$max);

print $uranai[$key];

print "<br><br>";


$text = "戻る";

if (empty($_SERVER['HTTP_REFERER'])) { 
  echo $text;
}

else {
  echo "<a href=\"{$_SERVER['HTTP_REFERER']}\">".$text."</a>";
}


}else{

}


?>
</html>

 

 

PHP

f:id:missamisa3333:20170525185348p:plain

ここ2日間程ダウンしていたみさです。

 

ついに！！！！！ついに！！！！！

xamppのインストール及び起動に成功しました！！！！！！

いえええええええい！！！！！

 

意味不明なエラーが出ていて2日間(頭が使い物にならなかったのもあるが)とても悩んでいたのですがその原因分かった気がします。

原因として起動アプリのみデスクトップに移動していたためにCの直下に置いていたxamppのフォルダなどを参照出来なかったのではないかと。

起動アプリをデスクトップに移動させるならxamppファイルも移動させないといけないよね……！

 

ということでxamppを用いたPHPの学習ができるようになりました。

とりあえずPHPを用いて占いアプリを作ろうと思います。

自分がただ遊びたいだけです。

 

目標としては28日までに占いアプリを完成させます。

頑張るぞ！

 

以下check.phpのソース

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>ホーム</title>
</head>

<body>

<?php
print '<h1>表示できました</h1><br>';

print 'やったね！！！！！';

?>

</body>
</html>

 

html感がすごい(sugoi)

 

 

ついに完成

やあやあ！みさです。

 

Webサイト、遂に完成しましたーーーーー！！！

わああああああああ！！！！

 

まだまだCSS勉強していかないとなって思いました。

これからもWebサイト作っていきます。

 

とりあえず次はPHPを学習しながら占いアプリなんかを作ってみたいなと思っております。頑張れ私。

 

完成したWebサイトの画像です。昨日から変わったとこだけ載せます。

f:id:missamisa3333:20170522225644p:plain

f:id:missamisa3333:20170522225653p:plain

 

表を見やすくしたのと各流星群のページもホームと同じように変えてみました。

あっあと各流星群のページにホームへ戻るボタンを追加しました。

この前できなかった原因は</table>がなかったため<table>タグが終わってなかったからではないかと思われます。

 

以下ホームページのソース、CSSのソース、各流星群のページのソースです。

 

ホームページ

<!doctype html>
<
<html>

<head>
<meta charset="UTF-8">
<title>流星群まとめ</title>
<link rel="stylesheet" type="text/css" href="style.css">
</head>

<body>
<div class="wrapper">
<br>
<h1 id="ryuuseigunn">流星群まとめサイトへようこそ</h1>
<br>
<p>このサイトは主な流星群の特徴や時期,極大日をまとめたサイトです。</p>
<p>流星群の眼視観測,電波観測をする際にこちらの情報を役立てていただけたら幸いです。</p>
<br>

<img src="ryuuseigunn.jpg" width="800" height="350" ait="ryuuseigunn">

<h2 id="schedule">流星群スケジュール2017</h2>
<div class="schedule">
<table>
<table border="3">
<tr>
<th>観測時期</th>
<th>極大日</th>
<th>流星群名</th>
</tr>
<tr>
<td> 1月1日～5日 </td>
<td> 1月3日 </td>
<td><a href="しぶんぎ座流星群.htm"> しぶんぎ座流星群 </td>
</tr>
<tr>
<td> 4月16日～25日 </td>
<td> 4月22日 </td>
<td> <a href="4月こと座流星群.htm">4月こと座流星群 </td>
</tr>
<tr>
<td> 4月19日～5月28日 </td>
<td> 5月6日 </td>
<td><a href="みずがめ座η流星群.htm">みずがめ座η流星群</td>
</tr>
<tr>
<td> 5月～7月 </td>
<td> 各流星群による </td>
<td> <a href="昼間流星群.htm">昼間流星群 </td>
</tr>
<tr>
<td> 6月22日～7月22日 </td>
<td> 6月27日 </td>
<td> <a href="うしかい座流星群.htm">うしかい座流星群 </td>
</tr>
<tr>
<td> 7月12日～8月19日 </td>
<td> 7月30日 </td>
<td> <a href="みずがめ座δ流星群.htm">みずがめ座δ流星群 </td>
</tr>
<tr>
<td> 7月3日～8月15日 </td>
<td> 7月31日 </td>
<td> <a href="やぎ座流星群.htm">やぎ座流星群 </td>
</tr>
<tr>
<td> 7月17日～8月24日 </td>
<td> 8月13日 </td>
<td> <a href="ペルセウス座流星群.htm">ペルセウス座流星群 </td>
</tr>
<tr>
<td> 10月6日～10日 </td>
<td> 10月9日 </td>
<td> <a href="りゅう座流星群.htm">りゅう座流星群 </td>
</tr>
<tr>
<td> 10月2日～11月7日 </td>
<td> 10月21日 </td>
<td> <a href="オリオン座流星群.htm">オリオン座流星群 </td>
</tr>
<tr>
<td> 9月25日～11月25日 </td>
<td> 11月上旬 </td>
<td> <a href="おうし座流星群.htm">おうし座流星群 </td>
</tr>
<tr>
<td> 11月10日～23日 </td>
<td> 11月18日 </td>
<td> <a href="しし座流星群.htm">しし座流星群 </td>
</tr>
<tr>
<td> 12月7日～17日 </td>
<td> 12月14日 </td>
<td> <a href="ふたご座流星群.htm">ふたご座流星群 </td>
</tr>
<tr>
<td> 12月17日～26日 </td>
<td> 12月22日 </td>
<td> <a href="こぐま座流星群.htm">こぐま座流星群 </td>
</tr>


</table>

</body>
</html>

 

各流星群のページ

例:しぶんぎ座流星群

<!doctype html>

<html>

<head>
<meta charset="UTF-8">
<title>しぶんぎ座流星群</title>
<link rel="stylesheet" type="text/css" href="style.css">
</head>

<body>
<div class="wrapper">
<h1>しぶんぎ座流星群</h1>
<br>
<p>1月1日～1月5日にかけて観測できる流星群</p>
<p>3大流星群の中の1つである</p>
<br>
<ul>
<li>特徴</li>
<p>活動が顕著になるのはピークの頃から数時間程度と短い</p>
<p>放射点北天にあるため事実上北半球でしか観測できない</p>
<br>
<li>観測条件</li>
<br>
<div class="schedule">
<table>
<table border="3"> 
<tr>
<th>年</th>
<th>電波観測</th>
<th>眼視観測</th>
</tr>
<tr>
<td>2017</td>
<td>〇</td>
<td>〇</td>
</tr>
<tr>
<td>2018</td>
<td>◎</td>
<td>×</td>
</tr>
<tr>
<td>2019</td>
<td>◎</td>
<td>×</td>
</tr>
<tr>
<td>2020</td>
<td>×</td>
<td>×</td>
</tr>
</table>
</ul>
<br>
<a href="homepage.htm">ホーム</a>

</body>
</html>

 

CSSのソース

@charset "UFT-8";

body{

margin:0 0 0 0;
padding:0 0 0 0;
background-color : #afeeee;


}
.wrapper{

margin:0 auto 0 auto;
width:800px;

}


h1{

color:#8b4513;
font-size:48px;


}

h2{

color:#8b4513;

font-size:40px;


}

.schedule{

border-bottom-color:#8b4513

}
.schedule th,.schedule td{

margin:10px 10px 10px 10px;
padding:10px 10px 10px 10px;

}

 

 

 

 

徐々に完成に近づく

やあやあ！みさです。

 

今日はバイトから17時30分頃に帰ってきまして外での現場だったからか熱中症なりかけの状態でCSSファイル書いてみました。

 

やったこととしては背景色の変更、タイトルの色とサイズ変更、画像の挿入、余白設定、中央寄せですかね。

画像のせます。

f:id:missamisa3333:20170521224739p:plain

f:id:missamisa3333:20170521224748p:plain

 

こんな感じです。homeしかいじってないのでこんな感じ。

明日に表の余白設定、各詳細ページの変更をしたら完成ですかね！！

 

なんとか明日完成させられそうです。頑張ります。

 

以下ホームのソースコードとCSSのソースコード

 

<!doctype html>
<
<html>

<head>
<meta charset="UTF-8">
<title>流星群まとめ</title>
<link rel="stylesheet" type="text/css" href="style.css">
</head>

<body>
<div class="wrapper">
<br>
<h1 id="ryuuseigunn">流星群まとめサイトへようこそ</h1>
<br>
<p>このサイトは主な流星群の特徴や時期,極大日をまとめたサイトです。</p>
<p>流星群の眼視観測,電波観測をする際にこちらの情報を役立てていただけたら幸いです。</p>
<br>

<img src="ryuuseigunn.jpg" width="800" height="350" ait="ryuuseigunn">

<h2 id="schedule">流星群スケジュール2017</h2>
<table class="schedule">
<table>
<table border="3">
<tr>
<th>観測時期</th>
<th>極大日</th>
<th>流星群名</th>
</tr>
<tr>
<td> 1月1日～5日 </td>
<td> 1月3日 </td>
<td><a href="しぶんぎ座流星群.htm"> しぶんぎ座流星群 </td>
</tr>
<tr>
<td> 4月16日～25日 </td>
<td> 4月22日 </td>
<td> <a href="4月こと座流星群.htm">4月こと座流星群 </td>
</tr>
<tr>
<td> 4月19日～5月28日 </td>
<td> 5月6日 </td>
<td><a href="みずがめ座η流星群.htm">みずがめ座η流星群</td>
</tr>
<tr>
<td> 5月～7月 </td>
<td> 各流星群による </td>
<td> <a href="昼間流星群.htm">昼間流星群 </td>
</tr>
<tr>
<td> 6月22日～7月22日 </td>
<td> 6月27日 </td>
<td> <a href="うしかい座流星群.htm">うしかい座流星群 </td>
</tr>
<tr>
<td> 7月12日～8月19日 </td>
<td> 7月30日 </td>
<td> <a href="みずがめ座δ流星群.htm">みずがめ座δ流星群 </td>
</tr>
<tr>
<td> 7月3日～8月15日 </td>
<td> 7月31日 </td>
<td> <a href="やぎ座流星群.htm">やぎ座流星群 </td>
</tr>
<tr>
<td> 7月17日～8月24日 </td>
<td> 8月13日 </td>
<td> <a href="ペルセウス座流星群.htm">ペルセウス座流星群 </td>
</tr>
<tr>
<td> 10月6日～10日 </td>
<td> 10月9日 </td>
<td> <a href="りゅう座流星群.htm">りゅう座流星群 </td>
</tr>
<tr>
<td> 10月2日～11月7日 </td>
<td> 10月21日 </td>
<td> <a href="オリオン座流星群.htm">オリオン座流星群 </td>
</tr>
<tr>
<td> 9月25日～11月25日 </td>
<td> 11月上旬 </td>
<td> <a href="おうし座流星群.htm">おうし座流星群 </td>
</tr>
<tr>
<td> 11月10日～23日 </td>
<td> 11月18日 </td>
<td> <a href="しし座流星群.htm">しし座流星群 </td>
</tr>
<tr>
<td> 12月7日～17日 </td>
<td> 12月14日 </td>
<td> <a href="ふたご座流星群.htm">ふたご座流星群 </td>
</tr>
<tr>
<td> 12月17日～26日 </td>
<td> 12月22日 </td>
<td> <a href="こぐま座流星群.htm">こぐま座流星群 </td>
</tr>


</table>

</body>
</html>

 

CSSのソース

 

@charset "UFT-8";

body{

margin:0 0 0 0;
padding:0 0 0 0;
background-color : #afeeee;


}
.wrapper{

margin:0 auto 0 auto;
width:800px;

}


h1{

color:#8b4513;
font-size:48px;
}

h2{

color:#8b4513;

font-size:40px;
}