« 2010年6月 | トップページ | 2010年8月 »

2010年7月

2010年7月23日 (金曜日)

ブログの人気記事を「手動」で(でもちょっとだけ楽して)貼り付ける

 自分のブログの人気記事のリストをサイドバーなんかに貼り付けてる人が多いみたいですが、これ、確かにはじめて訪れる人にそのブログのネタの傾向とか書いてる人の人となりを伝えるには有効な手段かと思われます。これを実現するのに手っ取り早いのが、ブログパーツの使用。「はてな」をはじめいろんなところが配布してますよね(まあ、多くはブログパーツ提供元の被リンク獲得のためだったりするんですけども)。

 ただ、気になるのは、出来合いのブログパーツだとまさに「人気記事」(人気エントリー)しか拾ってくれないという点。

  • あの記事はリストアップしてほしくないんだよね
  • 推したい記事はこれなんだけどなあ
  • 埋もれてる記事も見てほしい

 なんて要望もあるかと思われます。そうなると勢い手動でHTMLコードをゴリゴリ書いたりするしかなくなったりするんですが、パソコンを使ってるんだから多少は自動化したいというのが本音でしょう。というわけでこんな方法はいかがでしょう? 人気記事を載せたいけど、使用してるブログサービスがJavaScriptの使用が禁止されてる、テンプレートの編集ができないのでブログパーツが使用できない、なんて方もどうぞ。

 使うのは以下の2つのサービス。

  1. はてなブックマーク - このサイトの人気エントリー
  2. linclip - リンクを抽出

 1の「はてなブックマーク - このサイトの人気エントリー」は「URLで絞り込み」とある欄に自分のブログのURLを入れれば、人気記事を抽出できるというサービス。当ブログのURLを入れるとこんな感じになります。→「pointofviewpoint.air-nifty.com の人気エントリー - はてなブックマーク」

Entrylist1_3

 「人気」というにははてブ登録者数が少ないですが、これは当方が弱小ブログなためしょうがないとして。

 人気を計る尺度として「はてなブックマーク」はそれなりに有効。これを活用するというわけ。まあ、はてブの開始前に人気を博した記事なんかは登録されてなかったりすることもあるんですが、そのへんは人によるでしょう。

 「このサイトの人気エントリー」から記事を取捨選択し、記事へリンクするためのHTMLコードを吐き出すのが、「linclip」。先のURLを、linclipのURL欄に入力すると表示されるのが、「linclip ページからリンクを抽出 - pointofviewpoint.air-nifty.com の人気エントリー - はてなブックマーク」

Entrylist2_3

 紹介したい記事だけチェックボックスをクリックして、「リンク用HTMLコード生成」。この結果をブログに貼り付けることになります。

 たとえば、こんな感じ。

 出力形式には「liタグで囲む」を選択。出力されたコードの前後にulタグを補っています。面倒なら「標準」でもかまいません。また、この結果では、ブログ名が冒頭に付いているのが邪魔ですが、不要ならテキストエディタとかで全置換などで対処しときます(現在のタイトルとは違ったりしてます。はてブに最初に登録された時点のタイトルが残るため、その後変更されてもそのまま残っているんですね)。

 ここまで来ると、はてブ登録ユーザー数も表示したいとなるかもしれません。その際は、「はてブ登録数:あり」を選択(今回、新たに追加された機能です)。

Entrylist3_3

 これで出力するとこうなります。

 こんなんでいかがでしょう? エントリー本文に入れるなり、サイドバーにつっこむなりご自由にどうぞ。

(追記8月9日)
 はてブ登録ユーザー数へのリンクのコードが間違っていたので修正しました。linclipの生成コードも修正しました。

| | コメント (0) | トラックバック (0)

2010年7月22日 (木曜日)

ZiiSound D5モニター当選者の声

 前回、自分のレビュー第1弾を掲載したんですが、ほかの「Pure Wireless スピーカー "ZiiSound D5" モニターキャンペーン!」当選者をググってみました。

続きを読む "ZiiSound D5モニター当選者の声"

| | コメント (0) | トラックバック (0)

2010年7月21日 (水曜日)

iPodがリモコンになる! ブルートゥース対応スピーカー「ZiiSound D5」その1

 クリエイティブメディアのBluetooth対応スピーカー「ZiiSound D5」が非常に便利&快適だったという話。

