2004年01月14日 (水)

新プラグインを加えて完全版?うにょうにょ Read More 提供開始(2/2)

前回のエントリで予告したプラグインと関連ファイルを私の iDisk の Public フォルダーにアップしました。今回はこれらを使ってうにょうにょ Read More を使えるようにするための説明をします。

iblogPatcher が必要ですのでまずはこれをダウンロードしてインストールしてください。以下 iblogPatcher が稼働する状態からの説明です。
  1. ファイル群をダウンロードして所定のフォルダーに入れます。
    下の表に従ってダウンロードしてください。ダウンロード元のリンクを CTL-クリック して [リンクをディスクにダウンロード] とか [リンクターゲットに名前を付けて保存...] とかをして保存します。格納先の "~" はローカルディスクのホームホルダーを表します。A フォルダーの下の B というファイルは "A/B" と表します。B がフォルダーの場合は "A/B/" と表します。URL と同じ表記法です。
    ダウンロード元 格納先
    BLOGPAGE_ACTION.plugin ~/Library/Application Support/iblogPatcher/plugin/
    CATEGORYPAGE_ACTION.plugin
    ENTRYPAGE_ACTION.plugin
    BlogUnyo.js ~/Library/Application Support/iBlog/Javascript/
    CategoryUnyo.js
  2. iblogPatcher の Blog 定義ファイルを更新します。
    Blog 定義ファイルとは iblogPatcher の中で sample というファイルからご自分の環境に合わせて変更したファイルです。README.txt では myblog.txt などとして説明しています。iblogPatcher 導入直後の状態に組み込む場合と、iblogPatcher 1.2.2 以降に公開されたプラグイン込みの場合として Blog「僕は見ていた」の実例を記します。
    導入直後からの更新
    # $Id: sample,v 1.5 2003/11/30 02:35:41 okamura Exp $

    %BLOG = (
      # ローカルの blog プレビューディレクトリを指定してください。
      'preview' => "$ENV{'HOME'}/Sites/iblog/B1234567890",
      # 対応する blog の iDisk の公開ディレクトリを指定してください。
      'publish' => '/Volumes/YourName/Sites/iblog',
    );

    %ACTION = (
      'preview' => {
        'before' => {
          'onStart' => undef,
          'file' => undef,
          'onFinish' => undef,
        },
        'after' => {
          'onStart' => undef,
          'file' => sub {
            VALID_XHTML::File(@_);
            SJIS_BNAME::File(@_);
    #        ENTRIES_JS::File(@_);
            ENTRYPAGE_ACTION::File(@_);
            CATEGORYPAGE_ACTION::File(@_);

          },
          'onFinish' => sub {
            VALID_XHTML::OnFinish(@_);
            NOLF_FEED::OnFinish(@_);
            SQUOT_CATNAME::OnFinish(@_);
            SJIS_BNAME::OnFinish(@_);
    #        ENTRIES_JS::OnFinish(@_);
    #        system("cp -p '$ENV{'HOME'}/Library/Application Support/iblogPatcher/ListEntry.html' '$ENV{'HOME'}/Library/Application Support/iblogPatcher/ListEntry.js' '$ENV{'HOME'}/Library/Application Support/iblogPatcher/ValidateListEntry.js' '$_[0]'");
            CATEGORYPAGE_ACTION::OnFinish(@_);
            BLOGPAGE_ACTION::OnFinish(@_);

          },
        },
      },
      'publish' => {
        'before' => {
          'onStart' => undef,
          'file' => undef,
          'onFinish' => undef,
        },
        'after' => {
          'onStart' => undef,
          'file' => undef,
          'onFinish' => ¥&UTF8_FEED::OnFinish,
        },
      },
    );
    以降のプラグイン込みからの更新
    %BLOG = (
      'preview' => "$ENV{'HOME'}/Sites/iblog/B557581052",
      'publish' => '/Volumes/yuji_okamura/Sites/iblog/iSawIt',
    );

    %ACTION = (
      'preview' => {
        'before' => {
          'onStart' => undef,
          'file' => undef,
          'onFinish' => undef,
        },
        'after' => {
          'onStart' => undef,
          'file' => sub {
            # iBlog 内部処理による XHTML の間違いを補正する
            VALID_XHTML::File(@_);
            # 日本語のカテゴリ名や Blog 名、Blog の説明を可能にする
            SJIS_BNAME::File(@_);
            # 全エントリをリストアップした entries.js のデータを収集する
            ENTRIES_JS::File(@_);
            # ファイルのエンコーディングを UTF-8 にする
            CHANGE_ENCODE::File(@_);
            # エントリのデータを収集する
            ENTRYPAGE_ACTION::File(@_);
            # カテゴリのデータを収集する
            CATEGORYPAGE_ACTION::File(@_);

          },
          'onFinish' => sub {
            # iBlog 内部処理による XHTML の間違いを補正する
            VALID_XHTML::OnFinish(@_);
            # RSS Feed の item の title の中の改行を取り去る
            NOLF_FEED::OnFinish(@_);
            # シングルクォートをカテゴリ名や Blog 名で可能にする
            SQUOT_CATNAME::OnFinish(@_);
            # 日本語のカテゴリ名や Blog 名、Blog の説明を可能にする
            SJIS_BNAME::OnFinish(@_);
            # 全エントリをリストアップした entries.js ファイルを作成する
            ENTRIES_JS::OnFinish(@_);
            # entries.js 活用のための各種ファイルをコピーする
            system("cp -p '$ENV{'HOME'}/Library/Application Support/iblogPatcher/ListEntry.html' '$_[0]/ListEntry.html'; cp -p '$ENV{'HOME'}/Library/Application Support/iblogPatcher/ListEntry.js' '$ENV{'HOME'}/Library/Application Support/iblogPatcher/ValidateListEntry.js' '$_[0]'");
            # ファイルのエンコーディングを UTF-8 にする
            CHANGE_ENCODE::OnFinish(@_);
            # カテゴリの unyo.js を作成する
            CATEGORYPAGE_ACTION::OnFinish(@_);
            # ブロッグの unyo.js を作成する
            BLOGPAGE_ACTION::OnFinish(@_);

          },
        },
      },
      'publish' => {
        'before' => {
          'onStart' => undef,
          'file' => undef,
          'onFinish' => undef,
        },
        'after' => {
          'onStart' => undef,
          'file' => undef,
          'onFinish' => sub {
            # RSS Feed のエンコードを UTF-8 にする
            $CHANGE_ENCODE::Conf{'target'}->{'OnFinish'} = [
              {
                'name' => "rss.xml",
                'type' => 'rss',
                'toEncode' => 'UTF-8',
              },
            ];
            CHANGE_ENCODE::OnFinish(@_);
            # Ping を自動送信する
            $OPEN_FILES::Conf{'target'} = [
              "$ENV{'HOME'}/Library/Application Support/iblogPatcher/iSawIt-PingBlogPeople.webloc",
              "$ENV{'HOME'}/Library/Application Support/iblogPatcher/iSawIt-PingBulkfeeds.webloc",
            ];
            OPEN_FILES::OnFinish(@_);
          },
        },
      },
    );

    # ブロッグページのカテゴリイメージを 32x32 の大きさにする
    $VALID_XHTML::Conf{'CategoryImage'}->{'width'}  = 32;
    $VALID_XHTML::Conf{'CategoryImage'}->{'height'}  = 32;

    1;
  3. テンプレートファイルを編集します。
    お使いのテンプレートセットの BlogPage.txt, CategoryPage.txt, EntryPage.txt の三つを編集します。
    BlogPage.txt の編集内容
    head 要素に unyo.js をロードする記述を入れます。
    <head>
      ......
      <script type="text/javascript" src="unyo.js"></script>
    </head>
    うにょうにょ Read More の表示のさせ方の設定をします。(オプション:詳しくは後述)
    <head>
      ......
      <script type="text/javascript" src="unyo.js"></script>
      <script type="text/javascript">
        ShowString = '続きを表示&gt;&gt;';
        HideString = '&lt;&lt;続きを隠す';
        HidePlace = 'bottom';
        HideLineFeed = 1;
        GotoEntryOnHide = 0;
      </script>

    </head>
    エントリの先頭箇所にアンカーを入れます。これは「続きを隠す」ときにブラウザでの表示位置がエントリの先頭に戻るようにするためでもありますが、ブロッグページにあるエントリを拾い出すためにも必要です。スタイルシートがサポートされているブラウザではアンカーに入れた■は表示されません。アンカーの付け方は各自工夫してください。私はタイトル自体をエントリページへのリンクにすることで従来の Read More をなくすと同時にアンカーの中に何も書かないことで Another HTML-Lint などで減点されることがないようにしました。
    <ForEachEntry>
      <h2 class="date"><$EntryPostDate$></h2>
      <div class="blogbody">
        <h3 class="title"><$CategoryImage$><_a id="<$EntryUUID$>" name="<$EntryUUID$>"><span style="display: none;">■</span></a><$EntryTitle$></h3><br />
        <$EntryAbstractOrBody$><br />
    次に、うにょうにょ Read More を表示させるための JavaScript を埋め込みます。
    <ForEachEntry>
      <h2 class="date"><$EntryPostDate$></h2>
      <div class="blogbody">
        <h3 class="title"><$CategoryImage$><_a id="<$EntryUUID$>" name="<$EntryUUID$>"><span style="display: none;">■</span></a><$EntryTitle$></h3><br />
        <$EntryAbstractOrBody$><br />
        <script type="text/javascript">
          WriteUnyo('<$EntryUUID$>');
        </script>
    CategoryPage.txt の編集内容
    BlogPage.txt と全く同じように編集してください。
    EntryPage.txt の編集内容
    これは ENTRYPAGE_ACTION.plugin がエントリの情報を収集できるようにするための編集です。前回のこのプラグイン公開時には <$NavigationItems$> も収集するようになっていましたが、今回の同プラグインの設定ではこれは省きました。しかし前回のエントリを見て既に編集なさっている方は前回のままで問題ありません。
    変更前 変更後
    <$EntryAbstract$> <!-- BEGIN EntryAbstract -->
    <$EntryAbstract$>
    <!-- END EntryAbstract -->
    <$EntryBody$> <!-- BEGIN EntryBody -->
    <$EntryBody$>
    <!-- END EntryBody -->
    <$EntryPostDate$> <!-- BEGIN EntryPostDate -->
    <$EntryPostDate$>
    <!-- END EntryPostDate -->
    <$EntryTimestamp$> <!-- BEGIN EntryTimestamp -->
    <$EntryTimestamp$>
    <!-- END EntryTimestamp -->
    前回同様変更後の改行はあってもなくてもどちらでも構いません。
  4. iBlog の Blog の [表示設定] で [blog の表示範囲] と [カテゴリの表示範囲] を [エントリの概要] に設定します。
  5. iBlog で [Blog]-[プレビュー状態をリセット後、プレビュー] をします。
    エントリが多い方はここでしばしの休憩です。
    そのままプレビューすると ENTRYPAGE_ACTION.plugin が正しくエントリの情報を収集できません。必ずプレビュー状態をリセットしてください。
  6. ブラウザでプレビューでの動作を確認して iBlog で公開します。

