HP係の後書き

更新記録

2021年

2/23(火) ページスピード改善のためjQueryの読み込み位置変更、GoogleのCDNに変更。Google Fontsのサブセット化。<h1>の背景画像プリロード。各サービスへのpreconnect。

2/19(金) モリサワのTypeSquare導入(ヒラギノUD角ゴW3 JIS2004)。/このページ開設。2021年スプコン(2021/5/30予定)まであと100日らしい。

・最近の改良でPage Speed Insightsのスコアは改善傾向。文章メインではモバイル70点台、PC90点台で安定するようになった。

2/18(木) jQuery CDNのバージョンを3.2.1から3.5.1に変更/更新日時、演奏会カウントダウンのスクリプト内document.writeを置き換え/演奏会ページSNSシェアボタンをクリック後の読み込みに変更、各サービスのスクリプトもajaxで読み込み(但しLINEのみ仕様上スクリプトを事前読み込み)/新着情報のカテゴリ表示まわりのCSSを整理

2/17(水) PCメニューのキーボード操作対応(jQuery)。

2/17(水) フッターの連絡先表記に<address>利用。

2/16(水) 新歓情報各ページの2020年の内容を2020年ディレクトリに移設、古い情報である旨のお知らせバーを設置。既存ページを2021年向けにタイトル等修正/演奏会情報ページ試聴リンクのiframeをdetailsクリック後の読み込みに変更/利用規約の画像関係記述変更(イラストAC様とpixabay様の利用)/CSSでprefers reduced motion対応/メールアドレス画像等をGoogle image botのクロールから除外設定

2/15(火) 演奏会ページ会場表記のFontawesomeアイコンに代替テキストを<span class="sr-only"></spanで指定。

2/15(火) いまさらFontawesomeアカウント登録、kitの読み込みに変更。

2/14(月) HP掲載のメールアドレス変更/現時点での全てのページをWayback Machineに記録してもらう。

2/14(月)頃 PC向け游ゴシックの設定を通常時Medium、太字Regularの指定に変更。文章がはっきり見やすくなった気がする。

2/11(木) 画像のlazyload設定を拡大/Page Speed Insights対応でGoogle FontsとFontawesome CDNの読み込みを</body>直前に変更(「レンダリングを妨げるリソースの除外」)、Google AnalyticsのスクリプトURLを新しいものに統一(「使用していないjavascriptの削除」)、画像サイズの適正化(トップページ以外は出し分け面倒なので横1000px程度)、gzipでのテキスト圧縮設定

2/10(水) トップページスライドショー(slick)で解像度による画像出し分けに対応。

2/8(月) ページトップへ戻るボタンを<button>から<div>へ変更/<h1>を<article>内に移動し、W3CのHTMLチェッカーでのエラーを解消。合わせてaria-labelを指定。

1月初旬 PCメニューデザイン見直し、背景色を#ffaf58に統一、hover時に#fffaf4の背景(before疑似要素)、現在のページで#fffaf4の下線(before疑似要素)、mega menuはダークテーマ対応。本当は冬休み中に完成させたかった。/GA4対応、使い方が変わっていてよく分からないがひとまずデータを溜めておくことにした。/団員・OBOG専用ページの拡充/装飾のないリンクについてhover時に下線をなくし、変化をつけた。/中の人がやっとVS Codeを導入。各コードのインデントを修正。もっと早く使えば良かった。

2020年

年末(順番はだいたいの目安。)

・トップページのフェードインを1回きりに変更(従来は上に戻るとフェードアウトしていた)。

・トレーナー紹介ページをテーブルレイアウトから定義リストに変更

・YouTubeの埋め込みをモーダル表示に変更(演奏会ページ→活動内容ページ→トップページ)、演奏会ページはPCではクリックすると自動再生される。ページ読み込み時には動画は読み込まず、サムネイル画像とYouTubeロゴだけ。表示後閉じるときの×ボタン(Fontawesome)はダミーで背景の黒い部分ならどこをクリックしても挙動は同じ。トップページのPage Speed Insightsのスコアが余りにも悪かったため行った。

・演奏会ページに構造化データ(Googleのリファレンス)設定。HPの表示には関係ないが、HPの検索結果にリッチリザルトとして表示されるほか、「オリンパスホール八王子 イベント」で検索すると一覧表で確認できる。Googleがクロールして一覧表に反映するまで1週間くらいかかった。

・演奏会ページに各種配信サービスのリンク(とりあえずメインのブラ1のみ)をiframeで埋め込み。他大オケやラフォルジュルネのHPのアイデアの真似。ページが縦に長くなることを防ぎ、さらに読み込みを遅延させるため<details>と<summary>でエリアを作成。加えてiframeにlazyloadを指定したがそれでも各サービス最低限のスクリプトが読み込まれてしまい、Page Speed Insightsで40点未満になってしまったので、後に読み込み方法を変えることになった。

・ロゴ画像をSVGに変更。首都大時代のものは既にSVGを使っていたためやっと復帰することになった。作成にはPPTを使用。

