投稿日：2021-03-14T23:30:53+09:00

HTMLで円周率計算を可視化（モンテカルロ法）

今日は3月14日、πの日ということで円周率の計算をするプログラムを作ろう、という趣旨の記事です。

使ったもの

HTMLとタイトルにありますが、HTMLの記述は数行でほとんどがJavaScriptです。HTMLのcanvas要素をJavaScriptでゴリゴリいじって描画します。
canvasについては、このサイトを参考にしました。

計算方法

数値計算ではなく、確率（乱数）を用いるモンテカルロ法で円周率を求めます。

こんな感じの円と四角形に、ランダムに点を打ち込みます。

青色の点は円の内側、赤色の点は円の外側にある点です。
均一に点がばらまかれていれば、青と青＋赤の点の数の比は、円の面積と四角形の面積比と等しいはずです。
青色の点の数をa、赤色の点の数をbとすると、
$\pi r^2:4r^2 = a:a+b$
$(a+b)\pi r^2 = 4ar^2$
$\pi = \frac{4a}{a+b}$
となり、上記式を用いて円周率を求めることができる。

実装

HTML

canvas要素にidをつけて置いておくだけでいいです。

HTMLのソースコード
pi.html
<!DOCTYPE html>
<html>
    <head>
        <title>円周率</title>
        <script type="text/javascript" src="./pi.js"></script>
    </head>
    <body onload="init();">
        <h1>モンテカルロ法による円周率の計算</h1>
        <canvas id="pi"></canvas>
    </body>
</html>
JavaScript

コードが長いので詳しい説明は省きます。今日中に終わりそうにないので。
ただ、やってることは、
1.背景の描画
2.乱数で点の生成
3.$\pi$の計算
4.2,3の繰り返し
と簡単なので、頭のいい人はもう少し短いコードで書けると思います。

ベクトルクラスを実装する際はこちらの記事を参考にさせて頂きました。

JavaScriptのソースコード
pi.js
//canvas要素の大きさ
const CANVAS_WIDTH = 400;
const CANVAS_HEIGHT = 400;

//変数の準備
var ctx;
const FPS = 1000;
const TIME = 1000/FPS;
var total = 0;
var In = 0;

//ベクトルクラスの実装
class vec2{
    //
    constructor(x=0, y=0){
        this.x = x;
        this.y = y;
    }

    //足し算メゾット
    add(v){
        this.x += v.x;
        this.y += v.y;
        return this;
    }

    //ベクトルを複製するメゾット
    clone(){
        return new vec2(this.x, this.y);
    }

    //静的足し算メゾット
    static add(v1, v2){
        return v1.clone().add(v2);
    }
}

//原点の位置を定義
var origin = new vec2((CANVAS_WIDTH/2),(CANVAS_HEIGHT/2));

//bodyが読み込まれたときに実行される関数
//
function init(){
    //canvas要素を取得
    let pi = document.getElementById("pi");
    if(pi.getContext){
        ctx = pi.getContext("2d");

        //canvasのサイズを指定
        pi.width = CANVAS_WIDTH;
        pi.height = CANVAS_HEIGHT;

        //背景の描画
        draw_init();

        //点を打ちまくる
        setInterval(draw,TIME);
    }
}

//繰り返し実行される関数
function draw(){
    //文字を消す処理
    ctx.clearRect(0,360,CANVAS_WIDTH,400);

    //乱数の代入と変数の準備
    let tempX = getRandomInt(200) - 100;
    let tempY = getRandomInt(200) - 100;
    let pi;

    //円の中か外の判定
    ctx.fillStyle = "rgb(255,0,0)"
    if((tempX**2)+(tempY**2) <= 100**2){
        In++;
        ctx.fillStyle = "rgb(0,0,255)"
    }
    total++;

    //piの計算
    pi = 4*In/total;

    //点の描画処理
    let v1 = new　vec2(tempX,tempY);
    v1.y *= -1;
    let screen = vec2.add(v1,origin);
    ctx.fillRect(screen.x,screen.y,1,1);


    //piとtotalの表示
    ctx.fillStyle = "rgb(0,0,0)"
    ctx.fillText(pi,0,380);
    ctx.fillText(total,0,400);
}

