昨日書いた「ブログにコードを貼り付ける方法で悩むの巻」ですが、さまざまな方のブログでとりあげていただき、とんでもなく勉強になっています。

ためになるのでこちらでもご紹介。

• pre 要素のスタイル定義とマークアップ
• ソースを貼付ける50の方法
• Re: i d e a * i d e a – ブログにコードを貼り付ける方法で悩むの巻
• pre要素へのスタイル指定

いやぁ、よくわからないで書いていたのでところどころ間抜けな記述がありましたが（ガチで「実態参照」と思っていたよ・・・）書いてよかった。とっても勉強になりました。

いろいろな論点がありそうですが、個人的にはpreとcodeのあわせ技で行こうかな、と。あとは実体参照はエディターのマクロの勉強も兼ねて作ってみようかな、と思いました。

ちなみに実体参照はみなさんやっぱり手作業なのですね・・・そう考えるとMTのPlug-inであっていいような・・・はてなの記法が優れているということもわかって勉強になりました。

ちなみに昔から気になっているのはブログじゃないのですが、Yahoo! Developers Networkのコードの記述方法。

↑ なんだか高機能。

普通のソースコードにあわせて「view plain」「print」「copy to clipboard」などがあってとっても使い勝手が良いのです。クリップボードへのコピーはIEのみ対応なのでFirefoxでは表示されないという念の入れよう。

↑ 拡大してみる。

しかもソースコードの関数を見てちゃんと色分けもしている模様。ここらへんはJavascriptで実現しているようですね・・・。

こちらのソースは、以下のようになっていますね。preとtextareaのあわせ技です。

<pre><textarea name="code" class="JScript" cols="60" rows="1">
// Creates a namespace for "myproduct1"
YAHOO.namespace ("myproduct1");
YAHOO.myproduct1.Class1 = function(info) {
alert(info);
};
// Creates a namespace for "myproduct2", and for "mysubproject1"
YAHOO.namespace ("myproduct2.mysubproject1");
YAHOO.myproduct2.mysubproject1.Class1 = function(info) {
alert(info);
};
</textarea></pre>

しかしソースはこれですが、なんだかJavascriptでごりごりしてすごい具合にレンダリングしている模様（調べたけど頭が混乱したｗ。あきやんに聞いてちょっとわかったけど）。

ソースは見やすいのも大事ですが、コピペしたり、印刷したりするのも大事ですよね。ちょっと手がこんでいますが、Yahoo!のやりかたはいいかな、と思いました。こういうのライブラリ化するといいかもですね、Yahoo!にあるかもしれないけど。

というわけで続報でした・・・。

37signals、Techcrunch、Metafilter、Problogger、GigaOM、JoelOnSoftware・・・。

Web2.0系（何のことやら）を代表するこれらのサイトや企業に共通しているのは、「最近Job Boardを立ち上げた」という事実です。

Job Boardとはいわゆる「有名ブログが提供する求人情報の掲示板」。

最初にはじめたのは37signalsのブログ、Signal vs. Noise。「最近知り合いの企業から『いい人いない？』とよく聞かれるので立ち上げてみた」というのがはじまりらしいです。同社のポリシーどおり、すっきりシンプルで、かつ、最初から有料、というのが特徴になります。

↑ すべてはここからはじまった。37signalsってやっぱりすごい。

これが立ち上がった当初は、「こういうの待ってました！」という声から、「こんなの効果あるの？」「ただ金儲けしたいだけでしょ？」といった批判までさまざまでした。

それでも辛抱強く37signalsの面々が「これはいいことなんだ！」と訴え続け、今では他のサイトもそれに追従しているカタチです。

次にはじめたのはご存知Techcrunchで、基本的には37signalsのJob Boardにインスパイアされまくりです。その後も上述のサイトが続き、昨日はJoelOnSoftwareの中の人がJob Boardを立ち上げました。

URLや料金をまとめると以下のような感じです。

Job Boardはいまだに賛否両論ですが、その効果についてTechCrunchは開始一週間後、次のように述べています。

サイトに掲載された求人件数は73で、ほぼ毎日10件ペース。大企業からもスタートアップからも利用されている。

まだまだ発展途上だとは思いますが、個人的に思うところは以下のとおり。

■ Job Boardのいいところ

