Twitterを簡単にまとめられる「togetter」の基本的な使い方

ツイッターをまとめよう - Togetter10

Twitterのツイートを直感的にまとめられる、「togetter」の使い方について解説します。

「togetter」とは?

2009年に開発が開始され、2012年1月には月間1000万ページビューを超えました(参考:wise9 › 月間1000万PV突破の人気WebサービスTogetterはこうして産まれた(前編))。

主な機能は、気に入ったツイートをまとめることです。まとめたツイートを自分用に保存したり、一般公開したり、ブログに貼り付けたりできます。

Twitterのアカウントがあれば、誰でも手軽にツイートのまとめを作成できます。

ツイートのまとめ作成方法

今回作成する、まとめの完成形は以下のようになります。

クックパッド、レシピストアの反響 – Togetter
クックパッド、レシピストアの反響 - Togetter

完成までの流れ

  1. Twitterアカウントを認証する
  2. キーワードで検索してまとめる
  3. まとめリストの名前や公開設定をする

1.Twitterアカウントを認証する

togetterのトップページにアクセスし、右上にある「ログイン」をクリックします。

ツイッターをまとめよう - Togetter

「Sigh in with Twitter」をクリックします。

2012-06-08_1537

Twitterの認証ページに自動でジャンプします。TwitterのIDを確認し、問題なければ「連携アプリを認証」をクリックします。Twitterにまだログインしていない場合は、ここでログインと認証を同時に行えます。

Twitter - アプリケーション認証

2.キーワードで検索してまとめる

認証が完了しtogetterのトップページに戻ったら、画面右下の「まとめを作成」をクリックします。

ツイッターをまとめよう - Togetter02

先ほど認証したTwitterIDのタイムラインが表示されます。まとめ方は、大きく分けて2パターンあります。

1つ目は、自分のタイムラインからまとめる方法です。

2つ目は、キーワードの検索結果からまとめる方法です。

今回は、検索結果からまとめる方法について解説します。画面下にスクロールして、「検索」と書かれたボタンの左横のフィールドにキーワードを入力します。入力が終わったら、Enterキーまたは「検索」をクリックします。

Twitterまとめの作成 - Togetter03

検索にはAND検索以外にも、OR検索(例:「サッカー OR フットサル」)やマイナス検索(例「テニス -ダブルス」)も使えます。

画面左に検索結果が表示されたら、まとめたいツイートをどんどんクリックしていきます。クリックすると背景がピンク色に変わります。こうやって、ツイートをキープすることができます。あとで再編集できるので、ここではアバウトでも構いません。

Twitterまとめの作成 - Togetter04

ある程度絞れたら「部分コピー」をクリックします。

Twitterまとめの作成 - Togetter05

すると画面右に、選んだツイートの一覧が表示されます。

ここで選んだツイートの編集ができます。ドラック&ドロップで順序を入れ替えたり、「×」をクリックして削除したりできます。

編集が終わったら、「リストを投稿する」をクリックします。

Twitterまとめの作成 - Togetter

3.まとめリストの名前や公開設定をする

ここでは、まとめたリストのタイトル、カテゴリー、公開設定などを決定します。完了したら、「投稿する」をクリックします。

2012-06-08_2052

これでまとめの作成が完了です。「まとめへ」をクリックすると、自分のまとめがどれぐらいシェアされたかをチェックすることができます。

作成完了 - Togetter

Firefox13.0 正式版が公開!目玉は「新しいタブページ」

2012-06-06_1343

今回の更新での主な変更点は、下記ようになっています。

  • 新しいタブページ
  • 新しいスタートページ
  • パフォーマンスの向上

特に重要な機能は「新しいタブページ」です。

「新しいタブページ」とは?

ScreenClip

Firefox13.0から、Operaのスピードダイヤルのような機能がデフォルトで実装されました。今までは、「Speed Dial」というアドオンを入れなければなりませんでしたが、それが不要になりました。

しかし、画像を見てもわかるように、サムネイルをうまく取得できてないページが結構あります。原因はよくわかりません。

詳しい機能説明にはついては、Firefox の更新を参照してください。

スムーズスクロールをオフにする

Firefox13.0に更新すると、デフォルトで「スムーズスクロール機能を使用する」にチェックが入ります。

この機能をオフにするには、オブション画面を開き「詳細」タブをクリックします。「スムーススクロール機能を使用する」をチェックをはずして、「OK」を押せば完了です。

2012-06-06_1331

Twitterの反応(togetter)

関連記事

Yahoo!Pipesの「XPath Fetch Page」で、うまく取得できないときの対処法

