アシアルブログ

アシアルの中の人が技術と想いのたけをつづるブログです

日本語版「Stack Overflow」のAPIを利用してみた!

こんにちは、渡辺です。
去年12月16日に「Stack Overflow」の日本語版がパブリックベータとして公開されましたね。
公開からちょうど一ヶ月の1月16日(20時現在)の利用状況は下記のとおりで、質問すると高確率で回答がもらえるんですね。

 ユーザー数:5458人
 質問数:782件
 未回答質問:92件

今回は、今後ますます活発化する日本語版「Stack Overflow」をAPIで扱う方法を紹介します。
利用方法は簡単です。Stack Overflowからの情報取得だけであれば、API利用のための登録作業も必要ありません。
また、APIに問い合わせるURLは「StackExchange api」で作成することができます。下記の紹介もStackExchange apiで作成していきます。

■特定のタグを持つ質問を取得する


今回は「javascript」タグを持つ質問を取得したいと思います。
まず、https://api.stackexchange.com/docs/questionsにアクセスして、tagged欄に「javascript」を入力します。



このまま「Run」ボタンをクリックすると英語版「Stack Overflow」の結果が返ってきてしまうので、リンクをクリックして、新規タブを開き、URLの「site=stackoverflow」を「site=ja.stackoverflow」に変更します。

この手順で下記のURLが作成されました。

【リクエストURL】


https://api.stackexchange.com/2.2/questions?order=desc &sort=activity &tagged=javascript &site=ja.stackoverflow


これだけで、「javascript」タグが付いている質問が取得できました。
(※下記はページの都合上1件に絞った結果です。)


{
    items: [
        {
            tags: [
                javascript
                ,css
                ,jquery
            ]
            ,owner: {
                user_type: does_not_exist (string)
                ,display_name: user7487 (string)
            }
            ,is_answered: false (boolean)
            ,view_count: 21 (number)
            ,answer_count: 0 (number)
            ,score: 1 (number)
            ,last_activity_date: 1421460965 (number)
            ,creation_date: 1421459774 (number)
            ,last_edit_date: 1421460965 (number)
            ,question_id: 4715 (number)
            ,link: http://ja.stackoverflow.com/questions/4715/jquery-%e3%81%a7-%e3%82%b9%e3%82%af%e3%83%ad%e3%83%bc%e3%83%ab%e8%bf%bd%e5%be%93%e5%9e%8b%e3%81%ab%e3%83%a1%e3%83%8b%e3%83%a5%e3%83%bc%e3%82%92%e3%82%ab%e3%82%b9%e3%82%bf%e3%83%9e%e3%82%a4%e3%82%ba%e3%81%97%e3%81%9f%e3%81%84 (string)
            ,title: jQuery で、スクロール追従型にメニューをカスタマイズしたい (string)
        }
    ]
    ,has_more: true (boolean)
    ,quota_max: 300 (number)
    ,quota_remaining: 205 (number)
}


■取得する質問件数を増やす


次は、ページングを使って取得件数を変更しようと思います。
APIメソッドで取得できる件数は、初期状態では30件となっていますが、最大件数である100件を取得したいので、「pagesize」を100に設定します。また、次の100件を取得する場合は、「page」を2に設定します。



【リクエストURL】


https://api.stackexchange.com/2.2/questions?page=1 &pagesize=100 &order=desc &sort=activity &tagged=javascript &site=ja.stackoverflow


■期間を指定して取得する


期間を指定して質問を取得します。今回は、一ヶ月以内の質問を取得するようにしました。
「fromdate」と「todate」を設定するだけです。



【リクエストURL】


https://api.stackexchange.com/2.2/questions?page=1 &pagesize=100 &fromdate=1418688000 &todate=1421366400 &order=desc &sort=activity &tagged=javascript &site=ja.stackoverflow


■人気順で質問を取得する


apiで用意されているソートを利用することで、
日本語版StackOverflowトップページの「人気」タブと同じ結果を取得することができます。



【リクエストURL】


https://api.stackexchange.com/2.2/questions?page=1 &pagesize=100 &fromdate=1418688000 &todate=1421366400 &order=desc &sort=hot &tagged=javascript &site=ja.stackoverflow


ソートは6種類あり日本語版StackOverflowの記述に当てはめると、下のようになります。

