プロフページ作った。
プロフページというのは、TwitterのURL欄や固定ツイートに載せる、自分のやってるほかのSNS・性癖などが簡単に書いてある、WEB名刺的なやつである。lit.linkやHTML名刺、twproが有名。
自分は別のサービスを使っていたんだけど、Twitter APIの変更やらなんやらで中身を少しいじったのか、変更が保存できなくなり困ってた。かといって、テキストもうまいこときれいに掲載できるサービスがない。仕方ないので自分で作った。
github pagesで作った一番の理由は更新が楽だから。あと無料。広告も入らない。HTMLとCSSだけで簡単なペライチを作る上で十分。
デメリットとしては、githubというサービスの都合上、他人からサイトのデータをDLされて、利用される場合があること。なのでブログとかポートフォリオとかには向いてないと思う。絶対ヤダという人はNetlifyとかを使いましょう*1。それからgithubは英語のページしかないので、英語が読めない人は厳しいし、基本的なHTMLとCSSがわからないとちょっと大変。
2時間くらいでサクッと作りました（WEBサイト屋さんなので）。
ダークモードの切り替えをjsで実装
WEBサイト屋さんなので、やったことない技術をひとつは盛り込まないといけないような気がする。今回はライトモードとダークモードの切り替えスイッチを実装しました。
結論からいうと、2色の切り替えでも「めんど……」となったのでダークモードも実装したいとなると、結構システマチックにサイトを作る必要があると思った。テンプレート化できないサイトには向かないね。
これを参考に、ほぼコピペで作った。インターネットにはいろんな知見が落ちててとても参考になるし勉強になります*2。
- OSのスタイル設定を反映
- JSでダークモードとライトモードを切り替えできるように
- できれはCSSは簡単にしたい
最後のや〜つがちょとめんどうだった。
ダークモードの切り替えは、@media (prefers-color-scheme: dark)を使うけど、JSでの切り替えはHTMLにクラス名を付与することで行う。なのでCSSはメディアクエリとクラス名、ふたつの記述をしないといけない。めんど！
なので、今回はOSのスタイルとJSを連携させて、CSSはクラス名のみにふった。さいわい参考にした記事に、連回方法も書いてある。
切り替えスイッチはcheckboxを使ってトグルスイッチにしています。ダークモードのときはDARK、ライトモードのときはLIGHT、というラベル変更をJSに追記しました。
なんかもっとスッキリした書き方があるのかもしれない。
色
蛍光黄緑が好きなので。50色選ぶとAIが好きな組み合わせをたくさん出してくれるサイトを利用しました。
吐き出されたサンプルは色反転もできてよかった。2色の組み合わせしか出せないので、大規模サイトには全然向かないと思う。
更新はgitで
べつにターミナルでもvimでも好きにすればいいけど、自分はながらくforkというGUIを使ってるので、それで更新します。らくちん〜。FTPとか使わなくていいのが楽ですね。
内容の更新はほぼしなくて、アイコンだけ、Twitterにあわせて2−3ヶ月に1回変更するくらい。
GUIとかわからんが？？？ という人のために、別にブラウザから更新することもできるし、githubはたしか公式からもGUIを配布していた気がします。
公開したら、よさそうなのでもしかして自分のように、なんか適当で感じのいいシンプルなプロフページを探している人はいそうだな、と思った。
近年Xserverとかが無料広告なしでちょっとだけサーバーを貸してくれたりするし*3、テンプレート的な感じで配布してもいいかもしれない。
いわゆる、ネット黎明期のインターネット老人で腐女子な自分。HTMLわかんないよお……という人がHTMLとCSSに触ってくれるのは嬉しいので、配布するとしてもHTMLとCSSのままだとは思う。
私と似た悩みを抱えていて、HTMLとCSSの改変能力があり、このペライチ欲しいなという人いれば、DLして使ってくれて全然大丈夫です。
