JavaScript Archive

検索ボックスのカスタマイズです。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については以下のページに解説とサンプルコードが掲載されています。

• 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を使って特定ブログの新着記事のフィードを表示させてみます

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
• Google AJAX Feed API