画像処理周りパララックス効果ソースコードこんにちは、お久しぶりです!最近↓の「ぬるさくAI本」を書いていたので、ブログの方をお休みさせていただいてました!(もしよかったら買ってください。norwegian-geek.booth.pmところで、友人がやっているSeijisyukyoproyakyuというバンドのHPを作りました。作れたので、そのノウハウを今回の記事でお伝えできればと思います!今回つくったものseijishukyoproyakyuという友人がやっているバンドのホームページを作りました。(私やデザイナーの人件費を除けば)インフラなどの費用はゼロ!です。Netlifyのおかげでしょう。要件定義バンドのHPの要件定義をするときに、だいたい以下のようなものが必要だと思います。具体例としてはこんな感じですね↓(CHAIというバンドのHPを拝借させていただきました。社会人の本業がある傍らでやってるバンドなので、こういうHPってトゥーマッチじゃね?という結論に至りました。そのため、以下の形で要件を決めました。バンドのホームページはニュースなどのトランザクション系の情報は載せない。Twitterに情報を集約する。ページ遷移も行わない。スマホユーザーが多いので、レスポンシブ対応は必須にする。利用技術選定ホスティングサービス要件1によって、ブログ的なトランザクションを扱う必要がなくなったので、ただの静的ページを作れば良くなりました。静的ページのホスティングを行うサイトですと、主に、以下があります。利用することにしました。generate)をしてくれるプルリクを出すと、プルリクに対応した、サイトを自動で立ち上げてくれる。フロントエンドフレームワークでNuxt.jsを利用することにしました。ja.nuxtjs.org結果的には、以下のツイートにもある通り、フロントエンドフレームワークを利用してよかったです。Nuxtで友達のバンドのホームページ作ったんだけど、当初「普通にHTML/CSSで良くね?」とか自分でも思ったけど、明らかにNuxtにしてよかった、と今ならはっきりと言える。CSSを利用することにしました。cssはUIコンポーネントが一切、含まれていないCSSフレームワークのため、以下のような要件に適しています。cssやNuxt/Vueプラグインを用いたお手軽ページコーディングを中心に説明します。画面幅に応じて適用することができます。何も画面幅の識別子を指定しない場合には、小さい画面幅から適用されます。以下の例だと、スマホの画面幅で適用されるのは何も識別子を適用していないtext-2xl、md(タブレット幅)より大きい画面幅はmd:text-3xlが適用されます。画面幅ごとにスタイルを指定することができます。}}画像処理周りシンプルなサイトなのに、画像が超重かったりすると、目も当たられないので、画像周りは少しこだわることにしました。いっても、やったことはシンプルで、以下のNuxtプラグインを導入して、少しページに手を加えただけです。github.comこちらのプラグインは、以下の画像処理を自動でやってくれる非常に便利なプラグインです。HTMLへの埋込LazyLoad用の軽量画像作成*1WebPへ変換するには、webp-loaderというライブラリをインストールした上で、Nuxtのテンプレートでrequire('URLパス?webp')と?webpをパスに付与して画像を指定すれば、勝手にデプロイ時にWebpに変換してくれます!めっちゃ便利。</picture>パララックス効果パララックス効果を実装してほしい!という要望が出てきたのですが、これもVueのプラグインで実装できました。実スクロールよりも遅く見せることができます。</div>このパララックスプラグイン、iPhone、MacなどのSafari系のブラウザだと、ページ最下部が見切れるという不具合があるので、以下の形で、Safari系のときのみ、無理やり最下部にマージンをぶちこむ、という手法で解決しました。12vw);}ソースコードソースコードは以下のGithubに置いてあります。github.com*1:LazyLoadを実装するには、別途、LazyLoadを行うプラグインと組み合わせる必要があります。月別アーカイブ著書はてなブログをはじめよう!pco2699さんは、はてなブログを使っています。ブログを報告するスターをつけました引用をストックしましたストック一覧を見る閉じる引用するにはまずログインしてくださいログイン閉じる引用をストックできませんでした。再度お試しください閉じる限定公開記事のため引用できません。