How to xfy Blog Editor

Google Mars for BlogEditorを試してみる(Ver.1.3.5.0))

Web Services by Google

火星です Latitude : -9.004451 Longitude : -120.377197

拡張コマンドのGoogle Mars for BlogEditorを使うと、こんな感じで火星の画像を挿入できます。利用するには、あらかじめGoogle MapsのAPIキーを入手しておく必要があります。入手方法はこちらを参照してください。Google Mars for BlogEditorの使い方は次のとおりです。

▼1.Google Mars for BlogEditorをダウンロード・インストールします。インストール後は、xfy Blog Editorの再起動が必要です。

▼2.新規記事を用意したら、［拡張コマンド－Google Mars］を選択します。

▼3.ダイアログボックスが表示されたら、［API Key］に取得したGoogle MapsのAPIキーを入力します。
▼4.［URL］に表示したいGoogle Marsで取得したURLを入力します。URLの取得方法は、「Google Marsで表示する場所のURLを取得する」を参照してください。なお、URLを入力するときは、「Google Marsで表示する場所のURLを取得する」の方法でURLをクリップボードにコピーしたあと、［URL］の入力欄にカーソルを置いて［Ctrl］+［V］キーを押せば確実です。
▼5.［Maker］にマーカーとして表示する文字を入力します。
▼6.［OK］ボタンをクリックします。

▼7.編集画面にマップの表示エリアとMakerの文字、緯度・経度が表示されます。なお、編集画面にはマップは表示されません。

▼8.あとは、［保存/サーバーへ反映］ボタンをクリックします。サーバーに保存したら、ブラウザを起動して表示を確認してください。

---

Google Marsで表示する場所のURLを取得する

Google Mars for BlogEditorでは、表示する位置のURLを、Google Marsで取得する必要があります。取得方法は次のようになります。

▼1.ブラウザでGoogle Marsを表示したら、場所を表示します。マップをドラッグしたり、表示されているリンクのクリック、倍率変更などを行って気になる場所を表示してください。

▼2.場所を表示したら、左上の［Link to this page］をクリックします。

▼3.すると、ブラウザのURLバーに、現在表示している場所のURLが表示されるので、URLを選択→右クリックし、［コピー］を選択します。これで、URLがクリップボードにコピーされます。あとは、コピーしたURLを必要な箇所に貼り付けます。あとで利用する場合は、メモ帳などを起動し、編集画面に貼り付けておくとよいと思います。

このページは xfy Blog Editor を利用して作成されました。

タグを強調表示するメリットは？(Ver.1.3.5.0)

以前、タグを強調表示する(Ver.1.3.5.0)という記事で、［表示］メニューの［タグの強調表示］をチェックしておくと、タグの境界線を表示できると書きました。境界線は薄い紫色で表示されますが、この表示は、記事を編集するとき、特に大切な役割を果たします。たとえば、xfy Blog Editorで次のような文章を編集しているとします。

xfy Blog Editorはジャストシステムが開発しました。

この場合、「ジャストシステム」という赤い文字の前にカーソルを置いて「株式会社」と入力したら、「株式会社」という文字は赤になるでしょうか？ それとも黒になるでしょうか？ 答えは、タグの強調表示である薄紫の境界線の状態で変わります。

まず、次のように「ジャストシステム」という文字が線で囲まれているときは、入力した文字が赤になります。

【画面1】

　　　↓
【画面2】

なぜなら、カーソルがタグの内側にあるからです。より具体的には、次の★の位置にカーソルがあるためです。
<span style="color:#ff0000">★ジャストシステム</span>

しかし、次のように「ジャストシステム」という文字ではなく、段落全体が線で囲まれているときは、入力した文字が黒になります。

【画面3】

　　　↓
【画面4】

この場合は、カーソルがタグの外にあるため、文字が黒になります。具体的には、次の★の位置にカーソルがあるためです。
★<span style="color:#ff0000">ジャストシステム</span>

では、画面1と画面3の状態はどうやって切り替えるかというと、［←］キー／［→］キーで切り替えます。カーソルを示す縦棒（｜）の位置は変化しませんが、［←］キー／［→］キーを押すと、次のように変化することが確認できるはずです。

　　　　　　▼　[←]キー　　▲［→］キー

というわけで、効率的に編集するためには、タグの強調表示はオンにしておくのが必須です。オフになっている場合は、［表示］－［タグの強調表示］で［タグの強調表示］をチェックしておきましょう。

このページは xfy Blog Editor を利用して作成されました。

記事のXHTMLコードのツリー構造を確認する(Ver.1.3.5.0)

xfy Blog Editorで記事のソースを確認したいときは、［ソース］タブに切り替えます。ただし、［ソース］タブでは、改行なしの状態で表示されるため、全体の構造を把握することは困難です。そのようなときは、次のように操作することで、記事全体の構造を分かりやすく表示・確認することができます。

▼1.WYSIWYG画面で編集中に、ウィンドウ左上の［ボキャブラリコンポーネントの切り替え］ボタンをクリックします。
▼2.［Source Like］をクリックします。

▼3.記事のXHTMLコードがツリー形式で表示されます。

