活動報告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↑
活動報告No115 Webサイトを作ってみよう (2/3) ~実践編~
カテゴリ: 未分類
おはこんばんにちは。元美術大学志望の1年マエダです。
親から金にならん仕事はするなと言われてこの電大に来ました(^o^)。浪人している友達がこの1年必死に勉強しているのに私はこの1年で何を失って何を得たのか、考えるだけで朝も起きれません夜も眠れません。

今回は実践編です。前回の学習編を見ていない方はぜひそちらからご覧下さい。
→前回:【活動報告No.114 Webサイトを作ってみよう (1/3) ~学習編~】

全体の流れはこんな感じです↓
前回
1, Webサイトって何からできている?
2, Webサイトの作り方を学ぶ方法
【今回】
3, 開発環境を整える
4, おすすめの無料サーバ
5, その他フリーソフト

【次回】
6, ページ1番下の©
7, Webサイトを自動採点してもらう
8, ページをidとパスワードでロックする
9, 多機種対応レスポンシブデザイン
10, ハンバーガーメニューは要らない?
11, 視認性のお話 〜奇をてらうな〜
12, コピペで効率化せよ!
13, あって良かったdisplay: none;


前回からProgateを試してみたでしょうか?今回はそこで学んだHTMLとCSSを使って何か創ってみたい!という人に向けた記事です。



3, 開発環境を整える 

コードを書くために必要なものが、コードエディタというものです。ちなみに英語でedit(エディット)は編集という意味です。
ここでは私が使ったことのある3つのコードエディタを紹介します。

(i)Brackets … 無料
(ii)Atom … 無料
(iii)Dreamweaver … 有料


それでは各エディタを簡単に説明します。

(i)Brackets

im7.jpg 

世界最大のコンピュータ・ソフトウェア会社である、アドビシステムズ(以下Adobe)が開発したコードエディタです。初心者は取り敢えずこれを使う方がいいでしょう。HTML・CSSのコードを書くのに便利な機能があらかじめ備わっていますし、慣れてきたら機能を拡張することもできます。

(ii)Atom
im6.jpg 

私が最近使っているコードエディタです。中級者以降の人や、いい感じの無料コードエディタが欲しい人、コードエディタを自分仕様にカスタマイズしたい人に向いています。初期状態では超シンプルなので、自分に必要な機能が分かっている人でないと使いこなすのは難しいかな?
サイトを多機能化するとプレビューがバグったりするのが悲しい。(特にアニメーション)

(iii)Dreamweaver

im8.jpg 

2つ上の(i)同様Adobe社が提供する有料のコードエディタです。高機能でプロ向きとされていますが、動作は重いし不安定、他のAdobe製品との連携を利点とするならば、その他製品の料金が極めて高額でとても個人じゃ扱おうと思えないソフトです。(まぁいつか.psdでコーディングしたりEmmetやマルチカーソルを使う気になったらコッチに移ろうかな(゚⊿゚))
気になる人は下記のAdobe公式サイトまで。
[Adobe公式サイト]
imgres.png 


まとめると…
(i)Brackets … 初心者
(ii)Atom … 中級者以降
(iii)Dreamweaver … プロ(?)


4, おすすめの無料サーバ (投稿日時点)

私たちは普段、GoogleやYahoo!などの検索エンジンで何かしらのキーワードを検索しWebサイトを見るわけですが、その
"Webサイトを見る"
という行為は、
"世界中のどこかにある「サーバ」というデータを蓄積している所にアクセスする"
ということです。

もしあなたが自作のWebサイトを公開したいのなら、そのサーバにデータを送る必要があります。HTML・CSSのデータをサーバに送ることを、「FTP転送」(←重要)といいます。ここではそのFTP転送を受け取ってくれる無料のサーバを紹介します。
今回私がおすすめする無料サーバはただ1つ。


です。

無料でサーバを借りられる所は結構あるのですが、一部使用に制限があったり、強制的に広告が付いたりします。FC2ブログなんかはその良い例ですね。(pro版は広告無しですが)

ウェブクロウはネットアウルという会社が提供するサービスの1つで、
広告し!・容量!・商用利用OK!
の三拍子が揃ったとても優良なサービスです。

もし容量が足りなくなったりして、有料でも本格的にWebサイトを運営したい!という人でも同社がお手頃価格でサーバを提供してくれますし、移行する際は同社のサービスなだけあって運営までの手順が似ていてやりやすいです。

[ウェブクロウのサイトはこちら]


5, その他フリーソフト 


先ほどFTP転送というものが出てきましたが、「3, 開発環境を整える」で紹介したコードエディタとは全く別のソフトウェアが必要となります。コードエディタはあくまでコードを書くためのものです。ただし、紹介したコードエディタの中でもDreamweaverはFTP転送の機能が備わっています。(さすが有料)
ここではFTP転送をするためのフリーソフトを紹介します。

