うろぐ

インターネットサービス&デジタル家電&デジタルカメラ&パソコンのレビュー

プロから見たホームページV3の使用感

普段はテキストエディターでhtmlとcssを作成してます

インターネットのエンジニアという仕事柄、ソースネクストのホームページV3と同様の機能を持ったアプリケーション(オーサリングソフト)は幾つか持っているのですが(ホームページビルダーやドリームウィーバーなど)、htmlテキストやcssテキストなど読み書きが出来るので、大抵はテキストエディターで作っていまいます。
この方が時間的に早く処理が出来るし、作成したhtmlファイルやcssファイルのソースが綺麗に書き上がります。

オーサリングソフトを使うと、起動させるだけで多少の時間がかかり、その上にファイルを読み込ませてデザインを変更して、サーバにアップロードするとなると、結構な時間がかかる上に、htmlファイルやcssファイルのソースに余分な情報を書き込んだり段落を変更してソースを汚くして読みづらくしてしまうので、使う機会が自然に減ってしまいました。

オーサリングソフトを使うとき

ただ、テキストエディターでhtmlやcssファイルを作成するのには、善し悪しがあります。
テキストエディターでhtmlやcssの構文をタイプしていると、おおよそのデザインは想像できるのですが、プロのデザイナーが作る様な緻密なデザインを書くことはまず無理なので、どうしてもシンプルなデザインとなってしまいます。

もっとも、わたしの好みは過剰な装飾や動くWebコンテンツが嫌いなので、シンプルなデザインでもかまわないのですが、WebSiteのコンテンツによってはシンプルなデザインはそぐわない場合もあって、そうしたWebSiteのデザインではいつも苦労をしていました。

業務で他社様のシステムを作る際には、デザインはプロのデザイナーが担当してくれるので、わたしがどうこうする必要は無いのでかまわないのですが(ただし、デザイナーが使うオーサリングソフトがhtmlタグの構造を完全に破壊してしまうことがあり、そうした場合はhtmlやcssの読み書きの出来るわたしが全てのデザインを書き換えたりします)、自分で運営しているWebSiteのデザインは自分自身で制作しているので、そうも行かない場合があるのです。そんなときにオーサリングソフトでデザインの基本を作るのですが、なかなか思う様には行かないのが現状です。

特に、最近は自作のCMSをに、スマートフォンに最適化されたデザインを追加・表示させる作業に没頭しているので、出来るだけデザインに頭を悩ませたくないと思っています。

ホームページビルダーVer15について

最近、必要があってホームページビルダーVer15にcssでデザインされたテンプレートがセットとなった製品を購入したのですが、インターネットのエンジニアというプロの目から見ると、ちょっと使うのにためらう様なデザインばかりだったので、テンプレートの分は無駄な出費となってしまいました。

購入直後にホームページビルダーがVer16にバージョンアップしましたが、Ver15で懲りたので購入は見合わせましたが、ソースネクストからホームページV3が発売されたと言うのでWebSiteを覗いてみると、cssデザインにかなり踏み込んだアプリケーションの様なので、使ってみることにしました。

ホームページV3について

ホームページV3を起動して、これまでに作成したhtmlファイルを読み込ませてみると、「あれれ」と言う様な、大変に違和感のあるヘッダーが作成されてしまいました。
下記がホームページV3が新たに書き加えたhederです。(一般のユーザーはオーサリングソフトが作成したヘッダーは余り見ないようですが、ヘッダーは大変に重要な箇所なのです)

<!DOCTYPE HTML PUBLIC “-//W3C//DTD HTML 4.01 Transitional//EN” “http://www.w3.org/TR/html4/loose.dtd”>
<html lang=”ja”>

<!–2012/10/25 20:58:50–>

<head>
<meta http-equiv=”Content-Type” content=”text/html; charset=Shift_JIS”>
<meta http-equiv=”X-UA-Compatible” content=”IE=EmulateIE7″>
<meta http-equiv=”Content-Style-Type” content=”text/css”>
<meta http-equiv=”Content-Script-Type” content=”text/javascript”>
<meta name=”GENERATOR” content=”ホームページV3″>
<title>EPSPN GPS北アルプス</title>
</head>

