IT-Diary～27歳未経験からプロのwebデザイナーになる～

アパレル業界からIT業界へ転職したブロガ―の軌跡です。

Ruby初心者がつまづきやすいメソッドの考え方

最近自宅では、プロジェクト先でバリバリ仕事をこなす為にエクセルの勉強と、将来自分がウェブデザイナーとして活きるためのプログラミングの勉強を行っています。

ウェブ系のプログラミング言語で関連するのが「HTML、CSS、Javascript、Ruby」の4つだと、どこかの本で読みました。

 

it-study-diary.hateblo.jp

 今回紹介するRubyは他のプログラミングと違い、日本人が開発した言語です。そのため、日本語がサポートされているのではじめて学ぶ人でも親しみやすいと言われています。

OSなどを動かすのはできませんが、記述したコードがすぐに反映されるのでエラーが出ても対処しやすいようです。（まだ前提知識なので、実際にはプログラミングしていません。）

毎度お世話になっているCODEPREPで、はじめてのRubyのブックが終わったので、復習も兼ねて基礎項目について記述します。

そもそもRubyってなに？

Rubyはプログラミング言語の一種です。1995年に”まつもとゆきひろ（通称Matz）”によって開発されたようです。文法が非常にシンプルでウェブサービスを作るのが得意な言語らしいので、他の言語で挫折しかけた自分もやってみようと思いました。

日本人が開発したので、日本語の処理が非常に得意。ただし、インタプリンタなので、処理がコンパイラに比べると遅いのがデメリットのようです。また、OSをつくることができないため、HTMLやCSSと組み合わせることで効果を発揮します。

文字列の表示方法

Rubyで文章などの文字を表示させるには”puts"と呼ばれるメソッドを使います。また、putsの後に表示させたい文字を””（ダブルクオーテーション）で囲むことで表示されるようになります。

　puts "富士山"　

上記のように記入すると、

富士山

と表示されるようになります。

Rubyにおいてputsのようなメソッドという考え方が重要になってきます。

メソッドってなに？

これは、プログラムの一連の処理を一つの機能としてまとめたものです。メソッドがあることでRubyのプログラムは動きます。

メリットとしてたくさんの処理を何度も繰り返して書く必要がないので、プログラムの書き手からすると、それだけでストレスが軽減されます。コード表がすっきりしているので引き継ぎがしやすいのも大きなメリットです。

文字を連結する

文章や単語をくっつけて一つのまとまりにしたい時に使えるのが連結です。文字を連結するためには記号の「＋」をつかいます。例えば、

puts "山田"+"太郎"

 と記述すれば、

山田太郎

と表示されるようになります。

まとめ

今回は、これから配列などを述べていく上で重要な、メソッドの考え方を述べました。次回は、より深い知識をお送りしますので、お楽しみに。

 

 

 

 

 

 

【HTML】コードを描くためにベースとなる基礎知識

ネットサーフィンをしていて、偶然見つけたサイトがありました。正直、本でプログラミングを学ぶとなるとなかなか頭に入りません。

しかし、実際にコードを書きながら覚えれば、記憶として定着するのも速いのではないか。そう考えて始めたのが「CODEPREP」です。

そこで覚えた知識を、アウトプットとしてこのブログにつづります。

そもそもHTMLとは何か？

HTMLとは、Hyper Text Language(ハイパーテキストランゲージ)の頭文字をとったものです。

 

Hyper Textとは、Webページ同士を結びつける(リンクする)ための仕組みであり、
Markup とは、この次のセクションで出てくる「タグ」と呼ばれるものを利用してページ中の文字列に 「見出し」「段落」等の構造の意味づけや装飾等を行う言語のことを意味します。*1

 

 HTMLは、ネット上に無数に存在するwebページをつなぎ合わせ、それぞれのページがどんな作りになっているかを表しているものと言えますね。

文章を飾りつけるタグ

webページに画像や動画を表示させる為には、それぞれのコードを記述して意味づけしなければいけません。それがタグです。

