投稿日：2019-07-19T21:42:31+09:00

Bootstrap で文字の太さを設定

目的

Bootstrapを用いてCSSでの設定のfont-weightプロパティと同じ表示にする方法をまとめる。

前提条件

Bootstrapの設定が読み込まれるようになっている

Bootstrapのテンプレートを使用してHTMLファイルをコーディングしている。
※Bootstrapの設定を反映させるためのテンプレートはこちらのスターターテンプレート内のコードをコピーする。

押さえるポイント

Bootstrapで既に定義された内容を設定したい時はHTMLファイルのクラス名に定義名を記載する。

通常の文字を太字に設定するときはクラス名にfont-weight-boldを追加する。

太字を細字に設定するときはクラス名にfont-weight-normalを追加する。

書き方の例

p要素のテキストを太字に設定する。

下記にHTMLファイルの内容を記載する。
<p class="font-weight-bold">おはようございます。</p>
h1要素のテキストを細字に設定する。

下記にHTMLファイルの内容を記載する。
<h1 class="font-weight-normal">おはようございます。</h1>

　 Tweet
Qiitaで続きを読む

投稿日：2019-07-19T21:40:25+09:00

Bootstrap で要素のテキストを中央に配置する方法

目的

Bootstrapを用いてCSSで設定する所のtext-aline: center;と同じ表示にする方法をまとめる

前提条件

Bootstrapの設定が読み込まれるようになっている

Bootstrapのテンプレートを使用してHTMLファイルをコーディングしている。
※Bootstrapの設定を反映させるためのテンプレートはこちらのスターターテンプレート内のコードをコピーする。

押さはえるポイント

Bootstrapで既に定義された内容を設定したい時はHTMLファイルのクラス名に定義名を記載する。

テキストを要素の中央に配置するにはクラス名にtext-centerを追加する。

右寄り、左寄りの設定も可能

書き方の例

h1要素のテキストを中央に配置する。

下記にHTMLファイルの内容を記載する。
<h1 class="text-center">おはようございます。</h1>
h1要素のテキストを左寄りに配置する。

下記にHTMLファイルの内容を記載する。
<h1 class="text-left">おはようございます。</h1>
h1要素のテキストを右寄りに配置する。

下記にHTMLファイルの内容を記載する。
<h1 class="text-right">おはようございます。</h1>

　 Tweet
Qiitaで続きを読む

投稿日：2019-07-19T21:38:58+09:00

絶対パス、ルート相対パス、相対パスが混在するHTMLをなんとかする（暫定処置）

前書き

サイト制作および保守運用対応の最中で、現場より以下のような相談をいただきました。

「Aタグにテストドメインへのリンクと、本番ドメインへのリンクが混在しているのを何とかできないか？」

ん・・・どういうこと？
確認したところ、静的ページのHTML内で、
次のような実装が行われている場所がチラホラあるようです。
<a href="https://honban_web_site.xxxxx.yyyyy.zzzzz/aaaaa.html">Aページ</a>
<a href="./aaaaa.html">Bページ</a>
<a href="/aaaaa.html">Cページ</a>
パスの書き方が混在しています。これだと確かにリンクが混在してしまいますね。
制作者やその時の状況によって書き方が異なっていた、という状態のようです。
（動的生成しているページはそのあたりを考慮しているので、上記事象は起きていません。）

パスの書き方は、どこかで統一するよう舵きりしていただきたいですが、
それとは別アプローチで暫定対処できる方法は無いものかと考えてみました。

何がしたいのか

テストドメイン上でのアクセス時限定で、
「テストドメインへのリンクと、本番ドメインへのリンクが混在している」
のを、HTMLは直接修正せずに暫定対処したい。

なお、想定されるリンクの種類と修正対応は次の通り。

Aタグ内で定義されたリンクの種類と修正対応

パスドメイン詳細修正対応

絶対パス本番ドメイン末尾がファイル名本番ドメインをテストドメインに書き換える

絶対パス本番ドメイン末尾が半角スラッシュ本番ドメインをテストドメインに書き換える

