コードの複雑さを測ろう（継続的に、見やすく）

以前、このブログでRubyのメトリクス測定ツールであるReekを紹介しました。 

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

最近、このReekの出力結果をHTMLに整形するツールを作りました。
こんな感じでreekの解析結果を整形してくれます。

ツールの概要については、【第3回】Edge Rails勉強会で発表させて頂いくスライドがあるのでそちらをご覧下さい。

コードの複雑さを測ろう

View more presentations from Shinya_131.

githubにコードが置いてあるので是非使って見て下さい。 

バグ報告、フィードバックなどお待ちしています！

• https://github.com/Shinya131/reek_viewer

以上です！

正しい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コードのメトリクスを計ろう！

巻き込むデザイン

○はじめに
昨日、KDDIデザイニングスタジオで開かれた『KDDI ∞ Labo open MEETing Vol.5 - デザイン』と言うイベントに参加してきました。各方面でデザインに携わっている方々からデザインについての考え方や思いを聞くイベントです。

会場

※イベントに付いての詳しい情報はこちらにあります。
ATND:KDDI ∞ Labo open MEETing Vol.5 「デザイン」

イベントの中で、面白法人カヤックの玉田さんのセッションに登場した「人と人との繋がりをデザインする」と言うコンセプトが特に興味深かったのでレポートしたいと思います。

○プロフィール交換アプリ「flap.to」
今回のセッションではカヤックがリリースしているプロフィール交換アプリ「flap.to」が題材に取り上げられました。

このアプリは、近くに居る人と電話番号、メールアドレス、twitterアカウントなどの情報を交換するアプリです。

flap.to

このスクリーンショットに居る鳥が、自分のプロフィールを近くに居る人に運んでくれます。相手に鳥が届くとピヨピヨピ〜と音がします。

○このアプリの狙い
玉田さんは、このアプリをデザインする時に「人と人の繋がりをデザインする」事を狙ったそうです。

flap.toで連絡先を交換すると結構目立つが鳴ります。その音を聞いたまわりの人が「それ何？」と、聞いて来くる事を狙ったそうです。

プロフィール交換を鳥が行う必然は無いけど、この効果のために鳥を使ったアプリにしたとの事でした。

会場では、参加者同士のプロフィール交換が行われて、会場のあちこちからflap.toの音が聞こえて来たのですが、何とも言えない興味を引かれる音でした。

また、別の例として「iPhoneを持って拳と拳をぶつけると連絡先が交換できる」BUMPと言うアプリも話に登場しました。このアプリも使っている人だけで無く、周りの人の興味を引きつけます。

『誰かが何かを使っている所を見て「面白そう」と思わせる』ことが大切である。との事でした。

○巻き込むデザイン
ここからは私の感想です。

話が変わりますが、SNSが広まったのは「SNSは皆で使わないと面白く無いので誰かがSNSに参加し出すと自然と友達を誘う」仕組みがあるからでは無いかと思います。※

SNSが浸透してくると、この仕組みは「SNSに参加していないと仲間内の話題に付いて行けなくなる」という仕組みに変わります。

この、人が人を誘って利用者が増えて行く（周りを巻き込む）仕組みが、玉田さんが言う「人と人の繋がりをデザインする」と言う事ではないかと思いました。

人と人の繋がりをデザインする事は、デザインであると同時に広告でもある。と、言えるのでは無いかなと思いました。

---

○関連記事

• 枠を超えるデザイン
• 肩越しの視線（カヤックさんつながり）

---

※この話、どこかで聞いた気がするのですが出典が思い出せない。

5分でWordPressとかを準備できるfluxflexがすごい

○はじめに
最近fluxflexと言うクラウドサービスを使ってみているのですが、そのサービスがとても面白かったので、ちょっと紹介したいと思います。

URL: http://www.fluxflex.com/

fluxflexを使うと、自分が必要としている様々なプラットフォームを素早く、手軽に準備する事ができます。

○fluxflexって何なの？
fluxflexは分類で言うとPlatform as a service(PaaS)にあたるサービスです。
このサービスを使うと、WordPressのようなCMSや、Ruby on RailsのようなFrameworkをサーバ等も含めて貸し出してもらい、自由に使う事ができます。

自分でサーバーを買ってきて環境を構築するのと違って、とにかく早く、安く準備できます。

