What's New Qiita

20200701のHTMLに関する記事は12件です。

  • 投稿日：2020-07-01T23:04:26+09:00

プログラミングでよく見かけるhogeとは

プログラミング経験者なら一度は見たことあるであろうhogeについて調べてみた。

hoge
<html>
<head>
<title>HOGEHOGE</title>
</head>
<body>
<p>hogehoge</p>
</body>

hogeとは？

hogeとは意味を持たないということを示す言葉でメタ構文変数と言われるものとのこと。

なぜhoge？

知り合いのエンジニアに聞いてみたところ、打ちやすいでしょ？と言われたので恐らくタイピング的に打ちやすく使われ始めたのではないかと思った。
仮説はいくつかあるらしく、調べてみたが1980年代頃から使われ出したくらいしか分からなかった。

hogeの他にもメタ構文変数はあるの？

他にもfoo,bar,foobar,piyo,fugaなどがある。自分は聞いたことがないが、hagehage,hogeraなんかもあるらしい。

  • このエントリーをはてなブックマークに追加
  • Qiitaで続きを読む
  • 投稿日：2020-07-01T22:12:16+09:00

模写コーディングその１　FaceBookログイン画面　

模写コーディング

模写するサイト

FaceBook ログイン画面
https://www.facebook.com/

模写するきっかけ

・プログラミング学習においてインプットよりもアウトプットした方が定着しやすいと耳にしたため。

・Udemyでフォームの制作について学んだばかりで、その学習内容をすぐに活かせそうだなと思った。

・非常にシンプルなデザインなので、これなら作れそうとも思った。

作成時間（途中経過）

3時間

環境構築

・Google Chrome（ブラウザ）
・Visual Studio Code（コードエディター）

模写する上でのルール（引用）

1.文字のコピペはOK
2.フォントの種類は何でもOK
3.少しのズレはOK
4.背景画像も入れる
5.角丸やフォントの大きさも近いものにする
6.レスポンシブデザインにも対応する

https://codelearn.jp/articles/mosya#1HTMLCSS

進捗

スクリーンショット 2020-07-01 19.04.27.png

現状は、とりあえずHTMLのみで思うがままにコーディング
次回は、class属性等を追加した後に、CSSでスタイルを当てていく。

アカウント登録以降は、「新しいアカウントを作成」をクリックした際のモーダルウィンドウとして表示するつもりです。
javascriptの知識が必要そうなので、過去にドットインストールで学んだことを復習しながら作成することになりそう。

必須入力事項のエラーの出し方も、javascriptで書く必要がありそう。
あとは、正規表現の知識も仕入れなくては。

今週中完成を目指す。

  • このエントリーをはてなブックマークに追加
  • Qiitaで続きを読む
  • 投稿日：2020-07-01T21:47:34+09:00

[初学者必見]htmlをhamlに変換するツール発見！

いいもの見つけた！

htmlをhamlに変換するツールです。
コピペで簡単に変換できます！ ▼

https://htmltohaml.com/

一度試してみて下さい！

  • このエントリーをはてなブックマークに追加
  • Qiitaで続きを読む
  • 投稿日：2020-07-01T19:54:11+09:00

初心者によるプログラミング学習ログ 357日目

100日チャレンジの357日目

twitterの100日チャレンジ#タグ、#100DaysOfCode実施中です。
すでに100日超えましたが、継続。
100日チャレンジは、ぱぺまぺの中ではプログラミングに限らず継続学習のために使っています。
357日目は、

  • このエントリーをはてなブックマークに追加
  • Qiitaで続きを読む
  • 投稿日：2020-07-01T17:52:11+09:00

CSSアニメーションとJSで『崩壊するサイト』を簡単に作る

今回はサイトに崩壊するイースターエッグ（隠し要素）みたいな物を、基本的なコードのみで実装してみたので方法をまとめます。
なので初学者の方でも比較的分かりやすいかと思います。

インフラエンジニア「もっと手軽に崩壊できる。」
CSS職人「こんな崩壊にしてみました。」
やらかしエンジニア「崩壊しました。」
な話がある場合はぜひ教えてください！（自分は最近やらかしました。）
　

? 作ったもの

collapse.gif
（↑サンプルページのGif動画）

■ サンプルサイトURL（PCのみ）
https://aocattleya.github.io/Collapse-Site

■ GitHub
https://github.com/aocattleya/Collapse-Site

サイト内のキャラクターアイコンをクリックすると、サイトが崩壊します。

今回は解説がしやすいのでjQueryで解説します。
アイデア重視で実際やってることは簡単なので、Vue.jsなどでも簡単に応用出来ます。
　

簡単な仕組み解説

クリックした場合にフェードアウトするアニメーションのクラスを追加する。

もっと簡単にいうと、クリックでクラスを追加する。

使用している物 説明
HTML, CSS ---
javaScript jQuery, Vue.js, その他
クラスを追加出来れば何でもOK
Animate.css CSSアニメーションを簡単に
実装出来るライブラリ

　

Animate.css

