Arun's note

子供服を中心としたソーイングライフログ

twitterをサイドバーに表示する(@発言抜き)

【2013.07.17.】 TwitterAPIのバージョンが1.1に完全移行したため、以下の方法は使用不可能となりました。


唐突に twitter デビューしてみました。これを機に、右カラム(navi_area)で使用していた SereneBach 標準装備の「ちょっと一言」プラグインを終了し、最新ツイートを表示するよう仕様変更しました。 java script でタイムラインデータ(~.json)を取得&加工(html吐き出し)、 CSS でスタイル指定しています。


 【参考URL】



 【仕様概要】


  • @発言(RT/QTについても)非表示

  • http~から始まるリンクは[URL]表示に変換

  • TwitPic経由の画像はサムネイル表示

  • 日付は「月/日」形式(時間は非表示)

  • 表示件数指定(当ブログでは最新3件)

  • CSSでスタイル指定

  • Firefox3とIE8で表示確認

  • (ハッシュタグについては未テストです)



以下、スクリプトを転載します。
おかしなところ等、コメント欄や「ひとこと送信」からご連絡いただけると助かります。



Serene Bach
-
| comments (0) | trackbacks (1) |

SB カテゴリ/月別/検索結果でインデックス表示

カテゴリ別、月別アーカイブ、Search(検索)結果を表示するモードで、ページ上部にインデックス(目次)を表示するようにカスタマイズしました。リストされた見出しをクリックするとページ内の該当エントリに飛ぶようになっています。右下にはページナビゲーションも表示されます。

これらを実現するために、以下のプラグインをもりこんでいます。


  • パンくずリスト

  • カテゴリーINDEX化

  • 選択エントリリストのページ内参照化


(詳細は使用中プラグイン一覧にあります)

[パンくずリスト]
インデックスの1行目に表示される見出しに使用しています。
 ■カテゴリ別 : カテゴリ名を階層表示
 ■月別モード : 年月表示
 ■サーチ結果 : 検索語および検索結果件数表示

[カテゴリーINDEX化]
インデックス表示を上記3モードの場合に限定するロジックとして使用(表示用に個別テンプレートをつくる必要がありません)。本来は「カテゴリモードのときのみ表示」となっているので、直接ソースを変更し「月別アーカイブ」「検索結果」の場合も表示されるようにしました。

[ページ内参照化]
本来の {selected_entry_list} タグで表示されるインデックスはリンク先が各エントリ個別のパーマリンクだったので、これをページ内のアンカーに変更するために入れました。

ベースHTMLテンプレートにて、以下のように記述しています。

<div id="entry_area">
<!-- BEGIN cat_index -->
<div id="catindex">
<p>{topic_path}</p>
{selected_entry_list}
<div>
Page : {prev_page_link} {page_navi_exp} {next_page_link}
</div>
</div>
<!-- END cat_index -->
<!-- BEGIN topic_path -->
<!-- END topic_path -->
<!-- BEGIN selected_entry -->
<!-- END selected_entry -->
    :
    :

CategoryIndexで限定しているモード以外では各独自タグが表示させないように、すべての独自タグを「cat_index」ブロック内におさめています。けれども topic_path と selected_entry タグを使うためにはそれらのブロックを記述する必要があるので、 cat_index を閉じた後に BEGIN~END の記述をしています。

この「独自タグを独自ブロックの外側に置く」ことについては、 『Serene Bach オフィシャルガイド』 の P.178 に説明されていました。「独自タグを記述する場所に関しての制約はありません」とのこと。これを知ってかなり理想に近いインデックスを表示できるようになったので、時間はかかりましたが満足度の高いカスタマイズとなりました。
Serene Bach
-
| - | trackbacks (1) |

SB メールフォームの設置

SereneBach 本体やプラグインでは対応できないようなので、
外部CGIでメールフォームを設置することにしました。選択ポイントは:


  • 文字コードUTF対応

  • 送信前に確認画面表示

  • 入力チェック/エラー表示機能

  • Perlで記述

Perl+UTF対応という時点であまり選択肢がありませんでした。
最終的に以下のスクリプトをお借りすることにしました。

メールフォームプロCGI [SYNCKGRAPHICA]

  • レジューム機能
  • ENTERで入力項目移動
  • エラー項目自動フォーカス

等、利用者に使い勝手がよさそうなところも気に入っています。

ただ、スクリプトに同梱のマニュアルではサーバー転送後に何をどうすればいいのかまるでわからなかったので、シンプル機能バージョンのマニュアル(直リンクは切れていたのでスクリプトをダウンロードし同梱されているもの)を参考にしました。

また、住所入力関連のデータやロジックは不要なので削除しました。そうすることで多少動作が軽くなった気がします。高機能な分、外見を含めカスタマイズは少々複雑でした。使われるかどうかもわからないものに3日以上費やしてしまいました・・・
Serene Bach
-
| - | trackbacks (0) |

SB エラーメッセージのカスタマイズ

コメント入力時などに表示されるエラーメッセージが SereneBach 標準のテンプレート(管理画面と同じもの)になっているので、ブログ本体で使用しているテンプレートを適用、というカスタマイズを施しました。管理画面などでは設定できなかったので、直接ソースをいじりました。


 エラーメッセージ表示時に使用されるHTMLは
   \lib\sb\App.pm
 の
   sub _error_template
 に記述されているのでここをテンプレートに準じ変更

 エラーメッセージ内容(文言)については
   \lib\sb\Language\ja.pm
 で一括管理されているので 日・英 併記に変更

 エラーメッセージを返すようなプラグインを導入している場合
 各プラグインのリソースファイルで文言管理されている模様
 例えば「入力項目チェックのプラグイン(ClosedComments.pm)」
 では以下のファイル:
   \plugin\resource\ja\closedcoms.txt
 にも文言があります

 管理画面のカスタマイズについては MIXI の [sb] コミュニティに
 詳細が紹介されていました

