comewalk.typepad.jp

Six Apart Tokyo Hack-a-thon Vol. 4 に参加しました

Six Apart Tokyo Hack-a-thon Vol.4 に参加しました

私は EmoticonCloud を紹介したかったので、EmoticonCloud の Movable Type 版を紹介しました

社内で TypePad の EmoticonCloud を紹介したときには社内では結構ウケたので、社外でどのような反応が得られるのかを見たかったのですが、やっぱりウケましたね。EmoticonCloud はこれはいいぞ今、jQuery の plugin として作成中なので、近日、Movable Type 版、その他の他社ブログ版などの紹介もさせていただこうかと思います。まずはこちらの「MTでも絵文字使おうぜプラグイン、アリマス」をご参照いただいて Movable Type で絵文字が使えるようにしておいてください。そして絵文字を利用したエントリを量産しておいてください。その後で、EmoticonCloud を導入すれば楽しいこと間違いなし

また Ustream で中継されていた [The Vox Night!] First も部屋の壁で見てましたよ。こちらとは全く異なる雰囲気でなかなか面白かったです。

今回参加された皆さんはひとりずつ本日の成果を発表してくださいました。それぞれ色々なカラーがあって楽しかったです。積極的に発表していただけると盛り上がりますね。Movable Type Rocks! あと freenode の #movabletype-ja で

20:06 Yappo_: MTOS on HTTP::Engine しに参加しようと思っていたのをすっかり忘れていた

とありました。是非みたかった！期待してます！！

Reminder: イベントの件

本日 (11/14) は、シックス・アパート主催のイベントが 2 つ開催されます

Movable Type

• Six Apart Tokyo Hack-a-thon Vol. 4 のお知らせ

Vox

• 【チームVoxより】[The Vox Night!] First 開催前日！
• 【チームVoxより】[The Vox Night! First]開催のお知らせ

参加予定の皆様、お忘れなく。。。 私は Movable Type の Hack-a-thon に出席する予定です

A REALITY TOUR - David Bowie

もう 4 年も経過してしまうのかー。Reality Tour (Dig) は David Bowie のアルバム Reality のライブ DVD です。David Bowie がとってもかっこいいのよ。そしてぼくが David Bowie の作品の中でもっとも好きなアルバム Earthling からの曲もあってうれしい限り。 今、それを見ながらこのブログを書いています

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="https://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 ウィジェット

Watched NHKスペシャル「デジタルネイティブ」

NHKスペシャル「デジタルネイティブ」 を見ました。はてなの近藤さんのエントリを見て録画予約をしました。そして帰宅後に見ました。

「デジタルネイティブ」という言葉は NHK による造語かと思ったらワールドワイドに認知された言葉なのですね。英語の Wikipedia にもありました。

A digital native is a person who has grown up with digital technology such as computers, the Internet, mobile phones and MP3.

番組中ではてなが取り上げられた部分について、主にはインターネット技術を使った情報共有についてでしたが、あんまりデジタルネイティブという感じがしなかったのですが、それは自分もデジタルネイティブなのかしらん

番組中で私の心にフックしたのは、6-10 Apr 2008 に Las Vegas の Mandalay Bay ホテルで行われた Gartner Symposium/ITxpo 2008 のセッションのひとつ「2018: Digital Natives Grow Up and Rule the World」のタイトルです。

私は経済学者ドラッカーが好きなのですが、特に プロフェッショナルの条件―いかに成果をあげ、成長するか (はじめて読むドラッカー (自己実現編)) の巻末でインターネットの普及について言及されていて、特にインターネットの普及により物理的な移動がなくなることに触れていました。そのドラッカーの内容とデジタルネイティブの発想が似ていると感じました。

そこにフックしてしまったので、私個人としてはドラッカーが過去に想像していた世界が今どうなっているのか、番組としてはどう捉えているのか、という確認作業的な観点で番組を見てしまいました。なので、はてながデジタルネイティブかどうかという点はあまり気にならなかったし、世界の若いデジタルネイティブたちが容姿や言語などにこだわらずにコラボレートしていることもあまり気にならなかったし、なんというかもうすでにそういう世界に直面しているし、ドラッカーが言っていたことが実現しているにほかならないし、といった感じで目新しさはありませんでした。

とはいえ、こうして誰かがまとめあげて言及することで多くの人に「気づき」を与えるわけですから、インターネットにかかわる者としては非常に有意義な番組だったと思います。

「このエントリーを含むはてなブックマーク」ボタンを 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 に設置
• はてなブックマーク - ヘルプ - 自分のブログに「このエントリーを含むはてなブックマーク」ボタン

御殿場プレミアムアウトレット

Image062~01
Originally uploaded by shigeta

御殿場にあるプレミアムアウトレットに行ってきました。もうクリスマスの装いがありました。

写真などは Flickr にアップロードしました。

今日は午後から小雨が降るほどの肌寒さでしたので、コールドストーンは結構空いてました。ので、久々に食べてきました。あの店員さんの歌は本場アメリカでは歌われていないと US の同僚に聞いたことがあります。日本独自なのかなあ？

それから Nikon のアウトレットショップがあってちょっと驚きました

結構久しぶりに行ったのでショップが拡張されていたり、駐車場が増えていたり、新発見がいろいろとありました。

ブランドのマークとかたくさん写真におさめてくればよかったな、とちょっと後悔しました。デジイチもっていけばよかったな

Tips として。10:00 のオープンに合わせて行ったので、　9:50 頃にアウトレットについたのですが、いきなり臨時駐車場へ誘導されました。早く行ったのはアウトレットの近くに駐車したかったから。なのに臨時って何？と思ったら、渋滞緩和のためにそうやっている模様。で、臨時駐車場に停めたくない人は直進して、アウトレットの近くの駐車場まで進むのがいいと思います。もしかしたら入場渋滞してるかもしれないけど、10:00 のオープン前ならたぶん空いていると思います。

ココロのパンの缶詰

社内にありました。これは何かのキャンペーンの限定グッズでしょうか。ブログ妖精ココロちゃんのパンの缶詰です。食べるのがもったいない感じですね。誰が持って帰るのかなぁ。。。

懐かしい Funk な気分で・・・

今日の音楽は久保田利伸さんの全編英語詞のアルバム「SUNSHINE MOONLIGHT」を引っ張り出してきて聴いているところです。名前も Toshi Kubota となっていて、たしかアメリカでリリースされていて、収録曲の「JUST THE TWO OF US」はローカルラジオ局でも結構流れたとか。

たまたま、R&Bがどうのこうの、funk がどうのこうの、っていう記事をどこかで見たので、これが無性に聴きたくなりまして、引っ張り出してきました。

宇多田ヒカルさんの Cubic U のアルバムもかなり好きなんですが、同じ感じがありますね。なんというか、日本人らしさみたいのが流れつつも、ファンキーな感じですよね。

今日はうねりながら仕事します。