もちろん自分でアニメーションを作っても良いですが、難しいアニメーションなんて作れない！という方に、フェードインや跳ねたりのアニメーションをクラスを付けるだけで簡単に実装出来るライブラリがあります。

・Animate.css（公式サイト）
https://daneden.github.io/animate.css

簡単に使い方の紹介です。

１、ライブラリを読み込む
ダウンロードして読み込みも出来ますが、CDN（ヘッダーにURL置くだけ）でも使用出来ます。

index.html
<head>
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/4.0.0/animate.min.css">
</head>

CDNのバージョンによってクラス名が違ったりするので公式のREADMEにて
npmなど他の方法でインストールしたい場合なども書かれています。
→　animate.css（GitHub）

２、クラスを付ける

アニメーションを使用したいクラスに、animate__animatedとアニメーションのクラスを付与

index.html
<div class="animate__animated animate__fadeInUp">フェードインするよ</div>

これでページを読み込んだ時に、すでに反映されています。簡単！

animete.gif
どんなアニメーションのクラスがあるかは、公式サイトで実際の動きを確認できます。
スピードを変えたりなどのオプションもあります。

→ 公式サイト
　

? クリックで落下

hinge.gif

Animate.cssで簡単にアニメーションが実装出来る事が分かったところで、
次に、要素をクリックしてアニメーションのクラスを追加し、フェードアウトさせます。

何でもOKですが、今回はjQueryでクラス追加してみます。

index.html
<div class="collapse">
  <div class="button">ボタン</div>
</div>
style.css
.collapse {
  width: 200px;
  height: 200px;
  background-color: lightblue;
}

buttonクラスをクリックすると、
collapseクラスにanimate__animated animate__hingeの2つのクラスを追加する。

※hingeは、animete.cssの中のポロッと落下するアニメーションの1つです。

main.js
// クリックでクラス追加
$('.button').click(function() {
  $(".collapse").addClass("animate__animated animate__hinge");
})


サンプル全部見たい人用（クリックで開く）
index.html
<!DOCTYPE html>
<html lang="ja">
  <head>
    <meta charset="UTF-8" />
    <link rel="stylesheet" href="style.css" />
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/4.0.0/animate.min.css" />
    <title>クリックで崩壊</title>
  </head>
  <body>
    <div class="collapse">
      <div class="button">クリック</div>
    </div>
    <script src="https://code.jquery.com/jquery-3.4.1.min.js"></script>
    <script src="main.js"></script>
  </body>
</html>
style.css
.collapse {
    width: 200px; height: 200px;
    background-color: lightblue; }
main.js
$('.button').click(function() {
    $(".collapse").addClass("animate__animated animate__hinge");
})

基本はこれだけです。
あとはアニメーションを要素に追加するタイミングを変えて全体が崩壊していくように見せます。
　

? 連続で落下し崩壊

rem0h-tyoak-compressor.gif

ボタンクリック後に2つ目を一定時間後に実行させます。
一定時間後に特定の処理を行うにはsetTimeout()を使います。

index.html
<div class="contents">
  <div class="collapse1">
    <div class="button">クリック</div>
  </div>
  <div class="collapse2"></div>
</div>
main.js
$(".button").click(function () {
  // 1つ目に追加
  $(".collapse1").addClass("animate__animated animate__hinge");
  // 2つ目に追加（1秒後）
  setTimeout(function () {
    $(".collapse2").addClass("animate__animated animate__hinge");
  }, 1000);
});

　
今回はシンプルにこんな形で、あとはアニメーションをさせたい要素に好きなタイミングで付けていくと崩壊するサイトが完成です！
collapse.gif
　

? まとめ

大きい要素を一気に動かすほど重くなるので、やりすぎは注意してください。

やっていること自体はとても簡単な物ですが、アイデア次第でとても面白い事が出来ますね！エイプリールフールネタなどに使ってみたりも面白いと思います。

他にも少し応用して、5回クリック後に崩壊させてみたり

main.js
let count = 0;
$(".button").click(function () {
  count += 1;
  // クリックでcountが5回になったら
  if (count === 5) {
    $(".collapse1").addClass("animate__animated animate__hinge");
    setTimeout(function () {
      $(".collapse2").addClass("animate__animated animate__hinge");
    }, 1000);
  }
});

　
画像を変えたり、別のアニメーションを追加するなど色々カスタマイズして、
自分ポートフォリオなどに実装しても面白いかもしれませんね！

（キャラアイコンをクリックし過ぎると怒って崩壊するイースターエッグ）

　

リンク

記事のLGTM:thumbsup:など貰えたらとても励みになります。

:octocat: GitHub
https://github.com/aocattleya
? Twitter
https://twitter.com/aocattleya
? Qiita
https://qiita.com/aocattleya

・ 前回の記事
【GitHub】README.mdをカッコ可愛くデザインしてアプリの魅力を120%にする

  • このエントリーをはてなブックマークに追加
  • Qiitaで続きを読む
  • 投稿日：2020-07-01T17:52:11+09:00

CSSアニメーションとJSで崩壊するサイトを簡単に作る

今回はサイトに崩壊するイースターエッグ（隠し要素）みたいな物を、基本的なコードのみで実装してみたので方法をまとめます。
なので初学者の方でも比較的分かりやすいかと思います。

