WEBサイト制作の勉強

WEBサイト制作の勉強の為の解説ブログです。

必要なスキルセット

現状、web業界では様々な職種・肩書きがあり、場合によってはその会社独自の職種・肩書きなどもありますが、大きく区別すると以下のように別ける事が出来ます。


管理進行系

  • プロデューサー
  • ディレクター
主な業務

企画立案、予算管理、クライアントとの打ち合わせ、スケジュール管理、品質チェックなど

必要なスキル

Office系のソフト、ビジネスマナー、IT全般の知識



マーケティング

必要なスキル

サイト解析、webマスター系のスキル


www.google.com



制作・デザイン系

  • Web(アプリ)デザイナー
  • UI/UXデザイナー
必要なスキル

デザイン理論、デザイン系ソフト、プロトタイピングツール



アフォーダンス理論

アフォーダンス理論(Affordance)は、アメリカの心理学者J・J・ギブソンが提唱した、認知心理学における概念です。これは「与える・提供する」という意味の「アフォード(afford)」という言葉から名付けられた造語で、物が持つ形や色、材質などが、その物自体の扱い方を説明しているという考え方です。


harv-tech.hatenablog.com



誰のためのデザイン? 増補・改訂版 ―認知科学者のデザイン原論

誰のためのデザイン? 増補・改訂版 ―認知科学者のデザイン原論





プロトタイピングツール
webdesign-trends.net



制作・エンジニア系

  • フロントエンドエンジニア
  • バックエンドエンジニア
必要なスキル

コーディングルールの理解、フレームワーク、ネットワークへの理解、バージョン管理(git)、タスクランナー


コーディングルール
qiita.com


frasco.io


フレームワークとは?

「Webアプリケーションフレームワーク」とは、Webアプリケーションを開発するための枠組み(フレームワーク)の事で、開発に必要な共通の機能を提供する事でWebアプリケーション開発の作業効率アップや品質保持とメンテナンス性能をアップさせる事が出来ます。 多くのWebアプリケーションフレームワークには、データーベースのコネクション管理などを行う「データーベース管理機能」やクライアントの識別や管理をする「セッション管理機能」、「Webテンプレート」などを備えています。「Webアプリケーションフレームワーク」を使うと、Web開発において共通する様々な機能を一から作成する必要はなく、簡単に機能追加が可能になり、またコードの再利用をする事で開発作業の効率化を図れます。


press.monaca.io

http://felica-web.hatenablog.jp/entry/2019/01/26/%E3%83%95%E3%83%AC%E3%83%BC%E3%83%A0%E3%83%AF%E3%83%BC%E3%82%AF%E3%81%A8%E3%81%AF%EF%BC%9Ffelica-web.hatenablog.jp



スクランナー

migo-media.com



hirata.blog


www.fendo181.me





これはあくまでも一例ですが、多くの会社ではこのように細分化されています。場合によっては一人で複数の職種を横断的にこなす人もいます。
まずはそれぞれの職種において必要なスキルセットをしっかりと理解し、それに合わせた自身のスキルチェックシートを作成しましょう。

ポートフォリオの作成

  1. ポートフォリオ制作でまず自身が把握する事は中に入れるコンテンツの分量です。今までの授業で作ったデータをもう一度見直し、手直しする物は手直して、ポートフォリに掲載する物を決めましょう。
  2. 次にwebのポートフォリオを何で作るかを決めましょう。選択肢としては、htmlとcssで制作するか、wordpressを使って作るか、またテンプレートを上手く使う事も視野に入れておきましょう。
  3. ポートフォリオ自体の仕様が決まってきたら、次に中に入れるコンテンツの見せ方を考えてみましょう。もちろん色々な見せ方がありますが、授業でやった「作品のサムネイル」→「作品の詳細ページ」→「自身で制作した作品」という順に見せていく方法は有効な方法の1つです。また、ディレクター志望の場合、photoshopillustratorだけで無く、パワーポイントやエクセルといったoffice系のソフトを使ってポートフォリオを作っても良いと思います。
  4. 次にポートフォリオ全体のデザインイメージとファーストビューのデザインを決めていきましょう。既存のサイトなどを参考にツカミのあるファーストビューを作ってみましょう。また面接等で「なぜこのファーストビューにしたのか?」と質問された時に答えられるように答えを準備しておきましょう。



