「AngularJS」と「はてブAPI」で作るChromeアプリの作り方を完全公開！ -

f:id:paiza:20160108151233j:plain
どうも、まさとらん（@0310lan）です。

今回は、Googleが提供する「Chromeブラウザ」で動作するアプリケーションを作ってみたいと思います。

「なんだか難しそう…」と思うかもしれませんが、ざっくり言ってしまうと普通に「Webページ」を作るのと変わりません。

そこで、簡単なサンプルアプリを作りながら、自分だけのChrome アプリ開発に挑戦してみましょう！

■Chromeアプリとは？

開発を始める前に、まずは予備知識としてChromeアプリの「種類」についてご紹介しておきます。

実は、「Chromeアプリ」と言っても、いくつか異なる種類があります。

例えば、「Appspector」というChromeアプリは、ブラウザの機能を拡張することで、表示されているWebページがどんな技術を利用して作られているのかを表示できるようになります。（https://chrome.google.com/webstore/detail/appspector/homgcnaoacgigpkkljjjekpignblkeae?utm_source=chrome-app-launcher-info-dialog）

また、人気の「Pocket」は、ブラウザのメニューバーに「ボタン」を追加し、クリックすることで独自の機能を実行できます。（Save to Pocket - Chrome Web Store）

f:id:paiza:20160108151750j:plain

さらに、「Chrome Dev Editor」は、まるでデスクトップアプリのように、単独でウィンドウを持つアプリケーションとして動作することができます。（Chrome Dev Editor - Chrome Web Store）

f:id:paiza:20160108151837j:plain

このように、いくつか挙動の違う動作をするアプリが開発できるので、自分が作りたいアプリがどのタイプに適しているのかを確認する必要があります。

そこで、ぜひチェックしておきたいのが「Chromeウェブストア」でしょう！（Chrome Web Store）

f:id:paiza:20160108151934j:plain

「App Store」や「Google Play」のように、さまざまな種類のChromeアプリを総合的に検索できます。

先ほど紹介したようなアプリや、拡張機能、ゲームまで、ジャンル別にまとめられているので、まずはこちらで面白そうなモノをピックアップしてみると良いでしょう。

■必要なファイルを揃えよう！

それでは、ここから「Chromeアプリ」の開発に挑戦していきましょう！

今回は、「Pocket」のChromeアプリみたいに、ボタンをクリックすることで表示しているWebページの「はてブコメント」を自動収集するサンプルを作ってみようと思います。

そこで、まずは作り方を覚えるために、「Hello World!」と表示するだけの単純なアプリから作ってみましょう！

最低限必要となるファイルは…

HTMLファイル(index.html)
画像ファイル(icon.png)
マニフェストファイル(manifest.json)

の3つになります。

まず、「HTMLファイル」ですが、これは通常のWebページを作るのと同じで、文字を表示するだけなら以下の内容でOKでしょう。

<!doctype html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>サンプルデモ</title>
    </head>
    <body>
        <p>Hello world!</p>
    </body>
</html>

「body要素」内に「Pタグ」で、「Hello world!」と表示するようにしています。

次に、画像ファイルを用意します。

これは、ブラウザのメニューバーに表示させる「ボタン」のアイコンになるのですが、自分の好きな画像や「Pixlr」などで自作しても良いでしょう。（Online Photo Editor | Pixlr Editor）

f:id:paiza:20160108152224j:plain

そして、自分で作ったアプリをChromeブラウザへ認識してもらうために必要なのが、JSON形式の「マニフェストファイル」になります。

今回作成する「マニフェストファイル」はこんな感じになります。

{
    "manifest_version": 2,
    "name": "サンプルデモ",
    "version": "0.0.1",
 
    "browser_action": {
      "default_icon": "icon.png",
      "default_popup": "index.html"
    }
}

注意点として、「manifest_version」「name」「version」の3項目は、必ず記載しなければいけない点を忘れないようにしましょう。

manifest_version：公式サイトを確認し、最新版である「2」を記載。（Manifest File Format - Google Chrome）
name：開発するアプリ名を記載。
version：開発するアプリのバージョンを記載。

※「name」と「version」は、開発者が自分で決めることになります。

そして、今回はブラウザのメニューバーに「ボタン」を追加するため、「browser_action」を記載しています。

default_icon：アイコン画像の場所を記載。
default_popup：HTMLファイルの場所を記載。

