subtechild

Playful Technology & Design.

ターミナルを1から10まで覚えたいわけじゃないノンプログラマーのための最も無駄のないGulp導入手順

f:id:nknkt:20161227210638j:plain

まず前提に...

この記事はほとんど自分向けメモです! Gulp導入の記事はあるけどもっと必要最低限の情報に絞られた記事が欲しいと思い自分で書きました。

この記事が役に立つかもしれない人

  • 以前一度でもGulpを導入したが手順を思い出すのがだるい
  • 今まで導入したことないが、JSとかコマンドラインとか深く知らんでいいからとにかく使いたいんや、早く!
  • コピペ!コピペ!コピペ!

では、淡々と書きます。

Gulp導入手順

Node,jsのインストール

サイトから落とす

https://nodejs.org/ja/nodejs.org

コマンドラインの起動

  • Windows:コマンドプロント
  • Mac:ターミナル

Node.jsのバージョンを確認する場合(必要なければとばして良い)

node -v

Gulpをグローバルにインストール

npm install -g gulp-cli

プロジェクトの初期設定をする

プロジェクトフォルダへ移動

Windowsの場合

cd C:¥Users¥MyName¥フォルダ名

Macの場合

cd /Users/MyName/フォルダ名

Macの場合cd ドラッグ&ドロップでも可能

package.jsonファイルを作成

npm init

プロジェクト名やらなんやら設定が出てくるから必要なら設定

私の場合MacOSでプロジェクト名に半角大文字を使っていてエラーが出ました(Windowsは知りません)、元々のプロジェクト名から変更しましょう。

プラグインをインストール

npm install --save-dev プラグイン名

プラグインはここで探す

www.npmjs.com

後でベタなやつを書いておくかも

gulpfile.js作って動かす

コピペ!自動化したいならwatch()忘れずに!

後でもうちょっと書くかも

今いるローカル環境にGulpをインストール

npm install --save-dev gulp

以上!!!

とりあえず使える準備はできるはず! ひたすら、コピペしたコマンド叩いてもらったらすぐだと思う。

Gulp自体の説明とか、もっと初期設置の細かな説明はググってみてみたらいいと思うんだ。

ここでも書きました! qiita.com

スマホサイトの制作時に注意することと対策まとめ

始めに

f:id:nknkt:20161226102735j:plain

スマートフォンのサイト制作の際に注意、意識すべきこととその対策法を簡単にまとめました。

あくまでスマホサイト制作のまとめであり、レスポンシブデザインのまとめではないです。

(また別の注意点があるということですね)

スマホサイトの制作時に注意すること

バイス幅は固定されている

PCとは違い基本的にスマートフォンではブラウザを縮小、拡大はできません。 デバイス幅は固定幅になります。

どうする?

viewport設定をしてあげます。

<meta name="viewport" content="width=device-width,initial-scale=1">

viewportとは

meta要素に name="viewport" を追加すると、文書の表示領域を設定することができます。

HTML5/ページ全般/meta要素 表示領域を設定する - TAG index

詳しい説明は割愛しますが、スマホの時はこの幅で表示しますよ、って設定してあげることができます。

スマホの画面の大きさに合わせて表示幅を変化させてあげることも出来ます。

(機会があればviewportの詳しい記事も書くかも。)

バイス幅が機種でバラバラ

iPhone5,6,7にandroidに機種によってバラバラ。ほぼ無限です。

どうする?

リキッドデザインで作ります。 幅はpxで指定しません。

 % rem em

上のviewportで表示領域を変化させたら、 次は画像や文字をブラウザの大きさに合わせて変化するように設定します。

www.nda.co.jp

wi-fiのない3G回線など遅い環境を想定

ブロードバンド環境やwi-fiのないところでは、スマホはまだまだかなり遅いスピードになるかもしれません。

重いサイトは表示に時間がかかってしまうので、軽量化を考えなければいけません。

画像やJavaScript、動画を極力減らします。

またはスマホ用の軽量なものを用意するといいでしょう。圧縮はもちろんしましょう。

どうする?

CSS3のanimationの利用も考えます。 JavaScriptでの表現に近いことがanimationでも可能だったりします。

