２ちゃんアンテナサイトを作る

あむちょです。

趣味と実益をかねて、２ちゃんアンテナサイトを途中ですが作ってみました。

アンテナサイトとは、2チャンネルの面白い話をまとめたサイトを、さらにまとめた物です。

２ちゃんは見ないけど、まとサイトやスマートフォンのまとめアプリは見るという人も多いのではないでしょうか。そういう私も、まとめアプリのヘビーユーザーです。

まとめアプリは一度作ってみたかったので、その布石としてアンテナサイトを作ってみました。完全に途中のうえ重たいです。

idepon 2Chアンテナ

現状、最低限の機能しかないので、少しづつ手を加えていく予定です。大きな広告は、2チャンまとめ系の様式美です。

以下作り方。

サイトの構成は、モンハン4攻略サイトでも使ったtwitter bootstrapをメインに、javascriptでGoogle AJAX Feed APIを制御して、DOMで動的に表示しています。

twitter bootstrapを使うメリットは、CSSメインで構成されているので軽いのと、レスポンシブデザインに対応している点です。

画像のように画面幅に応じて表示するコンテンツを動的に変化させれます。

次にfeed APIを使ってRSSに対応しているサイトの記事、タイトルと日付を拾って表示させています。javascriptによる表示なので、サーバー側に負担がかからず、クライアント側で動きます。

ただSEO的にはあまりよろしくないので検索によるアクセスは期待できそうにないです。相互RSSでアクセスを稼ぐのが王道らしいです。

基本的な使い方は、まずHTML側でソースの読み込み。

<br />
&lt;script type=&quot;text/javascript&quot; src=&quot;http://www.google.com/jsapi&quot;&gt;&lt;/script&gt;<br />
&lt;script type=&quot;text/javascript&quot;&gt;google.setOnLoadCallback(initialize);&lt;/script&gt;<br />

次に表示させたいところにidをつける。今回はtableタグ内のtbodyに表示しています。

<br />
&lt;table id=&quot;table&quot; class=&quot;table table-hover feed-table&quot;&gt;<br />
    &lt;thead&gt;<br />
        &lt;tr&gt;&lt;td&gt;新着&lt;/td&gt;&lt;/tr&gt;<br />
    &lt;/thead&gt;<br />
    &lt;tbody id=&quot;feed&quot;&gt;&lt;/tbody&gt;<br />
&lt;/table&gt;<br />

次にjavascript側で読み込むRSSのURLを設定。第２引数は最後に読み込む場合は1となります。

<br />
google.load(&quot;feeds&quot;, &quot;1&quot;);</p>
<p>function initialize() {<br />
   feedAdd(&quot;http://kamekimo.blog.fc2.com/?xml&quot;,1);<br />
}<br />

設定したRSSのデータを所得し、成形した後表示。

<br />
function feedAdd(rssUrl, boolNum) {<br />
    var feed = new google.feeds.Feed(rssUrl);<br />
    feed.load(function (result){<br />
        if (!result.error){<br />
            var title = result.feed.title;    //タイトル<br />
            var link = result.feed.link;      //リンクURL</p>
<p>            //htmlの生成<br />
            var feed='&lt;article&gt;&lt;tr&gt;&lt;td&gt;&lt;a target=&quot;_blank&quot; href=&quot;&#8217;+link+&#8217;&gt;&#8217;+title+'&lt;/a&gt;&lt;/td&gt;&lt;/tr&gt;&lt;/article&gt;&#8217;;</p>
<p>           //html表示<br />
           document.getElementById(&quot;feed&quot;).innerHTML=feed;<br />
      }<br />
    });<br />
}<br />

実際は、データを配列化して日付順に並びかえる必要があります。

なかなか手間ですが、一度完成すれば手が掛からないので楽ちんです。
[ad]