« 複数のチェックボックスをドラッグで選択 | トップページ | AmazonのPAAPIがStyleを処理しない »

2012年9月20日 (木曜日)

はてブした記事をコメント付きでブログに貼り付けられるサービス

 はてなブックマークに記録した記事をブログにカンタンに貼り付けられるサービス作りました。

 「はてなブックマークに気になる記事を登録したんだけど、これをコメント付きで自分のブログに掲載したい」という方へ。

 今日外出先でモバイル端末ではてブした記事をブログに残したい、調べた結果のまとめツールとして、なんて用途にも。

 まずはカンタンな説明から。

 8月16日にはてなブログにおいて、はてなブックマークに記録した(はてブした)記事へのリンクを投稿時に貼り付けられる機能がリリースされました。

 この機能、はてなブログの投稿画面に直近の「はてなブックマーク」のリストが出てきて、任意のブックマークを投稿記入欄に貼り付けられるというものです。当然ながら、はてなブログ以外のブログサービスでは使えません。汎用のものがあればなあ、と思った人はいるはず。

 ということで、ほかのブログサービスでも(それ以外でも)使えるサービスということで作ったのがここで紹介するウェブサービスです。

基本的な使い方

 まずは、自身のはてなブックマークのマイページを開いてみましょう(この作業自体はほんとは不要)。はてブのトップページ上のナビゲーションメニューにあるやつです。URLは、「http://b.hatena.ne.jp/ユーザー名/」となっているはずです。

Hateblinclip01_hateb

 上に挙げた例の画面では、GoogleとYahoo! JAPANがリストアップされてます。コメントが表示されているのも確認できるはずです。ここまでは、はてブの内容確認。実際に行うのは以下の作業です。

 続いて、以下のリンクから今回紹介のウェブサービス「linclip」を開きます。

 linclip - リンク抽出サービス

 開いたら、ページ上部の入力欄を見てください。

Hateblinclip02_idinput

 「はてなID」という欄にあなたのIDを入力します(画面はクリックで拡大、以下同)。

Hateblinclip03_extract

 すると、先ほどマイページで確認した、登録済みのブックマークがリストアップされます。

 ここで、ブログに貼り付けたい記事を選び、チェックボックスをチェック!
 続いて、ページ下にスクロールしてください。

Hateblinclip04_outputcode

 コード出力のための設定を行うFORMが見えるはず。

 いろいろオプションがあるのですが、とりあえず、以下を選択。

 出力形式:標準
 はてブ:登録数
 改行有無:あり
 別ウィンドウで開く:あり
 リンク:なし
 はてブコメント:あり

 そして、「リンク用HTMLコード生成」ボタンをクリック。これでHTMLコードがボタン下のテキストエリアに表示されます。あとは、その内容をコピー、ブログの投稿画面にペースト(貼り付け)。

 これらの作業で、はてブした記事をコメント付きで、ブログに掲載できるようになります。
 以下のような感じ。

Google
世界最大の検索サイト

Yahoo! JAPAN
日本最大のポータルサイト

 どうでしょうか。ちゃんとコメントも貼り付けられているのが、わかりますよね。
 基本的な使い方はこんな感じです。

タグの指定も可能

 はてブの登録時にタグを活用している人も多いはず。これも利用可能です。はてなブログのように「直近だけ」なんてことは言いませんよ。

 指定方法は、ページ上のFORMの「はてなID」の欄に

 はてなID/タグ

 の形式で入力します。

 調べ物をしている最中に、タグとともにはてブした記事なんかをまとめるのにも便利だと思われます。

オプションでこんなことも

 出力形式を組み合わせると、別の表示方法も選べます。たとえばこんな感じ。

  • PC Watchはてブに追加
    パソコン関連のニュースはこれで。

 ここでは、『出力形式』に「liで囲む」(リストを使用、ul、liタグ)、『はてブ』に「新ボタン」を選択、『改行有無』に「なし』としました。

 記事名が長い場合には、「liで囲む」にすると見やすくなるはず。「改行有無」については、ブログサービスのWYSIWYGエディターの記事に依存するので、表示がくずれないよういろいろ試してみてください(ココログ、MovableTypeでは改行なしのほうがいいみたいです)。

 また、『はてブコメント』を「あり カッコ付」にすると以下のようになります。

  • AV Watch
    【AV関連のニュースのチェックはこちらから。】

 コメント部分がカッコ(【】)で囲まれます。これは改行なしにした際の編集時にコメント部分がわかりにくくなるのに対処したもの。あとで手直ししやすくするためと、なんらかのタグを追加したい際に一括置換しやすいように設けたものです。

 これらのオプションについては、はてブコメントの部分以外は、前からあるlinclipの機能と同じです(そう、このlinclipというサービスはだいぶ前から存在してるのでした。今回、はてブコメントを引用するための機能を追加したというわけです)。

 その他のオプションなどについては、以下の記事も参照ください。

その他、注意事項、いいわけなど

 新ユーザーページには対応しません(あとで考えます)。(追記:9月25日、対応しました)

 はてなブックマークを非公開にしていると、抽出できません(認証などがアレなので、たぶん今後も対応しません)。

 コメント内のタグは抽出・出力しません(リンク先はどうするか、取得が面倒、といった理由から今後もたぶん対応しないと思います)。

 出力されるコードがおかしいといった指摘、こうしてほしいといった要望があれば、コメントください(すべて対処できるとは限りませんが)。また、更新情報をつぶやくツイッターもあるので、そちらでも。

 では、よろしくお願いしまーす。


|

« 複数のチェックボックスをドラッグで選択 | トップページ | AmazonのPAAPIがStyleを処理しない »

コメント

コメントを書く



(ウェブ上には掲載しません)




トラックバック

この記事のトラックバックURL:
http://app.cocolog-nifty.com/t/trackback/35726/55703600

この記事へのトラックバック一覧です: はてブした記事をコメント付きでブログに貼り付けられるサービス:

« 複数のチェックボックスをドラッグで選択 | トップページ | AmazonのPAAPIがStyleを処理しない »