WEBサイト制作の勉強

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

フェリカテクニカルアカデミー

Canvasを使ってグラフが作れる「Chart.js」

canvasとは

Canvasとは、ブラウザ上に図を描くために策定された仕様です。

これまでHTML上で図を表現するためには、GIFやJPEGといったフォーマットの画像を用意する必要がありました。また、条件に応じて表示する図を変化させたり、アニメーションを実現するために、FlashやJavaアプレットが使われてきました。

Canvasは、FlashやJavaのようにプラグインを使わずに、JavaScriptベースで図を描くことができます。
Canvasは、もともとはAppleが発祥で、当初、Mac OSでおなじみのDashboardで使われた技術仕様です。その後、Apple、Mozilla Foundation、Opera Softwareといったブラウザベンダが立ち上げたWHATWGという団体にて策定作業が行われていた「Web Applications」と呼ばれる規格に採用されました。

www.htmq.com



https://canvas.apps.chrome/



Chart.js

折れ線グラフ、棒グラフ、円グラフ、レーダーチャートなど、6種類のグラフが描けるJavascriptのライブラリです。
HTML5のCanvasを使って描画され、誰でも簡単に編集ができるようになっています。

www.chartjs.org


qiita.com



作例

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="utf-8">
　<title>円グラフ</title> 
<style>
h1 {
text-align: center;
}
#box {
width: 800px;
margin: 50px auto 0;
}
</style>
</head>
<body>
  <h1>円グラフ</h1>
  <div id="box">
  <canvas id="myChart"></canvas>
  </div>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.7.2/Chart.bundle.js"></script>

  <script>
  var ctx = document.getElementById("myChart");
  var myDoughnutChart = new Chart(ctx, {
    type: 'doughnut',
    data: {
      labels: ["A型", "O型", "B型", "AB型"],
      datasets: [{
          backgroundColor: [
              "#BB5179",
              "#EBB350",
              "#6ABB77",
              "#29A3D5"
          ],
          data: [38, 31, 21, 10]
      }]
    },
    options: {
      title: {
        display: true,
        text: '血液型 割合'
      }
    }
  });
  </script>
</body>
</html>

必要なスキルセット

その他

現状、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つです。また、ディレクター志望の場合、photoshop、illustratorだけで無く、パワーポイントやエクセルといったoffice系のソフトを使ってポートフォリオを作っても良いと思います。
  4. 次にポートフォリオ全体のデザインイメージとファーストビューのデザインを決めていきましょう。既存のサイトなどを参考にツカミのあるファーストビューを作ってみましょう。また面接等で「なぜこのファーストビューにしたのか？」と質問された時に答えられるように答えを準備しておきましょう。



webdesigner-go.com


www.creativevillage.ne.jp


blog.karasuneko.com



www.nxworld.net



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

wordpressのテンプレート

ポートフォリオ ＜ カテゴリ ＜ WordPress無料テーマ-テンプレート紹介サイト


www.choicely.jp


bootstrapのテンプレート

coliss.com


tetra-themes.com

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

coliss.com


photoshopvip.net

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

スマートフォンサイト レスポンシブデザイン

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

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

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


今回の自動振り分けは

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

の条件が必要です。


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


デモページ

http://yachin29.html.xdomain.jp/pc/



.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」にリネームする。

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

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

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

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

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

リセットcssのスニペット

HTML5+CSS3 
/*!
 * 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;}