Yahoo!Pipesの「XPath Fetch Page」でXpathを指定する際に、要素に複数のclassが指定されている場合とidやclass属性が指定されていない場合の対処法について解説します。

Pipes- Rewire the web02[2]

初めて「XPath Fetch Page」を使う方は、Yahoo!Pipesの新モジュール「XPath Fetch Page」の基本的な使い方を参照してください。

複数のクラス属性が指定されている場合

たとえば、以下のようなHTML文書があるとします。

<div class=”foo bar”></div>

このdiv要素をXpathで取得したい場合、あなたならどうしますか?

  1. クラス名を1つだけ選んで指定する
    //div[@class=”foo”] or //div[@class=”bar”]
  2. まとめて指定する
    //div[@class=”foo bar”]

上記のような指定の仕方を考えるかもしれません。残念ながらPipesでは、どちらもエラーが出てうまく取得できません。

このように複数のクラスが指定さている場合は、Xpathにあらかじめ用意されている関数を使います。contains()という関数です。

contanins(‘str1’,’str2’) : str1にstr2が含まれていれば true を返し、そうでなければ false 返します

つまり、先ほどの例では

//div[contains(@class,”foo”)] or //div[contains(@class,”bar”)]

と指定すればOKです。

実際にやってみましょう。MOVIE Collectionという映画サイトにあるNews一覧ページのRSSフィードを作成してみたいと思います。

作成するPipesの完成形
Pipes- editing 'MovieCollection - News'

取得範囲を決める

「Firebug」やChrome「Webデベロッパーツール」の「要素の検証」を使います。

<div class="kiji clear">

という要素を指定すればうまくいきそうです。今回は画像や日付は不要なので、このdiv要素の直下であるa要素のみを指定したいと思います。

Xpathは、クラス属性に kiji という文字列含まれている要素の子供のa要素を指定すればいいので

//div[contains(@class,”kiji”)]/a

と指定します。

Yahoo!Pipesでモジュールを組み立てる

「XPath Fetch Page」モジュールには以下のように指定します。

URL : http://www.moviecollection.jp/news/
Extract using Xpath : //div[contains(@class,"kiji")]/a
Use HTML5 parser にチェック

Renameモジュールについては割愛します。

今回の完成形はこちらです。

idやclass属性が指定されていない場合

取得したい要素の範囲内にid属性やclass属性が指定さていない場合は、「番号」を使うとうまくいくケースがあります。

実際のページで考えてみましょう。東スポWebの人気ランキング一覧にアクセスしてください

取得範囲を決める

このページには6つのランキングが用意されています。

Firebugなどで調べると、それぞれがol要素でマークアップされていることがわかります。PipesでRSSフィードを作成する場合は、ol要素の子孫にあたるa要素を指定すればうまくいきそうです。

ですが、6つのランキングのうち「エンタメ人気ランキング」のみを取得したい場合はどうすればいいでしょうか?

2012-06-06 01-58-31

//ol/li/a

と指定した場合は、6つのランキングすべてが取得されてしまいます。「総合人気ランキング」や「スポーツ人気ランキング」も余計に含まれてしまうわけです。

このようなときに便利なのが「番号」です。以下のように書き換えます。

//ol[4]/li/a

と指定すると、4番目に登場したol要素の子孫のa要素のみに限定して取得することができます。

Yahoo!Pipesでモジュールを組み立てる

「XPath Fetch Page」モジュールには以下のように指定します。

URL : http://www.tokyo-sports.co.jp/rankinglist/
Extract using Xpath : //ol[4]/li/a
Use HTML5 parser にチェック

Renameモジュールについては割愛します。

今回の完成形はこちらです。

関連記事

2chまとめ5サイトへ転載禁止措置

2ちゃんねる掲示板へようこそ 2012-06-04 14-35-39

2chまとめ大手の「やらおん」、「ハム速」などに警告文が送られました。今回転載禁止措置を受けたのは、Googleページランクが5や6の人気サイトです。この警告により、早くも運営終了宣言をするサイトが出始めました。

