受験ドクターLP制作 マニュアル

大体こんな感じでやればOK的なやつ。

ワークフロー

Git

githubからダウンロード


          # ディレクトリ直下
          git clone git@github.com:jkdoc/lp.git .

          # master/ 以下
          git clone git@github.com:jkdoc/lp.git master

よくつかうコマンド


          # ブランチ作成/切り替え
          git checkout -b ブランチ名

          # githubの最新のコミットを持ってくる
          git fetch origin master
          git rebase master
          git pull origin master

          # master 以外の branch で実行
          # master のコミットを取り込み
          git rebase master

          # stage
          git add ファイル名
          git add .

          # ワークツリーの状態確認
          git status

          # コミット
          git commit
          git commit --amend

          # コミットまとめ
          git rebase -i HEAD^^
          git rebase -i HEAD~3

          # コミットの取り込み
          git merge ブランチ名

          # github へpush
          git push origin master

コミットの粒度

基本的にはgithubのissue単位。コミットメッセージに fix #issue番号 を書くことでissueがクローズできます。

デプロイ

FTPでUP。

コーディングルール

クラス・ID

  • CSSで対象とする要素はclassを利用する。idは原則利用しない。
  • idはJavascriptで要素を選択する場合に利用する。document.getElementById()は最速
  • グローバルでタグにスタイルを設定しない(.article h1 {} など何かしらの名前空間の中に入れる)
  • height縛りをしない。テキスト、画像の追加はよくある話なので特定の高さ以外で表示が崩れるコーディングはおこなわない。min-heightは可。

文書構造

<main>

  <article>
    <div class="outline">
      <header></header>
      <section></section>
      <footer></footer>
    </div>
  </article>

  <article>
    <div class="outline">
      <header></header>
      <section></section>
      <footer></footer>
    </div>
  </article>

</main>

ほぼほぼこんな感じ。

main、articleはwidth 100%、outlineに実際のコンテンツ幅を設定してmargin: 0 auto;

リンク

LPが設置される www.chugakujuken.com 内へのリンクはルートパスで設定する

○ /juku/price/
× http://www.chugakujuken.com/juku/price/
× ../../juku/price/

モジュール

16分割グリッド

デフォルトは16分割。1行の合計が16になるように設定する。

wid_1
wid_1
wid_2
wid_3
wid_4
wid_5
wid_4
wid_4
wid_4
wid_4
wid_6
wid_6

タブ

コンテンツ1

コンテンツ1

コンテンツ2

コンテンツ2

モーダル

tingle.jsを使用しています。

あべじゅくちょう
あべせんせい

じゅくちょうです。

はるのせんせい
はるのせんせい

はるのせんせいです。

PHP

bootstrap.phpのロード

/lp/bootstrap.phpにいろいろ設定が入っているので読み込みます。
以下は/lp/bootstrap.phpへパスを通すおまじないです。 

require_once dirname(__DIR__) . '/bootstrap.php';

設置階層が一つ下になった場合、

require_once dirname(dirname(__DIR__)) . '/bootstrap.php';

とすることでパスが通せます。

タスクランナー・バンドラー

CSSやjavascriptのコンパイル、圧縮などをおこなうツールです。

変遷としては Grunt -> gulp -> webpack <- いまココ

となっており、いま現在は webpackを利用していますが、昔のLPはgrunt、gulpがある場合があります。
リソースとしてjsとしてすべてバンドルすることはせず、jsはjs、cssはcssとして出力します。

利用方法

ssh ログイン後、対象のディレクトリに移動します。

cd -P ~/link.lp/ディレクトリ名/_dev

node_modules/ がない場合、npm パッケージをインストールします。既にある場合はこの操作は不要です。

npm install

実行

開発時

開発時は圧縮とかせず出力

npm run watch

デプロイ時

リソースの圧縮、console.log()など削除

npm run build

出来上がったassets/ をダウンロードして本番へアップロード

メッセージ

警告文

  • 同業他社の方の参加はお断りしております。
  • 会場での撮影・ 録音・録画につきましては、固く禁じます。 行為を発見した場合、データ削除の上、当塾の今後のイベント参加及び入会をお断りさせていただく場合がございます。
  • 申し込み時の情報に虚偽の記載があった場合、 当塾の今後のイベント参加及び入会をお断りさせていただく場合がございます 。

少人数注意事項

  • 少人数講座は所定の人数に達しない場合、開講しない場合がございます。

npmパッケージ

javascript

  • jquery:3.3.1
  • underscore:1.9.1
  • backbone:1.3.3

UI

  • highendrawer: 0.0.16
  • tingle: 0.13.2