0
Help us understand the problem. What are the problem?

More than 3 years have passed since last update.

posted at

updated at

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

スクリプト言語とか使わない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

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

Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
Sign upLogin
0
Help us understand the problem. What are the problem?