Main

 iPodを手元で操作、離れたところにあるスピーカーで高音質&リラックスして音楽が楽しめる。それだけ聞くとほかにも似たような製品はあるが、細かいところでありそうでなかったスピーカー、それが「ZiiSound D5」なのだ(リンク先はメーカーサイト)。ポイントは付属のBluetoothアダプターにある。

 「ZiiSound D5」の存在を知ったのは5月。モニターキャンペーンがあると知り、応募したところ幸いにも当選(キャンペーン名はクリエイティブメディア社 「Pure Wireless スピーカー "ZiiSound D5" モニターキャンペーン!」)。当選のお知らせ後、すぐに、製品がやってきた。

 届いて、まず驚いたのはパッケージのコンパクトさ。これなら家電店で購入しても電車で余裕で持ち帰ることができる。で、本体もこれまたコンパクト。とくに奥行きが短い。奥行き浅めの本棚にもぴったり収まる。

Package

 スピーカー本体とiPodとの接続は付属のBluetoothアダプター(以下、BTアダプター)。いや、ワイヤレスなので、接続はしないのか。iPodにBTアダプターを装着。スピーカーとiPodの電源をON。iPodの再生を始めればスピーカーが鳴る。カンタン。BTアダプターは非常に小さく、着脱は楽。電源はiPod本体から供給される。「機械が苦手」という人もきっと大丈夫だ。

 Bluetooth製品では接続する機器同士のペアリングという操作が必要なるのが普通だが、スピーカーZiiSoundと付属のBTアダプターはすでに済んでいる状態。面倒はない(本体&アダプター操作によるペアリングも可能)。

 音量調整はスピーカー上部にあるタッチパッドで行う。クリック感のまったくない、まさに触るだけでインジケーターが上下する不思議な感覚。この音量でとめたい!っていうのにはちょっと慣れが必要だ。とはいえ、本体のボリューム調整を行うことは、iPodを利用する分には不要。iPodの音量調整とスピーカーの音量連動してくれるからだ。

Meter

 iPodを触っているのだけれど、音は離れたところにあるスピーカーから、迫力と広がりのあるサウンドで聴ける。iPodをメインにしてからヘッドフォンで聴く機会が多くなった身としては新鮮な感じがするのも事実。そして、そのサウンドはけっこういい! コンパクトながらもわりと充実した低音を出してくれるし、小さな音の輪郭も意外とはっきりわかる。

 これまで、iPodサウンドをスピーカーでリラックスして聴きたいという場合はステレオミニケーブル経由でAVアンプにつないでいたのだが、この使い方、まず接続が面倒。でもって、AVアンプの音量はAVアンプのリモコンで、曲の選択などiPodの操作も必要。似たような小型デバイスを両手に持ったりしてるのはなんか間抜けだなあと思っていた。しかし、ZiiSound D5+iPodなら、操作するのはiPodだけでいい。ワイヤレスってこんなに便利なのかあ! と素直に思った。

 iPodドック搭載のステレオシステムは多く存在しており、私自身も何種類か触ったことがあるのだけど、リモコンが別に用意されるというのははっきりいって違和感があった。離れたところからiPodをリモコンで操作するのははっきりいってダイレクト感に欠ける。iPodのホイールならさくさく操作できるのが、リモコンのボタンだと何度も押す必要があったり、反応がにぶかったり。でも、ZiiSound D5なら、iPodそのものを「手元で」操作できるのだ。

 また、iPodをリモコンのように使える、というワイヤレス&iPod対応スピーカーという構成の商品もいくつかチェックしたのだけど、iPodに取り付けるトランスミッター部が大きかったり、別途充電が必要だったりとスマートさに欠ける。このへんもZiiSound D5のアドバンテージに感じられた。

 ZiiDound D5のスペックを知ったときには、「どうしてこういうのがこれまで出てなかったんだろう! 待ち望んでいたのはこれだったんだよ!」なんて思ったものだが、実際に触ってみて、その期待が間違いでなかったことを実感。けっこうハイテクなガジェットながら、とっても手軽に音楽が楽しめ、リビングルームでも主張しすぎないデザインということもあってインテリアとしてもなかなか満足できる、そんなナイスなスピーカー。家を訪ねてきた友人にめいっぱい自慢をしたりしたんだけど、そのへんも含めて、続きます。

