☺️ 🌋 👂🏿 GrabDuck：StackExchange APIを介したStackOverflowとの統合 🙎 👩‍👧 👶🏼

読者への挨拶、

今日は、StackOverflowなどのこのファミリーのサイトからデータを受信するために、StackExchange APIを使用する方法について説明します。また、StackExchangeでこのAPIを使用するアプリケーション/サイトを宣伝する機会があるかどうかを検討し、最終的に、GrabDuckでSOとの統合がどのように見えるかを示します。

に興味がありますか？猫をお願いします。

エントリー、またはStackExchangeの理由

GrabDuckについて詳しくない場合は、短い説明を行います（詳細については、前の記事「 GrabDuck：ブックマークの新しい外観」を参照してください）。

そのため、GrabDuckでは、ユーザーはブックマークを保存し、全文検索を使用して必要なドキュメントを検索できます。応答するシステムは、ユーザーが保存したものを返し、これらの素材も興味深いと考える場合、他のユーザーのブックマークも表示します。

このサービスの主なアイデアは、さまざまなソースから保留中のページを1か所で収集し、検索の普遍的なメカニズムを提供するセンターとして機能することです。

StackExchangeを選ぶ理由保存されたドキュメントの統計を分析すると、HabrやStackOverflowなどのIT指向のサイトから多くのブックマークがあるという結論に達しました。これらのサイトにより、ユーザーは記事や質問からお気に入りを作成できます。「ここで」と考えたのは、「ユーザーがGrabDuckのこれらのサービスからブックマークの定期的な更新を構成および受信できる別のソースです。」彼らはStackOverflowから始めることにしました-これはここだけでなく海外でも人気のあるリソースであり、理解しやすいシンプルなパブリックAPIと大きなコミュニティを持っています。

したがって、私たちのタスクは、選択したStackOverflowからの質問を同期させることです。ロシアのStackOverflowに近いサイトを見てみましょう。

StackExchange API

おそらく誰もが知っているように、StackExchangeは1つではなく、サイトのグループ全体（またはStackExchangeの用語では-コミュニティ）であり、1つのアイデア：質問と回答によって結ばれています。最も人気のあるものは、何らかの形でITトピックに関連しています。これらはStackOverflow、ロシア語版のStackOverflow、AskUbuntu、ThinkDifferent、SuperUserなどです。

APIを学習するための出発点はhttps://api.stackexchange.com/docsです

便利な点は、どのサイトと通信する必要があるかは関係ありません。StackExchangeは、すべてのサイトに単一のAPIを提供します。つまり、すべてのサイトに対して同じリクエストを生成し、api.stackexchange.comに送信することができます。どのサイトで問題を解決するかを決定するには、特別なパラメーター（ サイトパラメーター）を設定する必要があります。その結果、各サイトから個別に異なる回答を受け取ることができます。

リクエストを送信するには2つの方法があります。

通常どおり、HTTPリクエストをapi.stackexchange.comに送信し、JSON応答を受信するか、
stackexchange.com自体の特別なフォームを使用します。このフォームを使用して、この機能がどのように機能するかを事前に確認できます。または、リクエストを簡単に入力してアプリケーションに転送することもできます。

APIはオープンです。つまり、事前の登録なしで使用できますが、リクエストの数は1日あたり300に制限されています。より多くの要求（1日あたり最大10,000）を送信できるようにするには、アプリケーションの特別なキーを登録して取得することをお勧めします。サイトのフォームを介してAPIを操作する場合、API呼び出しの回数も1日あたり10,000に制限されます。

しかし、十分な言葉で、ビジネスに取りかかりましょう。ロシアのStackOverflow （最近のHashCode.ruとしても知られている）でユーザーが保存したお気に入りのリストを取得することがタスクであることをもう一度思い出させてください。サイトのフォームを使用して作業します。

最初に、stackoverflow.ruで処理するもの、つまり、リクエストのサイトパラメーターをどのように設定するかを設定する方法を理解する必要があります。 StackExchangeに関連するすべてのサイトのリストを参照してください。これを行うには、サイトのドキュメントセクションに移動して、リクエストを実行します。

https://api.stackexchange.com/2.2/sites

ロシア語でStackOverflowが必要な結果を探します

..., { "styling": { "tag_background_color": "#FFF", "tag_foreground_color": "#000", "link_color": "#0077CC" }, "related_sites": [ { "relation": "meta", "api_site_parameter": "meta.ru.stackoverflow", "site_url": "http://meta.ru.stackoverflow.com", "name": "Stack Overflow   Meta" }, { "relation": "chat", "site_url": "http://chat.stackexchange.com?tab=site&host=ru.stackoverflow.com", "name": "Chat Stack Exchange" } ], "aliases": [ "http://hashcode.ru", "http://stackoverflow.ru" ], "markdown_extensions": [ "Prettify" ], "open_beta_date": 1427414400, "closed_beta_date": 1427414400, "site_state": "open_beta", "favicon_url": "http://cdn.sstatic.net/ru/img/favicon.ico", "icon_url": "http://cdn.sstatic.net/ru/img/apple-touch-icon.png", "audience": "", "site_url": "http://ru.stackoverflow.com", "api_site_parameter": "ru.stackoverflow", "logo_url": "http://cdn.sstatic.net/ru/img/logo.png", "name": "Stack Overflow  ", "site_type": "main_site" },...

