Bootstrap4の功罪 ～Webデザイナー短期アルバイトを終えて～
3ヶ月という短い期間であったが、Webデザイナーとして実務経験を積んだ。その中からこれだけは言いたいということをまとめた。
Bootstrap4の功罪
Bootstrap4はアルファ版のリリースからベータ版のリリースまで2年かかり、その間にアルファ版を使用したサイトが大量に作られてしまった。正式リリースまでこれ以上大きな仕様変更はないと判断されてしまったからである。
しかし実際には、特定の画面幅では見せる・見せないといった制御系が大幅に仕様変更となり、Bootstrap3のhidden-xs hidden-sm…と見せたくない画面幅だけ列記していけばよい単純明快なルールに慣れ親しんだ私を大いに悩ませることとなった。
Bootstrap4のアルファ版はまだ特定の幅より広いか狭い画面は全部見せないといった指定なのでわかりやすかったが、それでもsmとlgだけ見せるといった歯抜けは指定しにくい。ところがベータ版はクラス名からhidden・visibleというワードがなくなってしまい、見せる・見せない画面幅以外の条件を指定するようにルールが変わってしまい、直感的にコーディングすることがますます困難になってしまった。
Bootstrap4はよりセマンティックな方向へと改良されたが、セマンティックであることがコーディングしやすいとは限らない。Bootstrap4ベータ版は、Bootstrap3では非推奨とされたBootstrap2の頃のvisibleの仕様に逆戻りしてしまったかのようにさえ見える。
実質的にBootstrap4には2バージョン存在していると言っても過言ではない。Bootstrap4アルファ版で構築したが、CDNは最新版のBootstrapを適用する設定になっている場合、現在も意図通りの表示になっているだろうか、注意しなければならないだろう。
それでもWordPressを使い続ける理由
古いCMSにはセキュリティ面に大きな問題がある。もしトラブルが発生した場合、復旧には専門性のある人材が必要となり、万全な状態にするには多額の費用と時間を要する。
それでもCMSを使わなければならないケースというのはあって、それはECだったり会員ページだったりするわけだが、一番の問題は誰がサイトを更新するか？だ。Web制作会社なのか、お客様自身なのか？
近年注目されている静的サイトジェネレータの多くはコマンドラインで動作し、マークダウン記法を使うため、WYSIWYGのGUIを持たないものが多い。
PCに詳しい個人で管理するならいいが、ブログはわかるけどPCにあまり詳しくないグループが難なく使いこなせるものとなると、結局のところWordPress以外に適当な答えがないというのが私が見てきた現状だ。
WordPressはネットでも書籍でも日本語で書かれたソースが大量にあるが、現在も更新されているがマイナーなCMS（Joomla!など）になるとソースはあってもバージョンが古かったりして、自力で問題を解決しなくてはならなかったりしてとたんに難易度がはねあがる。そういったところも、WordPressが人に勧められるものであるゆえんだ。
JS CMSなど、WordPress同様にブラウザから管理画面にログインできる静的サイトジェネレータは存在するものの、デフォルトのテンプレートのクセが強く（よくできているとは思うが）及第点と言わざるを得ない。
ブレイクポイントはBootstrapに合わせてほしい
これは前任者への不満になってしまうが、Bootstrapはモバイルファーストなのだ。スマホサイトでデザイン崩れを起こしてしまうなんてもってのほか。
Bootstrapはバージョン2からレスポンシブに対応し、PC用サイトを作れば自動的にスマホにも対応できるということで爆発的に普及した。
ところがBootstrapのソースをよく見ていただきたい。基本デザインは画面幅がもっとも狭い方が基準となっており、メディアクエリは画面幅が広がるにしたがって設定されているのだ。
だから、Bootstrapはスマホ用サイトを広げたらPC用サイトにもなると考えないといけない。なのにPC用サイトをメインにしてしまうからデザインが崩壊することになる。
Bootstrapのブレイクポイントって半端な数字が多いので、横幅800pxとかキリのいい数字で切り替えたくなる気持ちもわからなくはないのだが、後々のメンテナンスが大変なことになるんだよ。
ブレイクポイントの境目で、サイトデザインはPC用からスマホ用に切り替わっているのに、Bootstrapのレイアウトは依然としてPC用のままという問題に直面した場合、それがメディアクエリの数値を単純にBootstrapに合わせるだけで解決しなければ、最悪の場合サイトデザインをイチから作り直さなければならなくなることもあるのだから。
なので、CSSフレームワークを使ってウェブサイトを構築する際には、そのCSSフレームワークのブレイクポイントにしたがってサイトデザインが切り替わるように作っておいてほしい。
（おかげでrowからはみ出したcolは横幅を失って文字が縦書きになるということを覚えた）
ボタンを押したらモーダルの中のカルーセルのn番目の写真を開く
books.google.co.jp
Googleブックスでサンプルが読めるので参考にしていただきたい。なお本書は誤植が多く第2刷でも完全にはなくなっていないのでおすすめはしない（結局買ったけど）。
本書ではモーダルを閉じると同時にアラートを閉じるとなっているが、見出しに書いたような動作も同様のコーディングで実現可能であり、モーダルとカルーセルを組み合わせることでlightboxのように使える。
buttonの上階層のdivにdata-toggle="modal"と書いてもひとつのボタンとして動作するとは目からウロコだ。