・Webp画像対応。変換にはSquooshを使用。画像の出し分けはサーバーの設定で対応。

・トップページ、ニュース各ページの新着情報一覧で、最新5件以外はCSSでdisplay: none;指定していたものを、ajaxでの読み込み時に最新5件のみ読み込むように変更。後に団員専用ページも、団員向けの最新3件について同様に変更。

秋まで

・画像の代替テキストを拡充。

・新着情報一覧が増えてきたため最新5件の読み込みに変更。

・リンクボタンを作成しトップページに反映。後に他のページにも拡大。

・フッターの著作権表記に<small>利用

・説明付きリストを<ul><li>の間に段落を挟む形式から<dl><dd><dt>に変更

9/9(水)頃 過去の演奏会ページのレイアウトを見直し、検索機能をjQuery quicksearchを使って設置。AND検索もできることに後から気付いた。Enterキーを押すとソートが解除されてしまう問題があったが、後に挙動を見直して解消(11/3頃)。頻度の高い作曲家はドロップダウンリストに追加した。

・トップページのレイアウトを見直し、部員募集(新歓)の面積を広げ、新歓PVも埋め込み。さらにブロック毎に閲覧者のスクロールに連動して左右からフェードインするように設定。

・サイドバーの新歓情報メニューにposition: sticky;を設定。

・スクリーンリーダーを意識し<p>などを出来るだけ用いるように見直し。

夏まで

8/16(日)頃 スマホ表示時ヘッダーの水平スクロールを取りやめ、団員専用エリアでテストしていたハンバーガーメニューと、画面上部固定固定の"クイックメニュー"に変更。これにより、水平スクロールのわかりにくさの解消と、ハンバーガーメニューの回遊性の低さの両立を図った。

・<article><section><main><aside>等を利用して各ページのレイアウトを統一。

・<strong>に赤太字を指定して各所で利用。

・401、403、404エラーページを設定。

・Android対策でGoogle Fontsの明朝体(Noto Serif JP)導入。

5/3(日) YouTubeチャンネル開設。

4/26(日) Twitter公式アカウントのID変更に対応。

4/25(土) Google Analyticsをトップページに設置、4/28に全ページに拡大。

4/24(金) slick.jsのスライドショーをEdge Legacyに適用。positionの設定が不適切だったものを修正した。

・演奏会カウントダウンのデザインを変更し、演奏会ページにも追加。

・スマホ表示時のTwitter埋め込みを廃止。そもそもHPにTwitterから流入していることや、スマホでは下の方までスクロールされにくい、Twitterウィジェットをスクロール設定しているとHPが無限スクロール状態になる、などの理由。フッターへのリンク設置のみにした。はじめはdisplay: none;を指定したが、無駄なスクリプトが読み込まれることになるのでajaxで画面サイズによりPC時のみ読み込みに変更。

・一部ページに目次を設置。並べ方はfloat: left;。

・団員専用ページへの新着情報一覧読み込みを[内部向け]カテゴリのみに変更。

4/10(金) トップページへの新着情報一覧読み込みをiframeからajaxに変更。

4/8(木)OS又はブラウザのダークテーマ対応。合わせてCSSの色の設定を変数でまとめた。CSS gridを利用している段階でIEでの表示は崩れていたが、これによりIEでの表示がさらに崩れた。

4/9(木) XMLサイトマップを設置。

4/9(木) IEでの閲覧時にフッターにEdge、Chrome、Firefox、又はSafariの利用を促すメッセージを表示。

・4月初めまでにブログの累積PVが500を超える。

4/2(木) トップページ演奏会情報の背景をslick.jsを用いてスライドショーに変更。但しEdge Legacyで適用できず、Edgeのみ静止画を維持。

4/1(水) 都立大に名称変更。合わせてHPをロゴ変更、全体の装飾変更。楽器をイメージして独断で暖色系にした。

・外部サイトへのリンクにFontawesomeのアイコンを付加。

・新着情報一覧にカテゴリによるソート機能追加。

・新歓情報各ページのサイドバーに新歓情報メニューを追加

・PDFのリンクに自動でFontawesomeのアイコン(疑似要素)を付与するようにCSSを設定。

・HTMLサイトマップを設置。

3/19(木) ヘッダー部分を更新した結果、ディレクトリが異なる新歓各ページにも同じコードを貼り付けてしまった結果、当該ページのヘッダーがリンク切れとなってしまう。ローカル環境でも確認できるように相対リンクを使っていたため。ヘッダーファイル分離を模索するようになる。

3/15(日) 部員実態調査ページ開設。

3/12(木) 楽器紹介ページ開設。

3/3(火) ブログ開設。HPより柔らかく、活動記録を残すメディアとして検討。

・新着情報一覧をトップページから分離しトップページへはiframe読み込みに変更。但しスマホ表示時にiframe内にも広告が出るようになった。

3/1(日) ホームページ・ブログ利用規約設置。

・最終更新日時のスクリプトを全ページに設置。

・ページトップに戻るボタンを設置。

・トップページのみmeta descriptionを設定。