| | コメント (0) | トラックバック (1)

DCPRG活動再開!!

 さすがにこんなことがありうるとは思っても見なかった。デートコースペンタゴンロイヤルガーデン復活。詳しくはいつもの「PELISSE 菊地日記 閲覧ページ」にて。

 ライブは10月19日日比谷野外音楽堂ですって。ああ、楽しみ。まあ、チケットが取れるかどうか自信がないけれども。

 「菊地成孔00年代全集USB<闘争のエチカ>/10年間の全音源、全画像、全動画」ってのも気になるけど、やっぱりDCPRGの「ライブ」!

| | コメント (0) | トラックバック (0)

2010年7月20日 (火曜日)

WebアプリをiPhone対応にするためにやった8項目

 iPhoneはURLのコピペがめんどくさい。

 ということで、はてブやニュースまとめに使えるWebアプリというかWebサービス「linclip」を作る際には、iPhoneでもしっかり使えるようにしたい、というのが目標としてあった。

 ページからリンクを抽出してHTMLコードまで出力すれば、タイトルの選択とかURLのコピーとかそのへんが自動化できるので、iPhoneならではの面倒さがなくなるはずという考えからだ。

 iPhone対応のために行ったことをここでまとめておく。たぶん、すぐ忘れるから。で、こんな感じ。

  • Safariによる動作確認
  • 表示幅の設定(viewport)
  • iPhoneエミュレーターによる動作確認
  • ドメインの取得
  • チェックボックスの周りに空間を
  • リンクを誤ってクリックしないように空きを作る
  • 無駄な空間を削除
  • Webクリップブックマークアイコンを作る

 以下、詳細。

Safariによる動作確認

 iPhoneのiOSのブラウザはSafari。まずはWindows版のSafariで動作確認すればいい線までいくはず。今回、UIまわりに使用したJavaScriptライブラリのjQueryはクロスプラットフォーム環境も考慮してあるので、わりと楽。一部、おかしな動作があった(選択してない記事がHTMLコードに出力される)というのもあったけど、IE専用として作ってあったコードをSafariでも使ったら問題なくなった。よく見るとFirefoxだけが違う挙動になっていたことがわかった(というか、最初はFirefox+firebugで確認しながら作ってました)。 
 このほか、テキストボックスにフォーカスが移ったときに全選択する動作がSafariだけうまくいかなかったので、「Safari / Chrome でテキストエリアをフォーカス時にテキストを全選択する – 情報と音楽」を参考に修正。

表示幅の設定(viewport)

 iPhoneでは自動的に縮小表示されるのが初期状態。で、その縮小率はmetaタグで指定が可能と知る。文字中心のサイトなので、文字が見えないと話にならないので、まずはそれがOKになる範囲で。iPhoneは縦方向が長くなってもスクロールはさほど面倒ではないので、横方向のスクロールが不要になるように。実際のiPhoneで大きさを確認して決定。

 <meta name="viewport" content="width=480" />

 とかそんな書き方でheadに挿入。

iPhoneエミュレーターによる動作確認

 動作に関しては、エミュレーターでも確認。iBBDemoというアプリケーションを使用。Windows版のSafariがインストールされていないと動作しない。まあ、動作についてはSafariでOKならOKということになるんだけど、しっかりiPhoneと同じサイズで表示された状態でも確認。Windowsでもエミュレーターが使えるのはすごく楽。

 「iPhoneブラウザの表示をシミュレートする -iBBDemo | コリス」
 iBBDemo – Blackbaud iPhone Browser Simulator

 現在のバージョンでは、起動時はiPadモードで動作するので、「?」となったんだけど、Ctrl+2キーでiPhoneモードに。またCtrl+カーソルキー左右で横倒しなども可能。「_blank」で新規ウィンドウを開くと別ウィンドウになってしまうとか、ブックマークの動作が確認できないとか、そのへんは実機で試すしかないんだけども。