このように書くだけで、ボタンをクリックすると「index.html」が読み込まれるようになります。

■Chromeアプリを実行してみよう！

先ほど作ったファイルを、「app」フォルダにまとめると以下のような構成になっていると思います。

	app--- index.html
	       |-- icon.png
	       |-- manifest.json

そして、Chromeブラウザの「拡張機能ページ」を開き、「デベロッパーモード」にチェックを入れて、読み込みボタンから「app」フォルダを指定すればOKです！
f:id:paiza:20160108153922j:plain

ブラウザのメニューバーに表示された「ボタン」をクリックすると、見事に「Hello world!」が表示されますね。
f:id:paiza:20160108153929j:plain

つまり、ボタンをクリックすることで、HTMLファイル内の「body要素」の中身がポップアップで表示されるというわけです。

■「はてブコメント」を収集する方法！

さて、いよいよ本題に入りますが、「Hello world!」を表示するのではなく、今見ているWebページの「はてブコメント」を収集するにはどうすれば良いでしょうか…？

ポイントは2つあります。

1つ目は、「はてブコメント」の取得方法で、これは公式に公開されている「はてなブックマーク」のAPIを利用するのがベストでしょう。（はてなブックマークエントリー情報取得API - Hatena Developer Center）

ドキュメントを読むと、以下のURLを送信するだけで「はてブコメント」がJSON形式で取得できるのが分かります。

https://b.hatena.ne.jp/entry/jsonlite/?url=取得したいWebページのURL

ちなみに、送信するURLには「json」と「jsonlite」の2種類ありますが、上記のように「jsonlite」を指定した方が、関連記事情報を取得しない代わりに高速なレスポンスになるのでオススメです！

さて、あとは「はてブコメント」を取得したいURLを入手すれば、当初の目的を達成できることになります。

ここで2つ目のポイントである「対象のWebページのURL」を取得する方法が必要になるわけです。

実は、Chromeブラウザの各種機能は、JavaScriptから簡単に扱えるように便利なAPIが多数用意されています。（JavaScript APIs - Google Chrome）

このAPIを使うことで、現在開いているWebページのURLを簡単に取得することが出来るようになっているのです。

今回は、Chromeブラウザの「タブ」情報を利用できる「chrome.tabs - Google Chrome tabs」というAPIを利用してみました。（chrome.tabs - Google Chrome）

URLを取得するのは簡単で、以下のように書けば変数「tab」から、さまざまなデータを取得することができます。

chrome.tabs.getSelected(null, function(tab) {

　　//「tab.url」で今開いているWebページのURLが取得可能

});

このように、ChromeのAPIを利用すれば多彩なことが実現できるのですが、1点だけ注意が必要です。

それは、「マニフェストファイル」に追記が必要な点です。

具体的には、「permissions」の中へ今回利用する「tabs」を記載します。

"permissions": [

"tabs"

],

"content_security_policy": "script-src 'self' https://b.hatena.ne.jp; object-src 'self'"

また、今回は異なるドメインである「はてなブックマーク」の外部APIも取得する必要があるので、「content_security_policy」にドメインを記載するのを忘れないようにしましょう。

さて、ここまで来れば、「はてブコメント」を収集するChromeアプリが開発できそうです。

■実際に作ってみよう！

それでは、実際にChromeアプリを作っていきましょう！

コードを簡単にするため、今回は「AngularJS」を利用してプログラミングしてみようと思います。

ファイル構造としては、以下のようになります。

	app--- index.html
	       |-- icon.png
	       |-- manifest.json
	       |-- style.css
	       |
	       |-- js---angular.min.js
	       |-- main.js

まずは、アプリを分かりやすくするために、HTMLファイルを改良して「はてブコメント」を取得する大きなボタンを表示させるようにしました。
f:id:paiza:20160108153322j:plain

この「取得開始」ボタンをクリックすることで、ポップアップウィンドウ上に「はてブコメント」をすべて表示するようにしたいと思います。

そこで、「buttonタグ」に「ng-click」でAngularJSのイベント処理を設定しておきます。

<button class="main-btn" ng-click="getUrl()">取得開始</button>

これで、メインのJavaScriptファイルに「getUrl()」イベントをプログラミングすることで、アプリを動作するようにしていきます。

あと、ついでに「はてブ数」も表示するようにしたいので、「result」という変数を用意しておきます。