インフラエンジニア「もっと手軽に崩壊できる。」
CSS職人「こんな崩壊にしてみました。」
やらかしエンジニア「崩壊しました。」
な話がある場合はぜひ教えてください！（自分は最近やらかしました。）
　

? 作ったもの

collapse.gif
（↑サンプルページのGif動画）

■ サンプルサイトURL（PCのみ）
https://aocattleya.github.io/Collapse-Site

■ GitHub
https://github.com/aocattleya/Collapse-Site

サイト内のキャラクターアイコンをクリックすると、サイトが崩壊します。

今回は解説がしやすいのでjQueryで解説します。
アイデア重視で実際やってることは簡単なので、Vue.jsなどでも簡単に応用出来ます。
　

簡単な仕組み解説

クリックした場合にフェードアウトするアニメーションのクラスを追加する。

もっと簡単にいうと、クリックでクラスを追加する。

使用している物 説明
HTML, CSS ---
javaScript jQuery, Vue.js, その他
クラスを追加出来れば何でもOK
Animate.css CSSアニメーションを簡単に
実装出来るライブラリ

　

Animate.css

もちろん自分でアニメーションを作っても良いですが、難しいアニメーションなんて作れない！という方に、フェードインや跳ねたりのアニメーションをクラスを付けるだけで簡単に実装出来るライブラリがあります。

・Animate.css（公式サイト）
https://daneden.github.io/animate.css

簡単に使い方の紹介です。

１、ライブラリを読み込む
ダウンロードして読み込みも出来ますが、CDN（ヘッダーにURL置くだけ）でも使用出来ます。

index.html
<head>
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/4.0.0/animate.min.css">
</head>

CDNのバージョンによってクラス名が違ったりするので公式のREADMEにて
npmなど他の方法でインストールしたい場合なども書かれています。
→　animate.css（GitHub）

２、クラスを付ける

アニメーションを使用したいクラスに、animate__animatedとアニメーションのクラスを付与

index.html
<div class="animate__animated animate__fadeInUp">フェードインするよ</div>

これでページを読み込んだ時に、すでに反映されています。簡単！

animete.gif
どんなアニメーションのクラスがあるかは、公式サイトで実際の動きを確認できます。
スピードを変えたりなどのオプションもあります。

→ 公式サイト
　

? クリックで落下

hinge.gif

Animate.cssで簡単にアニメーションが実装出来る事が分かったところで、
次に、要素をクリックしてアニメーションのクラスを追加し、フェードアウトさせます。

何でもOKですが、今回はjQueryでクラス追加してみます。

index.html
<div class="collapse">
  <div class="button">ボタン</div>
</div>
style.css
.collapse {
  width: 200px;
  height: 200px;
  background-color: lightblue;
}

buttonクラスをクリックすると、
collapseクラスにanimate__animated animate__hingeの2つのクラスを追加する。

※hingeは、animete.cssの中のポロッと落下するアニメーションの1つです。

main.js
// クリックでクラス追加
$('.button').click(function() {
  $(".collapse").addClass("animate__animated animate__hinge");
})


サンプル全部見たい人用（クリックで開く）
index.html
<!DOCTYPE html>
<html lang="ja">
  <head>
    <meta charset="UTF-8" />
    <link rel="stylesheet" href="style.css" />
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/4.0.0/animate.min.css" />
    <title>クリックで崩壊</title>
  </head>
  <body>
    <div class="collapse">
      <div class="button">クリック</div>
    </div>
    <script src="https://code.jquery.com/jquery-3.4.1.min.js"></script>
    <script src="main.js"></script>
  </body>
</html>
style.css
.collapse {
    width: 200px; height: 200px;
    background-color: lightblue; }
main.js
$('.button').click(function() {
    $(".collapse").addClass("animate__animated animate__hinge");
})

基本はこれだけです。
あとはアニメーションを要素に追加するタイミングを変えて全体が崩壊していくように見せます。
　

? 連続で落下し崩壊

rem0h-tyoak-compressor.gif

ボタンクリック後に2つ目を一定時間後に実行させます。
一定時間後に特定の処理を行うにはsetTimeout()を使います。

index.html
<div class="contents">
  <div class="collapse1">
    <div class="button">クリック</div>
  </div>
  <div class="collapse2"></div>
</div>
main.js
$(".button").click(function () {
  // 1つ目に追加
  $(".collapse1").addClass("animate__animated animate__hinge");
  // 2つ目に追加（1秒後）
  setTimeout(function () {
    $(".collapse2").addClass("animate__animated animate__hinge");
  }, 1000);
});

　
今回はシンプルにこんな形で、あとはアニメーションをさせたい要素に好きなタイミングで付けていくと崩壊するサイトが完成です！
collapse.gif
　

? まとめ

大きい要素をほど重くなるので、やりすぎは注意してください。

やっていること自体はとても簡単な物ですが、アイデア次第でとても面白い事が出来ますね！エイプリールフールネタなどに使ってみたりも面白いと思います。

他にも少し応用して、5回クリック後に崩壊させてみたり

