SandVoxを使ってみました

はじめに

Mac用のWebサイト作成ツールSandVoxのトライアル版を使ってみました。デザインを選んで、テキストと画像を追加・挿入していくだけでWebサイトができあがります。

この記事はSandVoxで作成しています。ただし、WordPress上で表示するために少しHTMLやCSSを修正しています。

iWebからの乗り換えを狙っているのか、 iWebで作成したサイトをSandVox対応に変換できることを一つの売りにしています。私はiWebを使っていないので詳細は不明ですが、iWebはサポートが終わっていますし、乗り換え先がない方は試してみてはいかがでしょうか。ただ、トライアル版でどこまで変換できるかは不明です。

使い方は、この記事を読むより、公式サイトにある、解説Movieを見たほうが早いです。英語が分からなくても、見ているだけで何となくわかりますし、きっと使ってみたくなると思います。

アプリ情報

  • Sandvox - Karelia Software
  • 公式サイト$ 79.99、App store:￥7,800
  • 公式サイトで購入すると、「60 日以内であれば一切不問で返金保証」が付くようです。
  • トライアル版：5ファイル（ページ）まで作成可能。おそらく日数制限や機能制限はありません。

簡単な使い方

メニューやメッセージは全て日本語化されています。ヘルプは英語です。起動させると、Welcomeウィンドウが表示されます。SandVoxのガイドとiWebの抽出やガイドを選択できます。ここでは、新しいサイトを選択します。

Freeway、Flux、RapidWeaverと共通ですが、デザインテンプレートを選択します。保存時は、Freeway、Fluxと違い。sandvoxという拡張子のファイル一つ（パッケージ）に保存されます。

Amazon リスト

HTMLやCSSを編集することはできません。そもそも表示することができないので、基本的に意識する必要がありません。できることは、デザインテンプレートに従った、テキストの入力と画像や動画の挿入です。フォントサイズ等の調整はインスペクタで行います。幾つかのオブジェクトが下図のように用意されているので、それらを配置するだけです。試しに左上にAmazonのリンクを作成しました。’Amazonリスト’のオブジェクトを配置して、そこにWebブラウザのロケーションバーのURLをドラッグ＆ドロップするだけです。各国のAmazonに対応しています。

リンクの貼り方は、対象の文字列を選択して、インスペクタでURLを指定するだけです。メールやサイト内ページの指定もできます。必要に応じで'新規ウィンドウで開く'にチェックします。

インスペクタはタブでテキスト情報やサイズ情報等の切替を行うため面倒ですが、複数のインスペクタを表示できるので、使い分ければ良いと思います。

画像はドラッグ＆ドロップで挿入し、必要に応じて回りこみの設定で配置を調整します。画像ファイルは3種類のサイズに自動的にリサイズされます。Retina用、通常表示用（非Retina）、横幅が360px、の三種類です。最後の360pxの用途が不明です。ローカルの画像ファイルにリンクされないので、作業後にローカルの画像ファイルを移動しても問題ありません。ファイル名はオリジナルのファイル名がそのまま利用されます。ただし、日本語（マルチバイト）が含まれていると、自動的にファイルの作成日時をファイル名にするようです。

公開先の設定として、FTP、SFTP、WebDAV、およびローカルを選択できます。試しにローカルに設定して、MacのWeb共有で使おうと思いましたが、'http://localhost/sandvox/'とすると。なぜか、'http://localhost.com/'にアクセスしようとします。アクセス先を編集しようと思い、新規構成ではなく、’編集ボタン’を押すと、落ちました・・・結局、新規構成で作り直し、localhostをIPアドレスに変更したらうまくいきました。

エディタでページ（ファイル）や画像を削除してもサーバ上のファイルは削除されないようです。FTP等で手動で削除する必要があります。といってもそのページ対する全てのリンクが自動的に削除されるので、ダイレクトにアクセスされなければ問題はないかもしれません。

基本的なスタイルはテンプレート付属のCSSが適用され、ユーザが変更したフォントのサイズ等はタグに書き込まれるようです。私はそこまで詳しくないので何とも言えませんが、出力されるHTMLは<div>だらけです。Freewayのように＜table>を使われるよりは良いと思います。また、改行を<br>にするアプリも多いですが、これは<p>で区切ってくれます。<br>を使いたい場合は、shiftキーを押しながら改行します。出力されるhtmlはテンプレート作者の腕次第なのかもしれません。

カスタマイズ性

インスペクタでサイドバーやページタイトル等を非表示にできます。インスペクタでの操作以外に、以下の方法でカスタマイズ可能です。

インジェクション機能

カスタムコード（JavaScript等、何でも）をサイト単位（全てのページ）または、任意のページに挿入することができます。挿入場所は、以下の通りです。

  • サイト
    • 文書の前：PHPなどのサーバ側スクリプト
    • 見出しエリア：<head>の後、</head>の前
    • 主文：<body>の後、</body>の前
    • スタイルシート；テンプレートのスタイルをオーバーライド
  • ページ
    • 文書の前、見出しエリア、主文。内容はサイトと同じ。

独自HTMLの追加

