Google+ もご覧ください
ユーザーアイコン

レビュー

[PR] フラミンゴ - 大規模Webサイトにも対応するスマートフォン最適化対応サービス

[PR] フラミンゴ - 大規模Webサイトにも対応するスマートフォン最適化対応サービス

既にデスクトップ向けにWebサイトが存在し、そのコンテンツを使ってスマートフォンをはじめマルチデバイスに最適化したWebサイトを作れるサービスがフラミンゴです。制作環境を構築する必要なく、Webブラウザだけで作り上げられるのが特徴となっています。

現在プライベートベータ中につき、こちらより事前登録を行ってください(正式リリースは2014年夏予定です)。

フラミンゴの使い方

こちらがWeb IDEの画面です。

iPhone風のフレームがあり、その中にフラミンゴを使ってコンテンツを組み替えたWebサイトの内容が表示されています。プレビューが簡単です。

デバイスは選択できます。例えばこちらはiPadの大きさに切り替えた場合です。

デスクトップ(元サイト)はこちら。

では実際のコードを見てみましょう。まずはカテゴリページのテンプレートです。

<!--{call header()}-->

と書かれている部分が別なテンプレートを呼び出している部分になります。テンプレートはスニペットとして定義されています。

headerをクリックすると、その内容が確認できます。

<head>
    <title><!--{= $.title }--></title>
      :
    <link rel="shortcut icon"    href="<!--{= __CONTENTS_ROOT__ }-->images/favicon.ico" />
    <link rel="apple-touch-icon" href="<!--{= __CONTENTS_ROOT__ }-->images/apple-touch-icon-114x114.png" sizes="114x114" />
    <link rel="apple-touch-icon" href="<!--{= __CONTENTS_ROOT__ }-->images/apple-touch-icon-144x144.png" sizes="144x144" />
    <meta name="description" content="<!--{= $.meta.description }-->" />
    <meta name="keywords" content="<!--{= $.meta.keywords }-->" />
    <meta name="copyright" content="<!--{= $.meta.copyright }-->" />
    <link rel="stylesheet" type="text/css" href="<!--{= __CONTENTS_ROOT__ }-->/css/all.css" />
</head>

例えばheaderスニペットはこのようになっていて、<!--{}-->の中に変数を定義する形になっています。

中央のペインにプレビューが出ます。

foreachやif elseなどを挿入する機能もあります。

// if elseの例

<!--{if true }-->

<!--{else}-->

<!--{/if}-->

// foreachループ
<!--{foreach [] as item }-->

<!--{/foreach}-->

画像のタグ(img)の場合はこのように挿入されます。

<img src="<!--{= __CONTENTS_ROOT__ }-->images/image.gif" alt="" />

つまり CONTENTS_ROOT がファイルアップロードのルートディレクトリになるようです。

パラメータタブを呼び出すと、テンプレート内に組み込めるパラメータを呼び出すことができます。こちらは元URLから取得したコンテンツをXPathで指定して埋め込めるようになります。

{
    "name": "common",
    "parameters": {
        "title": "//title",
        "meta": {
            "xpath": "//head",
            "parameters": {
                "description": ".//meta[@name=\"description\"]/@content",
                "keywords": ".//meta[@name=\"keywords\"]/@content",
                "copyright": ".//meta[@name=\"copyright\"]/@content"
            }
        }
    }
}

このように定義すると、 $.meta.keywords のようにして呼び出すことができます。

後は各画面を作りつつ、シミュレータで辿りつつ制作していくだけです。

ファイルマネージャ

ファイルマネージャはフラミンゴ上にファイルをアップロードできる機能です。スマートフォン独自の画像、JavaScript、スタイルシートなどをアップロードできます。アップロードしたら<!--{= __CONTENTS_ROOT__ }-->images/image.gif のようにファイルを指定します。

Template Manager

テンプレートマネージャはURLのパターンと実際に呼び出すテンプレートを紐づける機能です。正規表現やJavaScriptの判定式を埋め込んだりもできます。

その他、チャット機能があったりファイルの編集履歴を保存したりできます。画面の右上にあるQRコードを使って実機から表示を確認することもできるので、シミュレータで確認できない機能についてはそちらで確認しましょう。

事前登録はこちらから!

PC タブレット スマートフォンのレスポンシブサイト 変換 最適化ならフラミンゴ

Flamingo

記事をリクエストする

関連記事

コメント