コンテンツへスキップ

これは以前HTMLとCSSを使ってみる目的で作ってみたサイトの話です。

ざっくりホームページ

はじめはホームページ作りの始め方からです。プログラミングやホームページに興味があるけれどもどうしたらいいかわからない、俺よりも初心者をターゲットに書いていきます。

ホームページに最低限必要なもの(俺調べ)

「プログラミングをはじめたい!!」  …けど何をすれば??

俺の場合は、プログラミングといえばC言語で、なんとなく難しそうだけどやっていけばできるようになるよねー、という見切り発車でした。これがよくなかった。

ホームページを作りたいだけならC言語を使わないでもできます。ということを知らなかった俺はなかなかな遠回りをしました。

さて、本題です。ホームページ作りに必要なのは

  • HTMLなど
  • CSS
  • JavaScript

です。それぞれについて軽く説明します。

HTML

ホームページの顔になる部分を表現します。タイトルはこれ、本文はこれ、という感じ。他のページのURLを形式にしたがって記述すると、ホームページ上でそこをクリックすると指定したページに飛ぶことができます。URLは住所や道筋に当たります。このファイルのこのファイルにはいって…という風に道筋(パスといいます)を指定しています。

というのも、人間が読む文章は、大きさ、内容から、見出し、キーワード、タイトルなどを見分けられるようになっています。このように、文章を意味の重要性で分けて区別することを構造化と呼びます。テキストを構造化するとき、具体的にはいちいち「ここはタイトルですよー」と意味を加えていくことになります。これをやる役割を持つのがマークアップ言語です。

HTMLはマークアップ言語というものの1つです。これにはいろいろと種類がありますので、ググッてみてください。

このホームページのコードはこんな感じ。文の両端にあるのがタグで,これが構造化のみそです。

\begin{lstlisting}
<title>お勉強のために</title>
 <li> <a href=”../index.html”>HOME</a> </li>
 <img src=”../portfolio/images/P1030350.JPG” height=”390″ >
 <h2 class=”headTitle-typeA”>今後扱っていきたいこと</h2>
\end{lstlisting}

1番目の文では、ここがタイトルであるということを指定していて、ホームページの上のタブの部分に表示されます。タグは\textless~~\textgreater \textless/~~\textgreater という部分で、ここの間に書いたテキストが~~だ、ということになります。

2番目の文では、リンクを指定しているタブと箇条書きをするタブを使っています。\textless li\textgreater\textless/li\textgreater が箇条書きを指示し、\textless a href = ” パス ” \textgreater

/a \textgreater でリンクをしていています。

このパスと書いている部分で、ファイルがある場所を指定しています。このリンクをページ上でクリックするとHOME画面に移動します。

スタート地点は今自分が書いているhtmlファイルの場所で、..は一つ上の段のフォルダに行くことを意味しています。スタート地点のフォルダをA,上の段のフォルダをBとすると,私のパソコンの中には、Bフォルダの中にAフォルダとindex.htmlが入っています。ブラウザ(SafariやMicrosoft Edge等)がトップページにアクセスしたとき,フォルダ内でindex.htmlというファイルが一番始めに表示されるらしいので気をつけましょう。

自分がいるところからスタートするパスは相対パス,httpから始まるようなインターネット上でファイルの位置を指定する方法を絶対パスと言います。

同様に場所を指定する事で画像を表示させる事も出来ます。3行目がそうです。heightは画像サイズを指定しています。

4段目は見出しの部分なので \textless h2 \textgreater で文を強調しています。h1,h2,h3の順で字が大きく表示されますので,h1やh2でタイトルや見出しを書くことが多いです。ここではさらに class=ほにゃらら と名前をつけています。CSSで指定するして装飾を作るとそのクラスの文はその通りに表示されますのでつけておくと便利です。

CSS

CSSを使うと文章を装飾することができます。背景の色やタイトルの文字の大きさ、余白の大きさなどを指定できます。文字の大きさはHTMLでも指定できますが、CSSのほうが便利です。

CSSは セレクタ{ プロパティ : 値 ;} の形で書かれています。セレクタは装飾される対象を選んでいます。HTMLでclass=honyaと指定していたらセレクタをhonyaにすれば良いですし,見出しのh1,h2..や1段落文の文章を表すpなどを指定しても大丈夫です。プロパティは何を,値はどうするかを指定します。font-size:14pxだったら文字サイズは14ピクセルですし,background:rgb(241, 250, 224)は背景が薄い緑になります。色は三原色の濃さでしています。これはテキストエディタか画像加工ツールを利用しましょう。

