blog.comewalk.com

Unicons

making it easier to insert some of those little Unicode symbols (like ☃ or ☺ or ✌) into web text fields.

via bradchoate.com

Brad Choate implemented a jQuery UI plugin which insert unicons like ☺ or ♫ on textarea! Very cool!!

If you are TypePad user (Sorry, TypePad Micro users couldn't use this way), first of all, you go to "Design" > "Content" page, and add "Embed your own HTML" module, then put following code. And click "Save" button.

<script type="text/javascript" charset="utf-8" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script type="text/javascript" charset="utf-8" src="/static/js/unicons.js"></script>
<script type="text/javascript">
$(function() {
$('head').append('<link rel="stylesheet" href="/static/css/unicons.css" type="text/css" media="screen" charset="utf-8">');
});
</script>

Next, you download unicons.js and unicons.css from github to your HDD. You go "Libraly" > "File Manager" on dashboard navigation, you upload both files. (In my case, I made "static/js/" and "static/css" directories, and uploaded them. These paths are: http://blog.comewalk.com/static/js/unicons.js, http://blog.comewalk.com/static/css/unicons.css)

At the end, you'd load your blog.

You can use this plugin on your TypePad blogs!

(Please see and try this comment form on this entry!)

The sample page is here and source code is here on github.

Hey Brad, Nice work!!

jQuery lightBox plugin on TypePad

今回は自分のブログに lightbox 風な写真表示を TypePad に設置する方法をご紹介します。

前にご紹介しました「jQueryライブラリを使う」ウィジェットを導入しつつ、TypeList にスクリプトを追加することで、上級者テンプレートを使わずに lightbox 風な写真表示を実現します。

まずはこちらのページから jQuery ライブラリをウィジェットとしてブログに登録してください。

次に lightbox 風なプラグインを導入しましょう。
最初にこちらのページにアクセスして最新版をダウンロードしてください。（私は　０．５　でした）
ダウンロードしましたら解凍してください。
解凍しましたら js、css、gif などを TypePad にアップロードします。アップロードはコントロールパネルのファイルマネージャから行います。
私は『ホーム』ディレクトリの直下に js、images、css というディレクトリを準備し、そこへアップロードしました。以下に私がアップロードしたパスとファイルをご紹介します。
http://comewalk.typepad.jp/js/jquery.lightbox-0.5.js
http://comewalk.typepad.jp/css/jquery.lightbox-0.5.css
http://comewalk.typepad.jp/images/lightbox-ico-loading.gif
http://comewalk.typepad.jp/images/lightbox-btn-close.gif
http://comewalk.typepad.jp/images/lightbox-btn-prev.gif
http://comewalk.typepad.jp/images/lightbox-btn-next.gif
http://comewalk.typepad.jp/images/lightbox-blank.gif

さてあとは以下の javascript を TypeList に貼付けます。私のドメイン部分を太字にしておきましたが、ファイルのパスを含めて皆さんの環境に合うように適宜読み替えてください。
毎度のお願いですが、TypeList の「メモ」または「リンク」のメモ欄に貼付けます。（「リンク」の TypeList を使う場合はそのリストの設定ページで「メモをテキストとして表示」を選択しておいてください）

<script type="text/javascript" src="http://comewalk.typepad.jp/js/jquery.lightbox-0.5.js"></script>
<link rel="stylesheet" type="text/css" href="http://comewalk.typepad.jp/css/jquery.lightbox-0.5.css" media="screen">
<script type="text/javascript">
$(function() {
    $('.entry-body a[href$=".jpg"] > img').filter(function() {
        var href = $(this).parent().attr('href').replace('/.shared/image.html?', '');
        $(this).parent().attr('onclick', '');
        $(this).parent().attr('href', href);
        return true;
    }).parent().lightBox({
        imageLoading: 'http://comewalk.typepad.jp/images/lightbox-ico-loading.gif',
        imageBtnClose: 'http://comewalk.typepad.jp/images/lightbox-btn-close.gif',
        imageBtnPrev: 'http://comewalk.typepad.jp/images/lightbox-btn-prev.gif',
        imageBtnNext: 'http://comewalk.typepad.jp/images/lightbox-btn-next.gif',
        imageBlank: 'http://comewalk.typepad.jp/images/lightbox-blank.gif'
    });
});
</script>

これで完了です。ブログの写真をクリックすると lightbox 風に写真が表示されたと思います。

「写真をクリックしたけど表示されない」という方、もしかして、その写真はもともとクリックして画像を表示するタイプではなく、単に画像だけを表示していませんか？
HTML 構造の観点から具体的に言うと、<a><img /></a>という構造のときに lightbox 風な表示になります。<img />のみでは lightbox 風な表示にはなりません。クリックした先の画像ファイルを次のページに遷移しないで、その場で表示するのが lightbox 風な表示になります。その点にご注意ください。
TypePad では WYSIWYG エディタで「画像の挿入」を利用して、「カスタム設定」を開くと、「ポップアップウインドウ」というチェックボックスがありますので、そこにチェックを入れて、画像を記事に挿入したときが lightbox 風な表示をするためのポイントです。

TypePad では「ポップアップウインドウ」指定で画像を挿入すると、a タグの onclick を利用して新しいウインドウを開きます。これを無効かしないと、lightbox 風に表示しつつ、ウインドウも開いてしまうので、$(this).parent().attr('click', '') として onclick の処理を消しました。

また「ポップアップウインドウ」指定の場合、/.shared/images?画像のパス という形で a タグの href 属性を作ります。これだと jpg ではなく、html を表示してしまい、この jQuery lightBox plugin とは相性がよろしくありません。そこで、/.shared/image.html? を削除して、再度 href 属性を指定するために、$(this).parent().attr('href', href) ということをしています。

サンプルなどでは $('#gallery a').lightBox(); こんな感じで lightBox メソッドには引数がないケースがありますが、私のコードには引数があります。このプラグインのサイトに Extend というページがあり、引数に渡せるパラメータが記載されています。
特に画像関係のパスについて指定が無い場合のデフォルト値は images/lightbox-blink.gif などといった指定になります。そうすると TypePad のようにアーカイブを階層で表現する構成ではデフォルト値は適さないので、上記のコードのように引数で画像のパスを渡すようにしています。その他、私はちょっとだけアレンジしていて、

overlayOpacity: 0.6,

を指定して、透過度を若干変更しています。

それから jQuery で有用だと感じたのは filter(function(){}) の記法です。return true; となればその変更が適用されるというもので、filter というよりは callback を埋め込むという感じです。メソッドチェーンを切らすことなく出来るのはとてもいい感じです。

WEB+DB PRESS Vol.41には amachang さんの jQuery の解説がありますので参考になると思います。

jQuery のメソッドチェーンの楽しさと CSS セレクタの便利さに触れると jQuery はやめられなくなります。気持ちいいと思いますのでみなさんも何かアイデアを jQuery を使って実現してみてはいかがでしょうか？

ブログに写真を貼るのが楽しくなると思います。どうぞご利用ください

下の画像をクリックすると lightbox 風に表示されますのでお試しください

seealso:

• jQuery lightBox plugin
• jQueryでLightBoxを実現するjavascript「jQuery lightBox plugin」
• ブログで使っているprototype.js を jQuery へ移行（スライドショー, ハイライトなど）
• WEB+DB PRESS Vol.41

jQueryを TypePad で利用するためのウィジェット

TypePad Japan ファミリーで使える、 jQuery を読み込むためのウィジェットを作成しました。
このウィジェットを使えば上級者テンプレートがなくても javascript であれやこれやをごにょごにょできます。
こちらのページからアクセスできます。
どうぞご利用ください

seealso:

• 「このエントリーを含むはてなブックマーク」ボタンを TypePad に設置
• はてなブックマークカウンターを TypePad に設置
• EmoticonCloud ウィジェット

「このエントリーを含むはてなブックマーク」ボタンを TypePad に設置

はてなブックマークがどれだけ好きなんだろうと聞きたくなるほどに、TypePad にはてな関連のネタを仕込む第 3 回目。

今回は自分のブログに「このエントリーを含むはてなブックマーク」ボタンを TypePad に設置します。

前にご紹介しました「jQueryライブラリを使う」ウィジェットを導入しつつ、TypeList にスクリプトを追加することで、上級者テンプレートを使わなくてもはてなブックマークボタンを設置できるようになります。

まず はてなブックマークのヘルプのページにあります の画像を自分の PC にダウンロードして、次に TypePad のコントロールパネルにあるファイルマネージャで今の画像をアップロードします。アップロードされた URL を http://yourname.typepad.jp/blog/images/b_entry.gif と仮定します。

次は「jQueryライブラリを使う」ウィジェットを導入してください。こちらのページから jQuery を使うウィジェットをインストールできます。

そして TypeList の「メモ」または「リンク」のメモ欄に以下の javascript を貼付けます。（「リンク」の TypeList を使う場合はそのリストの設定ページで「メモをテキストとして表示」を選択しておいてください）※の画像のパスは適宜読み替えてください。

<script type="text/javascript">
$(document).ready(function() {
    $('.entry-footer-info').each(function() {
        var permalink = $(this).find('.permalink').attr('href');
        $(this).append(' <span class="separator">|</span>');
        $(this).append(' <a href="http://b.hatena.ne.jp/entry/' + permalink + '"><img src="http://yourname.typepad.jp/blog/images/b_entry.gif" width="16" height="12" style="border: none;" alt="このエントリーを含むはてなブックマーク" title="このエントリーを含むはてなブックマーク" /></a>');
    });
});
</script>

これで完了です。ブログを見ますと、ブログのフッターの横にはてなブックマークボタンが表示されたと思います。どうぞご利用ください。

seealso:

• はてなスターを TypePad に設置
• はてなブックマークカウンターを TypePad に設置
• はてなブックマーク - ヘルプ - 自分のブログに「このエントリーを含むはてなブックマーク」ボタン

はてなブックマークカウンターを TypePad に設置

やっぱり自分のブログがブックマークされているかって気になりますよね。はてなブックマークではブログの URL を渡すだけで画像でその URL を含むブックマークが何件あるか返してくれるサービスがあります。こちらでやり方が紹介されています。

さて、このやり方は HTML を直接編集できるサービスに限定されます。TypePad でも上級者テンプレートを利用すれば MT タグを駆使して手軽にはてなブックマークカウンターを設置できるわけですが、私は別のやり方で対応する方法をご紹介します。

前にご紹介しました「jQueryライブラリを使う」ウィジェットを導入しつつ、TypeList にスクリプトを追加することで、上級者テンプレートを使わなくてもはてなブックマークカウンターが設置できるようになります。

まずは「jQueryライブラリを使う」ウィジェットを導入してください。こちらのページから jQuery を使うウィジェットをインストールできます。

次に TypeList の「メモ」または「リンク」のメモ欄に以下の javascript を貼付けます。（「リンク」の TypeList を使う場合はそのリストの設定ページで「メモをテキストとして表示」を選択しておいてください）

<script type="text/javascript">
$("h1").append('<div class="hatena-entrylist"><a href="http://b.hatena.ne.jp/entrylist?url='+ $("h1 a").attr("href") +'"><img src="http://b.hatena.ne.jp/bc/de/'+$("h1 a").attr("href")+'" class="bcounter" alt="この日記のはてなブックマーク数" title="この日記のはてなブックマーク数"/></a></iv>');
$(".hatena-entrylist").css("margin-left", "10px").css("display", "inline");
</script>

これで完了です。ブログを見ますと、ブログのタイトルの横にはてなブックマークカウンターが表示されたと思います。ブックマークの件数が全てではないですが、ブックマークの件数が増えることがブログを続けるモチベーションにつながるときもあります。どうぞご利用ください。

seealso:

• はてなブックマークカウンターを自分のサイトに貼り付ける
• はてな、「はてなブックマーク」の新バージョン公開日程を決定　大規模リニューアで既存システムを改善