Skip to main content

TwD3の紹介サイトを建てました

TL;DR

この度TweetDeckの2窓監視を行うGoogleChrome拡張機能TwD3の紹介サイトを建てました。

アクセスはこちらから

残りの内容はサイトを建てたときの話です。

つかったもの

今回サイトを建てるに当たって利用したものは以下のとおりです。

Blazorでぱぱっと実装するのが楽なのですが、どうせなので触ったことのないメジャーなWebフレームワークを使ってみました。

Vue.js

https://jp.vuejs.org/index.html

初めて書きました。といっても、Vueらしいことはまだできていないと思います。
GitHub APIから情報とってきてよしなにやるとか、そういう感じの処理を入れるとなるとしっかりと書き始めると思います。

UIについてはBlazorのBootstrapでコンテナシステムを既に学んでいたため、さほど苦労しませんでした。

Vueを書いてて思ったのは「スペース開けろ,シングルクォーテーション使え」ってめっちゃ怒られるなーってことです。この辺かなり厳しいんですね。

Quasar v1.14.3 Framework

Twitterのフォロワーさんに教えてもらったフレームワークです。

https://quasar.dev/

導入もかなり簡単で、npmコマンドをドキュメントに書かれている通りに叩くだけです。

公式ドキュメントがかなり充実しているので、簡単な英語と翻訳ソフトが使えれば不自由なくサイトを構築することができます。

コンポーネントも充実しており、マテリアルデザインのアイコンやボタン、おしゃれなツリーなどを標準で使用することができます。

GitHub Pages Deploy Action v3.7.1

https://github.com/JamesIves/github-pages-deploy-action

GitHub Pagesへのデプロイを支援してくれるツールです。

GITHUB_TOKEN、BRANCH、FOLDERなどのオプションに対してパラメータを与えるだけで勝手にやってくれます。便利です。

GitHubPagesへのデプロイ

今回GitHubPagesを利用したのですが、デプロイに当たって日本語の記事がなかったので自分で書くことにしました。そのうち書きます。書いたらここにリンク貼ります。

今後

本来Youtubeの動画を取り直したり色々しなければならないのですが、こういうプロダクト紹介系の作業はなかなか着手に時間がかかりますね。

ダウンロードボタンを見えやすいところに配置したり、いろいろとやることはまだあります。issueだけ立ててます。そのうち対応します。

Atria

大学生個人開発者| AtCoder(茶) / C# / VBA /その他趣味いっぱい