2017komabasai 〜2017駒場祭特設ページ〜

共有すべき重要な事柄が色々書いてありますので、一通り目を通しておいてください。

進捗共有

Webサイト

• Header
• Top
  • 最終期日：2017/11/17（金）
  • スライドに載せる写真を待ってます
  • 一定時間で切り替わるスライドの実装をしようと思っています。
• Story
  • 最終期日：2017/11/17（金）
  • 背景画像と説明文が未定
• Movie
  • 最終期日：2017/11/17（金）
  • 真ん中に配置するのがまだです
• AR
  • 最終期日：2017/11/17（金）
    • おおよそ終わった
  • 載せる写真（以下のうちどれか or 日によって変える）
    • ３Dオブジェクト（厳しそう）
    • ARマーカー
    • 立て看板の写真（前日になりそう）
    • クリアファイルの写真（デザインは全部は映さないとおもう）
• Access
• Special(美女図鑑)
• Vote
• Others
• Entire Layout

その他

• AR
  • 3Dオブジェクト制作中です
    • 2017/11/07中には完成させます。
    • ロゴである卵の周りを小さい複数の球が回る感じにするつもりです。
    • 完了しました（かなりブレが気になりますが、アニメーションを盛り込むとこうなってしまうと思う）
      • https://pollenjp.github.io/utvirtual_3d_logo/

Tips

• スマホの縦と横でレスポンシブにデザインを変えたい方は450pxあたりを境目にするといいと思う。
• 参考：歴代iPhoneたちのサイズ（ https://webskillup.com/ety/20140919180945/ )

header task

• hover方向が上の時に、menuが閉じるようにする
• スマホで横にした時menuがスクロールできるようにする//これは厳しい
• header のシステム上の作業はひとまず完了！

AR task

• resizing the picutures
  • スマホページは修正完了
  • PCページで軽いズレあり(2017/11/07現在)
    • エラー症状：ページを開いた状態で左右に小さくスクロールできてしまう
    • エラー動画：https://youtu.be/luGI_urucCs
    • 解決!
      • body要素がデフォルトでstyle="margin:8px"だったため、画面サイズで横幅を取得していたコンテンツが余分に16px(2*8px)分多めに幅を確保してしまっていた。
      • htmlファイルで要素に直接書き込んで"0px"にしておきました。

special task

• 美女図鑑の説明文
• レイアウト
• レスポンシブデザイン
• 画像の素材

layout task

• デザイン班に背景を受注

cssの注意点

• 入れ子になっている要素にcssを適用させたいとき

  • 条件としたいclass名を半角スペースで区切ってあげます。
  • 「要素名 class名」や「要素名 要素名」など、様々な場面で使われるメジャーな記述方法です。
  • 必ず入れ子の順番で記述します。

• 同じ要素内の複数のclassを指定する場合は、半角スペースで区切らずにそのまま繋げて記述します。

• 参照：http://rsv-rank.info/css/css-tech/classes/

• cssファイルを各セクションごとに設けてあります。混同/競合が起きないようにするため、作業中のセクションの名前がついているcssファイルに要素を追加してください。

• "css"というフォルダがあるので、css拡張子が付いているファイルはここに入れましょう。

javascript jquery の注意点

• ~.js が付いているファイルは分けましょう(ex: header.js top.jp など)
• フォルダ"js"があるので、js拡張子が付いているファイルはここに入れましょう。

git (github)の使い方

基本情報

• まず、共用のクラウド上にレポジトリという、容器があります。このクラウドのレポジトリをリモートと呼ぶことにします。

• マスター(master): 出来上がり/木の幹になる部分/これが完成品に直結するデータ/神聖なもの

• ブランチ(branch): 作業のため、マスターから一旦切り離されたもの/各自のワークスペース

• クローン(clone): リモートのファイル/フォルダを自分のパソコンにダウンロードします。

• プル(pull): リモートの状態に自分のパソコンの状態をアップデートすします。

• add(sourcetreeは勝手にやってくれる): 自分がファイルに加えた変更の内、どれを自分のパソコンにあるブランチまたは自分のパソコン上のマスターに追加するか選びます。(この時点ではまだブランチに自分の変更は記録されていません)

• コミット(commit): 自分のパソコン上にあるブランチ/マスターに、自分が加えた変更を記録(追加)します。(この時点ではまだブランチ/マスターにおける変更は自分のパソコン上のみで、リモートには反映されません)(コミットの時に書く文章は基本英語ですが、まぁ日本語でもいいですww)

• プッシュ(push): 自分のパソコンでのブランチ/マスターの状態をリモートに反映させて、リモートをアップデートします。ブランチの場合はそのブランチをリモートに追加、マスターの場合はそのままリモート上のマスターをアップデートします。そうすると、他の人も、自分のプッシュしたブランチやマスターの状態を確認できます。

• マージ(merge): ブランチとブランチ、ブランチとマスターを一つの状態に併合します。この操作は競合がない場合のみ実現されます。マージは自分のパソコンで、マージしてから、リモートにプッシュする方法と、github上で、あらかじめプッシュしたブランチからプルリクエスト(pull request)を作ってから、(権限がownerではない場合は)他の人に競合はないかなどを確認してもらった上で、マージをしてもらうという二種類あるが、個人的には後者の方が、他人の目が入るので、より安全だと思います。(ここは流儀によるので好きな方でいいと思います)(マージする前に、動作確認をよろしくお願いします)(ownerは他人の目を通さずにマージができます、今回は全員ownerにしています)

• 競合(conflict): マージ先の現在のマスターの状態が、ブランチを切った時のマスターの状態と異なっていた場合、自分の加えた変更と、新しいマスターの状態のどちらが正しいかは、gitは判断してくれません。この時、競合が起こるので、手作業でどちらの状態を優先するかを判別していき、競合を取り除きます。

###　間違ってマージした場合

• git reset
• git revert

活用にあたっての注意点

• マスターのプルはこまめにやりましょう！(マスターを最新の状態に保ちましょう！)
• コミットもこまめにやっておくと良いです。
• なるべく新しい状態のマスターからブランチを切りましょう！

pull test

コメント

アイデア/コメントがあれば、どんどん書いていってください！

わからないことがあったら、どんどん質問してください！一緒に問題を解決しましょう！

こまめなcommitを！

• こまめにcommitすることは生きている証です、メンバー同士で進捗を共有しましょう☆