- 投稿日：2020-12-06T21:25:58+09:00
私の爆速コーディング（ツール編）
はじめに
コーディング業をメインでフリーランスエンジニアをしています。なかざわです。
CSSと同い年。CSS大好き！新卒からWeb制作会社に勤めてから「コーディング向いてないや。」が口癖で挫折しかけていた私でしたが
3年目には上司に「え、コーディング・・・はやいね！？」と驚かれるまでになっていました。私もびっくり！
涙目でコーディングPDCAをひたすら回しまくっていた、私のベストなコーディング（至、爆速コーディング）をご紹介したいと思います。本記事は前編としてコーディングを助けるツールをメインにご紹介したいと思います。
16日公開の後編は設計思想・書き方ルールから、ベストなコーディングへアプローチすることをメインにお届けします。現場で求められるコーディング
そもそも「爆速コーディング」の前に必要なことがあります。
まずクオリティです。何も補足がいらないくらい至極当たり前のことですね・・・。
というのを前提にして「コーダー」に求められること
- 文書的整合性
- ピクセルパーフェクト
- 作業の効率性 & メンテナンス性
の3点が求められていると思っています。
ざっくりと「成果物のクオリティ」と「開発のスムーズさ・安全さ」です。
それぞれ補足説明しながら対策についても共有できればと思います。1. 文書的整合性
まず一番最初に得なければならないスキルです。
「HTML文書として破綻していないか」が、まず必要。
- HTMLファイル内のタグの閉じタグが意図したところにない、などの文書の崩れ
- HTMLのルールを守った文書構造になっていない（w3cのHTML仕様を守れていない）これらのような状態にならないようにしましょう。
不完全なHTMLになってしまうと、スタイルが意図通りに効かなかったり、ブラウザ側でエラーとして検出されてしまいます。
当たり前ではありますが、成果物としてクオリティを担保しなければならないので、HTMLの文書的整合性が常に求められます。対策は簡単！
HTMLバリデーションチェックを欠かさずに行います。（「HTML バリデートチェック」と検索すると複数サイトが出てきます）
そんな簡単なミスしないよ・・・！って自信満々な私も
すべてのコーディングが終わったあとはバリデートチェックの時間を作って全てのページを確認するようにしています。
で、ミスは普通にあります。未だに。。やっておいて良かったねえ・・・って毎回思います。2. ピクセルパーフェクト
HTML文書が破綻しないのと同じくらい大事なこと。
「デザインを完全再現できているか」
デザインは1px単位で意味を持っています。（持っているはずです。）
これをコーダーが無視して大雑把にコードに反映してしまうことは許されません。
「デザインされたものを1px単位でコードに反映しよう！」というのがピクセルパーフェクトです。
現場によってピクセルパーフェクトの優先度がまちまちなこともありますが、コーダーとしてピクセルパーフェクトを意識しながら実装していきましょう！おすすめツール
こちらはGoogle chromeの拡張機能です。任意の画像を半透過させてブラウザに重ねることができるので、デザイン画像をコーディングしたページを重ねて、デザインとぴったり重なるかを確認することができます。
Zeplinアプリにもデザインの半透過機能があるので、同様にページと重ねて確認することができます。ピクセルパーフェクトを目指すと、デザインと成果物を横に並べて比べるのだけでは確実性がなくなりますので、ぜひデザインと成果物を重ねて確認するようにしてみてください。
ちなみに、私はざっとコーディングした後にピクセルパーフェクトを極める時間を作るのですが、このピクセルパーフェクトタイムが好きです。
なんか彫刻芸術家が0.1ミリのズレを許さない作業をしているみたいな・・・THE・匠って感じがして・・・笑3. 作業の効率性 & メンテナンス性
HTMLの文書的整合性を担保できて、且つデザインも再現できるようになったら。
やっとここまで来ました！次はコーディングの効率化を目指しましょう！
現場ではHTMLのコーディングで何日も時間を使えないことが多いです。
そのため、効率良くコーディングができる人材は重宝されます。コーディングの機会の度に「前回のコーディングよりも効率的にやろう！」と、ぜひ時間を測りながら作業してみてください。
そしてPDCAを回してくださいね。まず、何に時間がかかっているのかを考えてみました。
コーディングで時間がかかること
- クラスの命名に悩む 【なんて名前にしよう・・・あ、このクラス名はすでに使ってたわ・・・】
- HTMLの設計に悩む 【え、divめっちゃ多くなったな・・・タグ多くない？混沌としてない？】
- その他スタイルの付け方に悩む 【どこにpadding付けるの？それともmarginのほうが良いのかな？】
上記が多いのかなと思います。
ここでどれだけ悩まないでコーディングできるか、合理的にコーディングできるかが効率化を左右するのと、もう一つの「求められること」とした「メンテナンス性」に繋がります。
クラスの命名・HTMLの設計が整理できるようになれば、コーディングも迷わずスムーズかつ、安全に運用・納品ができるメンテナンス性をかなえることができます。
解決策となる設計思想・マインドは16日公開の後編記事にて具体的にご共有します！まずはツールから
今回はツールに集中してご紹介♪
物理的にコーディングをサポートするものをご紹介します。
どれもメジャーなものばかりですが、参考になれば幸いです。VSCode & VSCodeのプラグイン
現在はVSCodeをメインのテキストエディタとして使用しています。
プラグインも充実しているし、挙動も軽い。
コーディングしている分には十分なエディタだと思っています。VSCodeおすすめのプラグインをご紹介します！
Lint系のプラグイン
- HTMLHint
- stylelint
HTML / スタイルそれぞれの記述に誤りがあるかをタイムリーに教えてくれます。
なにかあると「問題」ウィンドウに表示してくれますので、スタイルが思ったように効かないと思ったらまずこのウィンドウを確認すれば原因が分かる事が多くなり、デバッグの時間短縮になります。インデントの整理を楽にするプラグイン
HTMLのインデントって、慣れないと整理するだけで頭が混乱しませんか？
私はHTML初心者の時に、いつもインデントがおかしいって怒られていました。しかも何が変なのかすらイマイチ自覚がないという・・・笑
インデントの感覚は遅かれ早かれ慣れるものでしたが、補助があればインデントの気にすることが減って、その分コーディングスピードもアップします。indent-rainbowはインデントごとにカラーが変わるので、インデントのカウント・一覧性が良くなります。
Beautifyは、インデントを自動で整理してくれるプラグインです。自動インデントしてくれるのはBeautifyだけではなく、VSCodeの基本機能にも入っているようですので、ご自身の開発に適したツールを使ってみてください！
Prettierもインデントを適切にしてくるフォーマッターの一つです。
BeautifyなどのAuto indent toolはインデントがグチャグチャなHTMLファイルを一斉に自動インデントしてくれるのに対して、Prettierはコードを書いて保存したときに、決まったフォーマットに合わせて調整してくれます。
Prettierはもとのコードのインデントがグチャグチャだと正確に動かないことがあるので、日頃インデントを意識できている方への補助向けかもしれないです。また、フォーマッターなのでコードの規則性が定められるというメリットがあります。上記のプラグインは全て入れても干渉し合わないので、ぜひ全て入れてしまいましょう！
ちなみに、インデントは「スペースによるインデントの個数2」がコードが読みやすいため一番オススメです。
慣れてきたら気にしてみてください♪
（既存のコードのインデント設定は勝手に変えないようにしてくださいね。）以上、おすすめプラグイン（厳選）でした！
そもそもVSCodeはプラグインを入れなくても補助機能が使えて便利だなあと思います。
ぜひ、VSCodeのおすすめ機能などを調べながら使ってみてください♪Sass の scss記法
SassはCSSの記述を簡略化・管理しやすくするメタ言語です。
Sassの中にはsass,scssの記法がありますが、現在scss記法がメジャーなのでscss記法のみご紹介します。
scssは、CSSよりも記述量を減らしたセレクタの指定ができます。
またスクリプト言語にもなるのでCSSなのに変数を持ったり、値の計算が出来るようになります！
コーディングの効率化に大きく役立つため、多くの現場がCSSの素書ではなくscssを採用しています。ただ、ブラウザはscssが読めないため、scssはCSSにコンパイルしなけばなりません。
そのためコンパイルを前提とした開発環境が必要です。たとえば、以下のcssは
style.css.header { color: pink; } .header h1 { color: red; font-size: 40px; }=> scssだとこんな記述になります。
style.scss.header { color: pink; h1 { color: red; font-size: 40px; } }scss記法の詳細については他に記事が十分あるため省略します！
Emmet
- Emmet
HTMLを簡略化した書き方ができるようになります。 エディタによってはEmmet対応するためのプラグインが必要ですが、VSCodeではデフォルトで対応しています！例えば
index.html!と入力してTabキーを叩くと
index.html<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> </head> <body> </body> </html>と、HTML5の最低限必要なタグが表示されます。
テンプレートとして使うのに便利ですね。
※ デフォルトがlang="en"なので、日本語サイトの場合にはjaに変える必要があります。また、
CSSセレクタの書き方で書いてTabキーを叩くとHTMLに変換されます。index.htmlh2.heading02=>
index.html<h2 class="heading02"></h2>属性の記述が面倒くさいタグだって！Tabキーで叩くだけで。
index.html//それぞれTabキーを叩く必要があります a img=>
index.html<a href=""></a> <img src="" alt="">便利ですね！
もっといろんな応用活用がありますのでぜひ調べてみてください！
ですが、これくらいの使い方が個人的には一番実用的な気がします。
（ショートカットでもなんでも、複雑になって「なんて打つか頭で一瞬考えなきゃいけない」のはもう効率的ではないと思うので。）紹介しておいてアレですが、私はEmmetを使いません。
Pugを使うからです！Pug
パグはHTMLのテンプレートエンジンの一つで、HTML機能の拡張と入力の簡略化ができます。
テンプレートエンジンなので、Pug => HTMLへのコンパイルが必要です。
scssとCSSの関係と同じですね。機能の拡張はHTMLなのに「インクルード・変数を持てること」が便利です。
入力の簡略化については、記法がEmmetとほぼ同じになるというところが便利です！
開始タグ・閉じタグという概念がなくなり、そのかわりインデントがマークアップに意味を与えます。
そのためインデントの正確さが求められ、慣れないと思い通りにいかない時があるかもしれません。
少しだけ慣れが必要だと思います。
scssと同様でコンパイルできる開発環境が必要なのもあり、導入コストの低さはEmmetには劣ります。でもすごく便利ですよ。
まずは以下を御覧ください。Pug
index.pugdoctype html html(lang="ja") head meta(charset="UTF-8") meta(name="viewport" content="width=device-width, initial-scale=1.0") title Document link(rel="stylesheet" href="/assets/css/style.css") body include ./_includes/header.pug main .main-visual#main-visual .main-visual__inner h1.main-visual__title xxxxxxxxxxxx br | xxxxxxxxxxx br | xxxxxxxxxxxxxxxxxxxxxx br | xxxxxxxx .news-label .news-label__inner .news-label__box--left .news-label__label NEWS ul.news-label-list li a(href="dammy") p.news-label-list__date 2020.06.01 p.news-label-list__title xxxxxxxxxxxxxx .news-label__box--right a.news-label__more(href="dammy") Read More →=>
HTMLにコンパイルされたあと
index.html<!DOCTYPE html> <html lang="ja"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <link rel="stylesheet" href="/assets/css/style.css"> <link href="./assets/css/style.css" rel="stylesheet"></head> <body> <header class="header" id="header"> <div class="header__inner"> <div class="header__primary"> <div class="language"> <ul class="language__list"> <li class="--active"><a href="dammy">JP</a></li> <li><a href="dammy">EN</a></li> <li><a href="dammy">ZH</a></li> </ul> </div> <div class="anchor-icon"> <ul class="anchor-icon__list"> <li class="--partner"><a href="dammy"> <div class="anchor-icon__image"></div></a></li> <li class="--contact"><a href="dammy"> <div class="anchor-icon__image"></div></a></li> </ul> </div> </div> <div class="header__secondary"> <div class="header__logo"><img src="/assets/images/common/header-logo.png" alt=""></div> </div> </div> <div class="pc-nav"> <div class="pc-nav__inner"> <ul class="pc-nav__list"> <li><a href="#about">xxxxxxxxxxxxx</a></li> <li><a href="#development">xxx</a></li> <li><a href="#message">xxxxxxxxxx</a></li> <li><a href="#company">xxxxxxxx</a></li> <li><a href="#partner">xxxxxxx</a></li> <li><a href="#news">xxxxxxxx</a></li> </ul> </div> </div> </header> <main> <div class="main-visual" id="main-visual"> <div class="main-visual__inner"> <h1 class="main-visual__title"> xxxxxxxxxxxx <br> xxxxxxxxxxx <br> xxxxxxxxxxxxxxxxxxxxxx <br> xxxxxxxx </h1> </div> </div> <div class="news-label"> <div class="news-label__inner"> <div class="news-label__box--left"> <div class="news-label__label">NEWS</div> <ul class="news-label-list"> <li><a href="dammy"> <p class="news-label-list__date">2020.06.01</p> <p class="news-label-list__title">xxxxxxxxxxxxxx</p></a></li> </ul> </div> <div class="news-label__box--right"> <a class="news-label__more" href="dammy">Read More →</a> </div> </div> </div> </main>こんな感じ！
PugとHTMLじゃ記述量が全然違いますよね・・・。
Pug側には<header>がなかったのに、HTML側に出現したのは、include ./_includes/header.pugと書いてheader.pugという別ファイルの記述をインクルードできたからです。
これができると、ヘッダーやフッターなどの共通部分を1つにまとめて管理できるので、メンテナンス性が高くなります。CSSセレクタの書き方で良いので、HTMLからCSSにコピペするときに、セレクタの書き方に直さなくて良いのが便利です。
Pugはインデントが重要というのは、階層でHTMLの親子関係を表すからです。
閉じタグの概念はありませんが、子要素がインデントが中に入っていくのはHTMLのインデントと同じですので、少しずつチャレンジしてみてください♪このセレクタの書き方でタグを書く書き方については、EmmetのTabキー展開前とほとんど一緒なことに気づきましたでしょうか？
私は基本Pugで書くので、Emmetは使わないです。でも、HTMLで書かなければならない場面であってもPugとEmmetの記法が同じなのでPugを書いている感覚でHTMLも素書できて楽です。爆速コーディングは一日にしてならず
以上、ツールのご紹介をメインにしたベストなコーディング（至、爆速コーディング）のコツでした♪
ツールは厳選しましたが長々とした記事になってしまいました。。技術をパクるのは簡単じゃないことも多いですが、
ツールをパクるのは直ぐにできます！そして効果を得やすいので、ツールから攻めるのはとても大切だと思います。
周りにいる先人エンジニアには便利ツールをどんどん聞いちゃって真似しましょう！そしてぜひ興味を持ったツールは使ってみてください！
次回は16日公開のコーディングの設計思想・ルール編です。
頭の中でさっと組み立てて、あとは指にアウトプットを任せるだけ！みたいなコーディングを目指した記事をお届け出来るようにしますので、ぜひお読みくださいませ！
- 投稿日：2020-12-06T20:04:20+09:00
ユーザーに優しいローディング画面「スケルトンスクリーン」
はじめまして。アドベントカレンダー初参戦のフロントエンド1年生です。（1月で2年生?）
以前ふと耳にした言葉「スケルトンスクリーン」がずっと気になっていたので、これを機に皆さまにも共有できたらと思います。スケルトンスクリーンとは
スケルトンスクリーンはご存知ですか？
名前を聞いたことがない方も、きっとどこかで見たことがあると思います。
↓この人です。
ページやコンテンツの読み込み中、真っ白なページが長く続くとユーザーは不安になります。
その不安を解消するため、プログレスバーやぐるぐる回るスピナーを表示して「今、読み込んでますよ」とユーザーに伝える手法が定番でした。
そしてここ数年で新たに見かけるようになったのがスケルトンスクリーンです。スケルトンスクリーンは、画像やCSS、JavaScriptを読み込んでいる間にワイヤーフレームのようなボックスを表示し、UXを向上させるために使われる。ユーザにとってはプログレスバーやスピナーと違いどんなページが表示されるか予想できるため、ロード時間が長くても心理的に短く感じられる。
（引用：https://kuroeveryday.blogspot.com/2017/05/load-with-skeleton-screens-and-shimmer-effect.html）確かに、どこにどんな形で表示されるのかわかるので、
ただ真ん中でスピナーが1つグルグル表示されているよりは、ストレスも軽減されますね！！
YouTubeやSlackやQiitaなど、さまざまなサイトで見かけるようになりましたが、
なんだか実装難しそう・・・
ということで、調べながらですが挑戦してみました。実装
手順は3つ！
1. コンテンツを用意
2. loadingクラスでスケルトンスクリーン作成
3. 画像の読み込みが終わったタイミングで、loadingクラスを非表示にする今回の題材は、お正月も近いので干支にしました。
コンテンツが用意できたらHTMLとCSSでこの子のスケルトンスクリーンを作成します。
index.html<ul class="list"> <li class="item"> <div class="item__img"> <!-- 画像部分のスケルトンスクリーン --> <div class="loading" data-js="loading"> <span class="loading__img"></span> </div> <img class="img" src="/images/nezumi.png" /> </div> <div class="item__text"> <!-- テキスト部分のスケルトンスクリーン --> <div class="loading" data-js="loading"> <span class="loading__line"></span> <span class="loading__line"></span> <span class="loading__line"></span> </div> <div class="text"> <dl class="text__title">ねずみ（子）</dl> <dd class="text__description">すぐに子ねずみが増え成長することから、子孫繁栄の意味があります。</dd> </div> </div> </li> </ul>style.css.loading { position: absolute; display: block; width: 100%; height: 100%; background: #fff; overflow: hidden; z-index: 50; } /* キラキラエフェクトのアニメーション */ @keyframes skeleton-animation { 0% { transform: translateX(-100%); } 100% { transform: translateX(100%); } } .loading::before { position: absolute; top: 0; left: 0; z-index: 100; content: ""; display: block; height: 100%; width: 100%; background: linear-gradient( 90deg, transparent, rgba(255, 255, 255, 0.2), transparent ); animation: skeleton-animation 1.2s linear infinite; } /* 画像部分のスケルトンスクリーン */ .loading__img { display: block; width: 100%; height: 100%; background-color: #e2e2e2; border-radius: 50%; } /* テキスト部分のスケルトンスクリーン */ .loading__line { display: block; margin-top: 10px; height: 20px; background-color: #e2e2e2; } /* スケルトンスクリーンを非表示にするクラス */ .loading--hidden { display: none; }
こんな感じに、コンテンツの画像・テキストをシルバーのスクリーンで覆うイメージです。そして最後にJSです。
画像の読み込みが終わったらdata-js='loading'の要素のクラスにloading--hiddenを追加して非表示にしてあげるだけです。main.js// ローディングの要素取得 const loadingItem = document.querySelectorAll("[data-js=loading]"); // loading非表示クラスを追加 const hideLoading = (list, className) => { list.forEach((element) => { element.classList.add(className); }); }; window.onload = () => { hideLoading(loadingItem, "loading--hidden"); };
このように、ローディング中の数秒間だけスケルトンスクリーンが表示されるようになりました！完成
ねずみだけだと寂しいので、仲間を増やして完成です。
とてもとてもいい感じな気がします。
※コードはこちら：GitHub
おわりに
スケルトンスクリーンの実装は思ったよりも難しくはなく、案外シンプルに実装できました。
しかし、
- 読み込みが早い場合はコンテンツ表示時に一瞬ちらつくな…
- コンテンツの文字数が増えたらはみ出しそうだな…
- スクロールに合わせて画像を読み込み開始にしたらさらに良いかも…
など、いろいろ改善の余地はありそうです。
また、従来のスピナーやプログレスバーとの効果的な使い分けについても、もう少し探っていけたらと思います。ストレスフリーなローディング画面を目指して！！！！
参考
)
- 投稿日：2020-12-06T18:27:18+09:00
画像の読み込み中にローディングマークを表示させる
はじめに APIから画像を取得する時、読み込みが遅いと画像がある部分が空欄になる。 そこに画像が表示されることを分かりやすくするため、ローディングマークを表示させる。 loading.gifを背景に設定 こちらのサイトから透過済みのフリー画像を保存。 背景画像にloading.gifを設定し、メイン画像が表示されるとloading.gifが隠れるようにする。 コード imageにAPIから取得した画像URLが入る。 <div style="background-image: url('images/loading.gif'); background-repeat: no-repeat; background-position: center center; min-height: 50px;"> <img :src="image"> </div> 参考サイト
- 投稿日：2020-12-06T17:40:25+09:00
Qiitaの投稿で装飾したいときによく使うHTMLタグ
どうも7noteです。Markdownだけでは対応できない細かい調整が可能！
画像が大きくなりすぎたり、色を付けて目立たせたりしたい時に使えるタグやCSSをまとめました。
毎日投稿していると覚えていきますが、忘れそうなのでメモのついでに投稿します。■ 画像サイズをカスタマイズ
<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/661092/hogehogehoge.png" width="200">画像のサイズを変更します。
そのままだと大きすぎたりして使いにくいので画像の横幅を指定します。
この( )の中のURLだけコピペしておきます。↓変更前↓
↓変更後↓
■ 文字に色を付ける（
<font color=""></font>）<font color="red">赤文字</font> もしくは16進数表記で <font color="#ff0000">赤文字</font>--見本-----------
赤文字になるよ
------------------■ 改行させる（
<br>）|朝|昼|夜| |:--|:--|:--| |おはよう<br>おっはー|こんにちは<br>こんちわ|こんばんわ|--見本-----------
朝 昼 夜 おはよう
おっはーこんにちは
こんちわこんばんわ ------------------
表などの中で改行させたい時に使うことが多いです。
通常の文章のところでも使えますよ！■ 打ち消し文字（
<s></s>）<s>ここに消したい文字を入れると線が入る</s>--見本-----------
ここに消したい文字を入れると線が入る
------------------古くなった文字を消したり、言葉を濁したりしたい時に便利。
追記：Markdownで
~~文字~~と囲むことでできるみたいですね。つい<s></s>で書いてました。■ 一部のみ非表示にする（
<!-- 消したい文字 -->）いわゆるコメントアウトですね。自分用のメモを残しておきたい時に便利。
<!-- ここに消したい文字を入れる -->--見本--（検証ツールやソースを表示すると見れる）
↓ここ
↑ここ
------------------まとめ
マークダウンは慣れてくると便利で見た目も綺麗に整えてくれますが、
ちょっとした修正や微調整は難しいので、そんな時にちょこっとhtmlが書けると便利ですね。おそまつ！
~ Qiitaで毎日投稿中!! ~
【初心者向け】HTML・CSSのちょいテク詰め合わせ
- 投稿日：2020-12-06T17:17:54+09:00
アイキャッチ画像のサイズを固定化するのをやめたい
はじめに
WordPressのテーマ作成にあたってダミーの投稿表示しようとしたところ、アイキャッチ画像が思っていたように表示されなかった。
原因はthe_post_thumbnail()
第一引数にメディア設定のサイズをmediumやlargeなどの文字列で渡すことによって、設定の値をimgの属性に設定してくれる。
the_post_thumbnail('medium')とすることで、メディア設定の中サイズが適用され、
<img src="~/~/hoge.jpg" width="300" height="300" />というhtmlを出力してくれる。出力されるhtmlにclassをつければいいんじゃね？
出力されるimgタグにclassを付与するには
the_post_thumbnail()の第二引数に連想配列を渡すことで実現可能になる。
the_post_thumbnail('medium', array('class' => 'hoge')
はい、これでhogeクラスがついたimgタグが出力されます。
<img src="~/~/hoge.jpg" width="300" height="300" class="hoge" />
ブラウザで確認すると見事にサイズが変わっていませんでしたCSSの優先度
ここから紹介するのは、どこで定義されたCSSが最終的に読み込まれるかです。詳細度ではないので注意です！
何もCSSを適用していない場合はブラウザのCSSが適用されます。
ユーザーエージェントstylesheetと呼ばれるやつですね。次に読み込まれるのは、HTMLで読み込んでいるCSSです。
linkタグで読み込んでいるアレです。最後に読み込まれるのはHTMLのstyleタグまたは属性の値が読み込まれます。
整理するとこんな感じです。
ユーザーエージェントstylesheet < linkタグで読み込んだCSS < styleタグor属性の値ここまでくるとclassをつけてもCSSが属性の値を優先的に読み込んでいた理由がわかります。
アイキャッチ画像の取得方法を変えよう！
src属性さえ取得できたら画像表示できるやんという発想の転換からthe_post_thumbnailを利用をやめました。
get_post_thumbnail_id()をループの中で使用し、アイキャッチ画像のidを取得し、wp_get_attachment_image_src()の第一引数にさっき取得したidを渡して、配列の0番目の値をimgのsrc属性に渡せばオッケー。archive.php// ループ始まり $id = get_post_thumbnail_id(); // 画像のidを取得 $img_info = wp_get_attachment_image_src($id, 'none'); // 画像の情報を取得 詳しくはCodex見てね！ <img src="<?php $img_info[0] ?>" class="hoge" /> // ループおわり
wp_get_attachment_image_srcの第二引数に注目して下さい。
本来であればここにmediumやlargeを渡すんですが、サイズを指定したくない場合はnoneを渡せばいいみたいです。
noneはthe_post_thumnailでは使えませんでした。
ドキュメントにnone渡せるって書いてないじゃん。。。
https://wpdocs.osdn.jp/%E9%96%A2%E6%95%B0%E3%83%AA%E3%83%95%E3%82%A1%E3%83%AC%E3%83%B3%E3%82%B9/wp_get_attachment_image_srcこれでwidthとheight属性が付与されなくなったので、晴れてclassに割り当てられたCSSが装飾されるようになりました！
おわりに
一つのテンプレートタグに囚われ過ぎないように気をつけます
- 投稿日：2020-12-06T17:17:54+09:00
アイキャッチ画像のサイズ固定化をやめたい
はじめに
WordPressのテーマ作成にあたってダミーの投稿表示しようとしたところ、アイキャッチ画像が思っていたように表示されなかった。
原因はthe_post_thumbnail()
第一引数にメディア設定のサイズをmediumやlargeなどの文字列で渡すことによって、設定の値をimgの属性に設定してくれる。
the_post_thumbnail('medium')とすることで、メディア設定の中サイズが適用され、
<img src="~/~/hoge.jpg" width="300" height="300" />というhtmlを出力してくれる。出力されるhtmlにclassをつければいいんじゃね？
出力されるimgタグにclassを付与するには
the_post_thumbnail()の第二引数に連想配列を渡すことで実現可能になる。
the_post_thumbnail('medium', array('class' => 'hoge')
はい、これでhogeクラスがついたimgタグが出力されます。
<img src="~/~/hoge.jpg" width="300" height="300" class="hoge" />
ブラウザで確認すると見事にサイズが変わっていませんでしたCSSの優先度
ここから紹介するのは、どこで定義されたCSSが最終的に読み込まれるかです。詳細度ではないので注意です！
何もCSSを適用していない場合はブラウザのCSSが適用されます。
ユーザーエージェントstylesheetと呼ばれるやつですね。次に読み込まれるのは、HTMLで読み込んでいるCSSです。
linkタグで読み込んでいるアレです。最後に読み込まれるのはHTMLのstyleタグまたは属性の値が読み込まれます。
整理するとこんな感じです。
ユーザーエージェントstylesheet < linkタグで読み込んだCSS < styleタグor属性の値ここまでくるとclassをつけてもCSSが属性の値を優先的に読み込んでいた理由がわかります。
アイキャッチ画像の取得方法を変えよう！
src属性さえ取得できたら画像表示できるやんという発想の転換からthe_post_thumbnailを利用をやめました。
get_post_thumbnail_id()をループの中で使用し、アイキャッチ画像のidを取得し、wp_get_attachment_image_src()の第一引数にさっき取得したidを渡して、配列の0番目の値をimgのsrc属性に渡せばオッケー。archive.php// ループ始まり $id = get_post_thumbnail_id(); // 画像のidを取得 $img_info = wp_get_attachment_image_src($id, 'none'); // 画像の情報を取得 詳しくはCodex見てね！ <img src="<?php echo $img_info[0] ?>" class="hoge" /> // ループおわり
wp_get_attachment_image_srcの第二引数に注目して下さい。
本来であればここにmediumやlargeを渡すんですが、サイズを指定したくない場合はnoneを渡せばいいみたいです。
noneはthe_post_thumnailでは使えませんでした。
ドキュメントにnone渡せるって書いてないじゃん。。。
https://wpdocs.osdn.jp/%E9%96%A2%E6%95%B0%E3%83%AA%E3%83%95%E3%82%A1%E3%83%AC%E3%83%B3%E3%82%B9/wp_get_attachment_image_srcこれでwidthとheight属性が付与されなくなったので、晴れてclassに割り当てられたCSSが装飾されるようになりました！
おわりに
一つのテンプレートタグに囚われ過ぎないように気をつけます
- 投稿日：2020-12-06T17:01:29+09:00
Riot.js でローカルに HTML を生成する環境を作ってみた。
これは Riot.js Advent Calendar 2020 の 6 日目の記事 ? です。
動機
いままで、HTML を書くときは共通部分を一元化したりするために EJS とか Nunjucks などの HTML を生成するテンプレートエンジンを使っていました。
そんな折に、Riot.js の公式 Twitter アカウントの以下のツイートを目にします。
Riot.js from now on can be used also as #javascript server side engine https://t.co/4L2ZxFaYGh pic.twitter.com/gv2epBROP6
— Riot.js Framework (@riotjs_) August 6, 2020この水辺を楽しげにスキップしているおばあさん（？）が何者なのかわかりませんが、
ツイートのリンク先、GitHub のリリースを見てみると、Riot.js の SSR 用モジュールで、こんなサンプルが書いてありました。<html> <head> <title>{ state.message }</title> <meta each={ meta in state.meta } {...meta}/> </head> <body> <p>{ state.message }</p> <script src='path/to/a/script.js'></script> </body> <script> export default { state: { message: 'hello', meta: [{ name: 'description', content: 'a description' }] } } </script> </html>これをみて最初は「あ、head タグとかも生成できるんだー、へー、まあ SSR にはそりゃ必要だよねー」くらいの感想だったんですが、あとでよくよく考えたら、これって Nunjucks とかでやってることと一緒じゃね？じゃあ Numjucks でやってることも Riot.js でできるんじゃないの？と思いました。
やれるかも
SSR 用のモジュール、デザイナーのぼくにはこれまであんまり馴染みがなかったんですが、
もともと、なるべく Webpack とか Gulp みたいなものに依存しない環境を作りたいという気持ちから Riot.js を使う環境も riot/cli という公式のプリコンパイラーを npm-scripts から使うようにしててて、 node.js で実行するコードも簡単なものは少し書いたりしてたので、自分でもやれるかもとおもいました。やりたいこと
とりあえず、SSR 用のモジュールは、Node.js が動くサーバーで、リクエストに対して
.riotをコンパイルした結果を返す というものだろうとおもってたので、
その機能を npm-scripts から実行して、リクエストにコンパイル結果を返す代わりにローカルに HTML としてファイルを保存すればいいだろう、というのがやりたかったことです。（これができれば使っていた Nunjucks の代わりになりそうという発想）やってみた。
ディレクトリ構造
ちょっと省略しますが、だいたいこんな感じです。
dist ← ここに HTML が保存される node_scripts └ html.js ← これを実行すると .riot → .html src └ html ├ components ← HTML 生成する際の共通パーツを置く └ pages ← 生成する HTML に対応する .riot を置く package.json ← 必要な npm-scripts を記述.riot → .html の処理
SSR モジュールは Node.js から呼び出して使わないとなので、npm-scripts で呼び出すJSファイル
node_scripts/html.jsを作って、そこで @riotjs/ssr を使った処理を書いていきました。const fs = require('fs')// Node.js のファイル管理モジュール const path = require('path')// Node.js のパス扱うモジュール const glob = require('glob')// /**/*.js みたいにファイルを複数取得するために必要 const mkdirp = require('mkdirp')// ファイル保存時のディレクトリ作成に使用 const { render } = require('@riotjs/ssr')// Riot.jsのSSRモジュール const register = require('@riotjs/ssr/register')// Riot.js のおまじないに必要 const srcDirFromRoot = './src/html/pages' // HTML のテンプレートとなる .riot ファイルを置くディレクトリ const outputDir = './dist' // 生成した HTML を保存するディレクトリ // Riot コンポーネントを require できるように register() // HTML 生成のテンプレートとなる .riot ファイルを読み込んで、HTMLを生成する関数を実行 glob(`${srcDirFromRoot}/**/*.riot`, (err, files) => { if (err) return err generateHtml(files) }) // HTMLを生成する関数 const generateHtml = (files) => { /* * 引数で渡された配列から取り出したファイルパスごとに .riot → .html を実行。 * Riot.js の公式のサンプルリポジトリの中の SSR のサンプルを参考にした。 * https://github.com/riot/examples/blob/gh-pages/ssr/index.js */ files.forEach((file) => { const Root = require(`.${file}`).default const html = render('html', Root) const dir = path.join( outputDir, file.replace(srcDirFromRoot, '').replace(/riot$/, 'html') ) /* * 書き出すディレクトリが存在しないとエラーになっちゃうので * mkdirp でディレクトリ作成してそこに HTML を保存。 */ mkdirp(path.parse(dir).dir).then(() => { fs.writeFile(dir, html, (err) => { if (err) throw err }) }) }) }HTML に変換される .riot ファイルの中身
HTML に変換される .riot ファイルは、いくつかの共通パーツに分かれています。
まず全体の雛形を設定したsrc/html/components/html.riotはこんな感じです。<html> <head> <title>{ props.title ? props.title : state.title }</title> <meta if="{ props.meta }" each="{ meta in props.meta }" {...meta} /> <meta if="{ !props.meta }" each="{ meta in state.meta }" {...meta} /> <meta name="viewport" content="width=device-width,initial-scale=1"> <link rel="stylesheet" href="{ this.props.toRoot }css/main.css"> <script src="{ this.props.toRoot }js/main.js" defer></script> </head> <body> <h1>{ props.title ? props.title : state.title }</h1> <static-component></static-component> <slot name="default"></template> </body> <script> import StaticComponent from './static-component.riot' export default { components: { StaticComponent }, state: { title: 'Static', meta: [ { name: 'description', content: 'a description', }, { property: 'og:title', content: 'ogp title', }, ], }, } </script> </html>riot/ssr を使うことで、head タグとかにも Riot.js の props などが使えるので、それを使って、ページタイトルとか OGP なんかもページごとに設定できるようになっています。
また、あらかじめ import したコンポーネントは展開された状態で HTML ファイルが生成されます。
で、ページに対応した
src/html/pages/index.riotの中身はこんな感じです。<html> <template is="html" title="{ state.title }" meta="{ state.meta }"> <static-header></static-header> <p>page content</p> </template> <script> import Html from '../components/html.riot' import StaticHeader from '../components/static-header.riot' export default { components: { Html, StaticHeader }, state: { title: 'title from props', meta: [ { name: 'description', content: 'description from props', }, ], }, } </script> </html>ベースとなる
src/html/components/html.riotを読み込み、head タグなどに入れたい情報は、props として渡します。HTML の保存先の
distの中にディレクトリを切って HTML を保存したい場合は、src/html/pages/の中に任意のディレクトリを切って .riot ファイルを置きます。
src/html/pages/child/index.riotというファイル作ったとしたら以下のような内容に。<html> <template is="html" title="{ state.title }" meta="{ state.meta }" to-root="../"> <static-header></static-header> <p>page content</p> </template> <script> import Html from '../../components/html.riot' import StaticHeader from '../../components/static-header.riot' export default { components: { Html, StaticHeader }, state: { title: 'Child page: title from props', meta: [ { name: 'description', content: 'child page: description from props', }, ], }, } </script> </html>npm-scripts
あとは、最初の
node_scripts/html.jsを Node.js で実行する npm-scripts を用意すれば完成。"script": { "start": "run-s html watch:html", "html": "node node_scripts/html.js", "watch:html": "onchange src/html -- npm run html" }とりあえず、これでやりたいことができました。
ちょっと駆け足になりましたが、静的な HTML を生成する書き方と、動的に JS で展開される Riot.js のコンポーネントがどちらも同じ書式でかけるようになって個人的には大満足。ちょっとまだざっとやりたいことやれるようにしただけなので、なにか問題とかあるかもしれません?
デザイナーが頑張って作ってみた環境なので、なにかおかしいところとか改善できそうなことがあったらぜひやさしくおしえてください?♂️今回の記事は、個人的な Web 制作用のボイラープレートの中でやったことをかいつまんで書いてみました。
あまりリポジトリとして整理できてなくてちょっとお恥ずかしい感じですが、なにか「こうしたらいいよー」みたいなこととかがあれば issue とかで（やさしく）お知らせいただくのも大歓迎です。
↓
https://github.com/nibushibu/Getup
- 投稿日：2020-12-06T01:21:04+09:00