<p class="main-count">{{result}}</p>

はてブコメントに関しては、「comments」という配列を用意し、AngularJSの「ng-repeat」ですべてのコメントを一覧表示するようにしました。

<ul class="main-comment">
　　<p class="main-comment-title">コメント一覧</p>
　　<li class="main-comment-text" ng-repeat="comment in comments">{{comment}}</li>
</ul>

次に、メインとなるJavaScriptファイルですが、大まかな骨組みは以下のようになります。

angular.module('myApp', [])
.controller('mainCtrl', ['$scope', '$http', function($scope, $http) {
		var pageUrl; //対象URLの保持
		$scope.result; //はてブ数の保持
		$scope.comments; //はてブコメントの保持

//開いているWebページのURLを取得
chrome.tabs.getSelected(null, function(tab) {
pageUrl = tab.url;
});
        
//イベント処理
$scope.getUrl = function() {
	//ここに処理を書く
}

}]);

前述のとおり、現在の「WebページURL」を取得するため、Chrome APIの「tabs」を使ったコードを記載しています。

あとは、「getUrl()」のイベント処理を組み立てるだけです。

イベント処理の中身ですが、「はてブコメント」を取得する処理は、AngularJSの「$http」を使うと簡単に実現できます。

$scope.getUrl = function() {

//はてブコメントの取得
$http.jsonp('https://b.hatena.ne.jp/entry/jsonlite/', {
　params: {
　　callback: 'JSON_CALLBACK',
　　url: pageUrl
　}
})
//正常に取得できた時の処理
.success(function(data) {

})
//取得できなかった時の処理
.error(function(err) {

});

};

そして、正常に「はてブコメント」を取得できたら、変数「data」の中に「はてブ」のデータが格納されることになります。

あとは、はてなブックマークのAPIを使って、「はてブ数」を取得する場合は「data.count」を、コメントを取得する場合には「data.bookmarks」を利用すればOKです！

.success(function(data) {

//全ての「はてブコメント」を格納する配列
var comments = [];

//はてブ数の取得
$scope.result = data.count + " users";

//はてブコメントを1つずつ配列に格納
angular.forEach(data.bookmarks, function(value, index) {
　if(value.comment !== '') {
　　comments.push(value.comment+"　("+value.timestamp+")");
　}
});

$scope.comments = comments;
})

「data.bookmarks」は配列になっているので、AngularJSで用意されている「angular.forEach()」を利用して、1つずつ「comments」へ格納してからHTMLファイルの「ng-repeat」を使って一覧表示します。

また、「value.timestamp」を利用することで、コメント投稿日時も同時に取得できるので便利です。

以下のURLから、今回作ったすべてのソースコードを確認することができます。

github.com

■早速「はてブコメント」を収集してみる！

それでは、実際にChromeアプリの動作確認をしてみましょう！

はてブコメントを取得したいWebページをブラウザで開き、「取得開始」ボタンをクリックします。
f:id:paiza:20160108153540j:plain

すると、見事に「はてブ数」と「はてブコメント」が一覧で表示されました！
f:id:paiza:20160108153552j:plain

今回作ったChromeアプリは、特にブログ記事などで読者の反応を知りたい時などに、素早くシンプルにコメントを読めるので重宝するかもしれませんね。

■paizaについて

f:id:paiza:20150730172136p:plain
paizaでは、プログラミングスキルチェック問題(9言語に対応)を多数ご用意いたしております。もちろん今回使用したJavaScriptにも対応しておりますので、「JavaScriptでプログラミング問題を解いてみたい」「自分のスキルを試してみたい」という方にもピッタリです！

そして、paizaでは、Webサービス開発企業などで求められるコーディング力や、テストケースを想定する力などが問われるプログラミングスキルチェック問題も提供しています。

スキルチェックに挑戦した人は、その結果によってS・A・B・C・D・Eの6段階のランクを取得できます。必要なスキルランクを取得すれば、書類選考なしで企業の求人に応募することも可能です。「自分のプログラミングスキルを客観的に知りたい」「スキルを使って転職したい」という方は、ぜひチャレンジしてみてください。

さらに、paizaが運営する無料オンラインプログラミング実行環境サービス「paiza.IO (パイザ・アイオー)」では、JavaScriptはもちろん、多数プログラミング言語のプログラミングが面倒な環境構築なしに無料でできますのでぜひご利用ください！