rails 独学して軽くにちゃんまとめつくる

読者です 読者をやめる 読者になる 読者になる

2にちゃんねるまとめビルダー制作過程(1)構文解析

ある程度進んだので進捗状況を書きます。

まずしたことは 2ちゃんねるのタグの構造を分析です。

 

>|javascript|
  2 名無しさん@おーぷん :2016/09/02(金)00:15:30 ID:FgY ()
||<

筋書きの無い寓話の果てに。

 

このままじゃさっぱりわからないので、構文解析をしました。右クリックをして「要素を調査」みたいなボタンをクリックしたらそのサイトの HTML が表示されます。

そこで上のレスのHTML を抜き出し、さらに重要なものだけ抜き出したのを下に書きます。

 

<dl>
<dt res="2">
   <a ><b>名無しさん@おーぷん</b></a>
    </font>

   <span class="_id" val="FgY ">
       <a rel="nofollow" class="id"  val="FgY">id:FgY</a>
     </span>
</dt>
<dd class="idFgY mesg" >
    (本文)
</dd>

</dl> 

 

たったこれだけです。まず dl タグが全体に囲まれていてます。その中に dt と dd が含まれています。dt はヘッダー情報で、レス番号や名前、日付などが含まれています。dd はレスの本文です。大まかな情報はこれだけです。

 

 

つぎに2ちゃんねるをまとめるために必要なものを調査します。まとめ主はどういう箇所を編集しているのかを調べます。

【悲報】無線イヤホン使いワイ、もう有線には戻れないと悟りすすり泣く : IT速報

適当にこのサイトを調べてみますと

  • レスの色と大きさ
  • IDの色
  • 元スレのリンク
  • 元スレのタイトル

を編集しているようなので、これらの要素を抜き出します。抜きだすことでそれを編集したいからです。ここでは簡単にid と本文を抜き出してみましょう。

     var  id  = $("dt[res=' 2 '] span").attr('val');

      var res = $(" dt[res='2'] ").next();

 

とします。ぱっと見てわからない人はもう一度上のソースコードを見てみましょう。
id は res番号を指定した dt の中の val という属性に入ってますので、それをもってきます。
本文は res という変数に格納しました。本文は dd タグの中に入っていますが、レス番号の前に id  という邪魔くさい文字が入っているので、間接的に指定します。

$(" dt[res='2'] ").next()

とします。 dt というのは2番目のレスの固有の番号を指定しているため、こういう書き方で固有の本文を取得することができます。 ヘッダー情報の dt  と 本文の dd は同じ階層にあったことからこういう書き方ができます。

 

 

 

うわーーー、今かいた作業なんかとっくのとうに終わってる内容であとはクローラーとrenderの問題だけやから結構進んどんだが、説明するのが難しいのとめんどくさい。

 

ため口でいったり、やる夫やどらえもんなどのキャラクターにしゃべらせたらもう少し書き込む作業が簡単になるのかな・・・

でも解説の記事は続けていくことにしよう。ソースコードをアップロードすることはないが、僕の記事を読んだら知識ある人ならさらっと作れてしまうよなーってくらい書いたら誰かの役に立つやろうし、もっといいアプリ作ってくれるかもしれん。

 

にちゃんまとめビルダーは背伸びの背伸びしたらできるかなーと思ったんで取り組んでみましたが、しょうもないところでつまづいてしまう。

 

とくに jQuery はとてもつまづいた。取り組む前の知識はプロゲートを2周してあとは全然やってなかったので図書館から本を借りたり、何度もグーグルを行き来したりしてめんどくさかった。プロトタイプバージョンができたら、一休みして オンラインブートキャンプで一から学んでくることにしようと思っている。

 

あと、やる気がない時間でホーム画面を作った。html, css, jQuery は僕が嫌いな分野だ。なんかやる気が起こらない。だからあんまり力をいれたくない。しかし見た目は大事。ということで、プロゲートの HTML の講座で作った html コードをコピペして文字だけ変えることにした。ネットでは無料テンプレートがゴロゴロ転がってるが、やはり一度自分の手で作り上げたテンプレートが理解しやすい。

 

ということで、ホーム画面はいかにも bootstrap で作りました感のある、モダンな見た目に仕上げた。

 

さて、もうひと頑張りします。