main.js
let count = 0;
$(".button").click(function () {
  count += 1;
  // クリックでcountが5回になったら
  if (count === 5) {
    $(".collapse1").addClass("animate__animated animate__hinge");
    setTimeout(function () {
      $(".collapse2").addClass("animate__animated animate__hinge");
    }, 1000);
  }
});

　
画像を変えたり、別のアニメーションを追加するなど色々カスタマイズして、
自分ポートフォリオなどに実装しても面白いかもしれませんね！

（キャラアイコンをクリックし過ぎると怒って崩壊するイースターエッグ）

　

リンク

記事のLGTM:thumbsup:など貰えたらとても励みになります。

:octocat: GitHub
https://github.com/aocattleya
? Twitter
https://twitter.com/aocattleya
? Qiita
https://qiita.com/aocattleya

・ 前回の記事
【GitHub】README.mdをカッコ可愛くデザインしてアプリの魅力を120%にする

  • このエントリーをはてなブックマークに追加
  • Qiitaで続きを読む
  • 投稿日：2020-07-01T14:59:14+09:00

指定したHTML要素にスクロール

JavaScript で指定した HTML 要素にスクロールさせます。自動的にフォーカスを移動させることなどを想定しています。

よくある処理だと思いますが、そのものズバリのサンプルが見当たらなかったので、実装を残しておきます。

See the Pen ensureVisible by 七誌 (@7shi) on CodePen.

このサンプルでは [Start] をクリックすると、0.5 秒ごとに選択位置を移動して、それに追随してスクロールします。

実装

.NET Framework の ListView には EnsureVisible というメソッドがあり、指定した項目が画面外にある場合はスクロールして表示することができます。

それを真似て HTML でも ensureVisible を実装しました。マージンと HTMLElement を指定します。HTMLElement は複数指定できます。

function ensureVisible(margin, ...elems) {
  let rs = elems.map((elem) => elem.getBoundingClientRect());
  let tp = Math.min(...rs.map((r) => r.top   )) - margin;
  let bt = Math.max(...rs.map((r) => r.bottom)) + margin;
  if (tp < 0) {
    let top = pageYOffset + tp;
    scroll({ top: top, behavior: "smooth" });
  } else if (bt > innerHeight) {
    let top = pageYOffset + tp - (innerHeight - (bt - tp));
    scroll({ top: top, behavior: "smooth" });
  }
}

位置の指定

getBoundingClientRect は画面上の位置（相対座標）を取得します。スクロールすると変化します。

scroll はドキュメント上の位置（絶対座標）を指定します。そのため表示の開始位置 pageYOffset を足すことで補正します。今回の実装ではスムーズスクロールを利用しています。

    scroll({ top: top, behavior: "smooth" });

スクロール量を指定する scrollBy もありますが、スムーズスクロールをサポートしていないため利用しませんでした。

サンプル

サンプルでは 0.5 秒のウェイトを Promise で処理しています。

function wait(timeout) {
  return new Promise((resolve, reject) => setTimeout(resolve, timeout));
}

start.onclick = async () => {
  for (let td of Array.from(table.getElementsByTagName("td"))) {
    ensureVisible(20, td);
    td.classList.add("selected");
    await wait(500);
    td.classList.remove("selected");
  }
  ensureVisible(20, moveToTop);
};

詳細は以下の記事を参照してください。

経緯

音声合成の読み上げ位置を追うために実装しました。

  • このエントリーをはてなブックマークに追加
  • Qiitaで続きを読む
  • 投稿日：2020-07-01T13:17:22+09:00

webiopiの質問です

webiopiを使って、ブラウザに複数のボタンを表示させ、ラズベリーパイの複数のGPIOをon,offしたいのですが、うまくいきません。
具体的にはGPIO12,13をそれぞれブラウザのボタンでON,OFFしたいのですが。
下記のようにプログラムを作成すると、ブラウザが「このサイトにアクセスできません」と表示されます。script.pyの7行目「LIGHT2 = 13」と14行目「GPIO.setFunction(LIGHT2, GPIO.OUT)」と最終行「GPIO.digitalWrite(LIGHT2, GPIO.LOW)」を消すと、ブラウザはアクセスできて、GPIO12だけ操作できます。
GPIO13も操作できるようにするにはどうしたらいいでしょうか？
宜しくお願い致します。

index.html
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <title>WebIOPi | Light Control</title>
    <script type="text/javascript" src="/webiopi.js"></script>
    <script type="text/javascript">
    webiopi().ready(function() {
        var content,button;
        content=$("#content");

        // Create a "Light" labeled button for GPIO 12
        button = webiopi().createGPIOButton(12, "ranp1");

        // Append button to HTML element with ID="controls" using jQuery
        $("#controls").append(button);
        button = webiopi().createGPIOButton(13, "Light2");
        $("#controls").append(button);

        // Refresh GPIO buttons
        // pass true to refresh repeatedly of false to refresh once
                webiopi().refreshGPIO(true);
    });

    </script>