FTP転送の大御所フリーソフト「FFFTP」というやつです。趣味でWeb開発している人の大半はこれを使っているんじゃないんでしょうか?
使い方はググるしかないですね。ホントこれは大御所ソフトなので、使い方を探すのに苦労しないと思います。

私は元々Dreamweaverのを使っていましたが、コードエディタをAtomに切り替えると同時にこのFFFTPを使い始めました。今のところいい感じ。




以上で実践編終わりです。本格的にWebサイトを開設するまでの道のりはある程度分かってもらえたでしょうか?このブログはProgateなんかと違って文章をしっかり読んでいく必要があるため、その手が苦手な人には読みづらかったかな。。

次回は余談編です。Webサイトを作るうえで知っておいて損はないような小話になると思います。

( ・ิω・ิ)ほんじゃまったのぉー

編集 / 2017.01.20 / コメント: 0 / トラックバック: 0 / PageTop↑
活動報告No114 Webサイトを作ってみよう (1/3) ~学習編~
カテゴリ: 未分類
おはこんばんにちは。怠惰担当0.10*10 年マエダです
最近成人式で暴動あったのどうこうでっていうニュースを見ますが先輩たちは大丈夫かな?私はまだ生後235ヶ月なので来年成人式デス!(`0言0́*)

さて、急に始まったこのWebサイトを作ってみようの回。実はヒュー研の公式サイトをリニューアルしようと、ここ数週間コードをポチポチ手打ちしています。近日公開できるといいんですが、各ブラウザの仕様に振り回されていますので、しばしお待ちを… (´;ω;`)ブワッ

↓スマホ版のプレビューです↓
img1.jpg 