• 有名ブログの読者という、絞り込まれたターゲットにリーチできる。
• Job Boardをホストしているブログなりとの関係性をアピールできてブランディングに役立つ。
• $200/30daysとベンチャー企業にとっては比較的払いやすい値段（絶対額が、という意味です。ROIについては後述）。
• こういう新しい試みにのってくる、という姿勢自体をブログの読者にアピールできる（かな？）
• ブロガーが新しいRevenue Sourceを手に入れることができる。

ただ、もちろん利点だけじゃないわけで。

■ Job Boardが微妙なところ

• はじまったばかりで効果がどれほど高いか微妙。うわさによると「申し込み数は少ない。だけど来る人はいい人が多い」という感じらしいっす。
• 本当に読者にとって益するのかが微妙。逆に「ただ儲けてるだけじゃないの？」とブログのブランドをさげてしまうのでは？という懸念もあります。

以上、他にも論点があるかと思いますが、個人的にはなかなかいい動きだな、と思っています。（自分も含め）ブロガーが「ブログやっててよかった！」と思えるようなモデルはもっと出てくるといいですよね。

■ いきなり新サービス！

という流れを踏まえ、（突然ですが）実は前回の開発合宿で作ってました。「100SHIKI JOB BOARD」です。

» テクノロジーとアイディアが好きな人のための求人情報

まだまだ模索中ですが、知り合い企業を中心にのんびり更新しようかな、と。

まだ（自分の中で）未完成なので今のところ無料で掲載中です。社長が僕の知り合いの企業の方はよろしければご連絡くださいな。

のんびり更新しますが、更新が面倒になった時点で有料化します（多分・・・でも有料化の方が面倒、という話もある）。

なお、個人的にJob Boardで一番微妙だな、と思っているのは「本当に読者にとって益するの？」という点。したがいまして「100SHIKI JOB BOARD」では以下の点を工夫しているつもりです。

• 社長に直接書いてもらっている（事務的な募集というよりは思いを伝えてくださいな！）
• 百式管理人のコメントを入れている（僕がおすすめする点を超個人的な観点からｗ）
• 原稿をもらった時点で僕がちょこちょこ手を入れて読者に親しみを感じてもらえるようにしています（ここらへんの工夫はあとでまとめたい）。

それから、今回ご協力いただいたデータセクション株式会社、ウノウ株式会社、コントロールプラス株式会社の皆様方、ありがとうございました！

Job Board、他のブログでも流行るといいですね。「ネタフル Job Board」とか「GIGAZINE Job Board」とかアリだと思いますけどね。

そういう意味では最初に無料にしちゃったのはまずかったかな・・・まぁ、おいおい考えていきましょう。まだ効果や読者の反応もわからないことですし。

ここらへんについてはまたレポートしますね・・・。

さて予想を超えて申し込み数が増えていてちょっとうれしい悲鳴な感じの「ブログマーケティング勉強会議」ですが、本日午後2時をもっていったん申込みを締め切ります。

すでに定員を超えているので追加募集はありません、申し訳なし・・・。

なお、コメント欄に参加表明されている方もいらっしゃいますね・・・こちらの書き方がまずかったので、こちらもお申込み分としてカウントさせていただきます（いろいろ勉強になりますね）。

参加の当確メールは14:30ごろを予定しております。もうしばらくお待ちくださいませ。

昨日BRAUNと打ち合わせしてきましたが、いろいろ見せてもらえるようで楽しみですよ。楽しく交流しときましょう。

» ブログマーケティング勉強会議、お申込みはこちら！（ブロガーさんのみとなります）

今回もちょっと技術寄りなので興味のない方はスルーの方向で。

—

昨日のJavascriptの記事を書いていて思ったのですが、みなさんコードをブログに貼り付けるときってどうしているんですかね。ちょっと気になったので調べてみました。

まずは実例。自分がよく読むところでいくと・・・。

(1) id:naoyaさんの場合

で、コードをみると<pre>で囲ってあって、「>」みたいなやつは実態参照してあって、preのスタイル指定でフォントをCourier Newにしている模様。これは等幅つうことですな。

(2) miyagawaさんの場合

こちらは見た目的にはtextareaっぽくなっていますね。スタイルは<pre class=”hatena-super-pre”>とのこと。ちょっとCSSを覗いてみると”overflow:scroll”で制御しているようですね。なるほど、つか、overflowって知らんかった・・・（汗）。フォントは同様にCourier Newですね。

