酒飲んでたらドメイン買ってたから15年ぶりに個人サイトを公開した

掲題のとおりです。

先日ひとりで自宅酒に浸っていたところ、HN「わたはり」を名乗り始めて10年くらい経つなと気づき、せっかくだからwatahari.comを取ってやろうと思ったらしく（酔っているので記憶はあやしい）、翌朝起きるとValueDomainから領収書メールが届いていました。
初めて「わたはりさん」と呼んできた学生時代の友人todoさん、お元気ですか。

せっかくなので、vue.jsに初挑戦してvuetifyに初挑戦してnetlifyに初挑戦したらあっけなく個人サイトができました。



目次

  • 思い出話
  • 四苦八苦したメモ
  • まとめ

思い出話

初めてHTML/CSSに触れたのは、思い起こせば20年くらい前だったでしょうか。

Windows98についてきてたFrontPage Expressって覚えてますか。私はさっき調べるまで、「あの赤い羽根？ペン？みたいなアイコンのソフト・・・」くらいしか覚えてませんでした。あのFrontPage Expressでセコセコと、framesetごりごり、maqueeタグごりごり、マウスカーソルにはもちろんｼｬﾗｼｬﾗしたなにかがくっついてきて、、、しかもこれ、インターネットに公開するわけでもなく、PCローカルで作って遊んでいました。


FrontPage Expressがあまりに非力だった（あるいは使いこなせなかった）結果、HTML/CSS/Javascriptを「とほほ」さんで勉強し、図書館で謎のクソ厚本を読み、十数年も経ったいまは、Web系エンジニアをやっているんだからわからないものです。意識高くいえばDot to dotってやつですか。いや、同じことに熱中したまま成長していないだけかもしれません。
実際に、作ったウェブサイトを初めてインターネット上に置いた（もちろん工事中のページがたくさん）のは15年前くらいの忍者サーバだと思いますが、逆に言えばその頃の知識の残り香＋αだけでやってきた人生でした。

もちろん今ではある程度は色々組めますが、残念ながら昨今のフロントエンドは全くわかりません。なんせ仕事ですので（社内ツールをbootstrapで組んだのを除けば）デザイナーさんが組んでくださったHTMLをベースにサービスを組んでいくわけですし、今はゴリゴリのアプリケーションバックエンドを担当しております。

悔しい。

初めて組んだHTMLが、ブラウザで表示したらなぜかきれいに表示されたときの感動。
コピペで置いたJSのおかげで、マウスカーソルにｼｬﾗｼｬﾗがついた嬉しさ。
そういうものを忘れていたんじゃないか。

というわけで、なんか聞いたことあるモダンな感じのあれをやってみたい。
そんな感じでやってみました。

四苦八苦したメモ

（この章は個人用メモなので読まなくていいです）

★選定基準
　なんかJSでさくっと組んだらブラウザ側でい〜〜感じにアレしてくれるアレやってみたい。そんな動機で選定し、node.jsにしよ→vue.jsにしよう→vuetify使ったろう、となった。
　ホスティングはどうやらnetilifyってのが楽そう。コードはgithubに置いておけば、よしなにデプロイしてくれるし、どうせ誰も見ないウェブサイトなら無料枠で断然収まりそう。

★セットアップと構築メモ
anyenv等々インストール。

anyenv(随分前に入れてたので再インストール)
$ brew reinstall anyenv
$ anyenv init
$ echo 'eval "$(anyenv init -)"' >> ~/.bash_profile
$ exec $SHELL -l
$ anyenv install --init

anyenv-update 
$ mkdir -p $(anyenv root)/plugins
$ git clone https://github.com/znz/anyenv-update.git $(anyenv root)/plugins/anyenv-update

anyenv-git 
$ git clone https://github.com/znz/anyenv-update.git $(anyenv root)/plugins/anyenv-update

nodenv 
$ anyenv install nodenv
$ exec $SHELL -l

なんかこれはやっといたほうがよさげ 
$ anyenv install nodenv
$ exec $SHELL -l
nodeいれる 
$ nodenv install -l
$ nodenv install 13.14.0


vue.js環境設定編
この辺からは公式ドキュメント通りにやればいい。

vue cliをいれる
$ npm install -g @vue/cli

VueのApp作成。
default (ver2)を選択した。なんとなくデフォっぽいので。
それにしてもめちゃ丁寧ね。モダ〜〜ン。
$ vue create wataharicom

vuetify導入。
$ cd wataharicom
$ vue add vuetify

これもデフォを選択。大丈夫やろ。
なんせrecommendedやからな

で、npm run serveしてみると、
http://localhost:8080/
あらーさすがナウいわね

なるほど、ローカル立ち上げておけば、リアルタイムにいけそう
component単位で作り上げておけばいいのかな
それをApp.jsで組み立てる感じそう。

・・・そして公式ドキュメントに四苦八苦しつつ、組み上げました。

netlifyはあまりにも簡単だったのでメモを省略します。
こんな簡単にCI/CD環境が組めるようになったんだなぁ・・・（あとhttps公開も簡単だなぁ・・・すごい・・・）

まとめ


はい、どん。

