Wednesday, February 11, 2009

Blogger ブログの要約記事をトップページに表示するアイディア

久々の Blogger ネタ、でもアイディアだけ。

テンプレートの変更を考えていまして、トップページの表示をなるべく簡素にしたいと思い、タイトル(と記事の要約)のみの表示へ変更する予定です。
記事の要約のみを表示して、「続きを読む」リンクなどを設置する方法は以前からあり、こちらで詳しく解説されています。


ただし、この方法は(今までのものを含め)全ての記事内容をそれ専用に編集しないとなりません。

そこで、アイデアというか思いつき。
Blogger ブログで配信しているフィードにはサマリィ(要約:この場合は最初の数百文字程度)だけを抜き出したものがあります。
詳しくは、こちらを。

自分のブログを例に挙げれば、
http://redone-on.blogspot.com/feeds/posts/summary

なんですが。
このサマリィをブログのトップページに貼り付ければOKなのではないか、と。

思いつく方法・その1


Blogger には幸いにも登録フィードをブログに貼り付けるフィード・ウィジェットがあります。
これを用いてサマリィを表示すれば、と思ったのですがフィード・ウィジェットはデータをキャッシュに取っていて表示が更新されるのが(異様に)遅い。
折角記事を書いても、トップページの更新が1日と遅れる状況は避けるべき。

思いつく方法・その2


JSONフィードのコールバックを使う。
http://redone-on.blogspot.com/feeds/posts/summary?alt=json-in-script&callback=AAA

AAAという関数で受け取って、記事タイトル、リンク、サマリィを表示する。
問題としては、Javascriptオフの環境ではトップページがまっさらになってしまうこと。


最善の方法としては、Bloggerチームがフィード・ウィジェットの登録フィードをユーザの任意のタイミングで更新にされるように改善してもらうのがよいのですが……。
なんとも、他人任せな解法。

Monday, September 29, 2008

横スクロールのサンプルページ

Javascript で横スクロールするスクリプトのサンプルを以下に掲載.
CSS オン,Javascript オンの環境でアクセスしてください.

Monday, September 01, 2008

横スクロールするスクリプト ~横長デザインの為に~

追記 at 2008.Sep.04
Firefoxで Ctrl + PgDn(or PgUp) 時にタブ移動と共にスクロールしてしまう不具合修正.
その他に,
  • Shift, Ctrl, Altキー押下時の処理を追加.
  • Home, End キーに対応

上記対応のコード修正. 同様にソースファイルも修正しました.
追記 at 2008.Sep.02
修正ミスを修正.
  • Safariでスクロールイベントが動かない不具合

コードも修正. ソースファイルも修正しました.

 実験的に横長デザインに変更しようかと思いまして,ユーザビリティを考慮して,まずマウススクロール時に横スクロールするスクリプトを実装してみました.

参考

マウスホイールで横スクロール


function handle(delta) {
if (delta < 0) {
// 下方向にまわした場合の処理
} else {
// 上方向にまわした場合の処理
}
window.scrollBy(-delta*120, 0);
}

/** Event handler for mouse wheel event.
*/
function wheel(event){
var delta = 0;
if (!event) { /* For IE. */
event = window.event;
}
//Shiftキー Ctrlキー押下時
var altK = typeof event.modifiers == 'undefined' ? event.altKey : event.modifiers & event.ALT_MASK;
var ctrlK = typeof event.modifiers == 'undefined' ? event.ctrlKey : event.modifiers & event.CONTROL_MASK;
var shiftK = typeof event.modifiers == 'undefined' ? event.shiftKey : event.modifiers & event.SHIFT_MASK;
if (shiftK|ctrlK) { return true; }


// テキストボックス上では通常のスクロール動作
var isTextArea = false;
var target = event.target||event.srcElement;
if (target && target.nodeName.match (/input|textarea/i) && target.type.match (/textarea/i)) {
isTextArea = true;
}
if (isTextArea) {
return true;
}

if (event.wheelDelta) { /* IE/Opera. */
delta = event.wheelDelta/120;
if (window.opera) { delta = -delta; }
} else if (event.detail) { /* Mozilla case. */
delta = -event.detail/3;
}
/** If delta is nonzero, handle it.
* Basically, delta is now positive if wheel was scrolled up,
* and negative, if wheel was scrolled down.
*/
if (delta) {
handle(delta);
}
if (event.preventDefault) { event.preventDefault(); }
if (event.returnValue) { event.returnValue = false; }
return false;
}

