今月のWordBench鹿児島は、主に参加者の聞きたいことを話し合いました。
若干脇道にそれたりしていましたが、色々な情報を知ることができました^^
(1)CSSの設計について
最初はCSSのクラス/IDの指定ルールや命名規則などについて。
主にWordPressの子テーマを作る時のCSSが話題にあがりました。
WordPressのテーマを子テーマとして作成する場合は、親テーマのCSSを上書きするようにしてカスタマイズするのが一般的ですが、それって2重に読み込んでいることになるので、実際にはちょっと無駄なことをしているのでは…?という気がしますね。
また、上書きしていくと、その後更に修正をする際に修正箇所がわかりにくくなってしまうのではという懸念もあります。
- Sassの@mixinを使用する
Sassの「@mixin」機能を使用すると、公開後の運用も楽になるのではという意見が出ていました。
参考サイト:より素早くCSSコーディングするための、Sass(SCSS)のmixinスニペット集 - 命名規則「BEM」
命名規則のやり方の一つとして「BEM」が紹介されました。
参考サイト:BEMによるフロントエンドの設計基本概念とルール - 親テーマのCSSを読み込む方法
importするのではなく、 functions.php で wp_enqueue_script()を使用する方法が一般的になっています。
参考サイト:子テーマの作り方ーCodex - モバイルフレンドリー
スマートフォン対応もGoogleの検索結果になるということで、モバイルフレンドリーテストの紹介も。
モバイル フレンドリー テスト
その他こんな意見も
- CSSの命名規則や作り方などは、ここ数年でも様々な方法が紹介されていますので、これが王道!というやり方はないのではないか。
- サイトごとにコーディングガイドラインを確認して作る必要がある。
- できればCSSそのものを見た時にわかりやすいものができると良い。
(2)開発環境について
参加者がどのような開発環境・検証環境で作業しているか。
マシンは大体Macの方が多かったですね。IEとAndroidの検証ツールとして、下記をご紹介いただきました。
- modern.IE
Macの方はVirtualBoxとModernIEの組み合わせでIEの検証環境を用意している方が多かったです。 - browserstack.com
ランディングページなど1ページだけの場合はキャプチャ確認で済ませる場合も。 - genymotion
Androidのエミュレーター。サクサク使えるところがおすすめだそうです。
(3)多言語化プラグイン「Bogo」
使用者の感想を聞きたいとのことでしたが、あいにく今回は使用されている方がおらず(汗)
西村さんから多言語化のプラグイン「Bogo」のメリットなどをご紹介いただきました。
WordPress › Bogo « WordPress Plugins
(4)PHPUnitを使ったテスト
西村さんからGithubと連携してテストを行える「travis CI」をご紹介いただきました。
WordPressやPHPの過去のバージョンを含めてテストを行えるらしく、WordPressのコアファイルもこのテストが行われているとのこと。
プラグインを作る際にもこのようなテストを行うと安心ですね。
このようなテストはPHPを扱う際にやっておくべきですが、WordPressを中心にしている方には知られていないことが多いので、こういう情報の共有も大事なのではと意見が出ていました。
・・・・今回は茶話会のような感じで、雑談&脱線ありつつのWordBenchでした。
茶話会も楽しいのですが散漫になりやすいので、一つのテーマで集中する回もできればと思います。(今回は結構準備不足で、なかなかうまくまとめられず、反省しております。。。)
参加者の皆様、ありがとうございました〜!