「API」の記事 - Crieit

海外進出を目指して、ProductHuntへ個人開発サービスを投稿するまでにやったこと&やった結果を全面的にシェアする

2021-09-30T07:19:35+09:00

初めて作った個人開発サービスで海外進出しようという無謀な挑戦

以下の記事の通り、9月頭に2goというサービスを作って公開しました。サービスの詳細は以下のURLから見てもらえればと思いますが、いくつかの理由から世界での公開を元から視野に入れていました。
https://crieit.net/posts/Github-Issues-2go

英語圏のユーザーも含めたほうがサービスの規模感が大きくなる
サービス内容が日本だけに留まらない共通の需要があると思った
どこかで挑戦しなくてはならないのなら、ここで挑戦しようと思った（無謀）

こういった背景があり、全てのインターフェースは英語で作ってきました。そして、MVPが9月に完成したので、日本でのアナウンスをしました。海外を意識していたので、日本での進め方はあくまでフィードバックを貰えればくらいに思っていましたが、今思えばここからが既に問題なんだなと考えられます。

私の経験をまとめましたので、自分への戒めと今後トライされる方の参考になれば。

日本でやったことと、その結果

日本でリリースしたときにやったことを書いていきます。

Twitterでの開発進捗の共有による露出

私のTwitterアカウントはコチラですが、元々は現在働いている会社のAwarenessを上げるために、自分自身の考えやnoteなどの記事を共有するために使っていたものでした。そのため、インフラやクラウドなどのトピックが中心のため、100強のフォロワーもそういった傾向がありました。ただし、インフラやクラウドもこれからはアプリケーションレイヤーがわかっていないと語れないなと思い、個人開発をすることで開発者の気持ちを理解していこうとしている途中でした。
https://twitter.com/jnakajima1982

Twitterでの取り組み内容

そのため、絶対数としてこういったアプリレイヤーに興味がある人が少ないということもあり、開発進捗を共有したとしても反応がほぼもらえないという状況が続きました。そこで、私は以下を取り組みました。
1. 「#個人開発」や「#今日の積み上げ」といったハッシュタグを使った投稿を増やした
2. 上記ハッシュタグにまつわる個人開発者を中心にフォローを増やした
3. 自分自身で話題を作るより、フォローしている人のTweetに引用RTするようにした
　

結果と考察

「#個人開発」に関しては普段よりはインプレッションが増えましたが、反応が劇的に増えた感じはしませんでした。これには2つの原因があると考えています。「どんなサービスかわかりにくかった（プロフィールもわかりにくかった）」のと、「作っているサービスが英語」だったため、ハードルが高かったのだと思っています。それでも少しずつフォロワーは増え、最終的には今回の取り組みで50フォロワーくらい増えたので、コツコツやっていくことが重要で、指数関数的に上がることになるのではないかなと思っていますので、継続が必要です。

ただし、私のアカウントが公共分野（デジタル庁など）のインフラ・クラウドと、個人開発が混ざっているので、アカウントを分けるべきか非常に迷っています。フォロワー0から作り直すリスクと、複数アカウントを運用することの大変さに応えられるのかに解がないため、一旦は1つのアカウントとしています。

また、「#今日の積み上げ」は、インプレッションが非常に増え、リアクションも同時に増えるのですが、フォロワーが増えません。これは個人開発に留まらないユーザーが大量に流入しているせいだと思いますが、どちらかと言うとお互いに励まし合おうというハッシュタグの位置づけになっていると思われるので、このような結果になっているのだと思います。自分自身の精神安定の観点で、たまに投稿して安心するくらいが丁度いいと思っています。

3については、私自身が有益なことをTweetすることができればいいのですが、いざTwitterの画面を開いてなにか書こうと思ったときに、思いつくことには限界があったんですよね。特に、何がウケるのかみたいなことを考えだしたのもいけなかったんだと思います。なので、フォローしている人は私が興味があってフォローしているわけで、その人が話題にしていることに対して引用RTすることにして、自分の意見を言っていこうと考えました。

これは意外と効果があります。Twitter上での表示のされ方も、元Tweetが強ければ同時に表示されることもあります。また、何より引用RTした相手からのコメントを頂ける確率も高く、それがインプレッションの増加に繋がる結果が多かったと思います。

反省と今後

いずれにしても、Twitterでの認知度向上は一朝一夕ではいきませんので継続した活動が必要ということが身に沁みました。後ほど触れますが、ProductHuntなどは、このようなフォロワーの数が少ない開発者を掘り出して世に出すためのサービスという大前提があるのですが、現実問題として規模の戦いは存在すると実感しましたので、Twitter等のSNSでコミュニティを形成する必要を感じさせられました。

特に英語圏での情報発信を考えると、英語用Twitterアカウントを作ったのですが、日本語用Twitterアカウントだけでも苦労しているのに、英語で書いて運用していくというのはとても大変なことです。そのため、英語用Twitterアカウントはほとんど活動ができていません。

運営者ギルドへの参加

Twitterを徘徊していると、運営者ギルドという存在を知りました。まさに私が陥っているような状況が冒頭に書かれていました。
https://qiita.com/organizations/admin-guild

作ったWebサービス、全然使われない……
どうやってマネタイズしよう
どこまで作り込んでからリリースすればいいんだろう
デザイン難しすぎ
利用規約はどうすれば？
この先どうやってサービスを伸ばしていけばいいのか……
Slackでの運営形態になっており、中の活動が全く見えなかったので、入れていただくかを非常に悩んだのですが、何事もチャレンジだと思ったので、連絡させて頂き、無事入らせて頂きました。

結果と考察

結果から言うと、個人開発をしている人は入ったほうが良いです。下手な質問をしたら、ぶっ飛ばされるのではないかとビクビクしていましたが、そんな事は全くありませんでした。唯一あるとするならば、自分自身で発信したことには多くの意見がもらえてモチベーションに繋がりますが、自分自身で発信しない方はここで何をしていいかわからなくなってしまうと思います。

私は、実運用ではどのようにしているかなどは、こういった限定されたユーザーだけが参加するコミュニティだからこそ聞ける生の声が本当に貴重だと思いました。また、今回のProductHuntのチャレンジなどを好意的に捉えてくださるだけでなく、普段の自分自身の開発の進捗にコメントいただける方もいらっしゃり、個人開発の課題となりがちなモチベーション維持にもなりました。

だからこそ、私自身がコミュニティの一部として、他の方が同様な状況にいる場合には、積極的に自分の経験を還元する必要があると思い、いろいろな方のチャンネルに入るようにしました。

技術コミュニティメディアへのサービス開発記事の投稿

Twitterや運営者ギルド以外では、とにかくサービスを知ってもらえるチャネルを増やそうとしていました。そこで以下の技術コミュニティメディアに記事を投稿してみました。
- Zenn：https://zenn.dev/nice2have/articles/aa15eccd13a23c
- Qiita：https://qiita.com/nice2have/items/28449ae4ef45fef2c671
- Crieit： https://crieit.net/posts/Github-Issues-2go
- ツクログ：https://creators.eightbit.jp/service/item4309.html

