JavaScript Archive

Firefoxアドオン、Operatorのユーザスクリプトで、hAtomを抽出するものをためしてみたときのメモ。

ユーザスクリプトの入手（hAtom.js）

Operatorのユーザースクリプトについては、以下のページからコードを入手することができます。今回は一覧のなかにある「hAtom.js」というファイルです。

• Operator User Scripts（Mike's Musings）

ファイルを保存して登録する

jsファイルを開いて中身をコピーして、任意のテキストエディタで開き、（拡張子.jsで）保存します。

このファイルは登録後消してもかまわないので保存場所はデスクトップでもいいです。ワタくシは作業ファイルのフォルダにいれてますが。

オプション設定のユーザースクリプトタブのところで新規に先ほど作成しておいた、jsファイルを登録します。

次にオプション設定のところで以下のように、データ形式（hAtom-hEntry,hAtom-hFeed）を追加してあげます。

実際にウェブページを開いて確認してみる

hAtom対応のページをみて動作を調べてみます。

operatorツールバーを表示しているのならば、Atom Entry(s)、Atom Feed(s)というメニューが追加されています。

このブログでは今の時点でhAtom未対応なので、はじめから対応されている、ActionStreamsのページで確認するとします。

hFeedにhAtom to Atom/RSS transcoderへ送る動作をつけてみた

hAtom-EntryにはFirefoxのブックマークに登録する動作がついているのですが、それだけでもアレなので、hAtom transcoder という、hAtomからフィードに変換するツールに、当該ページを送信するという動作を追加してみました。以下のようなコードです。

ちなみに、或るページを変換するには

http://tools.microformatic.com/transcode/<output format（atom|rss）>/hatom/URL

のような形式です。ブックマークレットでできるよ、みたいな話ですがまぁよしとします。

// hAtom to Atom/RSS transcoder
var hatom_to_transcoder = {
  description: "to hAtom transcoder",
  shortDescription: "to hAtom transcoder",
  scope: {
    semantic: {
      "hAtom-hFeed": "hAtom-hFeed",
    }
  },
  doAction: function(semanticObject, semanticObjectType) {
    if (semanticObjectType == "hAtom-hFeed") {
      var url = window._content.document.location.href;
      return "http://tools.microformatic.com/transcode/atom/hatom/" + url;
    }
  }
};

SemanticActions.add("hatom_to_transcoder", hatom_to_transcoder);

実際の動作は以下のようになります

以下はtranscoderにURLを送ったとき生成されたフィードの状態です。

Firefoxのアドオン、Operatorのユーザースクリプト。はてなブックマークの特定のタグの注目エントリ一覧に飛べるようなものを書いてみました

参考にしたのは以下のページ。

• Postal Search APIs & Solutions ブログ: Firefox Addon Operator のユーザスクリプトを作ってみました

で、以下のページにサンプルコードなどがころがっているそうなので参考にしました。

• Mike's Musings » Operator User Scripts

はてなブックマークのタグの注目エントリ一覧のページにキーワードを投げるには

• http://b.hatena.ne.jp/t/タグ

のようにするといいようです。

書いたとかいっても、書き換えしてるだけですが以下のようにしてみました。文字のエンコードのしかたがわからなくて英語表記になってしまた。

// Hatena::Bookmark

var hateb_tags = {
  description: "HatenaBookmark TagSearch",
  shortDescription: "Hatena::Bookmark",
  scope: {
    semantic: {
      "tag" : "tag"
    }
  },
  doAction: function(semanticObject, semanticObjectType) {
    if (semanticObject.tag) {
      return "http://b.hatena.ne.jp/t/" + encodeURIComponent(semanticObject.tag);
    }
  }
};

SemanticActions.add("hateb_tags", hateb_tags);

動作は、はてなブックマークの自分のページだと以下のような感じです。導入方法とかは、前掲のサイトの記事に説明されています。

使いどころ