//背景を描画する関数
function draw_init(){
    //x軸
    ctx.beginPath();
    ctx.moveTo(0,CANVAS_HEIGHT/2);
    ctx.lineTo(CANVAS_WIDTH,CANVAS_HEIGHT/2);
    ctx.stroke();
    ctx.font = "20px serif";
    ctx.fillText("x",CANVAS_WIDTH-20,(CANVAS_HEIGHT/2)+20);

    //y軸
    ctx.beginPath();
    ctx.moveTo(CANVAS_WIDTH/2,CANVAS_HEIGHT);
    ctx.lineTo(CANVAS_WIDTH/2,0);
    ctx.stroke();
    ctx.fillText("y",(CANVAS_WIDTH/2)+10,15);

    //原点
    ctx.fillText("O",(CANVAS_WIDTH/2)-20,(CANVAS_HEIGHT/2)+20);

    //四角形
    ctx.beginPath();
    ctx.moveTo(100,100);
    ctx.lineTo(100,300);
    ctx.lineTo(300,300);
    ctx.lineTo(300,100);
    ctx.lineTo(100,100);
    ctx.stroke();

    //円
    let t;
    for(t=0;t<=2*Math.PI;t+=0.01){
        let v2 = new vec2(100,t);
        let v1 = new vec2(v2.x*Math.cos(v2.y),v2.x*Math.sin(v2.y));
        v1.y *= -1;
        let screen = vec2.add(v1, origin);
        ctx.fillRect(screen.x, screen.y, 1, 1);
    }
}

//乱数を返す関数
function getRandomInt(max) {
    return Math.floor(Math.random() * Math.floor(max));
}
実行結果

いい感じに近似出来ているのではないだろうか？

あとがき的なもの

初めて記事を書きました。なので少し言い訳と予防線を貼ったりします。
マークダウンの書き方などわからないことが多く、見苦しい記事になっていたら申し訳ないです。
間違いなどがありましたら、コメントで指摘していただけたら修正いたします。

もうすぐ3月１４日が終わってしまう。はたして、3月１４日に見られた人はいるのだろうか。

追記（2021/03/16）
github.ioを使って公開しました。よかったら見てみてください。
pi.html

　 Tweet
Qiitaで続きを読む

投稿日：2021-03-14T21:37:32+09:00

express Form作成

Package.json のdependencies
  "dependencies": {
    "cookie-parser": "~1.4.4",
    "debug": "~2.6.9",
    "ejs": "~2.6.1",
    "express": "~4.16.1",
    "http-errors": "~1.6.3",
    "morgan": "~1.9.1"
  }
expressのForm作成について

expressで入力フォームを（ログイン、新規登録）作成する際にform入力を利用しました。
expressを用いたフォーム作成の忘備録を残します。
参考サイト：
Node.js + Express で登録画面を作る
 Node.js+Expressでpostを使う！
Express v4.xでJSONのリクエスト/レスポンスを取得する正しい方法

フォーム取得側の設定について

POSTのRequestの取得について

