つーぜの勇姿＠千葉ノード大会

先日行われました、千葉ノード大会であがきにあがいた末に何とか被災者を救出したチーム「つーぜ」ですが、その勇姿をどうぞ。

以上。

【副部長の】学校の部活ページについて【不定期連載】その３

目次

• 部活のページの構成（続き）
• 編集するところ

部活のページの構成（続き）

---

前回は，部活のページ全体について解説しました．
今回は，リンクの追加の仕方，記事の書き方の準備として，nav要素の中身，article要素の中身について解説をしようと思います．

まず，テンプレートのnav要素の中身を見ていきます．

<!--nav要素-->
      <nav>
        <ul>
          <li><a href="#" class="current"></a></li>
          <li><a href="../index.html"></a></li>
          <li><a href="#"></a></li>
          <li><a href="http://example.com"></a></li>
          <li><a href="http://example.org"></a></li>
        </ul>
      </nav>

nav要素の中のul要素の中にli要素があり，その中にa要素があるのがわかります．
リンクを貼るだけならばa要素だけで良いのですが，見栄えを良くするため，階層構造を実現しやすくするため，参考にしたテンプレートがこうしていたから，などの理由でul要素とli要素で囲っています．

では，ul要素とli要素について解説をしていきます．
（まあ，ググればすぐ出てくるんだけどね）
ということで，さっそくHTML5タグリファレンスでul要素とli要素を見ていきます．

<ul>タグはunordered listの略で、順序のないリストを表示する際に使用します。 リストの各項目は<li>タグを用いて記述します。

 <li>タグはlist itemの略で、リストの項目を記述する際に使用します。

なので，例えばこのように書くと，

<!--ul要素,li要素-->
<ul>
  <li>このように</li>
  <li>表示</li>
      され
  <li>ます．</li>

• このように
• 表示
され
• ます．

目次の下のリストもこれで作っています．
なんで部活のページには黒丸がないのかは，cssの話になってしまうので，また後日．

次に，article要素の中身を見ていきます．

<!--div要素,article要素-->
      <div id="main">
        <article>
          <h2></h2>
          <div class="box">
            <p></p>
            <aside>
              <p></p>
            </aside>
          </div>
        </article>
      </div>

<h2>〜</h2>に見出しを書いて，<p>〜</p>に内容を書きます．
aside要素には補助情報を入れます．

では，HTML5タグリファレンスでarticle要素とaside要素を見ていきます．

<article>タグは、内容が単体で完結するセクションであることを示す際に使用します。例えば、フォーラムでの投稿、雑誌や新聞の記事、ブログのエントリ、コメントなどです。

 <aside>タグは、その部分がウェブページ内における余談・補足情報のセクションであることを示す際に使用します。

なので，article要素の中に<h2>要素で見出しを書き，<p>要素で見出しに対応した内容を書きます．ちょっとした補足情報を書くときにはaside要素の<p>要素に書きます．

編集するところ

---

では，実際にどこを編集すれば良いのかを説明します．

リンクの追加ですが，上記のnav要素の中に関連しているページへのリンクを貼るといいと思います．
ページが多くなってきたらheader要素の中にグローバルなリンクや，コンテンツ分けしてリンクを貼るのもいいでしょう．
具体的な追加の仕方は，li要素をコピペして，a要素の中身とURLを変えるだけです．
階層表示がしたくなったら，li要素の中にul要素をネストするとよいでしょう．

記事の追加の仕方は，article要素をコピーしてdiv要素の中のトップレベルにペーストするだけです．
具体的な方法は，h2要素にタイトルを書いて，p要素に内容を書きます．p要素のpはparagraph（段落）のpなので，適度に段落分けをして，その都度p要素を使うようにしましょう．
もし，メインのp要素の情報だけでは十分に情報が伝わらないという時や，補助情報を入れたい時にはaside要素を活用するとよいでしょう．aside要素のp要素に補助方法を書きましょう．

これで，ページを編集するときの注意は一通り書いたと思います．
cssについては解説をするのが面倒になってきたので，解説しません．各自ググってください．
テンプレにもありますが，正しくcssをリンクしないと予定通りの視覚効果が得られない場合があるので，cssの置き場所には注意しましょう．

おわり!

千葉ノード大会に出陣してきました！

千葉ノードに出陣してきました！

すごかったチームを紹介します。

[ライントレース]

あらぶるかみ

今回、部活では「何とか神」みたいなチーム名がはやりました。
その中でも、そのチーム名の如く競技したロボットは、やはりこの「あらぶるかみ」。

長いシャフトが特徴のこのロボットはあらぶってあらぶって完走しました。
見事1位！です！

[レスキューＡ　プライマリ]

のーべる

レスキューAのプライマリは実質このチームだけだったりもしますが、すごいので紹介します。

この車体は、マイクロマウスの経験から来るさまざまな工夫が施されています。
一階を見事完走、坂の途中でリタイアしましたが、まあそんなもんです。
あと1位！です！

[レスキューＡ　セカンダリ]

てすら
ほぼ仙台知能ロボコンの部品の流用でできています。

一回目のトライでは、一階を完走した後、「坂に登っている途中で逆走し始めたくなる病」（ようするにバグ）が発生し、リトライで二階にもトライするものの、そちらにもバグが潜むという非常にユニークな演出をしました。

二回目のトライでは、執念（リトライたくさん）で被災者を何とか持ち上げ、得点を決めてました。

つーぜ

こちらのロボットは非常に仙台知能ロボコンに出てきそうな車体構成をしています。

一回目のトライでは、二階まで見事完走、執念のリトライの結果、みごと被災者救出に成功しました！
二回目のトライでは、坂を登っている途中に部員がロボットに「もっと熱くなれよ！」と声をかけたものですから、坂を転げ落ちました。その結果電池が転げ落ち、その状態でリトライするものの、いろいろとだめでした。
まあ一回目であれだったからいっか・・・。


あと、レスキューＢとして「ふぁん・でる・わーるす」がデモを行いかけました。
四足歩行のこの機体はまだ開発途中なのです・・・。
まあわっしゃわっしゃ足が動くのはすごく面白いのですが。


そのほかの詳しいことは千葉ノード大会のブログにいろいろ書かれているので是非ご覧ください。

さて、千葉ノードのロボットは自作機の比率が非常に高かったりしますが、案外、この部活のせいだったりします。
その理由もまたいづれ。

で、関東大会に進出したチームは以下のとおりです。
[レスキューA]
・のーべる
・つーぜ
・てすら
[レスキューB]
・ふぁん・でる・わーるす

それについて詳しくは関東ブロックのページを参照して下さい。