タグは見出し・段落など、何らかの内容が存在するものに適用される「<●●>〜</●●>」、または改行など、内容を伴わないものに適用される「<●>」という構造のルールを記述することによって表現されます。*2

使用頻度の高いタグ

  •  <h></h>・・・<h>タグは見出しを表すタグです。hの後ろに1～6の数字が付くことで、見出しの大きさを表現できます。数字が小さいほど見出しの重要度が高いです。hは見出しの意味を表すheadingからきています。
  • <title></title>・・・<title>タグは、題名を表すタグです。記述するページに使用する題名を設定する事で、訪問者にわかりやすくする意味があります。

HTMLを意味づける構成

タグや文章を書き始めるまえに「これはHTMLで出来ている」ということを、webページに認識させる必要があります。そこで重要なのが、以下の記述です。

<html> ~ </html>: この中にHTML構文を記述する ということを明示するためのタグです。このタグはheadタグ、bodyタグの2つを含みます。

<head> ~ </head>: この中ではHTMLの設定(タイトル、書式、ページの説明 等)・JavaScriptやCSSファイルの読み込み等を行います。

 

 

<body> ~ </body>: この中では実際にパソコンの画面上に映し出される部分の構造を記述します。*3

 すべてのタグは、htmlタグの中で記述するというルールがあります。これを守らないとwebページが認識せず、コードだけが表示されてしまうので注意しましょう。

DOCUTYPE宣言とは？

DOCUTYPE宣言は、これから書く文章はHTMLで書かれているぞ！という事実をwebページに認識させることです。

IT分野は非常に変化のスピードが速いです。HTMLも古くから使われているマークアップ言語ですが、どんどんルールが変わってきています。

HTMLも現在ではHTML5がリリースされており、最近のwebページの主軸となっています。ですが、いずれも共通しているのが、コードをwebページに認識させることです。htmlを書くときに、冒頭へ<!DOCUTYPE html>と記述すればOKです。

まとめ

今回はhtmlの基本の項目について説明致しました。次回はより深いレベルの内容をお届けします。

 

*1:CODEPREP－はじめてのHTMLより

*2:CODEPREP－はじめてのHTMLより

*3:CODEPREP－はじめてのHTMLより

CSS/CSS3の基礎知識を１０日間で覚えてみる

css css3 html

空いた時間でスキルを学ぶ

ワードプレスを使っているいる以上、ｃｓｓやcss３に関しては基礎知識を蓄えなくてはと思い、近くの図書館で入門書をレンタルしてきました。

翔泳社出版のCSS/CSS3入門教室という書籍です。学んだ事を深く理解するには、ブログでアウトプットするのが一番だと思い、筆を窘めた次第です。

[amazonjs asin="4798124036" locale="JP" title="10日でおぼえるCSS／CSS3入門教室"]

HTMLとCSS

まず書籍を開くとオリエンテーションとして、事前知識の講義のページが表れました。まずはHTMLとCSSとはそもそもなんなのか？について説明しなければなりません。

HTML・・・テキストの各部分が文書の構成要素として何であるかを示す言語 CSS・・・HTMLのタグをつけた範囲のテキストの表示方法をしていする言語

 

ここでいう言語とは、コンピューター上で特定の処理をさせる為に作られた書き方のルールを表しているようですね。言語がなければ、PCは処理ができないので動けないということです。

CSSの構成

ｃｓｓの言語はソースコードと呼ばれています。これはエンジニアやプログラマの人たち各個人によって見た目が大きく変わります。というのも、ｃｓｓは書式を構成する各部分の間に半角スペースを複数入れることができるからです。

このスペースの有無は、ソースコードの見やすさ・読みやすさに関わりますが、実際の動作には影響はありません。

CSSで使える単位

ｃｓｓには数字の直後に使用する事で、単位を言語として繁栄させる事ができるようです。使用できる単位は以下の通り。

