活動報告No.119 ヒュー研の公式 Twitter Facebook ができました ! &D-wars7
カテゴリ: 未分類 / テーマ: ラジコン / ジャンル: 趣味・実用

おはこんばんにちは、一年のマエダです。


お知らせです!

ヒュー研の新しい

ホームページ と
Twitter と
Facebook ができました!



ホームページについてはリニューアルって形で、過去の先輩方が作ってくださったホームページのサイトマップを参考に、ちょっと今風なwebサイトにデザインを変えてみました。

あと、BBSは廃止になりました。。BBSは電子掲示板のことなんですが、近年になるにつれて利用頻度が低下していってますし、何かあればメールで十分かなと思い、トップページにヒュー研のメアドをデカデカと書く代わりにBBSを無くしました。


ヒュー研連絡先スクショ 


HTMLCSSJavaScriptは最適化できていないと思うんですが、ファイルサイズの大きな画像データはメタ情報などを消し去ることで画質そのままに低容量化させているので、若干表示スピードが上がったかなって思います。(今後はコードを整理していかなくちゃ)


[ ヒュー研公式ホームページはこちら ]




Twitterスクショ 


Twitterのアカウントは


@huma2008


です。ヒューマノイド研究部(tdu)って検索しても出てくると思います。

FC2ブログと連携させているので、ヒュー研がブログを更新したら自動的にTwitterでお知らせが届きます。

フォ、フォロー..よろしくお願いします


[ ヒュー研 Twitter はこちら ]




Facebookスクショ 


Facebookの方も「ヒューマノイド研究部(tdu)」と検索すれば出てくると思います。

以前は団体用アカウントを作って情報を発信できていたらしいんですが、どうやら今のFacebookは個人のアカウントを作って、それを使って団体用ページを作成、運営していかなければならないようです。部活みたいに運営者が何回も変わる場合はどうしたら良いのやら。。


[ ヒュー研 Facebook はこちら ]





ついでに、いや、このついでが重要なんですけど、D-WARS7に関する情報をFacebookのイベントページに載せておきました。

といっても公式HPD-WARS7特設ページへ丸投げしてるんですけどね。

Twitterでも固定ツイートでリンク貼っているのでそちらの方でも直接見に行けます。


ちなみに下のようなD-EXPO関連のポスターが複数箇所に貼られているらしいです。


d-expo.jpg 


これは私が小1時間でセコセコ作ったやつです。即興で作ったので素材がなくシンプルですが多くの人の目にとまってほしいものです


[ D-WARS 7 特設ページはこちら ]


最後に、このポスターは CLIP STUDIO PAINT PRO というペイントソフトで作ったんですが、Photoshopの偉大さが改めてわかりました。Photoshopはイイゾ^

スポンサーサイト
編集 / 2017.02.17 / コメント: 0 / トラックバック: 0 / PageTop↑
活動報告No118 ロボットジャパン参戦記
カテゴリ: 未分類 / テーマ: ラジコン / ジャンル: 趣味・実用
最近はマイケルムーアの映画にはまっている二年タカハシです。
特にボウリング・フォー・コロンバイン は傑作だと思うのでこころぴょんぴょんとかほざいているアニメに脳みそが汚染された諸君らには現実というスパイスの利いたドキュメンタリー映画をおススメする。

さて先週だが築地本願寺ホールで行われたロボットジャパンに参加してきたのでその結果を書いていこうと思う。
ロボットジャパンは幅広い競技があることが特徴でフライ級バトル、バンダム級バトル、一発芸、ダンス、マラソンがある。今回は特にフライ級をメインに参加したのでその辺を書いていこうと思う。

スクリーンショット (142)
右手が張り手になったランプランサス。残念ながら初戦敗退。小型で張り手というのはなかなか有効な攻撃に結び付けられないということが分かった。

スクリーンショット (143)
コビスに倒されたロボニィ。モーションなど見直す点は多そうだ。しかしながら改良を短い期間でこなした点は素晴らしいと思う。自分なんて再来週大会なのにハードすらできていない。

スクリーンショット (145)
宙を舞う釣り人。特出した点はないが安定した動きでベスト4まで勝ち進むことが出来た。いつか釣り人になる日を待っている。

スクリーンショット (144)
最終的に優勝した墨。おめでとう!!!!!。マックス2㎏だがこの機体は1kgでロボワンlightも期待できそうだ。そのうち機体の細かい話はODA総帥が書いてくれるでしょう。ちなみに次回のロボワンlightは予選が初めて導入される。

CIMG7386.jpg
全体写真。


1486288027591[1]
お昼に食べた海鮮丼。口に入れた瞬間脂身が溶け出す。とたんに口全体にうまみが広がり、味覚で築地を感じた。お会計は偉大なるOBのUEN先輩とHTY先輩にしていただいた。ご馳走様でした。

今週はKONDOBATTLEに参加してきたので来週のブログでは立川で食べたつけ麺について書こうと思う。

またねー☆

ps. D-wars7エントリー始めました。
編集 / 2017.02.12 / コメント: 0 / トラックバック: 0 / PageTop↑
活動報告No.117 ロボットの画像を載せる!
カテゴリ: 未分類 / テーマ: ラジコン / ジャンル: 趣味・実用

お久しぶりです。二年タカハシです。
自分がブログの更新をするのは一か月ぶりです。その間は優秀な後輩と部長が更新してくれました。お陰様で期末考査は期待できそうです。

さて、タイトル通り今回はロボットの画像を載せたいと思う。最近ロボット載せてなかったし。

DSC_1085.jpg
ODA君が作ったやつ。7割ぐらいがCFRP(ドライカーボン)を使っており13軸ながら1kgを切っている。細かい説明はまた彼が書いてくれるでしょう。
ODAから一言「15万あれば作れる。」

DSC_1087.jpg
一年小型一班が作ったやつ。前の機体よりはしっかりとしたできになっているきがする。
小型一班から一言「怪物が生まれた!」

DSC_1088.jpg
一年小型二班が作ったやつ。マイコンを3HVから4HVに変更している。僕は3HVとVSRCとarduinoしかできないので4HVもいつかはマスターしたいものだ。(raspberrypiとMbedにも手を付けたい)
一年小型二班から一言「次こそは釣り人へ。。。」

DSC_1089.jpg
一年山本君が作っているもの。大会が一週間前のようなきがするような?
俺から一言「頑張ろう。」

書くいう私も神戸でのロボワンに向けて機体製作中であるが完成していません(´・_・`)
いい加減完成させないと部員に殺害されそうな気がするのでバイトも終わったことだし本腰を入れたいと思う。

終わりに
ついにヒュー研の公式TwitterとFacebookを作りました!(後輩が)
ホームページのところにあるので是非確認してほしい。
その辺のことはまた機会を見つけてブログにて告知したいと思います。(後輩が)

明後日はロボットジャパンですね。頑張りましょう。終わったらD-wars7の準備やらなきゃ(後輩が)

うん。今回の更新はめっさ適当だね(笑) またねー☆
編集 / 2017.02.03 / コメント: 0 / トラックバック: 0 / PageTop↑
活動報告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↑
プロフィール

ヒュー研の中の人

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

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

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