(3) いやなブログさんの場合

こちらは見た目はmiyagawaさんのに似ていますが、縦スクロールが必要な場合が多いですね。2行のコードだとちょっと見づらい感じ（IEの場合）。ちょっとスタイルシートを覗いてみると”overflow:auto”の点がmiyagawaさんと違う模様。あと”white-space:pre”という記述も発見。空白の扱い方ですが、これも指定しておくとよさげですね。

(4) 最速インターフェース研究会さんの場合

こちらも<pre class=”code”>で制御している模様。”overflow:scroll”の指定あり。

(5) hail2u.netさんの場合

こちらは<pre>と<code>で囲んでありますね・・・。

さて、以上からちょっと考えてみます。まず「なぜコードを貼るか」の目的から。読者のことを考えるときっと(1) 読んで理解してもらう、(2) コピペして使ってもらう、の二通りでしょう。その目的を踏まえたうえで以下を考えてみます。

■ 絶対やったほうが良さげなもの

これはやっといた方がいいかも、をあげてみます。

• コードはやっぱり等幅フォントじゃないと。Courier Newが良さそう。
• “white-space:pre”もなんか指定しておいた方が良さそう。
• コード内部の背景色はタイトルヘッダー部分の色と同色系だと良さそう。

■ ちょっと悩みどころなもの

いろいろな人のブログを見てちょっと悩んでいるところ。

(a) overflowの指定

overflowの指定はそもそもしないか、scrollか、autoの三通りですね。overflow指定なしもすっきりでいいかもしれませんが、横幅が長いコードを貼り付けると全体のレイアウトが崩れる可能性がありますよね・・・そうなるとoverflow指定しておいて、IEですっきり見えるscrollの方にしますかね・・・。

なお、コピペのやりやすさについてはどちらも同じようなものですね。overflow指定したらCTRL+Aでtextarea内だけ選択できるかと思ったら全然だめでした・・・orz。

(b) classの指定

<pre>自体にスタイルをつけるか、<pre class=”code”>にするか、<pre><code>にするか、はたまた<code>にするか・・・悩みどころですが、個人的には<pre class=”code”>がすっきりかな、と思うのでそうします。

ここはまぁ、読者のことを考えるとどうでもいいところなので（と言い切るのは横暴なような気もしますが）個人の好みで。

(c) 実体参照について

皆さんコードを貼り付けるときはきっと単にコピペしているだけだと思うのですが実体参照はどうしているんでしょうね・・・「>」とかきちんと打ち直しているのかな・・・それとも実体参照変換ツールを使っているのか・・・。

ひょっとしてMovabletypeが自動変換してくれる？と思って実験してみましたがうまくやってくれない・・・。とりあえず変換ツールを使うことにしましょう。

以上、ちょっと調べてここまで書いてみましたが、なんだかとっても初心者ちっくなことを書いているようでなんだか恥ずかしい気がしないでもないですね・・・うーむ、今度αギークな面々にあったときに聞いてみよ。

というわけで完成系。idea*ideaにスタイルシート仕込んでみました。check*padのコードの一部を貼り付けてみました。

function ms_add (ttl, pjt_id) {
if (ttl != '') {
$('ms_name').value = '';
var dif = document.body.offsetHeight;
var url = 'index.php';
var pars = 'mode=ms&act=add&ajax=1&pjt_id='+pjt_id+'&ttl='+encodeURIComponent(ttl);
new Ajax.Updater ('ms_box_notyet', url, { method: 'post', parameters: pars, onComplete: function() { new Effect.Highlight('ms_notyet_' + $('new_id_value').innerHTML); window.scrollBy(0,document.body.offsetHeight-dif); $('ms_name').focus();} });
} else {
return false;
}
}

ど、どうっすかね？みなさんの方法も教えてくれるとうれしかったり・・・ごにょごにょ。

しかしこれでコード貼り付けるのが楽になりました・・・めざせ技術者！ｗ

さて昨日お知らせしたブログマーケティング勉強会議、正午から下記サイトにてお申込みを受け付けます。

今回は抽選となりますのでご了承ください。なお当選結果は明日の午後2時までにお知らせします。そのぐらいのスピード感で。明日にまだ定員が埋まっていなかったら追加募集します。