<style type="text/css">
        button {
            display: block;
            margin: 5px 5px 5px 5px;
            width: 160px;
            height: 45px;
            font-size: 24pt;
            font-weight: bold;
            color: white;
        }

        #gpio12.LOW {
            background-color: Black;
        }

        #gpio12.HIGH {
            background-color: Blue;
        }

    #gpio13.LOW {
            background-color: Black;
        }

        #gpio13.HIGH {
            background-color: Blue;
        }
    </style>

</head>
<body>

<div id="controls" align="center"></div>

</body>
</html>
script.py
#! /usr/bin/env /usr/bin/python3
#_*_ cording:utf-8 _*_
import webiopi
import datetime


GPIO = webiopi.GPIO

LIGHT = 12 # GPIO pin using BCM numbering
LIGHT2 = 13
HOUR_ON  = 8  # Turn Light ON at 08:00
HOUR_OFF = 18 # Turn Light OFF at 18:00

# setup function is automatically called at WebIOPi startup
def setup():
    # set the GPIO used by the light to output
    GPIO.setFunction(LIGHT, GPIO.OUT)
    GPIO.setFunction(LIGHT2, GPIO.OUT)

    # retrieve current datetime
    now = datetime.datetime.now()

    # test if we are between ON time and tun the light ON
    if ((now.hour >= HOUR_ON) and (now.hour < HOUR_OFF)):
        GPIO.digitalWrite(LIGHT, GPIO.HIGH)

# loop function is repeatedly called by WebIOPi 
def loop():
    # retrieve current datetime
    now = datetime.datetime.now()

    # toggle light ON all days at the correct time
    if ((now.hour == HOUR_ON) and (now.minute == 0) and (now.second == 0)):
        if (GPIO.digitalRead(LIGHT) == GPIO.LOW):
            GPIO.digitalWrite(LIGHT, GPIO.HIGH)

    # toggle light OFF
    if ((now.hour == HOUR_OFF) and (now.minute == 0) and (now.second == 0)):
        if (GPIO.digitalRead(LIGHT) == GPIO.HIGH):
            GPIO.digitalWrite(LIGHT, GPIO.LOW)

    # gives CPU some time before looping again
    webiopi.sleep(1)

# destroy function is called at WebIOPi shutdown
def destroy():
    GPIO.digitalWrite(LIGHT, GPIO.LOW)
    GPIO.digitalWrite(LIGHT2, GPIO.LOW)
  • このエントリーをはてなブックマークに追加
  • Qiitaで続きを読む
  • 投稿日：2020-07-01T10:37:43+09:00

JavaScript FizzBuzz問題の作り方

目次

  • はじめに
  • FizzBuzz問題の作り方
  • HTML
  • JavaScript
  • 学んだこと
  • おわりに

はじめに

今回はJavascriptの基本的な概念DOMを操作して、FizzBuzz問題を作っていきます。
イチから全部作り方を書くというよりは、作っていく流れを書き、
実際に作る中で僕が躓いたり、ここは大事だなと感じた箇所などを説明していきます。
同じようなことで行き詰まっている初心者の方のお力になれれば幸いです。

FizzBuzz問題の作り方

基本的にHTMLとJavaScriptを使って作成します。
CSSは特に使いません。
HTMLの要素も至ってシンプルです。
なぜなら、今回の実装ではJavaScriptを使ってDOMを操作することが目的だからです。
HTMLで作った画面を作り、それに対してJavaScriptで色々操作していく、という流れになります。

HTML

まずはHTMLから作っていきます。
HTMLの作りはとてもシンプルで簡単なものです。

見出し h1タグ
２つの数値入力ボックス pタグ
実行ボタン buttonタグ
「出力」 pタグ

それだけです。
見た目としては以上になります。

そして、大事なscriptタグ
このタグがあることで簡単にHTMLとJavaScriptを繋げることが出来ます。
このタグがないとJavaScriptを発動出来ません。
これだけは忘れずに書いてください。

色々決まりはありますが、
基本的にscriptタグはbodyの末尾辺りに置く慣習になっています。

JavaScriptは違うページに専用ファイルとして書いていきます。
(文が長くなって読みにくくなるのを防ぐためであったり、それもまた慣習となっています。)
そのためsrc属性を使って、リンク先だけを書いておきます。

<body>
  <h1>FizzBuzz問題</h1>
  <p>FizzNum: <input type="text" name="fizzes" id="fizz" placeholder="整数値を入力してください"></p>
  <p>BuzzNum:<input type="text" name="buzzes" id="buzz" placeholder="整数値を入力してください"></p>
  <button value="実行" id="btn">実行</button>
  <div id="output">
    <p>【出力】</p>
  </div>

  <script src="main.js"></script>
</body>

またJavaScriptを使ってDOMを操作するのに必要になるのがidです。
何箇所にidがセットされているのがわかるかと思います。
このidが後々非常に役に立ちます。

HTMLは以上で完了です。
ブラウザに映る元々の表示の役割を担ってくれています。
出来ることはここまでです！
これから先の実装はJavaScriptに任せることとします。

JavaScript

//FizzNum, BuzzNumに数値を入力し、実行を押したときの挙動//