webdesigner-go.com


www.creativevillage.ne.jp


blog.karasuneko.com



www.nxworld.net



ポートフォリオを作るに当たって、WordPressやBootstrapなどのフレームワークを使用する事も視野に入れておきましょう。
それぞれの長所・短所を理解し、自身にとって最も有効だと思う物を選択する事が大事です。

bootstrapのテンプレート

coliss.com


tetra-themes.com

HTML5&CSS3ベースのテンプレート

coliss.com


photoshopvip.net

object-fitを使って動画を要素にはめ込む

object-fitプロパティは、置換要素(img要素やvideo要素など)をボックスにどのようにはめ込むかを指定する際に使用します。

  • fill

置換要素(img要素やvideo要素など)をボックスサイズに合わせて縦横比を維持しないでリサイズして、全体が見えるようにはめ込む(初期値)

  • contain

置換要素(img要素やvideo要素など)をボックスサイズに合わせて縦横比を維持しながらリサイズして、全体が見えるようにはめ込む

  • cover

置換要素(img要素やvideo要素など)をボックスサイズに合わせて縦横比を維持しながらリサイズして、トリミングしてはめ込む

  • none

置換要素(img要素やvideo要素など)をリサイズしないで、ボックスサイズでトリミングしてはめ込む

  • scale-down

置換要素(img要素やvideo要素など)のサイズとボックスサイズの小さい方に合わせて、縦横比を維持しながらリサイズして、全体が見えるようにはめ込む。 言い換えれば、指定するボックスサイズと置換要素の実寸サイズの大小関係に応じて contain または none を指定したときと同じ表示となる


f:id:yachin29:20180803121533p:plain



video要素を使う際に気をつけないといけないので、動画を自動再生する場合、OSやブラウザーのバージョンによって仕様がバラバラなので、必ず事前にチェックしましょう。








再生範囲を指定する
videoタグ(及びaudioタグ)では、下記の書き方をすることで再生範囲を指定することが出来ます。

<video src="movie.mp4#t=[starttime][,endtime]"></video>

※Edge・IEは、今のところ未対応
【使用例】
「movie.mp4#t=5,10」5秒時点から10秒時点の範囲を再生
「movie.mp4#t=,8」始点から8秒時点の範囲を再生
「movie.mp4#t=,01:30:00」始点から1時間30分の範囲を再生
「movie.mp4#t=5」5秒時点から最後まで再生



www.plusdesign.co.jp




<div class="wrapper">
<video src="img/Turntable.mp4" autoplay muted loop>
</video>

</div>


スタイルシート

.wrapper {
width: 100%;
height: 100vh;
position: relative;
  overflow: hidden;
}
video {
  object-fit: cover;
  position: absolute;
  height: 100%;
  width: 100%;
  top: 0;
  left: 0;
}

非常に便利なobject-fitですが、ブラウザーによってimg要素とvideo要素の扱いが違います。


Can I use... Support tables for HTML5, CSS3, etc

上記のようにEdgeはimg要素のみにしか適用しない為video要素に掛けたい場合は、専用のプラグインを入れる必要があります。

この「object-fit-videos」というプラグインを使う事で、Edgeでもvideo要素にobject-fitを掛けれるようになります。
github.com

「.htaccessファイル」を使った自動振り分け

.htaccessファイル」を使ったリダイレクト

スマートフォン利用者を自動的に「スマートフォン版サイト」へ誘導できるよう、「アクセス者の端末に応じて自動でアクセス先を振り分ける機能」を作ってみましょう。この授業では「.htaccessファイル」を使って、サーバ側で自動振り分けする方法をやってみます。

まずは「.htaccessファイル」を作成します。この際、ローカルサイドで「.htaccessファイル」を作成すると、不可視ファイルの設定などで問題が起こりやすいので、一旦「htaccess.txtファイル」として作成し、サーバー側にアップロードしたのちに、「.htaccessファイル」にリネームする方法でやってみます。