今回はブロガーさん応援企画ですのでまずはブロガーさんからお申込み開始です。定員が埋まらなかったらブロガー以外の方も募集させてください。

今回は趣向を変えて勉強会ちっくですが、基本楽しく交流できればと思いますのでよろしければ是非どうぞ。ブレストって楽しいですよね。

» ブログマーケティング勉強会議お申込みへ

マニアックネタなので興味ない方はスルーの方向で。

—

調べ物をしていたのですが、サイボウズ・ラボの秋元さんとちょうどシンクロしたので衝動的にエントリー。

調べていたのはTicker。RSSをバナー的に表示するJavascriptないかなぁ、と探していたのです。秋元さんの方では「SEO対応Javascriptニュースティッカー」が紹介されていますが、僕が見つけたのは「aScroller」というもの。

» aScroller

秋元さんの記事にあるようにHTML内に本文を入れられるのでSEO的にも良いし、スクロールの方向、速度なども設定可能です。設置方法は紹介ページのソースを見ると良いでしょう。簡単です。

これに表示させるテキストをRSSからひっぱってきてPHPで動的に生成すればなんだかよさげなものが作れそう。ちなみにRSSをひっぱってくるのはlastRSSが良さそうです。キャッシュしてくれるし。文字コードも問題なさそうです。

» lastRSS.php – PHP Parser/Reader

最近は「究極までシンプルに！」を信条にしているのであまり新しい技術を学んでいないですね・・・いけません。何事もバランス。こういう技術は日々勉強していきたいですね。

さてイベントのお誘いです。今回はちょっと勉強会ちっくに。直球のタイトルですが。今回の経験も踏まえて、企業とブロガーが対話する場をどんどん作っていきたいと思う今日この頃です。

さて詳細は以下。

『ブログマーケティング勉強会議』へのお誘い

企業のマーケティングが変化しつつあります。多様化するメディア、進化するテクノロジー、そして賢くなる消費者。こうした中で企業はネットをどう使っていくべきでしょうか。

一つの手法としてブログを使ったマーケティングが浸透しつつあります。百式でもアカデメディアや、ブロガー応援企画としていくつかの企画を行ってきました。今後こうした手法はどのように変化していくのでしょうか。また従来のマスメディアとはどのように連携していくべきでしょうか。

今回の勉強会議ではマスメディアで強固なブランドを築いてきた電気シェーバーブランドのBRAUN（BRAUNモーニングレポートは有名ですね）をスポンサーに迎え、勉強会「議」を開くことにしました。

同社がマスメディアで培ったノウハウをブログに活かすには、そして企業がこれからのメディアと付き合っていくにはどうしたらいいでしょうか。オープンに議論する場所を設けることにしました。

今回は実験的に少人数でじっくり話ができるスタイルをとりたいと思います。30名+程度のイベントとなりますのでご了承ください。またブロガー優先にてご案内させてください（情報発信を応援する立場ですのでご了承ください・・・）。

ブログマーケティングはまだまだ始まったばかりです。そこで試行錯誤する企業と実際に対話をすることによってより良い企業とメディア、生活者の関係を模索してみませんか。よろしければ是非どうぞ。

■ プログラム

第一部 ブログマーケティング最前線

昨今よく聞くブログマーケティングにはどういったものがあるでしょうか。また海外ではどういったマーケティング手法が展開されているでしょうか。百式管理人自身の経験も踏まえ、現在の課題とその対策をまとめてみます。

第二部 BRAUNの試行錯誤から何が学べるか？

今回ご協力いただくBRAUNは「BRAUNモーニングレポート」などマスメディアを通じて強固なブランドを築いてきました。そこにはどのような試行錯誤があったのでしょうか。またそこからブログメディアが学べることは何でしょうか。具体的なケーススタディを通じて「メディアと企業の付き合い方」の勘所を学びましょう。

第三部 全体会議

ネットを通じて企業、消費者、メディアが協力的な対話を続けていくにはどうしたらいいでしょうか。現在のトレンド、テクノロジーを抑えつつ、みなさんで楽しく議論しましょう。恒例の全体会議は全員参加のアイディアセッションです。

■ 実施要綱

日付: 2006/09/15 (金) 19:30-22:00 (19:15開場)
場所: 新宿（詳細は明日お知らせします）
費用: 無料
定員: 限定30名(抽選)
協力: BRAUN
備考: 全員参加の会議を行います。筆記用具をお持ちください。