//HTMLの中からIdがbtnの要素を取得
const btn = document.getElementById('btn');

//ボタン要素のクリックイベントをトリガーにコールバック処理を作成
btn.addEventListener('click', () => {

次にJavaScriptでの処理です。
別ファイルに作ったmain.jsに書き込んでいきます。

基本的にコードは始まりはこれを書かなければいけないという厳密な決まりはないので、なにから書いてもいいはずです。
ただ、通常コードは上から下に読み込まれていくので、その点は考える必要があります。

まず、要素をidから取得します。そのためにhtmlで要素にidを付与する訳です。
その要素に対してイベント(何かしらの処理を行う)を発動する行為が、EventListenerです。
この流れはJavaScriptでは鉄板です。何回も使います。
指が覚えるくらい繰り返してもいいと思います。

//入力値の取得//

  //HTMLの中からIdがfizzの要素を取得
  const elemFizzNumber = document.getElementById('fizz');

  //fizzNumのinputに入力された数字から値を取得
  const fizzNumber = elemFizzNumber.value;

  //HTMLの中からIdがbuzzの要素を取得
  const elemBuzzNumber = document.getElementById('buzz');

  //BuzzNunのinputに入力された数字から値を取得
  const buzzNumber = elemBuzzNumber.value;

この次も要素の取得の流れは続きます。
要素を取得し、更に要素に入力された値を取得しています。
valueが登場してきます。
取得した要素を後でたくさん使うので、先に色々と取得しておく必要があります。
この辺りの考え方もプログラミングならでは、ですね。

//結果情報のベース作成//

  //HTMLの中からIdがoutputの要素を取得
  const outputArea = document.getElementById('output');

  //結果要素の子要素を取得
  outputArea.innerHTML = '';

  //pタグの要素を作成
  const ptag = document.createElement('p');

  //pタグの要素に結果情報ヘッダーの固定値をセット
  ptag.textContent = '【出力】';

  //結果要素の子要素としてpタグの要素を追加
  outputArea.appendChild(ptag);

必要な要素が取得できたら、次はその要素をブラウザに表示するための処理が必要です。
次にcreateElementが出てきます。
要素を取得したり、要素を作り出したり、なんせ要素は大事です。
この辺りも一連の流れになっているので、繰り返せば頭に自然に入ってくるはずです。

一文一文に意味があり、
やること(必要な処理)を流れで考えている、のがわかるかと思います。

//結果情報の中身を作成//

  //fizzbuzz問題のループ文

  // 変数iを定義し、iが100より小さい場合、iに1ずつ足していく処理を実行
  for (let i = 1; i < 100; i++) {

    //バリューを取得するための変数を定義
    let value = '';

    //iがfizzes、buzzesの両方の数値の倍数である場合の処理
    if (i % fizzNumber === 0 && i % buzzNumber === 0) {

      //ブラウザに表示するための文字列と取得した値をバリューとして用意
      value = "FizzBuzz" + " " + i;

      //がiがfizzesの倍数である場合の処理
    } else if (i % fizzNumber === 0) {

      //ブラウザに表示するための文字列と取得した値をバリューとして用意
      value = "Fizz" + " " + i;

      //がiがbuzzesの倍数である場合の処理
    } else if (i % buzzNumber === 0) {

      //ブラウザに表示するための文字列と取得した値をバリューとして用意
      value = "Buzz" + " " + i;

      //iがどちらの倍数でもない場合の処理
    } else {

      //何も表示させないものとして用意
      value = '';
    }

次は肝心のFizzBuzz文です。
for文の中でif文を用います。
最初に取得した要素もここで使用する訳です。
必要なものを先に準備して、後で使う。それがイメージできれば、構文も考えやすくなります。

言葉にはできてもコードで書くのは難しいです。
for文にしろ、if文にしろ、プログラミングには書き方(法則)があるので、それを自分の脳内に落とし込む作業が必要になります。
頭に入ってしまえば、後は必要なときに取り出すだけです。

これだけあれば、FizzBuzz文をブラウザに表示できます。
後は、エラーが出たときの処理を付け足したりして、より強固な機能を付け加えるといいかと思います。

以上が、FizzBuzz問題の作り方です。

以下、全体のコード

`use strict`

//FizzNum, BuzzNumに数値を入力し、実行を押したときの挙動//


//HTMLの中からIdがbtnの要素を取得
const btn = document.getElementById('btn');

//ボタン要素のクリックイベントをトリガーにコールバック処理を作成
btn.addEventListener('click', () => {

  //入力値の取得//

  //HTMLの中からIdがfizzの要素を取得
  const elemFizzNumber = document.getElementById('fizz');

  //fizzNumのinputに入力された数字から値を取得
  const fizzNumber = elemFizzNumber.value;

  //HTMLの中からIdがbuzzの要素を取得
  const elemBuzzNumber = document.getElementById('buzz');

  //BuzzNunのinputに入力された数字から値を取得
  const buzzNumber = elemBuzzNumber.value;

  //結果情報のベース作成//

  //HTMLの中からIdがoutputの要素を取得
  const outputArea = document.getElementById('output');

  //結果要素の子要素を取得
  outputArea.innerHTML = '';

  //pタグの要素を作成
  const ptag = document.createElement('p');

  //pタグの要素に結果情報ヘッダーの固定値をセット
  ptag.textContent = '【出力】';

  //結果要素の子要素としてpタグの要素を追加
  outputArea.appendChild(ptag);

  //結果情報の中身を作成//

  //fizzbuzz問題のループ文

  // 変数iを定義し、iが100より小さい場合、iに1ずつ足していく処理を実行
  for (let i = 1; i < 100; i++) {

    //バリューを取得するための変数を定義
    let value = '';

    //iがfizzes、buzzesの両方の数値の倍数である場合の処理
    if (i % fizzNumber === 0 && i % buzzNumber === 0) {

      //ブラウザに表示するための文字列と取得した値をバリューとして用意
      value = "FizzBuzz" + " " + i;

      //がiがfizzesの倍数である場合の処理
    } else if (i % fizzNumber === 0) {

      //ブラウザに表示するための文字列と取得した値をバリューとして用意
      value = "Fizz" + " " + i;

      //がiがbuzzesの倍数である場合の処理
    } else if (i % buzzNumber === 0) {

      //ブラウザに表示するための文字列と取得した値をバリューとして用意
      value = "Buzz" + " " + i;

      //iがどちらの倍数でもない場合の処理
    } else {

      //何も表示させないものとして用意
      value = '';
    }

    //要素を追加するためのpタグ要素を作成
    const fizzbuzz = document.createElement('p');

    //テキストの内容に、ループ文で取得した値を入力する
    fizzbuzz.textContent = value;

    //親要素であるdivタグの要素を取得
    const div = document.querySelector('div')

    //div要素の子要素として追加
    outputArea.appendChild(fizzbuzz);
　}
});

学んだこと

一から何かを作るのは大変です。
私は一ヶ月ほどかかって今回のFizzBuzz問題の作り方を理解しました。
時間はかかりましたが、考えを頭に落とし込むにはそのくらいの時間をかけてもいいと思います。

例え簡単なFizzBuzz文であっても、本当にわからないことだらけでした。
わからないながらでも作っていき、その中で学んでいくことが大半です。

コード自体は学習したことをそのまま応用しているだけなので、難しいことは書いていません。
しかし、学んだことを応用する作業が非常に難しいです。

何を書けばいいかわからない(頭に浮かんでこないから)という問題は、私も例外なく陥りました。
そのくらい、プログラミングは生活から切り離されているもの(馴染みのないもの)なんだなと感じました。
こればっかりは繰り返して学んでいくしかないので、
プログラミングという概念を頭に埋め込んでいく時間が必要です。

また、DOM操作も初心者が躓く概念だと思います。
普段の生活でDOMのような考え方はありませんから、最初はよくわからないのも当然です。
しかし、JavaScriptを学ぶ上でDOMの概念は切っても切れないので、しっかり脳内に刻み込んでおく必要があります。

ここは踏ん張りどころです。一つ一つ乗り越えていくしかありません。
その過程で出来ないことが出来るようになっていくのはとても嬉しいものです。

教材で学習するのは最低限必要ですが、その先は何かを作れ、という先人達のアドバイスは本当にその通りだと思いました。

おわりに

今回は私が初めて行った課題について説明しました。
今振り返ると簡単なことでも、振り返ると当初は全然わからず、頭を抱えていました。
初歩的なことでも初心者はわからないものです。

振り返ると、自分も少しは理解できていることに気づきます。
きっとプログラミング学習は、そんな小さな喜びの連続なんだと思っています。

毎日勉強して、新しいことを吸収していきたいものです。

人に説明するのも難しいものです。
と同時に、自身の学びにも繋がるので、随時アウトプットしていきます。

ありがとうございました。

  • このエントリーをはてなブックマークに追加
  • Qiitaで続きを読む
  • 投稿日：2020-07-01T09:47:13+09:00

【HTMLのみでOK】class/id必要なしの超手軽で軽量なCSSを利用する

はじめに

「bootstrap」に代表されるCSSフレームは、とても便利ですので利用してきました。普段から使い倒しており、もう身についた、という方であれば問題ないと思いますが、たまにしか使わない私のようなものにとっては、指定するclassを調べながら指定していくのは少々面倒だな、と思っていました。（簡単なHTMLを作成するときなどは、特にそう思いました）

classやidを指定しなくてもよい方法があるということを知りましたので試してみました。
classless CSS framework というそうです。

用意するのはHTMLのみで、class/idの指定は必要ありません。とにかく簡単で、HTMLのheadタグに1行追加するだけでいい感じにしてくれます。

①new.css

追加するコード

sample.html
<head>
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@exampledev/new.css@1/new.min.css">
</head>

デモサイト
https://newcss.net/demo/

01.png

npm/yarnにも対応している。

npm i @exampledev/new.css
yarn add @exampledev/new.css

また、テーマもありナイトモードやターミナルモードがあり、爆速で変更・適用が可能。

  • ナイトテーマを適用
samle.html
<head>
  <link rel="stylesheet" href="https://newcss.net/theme/night.css">
</head>
  • ターミナルテーマを適用
sample.html
<head>
  <link rel="stylesheet" href="https://newcss.net/theme/terminal.css">
</head>

ターミナルテーマを適用したサンプルサイトはこちら

02.png

②mvp.css

追加するコード

sample.html
<head>
  <link rel="stylesheet" href="https://unpkg.com/mvp.css">
</head>

デモサイト
https://andybrewer.github.io/mvp/

03.png

サンプルサイトはこちら

04.png

まとめ

  • classless CSS frameworkは、簡単なHTMLでスタイルを整えたい場合、とても便利だと思いましたので、積極的に使っていきたいなと思いました。

おまけ

CSSフレームワークを適用して確認するのは、レスポンシブに対応できているかどうかだと思います。同時にデバイスを確認するサイト・ツールは、こちらが便利です。（IDの登録などは不要）

everysize

https://everysize.kibalabs.com/
05.png

参照URL

new.css

mvp.css

  • このエントリーをはてなブックマークに追加
  • Qiitaで続きを読む
  • 投稿日：2020-07-01T08:23:12+09:00

viewportを調査【継続中】

viewport関連のWebサイト記事や書籍を読んでも理解できないので

書籍『レスポンシブWebデザイン入門』のサンプルを使って試行してみました。

やったここと（１）
でサンプルからcssを削除しviewportの設定ありなしで違いを確認

//viewportは有りと無し2種類を確認
<meta name="viewport" content="width=device-width, initial-scale=1">
//<meta name="viewport" content="width=device-width, initial-scale=1">

//cssは削除
<!-- <link rel="stylesheet" href="css/style.css"> -->

結果（１）
『viewポートなし』は一部しか表示されずスクロールする必要が生じる
『viewポートあり』は画面サイズに応じて文字は折り返される。画像は画面サイズより大きいままとなる。

結論
文字を設定したviewportサイズで折り返してくれる機能
※違っていたら今後修正します

  • このエントリーをはてなブックマークに追加
  • Qiitaで続きを読む
  • 投稿日：2020-07-01T03:08:29+09:00

【Rails】PCにもスマホにもアイコンを表示したい！ favicon設定まとめ

faviconを設定したい。PCのブラウザ上では、サイト名の横に表示されるあの画像ですね。faviconがあるかないかで、サイトの信頼感や覚えてもらいやすさが変わってきますので、ぜひ設定したいところ。
スクリーンショット 2020-07-01 2.07.55.png
特にスマホの設定（ホーム画面にリンクを貼ったときなどに表示される画像になる）で「本当にこれでいいのだろうか」と思いながらの実装した背景もあり、まとめて残しておこうと思いました。
なお、本記事では、Railsでhamlを使って書いた例をそのまま載せてあります。

PC用のfavicon

まずはPCのfaviconの設定方法です。

(1) ico形式の画像を用意

設定したい画像をico形式で用意しました。持っている画像が他の形式の場合は「ico 変換」などで検索するとオンライン上に簡単に変換できるサービスが見つかります。

(2) assets/images 以下に置く

ここでは、画像は assets/images の直下に置きました。お好みでどうぞ。

(3) application.html.haml のhead部分で呼び出す

application.html.haml のheadのなかにfavicon_link_tagを使って次のように書きました。

%head
  = favicon_link_tag 'xxxx.ico'

以上でPC用のfaviconは無事に反映される、はずです。
Rails sで立ち上げ直すと、ローカルでも確認することができます。

スマホ用のfavicon

次に、スマホのfaviconの設定方法です。

(1) png形式の画像を用意する

iOS用とAndroid用で2つのpng形式の画像を用意しました。

＊ iOS用画像の注意点

  • 背景が透過されているものを使用すると黒背景になるようです。そのため、背景色を含む画像を設定するのが無難でしょうか。
  • ホームに追加された時のアイコンになりますが、下のように角が丸く削れます。その点も計算に入れると良い感じになりそうです。

IMG_5425.jpg

＊ Android用画像の注意点

  • 透過が反映される or されないなど、諸々機種によって異なるそうです。そうなのか。

［参考］favicon大解剖 〜必要サイズから検証時の注意点まで〜

(2) assets/images 以下に置く

こちらも、画像は assets/images の直下に置きました。お好みでどうぞ。

(3) application.html.haml のhead部分で呼び出す

iOS用とAndroid用で次のように書きました。

%head
  = favicon_link_tag 'xxxx180x180.png', rel: 'apple-touch-icon', sizes: '180x180', type: 'image/png'
  = favicon_link_tag 'xxxx192x192.png', rel: 'android-touch-icon', sizes: '192x192', type: 'image/png'

以上でスマホでも画像が表示されるようになるはず、です。
なお、事前に検証する方法がわからなかったため、わたしの場合はデプロイしてはじめて表示されていることを確認したという…。無事に設定できてよかったです。

参考

以上の記事とGitHubに公開されているコードを参考に解決できました。ありがとうございました。

  • このエントリーをはてなブックマークに追加
  • Qiitaで続きを読む

日付別

タグ一覧