Serene Bach
-
| - | trackbacks (0) |

SB テンプレート カスタマイズ

シンプルな画面を求めて、使用するテンプレートは TK*Plus1(みかん。) さんの FL@T に決定。その後色々手をいれています。覚えている範囲でリストアップ。


  • エントリ部の幅を広く/ナビゲーション部の幅を狭く
  • タイトル文字は左寄せに

  • 日付の形式を変更

  • ナビ部見出しの見直し(文言&リスト画像追加)
  • 各種プラグインを導入

  • 各エントリのメインカテゴリ表示の下にサブカテゴリ表示

  • 各エントリの author は非表示

  • コメント投稿欄の reset は非表示

  • ボタンに重ねたカーソルを「手」に(style="cursor:hand;")

  • <li>の無駄な改行を削除(#entry_area ul br{display: none;})

  • カテゴリモード時表示されるエントリ一覧にページナビ追加

  • リストスタイルを矢印画像に

  • エラーメッセージにも当テンプレートを反映(詳細別記

  • メールフォーム設置(詳細別記

Serene Bach
-
| - | trackbacks (0) |

SB 使用中プラグイン一覧

あれこれ入れて動かしてみた結果、現在は以下のプラグインを使用中です。
作者の皆様、ありがとうございます。

//エントリ表示//
ページナビゲーション展開
 └ 前/次というページナビに代わってページ番号を展開表示
うにゅうにゅReadMore
 └ 「続きを読む」クリック時ページ変更なしに続きを表示
カテゴリーナビゲーション
 └ 個別記事ページ上部の前/次記事リンクを同カテゴリーの記事に限定
パンくずリスト
 └ 個別記事ページにパンくずリスト(階層/カテゴリ)表示
カテゴリーINDEX化
 └ カテゴリモードのときエントリ一覧をINDEX表示
選択エントリリストのページ内参照化
 ├ リストのリンク先をページ内該当記事のトップとする
 └ 上記CategoryIndexと併用しIndexのページ内参照化を実現
ThumbPop
 ├ サムネイル画像クリックでポップアップ表示
 └(テンプレートに記載するJavaScriptのウィンドウ名をブランクにした)

//コメント欄//
アンチスパム
 └ 外部サービスのAPIを通してスパム判定を行うスパムフィルター
非公開コメント受付
 └ 非公開コメント機能および入力項目チェック機能を追加
コメント内リンク表示変更
 └ コメント内のURIを指定の文字列や画像に変換

//ナビゲーション部//
ツリー化プラグイン
 ├ コメント/トラックバックリストのツリー化&文字列クリップ
 └ 直接該当コメントに飛ぶリンク付加
カテゴリーのプルダウン化
 ├ 親カテゴリーにサブカテゴリーの記事数を合計して表示
 └ 記事数を括るマークに好きな文字列を設定可
ちょっと一言 : Serene Bach 標準装備
 └ トップページのみに表示されるテキスト欄管理
月別アーカイブリスト簡易表示
 └ 現在の年以外の月別アーカイブは年リンクのみ表示
ImgCounter
 ├ 拡張カウンタ。画像使用/不使用どちらも可。日計表示あり。
 └  『Serene Bach オフィシャルガイド』の添付CD-Rに収録

//管理画面・アクセス解析//
並べ替え
 └ カテゴリー・リンク・オススメ・ユーザーの各リストの並べ替えを手軽に
アクセス解析 : Serene Bach 標準装備
 └ ホスト別・ブラウザ別・リンク元別の集計
直近アクセス表示
 ├ リンク元表示期間を短期に設定可能
 └ 直近のアクセスログをそのまま表示
Yet Another Access Log
 └ ページ別、リンク元、検索エンジンでの検索語句集計
ブログ内検索語句集計
 ├ ブログ内検索(右上SEARCHボックス)で使用された語句の集計
 └ 上記YAALを参考に自作
Serene Bach
-
| - | trackbacks (0) |

Serene Bach 導入(関連リンク等)覚書

ブログの移築先について悩んだ結果、カスタマイズの柔軟さや、複数カテゴリを一つのエントリに指定できる機能などが魅力的だったので、Serene Bach を導入することに決定。サーバーは以前からお世話になっているXREA

添付のヘルプファイルを参照しながらインストールはすんなり終了(XREAには完備されているので外部ライブラリ関係はUPなしでOK)。さて、カスタマイズに着手・・・と、ネット検索をはじめてから初めて気がついたのだけれど、どうも最近の情報が少ない。数年前は活気に満ちていたようだけれど。

スパムが多い、エントリ件数が500近くなると動作が不安定になる、等、心配な情報もちらほら。Serena Bach から他のブログに乗り換えたという人もちらほら。でも乗りかかった船なので、そのまま漕ぎだしてしまいました。

以下、導入時からしばらく頻繁に覗いたサイトです。

Serene Bach 本家 [sb開発研究所
 └ 本体の他プラグインやテンプレートのダウンロードできます

sb-users.jp
 ├ 日本の Serene Bach / sb ユーザのためのハブサイト
 └ プラグインやテンプレートのリンク集、閉鎖したフォーラムの過去ログ

blog TK*Plus1
 └ テンプレートや罫線画像をいただきました☆

参考文献:『Serene Bach オフィシャルガイド
Serene Bach
-
| - | trackbacks (0) |