この表示のときは、XHTMLのタグ先頭にある［－］マークをクリックして子タグを畳んだり、［＋］マークをクリックして展開したりすることができます。もとのWYSIWYG編集画面に戻すなら、再び左上の［ボキャブラリコンポーネントの切り替え］ボタンをクリックして、［Blog WYSIWYG］を選択します。

ただし、文字を編集することはできないので、ソースを直接編集したければ、［ソース］タブに切り替える必要があります。

このページは xfy Blog Editor を利用して作成されました。

ハイパーリンクのリンク先が新しいブラウザウィンドウに表示されるようにする(Ver.1.3.5.0)

ハイパーリンクをクリックしたとき、リンク先のページが新しいブラウザウィンドウに表示されるようにできます。ここでは、設定済みのハイパーリンクに対し、設定を変更する操作を紹介します。

▼1.ハイパーリンクを設定した文字を右クリックしてショートカットメニューを開きます。
▼2.［ハイパーリンクの設定］をクリックします。［ハイパーリンクの設定］ダイアログボックスが開きます。

▼3.［ターゲットフレーム］をチェックします。
▼4.右側のボックスで［▼］をクリックし、「_blank」を選択します。
▼5.［OK］ボタンをクリックします。これで、ハイパーリンクをクリックしたとき、リンク先ページが新しいブラウザウィンドウに表示されるようになります。

このページは xfy Blog Editor を利用して作成されました。

文字に設定したハイパーリンクを解除する(Ver.1.3.5.0)

設定済みのハイパーリンクを解除するなら、次のように操作します。

▼1.設定したハイパーリンクを右クリックして、ショートカットメニューを開きます。
▼2.［ハイパーリンクの解除］をクリックします

▼2.ハイパーリンクが解除され、通常の文字に戻ります。

このページは xfy Blog Editor を利用して作成されました。

タイトルにはHTMLのタグが使える［"："："］［&：&：&］［<：<：<］［>：>：>］ <ありがとう

最近気づいたのですが、xfy Blog EditorのタイトルにはHTMLのタグが使えるようです。タイトルに「<div>タグの使い方」といった文章を入力してサーバーに保存し、ブログを見たら、<div>タグが消えて「タグの使い方」と表示されていることで、そうと気づきました。

そこで、タイトルに以下のような文字列を指定してみたのが本記事です。

<h3>タイトルにはHTMLのタグが使える</h3><br/>［"："："］［&：&：&］［<：<：<］［>：>：>］ <img src="http://makoto3.justblog.jp/photos/album/frc002.jpg" width="100"/><ありがとう<thank you><hr/>

本文では、タグの< や > が&lt;や&gt;といった「実体参照」と呼ばれる記述に置き換えられて記述されるため、入力したまま表示されるのですが、タイトル部分はそうではないということです。

ただし、タイトル部分でも、単純に< や >を実体参照に置き換えているわけではないようで、<と>で囲まれている箇所だけをタグとして解釈しているようです。

このページは xfy Blog Editor を利用して作成されました。

Windows XPとWindows Vistaで拡張コマンドのxvcdファイルが表示されるようにする(Ver.1.3.5.0)

xfy Blog EditorのVer.1.3.5.0（R6）では、拡張コマンドのzipファイルを記事一覧画面にドラッグ＆ドロップするだけで、拡張コマンドを登録できるようになりました。ただし、それにともなって拡張コマンドの本体であるxvcdファイルの管理方法も変化しています。具体的には、Ver.1.3.5.0では、xvcdファイルは次のフォルダに自動的に保存されます。

<Windowsの存在するドライブ名>:¥Documents and Settings¥<ユーザー名>¥Application Data¥Justsystems¥xfy Basic Edition¥properties¥BlogToolManager¥plugins¥<13桁の数字>以下

<ユーザー名>はWindowsに登録した自分のユーザー名です。<13桁の数字>のフォルダはxfy Blog Editorによって自動的に作成されたフォルダです。zipファイルを記事一覧画面にドラッグ＆ドロップすると、上記のフォルダが自動的に1つ作成され、そこに拡張コマンドの本体であるxvcdファイルやその他の関連ファイル・フォルダが置かれます（従来はxfy Blog Editorをインストールしたフォルダ以下にある「scripts」フォルダにすべてのxvcdファイルが置かれる仕様でした）。

したがって、xvcdファイルを編集しようと思ったら、上記のフォルダにあるxvcdファイルを見つける必要があります。ところが困ったことに、上記のフォルダは、Windows XPおよびWindows Vistaの初期設定では隠しフォルダとして扱われています。このため、Windows側で設定変更しないと表示することができません。

そこでここでは、Windows XPとWindows Vistaで、上記のフォルダを表示させる（つまりxvcdファイルを見えるようにする）設定を紹介します。ちなみに、Windows XPとWindows Vistaを比べると、Windows Vistaの方が、設定変更する項目が多くなっています。

Windows XPでxvcdファイルが保存されているフォルダを見えるようにする

▼1.コントロールパネルを起動したら、［デスクトップの表示しテーマ］をクリックします。

