残タスク

[Atsukyyy]

0. 全体的に

• [ ] headのkeyword、description、titleなどを適切に入力する

1. top

top全体

• [x] topSection__titleの縦の中心にhorizontal-lineが常にくるようにする（今はjsで読み込み時の高さの中心で制御しているが、titleをvwにしたことによりブラウザ幅の変化によって常に中心に来なくなった。） →常に真ん中にきているように思えるが..
• [ ] ヘッダーのナビゲーションの上部が透けて背景が見えないようにする

topCover

• [x] SPの画像表示領域を、デザイン画像通りに適切にする。今は例えば2つめは雲だけなど、デザイン上良くない。

PROJECTS

• [x] 半透明のimg、正式文言がきたら微調整する
• [x] ↑時にsp用htmlを書く
• [ ] imgの背面ではなく全面に線を通す
• [x] 斜線部のテキストをレスポンシブに
• [x] topCoverのメインメッセージの「日本の就活を変える」はデザイン性重視で画像ファイル(eyecatch.png)にする
• [x] newsのサイドバーの長さが足りないバグがあるので、レスポンシブに修正する
• [x] spのPROJECT写真（縦長のやつ）はPCようの写真の一部をcssで指定して使う
• [x] ヘッダーのナビゲーションの閉じるボタンの線の幅を、開くボタン（ハンバーガーボタン）の幅と同じにして細くする
• [x] headerのロゴのリンク、クリッカブル領域広げる
• [x] レスポンシブ対応
• [x] フッター、ヘッダーのナビゲーションのリンク先をちゃんと設定する
• [x] SPの表示時にhorizontal-lineが見えてしまっているので消す
• [x] 【優先度低】$top-project-img-translucent-widthを使って、画像の下辺の半透明部分との境目をブラウザの横中心に持ってくる。またその際、画像と逆の領域（タイトルと説明）は半透明部分に少し被せる。かぶせ具合はデザイン画像の1こ目のprojectを参考に。（被せるにはfloatではなくてabsoluteにする必要があるかも）
• [x] 2,4個目の右側の空白をabsolute+ネガティブマージンとかでなくす。
• [ ] SPの画像の高さを、横の文字領域の高さに合わせて小さくする。余白の取り方は任せる。 →Project毎にtext量が違うため、画像の縦幅をこれ以上短くして４つとも統一できない
• [x] SPのタイトルの番号を左右にわけず左側に揃える。（具体的には2, 4 のものを左側に）。
• [ ] 【優先度低】SPで、ブラウザ幅を縮めた時に画像の縦横比が変わらないようにする。表示領域を小さくするなどで対応する。

2. about

Google Map

• [x] 色味をデザインの青っぽいものに変える
• [x] API keyをヘテムルで環境変数に設定する
• [x] 電話番号をタップでかかるように →google map APIキーは第三者に知られても問題ないためscriptタグ内に直接埋め込む
• [x] レスポンシブ対応
• [ ] google mapのピンの大きさもレスポンシブに

3. contact

タブ

• [x] デザイン性の向上
• [x] レスポンシブ対応
• [x] ハンバーガーバツボタンの微妙な位置
• [x] sp画面"CONTACT"の文字の大きさ
• [x] ブラウザ幅を小さくした時にフッターがデザイン崩れの修正。例えばcopyrightが消えたりしている。
• [x] topSection__title（もはやtopだけに使ってないが..）のfont-sizeにvwがきいてなくてレスポンシブになってないので修正
• [x] ”企業の方へ”を最初から選択状態にする

フォーム

• [x] 入力必須フォーム、バリデーションなどがあれば良い →HTML5のform type で対応

4. ハンバーガー

• [x] ホバー時の色

5. BEM

• [x] 例.. indent, paddingのようなtopに関係ない一般的な名前のくらす名がtopのファイルにある
• [x] .topProjecttextitemのようなelementのelementが一番外の回想にblockっぽく記述されてしまってる
• [x] indent--noneのようなmodifierがあるのにその大元の.modifier自体は存在していない

[motorkey]

@Atsukyyy 半透明の画像をpushしたのでPROJECTSの部分の調整よろしく

[motorkey]

@Atsukyyy google mapのピンなど、自分でタスクを見つけるのいいと思う

[motorkey]

6/26作業したこと(2:30~4:30)

前提... php, wordpressともに全く書いたことは無い

1. wordpressはSEOに強いことが判明し、wordpressを残したままwordpress内で移行を決断。また、phpのルーティングを利用できるなどの恩恵を受けられる。
2. "http://whatwpthemeisthat.com/" でtwing.tokyoのwordpressテーマを確認し、独自テーマであると確定。同時にcontact form 7というプラグインの利用が判明。これを利用できるのもwordpressを残すメリットだろう。
3. HTMLサイト -> wordpressの以降についてリサーチ。例: https://ruuski.net/web/modify-html-website-to-wordpress/ またwordpessの詳細についてはここで調べられると発見。http://wpdocs.osdn.jp/
4. header.phpなどのwordpressのtempleateの各部品の場所をheteml ftpで探し始めるが、使いづらいのでローカルにファイル群をダウンロードを決意。しかしやり方がわからないので、ターミナルでftpからダウンロードすることにする。http://qiita.com/ukiuki/items/569c4f86eb73c2eb37a0 を参考にした。できないのでhetemlも推奨しているcyberduckでftpに接続してダウンロードした。572MBは重いなと思う。localではtwing_oldのdirectoryにtwing.tokyo以下を入れる構成で合わせてもらえれば。cyberduckいけてるしアップロードもこれで行うことにした。

以上。上記ドキュメントなどを参考にし、作業を頼む。テンプレートを作ると全ページに影響してしまうので、とりあえす26日のアップではcontact.htmlだけを何かしらの方法でwordpressに取り込んで本番アップしてくれ。ざっと手を動かした感じ、工数は数週間ではなく数時間程度じゃないかと思った。

[motorkey]

7/4(4:00-7:00)

phpで新サイトを作る上での情報

• 参考サイト: http://www.objective-php.net/
• MVCを用いる（Mは多分使わない）
• ルートディレクトリに.htaccessを置き、ここにmod_rewriteで記述し、常にindex.phpに飛ばすようにする
• ルーティングはDispatcher.phpに記述
• libには外部ライブラリファイルを配置
• commonには共通のコードを記述

hetemlについてわかったこと

• apacheの機能であるmod_rewiteは.htaccessに記述することで利用可能(https://heteml.jp/support/faq/249.html)
• 公開ディレクトリはweb以下(https://heteml.jp/support/manual/makesite/)
• Smartyは使用可能（サーバーに搭載されている）で、使いたい時は「require_once("Smarty/Smarty.class.php");」で読み込む (https://heteml.jp/support/manual/smarty/)
• 2012年10月にSmart2.6.27にバージョンアップしたという記事があるのでこのバージョンだろう

mampについてわかったこと

• ローカルサーバー側のエラーログは、MAMP/logs/php_error.logに記述されており、tail -f php_error.logでトラックできる
• Smartyは2.6.30を所定の場所に配置し、パス名も調整することで、各プロジェクトからrequireできる

[motorkey]

7/5, ~9:30

• 本番の.htaccessの変更およびmaintenance.htmlをアップし、旧サイトを一時的に封鎖した