ドメインの取得

 linclipの動作を確認するには、まず、linclipのサイトに行かなくてはならない。ブックマークレットの登録もまずはそこからだ。で、iPhoneでURLを開くには直接文字入力することになるのだけど、慣れてないと、ちょっと長いURLを入力するだけでもひと苦労。ドメインは短いほうがいいだろう。さらにホスト名もいらないだろう。ということで「linclip.com」だけにする。「www.」なんてのは不要。

チェックボックスの周りに空間を

 エミュレーターでのテストではまったく気づかないのが、iPhoneは指で操作するため、細かい選択がむずかしいということ。formのチェックボックスを押すのがひどく面倒。ねらいが定まらない。その隣にリンクがあったりすると、誤ってそっちをクリックしてページ移動しちゃったりする。

 そんなわけで、チェックボックスのまわりに空間を作る。上下左右にリンクがない状態にするわけだ。指でクリックするのと、マウスカーソルを使うのではまったく違うということを思い知らされた。あと、ON/OFFをグラフィックで表示するjQuery用プラグインも考えたんだけど、デスクトップPC版とあまり違うのもどうかと思い保留。

リンクを誤ってクリックしないように空きを作る

 これも上記と同じ理由。テキストのみのリンクも空間が必要だ。目的のリンクの上下の行にリンクがあると、やっぱり間違って押す危険がある。行間を空けて対処。

 具体的には、ブラウザを判別してiPhoneおよびiPod touchのときのみ、専用のスタイルシート(CSS)でリンクまわりの部分を上書きするという手法。最初はjQueryでやってたんだけど、保守が面倒そうなので、途中で路線を変更した。

 ということで、チェックボックスと行間の変更結果の画面。まずはデスクトップPC用。
 Linclipiphone1

 で、iPhone用に調整した結果がこれ。
 Linclipiphone2

 iPhone用のRSSリーダーを参考に、borderも指定してみたり。

無駄な空間を削除

 上記のような対処を行うと、1画面に収まる文字数が極端に減る。そのため、デスクトップPC版にもともとあった空間を減らすことで対処する(CSSのpaddingやmarginなど)。見やすさと使い勝手を天秤にかけながら微調整。上の画面はすでにこの項目を施した状態。

Webクリップブックマークアイコンを作る

 faviconよりも大きなアイコンが使える、メニューに登録できる、ということなので、こちらを参考に。
 「iPod touch用Webclipアイコンの作り方 - builder by ZDNet Japan」

 iPhone 4やiPadなど高解像度モデルにも対処できるよう大きめで作成。このへんの参考サイトは失念。

続きを読む "WebアプリをiPhone対応にするためにやった8項目"

| | コメント (0) | トラックバック (0)

2010年7月18日 (日曜日)

1000人ウクレレ at Aloha Yokohama 2010

 「1000人ウクレレ」というイベントに参加してきた。「Aloha Yokohama 2010」というイベント内のイベント。昨年、横浜に引っ越してから知ったんだけど、けっこう長いこと続いているようで。昨年行ったときにはすでに終わっていたので残念に思ったんだけど、今回は日時を調べてちゃんとウクレレ持って行ってみた。

 感想。

 1000人なんていないじゃん!

 1000人入るスペースではあるけど、ウクレレ持ってきてる人は100人くらいかなあ。観客はまあ数百人いたからそんなウソというわけでもないか。

 すんごい待たされたけど、演奏そのものはおもしろかった。簡単な曲だったというのもあるけど、先生役(?)のVance Kという人のだじゃれというかハワイアンジョークというか、トークが意外と笑えた。あと、キカイダーのテーマソングをAmから導き出す、なんてのも。ハワイでは30代以上ならキカイダーをみんな知ってるそうだ。うわさには聞いてたけどほんとにそうなんだなあ。うわさというか、なんかの雑誌で読んだんだったか。TV Brosだっけ?

 それから、会場ではKONISHIKI改め小錦八十吉さんを発見。すんごいやせたなあ、というのが第一印象。奥様といっしょにどっかのブースで。以前見たのは、奥様と結婚前だったので、もうだいぶ前ですが、その変わりようといったらもう。で、小錦さんはやせてはいるけど、歩くのがつらそうでした。「やせたおかげで座ってライブができるようになった」というインタビューを読んだんですが、思ったよりもまだ足への負担が大きいのでは?と思わせる感じ。まあ、見た目の印象なので、本人はなんでもないかもしれませんが。