/** Initialization code.
* If you use your own event management code, change it as required.
*/
if (window.addEventListener) { window.addEventListener('DOMMouseScroll', wheel, false); }
//else if (window.attachEvent) { document.attachEvent('onmousewheel', wheel); }
window.onmousewheel = document.onmousewheel = wheel;

リンク先のコードをいくらか修正したものです. 修正箇所は一々説明しません.
あと,テキストボックス上では横スクロールしないようにしています.

PageDown, PageUp キー押下時に横スクロール


function KeyShirtcuts(event) {
if (!event) { /* For IE. */
event = window.event;
}
// Altキー Ctrlキー押下時
var altK = typeof event.modifiers == 'undefined' ? event.altKey : event.modifiers & event.ALT_MASK;
var ctrlK = typeof event.modifiers == 'undefined' ? event.ctrlKey : event.modifiers & event.CONTROL_MASK;
if (altK|ctrlK) { return true; }


var isTextArea = false;
var target = event.target||event.srcElement;
if (target && target.nodeName.match (/input|textarea/i) && target.type.match (/textarea/i)) {
isTextArea = true;
}
if (isTextArea) {
return true;
}
switch (event.keyCode) {
case 33 : //PgUp
window.scrollBy(-document.documentElement.clientWidth, 0); break;
case 34 : //PgDw
window.scrollBy(document.documentElement.clientWidth, 0); break;
"case 35 : //End
window.scrollTo(window.scrollMaxX|document.body.scrollWidth, 0); break;
case 36 : //Home
window.scrollTo(0, 0); break;

default: return true;
}
if (event.preventDefault) { event.preventDefault(); }
if (event.returnValue) { event.returnValue = false; }
}
if (window.addEventListener) { window.addEventListener('keydown', KeyShirtcuts, false); }
else { document.attachEvent('onkeydown', KeyShirtcuts); }

IE では'keypress'イベントで PgDn, PgUp キーは拾ってくれないようなので'keydown'イベントで.
同様に,テキストボックスにフォーカスがあるときは横スクロールしないようにしています.

vscroll.js

 参考までに上記のスクリプトを纏めてファイル化したものを以下に置きます.

補足

 Fx1.5-3.0, IE6, Opera, Safari3.0 at WinXP にて動作確認しております.
 ブログデザイン自体は記事毎に横並びにする予定ですが,実際に上記のコードを使用する場合は縦方向のスクロールが必要になった場合の考慮をする必要があります.
 基本,長文を読ませる(自分のような)ブログには向いてない.
 ちなみに,デザインはコチラを参考にする予定. >>NonSociety: Julia

 ちなみの因みに,あくまで予定.

Friday, March 21, 2008

テンプレ変更しました

ブログデザイン変更. ただ今,修正中.
数日中はデザインが不安定になるかもしれないですけど,お楽しみください.


デザインの段階からHTML構造を意識してしまうから無難なデザインになってしまう

Monday, January 29, 2007

|Blogger|template| ページタイプによる Widget 操作の注意点

フィードウィジェットは他ブログサービスなどでは見掛けない,特徴的な機能の一つと思います.
【”最新のコメント”を追加する方法】 などを見ても面白い使い方ができそう.

 しかしながら,テンプレ編集(Expand 表示)で Blogger 独自のタグ群を見つめているとき,ウィジェットタグ<b:widget>...</b:widget>内で特異な ID 指定がされていることに気づきます.
 つまり,ブログの動的HTML生成時にウィジェット部分の (x)HTML を吐き出したあと, JavaScript でその ID のコンテンツの書き換えを行っているということでしょうか?


だから何なの・・・?


ウィジェットを記事単独ページで非表示にするために,
<b:includable id='main'>
<b:if cond='data:blog.pageType != "item"'>

 <!-- コンテンツ -->

</b:if>
</b:includable>

とする手法がありますが,これだと<ul/>タグに指定されている ID をページ構成時に消してしまいます.

これは不味い