今回の自動振り分けは

  1. ウェブサーバが「Apache
  2. 設定ファイル「.htaccess」の設置が許可されている
  3. mod_rewriteモジュールが利用可能

の条件が必要です。


授業ではxdomainかwebcrowを使います。
www.xdomain.ne.jp


.htaccessの記述内容

<IfModule mod_rewrite.c>
RewriteEngine On
RewriteCond %{HTTP_USER_AGENT} (iPhone|Android.*Mobile|Windows.*Phone) [NC]
RewriteCond %{QUERY_STRING} !mode=pc
RewriteRule ^$ /pc/sp/ [R,L]

Header set Vary User-Agent
</IfModule>
2行目
RewriteCond %{HTTP_USER_AGENT} (iPhone|Android.*Mobile|Windows.*Phone) [NC]

HTTP_USER_AGENT」は、アクセス端末の種類を示します。
最後にある [NC] という記述は、「大文字・小文字を区別しない」という意味の指示です実際にユーザエージェント名に含まれる文字列が「android」でも「ANDROID」でも、同じだとみなされます。



3行目
RewriteCond %{QUERY_STRING} !mode=pc

URLの末尾に「?mode=pc」という文字列が付いていた場合には、スマートフォン用ページに移動させない(リダイレクトしない)ようにする記述です。なお、「mode=pc」という文字列は何でも構いません。「pc-site」や「show-pc-edition」など、何でも好きな文字列を指定できます。


4行目
RewriteRule ^$ /pc/sp/ [R,L]

RewriteRuleを使うことで、指定した規則に沿ってURLを書き換えられます。ここでは、リダイレクトするために利用しています。フラグとして、[R,L] を指定しています。「R」は「リダイレクトする」という意味で、ここでは必ず必要です。「L」は書き換え規則の最終行であることを示しています(これ以降のRewriteRuleは無視されます。ここでは省略しても問題ありません)。



今回の場合は、この .htaccessファイルを設置した場所が http://www.example.com/pc/ だとすると、

スマートフォンでアクセスすると http://www.example.com/pc/sp/ へ移動。
スマートフォン以外でアクセスすると http://www.example.com/pc/ のまま。
スマートフォンでアクセスしても、URLが http://www.example.com/pc/?mode=pc であれば移動しない。




