週刊とっしーぱんち

昭和生まれのブロガーが綴る、全力脱力系雑記帳

【趣味ではじめるWebサイト】簡単なパスワードを作ってくれるサイト、中身解説編

 

おはよーございます。

先日の記事で紹介したWebサイト「Easy Password Generator」についての中身解説編です。

 

 

サイトの置き場所


前回の記事でも紹介しましたが、GitHubPagesというサービスでWebサイトを構築しています。
RubyOnRailsのような、サーバでどうたらするものは動かないですが、HTML置くだけの静的なサイトであればこれが一番お手軽に思います。無料で作れるのも嬉しいですね。僕の場合は独自ドメインにしてみてはいるので完全無料ではないですけど、GitHubPagesが用意しているドメインをそのまま使うこともできます。

CSS


以前書いた記事では、PureCSSというものを触っていたのですが、今回はBootStrapというCSSライブラリを使ってみました。

osio-toshimasa.hatenablog.com

 

というのも、この間 Udemy という動画学習コンテンツの教材を購入しまして、その教材のなかでBootStrapを使っていたので早速試してみた感じです。ときおり受講料が80%OFFになっていて1500円くらいになってるときだったかな?そのタイミングで購入しました。

 

肝心のBootStrapですが、シンプルなサイトなのであまり使いこなせてないですけど、簡単な記述でやりたいことができるので、これはこれで良さげな感触でした。調べたときは使い勝手のところに難ありみたいな評価でしたけど初歩的なものを作る分には扱いやすく感じます。あと、情報量が多いので公式以外にも情報がたくさん転がっているのが嬉しいですね。

 

JavaScript

ボタン押したらパスワード表示するみたいな制御のところはVue.jsというライブラリを使いました。このくらいのものであれば何使っても大差ないような気がしていますが、最初使った時にシンプルでわかりやすかったので、あえて使っていきながら、使い方忘れないようにしていこうという感じです。

 

パスワードを生成する部分もJavaScriptなのですが、これはOpalというRubyのコードをJavaScriptに変換するGemを使って作りました。なのでこれは自分で書いたわけではなくて元々はRubyのコードになっています。

 

osio-toshimasa.hatenablog.com

osio-toshimasa.hatenablog.com

osio-toshimasa.hatenablog.com

 

Webフォント

最後におまけ程度の紹介ですが、タイトル文字に使われているフォントはGoogleFontsというGoogleさんが無償で公開しているフォントを使っています。よくよく見てみるとこのブログのタイトルもGoogleFontのものを使っているみたいです。テンプレートから選んだだけなのであまり気にしていなかったのですが、Webでいろんなフォントを使いたいときはかなり定番みたいですね。

 

まとめ 無償提供ありがたすぎる件

ふりかえってみると、今回のWebサイトを構成する要素たちはすべて無償で提供、利用できるものたちなんですよね。本当素晴らしい世の中です。

 

プログラミングの世界では与えるという行為が当たり前すぎていて、時にそれが使えて当たり前という感覚になってしまいそうですが、こんな簡単なサイトでもかなり時間をかけて作っているのに、このサイトを構成するいろいろなサービスやライブラリは、いったいどれほどの労力をかけて作られているのか想像もつかないです。

 

利用する側としてはありがたく使わせてもらって、感謝の気持ちを忘れずに引き続き気ままに楽しくモノづくりを続けていきたいです。

 

では、また!

 

 

osio-toshimasa.hatenablog.com