【パート2】ど素人がプログラミング始めてみた

【パート2】ど素人がプログラミング始めてみた

こんにちはk-hippoです。今回の記事はパート2で例によって文系でもプログラミング副業で月10万円稼ぐ! [ 日比野 新 ]を参考に2日目のプログラムを書いていきます。

今回の内容もプログラミングを始める前に知っておきたい知識編となります。インターネットやWebページなど今や私たちに身近になった言葉ですが、意味はなんとなくしか知りません。それらの意味を理解しておくと勉強しやすいみたいなので頑張って覚えていきます!

インターネット、Webの違い?

インターネットとWebの違いをとても簡単に説明すると

  • インターネット:複数のネットワークを相互接続した情報通信網のこと。決まったルールで世界中にあるネットワーク同士がやりとりできる方法。
  • Web(ワールド・ワイド・ウェブ):インターネット上で用いられている文章や画像の公開システムのこと。文章や画像、動画などを一体化したページのこと

このようにインターネットという大きなネットワークがあり、そのなかで使用されているサイトページをWebページという感じです。

Webサイトの特性と種類

Webサイトとはトップベージ、会社概要、商品紹介、お問い合わせページなどが集合したものを指します。よくCMなどで「続きはWebで!」みたいなのがあると思います。あそこで「続きはインターネットで!」って言ってるのは聞いたことありませんよね?このニュアンスでなんとなくWebというものが分かるのかな?って思います。今ではほぼ同義で「ホームページ」とも呼ばれています。

Webサイトはテレビや雑誌などと違い、視聴者に一方向性ではなく、双方向にコミュニケーションが取れます。テレビや雑誌で知った商品などは、知識はしれますが、商品は別のお店などに買いに行かなくてはなりません。

Webページでは商品購入ページがあれば、情報を得てそのまま商品を注文し買うこともできますし、お問い合わせなどでは知りたいことを質問することなどもできます。これがWebサイトの特徴です。

これから学習するランディングページもWebサイトの中の一つのページです。シングルページと呼ばれる縦長のシンプルなページで、商品プロモーションやキャンペーンなどで使用されることが多いようです。

  • シングルページ:縦長のページだけのサイト
  • 軽量サイト:10ページ前後のページを持つ小さな個人向けのサイト
  • 大規模サイト:AmazonやZOZOなど多くのページをもつサイト

とこう説明されればなんとなく分類がわかった気がします。

必ず知っておきたい3つの言葉「ファイル」「フォルダ」「ディレクトリ」

これから学習するランディングページは、私たちが普段使っている「ワード文書」と似ていると言われています。もっとも似ている点としては文章情報だけで構成されているかたまりだということ。このかたまりを「ファイル」と呼びます。またそのファイルにどんな情報が入っているかをわかりやすくするために「拡張子」と呼ばれるファイルの種類を示す記号がファイルの後ろについています。(例:k-hippo.html sample.docx syasinn.jpeg

「フォルダ」と「ディレクトリ」はほぼ同じ意味であるらしいですが、「フォルダ」とは文章情報などファイルを入れておくもの、「ディレクトリ」とはそのファイルをいれたものの場所を意味しています。

ランディングページのファイル名とディレクトリ名の名前をつけるときは6つのルールがあります。

  • 英数字の小文字に統一する
  • 全角文字、半角カナは禁止
  • 空白(スペース)は入れない
  • 使えない記号がある
  • ファイル名には必ず「拡張子」をつける
  • できるだけ途中で変更しない

副業環境を整える

テキストエディタの用意

ランディングページを作るときに重要なのが「テキストエディタ」と呼ばれるツールです。ランディングページを構成するファイルの中身は、文字データとなっています。その文字の集まりを「テキストデータ」と呼びます。この「テキストデータ」を直感的に操作できるツールが必要となります。Windowsならメモ帳、Macならテキストエディットという最初から入っているアプリでも大丈夫なようです。

私は中学で少しだけプログラミングの授業がありましたが、そのときにまメモ帳を使ってテキストデータを作りました。最初はメモ帳でもいいみたいですが、どうせやるなら使いやすいエディタがあったほうがいいようです。知人のプログラミング経験者に聞くと、エディタを使うのとそうでないのではストレスが何倍も違うとのことです。

ランディングページの構成はシンプル

一見、構成が複雑な作りになっているように思われるが、実はテキスト、デザイン、アクションの3つの要素で構成されているようです。

1.テキスト(HTML)

いわゆる文章のことです。商品紹介であったり、説明であったりする文章のこと

HTML:Hyper Text Markup Language(ハイパーテキスト・マークアップ・ランゲージ)の略で、文章情報に関する言語

2.デザイン(CSS)

文章や画像を配置する場所や文章のどこを強調するか、文字の色や大きさ、形などのこと。PCだけでなくスマートフォンでも見やすいように考えなくてはならないということ。

CSS:Cascading Style Sheets(カスケーディング・スタイル・シート)の略で、Webページのスタイル、デザインを決める言語

3.アクション(Java Script)

ランディングページに動きを与えたいときに使います。この動きは右から左へとかではなく「計算する」「地図を表示する」「動画を表示する」などといったことを指します。

アクションはランディングページに必須の条件ではないのですが、最近では動きのある情報を提供するケースが増えてきているようで、3つ目の要素として紹介しています。

Java Script(ジャバスクリプト):これは上記にもあるように、素材に動きを加えるための言語

これら3つの要素で構成されており、この3つの要素について技術を習得することでランディングページの作成ができるということです。

なんかできそうなきが・・・と思うんですが、ここからがめっちゃ大変なんでしょうね。。。。。

パート2終了

ここまでが準備段階でいよいよ次から実際に練習、課題を実践していきます。

構成要素はわかりましたし、インターネット、Webという言葉に関しての概念はわかってきました。まず扱う言葉に関して、共通の認識を持っておかないと参考書を読むにしても、他の人のWebサイトやブログをみて真似してみようとしてもわからないんですね。

やっぱり何事にも基礎のことを置いて応用ができるようにはならないんですね。