この ID が削除されたことは,Blogger の方は知りません.従って,単独ページの構成時に Blogger の JavaScript が存在しない ID を参照してしまい JavaScript エラーが発生します.

 他の大部分のウィジェットでは,あまりウィジェットタグ内で ID 指定などされていないようですが,フィードウィジェットに関しては非表示にした場合,ID 参照エラーが起こり,その時点で Script がストップしてしまいます.
従って,記事単独ページにおいて Script がストップしてしまい,同様の JavaScript で実現されるバックリンクが表示されない,というの現象があります.


じゃあ,どうすればいいの


  • 特定のページで非表示にしない
  • 非表示にしたい場合は以下のようにする

    <b:includable id='main'>
    <b:if cond='data:blog.pageType != "item"'>
    <h2><data:title/></h2>
    </b:if>
    <div class='widget-content'>
    <ul expr:id='data:widget.instanceId + "_feedItemListDisplay"'>

    <b:if cond='data:blog.pageType != "item"'>
    <!-- ループ -->
    </b:if>
    </ul>
    <b:include name='quickedit'/>
    </div>
    </b:includable>
    青字: ID 指定の部分. コンテンツのラッパ部分は残す.
    タイトルとアイテムのみ除去



なんか面倒ねー・・・


これは,Blogger のバグだと考えられます. そもそも Blogger ブログは CSS エラーも多い!
Blogger ヘルプのレイアウト用ウィジェット要素タグ欄を見ると,<b:widget/>タグにはページタイプによる表示/非表示を指定する属性が定義されている模様(typePage).
但し,現在実装されていません.(at 2007/01/29.)

恐らく,将来的にはページエレメントの編集画面などで,正式にページの種類による表示非表示の指定ができるようになると思います.
・・・そうなることを待ちましょう.

Friday, January 19, 2007

|Blogger|template| Blogger の Label を TagCloud 化

ようやく旧 Blogger を抜け出すことができました.
そこで,テンプレートも新しくし,心機一転. はじめさせていただきます.

templete by Envy inc.


# 素晴らしいテンプレートをありがとうです.


-- ここからは Blogger バナシ

 果てさて,新 Blogger になって提供されるようになった Label 機能(カテゴリ,タグ)ですが,Blogger には貼り付けたラベルの一覧を表示する方法がリスティングしかありません.

今回はこれを TagCloud 表示化するようにテンプレートカスタマイズしてみました.

Label 一覧を TagCloud 化


これはテンプレートを直接書き換えるので,テンプレートのバックアップを行ってから自己責任でお願いします.

