（README編集中...）
ver. 0.0.2018.8.8
- カザオキコーディングツールを以下からダウンロード/解凍し、案件フォルダ内に配置する
https://github.com/kazaoki/codie/archive/master.zip - VisualStudioCode で該当フォルダを開く
- npmスクリプト
setupを実行すると、初期化＆Gitリポジトリが作られる - Gitで一旦コミットする
- npmスクリプト
startを実行する ※次回作業時はここから src/フォルダで作業を進める- 作業完了したらコミット、必要ならPUSH
- 作業完了なら
dist/を納品・アップして終了
詳説は以下から。上記番号に対応しています。
ZIPファイルをダウンロードして解凍し、プロジェクトのフォルダの中に配置して下さい。
以下、サンプルサイトAの案件フォルダ sample-a に coding フォルダとして配置する例です。フォルダ名は coding 以外でも、日本語でも、なんでも大丈夫です。
sample-a/
├─ ...
└─ coding/ （ここに配置します。ここをGitでバージョン管理していきます）
├─ .vscode/
├─ src/
│ ├─ images/
│ │ └─ ~.jpg
│ ├─ js/
│ │ └─ ~.js
│ ├─ scss/
│ │ └─ ~.scss
│ ├─ footer.php
│ ├─ header.php
│ └─ index.php
├─ .editorconfig
├─ .gitignore
├─ gulpfile.js
├─ package.json
└─ yarn.lock
VisualStudioCode を起動します。（以下 vscode）
次に、上記の coding フォルダを vscode にドロップします。
これで、このフォルダ以下を vscode で管理できるようになります。
vscode 上で Ctrl+R を押した後 Shift+R を押すと、npmスクリプトのリストが出てきますので、 setup を実行します。
このセットアップスクリプトは最初の１回の実行で大丈夫です。新たに以下のフォルダが作られます。（間違って何度実行しても問題は無いです）
.git/
.node_modules/
.git/ は coding フォルダをGitでバージョン管理するための設定です。
.node_modules/ は、コーディングツールを実行するために必要なプログラムがダウンロードされてきます。
この２つのフォルダはバージョン管理外となりますので、 .gitignore ファイルで除外定義されています。
ここまでの状態を一旦Gitコミットしておきます。
SourceTree を起動し、 coding フォルダを登録し、初期コミットしましょう。
以下、コミットメッセージ例です。
[add] 初期コミット
※作業を中断した場合など、次回続きから作業したい場合は、ここから行います。
作業フロー3と同様に、vscode 上で Ctrl+R を押した後 Shift+R を押すと、npmスクリプトのリストが出てきますので、今度は start を実行します。
コーディングツールの起動が完了するとブラウザが開きます。（http://localhost:3000/）
dist/ フォルダが作成され、この中をブラウザからアクセスしている形となります。
この段階で、フォルダ構成は以下のようになっています。
sample-a/
├─ ...
└─ coding/
├─ .git/ （このフォルダが生成されています）
├─ .vscode/
├─ dist/ （このフォルダが生成されています）
├─ node_modules/ （このフォルダが生成されています）
├─ src/
│ ...
もし、削除したなど上記のフォルダ足りない場合は、「作業フロー3」の setup スクリプトを再度実行すれば生成されます。
コーディングツールを起動すると、src/（入力フォルダ） 内のファイルを処理し dist/（出力フォルダ）に保存します。
入力フォルダ内で、対象のファイルが作成/更新されると、出力フォルダのファイルも自動的に再処理が行われ更新されます。
※初期状態でブラウザで見えている画面は、 dist/index.php です。このファイルを編集して保存すると自動的にブラウザがリロードされることが確認できると思います。
src/js/*.js ... 圧縮され１つのJavacScriptファイルにバンドルされます。 → dist/js/bundle.js
src/images/* ... 画像ファイル → jpg,png,gifファイルのサイズが軽減されます。 → dist/images/*
src/scss/*.scss ... Sassファイルがコンパイルされます。 → dist/css/*.css
src/assets/* ... 特に処理が不要なjs,css,画像ファイル（jQuery等ダウンロードしてきたものなど）はこのフォルダを作成し配置します → dist/assets/*
src/*.php,*.html ... srcフォルダ以下の全てのHTML,PHPファイルはそのままコピーされます。 → dist/*
dist/ に出力される際は、フォルダ構成も維持されますので、指定フォルダ以下であれば自由に下層化して大丈夫です。
また、ファイルを更新するとブラウザ側も自動的にリロードされます。 同じURLを別のブラウザからアクセスすると、クリックやスクロールも同期されます。
作業が完了、または一時中断した場合は、作業した情報をコミットしましょう。 作業フロー4と同様に、コミットします。
以下、コミットメッセージ例です。
[add] トップページコーディング完了。
必要があればPUSHしてください。
ここで、vscode を終了するとブラウザからもアクセスができなくなります。 再度作業を再開したい場合は、 vscode でフォルダを開いて、「作業フロー5」から行います。
実際にFTPでアップロードしたりお客様に納品するのは dist/ フォルダになるかと思いますが、作業者が複数いる場合はGitリポジトリを共有して、 coding フォルダ全体を共有してください。（先方で dist/ 側のファイルを修正されると、 src/ 側のファイルの修正が大変になると思いますので、なるべく作業者は src/ 側を編集することをおすすめします）
上記の作業説明に必要なソフトウェア群です。 必ずインストールしてください。
- Windows または macOS
- VisualStudioCode
- Node.js（8.ｘ以降の推奨版）
- PHP（7.ｘ系のStable版）
- SourceTree
- 隠しファイル・フォルダの表示（Windows）
※.gitフォルダ等の隠しファイルはWindows初期状態だと見えないので、必ず表示するようにしてください。
ウェブ制作/開発をするにあたり、個人的におすすめのツールです。
- Adobe Illustrator ... 言わずと知れたベクタデザインソフト。ウェブデザインはかなりツライ。
- Adobe Photoshop ... 言わずと知れたラスタ画像処理ソフト。ウェブデザインはかなりツライ。
- Adobe Fireworks ... 一昔前のウェブデザインソフト。流石にツライ。
- Adobe Creative Cloud ... 月額数千円で最新のAdobeソフトが使えるプログラム。超おすすめ。
- Adobe XD ... Adobe待望のウェブデザインソフト。共同作業可能。
- Sketch ... ウェブデザインソフト/サービス。たぶん今一番人気。
- Figma ... ウェブデザインソフト/サービス。共同作業が評判。ブラウザからも作業でき、無料プランも有り。オススメです。
- Franz ... 以下の「ウェブサービス」をひとまとめにして管理できるソフト。超オススメ。