■ お申込み

お申込みは明日（9月6日）の正午より行います。今回少人数ですので先着順ではなくて24時間後に抽選とさせてください。詳しくは明日。

※ 注意事項

イベント会議中に出たアイデアは参加者全員に公開されますのでご了承ください。また、参加者が投稿アイデアやイベント内容をブログで公開することもあります。百式管理人およびBRAUNはイベント中に出たアイデアを自由に使用する権利を有します。

以上、よろしければ是非どうぞ。みなさんで楽しく交流しましょう。

先日写真をポラロイド風にするツールが話題になりました（↓ね）。

これはこれで楽しいですが、もっと写真で遊びたい！という人にはfd’s Flickr Toysがおすすめ。Flickrと親和性が高いツール群が（ローカルPCからの写真アップロードにも一部対応）いろいろあります。

例えば・・・写真を切手風にしてくれたり、

漫画風の吹き出しをつけてくれたり、

自己紹介用のバッジをつくってくれたり、

一枚の写真を複数のポラロイド写真に写しこんでみたり、

トレーディングカード風にしてみたり。

他にも雑誌の表紙風にしてくれたり、映画のポスター風にしてくれたり、なかなか楽しげですよ。ちょっと変わったものを作りたいときに是非どうぞ。

おまけ。昨年の忘年会議でポスター作ってみたｗ。こんな感じのがつくれます。

いつも革新的なプログラムを提供している（と個人的に思っている）BBCが「Get Smarter in a Week」というプログラムを実施したようですね。ちょっと前だけど。

» Get Smarter in a Week

そのプログラムによると、100名が被験者になり、ある一週間のすごし方をして頭が良くなるかどうか、という実験をしたそうです。詳しくは公式サイトをご覧になると良いのですが、おおむね結果は良好だったようです。

BBCが実施した週間のプログラムは次のとおり。

【土曜日】

利き手ではないほうの手で歯を磨く。目を閉じてシャワーを浴びる。

【日曜日】

クロスワードや数独などを解く。散歩に出かける。

【月曜日】

夕食にオイル漬けの魚をいただく。自転車か徒歩かバスで仕事に出かける。

【火曜日】

辞書から普段使い慣れない言葉を選び、会話の中で使うようにする。

【水曜日】

ヨガかピラティスに行き、話したことのない人に話しかける。

【木曜日】

いつもと違ったルートで通勤する。クイズ番組を見る。

【金曜日】

カフェインとお酒を控える。買い物リストを暗記する。

※ もちょっと詳しくはこちらへ。

つまるところ、普段やらないことをやって脳を刺激しましょう、という話ではあります。

ただ、実験によるとたった一週間で自覚できるほどの成果がでたとのこと。まぁ、そんなの当たり前だよ、と言わずにちょっとやってみるといいかもですね。しかし、金曜日にお酒を控えるのはきびしそうだなぁｗ。

もちょっとコンパクトにこの実験について知りたい人は↓をどうぞ。

» Simple ways to make yourself far cleverer

企業がブログを立ち上げて生活者と対話する。そうしたビジネスブログは個人的に応援したいところです。

ただ、最近さらにその一歩上を行く企業が現れたようです。

その企業とはAdobe社。やっていることがイケてます。

なんと企業でオフィシャルのブックマークを作って公開しているのです。ビジネスブログならぬビジネスブックマークです。

このブックマークではデザインやユーザビリティなどに関する、使えそうな記事を多数紹介しています。

» Adobe社のブックマーク

ブログ界隈でのバズはソーシャルブックマークから始まることが最近は多くなっています。

そう考えると「まずはソーシャルブックマークにネタを提供して貢献」という姿勢はとても正しいように思えます。

少なくとも「ソーシャルブックマークに登録してね！」とブックマークアイコンをつけて、いきなりモノを頼むよりは数段好感度が高いのではないでしょうか。

世の中、「Give and Take」が正しい順番です。「Take and Give」では誰も見向きもしないのです。

Adobe社のブックマークが「使える！」となれば、そこに同社製品のプレスリリースが入っていても素直に読もうと思うのではないでしょうかね。

日本でもこういう企業が出てくるとおもしろいかもですね。「Biz.ID編集部のオフィシャルブックマーク」とか提案してみようかな。