produced by Classmethod ˗ˏˋ 技術とビジネスの祭典 ˎˊ˗ Classmethod ODYSSEY 事前登録受付中

【Mixture】シンプルで多機能な開発ツール。

清田隆志

2013.04.09

この記事は公開されてから1年以上経過しています。情報が古い可能性がありますので、ご注意ください。

main

先日、リリースされた開発ツールMixtureをご紹介します。
今回は、Mixtureのインストールから動作確認まで行ってみたいと思います。

Mixture本家サイト

アジェンダ

Mixtureとは？
インストール
セットアップ
使用方法
まとめ

Mixtureとは？

A rapid prototyping and static site generation tool for designers and developers

Mixtureは、プロトタイプ用サイトや静的なサイトを出力してくれる、画面操作(以下:GUI)ベースのサイトジェネレータツールです。

以前の記事で、機能が似ているMiddlemanをご紹介しました。こちらは、CUI(コマンドライン)で操作するツールだったので、デザイナーの方には少しハードルが高かったのですが、MixtureはGUI操作なので、気軽に使えるかと思います。

インストール

Mixture

上記の、Mixturesオフィシャルサイトからインストール用ファイルをダウンロードしてきます。

まずは、ダウンロード

トップページ、右上のDOWNLOADボタンをクリック

ダウンロード

使える環境

現在Mixtureは、二つの環境で使用することが可能です。

OS: Windows (7以上)
OS: Mac (v10.7以上)

インストール

ダウロードしたファイルを、インストールします。

インストール

Mixtureのユーザー登録

インストールが完了したら、Mixtureを起動するとユーザー登録がでてくるので登録します。ここのID・PSでログイン等するのでお忘れないようにメモしてください。

サインアップ

管理画面

ユーザー登録したら、管理画面に移動します。ここの画面から色々と操作していきます。

管理画面

使用方法

早速いじってみたいと思います、まず適当なところにプロジェクト用空のフォルダを作成します。
今回は、デモということでデスクトップにsampleフォルダを作成しました。

1.プロジェクトフォルダを指定

管理画面の左下の「Open」ボタンをクリックし、プロジェクトフォルダを選択します。

プロジェクトフォルダ読込み

2.テンプレートを指定

プロジェクトフォルダを指定すると、管理画面の水色の部分に以下のプロジェクトフォルダ名が表示されています。

Select a boileplate for "プロジェクトファイル名"

プロジェクトフォルダ取り込み

テンプレートを選択

Mixtureでは、様々なテンプレート用データが用意されています。今回は、日頃お世話になっているBootStrapを使ってみます。
(自分専用のテンプレート用ファイルも作成できるみたいなので、チャレンジしてみてください。)

それでは、Popularメニュー > BootStrapをクリックします。

3.プロジェクト用管理画面

テンプレートを選択したら、プロジェクト用管理画面に移動します。

プロジェクト用管理画面

先ほど作った、sampleフォルダ内を確認するとテンプレートファイルが出力されたのが確認できます。

フォルダ構成

詳細設定用ファイル(mixture.json)

出力されたテンプレートファイルに、mixture.jsonファイルが確認できます。これは、このプロジェクトファイルでの細かな設定内容をこちらに記述する、コンフィグファイルになります。

mixture.json

{
    "debug": false,
    "lintScripts": false,
    "preprocessorLocations": "public",
    "preprocessorScriptOutput": "public/js",
    "preprocessorStyleOutput": "public/css",
    "projectName": "sample",
    "projectDescription": "Sleek, intuitive, and powerful front-end framework for faster and easier web development.",
    "publishedId": null,
    "serverHostname": null,
    "serverPort": null,
    "templateDirectory": "templates",
    "templateDefaultLayout": "layout",
    "templateDefaultPage": "index",
    "type": "mixture",
    "useCompass": false,
    "simpleModePartnerServer": null,
    "modelSource": null,
    "domain": null
}

サイト動作確認

それでは動作確認してみたいと思います、「View Locally」ボタンをクリックすると、ブラウザが自動で立ち上がり、Mixture側で付与されるアドレスで確認することができます。

http://xxx.xxx.x.xxx:7774

確認する

Bootstrapの画面が確認できれば成功です。

Bootstrap

おまけ

MixtureはLivereload機能も実装されており、プロジェクトファイル内のファイルを更新を検知して、リロードが走ります。

まとめ

GUIのサイトジェネレータツールMixtureをご紹介しました。
ツールのレイアウトはシンプルな作りで使いやかったです。シンプルなのですが多機能でまだすべて把握できていません。。。
次回は、実際にテンプレートファイルを操作していきたいと思います。

【Mixture】シンプルで多機能な開発ツール。

アジェンダ

Mixtureとは？