読者です 読者をやめる 読者になる 読者になる

トワイライツ・ノーツ

日記と本と、時々Web

【日記】2015年10月21日~10月22日 コーディング用テンプレートは極力シンプルに

収支

10月21日

外食:1680円

10月22日

外食:1468円

お茶(牛乳):141円

箱ティッシュ:173円

計1782円

メモ

コーディングの作業を少しでも効率化するために、目下テンプレートを改良中です。具体的にどんな改良をしているかというと、

  • html5のタグ(sectionやarticleその他)を必要最低限以外は削除
  • サイトのあちらこちらで使う情報を変数に格納して一括管理
  • CSSから不要なスタイルを削除
  • PC用のテンプレートとスマホ用のテンプレートの作りを揃える
  • 自動化できるものはjQueryで書いてテンプレートに入れておく

……といった感じです。

それぞれの理由としては下記です。

html5のタグ(sectionやarticleその他)を削除

サイト制作時にもらう原稿そのものが、マークアップ用の文書構造を意識したものではなく、コーディングを進めるにつれあちらこちらで矛盾が生じてしまうため。

構造的におかしなマークアップになるくらいなら、文書構造的な意味のないdivタグで囲った方がマシだろうし、「ここは一体何が適切なのか」と悩むことが減るので時間の短縮にも繋がる。

またもうひとつの理由として、古いIEにもある程度対応しておかないといけないため。html5のタグを使ってスタイルをつけてしまうと表示くずれの原因になるので。……個人的には新しいタグとかばりばり使っていきたいけれど。

サイトのあちらこちらで使う情報を変数に格納して一括管理

サイト名や住所、電話番号、営業時間など、サイト全体で変わらない情報など。

また弊社の場合title、description、keywordsのタグ差し替えが頻繁なので、こちらもひとつのファイルで一元管理するスタイルに。いちいち別個のhtmlファイルを開いて編集するのは手間だし間違いの元なので。

CSSから不要なスタイルを削除

リストとかマークとか、色んなものをテンプレ的に盛りだくさんに用意しておいても、使うものは限られてしまう上、他の人が引き継いで作業する場合、せっかく用意してあるスタイルが利用されないことも多々。なので必要最低限のものと、ほぼ必ず使うことになるスタイルだけ残して、他は消すことに。

PC用のテンプレートとスマホ用のテンプレートの作りを揃える

クラス名などはPC用とスマホで統一し、上記で一元管理している変数も活用した上で、PC用CSSスマホCSSの順でスタイルを上書きする形に(今までは別々の人が作ったテンプレートをそれぞれ使っていたので、クラス名など統一されていなかった)。

PCページとスマホ用ページにある程度共通のスタイルが適用されるようにできれば楽そうなので。レスポンシブ程大げさではないけれど、これでPCサイトとスマホサイトの連動も楽になるのでは、と思う。

使えそうなものは部品ごとにテンプレートにまとめておく

案件ごとに、共通で使い回せそうな小さな部品を作ったり、よく使うjQueryプラグインなどが簡単に入れられるように準備したりなど。

こういう時はこれを使う! がある程度決まると楽。ただ、一定期間毎にもっと便利なものがないかとか、新しいバージョンが出ていないかとかのチェックは必要。

ほどほどに対応できるテンプレートが作りたい

すべてに使える万能のテンプレートというのは難しいですが、極力シンプルにしつつ、追加用部品をこまめに分けておくと割と使い勝手がよい気がします。

余分なところを削ぐ判断はなかなか難しいところです。ありそうなパターンを考えつつ決めないと、後々大幅な修正や追加が必要になることがあるので……削りすぎも良くないし、盛り込み過ぎても活用できないし余分なものが増える。

私はどうもやり過ぎる傾向があるので、バランスの取れたものが作れるようになるといいなあなんて思います。

いつも「時間がない」あなたに:欠乏の行動経済学
センディル・ ムッライナタン エルダー・ シャフィール
早川書房
売り上げランキング: 27,844

スラック*1はあり過ぎてもなさ過ぎてもよろしくない。。

*1:ゆとり