以下にそれぞれのメディアの現時点での結果をまとめます（Google Analytics調べ）。Zennは正直きちんと取れているのかわかりません。ツクログは投稿して間もないのと、どこからデータが取れるのかわからずなので、外しています。

メディア	記事閲覧数	サービス流入数	LGTM
Zenn	34	10	4
Qiita	1468	261	7
Crieit	1198	66	1

結果と考察

いずれにせよ、どのメディアにも投稿することは確実に認知度とサービス流入に繋がっていると言えますので、サービスローンチのタイミングだけでなく、書く内容がある限り、投稿し続けると良いと思います、、、が、やっぱり書くのって大変なんですよね。さらに、メディアによってトレンドがあるから、書く内容を変えたほうがよいというのを見たのですが、全く同じ記事を上げているのが現状です。まずは続けることが大事なので、しばらくはそれを継続しようと思っています。

ダイレクトアプローチ

追加でした作業についても記録しておきます。2goというサービスの特性上、Github Issueを利用している/利用見込みのユーザーがターゲットになります。そのため、メディア上にGithub Issueについて記事を書いている人へ直接連絡して実際に利用していただくことで、フィードバックを受けて改善に生かしていこうと思いました。

Google検索からたどり着いた5件にコメントをしてコミュニケーションを図ってみたのですが、どこからも未だ返事がない状況です。Twitter上でキーワード検索してアプローチしたこともありましたが、ちょっと利用用途が異なったようで、試してもらうまでに至りませんでした。

以上のアプローチで、面白いですとか、良いサービスですねなど言われるものの、今思えば、やはり利用されるだけの魅力やユースケースが見出してもらえなかったのだと思いました。

まとめ：日本での取り組み

海外進出を前提に置いていたため、以下の2点の理由で、Githubアカウントでログインしてまで試してくれた人は、2桁にすら行きませんでした。
- 日本での取り組みを正直本気で取り組んだとは言えない
- 英語のインターフェースのため、伝わりづらかった

そこで、Githubアカウントでログインすることのハードルが高いと思い、ログイン不要で誰にでも触れるサンプルを追加開発して提供してみたのですが、こちらも時たま試す人が現れるくらいで、試すことすらしてもらえないのかと打ちひしがれましたorz

ほとんどのユーザーアクティビティ（サービス登録/ログイン/公開設定）が発生すると、Slackに通知が飛んでくるようにしていたのですが、たまにしか飛んでこず、こちらも現時点では自分のログイン動作だけが通知される閑古鳥が鳴いている状態です。

海外編：Product Hunt

つらつらと書いてきましたが、これからが本編です。当時、海外進出しか見えていなかった私は、海外での認知度を上げるための方策を調査していました。調べていくと以下の2つのサービスがマッチすると思いました。

Product Hunt : https://www.producthunt.com/
Indie Hackers : https://www.indiehackers.com/

これらのサービスでは、個人開発者やスタートアップが自分の作ったプロダクトを投稿して、認知度を上げることが毎日のように行われています。ただ、Indie Hackersの方は招待制でしか入れず、Redditなどを徘徊してもInvitation Codeを求める人はいるものの、なかなか何もない状態でそれがもらえる人は見られなかったので、一旦Product Huntにフォーカスすることに決めました。

Product Huntへの投稿を決心

まずは経験者のまとめを読み漁りました。具体的には以下の記事を読みました。この中でも、本当に有効だったこと、今では有効ではないこと、役に立たないことがあるので、それを自分なりに整理していきました。とにかくやれることはやりきらないと、次につながらないと思い計画していきました。

https://crieit.net/posts/7
https://jp.taishikato.com/posts/i-want-to-prove-that-japanese-can-compete-in-english-speaking-countries
https://blog.notsobad.jp/entry/2019/12/23/232807
https://blog.notsobad.jp/entry/bungo-search-product-hunt

Product Hunt攻略計画

先述の記事を読んで私が立てた当日の計画は以下のとおりです。
1. 太平洋時間 0:01（日本時間 16:01）からその日のランキングレース開始。
2. 1時間くらい様子をみて、Google や Facebook からのプロダクトなどのビッグサービスが投稿されていないのを確認してから投稿。
3. Twitter で Product Hunt への投稿を英語でアナウンス。 @ProductHuntをメンションする。
4. Product Hunt 上の紹介ページ URL が取得できるので、それを基に Product Hunt Card 作成（Medium の場合は URL を貼り付けるだけで OK）し、Medium 投稿。
5. ProductHunt の URL を使って Landing Page に反映し、導線を作る。
6. Medium の記事を、Product Hunt 上のプロダクト紹介ページに関連記事として貼り付け。
7. Medium の記事を、Hacker News に投稿（Show HN:をタイトルにつけて投稿）
8. Reddit に投稿
9. コメントが入ったらそれに返信していく。

また、投稿当日までの計画は以下のとおりです。
1. 投稿用のランディングページを作る
2. 投稿用の動画（英語）を作る
3. Medium/HackersNews/Redditの記事を準備する
4. Product Huntのupcoming Productに登録する
5. Product Hunt投稿内容の準備をする
6. 最低限必要な機能の整備（退会機能・規約）
7. 著名なProduct HuntersにReview Requestをして、認知してもらう

簡単に言ってしまうと、以下の2点に集約されます。すごくシンプルです。
- ProductHuntの投稿を魅力的なものにする
- ProductHuntのupvoteを得るための導線をできるだけ多く作る

投稿当日までの準備と結果

順番は前後しますが、投稿当日までの計画について共有します。

ランディングページ

ランディングページはたいして手間もかからなかったのですが、当日投稿しなければ、貼るURLがわからないため、ボタンだけ作ってVueの機能で表示しない状態で準備しておきました。実際のトップページの見えるところにボタンを置いた程度でした。はっきり言ってダサいですね。

改めて投稿後にいろいろ研究してみましたが、以下のような形で誘導するのはとても有効だと感じました。後にわかりますが、こんなレベルの問題ではないことがわかります。

投稿用の動画

ProductHuntの投稿にYoutube動画を付けると、Product紹介の一番最初に表示され、自動的に再生される仕組みになっています。そのため、インパクトがあると思ったのと、これをやらねばやらなかったときの効果が今後わからなくなると思い、動画制作に手を付け始めました。しかしながら、以下の問題にぶつかります。

動画編集に知見がない
動画ナレーションは英語の必要性がある

動画編集に知見がないので、いろいろ調べたところ、ダビンチリゾルブという動画編集ソフトが良さそうで試してみたところ、操作が全くわからず、説明記事をウロウロしていたのですが、わからなすぎて挫折しそうになっていました。ところが、原点に戻って動画のことは動画で、と思ってYoutubeの解説動画を探しました。

そして以下の動画を10分で見たら、一気に進み、こんな私でも動画編集ができるようになりました。基本操作と、動画編集に最低限必要そうな動画を紹介しておきます。

https://youtu.be/duxtN8ixpLo
https://www.youtube.com/watch?v=0J7lqAnP_64&t=194s

