正しいHTMLを書こう

○はじめに
HTMLは多少構文がおかしくてもブラウザが柔軟に解釈してくれて、なんとなく動いてしまう事が多いですが、構文間違いが多いとブラウザに依存したコードとなり、想定外の環境だとレイアウトが崩れたり、動作しなくなったりする可能性があります。

今後も新しいプラトッフォームやブラウザが次々と登場する事でしょうから、出来る限り正しいHTMLを書けるように心がけたいと思います。

また、構文が間違っているHTMLは読みにくく保守しにくいので、その面からも正しいHTMLを書きたいと思います。

そこで、今回は、HTMLの構文が正しいかチェックする"HTML構文チェッカー"を使って、構文が正しいかチェックしてみました。

○実際にやってみる
私が作成している「ATND RSS」と言うサイトを例に、HTML構文チェッカーを使って見ます。

Web上にはいくつかの構文チェッカーがありますが、今回は、HTML5にも対応している(X)HTML5 Validatorを使ってみます。
他にも「HTML 構文チェッカー」などと検索するとたくさん出てきます。

①HTML5 ValidatorにチェックしたいWebサイトのURLを貼付けて「Validate」をクリックします。URLを貼付ける以外にも、HTMLファイルをサイトにアップロードするなどして構文をチェックすることも出来ます。

②すると、以下のように構文にエラーがある場所が表示されます。

2カ所のエラーがありました

• 76行目："/"の位置がおかしい。
• 92行目：要素の右寄せを"align"属性で行っている。
  ※この属性はすでに廃止されている^^;)

発見されたエラーを修正してもう一回チェックしてみました。

今度は大丈夫そうです。
○まとめ

• HTMLの構文チェックを行って正しいHTMLを書こう。

---

○関連記事

• rubyコードの複雑さを数値化する
  （「メトリクスとは何か？」について少し記述があります。）

rubyコードの複雑さを数値化する

○はじめに

今日は、Rubyで書いたコードのメトリクスを測定するreekと言うツールを紹介します。

メトリクスの測定とはコードの複雑さ（汚さ）を計る事です。

複雑なコードは理解しにくいため、変更しにくく、バグが発生しやすいです。

メトリクスを測定して、複雑なコードを発見しリファクタリングすることで製品の品質が向上します。

○具体的に何をしてくれる？
メトリクス測定ツールは具体的に何をしてくれるのでしょうか？

例えばreekの場合は、コードの中に以下のような"汚い"部分が無いか探してくれます。

• 大きすぎるクラス、メソッド
• "a", "b"みたいな、何が入っているのか分かりにくい変数名
• rdoc用のコメントが無いクラス・・・
  などなど

そして「汚い部分が何カ所あったか」と「どこがどんな風に汚いのか」を表示してくれます。
例えばこんな感じです。

./foo.rb -- 6warings    :
  #=>foo.rbに6カ所汚い部分があった
  Foo has no descriptive comment (IrresponsibleModule)
  #=>Fooクラスがどんなクラスなのか説明するコメントが無い
  Foo has the variable name 'a' (UncommunicativeName)
  #=>Fooクラスに'a'と言う説明的でない名前の変数がある
  Foo#bar has apporox 11 statements(LongMethod) 
  #=>Fooクラスのbarメソッドが長過ぎる
  ・・・

#以降は私が書いた補足です。

プログラムが機械的に解析した結果なので、完璧では無い事も多いのですが、コードの汚さの目安として使ったり、どこをリファクタリングしたら良いのかの基準にする事ができます。

では、さっそくreekを使ってみましょう。

○インストール

コマンドラインで以下を実行すればインストールできます。

$ gem install reek

○実行

reekは、1ファイルを対象にメトリクスを測定することも出来ますし、複数のファイルを一度に測定する事も出来ます。

なお、もちろんRubyで書かれたRuby on Railsのコードに対して測定する事も出来ます。

①一つのファイルのメトリクスを測定

$ reek ./foo.rb

→foo.rbファイルのメトリクスを測定

②複数のファイルのメトリクスを同時に測定

$ reek rails_app_example/app/controller/

→controllerディレクトリの中にある全てのファイルのメトリクスを測定します。

以上の通り簡単な手順ですので、ぜひお試しください。

○まとめ

• reekはRubyで書いたコードのメトリクスを測定するツール
• メトリクス測定とはコードの汚さを測定する事
• メトリクスは完璧ではないけど、リファクタリングすべき場所の目安になる
• reekでrubyコードのメトリクスを計ろう！

jQueryのセレクタを手軽に試せるツール

○はじめに
前回紹介したATND RSSを作成するにあたって、今まで知らなかったツールやサービスを知る事が出来たので、今後何回かに分けて紹介したいと思います。
Webサービスやサイトを作ろうとしている人の参考に少しでもなればと思います。

さて、今回はjQueryのセレクタの挙動を確認できる"jQuery Selectors Inspecter"と言うツールを紹介したいと思います。

○何ができるツールなの？
このツールは「jQuery日本語リファレンス」で配布されているツールです。このツールを使うと下の例のように、ダイアログに入力したセレクタでどこが選択されるのか確認することが出来ます。

例）$("div#title")でどこが選択されるのか調べる場合。

1.調べたいページでjQuery Selectors Inspecterを実行する。
※セットアップ方法は後述します。

2.ダイアログに"div#title"と入力する。
※"$()"は不要。

3.選択される場所が赤くなる。

以上です。簡単ですね。

○セットアップ方法
セットアップ方法についてですが、このツールはブックマークレットとして提供されているので、以下のWebサイトに行って「jQuery Selectors Inspecter」と書いてあるリンクをブックマークに登録すればセットアップ完了です。

• 「セレクターで要素を選択する|jQuery日本語リファレンス」

後は、調べたいWebページでブックマークをクリックすればこのツールを使えます。ちなみにjQuery Mobileで作成したサイトでも使えました。

jQueryのセレクタを手軽に確認できますね！

○関連記事

• 「ATND RSS」というWebサイトを作りました

○参考資料

• jQuery日本語リファレンス

Bloggerにソースコードを載せる時にシンタックスハイライトする方法

プログラミング関係のブログを見ていると、よく↓のような感じで、シンタックスハイライトされたコードが、いい感じで載せられているのを見かけると思います。

　
class my_class
  def my_method
    p "hello world!"
  end
end

どうやら Syntax Highlighterと言うライブラリを使っているようなのですが、Bloggerでこのライブラリを使う方法になかなかたどり着けず苦労しました。

以下のサイトに書いてある方法を試したらうまく行ったので書き残しておきます。

• net3:Blogger でコードをシンタックスハイライトする

http://net-3.blogspot.com/2011/05/blogger.html

流れとしては、
１）以下のサイトでHTMLに埋め込むコードを取得し、
http://www.way2blogging.org/2011/03/how-to-add-syntax-highlighterv3-to.html
２）BloggerのブログテンプレートのHTMLファイルに書き込んで準備完了。
３）使う時は、以下のような感じでpreタグにclassを指定して、ソースコードを括ってあげる

　
    色づけしたいコードを記述

---

※2012/2/6追記：このサイトに載っている方法でもうまく行きました。
http://yksmtmks.blogspot.com/2011/05/syntaxhighlighterblogger.html

 以上