こんにちは．ふじえもんです．
今日は学園祭HPをつくって勉強になったことを書きます．
まず，宣伝です．
所属する大学の学園祭が 今日10月22日(日) に茨城県つくば市にてあります．
ぜひ，最寄の方は遊びに来てください．
そもそもHP制作に関わったきっかけ
ことの最初は4月某日に6年ぶりの学園祭を企画したい！という熱い実行委員長のプレゼンがあり，その中でHP制作担当の募集をしていたことが始まりです．
その頃，ちょうど開発サークルUN-FROZENを立ち上げたばかりで「サークルとして何か作りたいね」という話をしていました．
(そういえばサークルHPはOGPをそこまで頑張れていなかったので後でやらねば．．)
そこで手を挙げ開発サークルとして制作協力することになったのです．
制作過程でHTML，CSSをほんのちょっとだけ勉強しながら進めました．
その中でとくに勉強になった，苦戦したことを書きます．
OGPの存在を知った
ふじえもん:OGPの説明をしてください
ChatGPT(GPT-4):
OGP（Open Graph Protocol）は，ウェブページがソーシャルメディアプラットフォーム上でどのように表示されるかを制御するためのプロトコルです．このプロトコルは，Facebookによって2010年に導入され，ウェブページのメタデータを提供するためにHTMLマークアップに使用されます．
OGPのメタタグは，ページのタイトル，説明，画像，URLなどの重要な情報を含んでいます．これらのタグにより，ソーシャルメディアプラットフォームは，リンクが共有されたときにどのようにページを表示するかを知ることができます．例えば，FacebookやTwitterでリンクを共有すると，OGPタグに基づいてリッチスニペット（ページタイトル，説明，画像など）が自動的に生成されます．
OGPを利用することで，ウェブページのオーナーはそのページがソーシャルメディア上でどのように見えるかを制御し，より魅力的でエンゲージメントを促す表示を提供できます．また，OGPはウェブページのSEO（検索エンジン最適化）にも寄与し，ソーシャルシグナルの向上に役立ちます．
SNSで宣伝する際にタイトルや画像を出したいという運営からの要望があったためX(当時はTwitter)，Facebookでそのように対応しました．
確かにリンクだけ置いてあるより，タイトルや詳細，画像があった方がどんなサイトなのかイメージしやすく興味が湧きますよね．
今後，Webアプリやホームページを作る際には今回使ったものを参考にOGPを設定しようと思いました．
alt属性の存在を知った
ふじえもん:alt属性の説明をしてください
ChatGPT(GPT-4):
アクセシビリティ:
スクリーンリーダーを使用する視覚障害者は、alt属性のテキストを聞くことができます．これにより、画像の内容や目的を理解することができます．
画像のロード失敗時:
何らかの理由で画像がロードできない場合、alt属性のテキストが表示されます．これにより、ユーザーは画像の内容や目的を理解する手助けとなります．
SEO（検索エンジン最適化）:
検索エンジンはテキストを解析することができますが、画像を解析することはできません．alt属性は、検索エンジンが画像の内容を理解する手助けとなり、結果としてページのSEOランキングを向上させる可能性があります．
コンテキストの提供:
alt属性は、画像がページのコンテンツとどのように関連しているのかをユーザーや検索エンジンに示す追加のコンテキストを提供します．
このalt属性についてはとくに要望が無かったのですが，XでAlt属性の重要さに関するポストをいくつか拝見して自分が関わるときには絶対に使おうと思っていたので設定しました．
自分の所属する大学は，全国から聴覚障害または視覚障害のある方が集まるのが特徴です．
そのため，とくに「誰にでもみてもらえるようにしたい」という思いはありました．
で，imgタグと同様，vieoタグにもAlt属性があると思い込んでいて同じようにalt属性で動画の説明をしていたのですが，Web Developer ChecklistというGoogleChromeの拡張機能を使ったところ，バリデーションエラーが複数出ており，内容を確認したところvideoタグにはalt属性は無いと知りました．
たしかに，改めてMDNのWeb Docsを読んでみるとAlt属性はなく，ほかにtrack要素やtitle属性，descriptionトラックなどでコンテンツの説明ができるようです．
今回は時間の都合上対応できなかったのですが,動画を表示する際には音声のあるなしに関わらずdescriptionなどで字幕の追加をすると良いことに気がつきました．
音声であればWhisperを使ってタイムスタンプと文字おこしがついているSRTファイルを作ることができるのですが，手話の場合はまだ対応していないため，この辺は手作業で作成する必要がありそうです．
今後，手話認識がより普及すればいつの日か対応されるかもしれませんね．
可読性と保守性を高めるリファクタリングをした
その1.コードの構造化
出来る限り，開発者がコードを読みやすく，編集しやすいようにしました．
例えば，いくつかの見出しがある場合，下↓↓のコードのようにpタグとその中身は別の行として書くようにしました．
もちろんインデントも，コードの階層構造を示すために重要です．
<h2>見出しタイトル</h2>
<p>
見出しタイトルに関する内容
</p>
というのも下記のように文章が長い場合，改行を入れるタイミングがわかりにくかったり追記修正をする箇所を探すのに時間がかかってしまうからです．
<h2>見出しタイトル</h2>
<p>
見出しタイトルに関する内容見出しタイトルに関する内容見出しタイトルに関する内容見出しタイトルに関する内容見出しタイトルに関する内容
</p>
その2.無駄なコメントアウト，空行は減らす
次に，コードの説明をするコメントアウトまた意味がない空行は減らしました．
今回はHTML,CSSといったマークアップ言語とJavascriptを使いましたが，特段難しい処理をしているわけではなく，ごくごくありふれたコードです．
通常，コメントアウトはコードの説明や，デバッグなどに使われます．
制作当初は，制作メンバー間でコードの仕様の認識を合わせたり，説明するのに使っていましたが，制作が進むにつれて徐々に減らしていきました．
メンバーがそれぞれのコードの意味を理解して，自律的に編集できるようになったからです．
また，空行については，セクションごとの区切りがわかりやすくなるように，セクションとセクションの間，関数と関数の間など1行だけ空けるようにしました．
さいごに
以上，ふじえもんがHP制作に関わり勉強になったことでした．
この制作で得た知識，経験は自分のポートフォリオサイトやWebアプリなどを作る際に役立っていて，それぞれの要素や属性の役割を理解し，機能の役割をしっかり果たしてあげるように意識するようになり，また読みやすいコードを書くことで，自分自身がすぐに追記編集することができるようになりました．
やはりコードの可読性，保守性は大事ですね．とくに個人開発だと一人で作っていることもあり我流で書いてしまいがちですが，1日，あるいは1週間経ったあとの自分は他人なのでそれでは何を書いていたのかわからず将来の自分が困ってしまいます．挙げ句の果てに開発が面倒になり手を止めてしまったら元もこもありませんよね．
さいごに，改めて宣伝です．
所属する大学の学園祭が 今日10月22日(日) に茨城県つくば市にてあります．
ぜひ，最寄の方は遊びに来てください．
今回作成した学園祭HPのpublicリポジトリ(GitHub)です．
何かお気づきの点がございましたらコメントください．
さて今から学園祭に行こう．
以上．ふじえもん．