・HPスマホ閲覧に最適化。ブレイクポイントは750px。<meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1" />の設定。メニューは水平スクロールで画面上部固定、スクロールを促す左右矢印をjQueryで表示(但し一部画面幅に対応できず)。CSS gridでの作成を継続。その後徐々に各ページのレイアウトを見直し、多くのページでPCでは左側記事・右側Twitter埋め込み、スマホではTwitter埋め込みが下部にくるように設計。CSSはモバイルファースト。演奏会・新歓ページはメインの情報を強調するためTwitter埋め込みなし。

2/27(木) COVID-19拡大により春合宿中止決定。団員専用ページと新着情報ページの連携が検討課題。

2/22(土) リンク集開設。

参考にさせていただいたサイト様

HTML文法チェック
https://validator.w3.org/nu/
ヘッダー
タブレット、スマホ表示 : https://tech-dig.jp/hamburger-global-nav/ PC表示(900px以上) : https://theorthodoxworks.com/web-design/drop-down-menu-multi-css/
メニューの画面上部固定
https://proengineer.internous.co.jp/content/columnfeature/12366
メニューの表示中の項目強調
https://fukuoka-pamphlet-seisaku.com/glossary/fukuoka-blog/?p=1086
PCメニューのキーボード操作対応
https://www.webcreatorbox.com/tech/accessible-drop-down-nav
見出しのデザイン
https://saruwakakun.com/html-css/reference/h-design
見出しの文字の影
https://qiita.com/NoxGit/items/59dfcb41b204008bea9f
リンクボタンの矢印アイコン表示
https://h2ham.net/add-icon-after-and-middle/
新歓情報メニューを画面上部に来たら固定
https://mae.chab.in/archives/59690#TOP
CSS grid
https://www.webcreatorbox.com/tech/css-grid-basic-layout https://qiita.com/kura07/items/e633b35e33e43240d363 https://sterfield.co.jp/designer/%E5%B0%91%E3%81%97%E3%81%9A%E3%81%A4%E5%AE%9F%E8%A3%85%E3%81%AE%E9%80%B2%E3%82%93%E3%81%A7%E3%81%8D%E3%81%A6%E3%81%84%E3%82%8Bcss%E3%81%AE%E3%82%B0%E3%83%AA%E3%83%83%E3%83%89%E3%83%AC%E3%82%A4/
ダークテーマ
https://www.webcreatorbox.com/tech/dark-mode https://coliss.com/articles/build-websites/operation/design/how-to-design-delightful-dark-themes.html
prefers-reduced-motion 対応
https://note.com/takamoso/n/ncd758ab68491
ページトップに戻るボタン
http://serinaishii.hatenablog.com/entry/2015/11/06/%E8%B6%85%E7%B0%A1%E5%8D%98%26%E3%82%B3%E3%83%94%E3%83%9A%E3%81%A7OK%EF%BC%81%E3%83%9A%E3%83%BC%E3%82%B8%E3%83%88%E3%83%83%E3%83%97%E3%81%B8%E6%88%BB%E3%82%8B%E3%83%9C%E3%82%BF%E3%83%B3%E3%81%AE
ヘッダー、フッター、新着情報一覧を別ファイルから読み込む
https://codelife.cafe/entry/2015/10/27/222803 https://www.sejuku.net/blog/42555
トップページスライドショー(slick.js)
https://techacademy.jp/magazine/9529 https://b-risk.jp/blog/2020/01/slick-customize/ https://webdesignday.jp/inspiration/technique/jquery-js/3847/ https://qiita.com/wifeofvillon/items/0d1f6844533c7bed95c8 https://www.granfairs.com/blog/staff/slick-solve-tandem
トップページのフェードインアニメーション
https://www.tsurezure-owls-nest.work/html%E3%82%B9%E3%82%AF%E3%83%AD%E3%83%BC%E3%83%AB%E5%B7%A6%E5%8F%B3%E3%81%8B%E3%82%89%E3%83%95%E3%82%A7%E3%83%BC%E3%83%89%E3%82%A4%E3%83%B3/
新着情報一覧ソート
https://www.tam-tam.co.jp/tipsnote/javascript/post14636.html
YouTubeをオンデマンドで読み込みモーダル表示
https://web-diy.jp/2017/10/171023_01/
演奏会カウントダウンの数字を一つずつ囲む
https://allabout.co.jp/gm/gc/437937/
過去の演奏会一覧の表のデザイン
https://b-risk.jp/blog/2018/07/table-css/
過去の演奏会ページ検索機能
https://github.com/DeuxHuitHuit/quicksearch https://webkaru.net/jquery-plugin/quick-search/ https://www.sukicomi.net/2015/06/quicksearch-jquery.html (ソフト)キーボードの動作調整 https://taroken.org/keypress-function/ 候補表示 http://code.shotalog.com/?p=158

過去の当団のHP

現在運用中のサイトのアーカイブ
2021年2月14日のアーカイブ
2019年3月31日までのサイト(Yahoo! Geocities)、http://www.geocities.jp/tmuoke/
2019年3月30日のアーカイブ