px・・・ピクセル

pt・・・ポイント（1/72インチ）

cm・・・センチメートル

mm・・・ミリメートル

in・・・インチ（2.54センチメートル）

pc・・・パイカ（12ポイント）

CSSにおける英単語

ｃｓｓには言語を使用する際に英単語で指定します。この英単語の事を「キーワード」と呼びます。キーワードは7段構成になっています。標準のサイズは「midium」となっており、一番小さいサイズは「xx-small」一番大きいサイズは「xx-large」と表記します。

また、ひとつ前のサイズを変えたい場合は「smaller/larger」を使用する事になっています。

CSSで色を指定する方法

ｃｓｓでは文字や背景に色を付けたいときに、キーワード（英単語）若しくは数字で指定します。CSSとCSS３で表記出来る色の数が異なり、前者は約17色・後者は約150色となっています。

例えば、栗のような茶色ならmaroon/#800000となります。

CSSの基本書式

ｃｓｓにおいて書式の基本形は以下のようになります。

適用先｛表示指定｝

適用先｛表示指定　表示指定　表示指定｝

表示指定はいくつでも書き入れる事が出来ます。また、大きく2つに分かれており、「：」で区切られています。１つの表示指定の最後には「；」が付く事で終わりを意味します。

指定間に半角スペースを入れたり、改行やタブなども好きなだけ入れる事が可能です。

適用先の指定方法

適用先の指定方法には３つのパターンがあります。

特定の種類の要素に適用：要素名

id='ID名'の要素に適用：＃ID名

すべての要素に適用：＊

表示の指定方法

文字サイズ・・・　font-size:○○○;

文字色・・・　color:○○○;

背景色・・・　background:○○○;

背景のない余白・・・　margin:○○○;

背景のある部分の余白・・・　padding:○○○;

テキストの影・・・　shadow:○○○;

まとめ

最後は駆け足になってしまいましたが、ｃｓｓの基本的な部分について書いてみました。私も始めたばかりなのでまだまだ勉強中ですが、これから学んでいき、自分でワードプレスのシートなどを作れるようになりたいと思います。

アクティブディレクトリについて学ぶ

プロジェクト先において必要な知識

就職先のIT企業は、プロジェクト先へ出向しなければなりません。だからこそ、事前に知識が必要になります。今回のプロジェクト先ではAD(ActiveDirectory)の知識があると仕事がしやすいとのことなので、早速調べてみました。

Active Directoryとは？

アクティブディレクトリとは、Microsoftが提供しているディレクトリサービスの事。現在はディレクトリサービスを含む、サービス群の総称です。

ディレクトリサービスについて

そもそもディレクトリとは何でしょう？簡単にいうと、情報を示す為の入れ物のことを指します。例えるならば、ショッピングモールにあるフロアマップです。「フロア内の一階にカフェがある」と指し示す事をディレクトリするといいます。

パソコンで例えると、「データベースに〇〇という情報を格納している」という事もディレクトリの一種です。

例えるならコンシェルジュ

そして、ディレクトリサービスは、言うなればインフォメーションセンターのコンシェルジュです。「◻︎◻︎という靴屋はどこにありますか？」と尋ねた時に、コンシェルジュは場所を教えてくれますよね。

ディレクトリサービスは、知りたい情報を見つけやすくする為のサービスの事を指します。PCにおいて、最も単純なディレクトリサービスがDNS（Directory•Name・System）です。

IPアドレスとホスト名を関連付けているのがドメインネームサービスで、これがかん付けられないと、パソコンはウェブページを表示する事が出来ません。

ADはMicrosoftによる管理サービス

小難しい名前がついていますが、結局のところADはデータベースの案内役だと理解しました。企業においてはたくさんのパソコンがあり、それぞれどんな人はが使うのかをわかりやすく教えてくれるのが、ADの正体です。

今後データベースなどの仕事をする上で、基礎の基礎知識なので、忘れないようにしたいものです。