受信したオブジェクトには、必要なサイトに関するすべての必要な情報が含まれています。たとえば、作成者（ オーディエンス ）、 ファビコンおよびサイトの大きな画像（ favicon_urlおよびison_url ）がオーディエンスを配置する方法、 特定の目的（ スタイリング ）に必要なカラースキームなど。さらに、API呼び出しに必要なパラメーター（ api_site_parameter ）が表示されます。これはru.stackoverflowです。

これで、特定のユーザーのお気に入りのリストのリクエストを作成するためのすべてのデータができました。例として、お気に入りに質問があるID 16095の任意のユーザーを選択します。

[ ユーザー-お気に入り]ページに移動します（ドキュメントセクションからも利用できます）

必要なパラメーターの要求を修正して実行します。

https://api.stackexchange.com/2.2/users/16095/favorites?order=desc&sort=activity&site=en.stackoverflow

その結果、必要なもの、つまり特定のユーザーの「お気に入り」のリストが得られます。

 { "items": [ { "tags": ["maven","java","idea","resources"], "owner": { "reputation": 11, "user_id": 25194, "user_type": "registered", "profile_image": "https://www.gravatar.com/avatar/7b745015819bd1d9dbc17ac3f64a40f1?s=128&d=identicon&r=PG", "display_name": "Slayfi", "link": "http://ru.stackoverflow.com/users/25194/slayfi" }, "is_answered": false, "view_count": 162, "answer_count": 0, "score": 2, "last_activity_date": 1433402068, "creation_date": 1416248008, "last_edit_date": 1433402068, "question_id": 376200, "link": "http://ru.stackoverflow.com/questions/376200/class-path-resourse-applicationcontext-xml-cannot-be-opened-because-it-does-no", "title": "Class path resourse [ApplicationContext.xml] cannot be opened because it does not exist" },{ "tags": ["php","websocket"], "owner": { "reputation": 300, "user_id": 19768, "user_type": "registered", "accept_rate": 93, "profile_image": "https://www.gravatar.com/avatar/fa8fae6547dd2415a143680d337b1758?s=128&d=identicon&r=PG", "display_name": "duhon", "link": "http://ru.stackoverflow.com/users/19768/duhon" }, "is_answered": false, "view_count": 197, "answer_count": 0, "score": 4, "last_activity_date": 1432902435, "creation_date": 1414136622, "last_edit_date": 1432902435, "question_id": 370273, "link": "http://ru.stackoverflow.com/questions/370273/%d0%9f%d1%80%d0%b0%d0%b2%d0%b8%d0%bb%d1%8c%d0%bd%d0%b0%d1%8f-%d0%b0%d1%80%d1%85%d0%b8%d1%82%d0%b5%d0%ba%d1%82%d1%83%d1%80%d0%b0-%d0%b4%d0%bb%d1%8f-wamp-%d1%87%d0%b0%d1%82%d0%b0", "title": "   wamp " },...

問題は解決しました。簡単ですね。

プロモーションの機会

これで、アプリケーションの準備ができました。次は何ですか？どういうわけかそれを人々に伝える必要があります。そして、StackStackが再び私たちを助けてくれます。

実際には、SE自体にアプリケーションの説明を記載する公式の方法があります。（英語のみですが）これを行う方法の詳細な説明は、 stackapps.com自体にあります。

投稿された広告がどのように見えるかの例として、ここにStackApps.comのGrabDuckの説明があります。

この情報が、StackExchangeサイトに基づいて何ができるかについてのアイデアを持っている人に役立つことを願っています。

GrabDuckでStackoverflowと同期した方法

同期が私たちに見えるのを見てみましょう。 ID 16095の同じユーザーの下で作業します

したがって、登録後、個人アカウントに移動して、「同期」項目を選択します。

現在、ユーザーには同期用の3つのスロットがあります。必要なサービス（ロシア語ではStackOverflow）を選択し、[新しいサービスを追加]ボタンをクリックします。

ユーザーIDを入力します。 [チェック]ボタンをクリックすると、入力したIDが正しいことを確認できます。保存します。すべて、同期が構成されます。

同期の現在のステータスは、常にアカウントで表示できます。また、StackOverflowに追加された質問は、GrabDuckの検索タグとともに利用できます。

このアプローチの利点、またはお気に入りをSOからGDに同期する理由

ここの好奇心reader盛な読者は尋ねるかもしれません-なぜあなたはこれさえ必要ですか？すでにStackOverflowにアクセスして、必要なものを見つけることができます。

はい、本当ですが、GDでは他に何を提供していますか。検索は、SOを使用したお気に入りだけでなく、他のユーザーブックマークでも実行されます。これには必要な情報が含まれている場合もあります。または、ユーザーは同期のために追加のサービスを設定し、同時に他のサイトからドキュメントを検索できます（そして、Habr、rss、delicious、および他の多くの一般的なサービスと同期する計画があります）。アクティブなユーザーの関与なしにこのすべてに注意してください-一度構成されたすべての同期は、GDに保留中の素材を自動的に読み込みます。

そして、記事の最後に、私たちをフォローしている人のために-前回私たちから何が新しくなったかの簡単な概要

GrabDuck更新ログ

前回の記事から1か月を少し過ぎました。この間に私たちと何が変わったのか。

Firefoxの拡張機能

Foxの拡張機能があります。個人的な印象から-クロムについては、どういうわけか、すべてがはるかにシンプルで論理的に見えます。最初は、FFを変更せずにChromeからコードを移植したかっただけです。そのため、Chromeの拡張機能を作成したときに、HTML + CSS + JavaScriptのみを使用して、将来変更なしで他のブラウザに転送できるようにしました。そこにあった。 FFでは、ほとんどすべてが独自の特定のAPIを使用してのみ実行できます。それは平凡なもので、サーバーにリクエストを送信する例のように見えますが、ここでは機能しません-FireFox Addon APIから特別な関数を使用する必要があります。したがって、私はほとんどすべてを新たにやり直す必要がありました。拡張確認で同じ曲。 Chromeのすべてが比較的簡単かつスムーズに進んだ場合、FFでは3〜5日間で承認手続きを完了することを約束しますが、実際には実質的に動かないキューに入れます。当初は136位でしたが、1ヶ月で106に少し移動しました。したがって、明らかに冬までに拡張が検討されます。一般的に、彼らにとって何かが一般的にどのように機能するのかは明確ではありませんが、ChromeがFFから市場を奪っている理由が明らかになります（それがどんなに悲しくても）。

ブックマークを追加するときのタグ

ブックマークを追加するときにすぐにタグを追加できるようになりました。これは、サイトを介して追加する場合と、すべての拡張機能の両方から利用できます。まだこの方法は気に入らず、やがてユーザーにタグの自動割り当てを提供できると考えています。しかし、最初の記事の後、この機能を追加するように多くの要求があったので、今のところ私たちは前進してそれを行うことにしました。

サイトのスクリーンショット

サイトを解析するとき、ページから表示された画像を選択しようとします。これが失敗することもあれば、単に画像がない場合もあります。また、サイトから小さな画像しか取得できない場合もあります。そのため、サイトのスクリーンショットを撮り始めました。残念ながら、ブックマークの数は膨大であり、1つのアプローチですべての画像を生成することは物理的に不可能です。したがって、解析アルゴリズムを修正し、これまでのところ、本当に必要な場合にのみスクリーンショットを撮ろうとしています。好奇心のために、 Page2Imagesを使用します。「試用」には、1日あたり100 URLの制限があり、各URLの処理時間が長い無料アカウントがあります。より良い代替案があれば、コメントに残してください。

新しいデザイン

いいえ、サイト上のボタンを再描画せず、色も変更しませんでしたが、ブックマーク、タグ、および最新のドキュメント間でページ間をジャンプするのは不便であり、すべてを1つの画面に結合することを決定しました。これで、ユーザーは自分が持っているすべてのものをすぐに見て、必要なものを見つける方法を決定できます。「再設計」はまだ完了していません。ドキュメントへのアクセスのロジックをやり直し、よりシンプルでわかりやすいものにしたいと考えています。しかし、この方向への第一歩はすでにとられています。

StackExchangeとの同期

実際、これは記事全体です。同期自体に加えて、GrabDuckは、StackExchangeコミュニティのすべての質問とすべてのHabraサイトからタグに正しくタグを付ける方法も学習しました。私たちはこのアイデアに取り組み続け、将来的には他の便利なサイトとの同期を追加し、ユーザーのメタ情報を入力することを学ぶ予定です。

視聴履歴

閲覧履歴を実装しました。これは何ですか最も簡単な説明は、YouTubeのように行われます-「後で見る」リスト/お気に入り、および表示されたすべてのリストがある場合。私たちにとって実際には、これは現在、2つのリストがあることを意味します-追加日（いわゆるお気に入り）で並べ替えられたユーザーブックマークと、推奨事項からのドキュメントを含む、ユーザーが使用したすべてのものがある閲覧日で並べ替えられた閲覧履歴。

マイナーな改善とバグ

多数のエラーを修正し、解析、ページ認識、重複検索メカニズムを改善しました。正直なところ、すべてのウェブサイトに対する違反がどれほど多く発生するか想像もしていませんでした。最も「怖い」例で、これを処理する方法は考えられませんでした-ページが存在し、実際のコンテンツを返しますが、サーバーからの500（サーバーのエラー）応答が返されます。ブラウザの場合、これは問題ではなく、単に到着したものを表示しますが、私たちにとっては、ページが無効であることを意味します。

今日は以上です。新しい機能がどのように機能し、経験を共有するかを試してみてください。

ツイッターを購読して、すべての更新情報を把握してください。

GrabDuckでお会いしましょう！

GrabDuck：StackExchange APIを介したStackOverflowとの統合