スマホから投稿できるひとこと日記ページをつくりました

再生ボタンを押すと文字が流れます。日付と曜日とウォーキングの距離とひとことの簡単なブログです。

気軽に更新できる日記があればな～と思い作ってみました。ブラウザ版githubから編集して更新できます！

忘れないうちに公開までの流れと学びを残します✨️

レイアウトはiOSのウィジェット風にする！と決めていたので、そこに収めるように要素のフォントサイズや文字数の上限を考えました。

日記という性質上、文字数が変動しやすく制限をかけるとやりづらくなるため、音楽プレーヤーのように文字を流すことにしました。これで日ごとに文字数が違ってもレイアウトが崩れることがなくなりました。

デザインは韓国のアイドルやファッション系バナーで見かける、レトロ感があって区切りがはっきりしたものになるようにしました。iOSのウィジェットらしいスタイリッシュさも残したかったため、色数を絞ってアクセント用フォントと本文用フォントを使い分けて、甘くなりすぎないようにしました。

「気軽に更新できる日記」にするため、日記の内容をEJSによって配列化→コミット→WEBページとして表示されるようにしました。

配列化してまわしてWEBページとして表示できるライブラリやテンプレートエンジンはいくつかありますが、今回は

以上のことからEJSを選びました。

WEBページとして表示させるにはコンパイルが必要です。Gulpを使ってファイルの保存時とコミット時にコンパイルさせるようにしました。

gulpfile.jsは下記をもとにしました。引っかかった箇所はChatGPTに聞いたら解決しました！

ソース部分はこんな感じ。今回初めてgridを使ってみました。

値がぜんぜんわからなかったのでジェネレーターを使用したらきれいにできました。

flexだと2行にするためdivで囲まなければいけず、マークアップが複雑になりがちでした。gridはその必要がなくマークアップがすっきりするのがありがたいです。

vercelでは何故かGulpが動かず、netrifyにしたところコミット時にもGulpが動くようになりました。閲覧数の少ないwebページのホスティングはnetrifyがおすすめです！

XでURLを宣伝しました。相互フォロワー向けのひっそりとしたブログにしたかったので、metaにはnoindexを入れています。更新したらたまにいいねをもらえて、こじんまりとしたブログでも見ていただけるのが嬉しいです。

古の個人サイトであったような秘密の入口やシンプルなミニゲームを作ってみたいです。テーマカラーはダークモードとはまた違う、ピンクに飽きたら変えれるおまけ要素みたいな感覚です。

ゆっくり気の向いたときに更新していきます～！