絶対パス本番ドメイン末尾がドメイン末尾文字本番ドメインをテストドメインに書き換える

絶対パス外部ドメイン考慮しない何もしない

ルート相対パスアクセス中のドメイン半角スラッシュとファイル名テストドメインの絶対パスに書き換える

相対パスアクセス中のドメイン基点が同じ階層 (ファイル名) テストドメインの絶対パスに書き換える

相対パスアクセス中のドメイン基点が同じ階層 (./) テストドメインの絶対パスに書き換える

相対パスアクセス中のドメイン基点が上の階層 (../) テストドメインの絶対パスに書き換える

やったこと

テストドメイン上でのアクセス時限定で、
A タグの href を「テスト環境ドメイン」を示す絶対パスに書き換える処理を、
読み込ませるようにしてみました。

構成
sample.html (該当のHTMLファイルです)
┗ jquery-x.x.x.min.js (jQueryファイルです)
┗ domainchk.js (ホスト名がテスト環境の場合のみ「href_replace.js」を読み込む)
　┗ href_replace.js (A タグ の href を「テスト環境ドメイン」に書き換える処理)
まずはHTMLの構成。
上述の「リンクの種類と修正対応」を参考に、現場でみたHTMLのサンプルを準備しました。
HTML内では、絶対パス、ルート相対パス、相対パスが、混在した状態になっています。

sample.html
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "https://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="https://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>HOST書き換えテスト</title>
<meta http-equiv="Content-Style-Type" content="text/css" />
<meta http-equiv="Content-Script-Type" content="text/javascript" />
<meta http-equiv="X-UA-Compatible" content="IE=edge"/>
<script type="text/javascript" src="/js/jquery-x.x.x.min.js"></script>
<script type="text/javascript" src="/js/domainchk.js"></script>
</head>
<body>
<b>テストドメインでアクセスした時だけ A タグ のリンクURLを「テストドメインの絶対パス」に書き換えます</b>
<hr>
<a href="https://honban-xxxxx.yyyyy.zzzzz/index.html">絶対パス 本番ドメイン 末尾がファイル名</a><br>
<a href="https://honban-xxxxx.yyyyy.zzzzz/">絶対パス 本番ドメイン 末尾が半角スラッシュ）</a><br>
<a href="https://honban-xxxxx.yyyyy.zzzzz">絶対パス 本番ドメイン 末尾がドメイン末尾文字</a><br>
<a href="https://www.google.co.jp">絶対パス 外部ドメイン</a><br>
<a href="/index.html">ルート相対パス（/index.html）</a><br>
<a href="index.html">相対パス 基点が同じ階層 (ファイル名)（index.html）</a><br>
<a href="./index.html">相対パス 基点が同じ階層 (./)（./index.html）</a><br>
<a href="../index.html">相対パス 基点が上の階層 (../)（../index.html）</a>
</body>
</html>
上記HTML内から、以下のjsを読み込ませました。
実際には、各ページが共通で読み込むHTMLファイル上でjsを読みこませることで、
ファイルごとでjs読み込みをせずに済むよう処置しています。

domainchk.js
$(function() {
    var domain_now = $(location).attr('protocol') + '//' + $(location).attr('host') + '/';
    if (domain_now.match('/test.')) {
        $.getScript(domain_now + "/js/href_replace.js");
    }
});
domainchk.js の処理概要

$(location)を使うと、現在アクセスしているページURL等の情報を取得できます。
Location - Web API | MDN - Mozilla
https://developer.mozilla.org/ja/docs/Web/API/Location

domain_now には、現在アクセスしているページURLが入ってきます。
    var domain_now = $(location).attr('protocol') + '//' + $(location).attr('host') + '/';
次に、現在アクセスしているページURLに、
「テストドメインを示す文字が含まれるか」を確認してから、
別のjsファイルに書いた「hrefの書き換え処理」を読み込ませます。
（テストドメインを直書きすると世に存在が割れてしまうので、URLの部分一致による判断で済ませています。）

