flamingo firststep guide
TRANSCRIPT
flamingo は、 One URL でマルチデバイス対応を実現する次世代型スマートフォンサイト最適化サービスです。
このスライドでは、flamingo にオンラインサインアップし、
実際にサイトをマルチデバイス対応するまでの基本的な流れをご紹介します。
3
オンラインサインアップ
Copyright © i3DESIGN Co., Ltd. All rights reserved.
1.まずは、 flamingo トップページ( http://gomobile.jp/flamingo/ )
から オンラインサインアップをしましょう!
必要事項を記載して「登録」をクリックするだけで登録ができます!
5
プロジェクトの作成
Copyright © i3DESIGN Co., Ltd. All rights reserved.
3. 「 flamingo コントロールパネル」が開いたら、「プロジェクトを作成」を
クリック!
このページで、アカウント管理やプロジェクトのリリースを行います。
6
プロジェクトの作成
Copyright © i3DESIGN Co., Ltd. All rights reserved.
4. 最適化元のサイト URL などを入力すると、プロジェクトが作成されます。
7
flamingo スイッチャーの挿入
Copyright © i3DESIGN Co., Ltd. All rights reserved.
5. 作成したプロジェクトを開き、「スイッチャー」を選択します。
8
flamingo スイッチャーの挿入
Copyright © i3DESIGN Co., Ltd. All rights reserved.
6. ここで取得できるコードを、最適化元サイトのヘッダー部に挿入します。
あなたのサイトをマルチデバイス対応する準備が整いました!
9
Flamingo IDE を開く
Copyright © i3DESIGN Co., Ltd. All rights reserved.
7. 「 IDE で開く」をクリックして、 flamingo IDE を開きましょう。
プロジェクトの編集・スマホサイトのプレビューはこの IDE で行います。
11
テンプレートの作成
Copyright © i3DESIGN Co., Ltd. All rights reserved.
9. IDE の「編集」ボタンをクリックして、” Create New Template” を選択します。
13
テンプレートの作成
Copyright © i3DESIGN Co., Ltd. All rights reserved.
11. テンプレートが作成されました。
IDE での編集は主に、このテンプレートにスマホ用の html を記述して行います。
14
マッピング
Copyright © i3DESIGN Co., Ltd. All rights reserved.
12. 元サイトの要素を反映したいときは、「マッピング」を行います。
元サイトの文章をスマホサイトに反映させてみましょう!
15
マッピング
Copyright © i3DESIGN Co., Ltd. All rights reserved.
13. テンプレートの反映したい位置にカーソルを置き、「オリジナルコンテンツを選択」 ボタンをクリック!
16
マッピング
Copyright © i3DESIGN Co., Ltd. All rights reserved.
14. 元サイトが現れるので、当該箇所をクリックで選択して「 OK 」を押します。
17
マッピング
Copyright © i3DESIGN Co., Ltd. All rights reserved.
15. これだけで、マッピング完了です。
元サイトが変更された際には、変更が自動的にスマホサイトに反映されます。