classで名前をつけると,CSSで指定するして装飾を作るとそのクラスの文はその通りに表示されますのでつけておくと便利と言いましたが,あとで修正するのも楽になります。各見出しは同じ色や大きさにすることが多いと思いますが,それぞれに同じようにCSSを指定するよりもclassで名前をつけて,そのクラスの装飾内容を1カ所で書けば,修正箇所も1カ所で済みます。また,h2で2種類の見出しの装飾を作りたいと言うときなどにも便利です。例ではheadTitle-typeA等がこれに当たります。

ただ、CSSのことはよく分かっていません。なんとなくで書いています。

コードです

\begin{lstlisting}
 @charset "utf-8";
#page { width: 980; margin: 0 auto;} 
body {background: rgb(241, 250, 224);
color : rgba(41, 42, 43, 0.712); margin-left: 2em; margin-right: 2em; } 
 ~~省略~~ 
.siteTitle { background: rgb(95, 128, 158); color:rgb(242, 246, 247); 
padding : 5px 15px; line-height: 1.231; margin-top: 0;} 
.headTitle-typeA {font-size :18px; color: #349FA6; 
border-bottom: solid 1px #349FA6;} 
.headTitle-typeB {background: rgb(207, 243, 178); 
font-size :18px; color: #03817b; border-left: 
solid 5px rgb(68, 68, 66);} 
 .headTitle-typeC {font-size :16px; color: #494848; }  

作るまでの準備

せっかくこの記事を読んでくださったので、読んでいる方がスタートを切れるように説明たいと思います。実際に作ってみる前に,環境を整える必要があります。

コードに関する知識の他にに必要なものは、以下と通りです。

  • PCとネット環境
  • ブラウザ
  • サーバー

加えて、ファイルに関する知識が多少必要です。index.htmlについての話を書きましたが、.htmlというのは拡張子と呼ばれていて,ファイルの種類を表しています。テキストファイルは.txt等,様々な拡張子があります。htmlもテキストファイルですが,ホームページで表示できます。もし名前を変えるとき画像を表す.jpgのような拡張子をワードで作ったファイルにつけてしまうとワードは画像を見るためのツールではありませんので開けなくなります。このような事故を防ぐために初期設定では拡張子は非表示になっています。拡張子はパス指定するときにも書かなくてはいけません。ホームページを作るなら拡張子を把握している必要がありますので,エクスプローラー(ファイルマークのアイコン)の「表示」から変更してください。

拡張子の画像

ブラウザはなんでも良いはずですが、私はGoogle Chromeを使っています。htmlファイルを開くときに右クリックで「プログラムから開く」や「このアプリケーションで開く」で選んでください。

テキストエディタは文を書くツールです。Wordでも出来るはずですが、文字の大きさなどのデータも保存されますし,重いです。メモ帳でもできますが,無料のエディタがネットにあるのでお好みで使うのをおすすめします。タグなどを色を変えて表示してくれたりすると見やすくなります。私はVisual Studio Codeで書いています。

サーバというのはサービスを提供するコンピュータです。ホームページの土地のようなイメージのおもので,公開するには不可欠です。これも調べれば無料のものがすぐに見つかります。登録しましょう。ユーザー名とFTPパスワードはひかえておいてください。私はとりあえずFC2にしました。

作ったホームページをサーバに保存するにはFTPソフトが必要になります。ネットからインストールしましょう。有名なのはFFFTPというソフトで,私も使っています。「新規ホスト」の「基本」からホスト名にfc2などと入力ていき、ローカルの初期フォルダに「C:\ほにゃらら」と自分が作ったホームページに関するいろいろなデータを保存したフォルダを指定します。あとはOKして接続して…とすればアップできます。

雑になりましたが,事前準備は以上です。これができれば,あとはネットに転がっている記述法や書店で巡り合った本を活用して自分のホームページを作り始めることができるはずです。

ffftpの写真

終わりに

初心者がまず手を出すものとしてホームページはおすすめです。パスの指定のような考え方がわかりますし,書いたコードがすぐに形になるのは楽しいです(^^ゞ ただ、今回の内容では計算処理が出てきませんので,アプリやゲームが作りたい方はさらに別な言語を勉強してみてください。

追記

(2019/2/11)コードの表示を変更しました。HTMLとCSSなどの学習にはprogateが楽しいのでおすすめです。

参考

作りながら学ぶ HTML/CSSデザインの教科書 高橋朋代・森智佳子 SB Creative

(無料電話サポート付)できるホームページ HTML&CSS入門 Windows 10/8.1/7対応 (できるシリーズ) インプレス

追記(2019/3/18) 段落構成を変更しました。内容は変更ありません。

ジャンル:IoT

2018/12/15,16 作業が進んでない上に、年末飲み会ラッシュにも関わらず今週は外部の勉強会に行ってみました。(前日に3次回までいったやつ) 

やったこと

IoTや無線に関する簡単な解説 CHIRIMEN for Raspberry Pi 3でLチカ~下記チュートリアル

CHIRIMEN for Raspberry Pi 3 セットアップ

Tutorials for CHIRIMEN / CHIRIMEN チュートリアル

web IoT メイカーズチャレンジとは

会場

Web×IoT メイカーズチャレンジでは、こうした「フルスタックなスキル」やアイデアを素早く形にできる「プロトタイピング力」を身につける機会としていただけるよう、実際にモノづくりを体験する 2 つのプロセスでイベントを構成


WebXIoT メイカーズチャレンジ2018-2019

ラズパイとjavascritを使ったIoTをやってみような総務省主催のイベントです。日本各地でやっているらしいですが、俺は前橋でやりました。 12/15,16,1/19,20で開催されます。

目的

  • javascriptを敬遠していた件

自分がロボ研で専攻がハードウェア系なので、処理の遅そうなスクリプト言語と縁があまり無かった上に、なんとなくC++こそ至高みたいな帝王学が勝手に頭のなかで生まれていたらしい、、、HP作りで使いそうな言語だし、イベントがあるのならと言うことで参加してみました。

  • APIってどうやったら使えるのさ

俺がツイ廃なので、twitterで遊びたいなと思ってたんですが、API(できあがってるコードみたいなイメージの物です)を利用するのってどうやったら良いのか和全く解らなかったんですが、このイベントで使うらしいので経験しておけば全然違うはずと思いました。

  • ラズパイは友達

ラズパイはかなり都合がいいヤツなので、仲良くなりたい。マイコンは使ったことがありますが、ハードウエアとして命令がどうなっているのかわからない環境でものを作るということにとても抵抗がありまして。先達に教えていただきたいと思っています。

ハッカソン

ハッカソンとは、

「ハッカソン」(hackathon)とは、広い意味でソフトウェアのエンジニアリングを指す“ハック”(hack)とマラソン(marathon)を組み合わせた米IT業界発祥の造語で、もともとはプログラマーやデザイナーから成る複数の参加チームが、マラソンのように、数時間から数日間の与えられた時間を徹してプログラミングに没頭し、アイデアや成果を競い合う開発イベントのことをいいます。


ハッカソンとは何?Weblio辞書

今回私たちのチームは「自分で快適な場所に移動する植木鉢」を作ろうということになりました。そういうんはすでに作っている人がいるもの。私たちの目玉は、かわいらしさでございます。懐かしのたまごっちのような、飼う植木鉢ができたら最高。

機能は

  • 植木鉢の状態のslack(SNS)への通知 温度、湿度、照度など
  • 光のある所への移動 簡単のため、室内での使用を考えています。窓辺においても、時間によって日の光の方角がかわりますよね。目標値よりも暗くなったら移動します。 簡単のために直線で東西を行ったり来たりするのを考えています。
  • 顔表示 画面を表示して、状態によって表情を変化させます。喜怒哀楽。
  • たまにしゃべる slack botです。かわいい。

俺はslackに通知するあたりを担当します。

お得感について

前半は講習とアイデア出しでした。目標の達成度はどんなものか。 APIの使い方はなんとなくわかった。 twitterよりslackのほうが楽らしい。通信はできそう。 チームを作ったほうが楽。 ラズパイたのしい。 javascriptたのしい。

今回はCHIRIMENというのを使っていますが、おれは別件でROSの勉強中でもあります。(別でまとめます。ロボ制御系です。)俺はこれまでマイコンを使ったりなどしてきましたが、ラズパイを使う感覚がわかってきました。仲良くなれそうです。物を作るイメージが具体的になってきたので、これから順を追っていろいろやっていきたいと思います。

あと、今回考えた中で一番重要なのが、もっと出来合いのものを使うべきだということ。ロボットを作っているときにセンサー回路を作ったりしてましたが、そんなものは買ってしまったほうが早い。(初めにマイコンを覚えるために使うというのはありなので今後やっていきます。)あとチームを作って機能の一部を人に任せたほうかいいということに気づきました。 ただし、係分担のとき、自分の専門の分野になるのは嫌でした。俺は電気科なのでハードウェアのほうがソフトよりいくらか詳しいですが、その流れで機体の移動部分を担当したらわざわざ外部勉強会に行ったのに新しいことを習得できないじゃないですか。(ラズパイを使ってセンサ取得をできるようにはなりますが。)そこで俺はslack通知係に立候補しました。これが失敗が許されないような企業の仕事になれば確実性の高い専門の仕事を任せられると予想されます。今のうちにいろいろやっておこうと思いました。

年末にslackとラズパイで遊ぼうと思います。

(追記2019/2/25 )後編 Web X IoT メイカーズチャレンジに参加後編

追記(2019/3/18) 段落構成を変更しました。内容は変更ありません。

11月8日。ジャンル:電子工作

作成物

2018年11月第1週の制作物は、先週設計した発振回路を実際につくってみようという内様です。弛張発振回路はトランジスタ、コンデンサ、抵抗で構成されています。ハロウィンの装飾に使う事を考えると、コンデンサは電力を基本的に消費しないはずなのでちょうど良いのではないかというLチカ回でしたが結局過ぎてしまったのでクリスマスツリーにします。

前回=>発振回路を作りたい1

道具

  • ブレッドボード
  • ジャンパーピン
  • ユニバーサル基板
  • ニッパ
  • ペンチ
  • 半田付けセット
  • (テスタ)

部品

  • 2SC1815(npnトランジスタ)
  • 2SC1015(pnpトランジスタ)
  • 10uF電解コンデンサ
  • 270kΩ抵抗
  • 赤色LED 持っていたもので、詳細は解らない
  • 電池ホルダー 3個入り
  • 単三乾電池 3本

製作

実験の様子

実験の様子です。

ブレッドボードではこんな感じに動きました。ちなみに3本の乾電池ホルダーしかもってなかったので電源電圧は3Vから4.5Vになりました。問題はないはず。

ので、良い感じに配置して、ツリーっぽくしていきます。周波数とか適当に変更していきます。

ここで、LEDをチカチカさせる電圧は、並列に繋がっているコンデンサの電圧と等しくなりますので、チカチカ周期を変えるためにはコンデンサに電力が充電される長さを変えれば良いことが解ります。具体的には抵抗器またはコンデンサの値を変えれば良いと言うことになります。コンデンサに充電している間、部分的にCR回路に見えますので、時定数T=CR[s]でコンデンサ電圧の0%から約63%まで充電出来ます。  

つまり、コンダクダンスCや抵抗値Rを2倍にすると充電時間は2倍必要になり周期も2倍になると言うことになります。コンデンサの数は上の動画が1つで下の動画が2つです。発振周期が変わったのがわかります。  精度の高い回路構成ではないうえにコンデンサや(特に)抵抗の値はばらつきがありますし、計算も雑なので正確には出来ませんでした。とはいえ、どうせなら綺麗に交互に光らせたいので、抵抗とかコンデンサとかいろいろ変えて実験しましたが割愛。

シミュレーションした回路だとLEDが1つで味気ないので平行に2つ、直列に2つ計4つのLEDを周期2:3の2種類の発振周期で作ったので計8つ使って居ます。

最終形はこちら。多くは望まないのが俺流。

完成

さてこの回路でチカチカすることが解ったので、クリスマスツリーにしていきます。作ったのがこちらになります(3分クッキングではない)。

てっててー

LEDの並び順をミスったので抵抗値のバランスが悪くなったんですが、まあOK。

雑談

アニメ見ながら作ったらめちゃめちゃ時間掛かったぞ!実験と製作で5時間ぐらいかな?かかりずぎですね。自由研究としては上々。小学生のみんなはやってみてね!

追記(2019/3/18) 段落構成を変更しました。内容は変更ありません。