これらは、本番へリリースした時に本対応を動作させないための処置となります。
    if (domain_now.match('/test.')) {
        $.getScript(domain_now + "/js/href_replace.js");
    }
そして「hrefの書き換え処理」は、以下のとおりです。

href_replace.js
$(function() {
    $('a').each(function() {
        var obj = jQuery(this);
        var link = obj.attr("href");
        var url_now = $(location).attr('href');
        var domain_now = $(location).attr('protocol') + '//' + $(location).attr('host') + '/';
        var origin_url = 'https://honban-xxxxx.yyyyy.zzzzz';

        // 絶対パス の対処
        if (link.startsWith('http')) {
            // パス内に本番URLが含まれる
            if (link.startsWith(domain_org)) {
                // 本番URLの後に「/」があるかないか
                if (link.slice(domain_org.length, domain_org.length + 1) == '/') {
                    obj.attr("href", link.replace(domain_org + '/', domain_now));
                } else {
                    obj.attr("href", link.replace(domain_org, domain_now));
                }
            }
            return true;
        }

        // ルート相対パス (/) の対処
        if (link.startsWith('/')) {
            obj.attr("href", domain_now + link.replace('/', ''));
            return true;
        }

        // 相対パス 基点が同じ階層 (ファイル名 or ./) および 上の階層 (../) の対処
        obj.attr("href", new URL(link, url_now).href);
    });
});
href_replace.jsの処理概要

