Git Product home page Git Product logo

git-push-hackathon's Introduction

Git Push Hackathon

Read this in other languages: English

株式会社サイバーエージェントが主催する、Webフロントエンドエンジニア向け学生限定ハッカソンです。
成果物をレポジトリにpushするだけのリモート参加型のイベントです。

エントリー方法

こちらのエントリーフォームを記載して送信するだけでエントリー完了になります。
参加対象者は、学生のみとなりますので学校のメールアドレスが必要となります。学生以外の方は受け付けておりませんので、あらかじめご了承ください。

ハッカソン参加の流れ

  1. エントリーフォームを記載
  2. CyberAgent/git-push-hackathon リポジトリをfork
  3. forkした自身のリポジトリでGitHubアカウント名のフォルダを作成し、そこでアプリを開発
  4. 開発終了後、CyberAgent/git-push-hackathon リポジトリに自分のGitHubアカウント名のフォルダごとプルリクを出す

※プルリクが出た時点で開発終了となります。
※チームでの参加は歓迎致しますが評価の都合上、最優秀賞、優秀賞の贈呈は出来ません。最低要件まででも構いませんので、ぜひ個人での参加をお待ちしております。

お題

YouTubeのプレイリストAPIを用いたWebアプリケーション開発

最低要件

  • YouTubeのプレイリスト一覧を表示できる
  • プレイリストを追加することができる
  • プレイリストに入ってる動画を一覧表示できる
  • プレイリストに動画を追加できる

(APIには認証が必要となります)

開発について

評価のためにこちらでプロジェクトをビルドする際、依存解決などの工程が必要な場合は、自身のフォルダにREADMEを作成し工程を記載してください。
ツールなどによって作成された依存パッケージは、リポジトリに含めなくても構いません。
こちらでビルドする際に、依存を解決できなかった場合も審査対象になりません のでご注意ください。

アプリの作成に使用するClient IDやClient Secretは、ご自身で作成してください。
評価のためにビルドする際は、こちらで作成したものを使いますのでリポジトリに含めないようにし、READMEにClient IDやClient Secretを記載するべき箇所、またはファイル名を記載してください。
Client Secretをコミットしないようにお気をつけください

期間

  • 募集期間: 2020/01/27 00:00:00 +09:00 ~ 2020/02/26 00:00:00 +09:00
  • 開催期間: 2020/02/12 00:00:00 +09:00 ~ 2020/02/26 00:00:00 +09:00

※ 募集期間内であれば参加いただけます。
※ 開催期間を過ぎたプルリクエストは対象外とさせていただきます。

評価について

評価ポイント

創意工夫していただきたい、評価ポイントは以下です。ポイントが高い順に記します。

  1. 設計
  2. 最新技術、言語仕様を正しく用いた実装
  3. UI/UXへのこだわり
  4. その他各々の工夫・こだわり(プルリクエストにて説明したものを見ます)
  • 例: パフォーマンス、アクセシビリティ、セキュリティ、etc...

評価対象外

以下の基準を満たしていない場合は、評価いたしません。

  • お題の最低要件を満たしていない
  • ビルドができない
  • コピペだと思われるソースコードの使用

締め切り後、各クライアントで評価を行い、優秀者の決定を行います。結果はメールにてお知らせいたします。

賞品

最優秀賞 (各クライアントから1人ずつ)

賞金30万円 + 現場で活躍するエンジニアとの会食 (地方からの参加の場合、交通費、宿泊費付き)

優秀賞

現場で活躍するエンジニアとの会食 (地方からの参加の場合、交通費、宿泊費付き)

FAQ

質問などがあれば issue を作成してください。
回答済みのissueはCloseせずに残していただきて構いません。

主催者

git-push-hackathon's People

Contributors

aakira avatar kaelaela avatar ra1028 avatar ryotasugawara avatar shoheiyokoyama avatar

Stargazers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

Watchers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

git-push-hackathon's Issues

結果発表について

発表は3/12(月)のお昼頃を予定しています。このレポジトリのissueを立てて発表します。
簡単な評価のポイントについても合わせて公開します。

みなさま、お疲れ様でした 😸

最低要件について質問です。

最低要件
GitHubのOAuthを用いたログインができる
/gists APIを用いた機能がある
gistの一覧表示ができる
gistを投稿できる

最低要件の gist の一覧表示ができる 。というのは、「自分のGistが一覧表示される」という認識であってますか?

プロジェクトに含まれる生成物について

ビルドができない場合は評価対象外とありますが、ツールにより生成されるファイルや依存関係など(iOSであればCocoaPodsによるPodsディレクトリやCarthageによるCarthageディレクトリなど)をプルリクエストに含める必要はありますか?
READMEやMakefile等にビルド手順を記載し審査の際に従ってもらうことは可能でしょうか。

