ド素人が作る自分のポートフォリオサイト作成 第３回目 ～野球掲示板的なやつを作成編～
今回は、ド素人が作る自分のポートフォリオサイト作成 第３回目 ～野球掲示板的なやつを作成編～で行っていこうと思います。
自分は、野球が好きなので、個人的に野球について話し合えるようなサイトがあるのですが、ここはあったらいいなーという定理で作成を行っていこうと思います。
プログラムを作成する前に自分は、昔から、巨人が大好きで（具体的に言うと１番坂本、２番松本、３番小笠原、４番ラミレス）の時の打線から好きです。今も昔も個人的に阿部慎之助選手と矢野謙次選手が好きです。
<!DOCTYPE html>
<html lang="ja">
<head>
<title>野球雑談サイト</title>
</head>
<body>
<header>
<ul>
<li><a href="name.html">Home</a></li>
<li><a href="game.html">ゲームのサイト</a></li>
<li><a href="prog.html">頑張りたいプログラミング</a></li>
</ul>
</header>
</form>
<?php
$day=0;$team=0;$input=0;
if(isset($_POST)){
$day=$_POST['day'];
$team=$_POST['team'];
$input=$_POST['input'];
}
fwrite($fp,$day . "\t" . $team."\t" . $input."\t"."\n");
fclose($fp);
$bord_array = ;
while ($line = fgets($fp)) {
$temp = explode("\t", $line);
$temp_array = [
"day" => $temp[0],
"team" => $temp[1],
"input"=>$temp[2],
];
$bord_array = $temp_array;
$re = implode( '|', $temp_array );
print($re."<br/>");
}
?>
</div>
<div class="game"></div>
<!-- <p>自分の好きなゲームについてまとめた記事がコチラ</p> -->
<form action="game.html">
</form>
<!-- <p>自分の好きな野球チームについての記事がコチラ</p> -->
</form>
<div class="prog">
<!-- <p>・・・
</p> -->
<form action="prog.html">
</form>
</div>
</body>
</html>
CSSのプログラムです。
header{
background: slategrey;
}
ul li {
display: inline-block;
padding: 26px 10px 20px 10px;
}
h1{
text-align: center;
}
body{
color: rgb(38, 32, 41);
/* margin-top:0px ;
margin-bottom:0px ;
margin-right:0px ;
margin-left:0px ; */
margin: 0;
background-color: rgb(161, 158, 158);
}
.baseball{
background-color: slategrey;
text-align: center;
}
実行画面
実際に実行してみると具体的な内容を真ん中に表示するようにしていきましたが、今画像をここに貼り思いましたが字が小さいですね。。。
字を大きくしてきました。
また、実際に今回の掲示板の仕組みとしては、ド素人が作る掲示板作成の内容を使用してみました。
今後は、ゲーム紹介サイト、プログラムサイトの作成を行っていこうと思います。
ありがとうございました。
字を
ド素人が作る自分のポートフォリオサイト作成 第２回目 ～大まかな構成が出来てきた～
今回は、ド素人が作る自分のポートフォリオサイト作成 第２回目で大まかな構成をプログラムしていこうと思います。最初に表示される画面は、シンプルで、自分が見たい所へ行けるような仕組みにしていこうと思っているので、これから作成していくサイトは、formを使用して飛ぶようにし、このブログなどに移動したい場合は、aタグを使用して行っていきます。
・<form>について
formは、<form action=""></form>で行うことが出来ます。性能としては、入力・送信フォームを作成する際に使用するものであり、個人的にサイト作成では、よく使われているものだと思います。また、formには、様々な属性があります。
■属性
- action="URI"
- 送信先プログラムのURIを指定する
- method="HTTPメソッド"
- 送信の際の転送方法（HTTPメソッド）を指定する
- enctype="MIMEタイプ"
- 送信の際のデータ形式（MIMEタイプ）を指定する
- accept-charset="文字セット"
- CGIプログラム等のデータの受け側で、受付可能な文字セットを指定する
- accept="MIMEタイプ"
- CGIプログラム等のデータの受け側で、処理可能なMIMEタイプを指定する
- name="名前"
- スクリプト言語などから参照できるよう名前を指定する
- target="フレーム名"
- フォーム送信の結果を表示するフレーム、またはウィンドウの名前を指定する
http://www.htmq.com/html/form.shtmlより参照
・aタグについて
<a href="game.html">ゲーム雑談サイト</a><br>
aタグは、アンカーの略で、指定したリンクへ移動する能力です。また、aタグにも様々な属性が存在します。
■属性
- href="URI"
- リンク先文書の指定
- name="名前"
- 文書内にリンク到達点とするための名前をつける
- target="フレーム名"
- リンク先の文書を表示させるフレーム名
- charset="文字セット"
- リンク先の文字コードセット
- hreflang="言語コード"
- リンク先の言語コードセット
- type="MIMEタイプ"
- リンク先のMIMEタイプ
- rel="リンクタイプ"
- この文書から見たリンク先との関係
- rev="リンクタイプ"
- リンク先から見たこの文書との関係
- tabindex="Tab移動の順番"
- Tabキーを押した際の移動順を割り当てる
- accesskey="ショートカットキー"
- ショートカットキーを割り当てる
- shape="領域の形状"
- リンク領域の形状
- coords="領域の座標"
- リンク領域の各座標
http://www.htmq.com/html/a.shtml より参照
以上のような構文を利用して以下のように作成していきました。
（HTML)
<!DOCTYPE html>
<html lang="ja">
<head>
<title>自己紹介サイト</title>
</head>
<body>
<header>
<ul>
<li><a href="name.html">Home</a></li>
<li><a href="game.html">ゲームのサイト</a></li>
<li><a href="prog.html">頑張りたいプログラミング</a></li>
</ul>
</header>
<div class="icon">
" width="120" height="120" alt="自分の眼鏡です">
</div>
<div class="info">
<h1>自己紹介</h1>
<li>氏名：ド素人太朗</li>
<li>職業：大学生</li>
<li>趣味：ゲーム、野球、プログラミング</li>
<li>今後の目標：もっと自由気ままにプログラミングを出来るようにする。</li>
<p>以下に自分の趣味について書いたところに飛べるような物があります。</p>
</div>
<div class="game"></div>
<!-- <p>自分の好きなゲームについてまとめた記事がコチラ</p> -->
<form action="game.html">
</form>
<!-- <p>自分の好きな野球チームについての記事がコチラ</p> -->
</form>
<div class="prog">
<!-- <p>・・・
</p> -->
<form action="prog.html">
</form>
</div>
</body>
</html>
（CSS)
header{
background: slategrey;
}
ul li {
display: inline-block;
padding: 26px 10px 20px 10px;
}
body{
color: rgb(38, 32, 41);
/* margin-top:0px ;
margin-bottom:0px ;
margin-right:0px ;
margin-left:0px ; */
margin: 0;
background-color: rgb(161, 158, 158);
}
.icon{
background-color: slategrey;
text-align: center;
}
.info{
background: slategrey;
text-align: center;
}
.game{
float: left;
}
.baseball{
float: left;
}
.prog{
float: left;
}
全体的に暗めのデザインに作成を行いました。また、自分の概要を真ん中にそろえてます。
次回は、別のサイトのデザイン構成などを行っていこうと思います。
考察サイト：http://www.htmq.com/
ド素人が作る自分のポートフォリオサイト作成 第1回目
前回ド素人が作るTODOリストを作っていきましたが、今回は、自分のことについてまとめたポートフォリオのサイトを作っていこうと思いました。そしてこれが第1回目になります。
今回の目標としては、前回は、自分が使えればいいようなサイトのデザインでしたが今回は、様々な人でも見やすいようなサイトを作っていこうと思います。
デザインとしては、
※汚くてごめんなさい
上図のような感じで作成していき背景の配色もうまくしていこうと思います。
実際に今時点で作成できている段階としては、
大まかなところまで、作成していきました。これからCSSを勉強しながら上手く作っていこうと思います。
以降進み次第随時更新していこうと思うます。
※今の所のプログラム
<!DOCTYPE html>
<html lang="ja">
<head>
<title>自己紹介サイト</title>
</head>
<body>
<header>
<ul>
<li><a href="name.html">Home</a></li>
<li><a href="game.html">ゲームのサイト</a></li>
<li><a href="prog.html">頑張りたいプログラミング</a></li>
</ul>
</header>
<div class="icon">
" width="120" height="120" alt="自分の眼鏡です">
</div>
<div class="info">
<h1>自己紹介</h1>
<li>氏名：ド素人太朗</li>
<li>職業：大学生</li>
<li>趣味：ゲーム、野球、プログラミング</li>
<li>今後の目標：もっと自由気ままにプログラミングを出来るようにする。</li>
<p>以下に自分の趣味について書いたところに飛べるような物があります。</p>
</div>
<div class="game"></div>
<p>自分の好きなゲームについてまとめた記事がコチラ</p>
<form action="game.html">
</form>
<p>自分の好きな野球チームについての記事がコチラ</p>
</form>
<div class="prog">
<p>・・・
</p>
<form action="prog.html">
</form>
</div>
</body>
</html>
ド素人が作るPHP＋CSSを使ってTODOリスト掲示板的なの作ってみた第４回
今回は、ド素人が作るPHP＋CSSを使ってTODOリスト掲示板的なの作ってみた第４回です。
前回は、ファイルに保存されているのか確認できるところまで行っていきました。今回は、その保存されている内容をウェブ上に表示させることをおこなっていこうと思います。今回の作業で一様ファイルのを使ったTODOリストは、完成になります。
まずソースプログラムです。
<!DOCTYPE html>
<html lang="ja">
<head>
</head>
<body>
<section>
<header>
<h1>TODOLIST</h1>
</form>
<?php
$day="";$what="";$memo="";$name="";
if(isset($_POST)){
$day=$_POST['day'];
$what=$_POST['what'];
$memo=$_POST['memo'];
$name=$_POST['name'];
}
$fp = fopen("memo.txt", "a");
fwrite($fp,$day . "\t" . $what."\t" . $memo."\t".$name."\t"."\n");
fclose($fp);
$fp = fopen("memo.txt", "r");
$bord_array = ;
while ($line = fgets($fp)) {
$temp = explode("\t", $line);
$temp_array = [
"day" => $temp[0],
"what" => $temp[1],
"memo"=>$temp[2],
"name"=>$temp[3],
];
$bord_array = $temp_array;
$re = implode( '|', $temp_array );
print($re."<br/>");
}
?>
</header>
</section>
</body>
</html>
大まかな変更は、特にありませんが
$re = implode( '|', $temp_array );
print($re."<br/>");
の所を表示するために追加を行いました。最初は、そのままechoなので表示を試みると
Array to string conversion inとエラー表示が出てきました。今回のポイントとしては、どのようにこれを消すがをかなり調べました。
まずなぜこのようなエラーが表示されているのかについてです。原因としては、配列を無理やり自分が文字列になれと押し付けていました。なので、エラーを表示して自分にお説教をしてくれたのです。それを改善するために現れたのが、implodeです。
implodeとは：
implode — 配列要素を文字列により連結する
http://php.net/manual/ja/function.implode.phpより参照
implodeは、適当な文字で、区切りをつけれるのですが今回は、'|'で各項目を区切り表示を行っていきたいと思います。
実際の表示結果が
上記の図のようになりました。
※画像と表が見栄えが悪いので消去・変更を行いました
一通りのPHPの基本を学習することが出来たのがはわかりませんが第1回～第4回を通して基本的な表示の仕方を勉強することが出来ました。今後の目標としては、TODOリストにデータベースを導入してもう少し使いやすいものにしたいです。また、別のサイト作りもやってみたいと思います。
ド素人が作るPHP＋CSSを使ってTODOリスト掲示板的なの作ってみた第４回でした。
ありがとうございました。
ド素人が作るPHP＋CSSを使ってTODOリスト掲示板的なの作ってみた第３回
久しぶりに更新します。
以前予定を保存する所にMysqlを使おうかなと思ったのですが、中々うまくいかないので、ファイルに保存する形式にしていきました。
<?php
$day="";$what="";$memo="";$name="";
if(isset($_POST)){
$day=$_POST['day'];
$what=$_POST['what'];
$memo=$_POST['memo'];
$name=$_POST['name'];
}
$fp = fopen("memo.txt", "a");
fwrite($fp,$day . "\t" . $what."\t" . $memo."\t".$name."\t"."\n");
fclose($fp);
$fp = fopen("memo.txt", "r");
$bord_array = ;
while ($line = fgets($fp)) {
$temp = explode("\t", $line);
$temp_array = [
"day" => $temp[0],
"what" => $temp[1],
"memo"=>$temp[2],
"name"=>$temp[3]];
$bord_array = $temp_array;
}
?>
ファイルで保存する所のプログラムとしては、まずfromで受けとる用のデータの初期化を行っていくその後fromで受け取った送信データが受信されているかを確認し確認後作成したmemo.txtファイルを開けていくその時に"a”追加モードにして開放を行っていきます。その後fwriteで受け取った値を記入していきます。一通り記入が終わったら一旦開いたファイルを閉じます。
その後またファイルを開けるのですがその時に”r”読み取りモードに設定します。
今回は、ファイルに保存されているかを確認したいだけなので、特に表示はしません。
実際に実行してみると、、、
エラー起きてますね（次回までに治します。）また、デザイン的に箇条下記みたいにしたいので、表も消そうと思います（自分へのメモ）。
実行すると
実際に保存がされていのが確認できました。
個人的に結構完成にゆっくりですがなってきているので、もうひと頑張りしたいと思います。今後もよろしくお願いいたします。
学校の講義で、作成した扇風機のお話。
今回は、大学の授業内で作成した人感センサーをなどを利用した扇風機について書いていこうと思います。
なぜ扇風機なのかといいますと、授業内で、貸出される機材が、USBの扇風機でした。そこから各ランクに分けられ自分に合ったランクでそのUSB扇風機をアレンジするといった内容でした。自分の記憶の中では、Cランクがボタンで弱、中、強の制御、BランクがCランクの内容と＋ディスプレイで実行中の制御内容を表示を行う、AランクがBランク内容プラス、赤外線センサーを使用した自動制御を行うといった内容でした。
形式として基本二人一組で行っていきました。そして挑むランクは、Aランクを狙っていきました。
構造の仕組みとしては、Aランクの条件＋LEDでの明るさでも制御状態を知らせるような仕組みに作成していきました。
使用機材は以下の通りです。
■Arduino UNO・・・1個
■USB扇風機・・・1個
■フルカラーLED・・・１個
■赤外線距離センサ・・・１個
■モータードライバー（TA7291P)・・・１個
■抵抗（10㏀）・・・４個
■液晶ディスプレイ（LCD）・・・１個
■ブレットボート・・・２個
■USBポート・・・１個
■ジャンパー線・・・複数
■タクトスイッチ・・・1個
動作構造としては、基本トグルスイッチで制御を変える仕組みにし、との回数ないで、行う制御を行っていくような仕組みにしていきました。
図にすると以下の通りです。
作成したソースプログラムを以下に示します。
#include<Wire.h>//送信バッファの末尾に文字列や、データを追加する。
/*赤外線センサー*/
float dist;
float Vcc = 5.0;
/*タクトスイッチ*/
int s ;
/*LED*/
int lightRpin = 6;
int lightGpin = 3;
int lightBpin = 5;
int powR = 0;
int powG = 0;
int powB = 0;
void setup() {
lcd_init();
Serial.begin(9600);
pinMode(lightRpin, OUTPUT);
pinMode(lightGpin, OUTPUT);
pinMode(lightBpin, OUTPUT);
}
void loop() {
s = 0;
for (;;) {
/*タクトスイッチの設定*/
if (digitalRead(2) == HIGH) {
s = s + 1;
if (s > 4)
s = 0;
delay(20);
while (digitalRead(2) == HIGH) {}
}
if (s == 0) {
digitalWrite(10, HIGH);
digitalWrite(11, LOW);
analogWrite(9, (150));
analogWrite(lightRpin, 100);//LEDは、赤
lcd_setCursor(0, 1);
lcd_printStr("Week");
delay(s == 1);
}
if (s == 1) {
digitalWrite(10, HIGH);
digitalWrite(11, LOW);
analogWrite(9, (200));
analogWrite(lightGpin, 100);//LEDは、緑
lcd_setCursor(0, 1);
lcd_printStr("Middle");
delay(s == 2);
}
if (s == 2) {
digitalWrite(10, HIGH);
digitalWrite(11, LOW);
analogWrite(9, (255));
analogWrite(lightBpin, 100);//LEDは、緑
lcd_setCursor(0, 1);
lcd_printStr("Strong");
delay(s == 3);
}
if (s == 3) {
dist = Vcc * analogRead(A0) / 1023;//距離の計算の式ために電圧を計算する
dist = 26.549 * pow(dist, -1.2091);//電圧から距離を計算する
Serial.print(dist);//実際に測った距離をシリアルモニタに表示
delay(500);//０．５秒で測定する
if (1.0 <= dist && dist <= 10.0) {//1㎝から10㎝までの処理
digitalWrite(10, HIGH);
digitalWrite(11, LOW);
Serial.println(" Week");//シリアルモニターに表示
analogWrite(9, (55));
}
else if (10.1 <= dist&&dist <= 20.0) {//10．1㎝から20㎝までの処理
digitalWrite(10, HIGH);
digitalWrite(11, LOW);
Serial.println(" Middle");//シリアルモニターに表示
analogWrite(9, (100));
}
else {//20㎝以上の処理
digitalWrite(10, HIGH);
digitalWrite(11, LOW);
Serial.println(" Strong");//シリアルモニタ―に表示
analogWrite(9, (255));
}
analogWrite(lightRpin, 100);
analogWrite(lightGpin, 100);
analogWrite(lightBpin, 100);//LEDは、白
lcd_setCursor(0, 1);
lcd_printStr(" ");
lcd_setCursor(0, 1);
lcd_printStr("Auto");
delay(s == 4);
}
if (s == 4) {
digitalWrite(10, LOW);
digitalWrite(11, LOW);
delay(100);
analogWrite(lightRpin, 0);
analogWrite(lightGpin, 0);
analogWrite(lightBpin, 0);
lcd_setCursor(0, 1);
lcd_printStr(" ");
lcd_setCursor(0, 1);
lcd_printStr("OFF");//OFFなので、すべて停止する。
delay(s == 0);//タクトスイッチを押すとs==0の処理へ
}
}
}
※きれいなプログラムじゃなくてすみません。
実際に行った配線は以下の図の通りです。
実際の動作してみると
まず最初に何も動作していない時は、ディスプレイには、このような表示がされLEDは点灯していません
次に弱の状態では、ディスプレイに弱を表す"week"と表示されLEDは、赤く光ります。
次の中の状態の時は、ディスプレイに"Middle"と表示され、LEDは、紫色に変色します。
また、さらに状態を変え強の状態にすると、ディスプレイに"Strong"と表示され、LEDは青く見えますが、白く光ります。
またさらに状態を変えると自動制御モードになりますその時、ディスプレイには"Auto"と表示されます。その時赤外線センサーで距離を感知しているのですが、その時シリアルモニタにも表示されるようにしています。
また、トグルスイッチを押すと弱の状態に戻るような仕組みになっています。
実際に作成して思ったこと。
今回初めてチームを組んで、作成するような形を体験したのですが、自分のコミュニケーションの無さを実感しました。この反省を生かし次回に生かしたいと思います。
また、Arduino のプログラムをスケッチ際に前もって制御の内容などを形にせず今まで行っていたのですが、今回初めて制御の内容を作って行いましたが、プログラムをスケッチしているときかなり作りやすかったので、今後は制御の内容もしっかり考えてやっていこうとおもいした。（多分事前に作るのが当たり前な気が書きながら思いました。）
以上で今回の内容を終わりです、ありがとうございました。