Vuetifyのモジュールの使い方は個別に四苦八苦したものの、全体としてはあっけなく、それらしいものができた。一方、四苦八苦していたときに感じたのだが、結局HTML/CSS/JSの基礎知識がないと、自力で解決するときに迷走はしかねない。ありがとな、小中学生時代の俺。

最近は自宅でPCを開く頻度が随分と減ってしまった。
数年前の、仕事で死ぬほどキーボードカタカタやってるんだからもういいじゃない、みたいな気持ちのときからだと思う。それは良い「逃げ」だ。自分を守れた。仕事がしんどいときは、PCの電源を落とす勇気を持っていいのだと思う。

ただ、今回（ものすごく表層的にだが）Vue.js周り触って、楽しかった気持ちは大事にしたいと思う。偉人たちのあれこれをコピペして、だけど自分のコーディングの結果で少しづつ出来上がっていく楽しみを、ちゃんと覚えておくべきなのだ。
どうせこの個人サイトも、誰かに見てもらうために作ったものではない。ただただ自己満足で楽しく作りたい。

インターネットに公開もせず、誰に見せるわけでもなく、ただただ作るのが楽しかった頃の気持ちをちょっとだけ思い出した数日であった。
おわり。

コメント

コメントを投稿

このブログの人気の投稿

ソフトバンク光BBユニットのセキュリティと、Wi-Fiルーターのファイアウォールをちゃんと確認した

イメージ
この記事は、ソフトバンク光のIPv6 IPoE + IPv4を活かしたまま、せっかく買ったASUS RT-AX86Uを活用しようとした記録である。 正確に言えば、そんな状況でIPv4しかしらないクソ雑魚が、おっかなびっくり、NATのない世界でIPv6のセキュリティを(一般的に)どんなふうになってるんだろうと調べた記録である。 概要 回線契約：ソフトバンク光のIPv6 IPoE + IPv4オプション(IPv6高速ハイブリッド) このオプションを効かせるためには当然光BBユニットを契約しています IPv6の/64ブロックはもちろん、IPv4グローバルアドレスをもらえすSB光はGood(個人の見解です) ルーター：ASUS RT-AX86U やりたいこと： IPv6 IPoE接続を活かしたまま、IPv4も活かす つまり、IPv6 IPoE接続のためにSB光BBユニットは繋がなければならない しかし、SB光BBユニットは 前回の記事 にもあるとおりマジクソなので、できる限り機能を殺して、ASUSルーターを活かす せっかくIPv6ブロックをもらったので、IPv6エニーキャストアドレスは全ての(IPv6に対応する)クライアントに配る ただし、セキュリティ上IPv6アドレスでの外部からの接続は遮断する 結論（最終的にいきついた設定） 接続 光BBユニットにおいて、DMZとしてWi-FiルータのIPv4ローカルアドレスを指定 光BBユニットの無線LAN機能はOff Wi-Fiルータ側では、IPv6についてパススルーを設定 セキュリティ 光BBユニットで、「ルーター機能の設定」＞「パケットフィルタ設定（IPv6）」＞「セキュリティレベル設定」は「高」とする（デフォルトのままとする） ASUSルータで、「詳細」＞「ファイアウォール」＞「IPv6 ファイアウォールを有効にする」を「はい」とする
Read more »

懐かしのミニ四駆たちがでてきました。

イメージ
懐かしのミニ四駆たちがでてきました。 捨ててしまうので、ここに記録を残しておきます。 古いおもちゃ、お約束の爆発電池。 うわー！懐かしー！ こんなんだったんですな。 シールの貼り方きたなっ！ この開ける部品すら懐かしい。 そうそう、ひねるんだよ。 案の定、電池は爆発。 下の段に4台入ってました。 サブな扱い。 おまけ。 ケースの留め金。 シールかわいいのぉ。
Read more »

Twitter=>discord連携の際に、複数行のテキストを取り出す場合はIFTTTじゃなくてZapierを使うといい

イメージ
 今日の知見memo ★やりたかったこと (個人メモを置いている)Twitterのprivate account(鍵垢)の内容を、discordに投稿したい IFTTTにはメインのTwitterアカウントを紐付けている メインのアカウントと対象アカウントはフォローしあっているので、これをIFTTTで取り出そうと思った 鍵アカウントなので、自分でコーディングするのは面倒（ログイン処理とか） 本文は、複数行の日本語文字列である ★IFTTTパターン 結論としてはNGだった なぜかというと、IFTTTで「{{Text}}」として受け取った複数行文字列を、webhookのjsonにいれると、改行コードにより、当然jsonとして破綻するため。 Textはあくまでjsonの値に収まる必要があるので、複数行だとエラーになる。 1行テキストだと成功するが、複数行テキストだと「Action failure message: Unable to make web request. Your server returned a 400」となる。 ちなみに、今回は「New tweet by a specific user」を利用して連携していたが、鍵アカウントでなければ（公開アカウントなら）「{{LinkToTweet}}」を使うと思う。これは問題ない。本文を取り出したいときがこの問題となる。 ★zapierパターン これが一番簡単でうまくいく IFTTTのwebhook連携と違い、zapierはそもそもdiscordをサポートしているので、複数行テキストだろうと簡単にいける。 わーい。
Read more »