それでは.
  1. Blogger のダッシュボードからテンプレートのHTML編集画面へ移る
  2. ウィジットのテンプレートを Expand 表示にする
  3. widget タグの type='Label' とあるものを探す.
    例: <b:widget id='Label1' locked='false' title='Labels' type='Label'>
    ※ もしなければ,ラベル一覧のエレメントをページに追加していないので,先ずページ要素を追加する
  4. <b:widget ...> ~ </b:widget> まで,タグで囲まれた所を以下のコードに置き換える(コピー&ペースト)

    <b:widget id='Label1' locked='false' title='Labels' type='Label'>
    <b:includable id='main'>
    <b:if cond='data:title'>
    <h2><data:title/></h2>
    </b:if>
    <div class='widget-content'>

    <ul style='font-size:100%; padding:0; text-align:justify;'>
    <b:loop values='data:labels' var='label'>

    <li style='list-style:none; display:inline; margin:0 4px 0 0;'>

    <b:if cond='data:label.count >= 200'>
    &lt;span class='posts-200' style="font-size: 250%;"&gt;

    <b:else/><b:if cond='data:label.count >= 150'>
    &lt;span class='posts-100' style="font-size: 230%;"&gt;

    <b:else/><b:if cond='data:label.count >= 100'>
    &lt;span class='posts-100' style="font-size: 200%;"&gt;

    <b:else/><b:if cond='data:label.count >= 70'>
    &lt;span class='posts-50' style="font-size: 170%;"&gt;

    <b:else/><b:if cond='data:label.count >= 50'>
    &lt;span class='posts-50' style="font-size: 150%;"&gt;

    <b:else/><b:if cond='data:label.count >= 30'>
    &lt;span class='posts-30' style="font-size: 140%;"&gt;

    <b:else/><b:if cond='data:label.count >= 20'>
    &lt;span class='posts-20' style="font-size: 130%;"&gt;

    <b:else/><b:if cond='data:label.count >= 15'>
    &lt;span class='posts-10' 1style="font-size: 120%;"&gt;

    <b:else/><b:if cond='data:label.count >= 10'>
    &lt;span class='posts-10' style="font-size: 110%;"&gt;

    <b:else/><b:if cond='data:label.count >= 8'>
    &lt;span class='posts-1' style="font-size: 100%;"&gt;

    <b:else/><b:if cond='data:label.count >= 5'>
    &lt;span class='posts-1' style="font-size: 85%;"&gt;

    <b:else/><b:if cond='data:label.count >= 3'>
    &lt;span class='posts-1' style="font-size: 75%;"&gt;

    <b:else/><b:if cond='data:label.count > 0'>
    &lt;span class='posts-1' style="font-size: 65%;"&gt;

    <b:else/>
    &lt;span class='posts-0' style="font-size: 50%;"&gt;

    </b:if></b:if>
    </b:if></b:if>
    </b:if></b:if>
    </b:if></b:if>
    </b:if></b:if>
    </b:if></b:if>
    </b:if>


    <b:if cond='data:blog.url == data:label.url'>
    <data:label.name/>

    <b:else/>
    <a expr:href='data:label.url' expr:title='data:label.count + " posts: " + data:label.name'><data:label.name/></a>

    </b:if>

    &lt;/span&gt;

    </li>
    </b:loop>
    </ul>

    <b:include name='quickedit'/>
    </div>
    </b:includable>
    </b:widget>
    少し長くて冗長かもしれませんが,内容自体は非常に単純なので読んで理解するのも難しくはありません.
    if-then ルールが長いですが,自分の好みに合わせて更にカスタマイズしてください.
  5. 保存

で終了となります. 再構築の必要がないので,ブログを更新して表示して見てください.
スクリーンショット: Label を TagCloud 化

今回のミソは &lt;span &gt;


 因みに &lt;span となっているのはタイプミスではありません.

 新 Blogger の if-else タグ文は,その中でもコンテンツがきちんと閉じてなければなりません.
つまり,<タグ> と </閉じタグ> の組が必ず同じ if 文内になくてはなりません.

今回のように,条件文が多かったり細かく表示を変えたかったりしたい場合などでは,とても冗長になり記述量が増えてしまいます.
しかしながら,(現在の Blogger では)上記のように記述することで if 文コンテンツ内の HTML タグを閉じずにまた正式なタグとして適応させることが出来ます.

注意点


 今回の実装方法は,もしかしたら Blogger のバグを利用したものかもしれません. 将来は仕様が変更されるかもしれませんし,実現できなくなるかもしれません.
 また,&lt; でエスケープしたとしても,構築したブログではタグとして認識されるので,閉じタグなどをきちんと自分で文法チェックしてください.
以上のことを留意してテンプレートに組み込んでください.


スタイルを少し変えたい・・・?


 投稿数自体が少なくてタグ全体の文字が小さくて見えない・・・,というときは以下のようにスタイルを指定して文字の大きさを変えてください.
&kt;head> の中の <style> タグで,
<style>
...

.Label .widget-content ul {
font-size: 130%! important;
}
...
<style>
スクリーンショット: 少し文字を大きく表示

他にも,投稿数毎にクラスを割り当てているので,それを利用してより見やすいように調整できます.
例えば,50件以上のものをより強調したい

.Label .posts-50,
.Label .posts-100,
.Label .posts-200 {
font-size: 150%! important;
font-weight: bold;
}

投稿数の少ないものをより小さくしたい

.Label .posts-1 {
font-size: 80%! important;
}

など指定できます. 投稿数が増えると共にかえていきましょう.

その他


その他にも,Label の表示形式を工夫する方法としては以下のエントリもあります. こちらも参考に.


追記 at 2007年02月28日


ul タグのスタイルに text-align: justify; を指定して表示を均等割り付けにしました.

Tuesday, September 26, 2006

[blog / css / Design]_ red_one さようなら / サイトデザインあれこれ

