活動報告No116 Webサイトを作ってみよう (3/3) 〜余談編〜
カテゴリ: 未分類
おはこんばんにちは。ヒュー研内無職のマエダです。
この前、英語の先生に「NEETは"Not in Education, Employment or Training"、訳すと"学生でなく、仕事にも就かず、職業訓練も行っていない"って意味だから、学生はバイトやっていなくてもNEETじゃないよ(^^)」と言われました。やったぜ!

全体の流れはこんな感じです↓
前々回
1, Webサイトって何からできている?
2, Webサイトの作り方を学ぶ方法
前回
3, 開発環境を整える
4, おすすめの無料サーバ
5, その他フリーソフト
【今回】
6, ページ1番下の©
7, Webサイトを自動採点してもらう
8, ページをidとパスワードでロックする
9, 多機種対応レスポンシブデザイン
10, ハンバーガーメニューは要らない?
11, 視認性のお話 〜奇をてらうな〜
12, コピペで効率化せよ!
13, あって良かったdisplay: none;

このWebサイトを作ってみようの回はこれで最終回を迎えるわけですが、忘れないで下さいこのブログは2足歩行ロボットを作っている部活のですよ。OBの先輩方に最近の活動がどうなっているのか心配されそうですが…1月は期末考査なんです…察してください……

この回はWeb制作に関係する話題を広く浅く語って行きます。各項目に詳しい情報はなく、存在を頭の片隅に置いておくのにちょうどいい程度のことしか書かないので、その点踏まえてお読みください。



6, ページ1番下の© 

Webサイトのページの一番下に

Copyright © 2008 - 2017 oreoresagi All Rights Reserved.

などと書かれていると思います。これは、上の例では2008年から2017年の間はoreoresagiが著作権者だぞって言っているんですが、これを絶対に書かなければならないというわけではないです。こういうのに興味ある人は"ベルヌ条約"や"万国著作権条約"で検索してみてください。
今やみんな書いているから自分も書くって場合がほとんどじゃないかな。

ほんで、上の例はかなり悪い例で複数箇所で意味が重複してしまっています。必要な部分だけを書くと以下のようになります。

© 2008- oreoresagi

ちなみに©は(c)でも良いです。これならスッキリして見栄えも良くなるかと。


7, Webサイトを自動採点してもらう 

Unknown.png 

Webサイトを作ってみたはいいものの、サイトの出来栄えはいかなるものか、気になるところですよね?

Googleは評価してほしいWebサイトのURLを貼り付けるだけでそのサイトを100点満点で採点するサービスを提供しています。しかも評価するだけでなく、何が悪くて点数引かれているのかってことまで教えてくれます。

実際にやってみた感じ、人間にとって分かりやすいコードにしてもそこは評価されないっぽいです。機械にとって完璧なコードなら100点満点なんでしょうが、そういったコードは人間にとって極めて分かりづらいコードになってしまうことがあるので、所詮は自動採点、最後はあなた自身で何を修正すべきか見極めてください。



8, ページをidとパスワードでロックする 

公開前のWebサイトを試験的に開設し公にする前に部やサークルの仲間に一度見てもらいたい時などに役立つのではないでしょうか。

やり方なんてものは検索すればたくさん出てくるんですが、調べて実装するうえで気をつけることが1つあります。それはセキュリティについてです。以前どこかで言ったとおりWebサイトを見るということはサーバにアクセスしていることと同義なので、実装方法によっては簡単にid・パスワードを第三者に知られてしまいます。
簡単に実装できるログインシステムほど脆弱な傾向にあるので気をつけてください。。

いつかヒュー研のホームページに管理者用ページを作って、D-WARSのポイント集計結果をリアルタイムでD-WARS専用ページに表示とかやりたいなあ。


9, 多機種対応レスポンシブデザイン 

レスポンシブデザイン・・・Progateでは出てきたと思うんですが、まだやっていない方にとっては聞き慣れない単語だとは思いますが、一見すればこれが何なのか分かると思います。

タイトルなし 

こんな感じでウィンドウサイズに合わせてデザインが変化していきます。

レスポンシブデザインはdivなどのブロック要素のwidthを100%にしたりすればそれっぽくなりますが、ここで知ってほしいのは横幅指定してCSSを読み込む方法です。
CSSはhead内に

<link rel="stylesheet" type="text/css" href="example.css"> 

と書けばそれで読み込めますが、

<link rel="stylesheet" type="text/css" href="example.css" media="screen and (max-width:599px)"> 

こんな感じで最後にmedia=""を加えてやれば、あとは" "内でウィンドウ幅を指定するだけで幅にあったCSSを読み込ませることができます。
screenは実際のウィンドウ幅、max-widthは最大幅、min-widthは最小ウィンドウを意味しています。
上の例ではウィンドウ幅が599px以下のときのみexample.cssを読み込むことになりますね。

<link rel="stylesheet" type="text/css" href="small.css" media="screen and (max-width:599px)"> 
<link rel="stylesheet" type="text/css" href="large.css" media="screen and (min-width:600px)"> 