ただ、計画もなしに動画編集するとうまく行かなったので、Figmaで整理してみました。ただし、これで一旦動画を作ったのですが、文字だらけでなかなか理解しにくいものになってしまいました。

ここあら紆余曲折があって、ようやく完成した最終版はコチラです。
https://youtu.be/YvcyiAccCBo

先にナレーションの英文を考えて、Google Text to Speechに喋らせて、それに合わせて映像を作成するという手順を踏みました。しかしながら、結果的に動画以前の問題であることも発覚します。

Medium/HackersNews/Redditの記事を準備する

ここから導線となる記事の準備についてお話しいたします。

Medium
https://medium.com/@nice2have/2go-road-to-my-first-webservice-5b38666a7dd8

- 特に制限もないので、自由に書きましたが、タグについては迷いましたね。サービスの特性上、割り当てるべき適切なタグかどれか未だにわかっていません。
- しかしながら現時点でもView数は2です。そのため、こちらもMediumのフォロワーを増やしておくか、単なるプロダクト説明の置き場と割り切るかのどちらかが今後の戦略となりそうです。

HackersNews

- Show HNを付けるというルールを守って投稿
- 付けるURLはMediumのページか、サービス自体のURLかは迷いましたが、サービスにProductHuntへの誘導を用意していたので、後者を選択しました。
- しかし残念ながら、GoogleAnalytics上は、HackersNewsからの流入は０でしたので、もう少し工夫が必要か、流れるのが早すぎて流入が期待できないかもしれません。

Reddit
https://www.reddit.com/r/ProductHunters/comments/px15lq/i_created_my_first_web_site_2go_2go_can_generate/

- Karmaというポイントがないと記事が投稿できないという話を見たので、事前に記事投稿やコメントで参加してみました。特にGithub Issueの必要性などを投稿したりして、反応を窺うなどもトライしましたが、慣れていないせいもあって反応も薄かったです。
- どのSubredditに投稿するかは検討しました。ProductHunt / Github / webdev / SaaS / startups / indieHackers / indieDevelopers等、色々調査しました。ProductHuntのSubredditが最も適切かと思いましたが、あまり活況がないのが心配でした。ただ、それ以外のところでは厳しい反応も予想されたので、シンプルにProductHuntのSubredditを投稿先と決定しました。
- その他細かいことですが、RedditのProfileなどもきちんと整備しました。
- しかしながら、RedditのSpamFilterに引っかかって削除されてしまったみたいです…

Product Huntのupcoming Product

あまり認知されていませんが、以下のようにサービスローンチ前にユーザーとコミュニケーションができるPre-Postサイトを作ることが出来ます。ただここからSubsriberは1人も登録されませんでした。おそらくProductHuntの著名なユーザーが、次期サービスを立ち上げる前にユーザーとコミュニケーションするためのプラットフォームだと感じましたので、私には当分必要ないと思いました。
https://www.producthunt.com/upcoming/2go

Product Hunt投稿内容の準備をする

Product Huntの投稿ページは入力したものが記録されるようになっているので、Submitボタンの直前までを入力しておいて事前に準備しておくことが可能です。今回の画像は、動画作成時に作っていたFigmaデータを画像データに変換して利用することとしました。特に動画は視覚的に、画像は落ち着いて読むように文字を入れるようにしました。

ここで用意しにくいのは、投稿ロゴとして利用できるGIFファイルだと思います。動画や画像イメージは比較的簡単に用意できますが、GIFファイルはどんなものにするところから微妙に悩ましい位置づけです。私は今回動画ファイルを作って出力した後、MovファイルからGIFに変換して利用しました。

目立たせるために、アニメーションというよりは、全体の色が大きく変わることで目につくように意識して作りました。

著名なProduct HuntersにReview Request

先程の記事の中には著名なProductHunterにお願いして、彼らに周知してProductHuntで彼らをフォローしているユーザーに通知されるようにしたほうが良いという記述がありました。一方で、その機能はなくなったのでやる必要ないよというのも見受けられました。ということは、やってみるしかありません。まずは以下のサイトからTop Huntersを探しました。

https://yvoschaap.com/producthunt/

それぞれがどういった方なのかまで抑えられなかったので、上から順番にTwitterを見て、直接DMを送れる人にていねいな英文を書いて送りました。…が、結果的に1人からも返信は返ってきませんでした。おそらく、こういった依頼が定常的に来るので、そもそもDMを開いていない可能性が高いです。既読にすらなりませんでしたので。

では、このアプローチは不要なんでしょうか。その答えは、私のProductHuntの通知ページにありました。以下のようにフォローしているHunterがUpvoteすると、その通知がフォロワーには届きます。つまり、TopHuntersにUpvoteされると知られる確率が高くなるという理解をしています。ただ、彼らからUpvoteされるためにどうしたらよいかは未だにわかりません。Twitterでフォローされるわけもないので、ProductHuntでDiscussionに参加するなどして自分自身の露出が必要なのかもしれません。

その他に可能性があるとすると、以下は検討してみてもよいかと思いました。開発者のクローズドなコミュニティがあり、そこで繋がりが作れるかもしれません。なぜなら、$2,000/yearの有料会員制だからです。だからこそ、人数が爆発的に多いわけでもないですし、コミュニケーションが活発なのかもしれません。ただし、個人開発者がここに投資するのは、英語とお金が必要なので、ハードルが高いとは思います。

https://megamaker.co/club/

投稿当日の結果

改めて、投稿当日の計画を振り返る前に、投稿曜日を検討していました。最初は準備ができた翌日に投稿しようかと思っていましたが、ちょうど週末でした。週末がどう影響するかがわからず、Active User数が減少するのではないかと推測して候補から外しました。また、週明けの月曜日も同様の理由で除外し、現地時間火曜日0時に投稿することとしました。

太平洋時間 0:01（日本時間 16:01）からその日のランキングレース開始。
1時間くらい様子をみて、Google や Facebook からのプロダクトなどのビッグサービスが投稿されていないのを確認してから投稿。
Twitter で Product Hunt への投稿を英語でアナウンス。 @ProductHuntをメンションする。
Product Hunt 上の紹介ページ URL が取得できるので、それを基に Product Hunt Card 作成（Medium の場合は URL を貼り付けるだけで OK）し、Medium 投稿。
ProductHunt の URL を使って Landing Page に反映し、導線を作る。
Medium の記事を、Product Hunt 上のプロダクト紹介ページに関連記事として貼り付け。
Medium の記事を、Hacker News に投稿（Show HN:をタイトルにつけて投稿）
Reddit に投稿
コメントが入ったらそれに返信していく

まず、予約投稿機能があるので、試してみましたが、正常に動作しませんでした。もしかすると私の現地時間の入力時間が間違っているかもしれませんが、念の為日本時間16時にはPCの前にいたほうがいいかもしれません。

投稿後の動きの感想