ファイルはワードプレスで作成しているブログのために書いた文章で(Wristable GPSを登山で使う)、pタグやh3、h4タグなどを使用しています。
文字コードはutf-8。
それと当然ですが、<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”>と宣言しているブログにアップロードする文章なので、それに準拠したタグを使用しています。

ところが、ホームページV3で新たに書き加えられたヘッダータグは「HTML 4.01 Transitional」の宣言をしています。
次に文字コードが「Shift_JIS」。テキストの文字コードは読み取らないようです。utf-8が反映されていません。

ホームページビルダーVer15とホームページV3との比較

わたしは自分の書いたタグは全て把握しているので、それらのタグが勝手に書き換えられたり、新しいタグが追加されるのを好みません。
このため、オーサリングソフトは余り使わない様になったのです。
ホームページV3がどの様な挙動をするのか、別のファイルを読み込ませて確かめてみました。

下のヘッダーは、わたしが現在制作に熱中しているCMS(CGIで動くワードプレスやムバーブルタイプの様なもの)のものです。
上がわたしがテキストエディター書いたhtml構文です。
下がそのファイルをホームページV3に読み込ませただけのものです。
URLはクライミングトークテント泊登山です。興味のあるかたは、ブラウザでアクセスしてからソースを表示させてください。
ちなみに、オリジナルのソースをごらんいただければおわかりの通り、このサイトはPCとスマートフォンの双方に対して最適化されたデザインを自動的に表示する様に作られています(同じURLを使いながらスマートフォンにはスマートフォン用のcssファイルを読み込ませ、PCにはPC用のcssを読み込ませています)。JavaScriptで処理をさせているのですが、この様な高度な作業をネット上で行わせると、一般的なオーサリングソフトでは対応が出来なくなってしまいます。オーサリングソフトをわたしが使えない理由の一つはこの辺りにもあります。

オリジナル

<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Strict//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd”>
<html xmlns=”http://www.w3.org/1999/xhtml”>
<head>
<meta name=”viewport” content=”initial-scale=1.0, user-scalable=no” />
<meta http-equiv=”Content-type” content=”text/html;charset=utf-8″ />
<meta name=”keywords” content=”テント,テント泊,野営,ハイキング,トレッキング,登山,黒部五郎岳,薬師岳,立山,剣沢,剱沢,劔沢,北アルプス,南アルプス” />
<meta name=”description” content=”テントにシュラフに食料そのほか、生活に必要な装備の一式を背中に背負って日本アルプス・八ヶ岳・・秩父山脈などの山旅を紹介します。テント泊の魅力とテント場からテント場までの登山ルートの様子を紹介します。” />
<meta http-equiv=”Content-Style-Type” content=”text/css” />
<script type=”text/javascript” src=”http://maps.google.co.jp/maps/api/js?sensor=false”></script>

