とりあえずウェブサイトを作りました！
ずっと個人サイトを作りたかったんですが、ドメイン名とウェブサイトのデザインで迷っていました。ドメイン名は見てる通りnaborisk.comにしました。最初はトップレベルドメインは.comにするか迷っていました。なぜなら.comはコマーシャルの略語で、個人サイトはコマーシャルではないので使わない方がいいかなっと思っていました。しかし、.comは一番有名なトップレベルドメインですし、覚えやすさのためそれにしました。
フレームワークとライブラリーもだいぶ迷っていましたね。結局、ウェブ開発のフレームワークはHUGOという静的サイトジェネレータにしました。デザインは自分でCSS書きます。CSSに関してはまだ完璧ではないと思いますが、今後もバグ修正・デザイン改変していきます。もっといいCSS書きたいので頑張ります！後でSCSSとかのCSSプリプロセッサも使ってみたいと思います。
では、このサイトの開発について紹介したいと思います。以下の説明しているものは初めて公開する時点でのデザインなので、現在とは異なる場合があります。
多言語対応
自分は日本語も英語もよく使いますので、このサイトで英語でも日本語でも対応するようにしました。運よく使っているフレームワークは多言語機能が付いています。しかし、その機能を理解するまでにはかなり大変だと思います。
HUGOの多言語モードを使うと、UIで翻訳したいテキストは言語別のファイルに保存する形です。このサイトの場合だとen.ymlとja.ymlがあります。この二つのファイルは/プロジェクトフォルダ/themes/テーマ名/i18n/に保存されます。ファイルの文法は以下のようになります。
id:
other: text翻訳できるようにする言葉はidをセットして、textに内容を書けばOKです。そのテキストを引用したいときはHTMLファイルで{{i18n "id"}}の関数を呼ぶと現在の言語と合致しているファイルから読み込みます。
以上の例はGUIとホームページしか適用されていないので、ブログ記事は、翻訳ファイルから引用する形じゃなく、各記事は英語版と日本語版は別々保存されます。HUGOのデフォルトではファイル名から言語判別するのでこの場合は英語版の記事は記事名.en.md、日本語版の記事は記事名.ja.mdで保存します。同じ記事名が持っていればHUGOは別版の記事に見えます。
フォント
フォントは日本語のフォントと英語のフォント別々選びました。フォントはGoogle Fontsで探しました。英語のフォントはRobotoで、日本語のフォントはM Plus Rounded 1cというフォントです。
アイコンはFontAwesomeを使います。便利なのでウェブ開発するときにいつも使っています。
Roboto
M Plus Rounded 1c 日本語
アニメーション
ウェブサイトを面白くするように少しアニメーションを書きました。このウェブサイトのアニメーションはCSSでできました。アニメーションを書くときに@keyframesを定義して、動かしたいものはanimation属性で前に書いた@keyframesを呼びます。
今見ているコンテンツやナビゲーションバーのアニメーションは以下の@keyframesとanimation属性でできました。
@keyframes slide-up {
from {
opacity: 0;
transform: translate(0, 100px);
}
to {
opacity: 1;
transform: translate(1, 1);
}
}
element {
animation: slide-up 1s cubic-bezier(0.075, 0.82, 0.165, 1);
}CSS書く今回初めてcubic-bezier関数を使って、細かくアニメーションのタイミングを指定できますのですごく便利だとお思います。
今後の開発
メニューに項目を増やそうとする予定です。そうしたらモバイルでメニューを表示するのが難しくなると思いますので、ハンバーガーメニューに変更します。
CSSも現在ではモバイル用ファイルとデスクトップ用ファイルに分けていますが、ちゃんと活用していないので今後はちゃんと使います。若干やばいCSSの書き方(inline CSSなど)もありますので後で直します！
デザインを更新することも検討しています。とりあえず今回は簡単なデザインと簡単なアニメーションで書きました。検討中のデザインは今よりマテリアルデザインかグラスモーフィズムにする(AndroidかiOSを選ぶみたいw)。
今日はここまでです！これからも色々書きたいのでよろしくお願いします！