○fluxflexで何ができるの？
fluxflexではGithubにあるコードをインポートしてサーバを構築する事ができます。説明するよりやってみた方が分かりやすいと思うので、例としてfluxflexでWordPressを準備する手順を説明します。

無料で試せるのでぜひ実際にやってみてください。


Step1 サーバを立ち上げる

1. まず、アカウントを作成してログインします。
2. 左上にある「Create A New Project」を押します。
3. 好きなURLを指定します。

以上でサーバーが立ってしまいましたw 簡単すぎてヤバいです。この時点ではサーバーが立っただけでまだ何もできないので引き続きWordPressをインストールします。

※上記手順のスクリーンショット

2.Create A New Project

3.URLを指定

Step2 WordPressをインストールする

1. 左上にあるプロジェクト一覧からさっき作成したサーバを選びます。
2. Set Upタブを選びWord Pressのinstallボタンを押します。
3. しばらくして画面右上のステータスが「Available」になったら完了です。

さっき入力したURLにアクセスしてみると、WordPressの初期画面が表示されるはずです。

2.Set Up→WordPress install

URLにアクセスするとWordPressの初期画面が！

 以上で手順は終了です。この一連の手順でfluxflexのPaaSにWordPressの環境が構築できてしまいました。とにかく早く、手軽です。

fluxflexを使うと、WordPress以外にもRedmainとかRuby on Railsとか様々なソフトやプラットフォームが簡単に準備できます。公開用のURLも貰えるので個人で何かちょっとしたサービスを作りたい時には最適ですね。

無料版ではプロジェクトを一つしか作れませんが、課金すればもっとたくさんサーバを立てる事が可能です。

○感想
もし、上記の作業を全部自前でやるとしたら何日かかるか想像しただけでため息が出ます。にかく手軽で早いのがいいですね。気軽に何か試したり公開したい時には最高です。

まだ分からない点／不安な点としては、

• どのくらいの負荷に対応できるスペックなのか良くわからない。
• 他のサービスに移行したくなった時どういう手段があるのか気になる。（ソースはGithubにあるからいいとしてDBは移せるのかな・・・？）

と言った点が挙げられますが、気軽な用途に使うのなら、あまり気にしなくていい事なので追々いろいろ試してみたいと思います。ぜひ皆さんも試してみてください！

URL: http://www.fluxflex.com/


以上

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日本語リファレンス

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

○はじめに
皆さん、ATNDと言うイベントサイトをご存知でしょうか？
ATNDはリクルートが運営しているイベント情報サイトでイベント情報の告知や参加申し込みが出来るサイトです。
主にIT系の勉強会やカンファレンスの情報が登録されています。

今回、私は、このATNDをより便利に使えるようにする（ちょっとした）Webサイトを作成したので、今日はこのサイトの紹介をしたいと思います。

○サイトの名前、概要

「ATND RSS」
ATNDに登録されるイベントの内、自分が興味あるキーワードに関連するイベントをRSSで配信するサイトです。

URL http://atndrss.fluxflex.com/






○このサイトを作った動機
ATNDには素晴らしいイベントがたくさん登録されていてとても便利なのですが、以下のようなことで悲しい気分になった事はありませんか？

• 大人気のイベントに申し込もうとしたらすでに人数いっぱいで予約出来なかった。
• 大変面白そうなイベントがあったがすでに終了していた。

私も何回か上記のような出来事があって「自分が興味を持っているイベントが登録されたら速攻で知りたいなあ・・・」と日頃から思っていたので、このサイトを作成しました。

○ATND RSSを使うと・・・？
ATND RSSを使うと、自分が興味あるキーワード（例えば「Android 勉強会」）に一致するイベントがATNDに登録されたとき、すぐにイベントの情報がRSSに配信されます。
これで自分が興味のあるイベント情報を逃しません。

ATNDとRSSをお使いの方はぜひ、ATND RSSを使って、素晴らしいイベントライフを送ってください。

○今後の予定など
以上でATND RSSの説明は終わりです。ATND RSSはまだ、何日か前に開発に着手したばかりで不完全な部分が沢山あります。このWebサイトに関連した今後の予定についてつらつらと書きたいと思います。
【今後の予定】

• ATND RSSは現在IE8に対応していない（！）ので、まずはIE8でも使えるように改修を行いたい。
• RSSを使っていない人も多いと思うので、他の媒体（メールとかtwitter bot？）でもイベント情報をお知らせできるようにしたい。

以上