去年からホスティングさせて頂いていたサーバが最近何かよく落ちてるなぁ、と思ったらサービスを停止してしまいやがった。

ので、blogspot に待避。 将来またレンタルサーバに手を出すかは分かりませんが、しばらくはここでやります。
新しい URL はコチラ.

  http://redone-on.blogspot.com/


で、新装開店ついでにテンプレートも温めていたものに変えました。 テーマは白黒・赤です。
初めて来られた方には違和感ないかも知れませんが,昔はコレ → です。


テンプレ変えた、だけじゃ味気ないので、ブログデザインに関して参考にしたところ、記事などを振り返ってみたいと思います。


2カラム → 可変レイアウト → 1カラムへ


考えてみれば今回変える前にもデザイン変えているんですけど、余り post にする余裕がなかったので、そこから振り返ります。
まず、3カラムはどうしてもしたくなくて、サイドバーを右側一本にしたかった。

「全体の横幅はウィンドウサイズに合わせて可変で,サイドバーを固定長で右に置く」

ということをテーマにして、始めは一人で四苦八苦していたのだけれど,どうにも出来なくて。
ここのサイトのスタイルシートによる崩れない 2カラム 3カラム・レイアウトを参考にしました。
目から鱗もので、これから CSS を勉強したいヒト、悩んでいるヒトたちにオススメです!


Previous Postsを何とかする


Blogger ブログは記事を過去へさかのぼるのが分かりにくい(Bloggerに限らずほとんどがそう)。 ですので、デザインでだけでも過去記事が参照しやすいようにしようと試みました。
参考にしたのはこれ。
Lucky bag::blog: リモートロールオーバーを CSS だけでやってみる

リモートロールオーバを利用して、過去記事のリストとそれに対応したボタン画像なりなんなりを横に並べ、現在記事からの過去記事への参照を見やすくした・・・つもり。
元ネタからはかなり改造しました。
まず、リストの1つ1つに連番でIDを割り当てることができないので(多分;Blogger のテンプレート編集では)、タグの入れ子の数をどんどん増やし、CSS で入れ子の数分ずらす大きさを大きくしていするようにした。




目次?設置


clmemo@aka: 記事目次をトップページの頭につけてみた |Blogger| 様からアイデアを頂き、ページ冒頭に目次っぽく更新リストをつけた。
最初は Blog Search の検索結果を使っていたのだけれど、最近文字化けや機能不全がおおく、rss を使うことにした。
Blogger が提供しだした RSS は最近作成されたものではなく、最近更新されたもの順にならんでいるらしいので、コレ一本でいいやと思いました。 Feed2JS で貼り付ける。

また、クリボウの Blogger Tips: アーカイブページに投稿一覧リストを 様からもアイデアをパクリ、月毎のアーカイブページではその月の Post の一覧を更新リストの変わりに載せています。


かなり尻切れトンボですけど、書いてて疲れてきたのでここで一時筆を置きます。
補足など後日いたしたいと思いますので、よろしく~
それでは、新ブログ投稿1回目を終わります。

Wednesday, March 15, 2006

[Blogger / util]_ 次の20件

前Postの追記・補足という感じになります.また,長くなりそうだったので別にしました.

 終わりの方で最新20件から次の20件へ~ とかいう風に書いたのですが, 従来の方法では対応していませんでした.

ですので,僭越ながらクリボウ氏の category.js のコードを少しいじりまして,『次の20件』(ついでに『前の20件』)の表示機能を付加しました.

考え方


 Google Blog Search では検索結果をRSSやAtomフィードでの配信を行っているのですが, 実は検索結果アドレスの ?[以下~]&start=20&output=atom とすれば検索結果の20件目からが表示されます.
つまり "次の○○件" のサイトフィードも取得できるのです.

 以上を踏まえ, category.js を変更.

やったこと


変更点/追加機能は以下
  • 20件10件毎表示するように category.js を変更
  • カテゴリを表示するページ(url)の環境変数から startの値 を設定できるようにした
  • startの値+20件10件目からを表示する自ページへのリンクスポット"次の○件"を生成
  • [蛇足機能] "前の○件"へのリンクスポットも生成
  • [蛇足の蛇足機能] それ以上前へ戻れないときの非リンク化
  • リンクスポットにもクラスを設定
    (.next-results / .prev-results)