rel-tagがついてるページのところから、はてブでのタグの注目|新着 記事を検索したりとかできまする。

URLのとことか変えたりすれば、他のサービスとかもいけるかも

検索ボックスのカスタマイズです。JavaScriptでフォーカスのときにスタイルがかわるというのを試してみました。

Movable Typeを使っているかたは、プラグインでお世話になってることの多いMovalog(movalog.com)のデザインですが、グローバルメニューのところに、検索窓があって、フォーカス時に横幅が広がって、視覚的にスタイルが違うことがわかるようになっています。

検索窓がフォーカスされたとき、スタイルシートのclassを切り替えるという仕組みのようでした。

ということで、真似して作ってみましたのですが、IE(IE6）だと、スタイルが切り替わってないもよう。

で、調べたら、「IE の getAttribute / setAttribute: Days on the Moon」にて、getAttribute / setAttributeについてまとめられていました。そんなわけで、IEで動きそうなものということで作ったのが以下のページです。

• 検索ボックスのカスタマイズ
• 検索ボックスのカスタマイズ（2）

最初のほうは、style.cssTextを使って一度にスタイルの書き換えをさせたものです。（２）のほうは、document.getElementByIdを使ってclassの書き換えをしたものです。

どちらがいいかとかいうと、どっちもどっちもいう感じなんですけど、ま小ネタ程度ということで。
＃「:focus擬似クラスがあるじゃない」とかいわれそうなやかん。

ブログのカスタマイズネタとか好きなものでよくチェックしたりするのですけど、カスタマイズすることによる副作用とかもあるみたいでして。

風流さんのブログ、風柳亭 - 別館：書庫のある庵 -をちょっと別のフィードリーダーに登録しようとして気づいたんですけど、ブログのdescriptionのところに妙な記述がありました。atomフィードから一部を抜粋してみます。

きまぐれな風のつぶやきwindow.ccSOstyles=[[ 　...途中省略... 小技メモきまぐれな風書庫積読メモ伝言板

＃実際は改行コードが入ってるみたいですが、当方で編集させていただきました。

ここに記載されているのは、/atom.xmlのtagline要素で、atom1.0でいうとsubtitle要素にあたる部分です。

なんかスクリプトのコードっぽいなと思って調べたら、以下のページでカスタマイズされていたんですね。

• 【ココログ】SideOff：必要に応じてサイドバーを隠すボタン

ココログの仕様がどうなってるか、使っていないためにわかりませんが、このカスタマイズはサイドバー側で設置できないのがミソなのではないでしょうか。つまりこういうことでしょう。サイドバーの表示をoffにするボタンがサイドバー内にあったら、押してしまったらそれ以降、再びサイドバー表示させたいときに、クッキーを消したあとで再読み込みしないといけなくなりますから。

おそらく、そのような背景があって、ココログの「サブタイトル欄」にスクリプトを埋め込むというアイデアになったと読んだのですが。どうもこの部分、他のテンプレートで使いまわされているようで、フィードの場所にも反映されているようでした。

おそらくMTでいうところの、MTBlogDescriptionタグに、remove_htmlという、グローバルモディファイアが使われているためにこのような出力になっているのではないかと。

さて、このremove_htmlが指定されているとHTMLタグ除去がおこなわれます。このカスタマイズで紹介されているような場合、scriptタグの開始タグと終了タグが除去されてwindow.ccSOstyles=の箇所が出力されているというわけです。

ですのでフィードでスクリプトの部分が反映されなくするためには、メンテナンス性は落ちるかもしれないけど、読み込んでいる外部jsファイル内にスタイルの指定部分も入れるのがいいのかも。

＃本来、ブログの説明とかサブタイトルを書くところなので、できれば、このような場所にスクリプトを埋め込みたくはないですけどね。

del.icio.usのブックマークした記事リストを表示させる、よくあるリンクロールのページを作りました。今回は勉強という意味でJSONに挑戦することに

3ping.orgさまのページにBookmarkリストを表示させるページがあったので、なんかいいなと思って作ってみることにしました。

さてdel.icio.usには、JSON feedsが用意されてまして、以下のページにて解説があります。

• del.icio.us / help / json

JSON Post Feedsについては以下のページに解説とサンプルコードが掲載されています。

Delicious Help Feeds

• delicious/help/feeds

• JSON Post Feeds

おおまかな手順としてはじめに以下のURLを読み込ませておきます

<script type="text/javascript" src="http://del.icio.us/feeds/json/（ユーザ名）"></script>

なおデフォルトでは、15件の出力のようです。20件出力させるにはパラメータで「?count=20」のように指定します（デフォルトは15、最大100と説明に書いてあります）。

あとは、exampleのコードを参考に加工したりなんぞするわけです。

サンプルコードによれば、containerというidのつけられたDIVで括られた見出し要素のあとに、リストを追加するコードを記述しているようです。

ということで、作ったのが以下のページです。

• Bookmarks

JSONにtagについての情報が入っていましたので、それをもとにしてタグのリンクもつけるようにしてみました。

Continue reading

折りたたみのコンテンツ表示でAccordionというのがあるんですが、こういうのが需要があるのかどうか不明ですが、とりあえず作ってみました。

コンテンツが閉じたり開いたりするというアレです。ということで、つくってみたのがこちら

インデックス系ページでjQuery Accordion

ワタくシもよくわからずに作っている部分があるので、ソースとかかなりテキトーになってます。

Windows　IE7,Firefoxでしか確認してません。

jQueryプラグインの入手

http://plugins.jquery.com/project/accordion

jquery.accordion_2.zipというファイルをダウンロードします。jQueryも同梱されているようです

フォルダをサーバにアップしる

解凍したら、フォルダをアップします。

そのままのファイル構成でアップしました。例えば、ブログトップと同じディレクトリでしたら、

yourdomain.com 　[blog top]
      |--  js
            |---- jquery-accordion
                       |---- lib
                       |---- jquery.accordion.js

サンプルコードを参考にして埋め込む

プラグインを呼び出すコードは以下のようなものです

<script type="text/javascript" src="./js/jquery-accordion/lib/jquery.js"></script>
<script type="text/javascript" src="./js/jquery-accordion/lib/chili-1.7.pack.js"></script>
<script type="text/javascript" src="./js/jquery-accordion/lib/jquery.easing.js"></script>
<script type="text/javascript" src="./js/jquery-accordion/lib/jquery.dimensions.js"></script>
<script type="text/javascript" src="./js/jquery-accordion/jquery.accordion.js"></script>

jQuery Accordionのデモページが用意されています。以下のページを参考にして色々カスタマイズします

http://jquery.bassistance.de/accordion/demo/

Vicunaのサイドバーでは、dl dt ddが使われていますので、With options, container is a definition list, header dt, content ddのサンプルを利用させてもらいました。

テンプレートでの修正箇所は、id:utilities以下のdlエレメントにて、折りたたみをおこないたい部分に対して、任意のidを与えます。デモページでは、「#list2」というidが付けられていますが、ここでは、#navigationとしておきました。

あとは、jQuery Accordionのデモページのソースをみたらだいたいわかることとおもいます。（説明放棄ｗ）

カスタマイズですが、event: 'mouseover'のところを、event: 'click'のように書くとオンクリックで開閉したりするみたいでした。

なお、Vicunaテンプレートでの動作確認のため、3ping.orgのwuさま提供の、スタイルテスト用ファイルを利用させていただきました。m(u.u)m

参照：　Vicunaのスキンをローカルで編集・調整する方法

JavaScriptを使った、タブによる表示の切り替えをやってみました。

月並みではあるんですが、JavaScriptを使い、ブログペットなどのブログパーツを切り替えて表示させるというのをやっておりまして。

これまでに、いくつかやり方が紹介されているのですが、自分用にともっとすっきりとした形のものがあったらいいな、と思っていろいろ調べたりなんやりしておりました。

で今回は、藤本壱さんが書かれました書籍、『JavaScript中級講座 - Ajaxを学ぶ前の基礎知識』（技術評論社）の内容からのスクリプトを利用させていただきました。

JavaScriptによってClassを書き換えるという方法で表示させる部分の切り替えをおこなう、というものです。ソースコードなどは書籍のほうに詳しく解説されていますので、ここでは省略します。

それで、一応できあがったのがこのページです。↓

切り替えサンプル

サンプルなので、ペットのコードのかわりにスクリーンショットにしてあります。また一部クラス名などをペット切り替え用として、こちらで書き換えさせていただきました。

ペット切り替えに特化することもないとは思いますので、応用すれば他の用途にも使えそうです。

情報としては既出なのですが、Google AJAX Feed API のDynamic Feed Control Wizardを使って特定ブログの新着記事のフィードを表示させてみます

http://marksanblog.blog119.fc2.com/ - PetBasketでここの新着記事を表示させていますが(現在運用していません)、そのやりかたです

まず、Dynamic Feed Control Wizard - Put feeds on Your Web Pageにアクセスして、取り込みたいフィードのソースを作成いたします

(1) Customize itにて、まずstyleを決めます。3種類用意されています。適当なスタイルのところのラジオボタンにチェックします。

Feeds Expressionにて取り込むフィードを指定します。ここではキーワードを指定することになっています。feedのURIを入れても反応しないようなのでご注意。ブログタイトルを入れると取り込んでくれるみたいです。

feedは複数指定も可能でFeeds Expressionの入力窓に入れるキーワードを、それぞれ半角カンマ（,）で区切ることで複数のフィードを指定できます（ためしに半角スペースのみで区切ったら、Jaikuのfeedがよみこまれてしまいました＞＜←それはそれで使えるかも）。

(2)Generate code for your web pageに貼り付け用ソースコードが表示されます。このソースをコピーして、表示させたいページに貼り付けします。なお、PetBasketのところでは、<head>～</head>にスクリプト部分を貼り付けして、<div id="feed-control"></div>は、表示させたい場所に貼り付けをしてあります。

Google AJAX API ですと、APIキーを取得しないといけなかったりするのですが、Wizardを使いますと、APIキーを取得しなくても利用することができます

参考

• AJAX Dynamic Feed Control - Google AJAX Feed API
• Getting Started - Google Feed API -- Google Developers(英語)

Lightbox2を使っている環境でBlogPetのようなフラッシュを使ったパーツと重なった場合の動作をテストしてみたました。

Lightbox JSでBlogPetがPNG背景の下になるように表示させる方法は、小粋空間さまにてしょうかいされています。

Lightbox JS/Litebox で BlogPet を背景画像の下に隠す
方法については再掲載のようでして、BlogPetでのソースコードが大幅に変更されたために、カスタマイズ方法がわからない、という声に応えてのエントリのようですね。BlogPetの配布するコードの中身の改変については、BlogPet側では改変されて使っているものについては、サポートできないようです。ですので、カスタマイズされたかたが、自分で対処しないといけないことになります。

それならば、BlogPetのソースを変更しなくても表現できるよう、代替のものを使うというほうが、後々のことを考えますと、利便性が高いのではないかと考えたわけです。

で、Lightbox2というものがありまして、これを導入させたらどうなるのか、というのを試しにやってみました。

» サンプルページ

動作としては、Lightboxを起動させると、フラッシュ部分が隠れるという表示になるみたいです。好みがわかれそうなんですが、オーバーレイの下にペットが表示されなくてもよくて、かつ画像が大きめである、というかたはこのような形で十分のように思います。

Lightbox2 はこちらからダウンロードできます。

» Lightbox 2

参考リンク

• 『Lightbox JS v2.0』の導入例
• Lightbox2.02入れました。