現地時間0時のタイミングでは、少しでもUpvoteを稼いだProductが上位に行きやすいです。そのため、初速を確保する知り合いやコミュニティへの事前声掛けは重要だと思いました（ただし、Upvoteを直接的に促してはいけません）
必要初速Upvoteは10くらいだと思います。トップページに表示できるProductにも限りがあり、そこに載れなければ閲覧数も獲得できないです。
必ずUpvote順にソートされるわけではありませんでした。コメントなどの他の要素も見ていると思われます。コメントはUpvote同様に初速に影響する可能性があるので、できれば事前に確保しておきたいところです。ただし、日本人のコミュニティにおいて、Upvoteはしてくれても、コメントまでしてくれる人を確保するのは至難の業だと思います。
コメントがないと盛り上がりに欠けるのか、追加のコメントが得られにくいと思います。私はただの1つもコメントを最後まで得られませんでした。他のProductは、共同開発者などがコメントし合うことで盛り上がりを演出している印象を受けました。
コメントが来たら返信しながら、投稿スレッドを盛り上げる準備をして待っていましたが、杞憂に終わってしまいました。

結果と感想

最終的な結果はUpvote x15となりました。結果をまとめていきます。
- Upvote x15(しかし、運営者ギルドから半数くらいはUpvoteしてくれた方がいたと思います)
- 流入トラフィック x5(ほとんど流入が見込めませんでした)
- 新規登録ユーザー数 x0(残念ながら一人も使ってくれませんでした)
- サンプルを試したユーザー数 x2(流入トラフィックの割に確率が高かった)

重要なのは…

とにかく初速Upvoteを増やして、トップページに載らないと何も始まらない
流入さえしてくれれば試してもらえる率はそこそこある
投稿内容（文章・動画・画像）の良し悪しが影響するのかはわからなかった
導線はほとんど影響しなかった（影響するように仕立て上げるには継続的な活動が必要）
TopHuntersに認知される方法があれば、Upvoteを得るための近道になるかも。

ProductHuntへの挑戦は惨敗

多くの方にご協力を頂きましたが、残念ながら私の個人開発サービスのProductHunt挑戦は惨敗に終わったと言って良いでしょう。ただし、考えうる限りのことはやり切ったので、次に繋がる敗戦だと考えています。

海外進出のサービスの難しさを以下の点で痛感しています。
- 海外でウケるサービスとかユースケースが、真の意味で理解できない可能性
- 海外で求められるデザインやマーケティング・言い回しが適切かどうかわからない
- 海外でのコミュニティ参加は更に負荷がかかるため、労力に見合うかが不安
- 番外編）ユーザーに提供する規約の英文精査が難しい

英語で開発すれば、非常に多くのユーザーに対する市場へのアプローチが可能ですが、このような深刻な悩みがついてまわることになります。いくつかの記事にもありましたが、英語圏の感覚を持つ人にヘルプしてもらわないと難しいかもしれません。

最後に…

想像してよりもずっとずっと個人開発は難しいです。プログラミングの世界だけでなく、デザイン・マーケティングまで1人で取り組まなければならず、かつアイデアの捻出とその中からの選定も全部自分の責任です。だからこそ楽しみがあるわけですが、大変さも同時に存在しています。

企業よりも個人開発が気楽な分、企業よりもマーケティングや作業分担にお金がかけられません。特に個人開発はサービスが知られることがなければ、提供するユースケースが知られていないから失敗しているのか、知られていても失敗しているのか判断が難しくなります。

そこでやはり重要となってくるのが、コミュニティだと思います。自分の作るプロダクトに意見を言ってくれる、試してみてくれる、拡散して届けてくれる人たちとともに歩まねば成功はあり得ません。そしてそれは継続的な努力によってのみ得られるものだと感じました。

私にとって今回の開発は本当に作りたいものに対する準備の意味合いも兼ねていますが、コミュニティとともにモチベーションを維持し、成功の模索をしていきたいと思います。

ということで、ぜひ気になる方はTwitterのフォローと、2goの利用をしてみて、フィードバックをいただければと思いますので、最後にリンクを貼って終わりにさせていただきます。

https://twitter.com/jnakajima1982
https://2go.plus/

ありがとうございました！

RESTful APIとは

2021-07-25T00:48:24+09:00

RESTful APIとは何？

RESTというだけあって、休みまくりのAPI。かと思ってたら全然違いました（汗）

RESTは、REpresentational State Transferの略。
分散型システムを設計するための構造

APIなので、複数のアプリケーションを連携できる。twitterなど。

RESTの特徴

ステートレス

状態を管理しないので、入力の内容によってのみ出力が決定される。

アドレス可能性

URIで表現される。一目でなんの情報かがわかる。

接続性

別の情報へのリンクを貼ることができる

統一インターフェース

操作は全てがHTTPで動く
取得「GET」、作成「POST」、更新「PUT」、削除「DELETE」

DNA CENTERでの使われ方

自作プログラムを作って、Cisco　DNA　centerで使える機能を拡張することができる。

PAAPI v5に移行してみた: Node.js版

2020-03-07T17:25:02+09:00

積読ハウマッチでAmazonのPAAPIを使っているけど、
v4が2020年3月9日に利用できなくなるため、移行してみたときの備忘録。

以前は、node-apacを使ってたけど、対応はなさそう。

Amazon側の移行手順

公式の移行手順を参考に進める感じ。

ステップ1：新しい認証情報を取得する

認証情報の形式が古いと払い出しが必要らしい
いままで使っていたアクセスキーとシークレットキーでOKだったのでスキップ

ステップ2： PA-API 5.0を試してみる

以前と同様、Scratchpadが用意されている。
アクセスキーがOKだったかも、ここで確認した。
・Product Advertising API 5.0 Scratchpad

ステップ3：必要な知識を得る

公式ドキュメントにも書いてあるとおり、レスポンスがXMLからJSONになったらしい。

変更点は、ここにまとまっている。
主には、セキュリティ強化、レスポンス速度の改善、新しいAPIの追加など。

また、レスポンスに関してv4からv5へのマッピングも用意されてる。
・PA-API 4.0 to 5.0 Mapping · Product Advertising API 5.0

ステップ4： PA-API 5.0を導入する

従来どおり、Web APIを直接叩けるけど、SDKも提供されている。
言語は、Java / Node.js / PHP / Pythonの4つ。サンプルもある。
・Using SDK · Product Advertising API 5.0

ただ、残念なことに、Node.jsのSDKは、zipで公開されている...

ソース側の移行手順

SDKを配置

zipをダウンロードして展開するとこんな感じになってる。

src配下がAPIなので、自分のソースに配置。

dependencyがあるので、それもコピペして、npm iする

"dependencies": {
  "superagent": "3.5.2",
  "crypto-js": "^3.1.9-1"
},

APIの呼び出し

解答したzipにサンプルがあるので、それを見ながら実装していく。
使っているのは検索なので、sampleSearchItemsApi.jsを参照。

以下は、サンプルの抜粋

// ** API Clientの準備
var ProductAdvertisingAPIv1 = require('./src/index');
var defaultClient = ProductAdvertisingAPIv1.ApiClient.instance;

// アクセスキーなどを設定。ホストとかリージョンは、以下を参照
// https://webservices.amazon.com/paapi5/documentation/common-request-parameters.html#host-and-region
defaultClient.accessKey = '';
defaultClient.secretKey = '';
defaultClient.host = 'webservices.amazon.co.jp';
defaultClient.region = 'us-west-2';


