search
LoginSignup
23

More than 3 years have passed since last update.

posted at

updated at

GitHubへのコミットに応じてTwitterのユーザーネームを更新するWEBアプリを一週間で作ろうとした話

はじめに

この投稿はN高等学校 Advent Calendar 2018 23日目?の記事です。
知らないことがたくさんあるので、間違いがあればコメント欄に優しく書いていただけると助かります!

N高等学校の生徒です。
2年生で、心斎橋キャンパスに通っています。
通学時間は2時間です(遠い目)。

本格的にプログラミングを始めたのは4月から。
つまりプログラミング8ヵ月です。お手柔らかにお願いします🤲

GitHubのコミットに応じてTwitterのユーザーネームに拡張子をつけるWEBアプリ
アートボード 1@4x.png

WEBアプリにはできませんでした。ごめんなさい!!!!
本当はOAuthで皆さんにも使ってもらおうかと思っていたのですが、時間の都合で無しにしました()

なお、「アドカレやべえ!」ってなった12/17からの開発です。
圧倒的に時間・技術力が足りてないのでその点はご了承ください😅

動機

…ってなったので作りました。

中身

  • Docker
  • Node.js
    • Express
    • NOW
  • Twitter API
  • GitHub API

採用理由は特にないです。無難なやつを使ってます!

仕組み

  1. GitHub APIを使用して1日のコミット数・コミット言語
  2. 一番コミット数が多かった言語
  3. Twitter APIを使用して、プロフィールを更新!
  4. cronを使用して毎日0:00に定期実行!

実際にやってみた

Before

After

感想

うおおおおおおおおおおおおおおおおおおおおおおおおおおおおおおお!!!!!

Node.jsを触ったことがなかったのと、GitHub、TwitterのAPIを叩けたことなど諸々含めて超嬉しかったです。

難しかったところ

Twitter API

Twitter APIでは POST account/update_profileをしなければなりませんが、ドキュメントが公式しかなく、すごく大変でした…(まぁ、RESTful APIなので当たり前ですね。)
最初はAxiosでゴリ押ししようと思っていたのですが、大変そうだったのでTwitを使いました。
コードは以下です。

app.js
T.post('account/update_profile', { name: displayName }, (err, data, res) => {})

post() の第一引数がエントリーポイント、第二引数がクエリ、第三引数がコールバックとなっています。

GitHub API

GitHubのAPIはAxiosというライブラリを使いました。

app.js
const axios = Axios.create({
  baseURL: 'https://api.github.com/',
  headers: {
    'Content-Type': 'application/json',
    'User-Agent': 'lang-display'
  },
  responseType: 'json'
})

const getUniqueRepositories = events => {
  return events.map(event => {
    return {
      url: event.repo.url,
      commitCount: event.payload.size
    }
  })
}

const getLastDayPushedRepositories = events => {
  const lastDay = moment().subtract(moment.duration(1, 'days'))
  const lastDayPushEvents = events.filter(event => moment(event.created_at).date() === lastDay.date())
  return getUniqueRepositories(lastDayPushEvents)
}

module.exports = userName => {
  axios.get(`users/${userName}/events`)
    .then(res => {
      if (res.status === 200) {
        const pushEvents = res.data.filter(event => event.type === 'PushEvent')
        } else {
          console.error(`Status: ${res.status}\n${res.statusText}`);
        }
    }).catch( err => {
      console.error(err)
    })
}

なお、GitHub APIにどの言語にコミットしたか、というのを直接取ることはできません。
コミット履歴から地道に情報を取っていきましょう。

タイムゾーン問題

GitHubのAPIは2018-12-18T15:21:41Zのように、ISO 8601形式UTC時刻を出力します。
なお、UTCセシウム原子時計が刻む時刻と、地球の自転から求められる時刻のずれを修正した全世界共通の時刻のことで、ISO 8601日付の表示方法を定めた国際規格 です。
グローバルなアプリだから日本時間考慮しなくてもいいか!と思っていたのですが流石に嫌だったので、moment.jsを使用して時間の計算をすることにしました。
(間に合わなくてリリースできなかったんだから時間の考慮云々関係ないじゃん!というのは内緒です。)

moment.js 使い方

moment()に先ほどGitHub APIで取得したISO 8601形式の文字列をそのまま投げると比較用のオブジェクトが生成できます。
また、fromNow()で対象のオブジェクトが現在から何時間前か、なども取得することができます。
詳しいことは公式サイトをご覧ください。

cli問題

babel-clibabel-nodeを入れていて、ひたすら

error
npm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! babel-node@6.5.3 postinstall: `node message.js; sleep 10; exit 1;`
npm ERR! Exit status 1
npm ERR!
npm ERR! Failed at the babel-node@6.5.3 postinstall script.
npm ERR! This is probably not a problem with npm. There is likely additional logging output above.

npm ERR! A complete log of this run can be found in:
npm ERR!     /Users/yoshi1125hisa/.npm/_logs/2018-12-19T04_25_07_032Z-debug.log
コードbabel-node@latestで1のインストールに失敗しました

のエラーが出ました。正しくは @babel/cli, @babel/nodeです。
実はここで折れそうになりました。。

まだ実装できていなくて、今後やりたいこと

  • ソースの公開
  • 皆さんに使ってもらえるようにする!
  • 拡張子を入力するときにユーザーネームの規定文字数を越えるときの処理
    • ex)20文字以上になるとエラーになるので、事前にユーザーネームを(20-拡張子分)にしておかないといけない…

目標!

1月末にリリースしたい!

終わりに

ここまで読んでいただきありがとうございました!
では次のN高アドベントカレンダーを引き続き宜しくおねがいします!

宣伝

N高等学校は、IT×グローバル社会を生き抜く“創造力”を身につけ、世界で活躍する人材を育成しています。
自分の得意分野をとことん伸ばしたい方にはこの学校はベストな選択肢だと思います!
ぜひあなたもN予備校で一緒に学びましょう!

Special Thanks

  • OJI (@OldBigBuddha)
    • Node.js、APIを教えてくれました。ありがとうございました!
  • くまちゃん (@floppy73)
    • アイデアをくれました。ありがとうございました!!
    • お誕生日おめでとう!!
  • N高等学校 #programming の皆さん
    • 相談に乗ってくださりありがとうございました!

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
What you can do with signing up
23