Qiitaの記事をミサワで彩る

9006 ワード
Chrome Qiita ネタ LINQ Qiita テキストリンク

Qiitaの文化

Qiitaの開発チーム文化にミサワがあるそうです

曰く

例えばチャットやgithub上のオンラインコミュニケーションでは，感情面の情報が大きく欠落するため少しずれた形で伝わってしまうこともよくあります．

それを回避するために

オンラインでは直接口頭で話すとき以上に言葉遣いを丁寧にする
コードレビューはあくまでコードを批判しているのであって，書き手を批判しているととらわれないように注意する
絵文字や画像を積極的に使う
(省略)
ちなみに弊社ではチャットに’misawa’と書くとミサワ画像をランダムに貼ってくれる便利なbotがいます．

なのだそうです。素晴らしい文化ですね！！
そんなQiitar達がぜひ使えばいいんじゃないかなというChrome拡張を見つけたので紹介します。

みさわ

hrysd / misawa_md - Github
作者ブログ Githubにおけるコードレビューを快適にするChrome拡張をつくった。

使い方（上記作者ブログより）

  1. Chrome ウェブストアからダウンロードする。
  2. 右上に追加されたMISAWAの顔をタッチ！
  3. 使用したい画像をクリック！
  4. クリプボードにコピーされるので cmd + v で貼付ける。
  5. すてきなやりとりの完成

簡単ですね！！

と使い方の説明だけだとこれで話が終わってしまうので、せっかくだからどんな作りになっているのかも勉強がてらあさってみました。

仕組み

中身を見てみましょう。

manifest.json

どれどれ。どんな拡張なのかと覗いてみましょう。

manifest.json
{
  "name": "MISAWA::MD",
  "version": "0.9",
  "description": "markdown形式で名言をコピーします。",
  "manifest_version": 2,
  "icons": {
    "128": "images/icon_128.png",
    "48": "images/icon_048.png",
    "16": "images/icon_016.png"
  },
  "browser_action": {
    "default_icon": "images/icon_019.png",
    "default_title": "MISAWA::MD",
    "default_popup": "popup.html"
    },
  "permissions": [ "http://cloud.github.com/*/*", "clipboardWrite"]
}

なるほど！
どうやらブラウザの右上にアイコンを出して（popup.htmlと書いてあるところ）、http://cloud.github.com/なんとか/かんとかにアクセスして動作するChrome拡張のようです。

スクリプト

リポジトリのsrc/javascriptsディレクトリを覗いてみました。
jquery.js linq.min.js popup.jsというファイルがあります。

jQuery.js

こいつがなにかは、ここを見るような人ならだいたい知っているでしょう。
version1.7を使っているみたいです。後述のLINQがminifyされているのに、こちらが生のままなのは謎です。

linq.js

存在を初めて知ったのですが、要はUnderscore.jsやLo-Dash、Lazy.jsなどのような、データの配列処理などをサポートするライブラリです。
一部のメソッドは、Underscore.jsよりかなり高速で動作するようです。

underscore_vs_linq.coffee
array = [1,2,3,5,8,13,21,33]

## 偶数だけ二倍して出力
# linq
Enumerable.From(array)
.Where((x) ->x % 2 is 0)
.Select((x) -> x * 2)
.ForEach((x) -> document.writeln x)

# Underscore
_(array)
.filter((x) ->x % 2 is 0)
.map((x) -> x * 2)
.each((x) -> document.writeln x)

popup.js

jQueryをポップアップのDom取得とAjax通信に、LINQ.jsをAPIから取得したjson処理に使っているようです。
検索フォームの入力文字列は、ミサワ絵のタイトル、キャラクタ名、絵の中のカッコイイ言葉のすべてを検索するようです。

ちょっと良くわからないのが、APIにhttp://cloud.github.com/downloads/june29/horesase-boys/meigens.jsonを指定しているところ。
多分 june29 / horesase-boys - Githubを動作させて、データのつまったmeigens.jsonを取得していいると思うのだけど……
cloud.github.comってなんざんしょ。

みさわ

その他参考サイト

Chrome Extensions API リファレンス...公式文書の非公式日本語翻訳版です。
Chrome Extensions API(本家)...英語に拒否反応を起こしたのでほとんど読んでません。