<script type=”text/javascript”>
if ((navigator.userAgent.indexOf(‘iPhone’) > 0 && navigator.userAgent.indexOf(‘iPad’) == -1) || navigator.userAgent.indexOf(‘iPod’) > 0 || navigator.userAgent.indexOf(‘Android’) > 0) {
document.write(‘<link rel=”stylesheet” href=”http://climbingtalk.net/tent/css/clt2s.css” type=”text/css” /><link rel=”stylesheet” href=”http://climbingtalk.net/tent/css/maps.css” type=”text/css” /><meta name=”viewport” content=”width=device-width,initial-scale=1.0,minimum-scale=1.0″ />’);
}else {
document.write(‘<link rel=”stylesheet” href=”http://climbingtalk.net/tent/css/clt2.css” type=”text/css” /><link rel=”stylesheet” href=”http://climbingtalk.net/tent/css/map.css” type=”text/css” />’);
}
</script>
<title>クライミングトークテント泊登山 </title>
</head>

ホームページV3

<!DOCTYPE HTML PUBLIC “-//W3C//DTD HTML 4.01 Transitional//EN” “http://www.w3.org/TR/html4/loose.dtd”>
<html lang=”ja”>

<!–2012/10/31 06:57:02–>

<head>
<meta http-equiv=”Content-Type” content=”text/html; charset=Shift_JIS”>
<meta http-equiv=”X-UA-Compatible” content=”IE=EmulateIE7″>
<meta http-equiv=”Content-Style-Type” content=”text/css”>
<meta http-equiv=”Content-Script-Type” content=”text/javascript”>
<meta name=”keywords” content=”テント,テント泊,野営,ハイキング,トレッキング,登山,黒部五郎岳,薬師岳,立山,剣沢,剱沢,劔沢,北アルプス,南アルプス”>
<meta name=”description” content=”テントにシュラフに食料そのほか、生活に必要な装備の一式を背中に背負って日本アルプス・八ヶ岳・・秩父山脈などの山旅を紹介します。テント泊の魅力とテント場からテント場までの登山ルートの様子を紹介します。”>
<meta name=”GENERATOR” content=”ホームページV3″>
<title>クライミングトークテント泊登山</title>
<link href=”clt.css” type=”text/css” rel=”stylesheet”>
<link href=”map.css” type=”text/css” rel=”stylesheet”>
</head>

最初に「DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Strict//EN」を宣言しているのですが、このファイルをホームページV3に読み込ませると、「DOCTYPE HTML PUBLIC “-//W3C//DTD HTML 4.01 Transitional//EN」に変更されてしまいます。
この変更・書き換えは「以下使用するタグ類がXHTML 1.0に準拠している」と宣言しているのを、オーサリングソフトが勝手に「HTML 4.01 Transitionalにしか対応していません」と宣言してしまっているので、相当に困った処理です。
ご存じの様に、厳密な規格のXHTML 1.0 Stricに対応させたhtmlファイルを書くのは苦労するのですが、オーサリングソフトが比較して楽に書けるHTML 4.01 Transitionalにhtmlのタグ類を書き換えてしまっているのです。
注:ヘッダーメニューの「ファイル>サイトの設定>HTML出力」から出力形式はXHTMLかHTMLか選べる様になっていますが、サイト単位の設定なので、ホームページV3全体の設定では無いために、サイトごとに個別に設定をしなければならない面倒さがあります)

metaタグでcharsetをutf-8に宣言しているにもにかかわらず、文字コードはShift_JISに書き換えられています。

他にも、metaタグに余分な「GENERATOR」などが書き加えられています。(非挿入に出来ます)

ホームページビルダーVer15

<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Strict//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd”>
<html xmlns=”http://www.w3.org/1999/xhtml”>
<head>
<meta name=”viewport” content=”initial-scale=1.0, user-scalable=no” />
<meta http-equiv=”Content-type” content=”text/html; charset=UTF-8″ />
<meta name=”keywords” content=”テント,テント泊,野営,ハイキング,トレッキング,登山,黒部五郎岳,薬師岳,立山,剣沢,剱沢,劔沢,北アルプス,南アルプス” />
<meta name=”description” content=”テントにシュラフに食料そのほか、生活に必要な装備の一式を背中に背負って日本アルプス・八ヶ岳・・秩父山脈などの山旅を紹介します。テント泊の魅力とテント場からテント場までの登山ルートの様子を紹介します。” />
<meta http-equiv=”Content-Style-Type” content=”text/css” />
<meta name=”GENERATOR” content=”JustSystems Homepage Builder Version 15.0.11.0 for Windows” />
<script type=”text/javascript” src=”http://maps.google.co.jp/maps/api/js?sensor=false”></script>

<link rel=”stylesheet” href=”css/clt2.css” type=”text/css” />
<link rel=”stylesheet” href=”css/map.css” type=”text/css” />

<title>クライミングトークテント泊登山 </title>
</head>

上記がホームページビルダーVer15で同じファイルを読み込ませたものです。
metaタグに「GENERATOR」が挿入された以外は(これでも我慢がならないのですがホームページビルダーVer15はGENERATORを非挿入にすることが出来ますが非表示にする操作でも余分な手間なのです)オリジナルのhtmlファイルと同じヘッダーです。
文字コードもutf-8で変わりがありません。
ただし、ヘッダー以外で、勝手にタグ類を変更したり削除したりしてしまい、レイアウトが崩れてしまいました。ホームページV3よりはましという程度で、使い物にはなりにくいのに変わりはありません。

作業画面の比較

以下、作業画面の比較です。

これがオリジナルの画面。
クライミングトークテント泊登山を参照。
3

これがホームページV3の「通常モード」画面。
デザインを制御しているcssファイルのディレクトリを勝手に「href=”css/clt2.css”」から「href=”clt2.css”」に変更してしまったので(上記のヘッダーの構文を参照)、cssファイルを読み込むことが出来ず、デザインが崩れてしまいました。
そこで、href=”clt2.css”でも読み込める様にcssファイルを移動したのですが、読み込みませんでした。
どうも、外部で作成したhtmlファイルやcssファイルを関連づけるのが苦手なアプリケーションの様です。
1

これがホームページビルダーVer15の「ページ編集」画面。
中央のgoogle mapsの位置がずれている他は、ほぼオリジナルのデザインを継承しています。
2

誰でも使えるオーサリングソフトとして見るホームページV3

以下は、一般的なオーサリングソフトとしての使い勝手のレビューです。

ソースネクストのホームページ V3からアプリケーションをダウンロードして、購入の手続きを取ってから、起動します。
面白いのは音声ガイドがデフォルトでついていることです。

使い始め

テーマの選択

最初にテーマを選択します。
ユーザーが使うコンテンツに応じられる様に、色別でテーマを選べる様になっています。
具体的には、白系、赤系、青系、緑系、黄系、黒系の六色です。

WebSiteの基本色を選択するというのは難しいものなのです。
基本色の選択を誤るとコンテンツ自体の信頼性を損ねたりするのです。
例えば、事実を「冷静」に伝えるレビュー系ブログを運営しているときに赤系の基本色を使うと、事実が事実として受け入れられにくくなってしまう場合があります(事実を「感情的」に伝えるのには赤系は向いている色です)。事実を「冷静」に伝えるのには青などの寒色系が一般的には向いていると言われています。
また、アウトドアなどの自然を対象としたWebSiteの基本色には緑系などが向いています。黒系や赤は向かないでしょう。

こうした、難しい基本色の選択が簡単な選択画面で出来るので、WebSiteを作り込んで行く過程で、基本色がどうもコンテンツと合わないと言うことに気がついたときに、基本色を別の色に、簡単に変更することが出来るのです。

使えるテンプレートは多数あって、各色系に共通しています。

白系の選択。
4

黄色系の選択。
5

レイアウトの選択

ヘッダー、フッター、メインのコンテンツを表示する部分、サイト内のリンクやAdSenseやアフィリエイト広告などを表示させる左右のサイドバーなどを、レイアウト全体を決める画面です。
選択できるレイアウトは基本を押さえたもので、右カラムと左カラムがある3カラム、右カラムだけと左カラムだけの2カラム、ヘッダーにメニューを表示させる1カラムが選択できます。
ブログで言えばムバーブルタイプのユーザーは3カラムが好きで、ワードプレスのユーザーには2カラムが好まれています。

2カラムにするか、3カラムにするか、ヘッダーの表示・非表示や、タイトルの表示・非表示なども選択できます。

レイアウトの選択や構成も、WebSiteを作り込んで行く過程で変更が出来ます。

ページの選択

WebSiteを作り込んで行く上で必要となる、目的別の個別のページがあらかじめ用意されています。
しかも、個別のページはユーザーが必要に応じて選択できる様に配慮されています。
例えば、比較的更新頻度の高いWebSiteを運営する場合は、最新情報のページが重要となるでしょう。こうしたユーザーは「最新情報」を選択します。
また、山の写真や野鳥の写真、鉄道の写真など、デジタル一眼カメラで撮影をした自分の写真をアルバムとして公開するのが目的の場合は、「写真の一覧」を選択します。

個人のWebSiteの他に、個人事務所やお店・レストラン、オンラインショップ、会社、病院、カルチャーセンター、学校、サークルなどが用意されています。
個人事務所では、「事務所紹介」「企業概要」などのページが用意されています。

以上で、初期設定は終了です。
確認画面が表示されます。

選択画面。
7

WebSiteの作り込み

タイトルロゴの自動作成の機能

これは面白いと思った機能が、タイトルロゴの自動作成の機能です。
h1タグをダブルクリックすると、ポップアップWindowが開き、「サイトタイトル」や「URL」や「ロゴとして表示」の入力を促すのですが、ここで、サイトタイトルをクライミングトークに変更してから「ロゴとして表示する」にチェックボックスを入れて「ロゴの設定」をクリックすると、ロゴの選択画面に移ります。
サイトにあった好みのロゴに、入力した「クライミングトーク」の文字をPNG画像に変換できるのです。

ページのコンテンツの入力は直感的で、変更したい箇所をダブルクリックすれば、変更するエリアがハイトライトするか別にポップアップWindowが立ち上がるかして、テキストとして入力が出来ます。
8

サイト全体のデザインの変更

サイトを作り込んで行と、最初に選んだデザインではコンテンツにそぐわないと言うことがあります。
あるいは、長い時間運営をしていて、デザインを思い切って変更することで、気分を一新したいこともあります。

そんなときに役立つのが「サイト編集」の機能です。
初期設定で選んだ「テーマの選択」を呼び出して、色とデザインを選択・変更することが出来ます。

テーマの使い方はワードプレスのテーマによく似ていますが、直感的な使い勝手はホームページV3の方が良いです。

また、サイトのレイアウトも、3カラムから2カラム、ヘッダーあり・なし、などへ変更することも出来ます。
ワードプレスなどでデザインの変更に慣れた方なら直感的に操作を把握できるでしょう。

赤系のデザイン。
9

これを黄色系のデザインに変更しました。
同時に、カラムの配置も変更しました。
11

スマートフォン用デザインに一括変換

最近のアクセス状況を解析すると、WebSiteを閲覧するユーザーの20%前後がスマートフォンを利用していることが分かります。
この比率は右肩上がりに上がるでしょう。

ところで、同じコンテンツのWebSiteをPC向け、スマートフォン向けにデザインを変更するにのは、それぞれに適したcssを読み込ませることで実現するのが良いのですが、なかなかそうも行かないのが現実です。
ホームページV3は実に簡単に、PC向けのデザインをスマートフォン向けに変更することが出来ます。

以下、手順です。
「スマートフォン用サイトに変換」をクリックします。
ポップアップWindowが現れますので、スマートフォン用のデザインを選択します。
これだけで、PC用サイトがスマートフォン用サイトに変わりました。

残念なのは、Googleの奨励する「PC向けコンテンツもスマートフォン向けコンテンツも同一のURLで表示すること」が実現されていないことです。
JavaScriptをheaderタグに埋め込むことで、この処理は驚くほど簡単に実現できます。
サンプル「高尾山」のページのソースを表示させて、header部分のJavaScriptを参照してください。

良く見かけるのが、PCとスマートフォンでURLを変更するサイトです。
URLがi.ulog.bizとなっていたりulog.biz/i/となっていたりするものですが、これはgoogleによると、同じコンテンツに対して、クローラー(ロボット)がulog.bizのPCコンテンツと、モバイルコンテンツのi.ulog.bizの双方を巡回しなくてはならないので二重手間になる、インターネット上に同一のコンテンツが2つ存在してしまう、などが原因で非奨励となっています。

ホームページV3で作られたPC用のページとスマートフォン用のページのhtml構文を見ると、ほぼ同一であることが分かります。(サイドカラムの数を1つとしているか2つとしているかでdivタグの数が違っていたりする程度で大きな違いはありません)
双方を共通のhtml構文として出力できるのであれば、cssを自動的に変更することで、PCとスマートフォンの双方に対応したWebSiteの構築も、技術的にはそれほど難しくはなかっただろうと思われるので、残念です。

以下、PC用のhtmlの抜粋です。

            
  <div id="main">
  <h2>更新情報</h2>
  <hr />
  <table border="0" width="100%">
    <tbody>
      <tr>
        <td width="5" bgcolor="#696969"></td>
        <td width="5"></td>
        <td width="100%">2012/10/31更新</td>
      </tr>
    </tbody>
  </table>
  甲武信岳-十文字峠の縦走路をアップしました。<br clear="all" />
  谷川岳-茂倉岳の縦走路をアップしました。<br clear="all" />
  <table border="0" width="100%">
    <tbody>
      <tr>
        <td width="5" bgcolor="#696969"></td>
        <td width="5"></td>
        <td width="100%">2012/10/20更新</td>
      </tr>
    </tbody>
  </table>
  北アルプス縦走をアップしました。<br clear="all" />
  中央アルプス縦走をアップしました。<br clear="all" />
  <table border="0" width="100%">
    <tbody>
      <tr>
        <td width="5" bgcolor="#696969"></td>
        <td width="5"></td>
        <td width="100%">2012/9/10l更新</td>
      </tr>
    </tbody>
  </table>
  南アルプス縦走をアップしました。<br clear="all" />
  奥秩父主脈縦走をアップしました。</div>
  <div id="side2"></div>
  <div id="footer">testのフッター</div>

スマートフォン用の抜粋です。

            
  <div id="main">
  <h2>更新情報</h2>
  <hr />
  <table border="0" width="100%">
    <tbody>
      <tr>
        <td width="5" bgcolor="#696969"></td>
        <td width="5"></td>
        <td width="100%">2012/10/31更新</td>
      </tr>
    </tbody>
  </table>
  甲武信岳-十文字峠の縦走路をアップしました。<br clear="all" />
  谷川岳-茂倉岳の縦走路をアップしました。<br clear="all" />
  <table border="0" width="100%">
    <tbody>
      <tr>
        <td width="5" bgcolor="#696969"></td>
        <td width="5"></td>
        <td width="100%">2012/10/20更新</td>
      </tr>
    </tbody>
  </table>
  北アルプス縦走をアップしました。<br clear="all" />
  中央アルプス縦走をアップしました。<br clear="all" />
  <table border="0" width="100%">
    <tbody>
      <tr>
        <td width="5" bgcolor="#696969"></td>
        <td width="5"></td>
        <td width="100%">2012/9/10l更新</td>
      </tr>
    </tbody>
  </table>
  南アルプス縦走をアップしました。<br clear="all" />
  奥秩父主脈縦走をアップしました。</div>
  </div>
  <div id="footer">testのフッター</div>

同じ部分を切り取ったのですが、PC用のhtmlに「div id=side2」が挿入されている以外は、共通です。

こんなユーザー向けのアプリケーションです

直感的な操作でデザインの選択や変更や、PC向けサイトとスマートフォン向けサイトの変換などを行えるなど優れた機能を持ったアプリケーションですが、価格を廉価に押さえるために、機能はホームページビルダーVer15などと比べると限定されているようです。
機能が少ないというのはデメリットとも言えないもので、ホームページビルダーVer15に比べてメニューが少ないので、アプリケーションを使いこなせる様になるまでの時間が少なくて済みます。

使い勝手はワードプレスなどブログ系のCMSに似ています。

htmlやcssと言ったWebSiteを作る言語は知らない、もしくは覚えたくない。
それでも、ある程度の凝ったデザインのWebSiteを作りたい。
WebSiteの制作にかけられる時間はわずかしかない。
こんなユーザーにお勧めのアプリケーションと思います。

PR

ソースネクストでホームページ V3を見る。

11月 2nd, 2012

Posted In: アプリケーションのレビュー