となっております.
■ 未実装項目
 次の20件がなくても"次の20件"へ移動できてしまったり, Firefox1.5 で動作確認しましたが,IE, Opera と Firefox 1.0x では見た目が異なったりと不具合がまだ・・・.

Firefox1.5 での見た目
: Firefox 1.5 での表示例

ツラツラ書き綴りましたが, 基本的に元の形を踏襲しているので,利用形態は変わりません.

-+-+-+-+-+-+-

 コードは category.js.
 クリボウ氏のものをダウンロードして使っている方は上書きして(バックアップを取ることを進めます)そのままご利用いただけます.

若しくは,コチラ のコードをカテゴリ表示用の Post (<script type="text/javascript" charset="UTF-8" src="http://[url]/category.js"></script> の部分)
に上書きコピー&ペーストしてください.

・num は一回の表示件数. デフォルトでは10件です.
・str は "次の○件" とかのリンクスポットになります. サイトの体裁などに併せて好きに変更してみて下さい.

 以上で上手く行くハズです.

間違いや不具合などございましたら,ご連絡下さい. こちらで検証して解決するようにします.
また,今後もコードのアップデート等をこのブログで公開していきます.

 その他,意見などありましたらゼヒ是非コメント下さい.


Monday, March 13, 2006

[Blogger / util]_ カテゴリ設置

クリボウ氏の BloggerでもCategory を参考にカテゴリを(やっと)設置しました.
やっと,と書いたのは,クリボウ氏でも取り上げられているのが去年の11月末であるようにかなり前から知っていました.知っていてやれてなかったからです.

理由は唯一つ.

 まず,Bloggerは完全な静的Webページ生成ですので,カテゴリ分けなんかの機能は大変難しい,というコトがあります. 標準でサポートされていません.


 クリボウ氏とその更に元にされたBlogger Categoriesは同GoogleのサービスGoogle Blog Searchを利用する方式で,
あるキーワードに対するサイト内検索の結果(のフィード)をそのカテゴリの一覧としてJavascriptで表示する方法です.

(実際には,HTMLページでサイトフィードを見られるようにRSSやAtomフィードをJavascriptに変換する別サービスFeed2JSを内部で使っています. かなり大掛かり・・・)



・・・ 詰まりは,Blog Search にインデックスされないと全く利用できなく,やむなく諸々準備だけはして見送っていたのです.

 しかし,イツマデ(5ヶ月・・・!)経ってもサイト内検索結果が得られない

 googleのblogスペースではなく,ftpで他サーバにhtmlファイルをアップロードしているのでインデックスされるのに時間がかかるのかな――とある程度は覚悟しておりましたが・・・

 5ヶ月経っても『マッチするものがありません』. 仕様がないのでここ数日色々Blog Searchで遊んでみました.すると自分のPostもそこにはある・・・.
-+-+-+-

Blog Search(及び,Google検索サービス)では検索演算子と呼ばれるものが利用できますが.
 少し試してみると

・blogurl:[自分のblogの完全URL] ではマッチする結果がない
・blogurl:[blogのURLの一部分(キーワード)](自分の場合は"~red_one") だと自ブログの記事を出してくれました.

#やはりβ版なだけあって,不具合が多々あるのか.
まあ,なので後者でカテゴリサーチを利用できるっぽい, と分かり昨日あれこれ設置していました.

 ただし,検索ロボットが収集した検索結果ですのでゴミが少なからずあります.

 他サイトのインデックス,削除したPostだったり,Postの固定リンクurl(=タイトル)が変わって古いインデックスが残っていたり,と.
あと,検索順が一貫していないのも問題かな.

 なかなか直ぐには解決しそうにない問題なので,多少のことは多めに見てやってください^^;

ここからは [蛇足]

 このカテゴリーを応用して,キーワードを空にしたカテゴリサーチすれば, 全Postが参照できるのではないのか?
と思いやってみました. [コチラ]   右・サイドバーにも設置→

 検索結果が時系列順でキチンと表示されるなら,ケッコウいいかも. 最新20件から次の20件・・・とかいう感じにページを進めることができるのでは.
何気にすごいぞ Blogger Categories.


Template Design. 2008 Jyun.