// ** リクエストの生成
var searchItemsRequest = new ProductAdvertisingAPIv1.SearchItemsRequest();

// アソシエイトタグを設定
searchItemsRequest['PartnerTag'] = '';
searchItemsRequest['PartnerType'] = 'Associates';

// 検索リクエストを設定。SearchIndexは以下を参照
// https://webservices.amazon.com/paapi5/documentation/use-cases/organization-of-items-on-amazon/search-index.html
searchItemsRequest['Keywords'] = 'Harry Potter';
searchItemsRequest['SearchIndex'] = 'Books';
searchItemsRequest['ItemCount'] = 2;

// 取得するレスポンスの指定
// https://webservices.amazon.com/paapi5/documentation/search-items.html#resources-parameter
searchItemsRequest['Resources'] = ['Images.Primary.Medium', 'ItemInfo.Title', 'Offers.Listings.Price'];

// ** コールバックの設定
var callback = function (error, data, response) {
  if (error) {
    // エラーの場合
    console.log('Status Code: ' + error['status']);
  } else {
    // レスポンスを取得
    var searchItemsResponse = ProductAdvertisingAPIv1.SearchItemsResponse.constructFromObject(data);
    if (searchItemsResponse['SearchResult'] !== undefined) {
      // 1件目の結果を取得
      var item_0 = searchItemsResponse['SearchResult']['Items'][0];
      if (item_0 !== undefined && item_0['ASIN'] !== undefined) {
        console.log('ASIN: ' + item_0['ASIN']);
      }
    }
    // エラーが返ってきた場合
    if (searchItemsResponse['Errors'] !== undefined) {
      var error_0 = searchItemsResponse['Errors'][0];
      console.log('Error Code: ' + error_0['Code']);
      console.log('Error Message: ' + error_0['Message']);
    }
  }
};

// ** APIの実行
var api = new ProductAdvertisingAPIv1.DefaultApi();
try {
  api.searchItems(searchItemsRequest, callback);
} catch (ex) {
  console.log('Exception: ' + ex);
}

対応が必要だった点

基本的にパラメタがわかったため、一致してるものを探していけばOK。
変更自体はそこまでだけど、できることが変わっているので注意...

リクエスト関連

MerchantIdがMerchantになっていた。設定値は変わらず
SortがSortyByになり、設定値も変更
PowerSearchが廃止に...つまり、除外や期間指定ができない

レスポンス関連

全体的に変更。XMLからJSONになっており、構成も変わっている
発売日がUTCになり、時刻まで記載
エラーメッセージも全体的に変わっているので対応が必要
バリエーションが除外され、GetVariations APIが新設(リクエスト数が増...)
ただ、電子書籍の価格が取得できるようになった

よく参照したURL

とにかく、以下を読みまくった。。

Operations関連: リクエストパラメタとか。指定できるレスポンスもここ
- SearchItems ... 検索
- GetItems ... ASINから商品情報取得
- GetVariations ... ASINからバリエーション情報取得
Resource関連: レスポンスの内容
- ItemInfo ... 商品情報
- Images ... 画像関連
- Offers ... 価格関連
共通のリクエストパラメタ関連
- 日本のMarketplaceとかの情報
- 共通のリクエストパラメタ ... HostやRegionもここ
共通のレスポンス関連
- エラーメッセージ
マイグレーション関連

以上!!

こんなのつくってます!!

積読用の読書管理アプリ『積読ハウマッチ』をリリースしました！
積読ハウマッチは、Nuxt.js+Firebaseで開発してます!

もしよかったら、遊んでみてくださいヽ(=´▽`=)ﾉ

要望・感想・アドバイスなどあれば、
公式アカウント(@MemoryLoverz)や開発者(@kira_puka)まで♪

Octoparseとは？Webデータを自動抽出できるスクレイピングツール

2020-01-13T18:52:04+09:00

Octoparseとは？

Octoparseは、視覚的に分かりやすくデータを抽出できるWebスクレイピングツールです。コードを書くことなく、スクレイピングの初心者でも、Octoparseを使ってWebサイトから大量の情報を手軽に抽出できます。

WindowsアプリケーションであるOctoparseは、Ajaxを使うWebページを含む静的および動的Webサイトに対応し、フォームを記入したり、テキストボックスに検索語を入力したりするなどで、人間の操作をシミュレートしてWebページとやり取りします。抽出プロジェクトは、自分のマシン（ローカル抽出）またはクラウド（クラウド抽出）で実行できます。CSV、EXCEL、HTML、JSON、データベース（MySQL、SQL Server、Oracle）などさまざまな出力形式があります。

Octoparse無料版と有料版は同じ機能を共有しています。無料版だと、一部機能に制限がありますが、ヘビーユーズでもしない限りは、十分すぎるくらいの機能があります。有料版だと、タスクの登録数や自動実行数が多くなり、クラウド上で動作させることもできます。

ワークフロー

Octoparseは、視覚的に使いやすい操作ペインを提供します。Octoparseは、Webページを開いたり、アカウントにログインしたり、テキストを入力したり、Web要素をクリックするなど人間のWebブラウジング動作をシミュレートします。内蔵組ブラウザでWebサイトの情報をクリックして、必要な構造化データを取得します。

クラウドサービス

分散コンピューティングに基づいて大規模なWebデータを同時にスクレイピングすることは、Octoparseの最も強力な機能です。クラウド機能を使うと、多数のクラウドサーバーを使って同時に抽出を実行できます。短期間に10,000のWebページをスクレイピングする必要がある場合は、Octoparseクラウドサービスが最適です。クラウド型プラットフォームでは、620倍の高速抽出が可能です。自動取得したデータはクラウドに保存され、どこでもアクセスできます。ハードウェア保守も不要だし、ネットワーク中断に心配する必要もありません。

豊富なツール

Octoparseには、ウィザード形式で抽出データを指定する「Wizard mode（ウィザードモード）」と自由に抽出データを指定できる「Advanced mode（アドバンスドモード）」2つのモードがあります。

ユーザー体験を向上させるため、Advanced modeでは、豊富なツールセットを提供します。

正規表現式生成ツール
Xpath生成ツール
実行タイムアウトの設定
スクロールダウン
ページアンカーフック

API

Octoparse APIに接続すると、自分のシステムにデータを自動的に配信でき、自分のアカウントにあるデータにアクセスできます。タスクのルールを設定するだけで、Octoparseクラウドサーバーが残りの作業を行います。データはXMLの形式で配信されます。

Webスクレイピングテンプレート

Webスクレイピングテンプレートは非常にシンプルで強力な機能です。テンプレートを使うと、プログラミング知識の少ない/ない人でも簡単にWebスクレイピングを達成できます。具体的には、Octoparseのソフトには数十種類のあらかじめ作成されたテンプレートがあり、パラメータ（ターゲットWebサイトのURL、検索キーワードなど）を入力するだけで、データが抽出されてきます。そのため、スクレイピングタスクやコードを書く必要はありません。例えば、eBayで「イヤフォン」に関する製品情報を収集したい場合は、パラメータに「イヤフォン」と入力してタスクを実行して、数秒でアイテム番号、価格、送料などを含む製品情報を得ることができます。

まとめ

Webスクレイピングツールはニュースポータル、人工知能、フォーラム、Eコマースサイト、ソーシャルメディア、不動産、財務報告などさまざまな分野で広く使われています。Octoparseを利用することで、価格比較、研究、事業、営業、マーケティングを効率的に進めることができるようになります。

NuxtでserverMiddlewareを使ってAPIをつくってみる

2019-12-29T19:05:24+09:00

Nuxt.js、SSRで実行すると外部サーバなしでAPIを簡単に追加できるらしい。
serverMiddlewareを使ってルートを追加するとAPIが作れたので、その時の備忘録。

つかってみる

APIをつくる

// ~/server/echo.ts

import { IncomingMessage, ServerResponse } from "http";

/**
 * 「?name=AAA」で呼び出すと、AAAを返すechoなAPI
 */
export default async function(req: IncomingMessage, res: ServerResponse) {
  try {
    // req は Node.jsのHTTPリクエストオブジェクト
    console.log(`req.url=${req.url}`);

    // URLをパースして、クエリを取得する
    const url = require("url").parse(req.url, true);
    const name = url.query.name;
    res.end(name);
  } catch (error) {
    console.error(error);
    res.end(null);
  }
}

設定をする

// nuxt.config.ts
import { Configuration } from "@nuxt/types";

const config: Configuration = {
  // ...略

  serverMiddleware: [
    // パスと対応するファイルを設定する
    { path: "/api/echo", handler: "~/server/echo.ts" },
  ],
};

export default config;

APIを呼びだす

APIが作れたので、あとはaxiosなどで呼び出せばOK！

import axios from "axios";

const res = axios.get(`${process.env.BASE_URL}/api/echo`, {
  params: { name: "AAA" }
});

console.log(res.data);
// => AAA

つかってみる: express版

Node.jsのHTTPリクエストオブジェクトは扱いが若干めんどくさいので、
Express使って楽したい..

serverMiddlewareはExpressを使えるので、
ルーティング含めてExpress側で設定できるので楽(´ω｀)

APIをつくる

// ~/server/index.ts
import { Request, Response } from "express";
import * as HttpStatus from "http-status-codes";

import bodyParser from "body-parser";
import express from "express";

const app = express();

// setup body-parser
app.use(bodyParser.urlencoded({ extended: true }));
app.use(bodyParser.json());


// select
app.post("/api/select", async (req: Request, res: Response) => {
   // ...
});

// update
app.post("/api/update", async (req: Request, res: Response) => {
   // ...
});

// delete
app.post("/api/delete", async (req: Request, res: Response) => {
  // ...
});

export default app;

設定をする

// nuxt.config.ts
import { Configuration } from "@nuxt/types";

const config: Configuration = {
  // ...略

  serverMiddleware: [
    serverMiddleware: ["~/server"],
  ],
};

export default config;

これで、~/server/index.tsで設定した/api/selectとかがルーティングに追加される。

以上!!

こんなのつくってます!!

積読用の読書管理アプリ『積読ハウマッチ』をリリースしました！
積読ハウマッチは、Nuxt.js+Firebaseで開発してます!

もしよかったら、遊んでみてくださいヽ(=´▽`=)ﾉ