2ちゃんねるからの警告文は以下のとおりです。(http://2ch.net/warn.txt)

第3者に迷惑をかけ謝罪しない人物に2chの著作物を使われることは、不利益が大きいため、下記のURLにおける2chの著作物の利用を禁止します。
また、本人及び関係者による類似サイトへの著作物の利用も同様に禁止します。

http://yaraon.blog109.fc2.com/
http://hamusoku.com/
http://blog.esuteru.com/
http://jin115.com/
http://blog.livedoor.jp/insidears/

発言の捏造、転載元が明記されていない著作物の利用に関しても、なんらかの措置をとる可能性があります。

転載禁止措置を受けた理由は、おそらく特定個人への誹謗中傷、画像の無断転載などが原因だと思います。

他の大手2chまとめサイトの、今後の動向が気になりますね。

2ちゃんねるでの反応

【ネット】2ちゃんねる、いわゆる「2chまとめサイト」の大手5サイトを名指しで「転載禁止」に?

2 :名無しさん@13周年:2012/06/04(月) 12:16:39.10 ID:Cbf82tcf0
痛いニュースも早く入れろ
5 :名無しさん@13周年:2012/06/04(月) 12:17:00.33 ID:EGbsoiW20
ハム速逝ったーwwwww
8 :名無しさん@13周年:2012/06/04(月) 12:17:44.39 ID:MxXbBVj60
Twitter民の反応

ハム速、炎上系のスレよく載るから好きだったんだけどな・・・オシャゴリのときとか。
sa_black(さとえお姉さん)-15秒前
ハム速どうしたんですか?なんで??迷惑かけたんですか?謎
yuua_u3u(ゆうあ)-26秒前
ハム速 ?ありがと?
chigiriko(ちぎりこ)
ハム速さん動物スレとかたのしかったけど残念だなー
kudakitsunee(管狐@超ノイドー研)-35秒前
ハム速まじかーしょぼんぬ(´・ω・`)
sweet_fish19(ayuna)-33秒前
あーやらおんとかはちまはどうでもいいけどハム速…ハムスターの画像スレ楽しみにしてたのに
usuta_(ゆすた)-1分前
まぁ確かにそうだよな。さよならコピペ。まとめはやや誤差でるけど見やすかった。特にハム速は。さよならまとめ。
kyoochaan(新免 京佑 )-28秒前
やらおん、ハム速、はちまとよく見ていたサイトばかりだよ!( ´Д`)y━・~~ 地方民の情報源がああああああ
colo567(colo)-5分前
ハム速終わったんだ(>_<)なにげ毎日見てたのになあ
wwwyui2luv(ゆいにゃん@歌い手厨)-5分前
えーハム速なくなったらあの人形つくりの人どこでみればいいの!!!かなしい!それだけが!
matusima(松嶋)-5分前
めんどくさ! 実にめんどくさい! でもハム速のまとめとか楽しかったなあ 残念
kinoko_game(姫野きのこ)-6分前
ハム速と刃終わったら結構情報源なくなる
CHE_10MATA(すずき)-7分前
http://realtime.search.yahoo.co.jp/search?fr=top_ga1_sa&p=%E3%83%8F%E3%83%A0%E9%80%9F&ei=UTF-8&rkf=1

10 :名無しさん@13周年:2012/06/04(月) 12:17:47.65 ID:PVSJ8OCN0
疎いので影響の程が分からん
凄いのか?
14 :名無しさん@13周年:2012/06/04(月) 12:18:39.19 ID:UoaRYzVc0
アニメとゲームだけか
22 :名無しさん@13周年:2012/06/04(月) 12:19:54.61 ID:HmD7Xcpj0
どうせ有名どころが消えたってアフィブログなんて何百とあるんだからそこにいくだけなんですけどね
下位のやつらにとっては収入源が増える可能性がたかまるからメシウマ状態今夜はお寿司
27 :名無しさん@13周年:2012/06/04(月) 12:21:16.36 ID:HReHbAbF0
>>22
そのうち全規制だろ
今は大手だけで
38 :名無しさん@13周年:2012/06/04(月) 12:23:50.31 ID:JzCM8RD50
これは見せしめだな
他のまとめサイトに対する圧力
93 :名無しさん@13周年:2012/06/04(月) 12:30:35.95 ID:upmnEL8/0
自分はマスコミから転載し放題で、それで転載するなってギャグだな。
94 :名無しさん@13周年:2012/06/04(月) 12:30:41.74 ID:BcfZygN3O
公平におもしろいレスを纏めてるサイトならいいんだけどね

自分達の都合のいいように編集してたし、まさにマスゴミ

128 :名無しさん@13周年:2012/06/04(月) 12:34:43.68 ID:tXH08ym/0
やらおんとニュー速VIPはわりと独自色強いから無くなると少しだけ困るなぁ。
それ以外は他のまとめサイトとだいたい内容がかぶってるからいいけど。
194 :名無しさん@13周年:2012/06/04(月) 12:41:22.72 ID:RJ+uPk1G0
博之はもともとは容認派だったはず。
何年か前の自身の新書で「これからは2ちゃんまとめサイトが来る」
なんてことを、のんびりしゃべってたと思う。
291 :名無しさん@13周年:2012/06/04(月) 12:50:24.63 ID:8JTIAYb60
お前らの書き込みには著作権があったのかw
314 :名無しさん@13周年:2012/06/04(月) 12:53:31.33 ID:XnFzagUo0
>>291
厳密にいえばあるんだよねw
でも、書き込みボタンを押す時点で、その放棄に同意してる。
322 :名無しさん@13周年:2012/06/04(月) 12:54:55.38 ID:rZTPSa4gO
久々に胸がスカッとするいいニュースだ
324 :名無しさん@13周年:2012/06/04(月) 12:55:10.10 ID:khZcanLm0
なんだ全部じゃないんだ
その他のまとめがあるから、まぁいいか
345 :名無しさん@13周年:2012/06/04(月) 12:57:26.81 ID:2JcCkXct0
嫌儲大勝利か。
413 :名無しさん@13周年:2012/06/04(月) 13:06:10.96 ID:DGk0WCkv0
2ちゃんはコピペブログに転載されて情報が拡散することに意味があるのに
429 :名無しさん@13周年:2012/06/04(月) 13:07:55.56 ID:/p1bNRHVO
まとめサイト専業で稼いでた奴はきついよね
無職になっちまうの?
441 :名無しさん@13周年:2012/06/04(月) 13:09:14.23 ID:jsmrTWc3O
まとめサイト便利だけどなあ。
・2ちゃんで落ちたスレでも読めることがある
・レスと、そのレスに対するレスを、くっつくように並べ替えて整理してるので分かりやすい
・イミフなレスや荒らしのレス、AAを削除してコンパクトになってる
469 :名無しさん@13周年:2012/06/04(月) 13:12:18.11 ID:fmwIGGTu0
2chから「迷惑をかけるな」とか声が出るなんて隔世の感があるな
つうかタカる立場からタカられる立場に変わるなんて思いもよらなかったわ
488 :名無しさん@13周年:2012/06/04(月) 13:14:22.57 ID:rJQc+tqY0
2ch終わったなこりゃ
警察にマークされてブルったのかね
503 :名無しさん@13周年:2012/06/04(月) 13:15:46.22 ID:sFSiqG+30
別に俺らのレス使って金儲けするのはどうでもいいけど捏造はアカンな
513 :名無しさん@13周年:2012/06/04(月) 13:17:11.89 ID:6AQYp7l20
俺たち2ちゃんねらーの大勝利だな!みんな!
565 :名無しさん@13周年:2012/06/04(月) 13:24:52.67 ID:2PeR/HZx0
5サイトの中でも、刃だけは記事の削除訂正や謝罪対応が速い印象があったんだけどな。
2chとどういうやり取りがあったんだろ。
584 :名無しさん@13周年:2012/06/04(月) 13:26:51.19 ID:jkryoeWt0
まとめを見る人が増えたぶん、
ねつ造などの被害が大きくなって見過ごせなくなったんだろうな

手っ取り早く話題のスレが知れて便利だったんだがね・・・

594 :名無しさん@13周年:2012/06/04(月) 13:27:52.59 ID:MGk5Dh4l0
ハム速は一度、一般人かなんかの誤報を謝罪せず消さなかった時
荒れたことあったね
602 :名無しさん@13周年:2012/06/04(月) 13:29:08.33 ID:e03v7Xiu0
ハム速しか知らんが無くなっても問題ないな
654 :名無しさん@13周年:2012/06/04(月) 13:35:43.40 ID:Nv0iOral0
痛いニュースなんかが潰されてないのはニュー速+しか転載してないからだろうな。
ソースがメディア記事の板なら潰されないわけだ。
ニュー速やVIPみたいなソースなしで騒ぎ立てるとこやリーク系の情報扱ってる板はやばい。

Yahoo!Pipesの新モジュール「XPath Fetch Page」の基本的な使い方

2012年6月末から使用不可になる「Fetch Page」モジュールに代わり、新しく「XPath Fetch Page」モジュールが導入されました。XPathに対応したことで、従来の「Fetch Page」よりも簡潔かつ正確に、HTML文書を取得することが可能になりました。

それでは、「XPath Fetch Page」の基本的な使い方ついて解説します。

Pipes- Rewire the web02

今回はエンタメ | 東スポWebの新着ニュースのRSSフィードを作成したいと思います。完成形は以下のようになります。

作成するPipesの完成形
tousupo_pipes

完成までの流れ

  1. HTML文書の中から必要な範囲を探す
  2. PipesでオリジナルのRSSを作成する
  3. 作成したRSSをRSSリーダーに登録

1.HTML文書の中から取得する範囲を決める

HTMLソースを表示して、取得する範囲を決めるのもいいですが、それよりもブラウザ機能やアドオンを使う方がスムーズに作業が行えます。

Firefoxならアドオンの「Firebug」をインストールして使います。Chromeならデフォルトで「Webデベロッパーツール」が用意されていますので、これを使います。どちらもブラウザ上でキーボードの「Ctrl+Shift+C」を押すと起動できます。

では、エンタメ | 東スポWebにアクセスし、「Ctrl+Shift+C」を押してください。

ここではFirebugを例に解説します。下の画像で赤枠で囲まれているのが、今回取得したい部分です。

2012-06-03_1439

Firebugの「要素の検証」機能を使うと、赤枠の部分に対応するのが「div#cate_reportlist」であることがわかります。

これで取得する範囲を絞ることができました。次は、項目ごとに1つ1つ分解していきます。

2012-06-03_1454

同様にFirebugの「要素の検証」で確認すると「先ほどのdiv要素の子供であるh2要素の子供のa要素」を指定するとうまくいきそうです。

まとめるとa要素までは、以下のような階層構造になっています。
<div id="cate_reportlist"> / <h2> / <a>

ここまでわかればあとは簡単です。

2.PipesでオリジナルのRSSを作成する

Yahoo!Pipesにアクセスし、「Create a Pipe」をクリックします(Pipesを使うのが初めての方は、アカウント登録が必要です)。

Pipes- Rewire the web

左サイドバーから「XPath Fetch Page」をドラッグします。

Pipes- editing pipe

「URL」には先ほどの東スポWebのURL(http://www.tokyo-sports.co.jp/category/entame/)を入力します。

次に、「Extract using XPath」にXPathを入力します。XPathは以下のような形式で指定します。

//要素名[@属性名="属性値"]/要素名/…

今回の東スポWebの例だと

//div[@id="cate_reportlist"]/h2/a

となります。これを「Extract using XPath」に入力します。XPathについてもっと詳しく知りたい方は、「XPath Tutorial」や「XML XPath」を参照してください。

「Use HTML5 parser」には常にチェックを入れておいてください。「Emit items as string」にはチェック入れずにしておいてください。

左サイドバーからOperatorsをクリックし、「Rename」をドラッグしてください。続けて、2つのモジュールをドラッグしてつなぎます。

Pipes- editing pipe02

次に、Renameモジュール内のMappingsの左横にある「+」をクリックして、カラムを1つ追加します。続けて、Renameと書いてある青いバーをクリックします。すると、モジュール全体がオレンジ色に変わります。

Pipes- editing pipe03

この状態で画面下を見ると、「0,1,2,…」のような番号が振られているのが確認できると思います。0をクリックして展開してみます。

Pipes- editing pipe04

hrefとcontentという項目があることがわかります。この場合ではhrefをlinkに、contentをtitleに割り当てたいので以下のように入力します。

item.href [Rename] link
item.content [Rename] title

このようにitemのあとに「.」でつないでいきます。今回のケースでは1階層しかありませんが、さらに階層が深くなった場合でも、item.div.p.a.hrefのように「.」でつないでいくだけでOKです。

linkはフィードのリンク、titleはフィードのタイトルになります。他にもdescription(フィードの説明文、ブログだったら記事の抜粋文)、pubDate(フィードの公開日)などがあります。

入力が終わったら「Rename」と「Pipes Output」をつないで、画面下の「Refresh」をクリックして、うまく出力できているかどうかを確認してください。

Pipes- editing pipe05

続いて、左上の「Untitled*」をクリックし、適当な名前を入力します。今回は、「東スポWeb – エンタメ」としました。

Pipes- editing pipe06

次に、右上の「Save」をクリックして、設定を保存し、「Run pipe…」をクリックして、実行します。

Pipes- editing07

3.作成したRSSをRSSリーダーに登録

Pipes- 東ス・Web - エンタメ

ここでは、作ったPipesを一般に公開したり、RSSやJSON形式で取得したりできます。

「My Yahoo!」と「Googleリーター」には登録用のリンクがあらかじめ用意されているので、そこから簡単に登録できます。その他のRSSリーターで登録したい場合は、「Get as RSS」を右クリックし、URLをコピーして、そのURLをRSSリーダーに登録すればOKです。

今回作成したPipesの完成形はこちらです。

関連記事