状況に合わせて使い分けるのも大事です。

www.htmq.com

タッチパネル操作で作る

スマホでは、タッチ、フリックなど指を使って操作します。よってマウスやスマートパッドを用いて小さなカーソルでの操作とはまた違う画面設計が必要です。

手の大きさ、小さな画面の中でも使いやすいことを意識しなければいけません。

どうする?

直感的に操作できる設計にします。

タッチ操作の指の大きさを意識します。

まとめ

大きく分けてですが、PCサイトの制作と比べてもこれはどの違いが出てきます。

レスポンシブのサイトにしてもそのまま縮めるだけでは、これらの使いやすさは実現しません。

ユーザビリティを意識した設計をしましょう。

Webサイト、作るその前に〜 制作現場キックオフで決めておきたいこと、諸々

はじめに

さあ、作るぞ!その前に!

実際に作り出す前に、確認と決め事、準備を行うのは大事。

特にチームで制作を行う場合、ここを怠ると後で苦しみます、確実に。

特にマークアップその前に、と言った感じの話が多いです。

ざっくりですが、まとめ。

制作前に決めたいこと

制作仕様書

どこまで対応するのか、どこまでは切り捨てるのかを決めます。これは案件によって変わってきますね。 また、開発環境もこの時点でしっかり足並みを揃えておきます。

  • PC どのブラウザのどのバージョンまで対応するのか
  • スマホ 対応機種を設定、なるべく実機で確認
  • HTML、CSSのバージョンはどうするのか

着地点を決めた上で制作しないとコーディングの際にズレが発生したり、 無駄な努力も発生します。 やること、やらないことを決めちゃいます。

コーディングルール

コーディングの記述にルールを決めます。

  • インデントするのか
  • インデントは何スペース分か
  • class、IDのルール決め
  • コメントの入れ方

マークアップする人が増えれば増えるほど、癖が後々思いもしない 不具合を起こします。 防ぐためにもしっかり書き方はなるべく細かいところまで統一します。

以下に参考になりそうなガイドラインも載せておきます。

参考になりそうなガイドライン

Google HTML/CSS Style Guide まとめ - 天下のGoogleさんのガイドラインの和訳

コーディングガイドライン HTML5版 ver1.0 - 大阪の制作会社Qriptのガイドライン、分かりやすい

新人コーダーに知っておいて欲しい命名則の考え方[画像・ID・class名]|クロノドライブ - 具体的な命名規則の例が表にされていて非常に参考になる

デザインカンプ

簡単なサイトの場合や、 BootstrapなどのCSSフレームワークを使う場合のclass名をつけるだけで UIが壊れる場合以外は、 カンプをチェックし、問題なければマークアップしていきます。

遷移図

ユーザーして移動していく導線を決めます。

特に、大規模に複雑なサイトになる程導線も複雑になります。 しっかり具現化しておくことが重要です。

webライティング

サイト内に入れる文章です。

クライアントからもらえる場合はいいのですが、 カタログ、雑誌からこちらでリライトする場合もあります。

先に考えてメモ帳などにまとめておいた方が、後からコピペで貼り付けるだけなので コーディングの手を止めて考えなくていいので楽だと思います。

やりながら考えるとしんどいです。

スタイルガイド自動生成ツール

今は便利なものがありまして、モジュール一覧ページの自動生成ツールがあります。

残念ながら、まだ試せてませんが、まとめておきます。

FrontNote -Node.js StyleGuide Generator-

StyleDocco

KSS · Knyle Style Sheets

Hologram — Style Documentation Build System

まとめ

いかがでしたでしょうか? 準備あれば憂いなし、という言葉があるように制作においとも準備が必要です。 もちろんすでに会社で働いている方には当たり前のことばかりでしょうが。

面倒かも知れませんがこれらの事前準備は、作業中に中断してのミーティングを減らすため、 必ず結果的に効率も上がります。

私はスクールに通っている頃から、実際の制作現場を想定して準備を行い、 チームで制作を心がけていました。 今学ばれている方はこれらを踏まえての制作をすることでより実戦に近い経験を得られるのではないでしょうか。

この記事はQiitaに投稿したものに加筆し投稿しています。 qiita.com