omuriceman's blog

iOS / AWS / Firebase / JavaScript / Deep Learning を中心とした技術を面白く紹介します!

GitHubが作った謎のAPI?BOT? / Meet the Noopsで面白くてくだらない機能を作ってみよう!

f:id:omuriceman:20190618170614p:plain

なんだこの謎のサイトは・・・!GitHubが先日謎のサイトとリポジトリを作成していたのをご存知でしょうか?

noopschallenge.com

最初は全貌がよくわかっていなかったのですが、どうやらお題やAPIが用意されていてそれを使って面白い機能を作って公開するというプログラミングチャレンジが行われているようです。

紹介されているブログはこちら。

github.blog

お題は毎週ごとに5問ずつ追加されるようで、現在はLevel2までのAPIを用意しています。

どんなAPIやお題があるの?

  • ドラムパターンを出力するAPI
  • ベクトルを出力するAPI

https://noopschallenge.com/static/images/challenges/vexbot/lines-buildup.gif

  • 上下左右の方向とスピードを出力するAPI

https://noopschallenge.com/static/images/challenges/directbot/invader.png

他にもあるので見てみると面白いですよ!

自分も作ってみた

ブログで紹介する以上、私も何か面白いものを作らないといけませんね!

Hexbotにチャレンジ

私がチャレンジしたBOTHexbotというAPIにアクセスするとランダムな16進数のカラーコードを返すBOTを使用することにしました。 noopschallenge.com

APIの内容

HexbotのAPIの内容について解説を行います。

なにもパラメーターを指定せずにGETするとランダムに1つのカラーコードが返されます。

https://api.noopschallenge.com/hexbot

GET /hexbot
{
  "colors": [
    {"value": "#52a351"}
  ]
}

countで数値を渡すと1000までの範囲でカラーコードを返します。

GET /hexbot?count=5
{
  "colors": [
    {"value": "#EF7FED"},
    {"value": "#5F47C2"},
    {"value": "#D5FF9F"},
    {"value": "#62B217"},
    {"value": "#DD36D9"}
  ]
}

widthとheightを与えるとその数値の範囲内でxとy座標を返します。

GET /hexbot?count=5&width=1000&height=1000
{
  "colors": [
    {
      "value": "#4E3E97", "coordinates": { "x": 367, "y": 419 }
    },
    {
      "value": "#D6381F", "coordinates": { "x": 180, "y": 41 }
    },
    {
      "value": "#F82971", "coordinates": { "x": 145, "y": 495 }
    },
    {
      "value": "#D680CF", "coordinates": { "x": 493, "y": 148 }
    },
    {
      "value": "#F92C20", "coordinates": { "x": 152, "y": 380 }
    }
  ]
}

作成した機能について

さて私はChrome拡張機能として2つ作ってみました!GitHubに公開しております!

github.com

①カラーポインター マウスの動きに合わせてカラフルなポインターが表示されます。 f:id:omuriceman:20190623214820g:plain

②カラフルモザイク Webページ上で隠したい箇所にカラフルなモザイクをかけます。 f:id:omuriceman:20190623215501g:plain

他の人の活用アイデア

個人的に面白いアイデアだな!と思ったのがこちら!

playcode.io

時間(hh:mm:ss)を16進数(#hhmmss)に見立てて毎秒ごとに画面の背景に描画しています。実用性は皆無なわけですが、こんな使い方もあるなと感心してしまいました。

まとめ

  • GitHubのプログラミングチャレンジMeet the Noopsを紹介した
  • 色々なAPIやそれの活用事例が掲載されていて自分が作ったものを投稿できる
  • 課題をクリアするとGitHubのコミュニティフォーラム限定バッジがプレゼントされるらしい

この夏みなさんもチャレンジしてみてはいかがでしょうか!?