LoginSignup
0

More than 5 years have passed since last update.

モックから始まるwebコンテンツ構成案

Last updated at Posted at 2018-07-11

スクリプト言語とか使わないHTML,CSSオンリーデザイナさんとシステムを構築する時の全体構成案。

サーバ間通信

RESTfulによるJSONでのやりとり。

サーバ側言語

好みの問題。

  • Scala (静的。速度を求めるならAkka, 求めないならPlay)
  • Python3 Flask (動的。サクッと作りたい時)

クライアント言語

  • ES2016以降 (babel等トランスパイラでブラウザに優しくする)

JSライブラリ

  • axios (デザイナさんがどうしてもjQuery使いたかったら折れる)
  • Vue.js (.vueコンポーネントにせずhtml,js,css分ける)

AltCSS

  • Stylusで!と圧をかける。LESS等、生CSSでなければしぶしぶ折れる。

タスクランナー

  • gulp使ってたけどnpmで十分そう。SEが率先して用意する。

と思ったらWindowsだとパスのワイルドカードが展開されない罠。

http://neos21.hatenablog.jp/entry/2017/07/14/004416
npm run build でgulp実行する案、頂こう。gulpをグローバルインストールしなくて済むし.binとか参照しなくていいし。

npm run {build・clean・watch}のみできるようにする感じ。
js,css圧縮はローカルではやらず、CI環境で実施(gulpを直接叩く)。

HTMLテンプレート

  • ワンソース案件でなければモックが出来上がった段階で共通項をすぐEJSで纏める。そして教え、布教する。

ディレクトリ構成

├── build           -- coverage等の出力先。.gitignore対象
├── dist            -- 最終成果物の出力先。.gitignore対象
└── src             -- HTMLやrobots.txt等
    └── assets      -- 素材ディレクトリを束ねる
        ├── ejs     -- EJSテンプレート置き場
        ├── img     -- 画像置き場
        ├── script  -- jsやaltJS置き場
        ├── style   -- stylusとか置き場
        └── vendor  -- 外部ライブラリ。jQueryだとjs,css両方あるのでまとめてvendor

デザイナさんには予めこの構成でと伝えるとやりやすくなるはず。

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
0