関連して、自分のOAuthクライアントIDやクライアントシークレットをプルリクエストに含めたくない場合、審査の際に審査用のIDやシークレットを用いるなどの対応はありますか?

コピペの判断基準について

「コピペと思われるソースコード」というのはどのような基準、厳しさで判定されるのでしょうか?
例えば普段の開発からライブラリのように使っているユーティリティコード(ex. Swiftの便利extensionなど)を手でうつして組み込んだりすることや、設計やライブラリを使ったコーディングをするとき単純なためにサンプルコードと部分的に一致してしまうという場合もコピペと判断されてしまいますか?

git submoduleに関して

git submoduleを使用すると、最上位ディレクトリ内に.gitmodulesができてしまうのですが、これは問題ないでしょうか?

最低要件について2

#8 で既に質問されていることでまだ不明な点が出てきたので質問です。
#8 ではあくまでactivity/feeds APIを用い、認証済みユーザのpublic timelineを使用するとのことでしたが実際にAPIを叩いてみると公式ドキュメントの例でいえば

{
  "timeline_url": "https://github.com/timeline",
  "user_url": "https://github.com/{user}",
  "current_user_public_url": "https://github.com/defunkt",
  "_links": {
    "timeline": {
      "href": "https://github.com/timeline",
      "type": "application/atom+xml"
    },
    "user": {
      "href": "https://github.com/{user}",
      "type": "application/atom+xml"
    },
    "current_user_public": {
      "href": "https://github.com/defunkt",
      "type": "application/atom+xml"
    }
  }
}

というようなJSONが返ってきます。これは自分のGitHub APIやURLリクエストに対する認識不足・知識不足であれば申し訳ないのですが、ドキュメントで「認証済みユーザーのpublic timeline」とされている current_user_public_urlもしくは linksの中の current_user_publicは通常のユーザーページのURLのため、これにOAuthでとってきたアクセストークンをクエリーとして与えた https://github.com/defunkt?access_token=ACCESS_TOKENからデータをとってきてもユーザーページのHTMLしか返ってきません。そのためREADMEにあるようなタイムラインの形式に変換するのが非常に困難なように思われます。

この件に関して最低要件は

  • HTMLを頑張って解析してページ下のContribution Activityの部分のデータをタイムラインっぽく加工する
  • なんらかの方法でこのURLをxmlとして取ってくる
  • global public timelineであればXMLで取得できるのでそちらを表示する
  • OAuth認証でJSONとしてタイムラインが返ってくるactivity/events APIのList events that a user has receivedを利用する

のいずれの意味で解釈すればよいでしょうか?

WebでOAuth認証のAPIを実行するときのCORSについて

現在webコースで開発をしているのですが、OAuth認証の2段階目のPOSTをscript(XMLHttpRequest)から実行するときにCORSに引っかかってしまいます。(テストはChromeで実行しています)

error message :
Failed to load https://github.com/login/oauth/access_token: No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'http://localhost:4200' is therefore not allowed access.

