◆はじめに
昨今、SEO(Search Engine Optimization)やMFI(Mobile First Index)という言葉をよく耳にするようになってきました。
しかし、PCサイトとは別にスマホサイト作るのも運用するのもってだるいわ〜って思っている方はいませんか？
そこでflamingoというサービスを利用し、実際にPCサイトをスマホサイトに最適化してみようと思います。
◆そもそもflamingoって？
flamingoは既存のPCサイトをレスポンシブウェブのように同一URLでマルチデバイスに最適化されたUI/UXに対応させるための開発・運用プラットフォームです。
もっと簡単に言うと、PCサイトと同じURLでスマートフォンやタブレットなど、閲覧する端末によって表示させるソースコードを変えることができるサービスです。
◆flamingoのメリットは？
・サイトへのアクセス数が多いほど、flamingoでの変換に向いています。
・PCに影響されないHTMLの作成ができます。
・HTMLやCSSだけでなく、JavaScriptも編集可能です。
・管理画面などのUIがわかりやすい、見やすい、操作しやすい！
その他にも
・スマホに必要のない情報は読み込まない
・既存のPCサイトに変更を加えると、スマホサイトに手を加えることなく内容が変更される。
といったことがメリットに挙げられるでしょう。
◆リリースまでの流れ
flamingoでリリースするまでのザックリとした道のり
1.アカウント登録
2.flamingoにPCサイトを登録
3.PCサイトにflamingoスイッチャーを入れる
4.エディタ画面でソースコードを編集
5.リリース
◆とりあえず、登録してみる
まずは、登録。
flamingo
登録は『名前』『メールアドレス』『電話番号』の3つが必須になっています。
他にも、Google+でログインも可能になります。
今回はフリーアカウントでスマホサイトを作成します。
フリーアカウントの場合、既存のPCサイトを1つだけ最適化できます。
◆flamingoCPでできること
ログイン後に表示されるページがflamingoCPです。
flamingoCPでは、アカウントやプロジェクトの管理、モバイルウェブサイトを配置、公開することができます。
フリーアカウントだとPCサイトを1つだけなので、開発したスマホサイトのソースコードをWeb上に表示させる等の管理ができる画面といったところでしょうか。
複数人が関わるようなもう少し大きなPCサイトになりますと、アカウントの管理ができたり、複数のPCサイトが関わるのであれば、それぞれのサイト(プロジェクト)管理が行うことができます。
既存のPCサイトが1つでプロジェクトが1つに、2つのPCサイトでプロジェクトが2つになるということです。
※アカウントの管理とは？
例えば、『Aさんにはソースコードを編集する権限は与えないで、閲覧のみに。』とか『Bさんにはソースコードの編集権限を与えるが、リリース(Webサイトにアップする)権限は与えない』とかとか....。
人によって様々な権限を与えたり、与えなかったり刷ることが可能です。
複数人で開発する場合は大変便利な機能です。
◆とりあえず、PCサイトを登録してみる
flamingoにログインをし、表示されたflamingoCPを確認すると『プロジェクトを作成』というボタンが右下にあります。このボタンからPCサイトを登録します。
表示されたページには、タイトル、説明、ウェブサイトのURLなどが書かれています。
それぞれを記載し、『完了』ボタンを押します。
◆flamingoスイッチャーをPCサイトに入れてみる
新しいプロジェクトを登録した後に、JavaScriptが表示されているページに遷移します。このページでは、PCサイトにflamingoスイッチャーが挿入されているかをチェックします。
flamingoを利用するためにはまずこのスイッチャーをPCサイトのhtml内のheadタグに挿入する必要があります。
このページに表示されているJavaScriptをPCサイトのhtmlにコピペすることが、最適化の第一歩です。
今回はここまで。
次回は、早速開発していきます。