続きを読む "1000人ウクレレ at Aloha Yokohama 2010"

| | コメント (0) | トラックバック (0)

2010年7月 8日 (木曜日)

はてブに登録した記事をブログでカンタンに紹介する - linclip使い方

 はてなブックマーク(はてブ)やニュースのまとめにも使えるWebサービス、「linclip」はページからリンクを抽出、選択して、HTMLコードを出力します。今回ははてなブックマークユーザーのスタンダードな使い方を紹介。

 前回記事でいうとこの部分。


  • はてなブックマークに登録した記事をブログに掲載したい
     →はてなID入力でカンタンに記事の抽出が可能
     →「ID/タグ」で、任意のタグを抽出

基本的な使い方

 まずは、「linclip」を開きます。

Linclipmain_3

 続いて、「はてなID」にあなたのIDを入力。

Hatena01

 たとえば、はてなのえらい人のIDを入力するとこんな感じ。 「linclip ページからリンクを抽出 - はてなブックマーク - jkondoのブックマーク」

 はてブに登録したエントリがリストアップされます。ここで、チェックボックスをONにしたエントリのみが出力されることになります。

Hatena02

 リストの上にある「キーワードでしぼりこみ」欄でしぼりこみができます。

Hatena03

 この欄に入力すれば、キーワードを含むエントリがピンクにハイライトされ、リストの最上段に移動されます。これで、しぼりこみ-取捨選択がやりやすくなるはず。

Hatena04


 チェックボックスの状態は変わらないので、しぼりこみを何度か繰り返してもOK。「A|B」で「AまたはB」を含むエントリをしぼりこむことも可能です。

 エントリの選択が終わればあとはブログ投稿時に貼り付けるHTMLコードの出力です。

Hatena05

 このとき、出力形式などを選ぶことで、ご使用のブログに合った形式でコードが出力されます。brタグや改行の有無のほか、リスト出力のためのliタグでの出力、BBSなどに適したテキストでの出力も設定可能です。

「リンク用HTMLコード生成」ボタンをクリック。ボタン下にコードが表示されるので、これをコピペして完了です。

Hatena06


さらに便利に

 はてなID入力欄は「ID/tags」の形式で入力することで、タグによるしぼりこみも可能です。

 先の例同様、かの有名な人のIDにタグ「自転車」を指定する場合は、「jkondo/自転車」とID欄に入力すると、こんなページになります。

 「linclip ページからリンクを抽出 - はてなブックマーク - jkondoのブックマーク - 自転車」

 これら以外のページから抽出したい場合は、URLを直接入力してください。URL入力が面倒という方はブックマークレットの使用がオススメです。

 「linclip」にある説明や前回記事「はてブ やニュースまとめにも! ページからリンクを抽出してコピペしたい linclip」も参照ください。

| | コメント (0) | トラックバック (0)

2010年7月 7日 (水曜日)

はてブ やニュースまとめにも! ページからリンクを抽出してコピペしたい linclip

 はてなブックマーク(はてブ)やニュースのまとめにも便利なWebサービス。ページからリンクを抽出、選択して、HTMLコードを出力します。

 linclip

Linclipmain_3

 記事の引用やクリッピング、まとめ作成などに使えます。「(はてブで)ページからリンクを抽出してコピペしたい」の汎用&ブラッシュアップ版です。

こんなときに

  • はてなブックマークに登録した記事をブログに掲載したい
     →はてなID入力でカンタンに記事の抽出が可能
     →「ID/タグ」で、任意のタグを抽出
  • 気になるニュースを引用したい
     →サンプルとしてGoogleニュースのリストを用意
     →ブログのネタ探しにも便利
  • いろんなページからリンクを抽出したい
     →URL入力であらゆるページからリンクを抽出
     →ブログの本文だけを対象に抽出することも可能
  • ページのURL入力が面倒なんだけど……
     →ブックマークレットで一発!
  • iPhoneでも使いたいんだけど……
     →専用レイアウトで小さい画面でも使用可能(たぶん)