次に うにょうにょ Read More の表示設定について説明します。手順 3 の「BlogPage.txt の編集内容」で
  <script type="text/javascript">
    ShowString = '続きを表示&gt;&gt;';
    HideString = '&lt;&lt;続きを隠す';
    HidePlace = 'bottom';
    HideLineFeed = 1;
    GotoEntryOnHide = 0;
  </script>

と入れると書きました。この部分が設定している部分です。設定できるのはこの五つでそれぞれ次のような役割があります。
変数名 とり得る値 デフォルト値 役割
ShowString JavaScript の文字列
a タグで囲むことができる XHTML コード
'Show content&lt;&lt;' エントリの内容を表示するためのリンク文字列やイメージの記述を指定します。
HideString JavaScript の文字列
a タグで囲むことができる XHTML コード
'&gt;&gt;Hide content' エントリの内容を隠すためのリンク文字列やイメージの記述を指定します。
HidePlace 次の JavaScript の文字列のいずれか
  'top'
  'bottom'
'bottom' エントリの内容を隠すためのリンクをエントリの内容の上に表示させる場合は 'top' を指定し、下に表示させる場合は 'bottom' を指定します。
HideLineFeed 真偽を表す値 1 エントリの内容を隠すためのリンクとエントリの内容の間に <br /> を挟むかどうかを指定します。
挟む場合は 1 や true を指定し、挟まない場合は 0 や false を指定します。
GotoEntryOnHide 真偽を表す値 1 エントリの内容を隠したときに、そのエントリの先頭にブラウザの表示位置を移動させるかどうかを指定します。
移動させるときは 1 や true を、移動させないときは 0 や false を指定します。
長いエントリを表示し、ブラウザをスクロールさせてからエントリの内容を隠した場合、直前まで見ていたエントリが上の方になってしまい、意味的に見ているポイントがジャンプしてしまいます。このため見ている人が今何が表示されているか混乱する可能性があります。これを防ぐための機能です。
しかし、この機能が有効になっていると現在のページの URL の後ろに #ENNNN というような付加的な指定がついてしまいます。このままブックマークをしたり BlogPeople に登録されるとこれまた、混乱の元です。この機能を無効にすることによって見ているページの URL を一定に保つことができます。
どちらのメリットを重視するかによって決めてください。

表に書いたように、これらの設定項目には全てデフォルト値が設けられています。ですから設定をしなくてもうにょうにょできますが、ShowString と HideString くらいは設定した方がよいでしょう。

ShowString と HideString に img タグを入れたい人がいると思います。例えば
ShowString = '<img src="showContent.gif" alt="続きを表示" />';
HideString = '<img src="hideContent.gif" alt="続きを隠す" />';

とすれば(多分)動作はします。JavaScript としても全く正しいものです。しかし、これを XHTML の中に埋め込むのは間違いです。それはいくら JavaScript の文字列の中だからといっても & や < や " や > が入っているとブラウザが混乱する恐れがあるからです。

こういう場合は、例えば unyoSetting.js というファイルを作って設定内容をそこに書きます。そして script タグの src 属性でそのファイルを指定して読み込むようにしてあげると OK です。

Posted: 15:13    | Comment | Trackback


以下、類似エントリです。