要望・感想・アドバイスなどあれば、
公式アカウント(@MemoryLoverz)や開発者(@kira_puka)まで♪

参考にしたサイト

PHPで爆速APIを作るとき工夫したこと

2019-07-25T03:03:37+09:00

「サーモンランAPI」という配信専用のAPIです。
https://splamp.info/salmon/api/

任天堂ソフト「Splatoon2」のサーモンランの最新情報を取得できます。

爆速のために

Apacheサーバー上で、JSONデータを静的ファイルとして配信しています。

これまでスプランプ（※うちのサイト）では「スプステージ2」という名前でバトルステージの情報を返すAPIを運用してきたのですが、こちらはオプションの充実のために、PHPファイルにアクセスさせる動的な仕組みでした。

今回静的ファイルにした理由です。

オプションを付けないほうがシンプル
… タイムゾーンなどの混乱の解消のため、時間データはUnixtimeだけにしました。言語も日英同時に配信することにしました。
サーバー負荷が激減する
… 毎回DBにアクセスしたりせずに済むのでレスポンス速度が向上します。
クライアントでキャッシュが有効になる
… ヘッダのLast-ModifiedやE-tagにより、クライアントでキャッシュが有効になります。

仕組み

APIのアクセス先は一見「/salmon/api/now」や「/salmon/api/all」のように見えますが、実は.htaccessで「/salmon/api/」の別の子フォルダにあるJSONファイルにリライトしています。
例：

RewriteEngine On
RewriteRule ^all$ xxx.xxx [L]

また、JSONファイルは更新用プログラムによって、定期的に新しいファイルに上書きされます。

更新用プログラムはcronで定期的に更新すべきかチェックしていて、更新があるとDBからデータを取得・整形して、出力します。

JSONは何となく可読性を高めたくなったので、インデントを付けたり無意味なエスケープを消したりしてみました。

$json = json_encode($output, JSON_PRETTY_PRINT | JSON_UNESCAPED_SLASHES | JSON_UNESCAPED_UNICODE);

ヘッダ問題

今回一番欠かせなかったのはヘッダの付与でした。

毎アクセス動的生成していた頃はPHPのheader()なんかを使っていたのですが、今回は静的ファイルですから、Apacheの力を借りる他ありません。

Apacheでは、.htaccessを使うと配下のファイルに対して指定したヘッダを付与することができます。

Header set (ヘッダ名) "(値)"

今回加えたヘッダは以下の二つです。

Header set Access-Control-Allow-Origin "*"
Header set Content-Type "application/json; charset=utf-8"

Content-Typeでは、文字化けしたりしないようにUTF-8を明示しています。

Access-Control-Allow-Originというのは見たことない人もいるのではないでしょうか。これは、JavaScriptにおいてクロスオリジンでアクセスしてもよいかの指定になります。

これをサーバーが明示的に許可しないとjsがアクセスすることはできません。jsでオープンなAPIが使えないなんてもったいない。*を指定することで誰でもアクセスできるようになります。(CORS / Cross-Origin Resource Sharingの許可、と呼ばれたりします。)

まとめ

サーバー上でキャッシュ（静的ファイル）を生成した
.htaccessでヘッダを指定した
Access-Control-Allow-Originの指定でjs勢にも利用してもらえる

感想

JavaScriptからのアクセス許可については、実際にjs勢の方から問い合わせがあって初めて気づきました。意外と見落としている方は多いんじゃないでしょうか。

個人的な信条として「サーバーサイドの魔法」というのがあります。サーバーサイドは制約が少なく、予想外のことができるということです。Apacheの設定ファイル.htaccessは特にその幅を広げてくれるので気に入っています。
他にも色々な機能があるので、調べてみると面白いと思います。
.htaccess の書き方 | murashun.jp

サーモンランAPIの他の記事

