Bootstrap3 ? or Bootstrap4 ? 構築して初めてわかった2つのバージョン

今やレスポンシブデザインが当たり前になったWEBシステムですが、かつて「スマートフォンコンバータ」という製品を作ってもてはやされている時期もありました・・・orz 携帯電話からスマートフォンに変わったばかりの時、携帯電話のサイトは、「PCサイトの簡易版」という作りにするのが一般的で、トップページでリダイレクトを行う処理が普通でしたが、スマートフォンになると、javascriptが軽快に動作する事が分かり、PCサイトをそのままスマホサイトに変換してしまうという製品でした。 そこから、Bootstrapが出てきて、世の中が一気にレスポンシブサイトにシフトし始めて、この製品の息の根が止まってしまいました。 （ちなみに今でも使っているところはありますが、よほどWEBの知識が無い管理者が利用する程度の製品になってしまったようです） そして、Bootstrap以外にも、レスポンシブデザインのOSSサービスは、沢山出てきているようですが、今のところ、僕としては、Bootstrapで重宝している状態です。 足りない機能は自分で作ってしまうので、不便を感じたことがあまりないんですね。 Bootstrap

Bootstrap3からBootstrap4へ移行

そんな便利なBootstrapもバージョンが４にアップデートされていて、世の中のWEBエンジニアがどんどん乗り換え始めているので、僕も重い腰を上げなければいけないと思い、２０１７年夏からver4.0を使い始めました。 機能的に大きく変化していたところは、内部アイコンが無くなってしまった事。これは、アイコンフォントとして、文字のように色も変更でき、とても便利に使っていたのに残念です。 でも、フォントファウンロードが行われることを考えると、ダウンロードサイズは大幅に減ったのかもしれませんね。 あとは、細かなコーディング仕様が変更になっていましたが、個人的には、ver3もver4も互換のある状態にしておこうと考え、あまり斬新な事はしないようにしていました。 そんなある時、とんでもない問題にぶち当たったので、その一部始終を記録しておきます。

ver4の大問題

Bootstrap4移行ガイド 最初に、ドキュメントを熟読しておけば、そんなに問題にはならなかったのかもしれないのだが、とあるWEBサービスを構築して、ロンチ寸前の時に、大問題が発覚しました。 通常、開発をMacで行っているため、ChromeとFirefoxのPCブラウザで見栄えをチェックしながら、ブラウザのデバッグコンソール機能を使って、モバイルサイズでの確認も行います。 Dockerを端末内で使っているので、スマートフォン実機で確認するのは、WEBサーバーにアップロードした後になりますが、この時にチームメンバー全員に手持ちのスマートフォンで見るように促した所、１名のスマホで崩れが発生！！！ キャッシュなのか、回線速度なのか、とにかくAndroid端末という事だけは分かっていたので、手持ちのAndroidのChromeで確認しても、全く問題ない。 遠隔で作業していたので、おかしくなった画面は、キャプチャ画像でしかみられなかったのだが、どうやら、LINEで送ったURLで表示した時は正常に動作するらしい。 なんじゃそりゃ？？？ ここで立てた仮設は、LINEのリンクをクリックすると、LINEアプリ内のブラウザが起動して、いわゆるWebviewでの表示になる。 使っているブラウザアプリと、Line内部ブラウザが、違うバージョンであることは判明した。 そして、通常何のブラウザアプリを使っているのか聞いてみたらなんと「地球儀のアイコン」というキャプチャ画面が送られてきた。 こ、これは・・・「Androidの標準ブラウザ」ではありませんか・・・まだ、この絶滅危惧種が生き残っていたなんて・・・ 衝撃が走りました。 そこで、Bootstrapのドキュメントを読み直してみた所、ver4はAndroidOS5より低いバージョンはサポートしていないとの事。 そう、Androidは、OS ver5から、標準ブラウザが無くなり、Chromeと統合されているのである。 この事を思い出し、Bootstrapをver3に戻した所、問題なく動作することを確認できました。

未だに蔓延る（はびこる）ブラウザ問題

企業におけるB2BのWEBサービスでは、万人に通じるシステムを提供しなければいけないため、IE6なども未だにサポートする必要がありますが、独立したこの段階で、こうしたブラウザ問題にぶち当たるとは、非常に目からウロコでした。 そして、こうした状態を見て、古いブラウザを切り捨てる行為は、ユーザーの幅を狭めるという事、所謂、機会損失であるという事を痛切に実感することができ、改めて帯を締めなおすことができました。 未だに「標準ブラウザ」を使う続けているユーザーが悪いのか、使っているスマートフォンの端末バージョンを最新にアップデートしていない事が悪いのか、それらを考慮しないディベロッパが悪いのかと考えてみると、自分の行える範囲である、ディベロッパの問題である事がよく分かる。 管理効率を考えて、古い環境を切り捨てていく開発を過去に何度も、いろんな会社で見てきたのだが、スマホアプリにおけるユーザーよりもサービス側が優位なサービスであれば、それもいいかもしれないが、 WEBブラウザを生業にする際に、考えなければならないことは、下位互換、上位互換も含めた、誰でもどんなブラウザでも閲覧できるという究極の状態を目指すことだと、考えられます。 なんだか、格好良いこといっているように思えますが、WEBエンジニアで、このセリフに賛同出来ない人は、たんなるビジネスディベロッパである事を自覚しなければいけないでしょう。 ということで、本日の結論としては、まだまだ当面の間は、Bootstrap ver4は使ってはイケないという事。