使用前

 ブログにエントリーを投稿する際によくあるのがこんなパターン。

  1. 書きたいことがらについて、Googleなどで調べもの
  2. 役立ちそうなURLは「はてなブックマーク」(はてブ)に登録(1に戻り調べもの続行)
  3. 調べた結果をまとめる際に引用したいページを再度「はてブ」のリンクから開く
  4. 開いたページからタイトルをコピー
  5. ブログ管理画面でコピーしたタイトルペースト
  6. 開いたページのURL欄からリンク用にURLをコピー
  7. ブログ管理画面でコピーしたURLペースト
  8. 3に戻る(リンクの数だけ繰り返す)

 上記2の作業は「はてブ」(と登録用ブックマークレットなど)のおかげで非常に楽に行える。調べものの最中はこの作業を繰り返すことになります。

 しかし、調べものが終わったあとの3~8の作業が非常に面倒。このへんを自動化したい。

使用後

  1. 書きたいことがらについて、Googleなどで調べもの
  2. 役立ちそうなURLは「はてなブックマーク」(はてブ)に登録(1に戻り調べもの続行)
  3. linclipで、はてなIDを入力
  4. リストアップされた記事から必要なものをチェックしてHMTLコード出力

 これだけ! 1、2は使用前と同じですが、その後が非常にラクになるはず。そして、ページを行ったり来たりする必要はなくなります。
 まずは、自分の はてなIDを入れてみてください!
 
 はてなブックマーク以外のページではIDの代わりにページのURLを入力することになります。

 記事の選択には「全選択」も用意。リストアップされた記事の中からしぼりこみたい場合にはキーワード指定もできます。「キーワードA|キーワードB」とすることで、OR(または)検索も可能。

最適化って?

 リンクの抽出の方法が選択できます。
 基本は自動。サンプルにあるはてなブックマーク、Googleニュースではサイト内リンクやナビゲーションの部分からは抽出しないようになっています。とくに、はてブでは個人のページだけでなく、キーワードやhotentry、新着、はてなブックマークニュースなどのページにも対応しています(URLを入力してください)。
 それでうまくいかない場合は最適化「なし」で、すべてのリンクが対象となります。
 また、「本文から抽出」にすれば、ブログなどの本文部分のみが対象となります。とはいえ、すべてのページに対応できるほど精密ではないので、α版(試作)扱いです。


その他

 Link + Clip = linclip。

 このほかの説明はlinclipの下のほうにいろいろ書いてあります。
 不明点はコメントいただければ対応できる場合があります。

 もとは、はてブに登録した記事の引用をカンタンにしたいということで始まったのですが、同じロジックでほかのページにも対応できることに気づき、汎用的に使えるよう機能を追加しました。
 以前作ったサイトを組みなおすときにエディタでコピペを繰り返すのは面倒、自動でリンクを抽出できれば作業がラクになるんだけどなあ、と思ったのも制作のきっかけとなっています。前回公開した際に「使える」との感想を一部から得たので、調子にのって新たにドメインを取得しました。

 iPhoneについては、所有していないので家電量販店の店頭で何度かテストしました。チェックボックスが選択できないことに愕然として、いろいろ対策。その後、Windowsで動くエミュレーターを見つけ、なんとか形になったと思われます。不具合があればコメントください。なんとかできればします。

 そんなこんなでよろしくお願いします。

続きを読む "はてブ やニュースまとめにも! ページからリンクを抽出してコピペしたい linclip"

| | コメント (0) | トラックバック (0)

2010年7月 6日 (火曜日)

小沢健二、新曲「シッカショ節」を投げ銭式リリース

 この間のツアーで初公開され、度肝を抜いた新曲がWebで公開。その名も投げ銭式リリース。

お好きな金額を下記口座のいずれかに振り込んでください。 二百円、三百円、五百円など、お好みで。
 だそうです。

 http://hihumiyo.net/s.html

 ソースはツアーメンバーの木暮晋也さんのTwitterから。
 田島貴男さんも書いてました。

小沢君がライブでやってたあの「シッカショ節」を投げ銭式でリリース。梅棹忠夫さんがむかし本に書いていたことが実現するのだろうか。興味深いなあ。http://bit.ly/cDrQbT
 今後はほかの新曲も披露してくれるんだろうか。楽しみなり。

| | コメント (0) | トラックバック (0)

« 2010年6月 | トップページ | 2010年8月 »