サーモンランAPIについて
https://splamp.info/salmon/api/

サーモンランAPIサンプル集（連載）
https://crieit.net/magazines/barley_ural/サーモンランAPIサンプル集

Laravel5.8現在FormRequestのバリデーション結果をJSON APIで返す

2019-05-21T16:05:34+09:00

LaravelはFormRequestという仕組みでバリデーションを分離できる。APIの場合はコードを変えずにバリデーション結果のJSONを取得することができるのでその方法。

ちなみにAPIでない通常のWebページの場合は$errorsオブジェクトを使ってページ上にバリデーション結果を表示することができる。これのために作ったFormRequestをそのままAPIでも利用することができる。

やりかた

リクエストする際にAccept: application/jsonヘッダーを送るだけ。これでJSONで取得できる。

以前のやりかた

ちなみに以前はこんな感じでFormRequestのメソッドをオーバーライドして対応していたっぽい。

【Laravel5】FormRequestのバリデーション結果をJSON APIで返す

もしかしたらこの時もAcceptヘッダーを送ればできたのかもしれないが。何にしろ、リクエスト側の仕様の問題でAcceptヘッダーを正しく送ることができないのであればこの方法でやるしかなさそう。

ReactでGraphQL APIにアクセスする

2019-03-31T23:50:35+09:00

背景

AnnictのGraphQL APIからデータを取得したい！
参照：アニメ視聴遅れ管理サービスの開発

reactではどう実装するか

Apollo Clientが便利なようです。

Apollo Client + React 入門

必要なパッケージのインストール

npm install apollo-boost react-apollo graphql-tag graphql --save

ApolloClientの作成

エンドポイントを設定します。
アクセストークンをヘッダに設定します。

//APIエンドポイント
let url = let url = 'https://api.annict.com/graphql'

const client = new ApolloClient({
            uri: url,
            request: operation => {
                operation.setContext({
                    headers: {
                        authorization: 'Bearer ' + code
                    }
                })
            }
        })

graphqlを記述する