(https://github.com/prose/gatekeeper に”GitHubのは、クライアント側のみのアプリケーションでのOAuthのWebアプリケーションフローを実装するのを防ぐことができます。”とありました)

(デバッグツールで見ると、POSTに対するResponseは帰ってきていてその中にはaccess_tokenも入っていました。しかしXMLHttpRequestはエラーになってしまいレスポンスを取得できていません。)

現在はHTMLだけを使ったformからPOSTすることでaccess_token(ファイル)のダウンロードをし、そのファイルに記載されているaccess_tokenを手動で入力しています。
しかし、評価するにしても、手動でファイルを開いて値を入力するのはどうなんだということで改善を考えました。

改善策としては、
①CORSにひっかからないブラウザ(Vivaldiとか)をしようする
②Gatekeeperを使用する(https://github.com/prose/gatekeeper)
③テスト用のサーバーも作成する
というものを模索しました。

しかし、①は実行環境が限られるので評価対象になるのかという疑問、②はそもそもの資料が少なく、もしかしたらサーバー側のプログラムかもしれないという疑問、③はvol.1のissueで「サーバーは必要ない」という回答がありサーバーは作らないほうが良いのかという疑問があります。

そのためwebコースでアプリケーションを作成する際は、HTMLフォームからファイルをダウンロードし手動で入力する、また、ChromeのF12デバッグツールでResponseを直接確認し手動入力するといった実装でも問題がないのか、それともwebコースはサーバーも構築したほうが良いのかお伺いしたく思っています。

ちなみに、access_tokenを用いて実行されるgist取得のAPIなどはクライアントサイドからの実行でも動作できています。

🎉結果発表🎉

最優秀賞 🎉🎉

iOS

touyouさん(PR)

細かい作り込みが出来ていて、アプリ全体の完成度が高さが突出していました。
Clean ArchitectureをベースにしたReactiveなアーキテクチャの採用、その意図の解説があり素晴らしいです。
今回評価対象にしていませんが、デザインやUI/UXへの拘りも強みだと思います。

Android

itomeさん(PR)

統一されたアプリ設計によって実装がパターン化されていて拡張しやすいと感じました。(設計に合わせたページング処理など)
また、シンプルな実装の中にもUI/UXへのプラスαの部分が含まれているもの良かったです。

優秀賞 🎉

iOS

豊富なツールをしっかりと使いこなしてiOSに限らず開発の熟練を感じました。
機能は最小限なものの実装もしっかり出来ていて完成度が高いです。
全体のアーキテクチャから細かいところまで設計に趣向を凝らすことができれはより 👌

機能実装は最小限でしたが、ReactiveやSwiftへの理解が十分あり、しっかり実装できていました。
コードの可読性も高く、流れを見やすい点も:ok_woman:

Android

Kotlin CoroutinesやAAC ViewModelなどのモダンなライブラリやDatabindingなどをうまく使い、実装が良い意味でシンプルだと思いました。

AAC ViewModelやLive Data等のモダンなライブラリを使い、極力Activity / Fragment内に処理を実装しないような作りになっているのが良いと感じました。また、UI/UXへのプラスαの部分が含まれているのも素敵でした!

拡張性、非冗長性を意識した設計の工夫があるとより良かったかもしれませんが、matsudamperさんもShoMasegiさんもよく実装できていました! :ok_woman:


※ 賞の対象となった皆様、そうでない方含め、後日再度メールにてご連絡を差し上げます。

皆様お疲れ様でした!

🎉 結果発表 🎉 Vol.2

Android

最優秀賞

Hunachi

App Bundle対応だったり、責務の切り分け、変更に対する修正箇所を抑えれる、といったマルチモジュール構成によるメリットを見据えた設計になっているところがまず良いと感じました。また、READMEに記載の設計や**がアプリ全体に反映されていて、新しい人が入ってきた際にも迷いが少なくスムーズに実装に入れそうな形になっていると思います。

iOS

最優秀賞

該当者なし

優秀賞

churabou

今回は以下の2点を評価させていただきました。

  • レイヤーの責務分けや名前空間を意識した設計を採用することで結果的にスケールしやすい状態になっている
  • こだわりを持ったUIの作り込みが出来ている

また、下記の2点を意識することで、よりクオリティの高い成果物になると思います。

  • 設計に関して、ReactorKitとRxSwift+MVVMに挑戦している分、使い分けの一貫性がない形となってしまっていたため、どちらかの設計に統一する
  • DIを意識したprotocolに関して、実際に利用する際の使い勝手も意識されたprotocolにする

完成度が高い成果物だったと思いますので、今後のさらなるご活躍も期待しております!

Web

最優秀賞

tockn

READMEに記載されている通りにVue.jsでMVVMなアーキテクチャが適切に実装できているのに加え、コンポーネントを独自のルールで役割を分けているのが分かりやすかったです。
またServerはGolangで認証解決を独自で簡潔に実現できていました。
レスポンシブなUIを実現した点も良かったです。

優秀賞

Dragon-taro

役割別にPresentational componentとContainer componentを分けている部分や、フォルダ構成が責務別にしっかりと分けられていたのが好印象でした。
ローディングアニメーションやドラフト機能等も実装しており、UXについても考えられているところが良かったです。

FlyBird-JP

モダンなブラウザで使われることを想定したESModulesベースの実装になっており、トランスパイルを必要としておらずそのままのものを配信する形が独創的で面白かったです。
またUI/UXの部分でページ遷移時のアニメーション等の細やかな作り込みに工夫が感じられました。


※ 賞の対象となった皆様、そうでない方含め、後日再度メールにてご連絡を差し上げます。

皆様お疲れ様でした!

最低要件に関して

最低要件の『activity/feeds APIを用いたフィードの一覧表示』は、以下のいずれかを一覧表示できれば満たすという捉え方で良いでしょうか?

  • GitHub global public timeline
  • 特定のユーザーのpublic timeline (特定ユーザーの更新情報)
  • 認証済みユーザーのpublic timeline (認証済みユーザーの更新情報)

要件と評価観点について

2つ質問があります。

  1. ReactNativeは使っても良いでしょうか?

  2. 評価観点1つ目の設計とは具体的に何を指すものでしょうか?

よろしくお願いします。

OAuth認証について

OAuth認証に用いるサーバも、自分で作成したものを使用するという事ですか?

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.