▼2.［フォルダオプション］をクリックします。

▼3.［フォルダオプション］ダイアログボックスが開いたら、［表示］タブに切り替えます。
▼4.［詳細設定］で［ファイルとフォルダの表示］で［すべてのファイルとフォルダを表示する］をオンにします。

▼5.［登録されている拡張子は表示しない］チェックボックスをオフにします。
▼6.［OK］ボタンをクリックして［フォルダオプション］ダイアログボックスを閉じます。

Windows Vistaでxvcdファイルが保存されているフォルダを見えるようにする

▼1.コントロールパネルを起動したら、［デスクトップのカスタマイズ］をクリックします。

▼2.［フォルダオプション］の［隠しファイルとフォルダの表示］をクリックします。

▼3.［フォルダオプション］ダイアログボックスの［表示］タブが表示されたら、［ファイルとフォルダの表示］で［すべてのファイルとフォルダを表示する］をオンにします。

▼4.［登録されている拡張子は表示しない］チェックボックスをオフにします。
▼5.［保護されたオペレーティングシステムファイルを表示しない（推奨）］チェックボックスをオフにします。

▼6.手順5の後で以下のような警告メッセージが表示されたら、［はい］ボタンをクリックします。
▼7.［OK］ボタンをクリックして［フォルダオプション］ダイアログボックスを閉じます。

以上のように、Windows Vistaでは、Documents and Settings以下のフォルダは隠しフォルダのうえにシステム関連のフォルダとしても扱われているようなので、表示する手間が増えています。また、以上のように設定すると、システム関連のファイルが表示されようになるため、たとえばデスクトップに「desktop.ini」といった透明なアイコンが現れるようになります。これは、デスクトップ上のアイコン情報を持っているシステム関連のファイルですが、［保護されたオペレーティングシステムファイルを表示しない（推奨）］チェックボックスをオンにすると表示されてしまうのです。

したがって、Windows Vistaでxvcdファイルを表示させたときは、このようなシステム関連のファイルも同時に表示される点に注意してください。これらのファイルは変更・削除しない方が安全なので、xvcdファイルを編集したら、［保護されたオペレーティングシステムファイルを表示しない（推奨）］チェックボックスをオンに戻しておくといった処置も必要かと思います。

もちろん、システム関連のファイルが表示されていてもWindowsそのものの動作には無関係なので、気にならなければそのままでも問題はありません。

このページは xfy Blog Editor を利用して作成されました。

拡張コマンドをドラッグ＆ドロップで登録する(Ver.1.3.5.0)

Blog editorのVer.1.3.5.0以降では、拡張コマンドの登録方法がよりシンプルになりました。具体的には、xfyフォーラムからダウンロードしたzipファイルを記事一覧画面にドラッグ＆ドロップするだけで登録できるようになっています。具体的な操作例を次に示します。

▼1.xfyコミュニティでダウンロードしたzipファイルを記事一覧画面にドラッグ＆ドロップします。画面はImage of the Day for Blog Editor のzipファイルをダウンロードしてデスクトップに置き、記事一覧画面にドラッグ＆ドロップしているところです。

▼2.［ZIP］ファイルをオンにして［次へ］ボタンをクリックします。

▼3.［メニュー名］を確認します。必要なら書き換えてもかまいません。
▼4.［セパレータをコマンドの上下に付ける］をチェックすると、コマンドの上と下に区切り用の線が表示されます。ここではチェックしません。
▼5.［完了］ボタンをクリックします。

▼6.再起動するようにメッセージが表示されたら［OK］ボタンをクリックし、xfy Blog Editorを再起動します。

▼7.［拡張コマンド］をクリックしてメニューを開くと、登録した拡張コマンドか利用可能になっています。

繰り返しになりますが、zipファイルのドラッグ＆ドロップで拡張コマンドを登録できるのは、xfy Blog EditorのVer.1.3.5.0以降となります。なお、従来のように記事一覧で［Blog－拡張コマンド管理］を選択して登録することも可能です。

このページは xfy Blog Editor を利用して作成されました。

タグを強調表示する(Ver.1.3.5.0)

xfy Blog EditorのWYSIWYG編集画面では、カーソルのある文字や段落が紫の線で囲まれたり、画像をクリックすると画像が紫の線で囲まれたりします。これは、XHTMLのタグを表しています。

たとえば、段落中にカーソルを置くと段落全体が紫の線で囲まれます。このときは、紫線で囲まれた範囲が<p>～</p>であることを示しています。あるいは、文字を太字にしたあと太字に文字中にカーソルを置くと、太字が紫線で囲まれます。このときは、紫線で囲まれた範囲は<b>～</b>にあたります。

▼段落が紫線で囲まれた状態

▼太字が紫線で囲まれた状態

このように、何かが紫線で囲まれたときは、そこに何らかの開始タグと終了タグがあると判断することができます。

なお、［表示－タグの強調表示］で［タグの強調表示］のチェックを外すと、紫線は表示されなくなります。じゃまにならなければ、［タグの強調表示］はつねにチェックしておいた方がよいと思います。

このページは xfy Blog Editor を利用して作成されました。