~ストーリー 1~

★開発日記★レスポンシブデザインが良いのか、ダイナミックサービングが良いのか。

2018/07/30 01:12:00
HTML版 | AMP版 | AMPストーリー版
はい、週末はAMPストーリーの調査で終わってしまったので、明日から開発を再開します!

ちなみに、最初の課題は、このブログのAMP対応。

この1週間で完成させようと思っているのですが、どんな内容かは前回解説したので、ざっくり説明しますね。
このブログは、CSVっぽいファイルに書いたブログのタイトルと本文のデータを、テンプレートに合体させて生成されています。

しかし、ブログ本文には、AMPでは禁止されているタグが入っていまして。

そのタグを、テンプレート側で置換する事も考えたのですが、置換は好きじゃないので、別の方法を取る事に。
データ自体をコンバートし、通常のHTMLでも、AMP HTMLでも、どちらでも使える状態に変換する事にしました。

そして、テンプレート側で、各HTMLで使えるタグを挿入して、ページを生成する事に。

このコンバーター機能であり、それはそのまま入稿システムにもなるので、この辺を作る事に。
これは、問題ないんですよ、頭の中で設計も完了しているので、後は実践するのみ。

しかし、ここで一つ問題が・・・。

というのも、この仕組み、超簡易CMSなのですが、もちろん、ダイナミックサービングなんですよ。
ダイナミックサービングは、雑に説明すると、共通のURLで、パソコン向けのページと、スマホ向けのページを、別々に、動的に出力する仕組みです。

パソコンからアクセスすると、パソコン用のテンプレートを元に、パソコン向けのページを動的に生成。

スマホからアクセスすると、スマホ用のテンプレートを元に、スマホ向けのページを動的に生成です。
では、なぜ、ダイナミックサービングで、パソコン向けと、スマホ向けのページを振り分けているかというと。

それは、広告なんですよ、広告。

このブログを含め、我が社の新サービス「DIGITAL STREET」、略してデジストは、広告モデルなので、広告の事を意識してデザインする必要があるんですよ。
ちなみに、レスポンシブデザインの場合、パソコンでアクセスした場合で、ブラウザの横幅を、スマホのサイズくらいにすると、コンテンツ自体は、画面の横幅にフィットします。

しかし、広告サイズはそのままなので、デザインが崩れます。

デザインが崩れるというか、広告サイズがそのままなので、横幅より広告サイズが大きいと、横スクロールが発生してしまうんですよ。
これが嫌で、レスポンシブデザインは、採用してきませんでした。

ところが・・・。

GoogleのAdSenceに「自動広告」という広告商品が登場し、広告を自動的に、適当な場所に掲載してくれるじゃないですか!?
だったらもう、全体的に自動広告にして、ロボットに任せちゃった方が、良いんじゃないかと思いまして。

いちいち、広告掲載場所や、サイズを考える必要もありませんし。

となると、もう、レスポンシブデザインで、良いんじゃないかと・・・。
実際のところ、パソコンでアクセスした際に、ブラウザのサイズを、いちいち、変更する人は少ないと思いますし。

一時的に横スクロールが発生したとしても、リロードするか、次のページを見れば、そのブラウザのサイズにあった広告が配信されますので。

あまり、ここに気を使うよりは、レスポンシブデザインにして、楽した方がいいかな~と。
特に、ブログの場合は、コンテンツの中身が重要なので、デザインはシンプルで、レスポンシブで良いかな~と。

元々、右カラムとか、左カラムとか、あまり好きじゃないんですよ。

というか、個人的には、左右のカラムは、まったく目に入ってきませんので、無くても良いかな~と思っています。
さらに、AMP版は、もちろん、レスポンシブデザインにしますので。

AMP版を、ダイナミックサービングで構築した経験もあるのですが。

研究した結果、AMPキャッシュの問題などもあり、AMPはレスポンシブデザインの方がよさそうだという結論になりましたので。
という事で、最後の最後まで迷うと思いますが、とりあえず、レスポンシブデザインに切り替えようかな~と。

AMP版にも、デザインを、ほぼ使いまわせますので。

これがいいですよね、決めましたよ、とりあえずですが、通常HTML版も、AMP版も、同じデザインで、レスポンシブデザインにします。
なお、簡易CMS自体は、ちょっと改修すれば、レスポンシブデザインにも対応可能。

振り分けている部分をいじくれば、ダイナミックサービングにはならず、同じテンプレートを参照するようにできます。

もしくは、少し手間ですが、パソコン向けと、スマホ向けのテンプレートの中身を同じするだけ。
確認して、楽な方で、構築したいと思います。

出力は同じでも、ダイナミックサービングにする事で、アクセス解析を分けて集計したり。

広告自体を分ける事も可能なので、この機能は、残しておいた方が、後々、よさそうですね。
最終的には、ユーザの方の使いやすさと、広告売上で判断する事になると思うので、未来はミライですが。

今のところ、レスポンシブデザインに変更したいと思います!

時代はもう、レスポンシブデザインのような気もしますしね・・・。
AMPストーリーも、スマホでも、パソコンでも、どちらにも対応。

ワンソース、ワンカラム、マルチデバイスの時代のような気がします。

もしくは、一部のパーツだけ動的ですかね、それこそ広告だけとか。
よし、テンプレートの方針も決まったので、後は、作るのみ!?

ついでに、過去に公開していた、エンタメ動画紹介ブログも、この仕組みで、復活させてしまいます!

少し機能を加えれば、たぶん、こちらもAMP版と共に公開できるかと思いますので。
まだまだ、序章ですが、とっとと終わらせて、次のステップに進みます!

そうですよ、そう、AMPストーリーですよ、AMPストーリー作成サービスの構築です!

という事で、AMPストーリーをたっぷり語る、コラムに続きます!