このように記述すれば、600px未満はスマホやタブレット用のsmall.cssを読み込ませ、600px以上はPCでの閲覧を前提としたlarge.cssを読み込ませたりと、デザインの自由度が広がります。
htmlのhead内に書く方法以外にもあるので、気になる方はもっと調べてみてください。

あと、同じhead内に<meta name="viewport" content="width=device-width">を入れることを忘れずに。


10, ハンバーガーメニューは要らない? 

ハンバーガーメニューってご存知ですか?もちろん某ファストフードのことではなく、

imgres_20170126210822218.png 

こんなやつです。特にスマホで色んなWebサイトを覗くと大体ありますよね。ここを押すとメニューがどこからか現れます。この3本線がハンバーガーに見えることからハンバーガーメニューになったらしいです。これはjQueryやCSSで比較的簡単に実装できます。
多くの人が実装するハンバーガーメニュー、こいつなんか要らん!と実装を批判(もはや否定)する派閥があるようです。。スマホに不慣れな人には分からなくてアクセス数が伸びない!と主張。ターゲットの年齢層によってはここら辺考慮しなきゃですね。


11, 視認性のお話 〜奇をてらうな〜 

AmazonのホームページがAppleみたいになったらどうですかね。お洒落だとは思うんですけど使いにくくなると思います。サイトマップによりますが、そのサイトの方針やクライアントの使い方に合わせてデザインしていくのが大切です。

amazon.png apple.png 

あと数字は詰めて書いたり年月日は数字重視にしたり、各色の彩度を統一したり、フォント(サイズ)を最適化したり…完璧を目指すとやらなければならない事がたくさんです。


12, コピペで効率化せよ! 

取り敢えずコピペで他人のコードを無断流用するよう促すために書いているわけでは無いとだけ最初に言っておきます。

コピペはどっかの研究所の人が一時期話題になりましたねぇ…コピペはそれだけ罪の重い行為ですが、作者の条件によってはコピペが可能だったりします。コード内にソースコードの作者が明記されているなら改変して再配布しても良いって言う人もいれば、作者は自身のコードで使用者に被害が出ても知らんけど好き勝手に使って良いって言う人もいます。そこら辺の条件の説明は網羅できないので各自気をつけてコピペしましょうとしか言えないです…。

私がよく調べるのは「見出し」や「ボタン」を装飾するCSSですかね。知らないとどう足掻いてもできないものがよくあるので、感謝感激しながら勉強も兼ねてパクったりします。あとアイコンも比較的…ね。


13, あって良かったdisplay: none; 

コイツは本当に便利。CSSでとあるボタンなどの存在を消してしまうことができます。今計画しているNEWヒュー研サイトでは「D-WARS」と「新入生歓迎」用ページへのアクセスを促すべく、期間限定でトップページに各リンク付のボタンを設置しようとしています。期間限定なので、その時々でわざわざイチからコードを書くなんてことしたくないです。そういった場合はhidden.cssを別に読み込ませて、期間限定ページの管理を簡略化させることをオススメします。


〜  最後に  〜

以上で「Webサイトを作ってみよう」シリーズを終わります。いかがでしたでしょうか?
私は大学に入り、一般中高じゃあやる機会のないようなことをしたいと思い、たどり着いたのがHTML・CSSです。コイツはプログラミングではないですが、これを機にもっと多種多様なコードを書いてみたいと思うようになり、今ではいつの間にかCやjavaScript(のjQuery)、Pythonにまで手を出しています。。。
Pythonは機械学習の分野に繋げそうなので、画像処理と合わせて自律ロボなんか作りたいなーなんて野望を持っています。いつかヒュー研が自律ロボ作ってディープラーニングやったりできる時代が来てほしいものです。
その前にこの電大にワークステーションがあるのか…?

現在一年生がロボ・ジャパンに向けて機体を改良していますし、その一ヶ月後にはD-WARS7もあるので次回以降のブログからやっとヒュー研らしくなる…かな?

ほんじゃまったなー♪(/・ω・)/ 


スポンサーサイト
編集 / 2017.01.27 / コメント: 0 / トラックバック: 0 / PageTop↑
コメント
 
Title
 
 
 
 
 
 
Secret 


Pagetop↑
トラックバック
Pagetop↑
プロフィール

ヒュー研の中の人

Author:ヒュー研の人
このブログは東京電機大学理工学部ヒューマノイド研究部の公式ブログです。2012年から部に昇格しました!
その日の活動や大会の記録をできるだけ更新していきたいです!!

☆だいたい金曜日前後に更新します☆

FC2カウンター
カレンダー
05 | 2017/06 | 07
- - - - 1 2 3
4 5 6 7 8 9 10
11 12 13 14 15 16 17
18 19 20 21 22 23 24
25 26 27 28 29 30 -
リンク
ブロとも申請フォーム
携帯でみるには↓
QR