まず、該当ページ内のAタグを精査していきます。
    $('a').each(function() {
次に現在アクセスしているページURL等の情報を取得や、本番URLの定義など。
（呼び出し前の処理で済ませた方が良かったかもしれません。）
        var obj = jQuery(this);
        var link = obj.attr("href");
        var url_now = $(location).attr('href');
        var domain_now = $(location).attr('protocol') + '//' + $(location).attr('host') + '/';
        var origin_url = 'https://honban-xxxxx.yyyyy.zzzzz';
続いて、絶対パスの対処。
パス内に本番ドメインが含まれる場合のみ、
現在アクセスしているドメイン（テストドメインと同義）に書き換えます。

なお、外部ドメインは書き換えることなくそのままとしています。
        // 絶対パス の対処
        if (link.startsWith('http')) {
            // パス内に本番URLが含まれる
            if (link.startsWith(domain_org)) {
                // 本番URLの後に「/」があるかないか
                if (link.slice(domain_org.length, domain_org.length + 1) == '/') {
                    obj.attr("href", link.replace(domain_org + '/', domain_now));
                } else {
                    obj.attr("href", link.replace(domain_org, domain_now));
                }
            }
            return true;
        }
続いて、ルート相対パスの対処。
こちらはリンクの先端に、現在アクセスしているドメイン（テストドメインと同義）を追記すればOK。
そのまま絶対パスとして成立するはずです。
        // ルート相対パス (/) の対処
        if (link.startsWith('/')) {
            obj.attr("href", domain_now + link.replace('/', ''));
            return true;
        }
最後に、相対パスの対処。上記のどこにも該当しなかったものを処置対象としています。

URL()を使うと、相対パスを絶対パスに置換することができます。
URL() - Web API | MDN - Mozilla
https://developer.mozilla.org/ja/docs/Web/API/URL/URL

第１引数に相対パスを、第２引数に絶対パスのベースになるURL、
を指定すれば、絶対パスに変換してくれるスグレモノです。
        // 相対パス 基点が同じ階層 (ファイル名 or ./) および 上の階層 (../) の対処
        obj.attr("href", new URL(link, url_now).href);
これで、とりあえず完成。

実際に使ってみた感想

本番環境へ影響を与えない、かつ、HTML上のパスに手を入れることなく、
Aタグのリンクをテストドメインへ向けることができます。

パスの書き方が乱立している環境では、暫定処置としては中々役立つのではないでしょうか。

本当にやりたかったこと

以上は自分なりに空気を読んだ暫定処置でした。
本当にやりたかったことは「Aタグを全て絶対パスかルート相対パスに書き換える」です。
~~（だってね、バラバラじゃわかりにくいし管理でけへry）~~

ただ、制作者サイドにはそれなりの都合や理由があるわけです。
それゆえに、責任範囲外の場所で見つかった課題とどう向き合うかはいつも考えさせられるものです。

まぁ勉強がてら、今度そういう処理をPythonで書いてみようかな。

おまけ：HTML上のリンクはどう書くべきかの所感

適当にググった所感なのですが、なんだか色々と意見が割れている模様。
「絶対パス派」「ルート相対パス派」「相対パス派」とそれぞれに筋だった見解があるようです。

その上で、私なりの意見は「絶対パス」が良いかなと考えています。

理由

Google Search Console で絶対パスが推奨されている
https://support.google.com/webmasters/answer/35156?hl=ja

上記では、
「可能な場合は、相対リンクではなく絶対リンクを使用します（たとえば、サイト内の別のページにリンクするときに、mypage.html だけではなく https://www.example.com/mypage.html とします）」
と書かれているようです。

推奨の理由までは書かれていないようですが、
推察するに「相対パス」でリンク切れ（制作側のヒューマンエラー）が起きやすいことを、
Google側が体感しているから、なのかもしれません。

単にGoogleがそう言っているから、ではなくて、
その背景にあるものを考えると「絶対パス」がベターなのかなと考えるようになりました。
（上記を知るまでは「ルート相対パス」が良いかなと思ってました。）

まとめ

HTML上のパスはなるべく統一したルールで書いてもらいたいなぁと思った次第

パス	ドメイン	詳細	修正対応
絶対パス	本番ドメイン	末尾がファイル名	本番ドメインをテストドメインに書き換える
絶対パス	本番ドメイン	末尾が半角スラッシュ	本番ドメインをテストドメインに書き換える
絶対パス	本番ドメイン	末尾がドメイン末尾文字	本番ドメインをテストドメインに書き換える
絶対パス	外部ドメイン	考慮しない	何もしない
ルート相対パス	アクセス中のドメイン	半角スラッシュとファイル名	テストドメインの絶対パスに書き換える
相対パス	アクセス中のドメイン	基点が同じ階層 (ファイル名)	テストドメインの絶対パスに書き換える
相対パス	アクセス中のドメイン	基点が同じ階層 (./)	テストドメインの絶対パスに書き換える
相対パス	アクセス中のドメイン	基点が上の階層 (../)	テストドメインの絶対パスに書き換える

　 Tweet
Qiitaで続きを読む

投稿日：2019-07-19T21:37:09+09:00

Bootstrapとは

目的

Bootstrapとはなんなのかをまとめる

この記事のターゲット

Bootstrapと言う言葉を聞いたことはあるがなんなのかわからない方

Bootstrapで具体的に何ができるか知りたい方

CSSでいちいち設定を行うのが面倒な方

Webページ作成時間を短縮したい方

Webページを作ってみたいがheaderのイメージが決まらな方
※実際の詳しいBootstrapの使い方はたくさんの先駆者の皆さんが取り上げているので自分は詳しくはまとめないことにする
※本記事を読んで｢ふーん、Bootstrapってこんな感じのものなんだなー、使ってみようかなー｣となっていただければ幸い

Bootstrapを簡単に言うと

よく使う設定が既に定義されている便利なもの。

いちいちCSSファイルで背景色などを設定しなくても良い。

かっこいい見た目のリストを作れるテンプレートが沢山ある。

Bootstrapの公式サイトからプレビューを見た上でテンプレートをコピー出来る

ただ、全ての設定が定義されてる訳では無いので自分でもCSSを書く必要がある

使ってみよう

こちらからBootstrapの日本語リファレンスをのぞいてみよう
1. 新規ファイルとして「index.html」という名前のファイルをPCの任意の場所に作成する。
2. 「index.html」をエディタで開く。
3. ドキュメント → 中央付近に記載のある「スターターテンプレート」に記載されているHTMLファイル用のテンプレートをコピーしてエディタで開いた「index.html」に張る。
4. 保存して「index.html」をダブルクリックする。
※この時エディタは開いていてもOK
5. ブラウザ画面が起動し「Hellow, World!」と表示されたことを確認する。
6. エディタで開いた「index.html」のbody要素の中のh1要素にclassを作成しクラス名を「bg-primary」とする
7. 保存して「index.html」をダブルクリックする。
8. ブラウザ画面が起動し「Hellow, World!」と表示されている背景色が青色に変化する。

※このほかのBootstrapでの設定は日本語リファレンスで閲覧可能である。
※背景色などの設定はドキュメント → 左側のサイドバーのユーティリティ → 左側のサイドバーのColorsから確認できる

まとめ

Bootstrapの設定を反映したいときはクラス名で指定する。

ドットインストールやQiitaでもより細かい使い方やテクニックがまとめられている。

Bootstrapを活用することにより素早いコーディングか可能となる。

　 Tweet
Qiitaで続きを読む

投稿日：2019-07-19T20:45:53+09:00

Firebase の Realtime Databaseにてデータを降順で並び替える方法

Firebase の Realtime Database を使用した際に　orderByChild　では昇順でしか並び替えることができず困ったため、見つけた解決方法を投稿しようと思います。まだまだ初心者のため表現方法等は誤っているかもしれませんが、下記コードは一度実行し動作確認しております。

使用環境

-　AWS　Cloud9
-　Firebase　Realtime Database

Realtime Database のデータ構造

コード

HTML

Firebase の設定等の部分は省略します

  <button id="order">昇順</button>
  <button id="reverse">降順</button>
  <button id="reset">リセット</button>

  <div id="list"></div>

JavaScript（データ出力部分）

const createDiv = function(firebaseData) {
  // 取得データに下記処理を実行
  firebaseData.on("child_added", function(snapshot) {

    // "name","count"の値を代入
    const getName = snapshot.child("name").val();
    const getCount = snapshot.child("count").val();

    // 新しい div 要素を作成
    const newDiv = document.createElement("div");
    // 新しい div の内容を作成
    const divContent = document.createTextNode(getName + " : " + getCount);
    // 上記で作成した内容を div 要素に追加
    newDiv.appendChild(divContent); 
    // 内容を追加した div を list IDの中に追加
    document.getElementById('list').appendChild(newDiv);
  });
};

なお、HTMLのデータ出力に関してはこちらを参考にしております。

JavaScript（昇順）

document.getElementById("order").onclick = function() {

  // Firebaseよりデータを取得
  const firebaseData = firebase
    .database()
    .ref("list")
    .orderByChild("count");

  // 取得したデータを使い、出力する
  createDiv(firebaseData);

};

普通に出力するとデータが

となりますが、こちらをアルファベット順にしようとする場合、count(Realtime Database の値) の値が降順になるようにしなければなりません。
そこで下記のように、

JavaScript（降順）

document.getElementById("reverse").onclick = function() {

  // Firebaseよりデータを取得
  const firebaseData = firebase
    .database()
    .ref("list")
    // + 値の場合昇順になってしまうので、 - をつける
    .orderByChild("-count");

  // 取得したデータを使い、出力する
  createDiv(firebaseData);

};

内容はほとんど変更がありませんが、一カ所Firebaseよりデータを取得する際に、　マイナス（-）　を count(Realtime Database の値) に入れています。
これにより先ほどとはデータを取得する順序が変更され、

name : AAA　count : 3（-3）
name : BBB　count : 2（-2）
name : CCC　count : 1（-1）とcount(Realtime Database の値) が降順で出力されるようになりました。

JavaScript（全体）

/* jshint curly:true, debug:true */

const createDiv = function(firebaseData) {
  // 取得データに下記処理を実行
  firebaseData.on("child_added", function(snapshot) {

    // "name","count"の値を代入
    const getName = snapshot.child("name").val();
    const getCount = snapshot.child("count").val();

    // 新しい div 要素を作成
    const newDiv = document.createElement("div");
    // 新しい div の内容を作成
    const divContent = document.createTextNode(getName + " : " + getCount);
    // 上記で作成した内容を div 要素に追加
    newDiv.appendChild(divContent); 
    // 内容を追加した div を list IDの中に追加
    document.getElementById('list').appendChild(newDiv);
  });
};

// 昇順
document.getElementById("order").onclick = function() {

  // Firebaseよりデータを取得
  const firebaseData = firebase
    .database()
    .ref("list")
    .orderByChild("count");

  // 取得したデータを使い、出力する
  createDiv(firebaseData);

};

// 降順
document.getElementById("reverse").onclick = function() {

  // Firebaseよりデータを取得
  const firebaseData = firebase
    .database()
    .ref("list")
    // + 値の場合昇順になってしまうので、 - をつける
    .orderByChild("-count");

  // 取得したデータを使い、出力する
  createDiv(firebaseData);

};

// リセット
document.getElementById("reset").onclick = function() {

  document.getElementById("list").innerHTML = "";

};

追記

こちら以外の解決方法やコードの書き方等ございましたら、勉強のために是非お教えいただければと思います。この投稿が、少しでも悩んでいる誰かの助けになれば幸いです。

　 Tweet
Qiitaで続きを読む

投稿日：2019-07-19T19:40:35+09:00

JavaScriptでハッシュ関数（SHA256）を使う

はじめに

JavaScriptでハッシュ関数を使いたくて、いろいろな記事を見ていたのですが、node.jsでインポートして使うのが多かった印象でした。

しっかりとは私も理解していないのですが、JaveScriptでハッシュ関数（sha256）を使うことができたので、それを記事にしました。

ハッシュ値をWebページに出力まで

まずこのページへ飛んで、ダウンロードしてください。→jsSHA

そしてダウンロードしてきたフォルダを解凍するとjsSHA-masterというフォルダが手に入ると思います。
そのフォルダ内にあるsrcフォルダに入ると、「sha256.js」というファイルがあるので、それをこれから作る、「index.html」「main.js」ファイルと同じフォルダに置いてください。

あとは以下のようにコードを書けばハッシュ化できるはずです。
index.html
<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>sha256</title>
    </head>
    <body>
        <script type="text/javascript" src="sha256.js"></script>
        <script type="text/javascript" src="main.js"></script>

        <div id="test"></div>

    </body>
</html>
main.js
window.onload=init_time;

var shaObj = new jsSHA("SHA-256","TEXT");
var text = "ハッシュ関数";

function init_time(){
    shaObj.update(text);
    document.getElementById("test").innerHTML=shaObj.getHash("HEX");
}
index.htmlをブラウザで起動すると、上図のように表示されるはずです。
ここではハッシュ関数という文字列をハッシュ化しています。

　 Tweet
Qiitaで続きを読む

投稿日：2019-07-19T17:48:42+09:00

CSSのPosition:fixed がずれる件

解決したいこと
-１ページのみfixedプロパティの数値がずれる

状況

-css postion:fixed を使いヘッダーメニューの固定を設定しています。
-chromeの検証画面にて、positionの値が他のページの100倍ほど大きくなってしまいます
　-該当ページのpositionの値：332
-他のページの値：33

知りたいこと

-このずれを解消するにはどのようにCSSを当てればいいのでしょうか？

コード

fixed{

position: fixed;
width: 100%;
z-index: 999;
margin-top: -33px;
background-color: white;
}

　 Tweet
Qiitaで続きを読む

投稿日：2019-07-19T15:05:21+09:00

inputとbuttonで作るボタンの違い

はじめに

画面を作っていくなかで、inputタグを利用したボタンの大きさを変更できず、代わりにbuttonを利用したことがあったため、以下の2つの違いを自分なりに書いてみた。
<input type="button" value="ボタン">
<button type="button">ボタン</button>
実際に使ってみる

まず、以下のように配列から乱数を生成し取り出した値をURLに埋め込んだものを画面に表示してみます。
<script type="text/javascript">
  const number = [11111, 22222, 33333, 44444, 55555];
  randNum = 11111;
  randNum = number[Math.floor(Math.random() * number.length)];
  function transition(randNum) {
    document.location.href = `https://www.xxxxx.com/vvvvv/${randNum}/`;
  };
</script>
1. inputでの書き方
<input type="button" value="ボタン" style="width:200px;height:50px" onClick={transition(randNum)}/>
2. buttonでの書き方
<button type="button" value="button" style="width:200px;height:50px" onClick={transition(randNum)}>ボタン</button>
3. 表示結果

結論としては、どちらの書き方でも問題なく画面推移するボタンを作ることができた。
しかし、inputの方はボタンの横幅を200pxにすることはできたが、縦幅をデフォルト値から変更することができなかった。

4. 結論

CSSを触らずにサイズ等を変更したい場合はbuttonタグを利用する。
場合によって臨機応変に使い分けていく必要がありそう。

　 Tweet
Qiitaで続きを読む

投稿日：2019-07-19T00:04:36+09:00

p5.jsをWebページの背景に設定する方法

p5.jsとは?

p5.jsとはデジタルアート等をつくることのできるProcessingというプログラミング言語のjavascript版ライブラリです。
javascriptで使うことができるので、Webページに組み込むことが可能です。

公式サイト
https://p5js.org/

OpenProcessing(いっぱい作例が載っているサイト)
https://www.openprocessing.org/browse

p5.jsをWebページの背景に設定する方法

ダウンロード

まずはp5.jsのDownload(http://p5js.org/download/)からp5.js completeをダウンロードしてください。今回はその中のp5.min.jsとp5.dom.min.jsを使います。

準備

以下の説明ではフォルダ,ファイルの構成は以下のようになっているものとします。
projectFolder/
├ index.html
├ css/
| 　└style.css
├ js/
|　└ sketch.js
└ library/
　 ├ p5.min.js
　└ p5.dom.min.js

今回sketch.jsのサンプルとしてOpenProcessingにアップされているこちらの作品を使用させていただきます。

ページの上中央の</>をクリックするとコードを見ることができるので、sketch.jsにコピペしてください。

HTML

HTMLでp5.jsを使うためには<head>内に以下のように記述します。
<head>
　<link rel="stylesheet" href="css/style.css">

  
  <script src="library/p5.min.js"></script>
  <script src="library/p5.dom.min.js"></script>
  <script src="js/sketch.js"></script>
</head>
テストのためにHTMLファイル全体は以下のようにしておきます。
index.html
<!doctype html>
<head>

  <link rel="stylesheet" href="css/style.css">

  <script src="library/p5.min.js"></script>
  <script src="library/p5.dom.min.js"></script>
  <script src="js/sketch.js"></script>

  <title>Hello, world!</title>
</head>
<body style="color: #FFF">
  <br>A<br>A<br>A<br>A<br>A<br>A<br>A<br>A<br>A<br>A<br>A<br>A<br>A<br>A<br>A<br>A<br>A<br>A<br>A<br>A<br>A<br>A<br>A<br>A<br>A<br>A<br>A<br>A<br>A<br>A<br>A<br>A<br>A<br>A<br>A<br>A<br>A<br>A<br>A<br>A<br>A<br>A<br>A<br>A<br>A<br>A<br>A<br>A<br>A<br>A<br>A<br>A<br>A<br>A<br>A<br>A<br>A<br>A<br>A<br>A<br>A<br>A<br>A<br>A<br>A<br>A<br>A<br>A<br>A
</body>
</html>
現時点ではスクロールすると下の方にこんな感じのものが動いていると思います。

CSS, javascript

ここからCSSとjavascriptを記述していきますが、ページをスクロールしても背景を固定したい場合と、背景ごとスクロールしたい場合で記述が変わります。

背景を固定したい場合

上のgifのようにスクロールしても背景を固定しておきたい場合はCSSを以下のように記述します。
style.css
#defaultCanvas0{
  position: fixed; /*canvasを固定*/
  top: 0; /*canvasを上に固定*/
}
sketch.jsは以下のように変更してください。
sketch.js
//省略
var noiseScale = 800;

var canvas;

/*
 * ウィンドウの大きさが変更されたときに背景が再度描画されるように
 * 元々setup()にあった処理をここに移動した
 */
function canvasSetup(){
    background(21, 8, 50);
    for(var i = 0; i < nums; i++){
        particles_a[i] = new Particle(random(0, width),random(0,height));
        particles_b[i] = new Particle(random(0, width),random(0,height));
        particles_c[i] = new Particle(random(0, width),random(0,height));
    }
}

function windowResized(){
    resizeCanvas(windowWidth, windowHeight);
    canvasSetup();
}

function setup() {
    canvas = createCanvas(windowWidth, windowHeight);//ブラウザのウィンドウサイズに合わせてcanvas作成
    canvas.style('z-index','-1');//canvasを後ろに移動する。

    canvasSetup();
}

function draw(){
    //省略
}
背景もスクロールしたい場合

上のgifのように背景もスクロールする場合はCSSは記述の必要は特にありません。

sketch.jsは以下のように変更してください。
sketch.js
//省略
var noiseScale = 800;

var canvas;

/*
 * ウィンドウの大きさが変更されたときに背景が再度描画されるように
 * 元々setup()にあった処理をここに移動した
 */
function canvasSetup(){
    background(21, 8, 50);
    for(var i = 0; i < nums; i++){
        particles_a[i] = new Particle(random(0, width),random(0,height));
        particles_b[i] = new Particle(random(0, width),random(0,height));
        particles_c[i] = new Particle(random(0, width),random(0,height));
    }
}

function windowResized(){
    resizeCanvas(document.documentElement.scrollWidth,document.documentElement.scrollHeight);
    canvasSetup();
}

function setup() {
    //ページのサイズに合わせてcanvasを作成
    canvas = createCanvas(document.documentElement.scrollWidth,document.documentElement.scrollHeight);
    canvas.position(0,0);//canvasをページの原点に固定
    canvas.style('z-index','-1');//canvasを後ろに移動する。

    canvasSetup();
}

function draw(){
    //省略
}
これでp5.jsを背景に設定することができました。

おしゃれなWebページを作りましょう!

参考

[動画]Q&A #6: p5.js Sketch as Background
https://www.youtube.com/watch?v=OIfEHD3KqCg

　 Tweet
Qiitaで続きを読む

20190719のHTMLに関する記事は9件です。

Bootstrap で 文字 の 太さ を 設定

目的

前提条件

押さえるポイント

書き方の例

Bootstrap で 要素 の テキスト を 中央 に 配置する 方法

目的

前提条件

押さはえるポイント

書き方の例

絶対パス、ルート相対パス、相対パスが混在するHTMLをなんとかする（暫定処置）

前書き

何がしたいのか

Aタグ内で定義されたリンクの種類と修正対応

やったこと

構成

sample.html

domainchk.js

domainchk.js の処理概要

href_replace.js

href_replace.jsの処理概要

実際に使ってみた感想

本当にやりたかったこと

おまけ：HTML上のリンクはどう書くべきかの所感

理由

まとめ

Bootstrapとは

目的

この記事のターゲット

Bootstrapを簡単に言うと

使ってみよう

まとめ

Firebase の Realtime Databaseにてデータを降順で並び替える方法

使用環境

Realtime Database のデータ構造

コード

HTML

JavaScript（データ出力部分）

JavaScript（昇順）

JavaScript（降順）

JavaScript（全体）

追記

JavaScriptでハッシュ関数（SHA256）を使う

はじめに

ハッシュ値をWebページに出力まで

CSSのPosition:fixed がずれる件

状況

知りたいこと

コード

fixed{

inputとbuttonで作るボタンの違い

はじめに

実際に使ってみる

1. inputでの書き方

2. buttonでの書き方

3. 表示結果

4. 結論

p5.jsをWebページの背景に設定する方法

p5.jsとは?

p5.jsをWebページの背景に設定する方法

ダウンロード

準備

HTML

CSS, javascript

背景を固定したい場合

背景もスクロールしたい場合

参考

日付別

タグ一覧

Bootstrap で文字の太さを設定

Bootstrap で要素のテキストを中央に配置する方法