今まではbaby-parserをインストールして対応していましたが、現在はExpress本体に用意されているので追加でインストールは不要です。(4.x系で対応）
const express = require('express')
const app = express()
app.use(express.json())

app.post('/', function (req, res) {
  console.log(req.body);
  res.send('Got a POST request')
})
上記内容を記述しておくことで、POSTでの"req.body"でJSON受け取りが可能です。

フォームのejsについて
<form action="/" method="post">
    <input type="text" name="name" placeholder="name">
    <input type="text" name="age" placeholder="age">
    <input type="submit" value="送信！">
</form>
実際の出力は下記のようになります。

設定のポイントとしては、

action : データの送信先（受け取り側と一致するように）
method : 送信方法（今回はpost送信、受け取り側も一致するように）

name属性に設定されたものが
送信されるオブジェクトのkeyとなります。
出力結果(console.log(req.body)）は下記のようになります。
[Object: null prototype] { name: 'test', age: '55' }
こちらのsubmitと設定されたボタンを押すことでPOST送信が実行されます。

後は、よしなにして頂ければということです。

以上、簡単にですがフォームの忘備録でした。

　 Tweet
Qiitaで続きを読む

投稿日：2021-03-14T19:28:12+09:00

【Rails】CSSにbackground-imageで設定した背景画像が表示されない

現在作成している自作のアプリケーションで、
上のように背景に画像を設定したく、
CSSでbackground-image プロパティを使えば良いことが分かり、
以下のように記述しました。
.sample-contents {
  width: 100vw;
  height: 350px;
  background-image: image-url('sample-top.JPG');
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center;
}
これで画像が出るはず！だったんですが、画像が表示されなかったので、
解決するために試したこと等を記録します。

解決したかったこと

CSSでbackground-image プロパティを使ったが、画像が表示されない

今回の解決方法

記述していた.css ファイルの拡張子を.scss に変更したら表示できた。

というわけで本当にただのケアレスミスでした。
ただまだcssとscssがどう違うのかや、何故cssだと表示できなくてscssだとできたのかはちゃんと理解できていないのでこれから勉強します。

解決するまでにチェックしたポイント

background-color は表示できるか

クラス名のスペルミスが無いかの確認も兼ねて一旦background-color を指定すると、
きちんと表示できました。
じゃあ画像に何か問題があるのかと考えて次へ。

画像パスの指定は合っているか

app/assets/images にちゃんと保存してあるかどうかを確認。

VSCodeの場合、ファイルを右クリックで画像のようにパスがコピーできたので、パスは確かだろうと確認できました。

以上です。

　 Tweet
Qiitaで続きを読む

投稿日：2021-03-14T15:33:18+09:00

グーグルフォントの使い方

グーグルフォントとは？

Googleが提供しているフォントサービスのこと。約１０００種類以上も無料で使えるフォントがあるそうです。ただ、日本語のフォントは少ないので注意が必要です。
今回WEBページ作成で初めて使用したので書き残しておきます。

フォントを選ぶ

グーグルフォント
使いたいフォントを選びクリックする。

クリックしたら使いたい太さ選び、以下の画像のボタンをクリック

右側に以下のLINKコードが出てくるのでそれをHTMLファイルに貼り付けます。

cccファイルにも適用したいクラスにfont-family:'Cavet',cursive;を貼り付け適用させます。

以上になります。
初心者のため間違いがあればご指摘お願いします。

　 Tweet
Qiitaで続きを読む

投稿日：2021-03-14T11:59:38+09:00

【初心者でもわかる】jQueryで作る「再生停止ボタン付き自動スクロール機能」

どうも7noteです。再生停止ボタン付き画面の自動スクロール機能の実装方法

jQueryを使った、画面の自動スクロールを作っていきます。
シンプルな機能ですが、再生停止を操作できるような作りなので、サイトをみた人が自分で自動スクロールさせるかどうかを決めることができます。

画面自動スクロールの作り方
index.html
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>

<div class="btn" id="stop">STOP!</div>
<div class="btn" id="start">START!</div>
style.css
.box {
  width: 100%;        /* 横幅いっぱい */
  height: 100px;      /* 高さを300pxに指定 */
  background: #aaa;   /* 背景色を灰色にする */
  margin: 50px 0;     /* 上下に適度な余白 */
  position: relative; /* 相対位置の設定 */
}

.btn {
  color: #FFF;        /* 文字色を白に指定 */
  width: 80px;        /* 適当な大きさに指定 */
  height: 80px;       /* widthと同じ高さを指定 */
  text-align: center; /* 文字を中央揃えにする */
  line-height: 80px;  /* 行間を高さと一緒にして上下中央に文字を配置 */
  border-radius: 50%; /* 角丸で円形にする */
  position: fixed;    /* 絶対位置に指定 */
  right: 10px;        /* 画面の右から10pxの位置に指定 */
  bottom: 10px;       /* 画面の下から10pxの位置に指定 */
  cursor: pointer;    /* ホバー時のカーソルを指の形にする */
}

/* スタート、ストップのボタンの色指定 */
#start {background: #6c6;}
#stop {
  display: none;  /* stopははじめ非表示に指定 */
  background: #f66;
}
#start:hover {background: #8e8;}
#stop:hover {background: #f99;}
script.js
// 初期値を設定
var speed = 1; //スクロール量（1 = 1px）
var interval = 50; //スクロール間隔（1000 = 1秒）
var scrollTop = $(window).scrollTop(); // 現在のスクロール量を計測

// スタートボタンがクリックされた時
$('#start').off('click');  // on clickの重複防止のため
$('#start').on('click', function(){

  /* スタートボタンを非表示にして、再生ボタンを表示 */
  $(this).hide();
  $('#stop').show();

  var scroll = scrollTop + speed; // 次の移動先までの距離を指定
  var scroll = setInterval(function() {
    window.scrollBy(0, scroll);   // スクロールさせる
    $('#stop').off('click');      // on clickの重複防止のため

    //スクロール中に停止ボタンが押された時
    $('#stop').on('click', function(){  
      clearInterval(scroll);      // setIntervalの処理を停止
      $(this).hide();             // 停止ボタンを非表示にして、
      $('#start').show();         // 再生ボタンを表示
    });

  },interval);  // setIntervalを変数intervalの間隔で繰り返す。
});
解説

大きく分けると2つのプログラムが動いています。
自動スクロールを行う部分と、その自動スクロールをボタンで制御する部分に分かれており、これらのプログラムの動作の順序を整理して1つのjavascriptにしているようなイメージです。

流れを書くと、

①再生ボタンを押す
②自動スクロールが始まり、ボタンが停止ボタンに切り替わる
③停止ボタンを押す
④自動スクロールを停止させ、ボタンが再生ボタンに切り替わる

これを繰り返している状態です。

まずはじめはスクロールがされていない状態です。このときに初期値が設定されます。
次に再生ボタンが押された場合、という処理を書きます。on()メソッドを使い処理を書いています。
ボタンが押されたら、ボタンの表示を切り替えたのち、自動スクロールを始めます。
自動スクロールの処理はsetInterval()をつかっており、これは処理を一定速度で繰り返すことができます。これを使い０.X秒ごとにXpxうごかすという処理を連続して行うことで自動スクロールが行われているような状態になります。
そして、自動スクロールを起こしているsetInterval()を無効化させるにはストップボタンを押します。ストップボタンが押された場合、ボタン表示を切り替えつつclearInterval()を使うことでsetInterval()の処理を停止させることができます。

まとめ

onの処理だとクリックイベントが重複してしまうので、ofF()を使い重複対策をしています。
写真などをゆっくり眺めるようなサイトにはこういう自動スクロール機能とかがあってもいいかもしれませんね。

参考：https://ti-tomo-knowledge.hatenablog.com/entry/2018/05/08/083500

おそまつ！

~ Qiitaで毎日投稿中!! ~
【初心者向け】WEB制作のちょいテク詰め合わせ

　 Tweet
Qiitaで続きを読む

投稿日：2021-03-14T11:20:21+09:00

難読化とMinifyについて

はじめに（調べるに至った経緯）

ども！ワンピースの光月おでんがカッコよすぎて日々アニメを漁りながら自宅待機中の光月ギノキンです。

（・・・ではでは）

さっそく調べるに至った経緯ですが、近頃はフロント業務をやらせてもらっていて、Sentry（監視ツール）に届いたエラーをchromeのdevツールで検証しているのですが、devツール上でmain.jsの中身を見てみるとソースコードの記述とは違う乱数があり、

なんだこれ。。エラー追えないやん。。。

ってなったので調べてみると、「難読化」、「Minify」を行っているらしかったので調べるに至りました。

難読化とは

プログラマーがソースコードなどを意図的に読みにくく記述することで、可読性を著しく下げたり、解析し辛くする技術を「難読化」と呼びます。プログラムやアルゴリズムを隠したり不明瞭にすることにより、攻撃者にソフトウェアプログラムをリバースエンジニアリングされることを防止できます。
参照元：「難読化」でリバースエンジニアリングを阻止しよう！

メリット

可読性を下げることよってリバースエンジニアリングを防止することができる

盗難防止のためにソースコードの公開を避ける

サイズが小さくなるのでデータの読み込み速度が向上する

変数名が小さくなるのでローディング速度が向上する

メモリ使用量が減少するため、キャッシュ回数が減り、速度が向上する

リバースエンジニアリング・・・ソフトウェアを厳密に分析しソースコードなどの情報を明らかにする行為のこと

デメリット

デバックが複雑になる

JSファイル全て難読化せず、関数の中だけを難読化する =>function毎に分けて難読化することで、それぞれ管理しやすくなり、デバックもしやすくなる。

Minify(ミニファイ)とは

JavaScript（以下、JSと略記）やCSSのコード内の不要な改行やインデントを削除して、動作はそのままの状態で、圧縮・軽量化することをいいます。
参照元：Minify（ミニファイ）とは何か？圧縮方法とJS・CSSの軽量化のメリットを解説

メリット

webページ速度が上がる

ソースコードの解読を難しくし、盗用防止

デメリット

デバック時の可読性が下がる

難読化とMinifyの違い

調べたが大きな違いは無いようで、理解としては下記の様な理解で問題なさそう。

難読化とは
変数名を乱数で短縮したり、可読性を下げて盗用を防止する

minifyとは
人間用のコメントやインデントなどを消して無駄を無くす

最後に

難読化については、関数単位で難読化すればデバックしやすくなるみたいなので、もうちょい調べてみようと思います。
セキュリティ面やパフォーマンスを維持しつつ、保守性も考えて開発をしていけたらみんなハッピー！！

　 Tweet
Qiitaで続きを読む

投稿日：2021-03-14T03:34:51+09:00

Elixir側で実装したHTMLを描画する例

shared_view.ex
  def url(:twitter) do
    "<a href=\"https://twitter.com/ruby_zuki\">Twitter</a>"
  end
helperに記載されたurl(:twitter)をhtml.eexで下記のように呼び出す。
<%= raw url(:twitter) %>

　 Tweet
Qiitaで続きを読む

20210314のHTMLに関する記事は7件です。

HTMLで円周率計算を可視化（モンテカルロ法）

使ったもの

計算方法

実装

HTML

HTMLのソースコード

JavaScript

JavaScriptのソースコード

実行結果

あとがき的なもの

express Form作成

Package.json のdependencies

expressのForm作成について

フォーム取得側の設定について

POSTのRequestの取得について

フォームのejsについて

【Rails】CSSにbackground-imageで設定した背景画像が表示されない

解決したかったこと

今回の解決方法

解決するまでにチェックしたポイント

background-color は表示できるか

画像パスの指定は合っているか

グーグルフォントの使い方

グーグルフォントとは？

フォントを選ぶ

【初心者でもわかる】jQueryで作る「再生停止ボタン付き自動スクロール機能」

どうも7noteです。再生停止ボタン付き画面の自動スクロール機能の実装方法

画面自動スクロールの作り方

解説

まとめ

おそまつ！

難読化とMinifyについて

はじめに（調べるに至った経緯）

難読化とは

メリット

デメリット

Minify(ミニファイ)とは

メリット

デメリット

難読化とMinifyの違い

最後に

Elixir側で実装したHTMLを描画する例

日付別

タグ一覧