・activity – アクティブ
・creation – 質問日時
・votes – 票数
・hot – 人気 (トップページのタブと同じソート(minとmaxは利用できないタイプのソート)
・week – 今週 (トップページのタブと同じソート(minとmaxは利用できないタイプのソート)
・month – 今月 (トップページのタブと同じソート(minとmaxは利用できないタイプのソート)

■質問だけでなく回答も取得する


「フィルター」を利用することによって、回答の取得ができるようになっています。フィルターの「edit」ボタンをクリックして、「answer」→「body」にチェックすることで取得できるようなります。



【リクエストURL】


https://api.stackexchange.com/2.2/questions?page=1 &pagesize=100 &fromdate=1418688000 &todate=1421366400 &order=desc &sort=hot &tagged=javascript &site=ja.stackoverflow &filter=!9YdnSM68i



また、フィルターには下記の種類が用意されているので、「withbody」を利用することでも回答内容を取得することができます。

 ・default : 各種の型が持っているデフォルトフィルターが適用される
 ・withbody : デフォルトフィルターと各種型のbodyフィールドが含まる
 ・none : 空が返却される
 ・total : totalフィールドが返却される


「withbody」を利用する場合は下記の内容となります。

【リクエストURL】


https://api.stackexchange.com/2.2/questions?page=1 &pagesize=100 &fromdate=1418688000 &todate=1421366400 &order=desc &sort=hot &tagged=javascript &site=ja.stackoverflow &filter=withbody


「total」を利用すると下のような結果が返ってきました。


{
    total: 63 (number)
}


【リクエストURL】


https://api.stackexchange.com/2.2/questions?page=1 &pagesize=100 &fromdate=1418688000 &todate=1421366400 &order=desc &sort=hot &tagged=javascript &site=ja.stackoverflow &filter=total


ちなみに、本家StackOverflowの利用状況をapiで問い合わせたところ、下の値が返ってきました。ユーザー数が300万人以上いるんですね。そして、1分あたりに約2件の質問と、4件の回答が投稿されているとは、スゴイです。日本語版も期待しています!!それでは!


{
    items: [
        {
            new_active_users: 24 (number)
            ,total_users: 3854376 (number)
            ,badges_per_minute: 3.61 (number)
            ,total_badges: 12258396 (number)
            ,total_votes: 57183608 (number)
            ,total_comments: 40947181 (number)
            ,answers_per_minute: 4.31 (number)
            ,questions_per_minute: 2.55 (number)
            ,total_answers: 14656651 (number)
            ,total_accepted: 4958394 (number)
            ,total_unanswered: 2222839 (number)
            ,total_questions: 8681213 (number)
            ,api_revision: 2015.1.16.13962 (string)
        }
    ]
    ,has_more: false (boolean)
    ,quota_max: 300 (number)
    ,quota_remaining: 183 (number)
}


【リクエストURL】
>>BOXNC
https://api.stackexchange.com/2.2/info?site=stackoverflow

Backbone.js 入門してハマったポイントと対策





Backbone.js とは JavaScriptフレームワークです。
http://backbonejs.org/

Backboneをはじめて利用するにあたってハマったポイントと対策に
JSフレームワークについての感想を簡単に書いてみました。

ハマってみるのも醍醐味かもしれませんが、時間の無駄とも言わざる得ないので
同じように困った方のためになればいいなぁ、と自戒を込めて記録しようと思います。

ちなみにエラーメッセージはちゃんと出るんですが、どこで起きてるエラーなのか
突き止めるのに時間が掛かったりします。
エラーメッセージに慣れてくると「あ、これ見たことあるエラーだ」とハマる時間も減ります。


◯エラーメッセージと対策



※開発中はChromeでも確認していたので、Chromeのエラーメッセージとなります。
※凡ミスだらけですが、ご了承ください。

・Uncaught TypeError: Cannot call method 'append' of undefined


 コレクションを_.eachでビューに出力するとき、_.eachのコンテキストにthisを指定し忘れていた。

・this.set is not a function


 Backbone.Modelを継承したモデルオブジェクトをインスタンス化するときに new を付け忘れていた。

・Uncaught TypeError: Object #<Object> has no method 'replace'


 _.template()を使っているあたりが原因。2パターンやらかしました。
 1: .html() の引数が間違っていた。
 2: メンバに template() を定義しているのに this.template() ではなく _.template() を呼び出そうとしていた。

・Uncaught TypeError: Object {メソッド名} has no method 'call'


 モデルにバインドしたメソッド(第二引数)を "saveAll" と指定していた。正しくは this.saveAll

・フォームでコレクションに追加したビューが2つ出力されてしまった


 collection.add() と collection.create() を同時に実行していたから。
 add()はコレクションに追加してaddイベント発火
 create()はコレクションとストレージへ追加してaddイベント発火(addイベントは発火しないと思っていた)


◯JSフレームワークについて



触るだけならAngularとか色々触っていたのですが、実際の開発では初めて使いました。これまでjQueryだけでガリガリとイベント駆動開発していたのですが、やはりBackboneのような何らかのJSフレームワークで仕組みを提供してくれるとリファクタリングとか、大分楽です。

また、なぜBackboneなのかについては、私の場合は評判が悪くないすぐに使えそうなフレームワークでだったからです。実際他のフレームワークより情報が多かったので助かりました。ただ、向き不向きが存在するJavaScriptフレームワークはシーンによって使い分けることも大切だと思いました。

今回の経験を活かして、何かないかと思ったけど、サーバサイドと連携したRESTfulなアプリケーションぐらいしかパッと思いつかなかったので、そういったのもやってみたいなと思いました。


◯Backboneで参考になったサイト


 http://backbonejs.org/
 http://todomvc.com/architecture-examples/backbone/
 http://www.adventar.org/calendars/15
 http://qiita.com/items/03f49c64d6c4bacdbb26
 http://dotinstall.com/lessons/basic_backbonejs


一言:ついにサドル付きの自転車を購入しました!

「ノン・プログラマのためのPHP入門 10日間コース」

今回のテーマは、このブログの右サイドにも掲載されている書籍「ノン・プログラマのためのPHP入門 10日間コース」の紹介です。アシアルの海原と笹亀が執筆した本で、アシアルPHPスクールの集大成ともいえる本です。



「考える」より「慣れる」が一番。帯に書かれているとおり、プログラミングを習得するには、まず自分の手で作って、その実行結果を目で確かめるのが一番です。PHPコンパイルする必要もなく、直感的に理解しやすい構造をもつので、最初の環境さえ整えれば「サクサク」書いて試してみることができます。すなわち、プログラミング未経験者にとっても、取りかかりやすい言語と言えます。

この本を制作する際に特に重視したのは、

実務で必要なテクニックを身につける!

セキュリティ(入力データチェックやCSRF対策など)を意識した内容となっています。せっかく使ったけど、実務では使えないでは意味がないですよね。「初心者向けだから難しそうなことは省略する」ということはせず、実際の実務で使えるプログラミング・テクニックを盛り込んでいます。

作ることを実感できる!

一つのアプリケーションの作成を通してプログラミング技術を身につけます。10日間の作業が完了すると、ユーザー入力画面と管理画面を備えたアンケート・アプリケーションが完成します。コツコツと積み上げながら一つのものを完成させる充実感を実感していただけたらと思います。

他、以下のことも考慮して制作しました。

・Web制作に必要なものは何かを考え抜き、その上で取り上げるテーマを設定(SmartyPEARのDBライブラリ、MySQLなど)
・プログラミング未経験者でも途中で挫折しないように、ワンステップずつわかりやすく解説
Windowsだけでなく、MacLinuxのユーザーでも使えることを意識

正にノン・プログラマの自分ですが、そんな自分がPHPを理解するのに非常に有益な本です。もっと早く欲しかった・・^^;
※ 基本、自分はプログラミングをしていませんが、テンプレートの修正やデータ参照などで非常に重宝しています。

出版して1月半ほど経ちますが、徐々に読者様からの声も寄せられており、「自分のプログラミング経験をまとめたこの本に対して、読者の皆さんから『この本を読んで、PHPがわかるようになった!』などの好評いただいていることに感激です」と執筆者もコメントしております。

是非、今後も、本を読んだ率直な感想を我々に返していただけると幸いです!

>>BOXNC
【書籍目次】

0day PHPプログラミングを行う前に
PHPプログラミングを行う前に、PHPとは?何かを知り、PHPを動作させ実習を行う環境を整えます。

1st day PHPの基礎とPHPの言語構造
PHPスクリプトの記述方法、プログラムの基礎要素などを実際のスクリプトと実行結果を照らし合わせながら説明します。また、Webブラウザ・Webサーバ間のデータのやり取りについての知識を身につけます。

2nd day PHPでWebアプリケーション作成時の注意事項と構築手順
文字化け問題に対処する方法を身につけます。また、本書で一貫して作成するアンケート・アプリケーションの設計を通じて、Webアプリケーションの設計手法について学びます。

3th day セッションを使ったWebアプリケーション
ユーザーログインなどに使用されるセッション機能について、実際にスクリプトを記述してセッションの流れを確認しながら、その仕組みを学び理解を深めます。

4th day Smartyを使う
Smartyの基本的な使い方、PHPにおけるSmartyの役割を学んだ上で、実用的なWebアプリケーション開発に効果的な、高度なSmartyの使い方について習得します。

5th day 入力データのチェック
アンケート入力フォームに入力されたデータをチェックするエラー機能を実装する方法を学んだ上で、入力データの確認画面の作成します。

6th day PHPとデータベースの連携
MySQLを使用してデータベースの使い方を学びます。PHPとデータベースを連携させ、Webアプリケーションからデータベースを使う方法を習得します。

7th day PHPPEARモジュール
PEARとは何か?、どうやってPEARを使うのかについて学び、アンケート・アプリケーションでPEARのDBライブラリを使用して、データを登録する方法を学びます。ここまでで、ユーザー表示側の機能が完成します。

8th day アンケート・アプリケーションの管理画面作成
ここから、アンケート・アプリケーションの管理画面の作成を行います。まずは、管理画面の入り口となるログイン機能を実装し、次に投稿されたアンケート・データの一覧表示、検索機能を実装します。

9th day 管理画面からのデータの修正と削除
管理画面の機能強化を行います。管理画面から、アンケート・データを修正・削除する機能を実装します。ここまでで、Webアプリケーションの基本的な動作である登録・修正・削除・検索を行うことができるようになりました。

10th day アンケート情報の出力と集計
表現を豊かにするために、CSVデータ出力、グラフ出力、PDF出力の3つの出力方法について習得します。