このクエリは、ログインしているユーザ (viewer) の
見た作品 (state:WATCHED) をシーズン別降順 (orderBy: {field: SEASON, direction: DESC) でフィルタリングして返すという内容です。

let query = gql`{
            viewer {
              works(state: WATCHED, orderBy: {field: SEASON, direction: DESC}) {
                nodes {
                  title
                  seasonName
                  seasonYear
                }
              }
            }
          }`

当初はタイトル画像のようなクエリのアプローチをしていたのですが、annictのdiscordコミュニティでannict作者のshimbacoさんに「こう書くといいですよ」と教えていただきました。

最後に

とりあえずコンソールにログを出力するところまで。
これをstoreに入れて表示してreact dndでソートするところまでが目標。

export const fetchWatchedTitles=(code)=>{
    (async()=>{
        let url = 'https://api.annict.com/graphql'
        let query = gql`{
            viewer {
              works(state: WATCHED, orderBy: {field: SEASON, direction: DESC}) {
                nodes {
                  title
                  seasonName
                  seasonYear
                }
              }
            }
          }`
        const client = new ApolloClient({
            uri: url,
            request: operation => {
                operation.setContext({
                    headers: {
                        authorization: 'Bearer ' + code
                    }
                })
            }
        })
        let response = await client.query({
            query
        })
        if(response !== null){
            console.log(response.data.viewer.works.nodes)
        }
    })().catch(
        error=>{
          console.log(error);
        }
    )
}

参考リンク

AnnictのGraphQL APIを使ってアニメデータを取得しよう

今注目のAIアプリを簡単に作れる、「AIメーカー」のAPIを公開しました！

2018-09-23T05:58:30+09:00

こんにちは、2z（Twitter： @2zn01 ）です。

先日、今話題のAIをweb上で誰でも気軽に作れる「AIメーカー」を開発しました！

■AIメーカー
https://aimaker.io/

今話題のAIをweb上で誰でも気軽に作れる「AIメーカー」を開発しました！①AIに覚えさせたいタグを入力②タグから自動で画像データを収集③AIがデータから学習の３ステップで誰でも簡単にAIを作れます！動画では手相占いのAIに挑戦！みんなもAIを作って遊んでみてね！https://t.co/66DFU7GRZ2 pic.twitter.com/ie1LmioyA1
— 2z＠AIメーカー (@2zn01) 2018年7月19日

そのときにまとめた記事でこんなことを言ってました。

今話題のAIをweb上で誰でも気軽に作れる「AIメーカー」を作ってみた
https://qiita.com/2zn01/items/0d3147c9d9d804ad9880

・オープンなAIを目指したい

百科事典ならwikipedia、地図ならOpen Street Mapのように、みんなが作ったAIをオープンに公開し、みんなでAIを便利に活用できる、そんな場所があったら面白いし、便利じゃないかと考えました！
・みんなのAIプラットフォームへ

AIをクローズドなものとして囲い込むのではなく、もっとオープンにみんなで共有すればもっと便利さを享受できると考えました。

そして、こんなAIが欲しいというのがあったら、みんなで協力してアイディアを出して、みんなで学習データを集め、AIを作ってみるのも良さそうです。

学習が完了したAIはみんなで活用します！みんなハッピー！

作ったAIをオープンにみんなで共有し、みんなで活用する「みんなのAI」プラットフォームを目指しますと。

API公開しました

ようやくですが、AIを作るだけでなく、AIメーカーで作成したAIをwebサービスやアプリに組み込めるようにAPIを公開しました！

AIメーカーのAPIは自分が作ったAIはもちろんですが、他の方が作った公開されているAIもAPIとしてみんなで活用できます。

APIの呼び出し方法

HTTPリクエスト

POST https://aimaker.io/image/classification/api

クエリパラメータ

パラメータ	型	説明
id	integer	モデルのIDを指定してください。
apikey	string	APIキーを指定してください。
file	binary	画像ファイルを指定してください (jpg, png, 10MB以内)

モデルID、APIキーについては、AIメーカーの各モデル画面の「APIを使う！」をご覧ください。
https://aimaker.io/app/image-classification/id/1

各モデルは以下URLのみんなのAIから検索頂けます。
https://aimaker.io/app/search

CURLでAPIを実行する場合

curl -X POST -F id=$id -F apikey=$apikey -F "file=@/path/to/image/sample.png" "https://aimaker.io/image/classification/api"

成功時のレスポンス

JSON形式


{
    "state": 1,
    "url": "https://aimaker.io/sample.png",
    "labels": {
        "0": {
            "score": 0.997,
            "label": "ラベル0"
        },
        "1": {
            "score": 0.003,
            "label": "ラベル1"
        }
    }
}

失敗時のレスポンス

JSON形式


{
    "state": 0,
    "messages": [
        "不正なアクセスです。"
    ]
}

APIの活用例

あくまで一例ですが、以下のような活用が可能かと思います。

webサービスに画像認識を組み込む
アプリに画像認識を組み込む
LINE BOTなどで画像認識Botを作る

AIメーカーとそのAPIを使うことで、自分で画像認識モデルを作る手間を省いてシステムに組み込めるので、ぜひご活用ください。

最後に

AIメーカーを使って、AIで遊んでみてください！

■AIメーカー
https://aimaker.io/

みんなのAIは以下のURLから検索頂けます。
https://aimaker.io/app/search

「AIメーカー」はまだまだ構想の一部しかできていないので、僕も頑張ってこれからもっと機能を追加していきたいと思っています。
「みんなのAIプラットフォーム」となれることを目指します！

AIメーカーに少しでも興味をもって頂けましたら、ぜひフォローやいいね、リツイートで応援お願いします！

Twitter： @2zn01
note： @2zn01

AIメーカーでは、以下のようなことができます。

・画像認識

今話題のAIをweb上で誰でも気軽に作れる「AIメーカー」を開発しました！①AIに覚えさせたいタグを入力②タグから自動で画像データを収集③AIがデータから学習の３ステップで誰でも簡単にAIを作れます！動画では手相占いのAIに挑戦！みんなもAIを作って遊んでみてね！https://t.co/66DFU7GRZ2 pic.twitter.com/ie1LmioyA1
— 2z＠AIメーカー (@2zn01) 2018年7月19日

・文字起こし

みんな～！「AIメーカー」で文字起こし機能をリリースしたよー！以下の方法で簡単に文字起こしを試せるので、ぜひ使ってみて～！！??YouTubeから文字起こし??画像、音声、動画から文字起こし???録音で文字起こしAIをうまく使って少しでも面倒な作業から解放だぁ～！https://t.co/qo13Wo6Yli pic.twitter.com/gsRigVROnK
— 2z＠みんなのAI「AIメーカー」開発中 (@2zn01) 2018年8月18日

・月の絵文字でモザイクアート

【お知らせ】月の絵文字でモザイクアートが作れる機能を作りました！画像をアップロードすると、それをもとに月の絵文字を使った絵を描いてくれるので、ぜひ遊んでみてね～！https://t.co/zt3vzPNZS0 #AIメーカー #月で絵を描く pic.twitter.com/bowo1hlpXV
— 2z＠AIメーカー開発者 (@2zn01) 2018年9月14日

A3RTとユーザーローカルの文章の自動要約を試してみた

2018-07-28T21:30:43+09:00

先日ユーザーローカルが文章の自動要約ツールを公開しました。また、リクルートテクノロジーズが公開しているAI群であるA3RTにText Summarization APIという文章の自動要約APIがあります。それらを実際に使って文章の要約を試してみました。

自動要約無料ツール by ユーザーローカル

Text Summarization API｜PRODUCT｜A3RT

ユーザーローカルの自動要約

こちらはAPIではなく、ブラウザ上で使う自動要約ツールとなっています。実際に下記の文章多めの記事で試してみました。コードは削除して試しています。

bosyuの募集一覧を勝手に作ってみた（機械学習解説付き） - Crieit

結果は下記のようになりました。

3行ダイジェスト

この機能はそのままクラス分類( Classification )というらしいです。 
ひとつのカテゴリにいくつでもキーワードを設定できるようにしました。 
分類されないものは全部「その他」カテゴリに入れています。

10行ダイジェスト

bo sy u. me の一覧ページを作成してみました。 
応募が来るとサービス上で簡単一覧できる便利なサービスです。 
（カテゴリの自動分類方法詳細は後述）、環境 
機械学習によるカテゴリの自動分類、サービスの肝です。 
この機能はそのままクラス分類( Classification )というらしいです。 
Watson Natural Language Classifier (自然言語分類) 
facebookresearch / fastText : Library for fast text representation and classification 
ひとつのカテゴリにいくつでもキーワードを設定できるようにしました。 
非常に的確にカテゴリ分類ができるようになりました。 
分類されないものは全部「その他」カテゴリに入れています。

どちらもいまいちではありますが、10行の方は多少それっぽくは見えます。

ユーザーローカルの自動要約は3行、5行、10行から選べるため一番それっぽいものを選ぶことができます。また、文章のどのあたりが重要な部分か、というのをマーカーやヒートマップで確認する機能もあるので、参考になります。

ただ、重要な部分を使って自動要約を行っているので、人間が作る要約とは違い文章の開始と終了が不自然だったりします。今回の3行の方等もそんな感じですね。

また、こちらは結果表示画面に精度向上のためのアンケートがあるので、無料で公開するかわりにみんなで協力してデータを集めて精度を高める実験中、という感じがします。

A3RTの自動要約

A3RTの方はText Summarization APIといって、プログラムから実行できるようなAPIとなっています。こちらは下記のような制限があります。

要約できる1文の最大文字数は200文字、且つ最大文章数は10です。

ということで、そのままでは長文には使えないので、記事の本文を上記に合うように区切って、それぞれを自動要約してくっつけることで試してみました。

bosyu.meの募集一覧ただ、ただほんとに一覧するだけだとTwitter上で#bosyuというハッシュタグを使って見ればいいだけなので、独自の機能としてカテゴリ分類機能を追加し、カテゴリ毎の募集を見られるようにしてみました。
8ce5b9af-16f5-d75a-536d-b62a6e57971e.pngカテゴリは選択たらすぐに画面が切り替わるのですが、Date Pickerはどうも選択時のcallbackが無いようだったので、仕方なく検索ボタンを押してもらう形にしました。
Google Cloud Natural Language APIGoogle Cloud Natural LanguageとりあえずGoogleなら何かあるだろ、と思って調べたら全くそのままのものがありました。
機能的にはこれで問題なかったのですが、とりあえず最初にGoogleのAPIを知ってしまったので学習が要らないAPIを引き続き探しました。
色々探しましたがGoogleのもののように良い感じに最初からカテゴリ分けされてるっぽいものはなさそうですし、ツイートであれば学習データを集めるのは特に難しいことではないし、学習させるというのも大事なことだと思ったためです。
ツイートなので文章が全体的に短すぎるのか、何時間かしかかけずに集めたデータが少なすぎたのか、おかしなカテゴリに入ってしまうものが多発しました。こういう場合にはわざわざ機械学習を導入せず、シンプルな方法を選択することも必要な場面はあると思います。

変な感じにはなっていますが、これは前述の通り適当な仕様で自動要約しているので、多分その作り方に問題がありそうです。長文の場合はもうちょっと考えて実装しないといけなそうですね。もしくはA3RT自体が対応してくれないと厳しいかもしれません。

こちらも要約後の文章数は指定できるので、いくつか出力して一番良いものを選ぶことはできそうです。

今回試しに作ったプログラムは下記で操作できるものを公開しています。

A3RT Text Summarization API Sample

プログラムはGitHubに公開しています。（最短で動作するように作ったので適当です）

dala00/a3rt-text-summarization-sample

まとめ

どちらの自動要約も十分なものか、と言われると微妙ですが、とりあえず大量に要約文を作りたい、という場合には良さそうです。ユーザーローカルは多分そのうち有料でもっと精度の高いAPIが実装されるのではないかと思いますが、A3RTであればなぜかはわかりませんが無料ですので、必要に応じて使っていくことは可能です。

今のところどちらも機能的に制約がありますが、機会があればぜひ試してみてください。