オリジナルのHTMLページを追加できます。白紙のページを追加できるので、そこにテンプレートに依存しないページを作成できます。また、テンプレート内であっても、HTMLオブジェクトとしてページ内に独自コードを挿入できます。


以下、感想を羅列。

イイノカナ？

  • プレビュー機能がありません。エディタがプレビューを兼ねるという設計のようです。WYSIWYGというところでしょうか。出力結果をWebブラウザで確認するためには、サーバにアップロードする必要があります。MacにはWeb共有があるので、ローカルにアップロードして確認することもできますが、ローカルとリモートとの切替ができないため、ちょっと面倒です。ただ、ビルトインのデザインテンプレートを使う限り、あまりレイアウトの崩れがないような気がします。

キニナルトコロ

  • Sandvox Design Kitを使えば、スクラッチからデザインできるようです。Design Kitといっても、HTMLとCSSでSandVoxのフォーマットに従いひな形を作るだけです。また、Plugin（カスタムオブジェクト）をXcode（Cocoa）で作成できます。もちろんサードパーティ製のデザインやプラグインがあります。オリジナルのデザインを作れるのは嬉しいですね・・・ちょっと面倒そうですが。
  • Master機能がない？FluxやFreewayにあるMasterという概念はないようです。同じスタイルを複製する方法が分かりませんでした。手動であれば、スタイルをコピー＆ペーストする機能があるので、複製したいスタイルを持つ文字列等を選択してコピー（Command+Option+C）し、複製先を選択してペースト（Command+Option+V）すれば複製元のスタイルが適用されます。
  • FreewayやFluxでも気になっていましたが、モバイル（スマホなど）用のページの作り方が分かりませんでした。自動的に出力されれば便利なんですが、それは贅沢ですね。

イマイチナトコロ

  • UndoやRedoをしていたらハングアップしました・・・。Fluxの件もあり何となく自分のMacが原因かもと思い始めています。といっても、無闇矢鱈に落ちるわけではなく、特定の操作で落ちるようです。気をつければ回避できるでしょう。私の環境では、ホスト設定の’編集ボタン’で確実に落ちます。
  • '編集ボタン'で落ちるので、確認できなかったのですが、複数の接続先を保存できないようです。ローカルでテストして、サーバ（本番環境）にアップロードするという使い方はできないのかもしれません。
  • <header>タグが指定できない。<h1>はサイトタイトル、<h2>はページタイトルとナビゲーションに使用されています。<h4>はテキストオブジェクトのタイトル部分。<h3>も何かに使われていると思うのですが、見つかりませんでした。ページ内に中タイトル等を作成するには、フォントサイズを大きくしてそれっぽく見せるか、HTMLオブジェクトを利用して自分で追加する必要があります。
  • アップロードする度に、’更新されたサイトをお知らせしましょう。’的なダイアログが表示されます（上図）。オフにする設定が見つかりませんでした。ローカル環境で確認しながらページを作成するときに少しうざったいです。ローカルとリモートとの切替ができなかったりと、エディタ上で完成させたレイアウトは、本番環境でも絶対に崩れない自信があるのでしょうか。使い込んでいないのでわかりません。
  • デフォルトのフォントサイズが小さい。デザインテンプレートによって違うかもしれませんが、このデザインのデフォルトは12pxです。全体的に大きくするには、テンプレートを編集するしかない？
  • フォント設定をさわると<p style="font: normal normal normal 12px/normal Osaka; ">のようになるのですが、デフォルト（<p>のみ）に戻す方法がしばらく分かりませんでした。テキストを選択してメニューのフォーマットにあるスタイルの解除でデフォルトに戻せます。ソースコードを見ないと気が付かないので、編集はできなくても表示はして欲しいところです。

イイトコロ

  • とにかく簡単でシンプル。テキストを入力して、画像や動画を配置するだけです。サクサクと作って公開するには便利です。先に紹介した公式サイトのMovieを見るだけで、必要最低限の操作は理解できます。
  • とにかく軽い。FreewayやFluxのように重さを感じません。といっても、数ページしか作っていないので、ページ数が多くなると分かりません。FreewayやFluxは、テキスト入力時のレスポンスが悪く、別途テキストエディタで作成して、それをペーストしていました。SandVoxは快適にテキスト入力ができます・・・当たり前な気もする。といっても、Freewayはともかく、Fluxは目的・用途が異なり多機能なので、単純に比べるのはよくないですね。
  • 些細な事ですが、タグを入力しても特殊文字に変換してくれます。

まとめ

ヘッダーの画像は入替え可能ですし、ビルトインのデザインは一つのデザインに対して、複数のベースカラーが用意されているものもあります。ちょっとしたカスタマイズ性があるので、工夫次第でそこまで画一的なデザインにはならないと思います。公式サイトにも'CSS等の知識がなければ、ビルトインデザインをカスタマイズして下さい。’とあるので、とりあえず見栄えの良いサイトが簡単に作れれば、という初心者にはいいのではないでしょうか。

中級者以上には、ソースコードを全く編集できない部分が不満になるかもしれません。それでも、Design Kitをベースにオリジナルのデザインを作りたい人にはオススメですし、世界中に公開してもいいと思います。さらにプラグインも作れますし、初心者から上級者まで楽しめそうなアプリです。