blogTop見たこと、聞いたこと、考えたこと。factoryを約5年ぶりにリニューアルしました。リニューアルと言っても、コンテンツ自体は変わらず、レスポンシブデザイン化や表示スピードの向上、PWA化を目的としたプチリニューアルです。当サイトがモバイル対応したのは個人サイトとしては比較的早く2014年です。agentで判別してモバイル表示をファイルで分ける方法を採用してきました。2019年現在、モバイルからのアクセスが70%を超えスマホでの表示を第一に考えるのがすでに当たり前になっています。サイト管理上もファイル数を大幅に減らすことができるため、今回メディアクエリでCSSを判別するレスポンシブWebデザインに舵を切りました。表示スピードの向上スマホでの閲覧が主流になると表示スピードの向上が大きな課題になってきます。全体構造やCSSを見直し、大幅にスピードアップを図りました。正しいHTML構造やアクセシビリティも損なわないよう配慮しています。Apps)とは大雑把にいうと、主にスマホ上でWebページをネイティブアプリのように扱う技術の総称です。ホーム画面に追加することで通常のアプリのようにアイコンが表示され、起動するとブラウザから独立したアプリのように表示されます。当サイトでは以前から一部コンテンツ(ギターコードブック、ギタースケール辞典など)でそれぞれにPWA対応してきましたが、今回のリニューアルを期にサイト全体で対応することになりました。PWAのインストールは通常のアプリと違い、ブラウザのメニューから「ホーム画面に追加」することで完了します。AndoroidスマホのChromeブラウザならページ下部にバナーが表示されるのでタップするだけです。インストールされると通常のアプリのようにホーム画面から起動することができます。当サイトではホーム画面から起動すると、トップページがアプリ風に表示されるよう一工夫しています。リピーターの多いツールコンテンツへのリンクをボタン風にして、ファーストビューからすばやく移動できるように配慮しました。IEの人ごめんなさいIE(インターネット・エクスプローラー)で表示すると一部のコンテンツで表示が崩れることを確認しています。IEは昔からCSSを独自解釈をすることで有名でしたが、スマホで主流のモダーンブラウザとの乖離がいよいよ看過できなくなってきました。現在当サイトへのアクセスのうちIEでの閲覧は約4.5%。IEユーザーに合わせて他の95%のユーザーに迷惑をかけられないため、対応が後回しになっています。古いコンテンツは徐々に手入れしていきます当サイトも開設から19年が経ちます。マイペースで運営を続けてきましたが、ここ2年ほどはほぼ手付かずの状態が続いていました。コンテンツも古くなったものやリンク切れを起こしているものがあるのは承知しています。20周年も現役サイトとして生き残れるよう徐々にメンテナンスを再開していきます。factoryの中の人。京都生まれの京都育ち。「コード音感トレーニング」を公開しましたギターコード・ピンナップの使い方プチリニューアルしました地味に改善中ギターコード譜ジェネレーターをリリースしました。※引用の範囲を超える転載はご遠慮ください。