自分のドメインでトップページを表示させたい場合(http://www.example.com
4行目を以下のように直し、トップページ(PC用のindex.html)と同じ階層にアップロードする。

RewriteRule ^$ /sp/ [R,L]

スマートフォンでアクセスすると http://www.example.com/sp/ へ移動。
スマートフォン以外でアクセスすると http://www.example.com/ のまま。
スマートフォンでアクセスしても、URLが http://www.example.com/?mode=pc であれば移動しない



スマートフォンサイト用データの「index.htmlファイル」のhead内に貼り付ける

rel=”canonicalという属性を使用して、ページの評価やインデックスはデスクトップ用URLに統一するための正規化処理をしましょう。そうすることでミラーサイトのような重複コンテンツ扱いになることを防ぎます。

<link rel="canonical" href="http://○○○○○.com/pc/">
次にPCサイト用データの「index.htmlファイル」のhead内に貼り付ける

rel=”alternate”という属性を使用して、Googlebotにスマートフォン用ページが別で存在することを伝える処理をします。そうするとスマートフォン向けの代替コンテンツがGooglebotに認識され、スマートフォン用ページが別で存在することを伝えることができます。

<link rel="alternate" media="only screen and (max-width: 640px)" href="http://○○○○○.com/pc/sp/">


最後にスマートフォンサイト用の「index.htmlファイル」に「PC版を表示」などのボタンを作り、「.htaccessファイル」が有効になっていても、スマートフォンでPCのデータを表示出来るようにしましょう。

<a href="http://○○○○○/pc/?mode=pc">PC版を表示</a>

ようこそ!  |  検索  |  Google Developers



作例
沖縄宮古島のオススメスポット10選_PC



アップロードの後に確認すること
まず「htaccess.txt」を「.htaccess」にリネームする

1、PCで自分のPCサイトのURLが表示出来るかを確認
(例 http://yachin29.html.xdomain.jp/pc/

2、PCで自分のPCサイトのURLが表示出来るかを確認
(例 http://yachin29.html.xdomain.jp/pc/sp/

3、
自身のスマホで自動振り分けが出来ているか確認
http://yachin29.html.xdomain.jp/pc/から自動で
http://yachin29.html.xdomain.jp/pc/sp/にリダイレクトするか確認

4、例外ボタンが有効になっているか確認

5、自身のURL(例 http://yachin29.html.xdomain.jp/pc/)で
モバイルフレンドリーテストを受けて、合格かの確認

リセットcssのスニペット

/*!
 * ress.css • v1.2.2
 * MIT License
 * github.com/filipelinhares/ress
 * 全ての要素にbox-sizing: border-box;.
 * 全ての背景画像にbackground-repeat: no-repeat.
 */html{box-sizing:border-box;-webkit-text-size-adjust:100%}*,:after,:before{background-repeat:no-repeat;box-sizing:inherit}:after,:before{text-decoration:inherit;vertical-align:inherit}*{padding:0;margin:0}audio:not([controls]){display:none;height:0}hr{overflow:visible}article,aside,details,figcaption,figure,footer,header,main,menu,nav,section,summary{display:block}summary{display:list-item}small{font-size:80%}[hidden],template{display:none}abbr[title]{border-bottom:1px dotted;text-decoration:none}a{background-color:transparent;-webkit-text-decoration-skip:objects}a:active,a:hover{outline-width:0}code,kbd,pre,samp{font-family:monospace,monospace}b,strong{font-weight:bolder}dfn{font-style:italic}mark{background-color:#ff0;color:#000}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}sub{bottom:-.25em}sup{top:-.5em}input{border-radius:0}[role=button],[type=button],[type=reset],[type=submit],button{cursor:pointer}[disabled]{cursor:default}[type=number]{width:auto}[type=search]{-webkit-appearance:textfield}[type=search]::-webkit-search-cancel-button,[type=search]::-webkit-search-decoration{-webkit-appearance:none}textarea{overflow:auto;resize:vertical}button,input,optgroup,select,textarea{font:inherit}optgroup{font-weight:700}button{overflow:visible}[type=button]::-moz-focus-inner,[type=reset]::-moz-focus-inner,[type=submit]::-moz-focus-inner,button::-moz-focus-inner{border-style:0;padding:0}[type=button]::-moz-focus-inner,[type=reset]::-moz-focus-inner,[type=submit]::-moz-focus-inner,button:-moz-focusring{outline:1px dotted ButtonText}[type=reset],[type=submit],button,html [type=button]{-webkit-appearance:button}button,select{text-transform:none}button,input,select,textarea{background-color:transparent;border-style:none;color:inherit}select{-moz-appearance:none;-webkit-appearance:none}select::-ms-expand{display:none}select::-ms-value{color:currentColor}legend{border:0;color:inherit;display:table;max-width:100%;white-space:normal}::-webkit-file-upload-button{-webkit-appearance:button;font:inherit}[type=search]{-webkit-appearance:textfield;outline-offset:-2px}img{border-style:none}progress{vertical-align:baseline}svg:not(:root){overflow:hidden}audio,canvas,progress,video{display:inline-block}@media screen{[hidden~=screen]{display:inherit}[hidden~=screen]:not(:active):not(:focus):not(:target){position:absolute!important;clip:rect(0 0 0 0)!important}}[aria-busy=true]{cursor:progress}[aria-controls]{cursor:pointer}[aria-disabled]{cursor:default}::-moz-selection{background-color:#b3d4fc;color:#000;text-shadow:none}::selection{background-color:#b3d4fc;color:#000;text-shadow:none}ul,ol{list-style:none;}a{text-decoration:none;}.wrapper{overflow:hidden;}body{overflow-y:scroll;}