電大の1月はテスト期間なので、今月中はロボから離れた話題が多くなるかも?ヽ(´ー`)ノ

コードをポチポチ打つそんな私が今回と次回、次々回でWebサイトの作り方を学ぶ方法の他にコードエディタ(≒テキストエディタ)やおすすめの無料サーバ、その他フリーソフトの紹介をしていこうと思います。

全体の流れはこんな感じです↓
【今回】
1, Webサイトって何からできている?
2, Webサイトの作り方を学ぶ方法

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



1, Webサイトって何からできている? 

右も左も分からない人は、Webサイトをつくるには何が必要なの?OfficeソフトのWordやPowerPointみたいにつくっていけばいいの?って思うんじゃないでしょうか。
取り敢えずヒュー研の新しいWebサイトのトップページのデータを見てもらいましょう。

2017-01-13 (3)

まぁこんなものです。見ての通り、プログラミングみたいな感じですね。このようにWebサイトはWordのように直感的に作れるものではなく、
HTML CSS
という2つのプログラミング言語を打ち込んで出来上がります。
(本当はHTMLとCSSはマークアップ言語というものですが、便宜上ここではプログラミング言語と呼びます)

HTMLとCSS、基本的にこの2つのプログラミング言語を使っていきますが、モノによってはこの2つ以外のプログラミング言語を使ったりします。
今はHTMLとCSSの名前だけ覚えておけば十分です。

 imgres.jpg


2, Webサイトの作り方を学ぶ方法 

前述のとおり、WebサイトはHTMLとCSSという2つのプログラミング言語で出来ています。でも書き方が分からないし…やっぱ独学じゃ難しい…?

いやそんなことはない。

Progate」という、多種類のプログラミング言語を分かりやすく学べるWebサイトがあります。私はこのサイトにものすんっっっっごくお世話になりました。あ、ステマじゃないですよ(笑)。

[Progateのサイトはこちら]
2017-01-13 (4) 

ヒュー研内でProgateをやったことあるのは私と同期にもう一人です。そのもう一人はProgateについて、「スライドで学ぶから本買って堅苦しく勉強するよりも楽」と言っていました。途中までは無料で学べるので、Progateの学習方法が気に入ったら有料プランに移るのが無難でしょう。

というわけで、「Webサイトを作ってみよう」の学習編はこれで終わりです。次回はProgateでHTMLとCSSを学んで、かつ、
実際に自分でサーバを借りてWebサイトを開設してみたい!
または
とにかく実践してみたい!
という人向けに記事を書いていきます。今日のところは取りあえずProgateを覗いてみてください。

ではでは(^^ゞ
編集 / 2017.01.13 / コメント: 0 / トラックバック: 0 / PageTop↑
活動報告No113 (近藤科学の)サーボホーンの話
カテゴリ: 趣味
どうもどうもこんにちは
新年あけましておめでとうございます
オダです。└(┐卍^o^)卍ドゥルルル
今年もヒュー研ブログは普段通りに真面目なヒュー研活動をお送りしていきたい所存でございますので
コンゴトモヨロシクお願いします

そういえば、
持っているタブレットが中古のせいかバッテリーの持ちがよくないので、
充電しながら動画をたれ流せるスタンドを探しに、ふらふらと某100円均一をうろうろしていたら、
こんなん見つけました
充電スタンド
赤丸の所にmicroUSB端子があって充電可能、お値段100円+税
さっそくタブレットを置いてみたのですがこれ
逆ゥ
端子逆向きじゃねぇか└(┐卍^o^)卍ドゥルルル

はい、今回は近藤科学のサーボホーンを色々と使ってみた感想等をまとめたいと思います。
「うん、知ってた」といった内容のものを書くかもしれません。
そんなときは更新が止まるよりマシと思って「SKATE3」とかで遊んでいて下さい。

この主観レビューが後輩とかが機体を作る際のサーボホーン選択の一助となれば良いですね。
とりあえずサーボモータの出力側につける「サーボホーン」4種類について
まず画像↓
ホーン4種
左から「アルミローハイトサーボホーン(ガンメタリック)」、「ローハイトサーボホーン」、「小径ホーンB」、「アルミクランプホーン」の順で紹介します

「アルミローハイトサーボホーン(ガンメタリック)」
ローハイトガンメタサーボホーン
おそらく電大ヒュー研で一番使われているサーボホーン。
小型機体にも大型機体にも使える万能型でローハイトの名の通り薄いです。
しかしサーボへの固定が甘いとガタついてセレーションが削れます。ホーン側が削れるだけなら交換すれば良いのですが、ファイナルギアのセレーションが削れると交換が面倒です。
あ、寸法とか図面は近藤科学さんの商品詳細ページからご確認ください。

「ローハイトサーボホーン」
ローハイト樹脂サーボホーン
次いで電大ヒュー研でよく使われているサーボホーン。
寸法は「アルミローハイトサーボホーン(ガンメタリック)」全く同じですが樹脂で作られているため軽量です。
小型機体を組み上げて1005[g]とかになったときはこのホーンに取り換えれば1[kg]以下に抑えられます多分。
ただし所詮樹脂製なのでセレーションがアルミ製よりお亡くなりになりやすいです。(ファイナルギア側のセレーションが削れることはありませんが・・・)
個人的には軽量化だけを目的とするなら次に紹介する「小径ホーンB」の方が好きです。

「小径ホーンB」
小径ホーン
電大ヒュー研では来年度予算で買うことになったこれまでは使用していなかったサーボホーン。
他のサーボホーンに比べて直径が16[mm]と小ぶりな上樹脂製のため大型機体には向きません。
というか使いものにならないと思う。
単価も12個入り1,500円+税ととってもリーズナブルです。まぁとにかく軽い、ちっちゃい、安いので小型機体に適しています。
あ、こいつの寸法でブラケットを作ると他のホーンは使えません。
これ使って小型機体作ります(予定)


「アルミクランプホーン」
アルミクランプホーン
電大ヒュー研ではKRS-40XX用のものは使用していなかったサーボホーン。(KRS-6003には同名の別物を使用しています。)
見ての通り一番ごつくて重いです。大型機体用ですね。一番の特徴はその名前にある通りクランプのような構造をしています。
アルミクランプホーン2
上の画像のように黒い飛び出しているキャップボルトを締めることによりセレーション部を締め付けることができます。
つまり、セレーションのがたつきがほぼなくなります。やはり機体のモーションの精度を上げるにはサーボとかの遊びができるだけ少ないことが重要ですからね。ホーンの交換も年に1回くらいのペースで良いのでサーボホーンの中では一番高価ですが割と経済的です多分。
デメリットは高い、分厚くて重い、こいつのためだけにM2.6×5のネジが必要、これ用にブラケットを作ると他のホーンは使えない
サーボに組み付けるときのM3ネジが専用のもの↓
専用と思わしきM3ネジ
まぁこれは代用が効くので無くしても問題はありません。というかいくつか無くしました。
あ、でもあの小さいキャップボルトは無くすと大変なので気を付けましょう。

こんな感じです。フリーホーンについてはまた今度のブログネタにしたいと思います。というかこのまま続けたら記事が長すぎる。

じゃあ次回をお楽しみに└(┐卍^o^)卍ドゥルルル
次回はどっちが書くんですかね?タカハシ氏はそろそろ埼玉に帰ってきているのかな?。└(┐卍^o^)卍ドゥルルルルルルルルルル
編集 / 2017.01.05 / コメント: 0 / トラックバック: 0 / PageTop↑
プロフィール

ヒュー研の中の人

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

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

FC2カウンター
カレンダー
12 | 2017/01 | 02
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 31 - - - -
リンク
ブロとも申請フォーム
携帯でみるには↓
QR