このページについて
概要
1ミリもプログラミングをしたことのない方に対して、「アプリとかブログとかがどのようにして動いているのか凄いざっくりと知りたい」という要望とかあったりします？と思い書きました。
概要のみ説明して、数記事に分けてアプリの成り立ちが理解いただければと思います。
「誰」向けのページ？
・プログラミング超初心者の方。
・筋トレされている方・プログラミングとか全く触ったことのない方で、アプリがどのようにして動いているのか興味がある方。
【筋トレ】目的でいらっしゃる方で、プログラミングに全く触れたことのない方は、こういったアプリケーションがどのように動いているのかさらっとご確認いただき、「へーー(・ω・)」と思っていただければ幸いです。
できれば日曜大工としてプログラミングを始めていただければ、もっと幸いです。
『RM換算表』の解説
とりあえずソース公開
プログラミングはじめての方は以下を読まれても意味不明だと思いますので、ここは読み飛ばして、次のポイントまで進んでください。
【rmkansan.php】
<!doctype html>
<html lang="ja" class="no-js">
<head>
<meta charset="utf-8">
<style type="text/css">
div {
display: inline-block;
/*background-color: Orange;*/
width: 4.5em;
}
table {
border: none;
border-collapse: collapse;
}
input {
width: 4em;
}
div {
width: 5.1em;
}
.weightcell :hover {
background-color: Orange;
}
</style>
<script
src="https://code.jquery.com/jquery-2.2.4.min.js"
integrity="sha256-BbhdlvQf/xTY9gja0Dq3HiwQF8LaCRTXxZKRutelT44="
crossorigin="anonymous"></script>
<script>
$(function() {
//クリックしたら発動
$('span.rm').click(function() {
var onerm = parseFloat(this.innerHTML);
var max = 0;
var hdnId = '';
var divzone = '';
//初期化
$('div').css('background-color', '');
for(d = 1; d < 81; d++) {
for(w = 1; w < 51; w++) {
hdnId = 'hdn' + d + 'w' + w;
max = parseFloat(document.getElementById(hdnId).value);
if (onerm > max - 1 && onerm < max + 1) {
divzone = '#d' + d + 'w' + w;
$(divzone).css('background-color', 'orange');
}
}
}
});
});
</script>
</head>
<body>
<table border="1">
<?php
$max = 0;
$weight = 0;
$opacity = 0;
$g = 0;
for($d = 0; $d < 81; $d++) {
$weight = $d * 2.5;
echo'<tr>';
for($w = 0; $w < 51; $w++) {
$max = $weight * (1 + ($w / 40));
$max = round($max, 2);
//行グラデーション
if($d % 4 == 0 && $d != 0 || $w % 5 == 0) {
$opacity = $d / 50;
}else {
$opacity = 0;
}
if($w % 4 == 0) {
$g = 255 - $w;
}else {
$g = 255;
}
if ($w == 0 && $d == 0) {
?>
<td><span>重量<br>/Reps</span></td>
<?php
//重量のみ
}else if ($w == 0) {
?>
<td style="font-weight: bold; background-color: rgba(0, <?php echo $g ?>, 255, <?php echo $opacity ?>)"><span><?php echo $weight ?></span></td>
<?php
//Repsのみ
}else if($d == 0){
?>
<td style="font-weight: bold; background-color: rgba(0, <?php echo $g ?>, 255, <?php echo $opacity ?>)"><span><?php echo $w ?></span></td>
<?php
//RM換算
}else{
?>
<td class="weightcell" style="font-weight: bold; background-color: rgba(0, <?php echo $g ?>, 255, <?php echo $opacity ?>)"><div id="<?php echo 'd' .$d .'w' .$w; ?>"><span class="rm"><?php echo $max ?></span><br><span style="color: white;"><?php echo $weight .'x' .$w; ?></span></div></td>
<input type="hidden" id="<?php echo 'hdn' .$d .'w' .$w; ?>" value="<?php echo $max ?>">
<?php
}
}
echo'</tr>';
}
?>
</table>
</body>
</html>
プログラミングの「要点」：表示
「表示」について。
プログラムの上の方でこの ↓ ような記述があります。
<body>
<table border="1">
<?php
//～～～～～～～～～～～～～～～～～～～～～～～～
//以下省略
//～～～～～～～～～～～～～～～～～～～～～～～～
?>
</table>
</body>
こんな感じで「<body>～</body>」とﾎﾆｬﾎﾆｬ書いてある部分があります。
こちらが「目で見える表示の部分」です。
『RM換算表』では、「数字が書かれた四角い箱型のもの」がたくさん表示されていると思います。
この表示部分は、全てこの「<body>～</body>」の中で行います。
プログラミングの「要点」：処理
次に、「処理」について。
プログラムの上の方でこの ↓ ような記述があります。
<script>
$(function() {
//クリックしたら発動
$('span.rm').click(function() {
//～～～～～～～～～～～～～～～～～～～～～～～～
//以下省略
//～～～～～～～～～～～～～～～～～～～～～～～～
</script>
こちらが『RM換算表』で、クリックしたりすると色がかわる「処理」を行うものを書く部分になります。
ただ『RM換算表』の表示だけ行う場合には不要な部分です。
でも、こちらの「<script>」（「スクリプト」タグと呼ばれます。）の中でいろいろな「処理」を書いていくと、「こんなことができたら便利なのにな」「電卓でやると大変だから、自動で複雑な計算をかわりにやってくれないかな？」という様々に便利なことができるようになります。
プログラミングが楽しいと思える醍醐味のような場所です。
ポチっと押すだけで色とか表示する文字とか変えたりしますので、『動的』などと呼ばれます。
「『動的』なものは、とりあえず何か動くんだね。」という認識だけで十分です。
プログラミングの「要点」：装飾
最後にこちら ↓
<style type="text/css">
div {
/*～～～～～～～～～～～～～～～～～～～～～～～～*/
/*以下省略 */
/*～～～～～～～～～～～～～～～～～～～～～～～～*/
}
</style>
この部分では、「装飾」を行います。
アプリの「デザイン」の部分をこちらで決定していきます。
なくても動きますが、だいたい無いと「ペラっとした」デザインとなり、1990年代のホームページのような「妙に懐かしい雰囲気」を体験できます。
とりあえず今回は「プログラムの概要」のみに焦点を当てて解説しました。
次回は「書いてある内容」についての説明をします。
あとがき
書いたきっかけ
先日作ったアプリを「オープンソースにしてしまおうかな(‘ω’)」と思い付いて公開することにしました。
割と早めにVue.jsに切り替えようと思うので、jQueryで書いてあるうちに教材として記録に残してみようと思いました。
まことにどうでもいい話
なお、本ブログでは記事タイトルの頭に【筋トレ】とか【アプリ】とか付けて分類しているのですが、今回迷った結果【アプリ】にしました。
