dorayakiBlog

~興味ある事について書いてます~

Webを作るのに必要な技術

最近はWeb技術の復習をしていて、こちらの投稿が滞ってしまった。

ここで言うWebについてはサイトやアプリケーションの事になるのだけど、
WebサイトやWebアプリを構成する技術を覚えるのには骨を折る。
とは言っても、常に使い続けないとすぐに忘れてしまう。そらで使いこなそうとするならなおのこと。
なぜならその技術はいくつかの複数の技術が必要であるからだ。年々徐々に進化しつつあるのも面白くもありまた厄介でもあるが。


何を学習すべきかを明確にする為にここに覚え書きしておくとするなら、

Web上でサイトなりアプリを作ろうとしたとき、


まずはHTMLを覚えるべきだ。
HTMLはタグというくくりで文書をマークアップする言語であり、Webページを構成する骨格となる構造をページを表示させる為のブラウザに読み込ませる文書の形でもある。
その構造の基本となる書き方と、表示させる文章や画像などを囲う主なタグの種類と用途を覚えれば、自由に操れるようになる。
挿入する文章や画像などの種類に応じてタグの種類を使い分け、囲うだけで良い。
(囲わないタグもあるが)
その階層構造や役割をよく把握する必要がある。

それはまさに人間で言うところの骨、骨格である。


次にCSS。
CSS(カスケーディングスタイルシート)はページの装飾または肉付けといったところである。
色やグラデーションや画像を使用した模様付けから、文字の大きさやフォントの種類やレイアウトの幅や高さや並びなど、装飾から構成のようなページの肉付けを行う。

人間でいうと筋肉や皮膚などを担当すると言える。


ここまでの技術でもサイト作りは充分である。最近のCSSは高度な装飾からアニメーションまでこなすので上の二つだけでも問題ない。
アプリや企業サイトや、伝達という目的以上の事をするなら足りないかもしれないが。
しかしそれらを補完するTwitterやFacebookを始め多くのWebサービスをウィジェットなどの形で取り入れマッシュアップして補う事で、作業の時間や費用などのコストを抑えられるのでそれらを考慮すればたいていの機能は問題ないと考える。


そして重要だがあれば良い技術として、
画像処理ソフトを使えれば、ページの見栄えと伝達力が格段に上がる。
Photoshopがその代表格であるが、フリーソフトのGIMPなども充分な機能を持つ。
Photoshopマスターになる必要もないが、写真の修正やバナーやボタンの画像や簡単なイラストが作る事ができればWebの用途としては充分である。
それ以上にできれば活躍の場はさらに広がる。

これもCSSに加えて装飾ではあるが、衣服や化粧といったところか。


ここからはプログラミングになる。
Webに最も必要とされているであろうJavascriptがある。
フロントエンド、つまりページの表示に関わる部分をプログラム制御するのが主だ。
HTMLやCSSだけではあらかじめ記述した内容しか表示できないので、閲覧者のアクションに応じてページに様々な動きをダイナミックに与える事ができる。
一部、サーバとの通信も可能になりバックエンドの処理も可能になってきている。
AJAXやサーバ側のプログラムたしてNode.jsなど。
変数などの型付けがなく厳密でなく他の言語よりは学習する量も少なく、実行環境もブラウザのみなので最も入門しやすい。


次はサーバ側で動かすプログラミングができると完璧である。
自分の場合は、メールフォームを作るのに必要なので覚え始めた。
主に閲覧者の動きに応じて、アクションを返す点ではJavascriptも似た役割を果たせるが、メールフォームなどの入力した物をサーバで受け取りページをそれに応じた形に整形して返すような動きを持たせる事ができる。
ブラウザ上のみだけでの処理ではなく、ブラウザとサーバを介する処理になる。
そのときのプログラミングの選択肢として、サーバ上でCGIという形式で使えるならどの言語でも可能でメジャーな言語なら大体はどれでも使う事ができる。PHPは別でPHPとして許可されていれば可。
しかしサーバをレンタルする場合は対応している言語も確認する必要もあり、人間向けに書かれたプログラミング言語を機械が読み取れるように翻訳するコンパイルの必要のない軽量言語を使うのが良い。
今の主流は、
PHP Ruby Python Perl
である。
Web上でのできる事とその目的はほぼ同じなのでどれを選んでも構わない。
プログラミング自体その文法や目的は基本部分は共通しているので一つ覚えたら、複数チャレンジしてみても幅が広がるので良いかもしれない。

多くの商品などのデータを扱う場合は、
データベースも上記のサーバサイドのプログラミングとあわせて覚えておくとよい。
データベースのアプリケーションを備えたサーバにサーバサイドプログラミングでアクセスしSQLというデータベース用の言語を操作し入力や削除や更新などを行う。そしてその整形されたデータを再度プログラミングでページに書き加えて表示する。
商用のデータベースもあるが、オープンソースのMySQLなどが始めやすい。


もし自分でサーバを立てるとしたら、
サーバの、主にlinuxとそのコマンドとサーバ周り及びインターネット自体のおおまかな知識を学んでおくと、
Web上に存在すサイトやアプリやサービスやその他の通信技術に理解が深まり、かつ規模の大きいサービスを作るのに役立つ。

Javascript が人間でいうと関節だとしたら、
サーバサイドプログラミングやデータベースは内臓器官や脳機能などだろうか。 サーバは心臓部だろうか。



その他もしあれば良い技術として、

Illustratorが使えると、
ロゴ作成や拡大しても粗くならないSVG画像やFlashの素材やサイトのカンプのレイアウトを作りやすい。


Flash は近年ではアプリ作りやオリジナルのアニメーションには良いが、
Web用としてはスマートフォンの多くがその表示に対応していないので、それがいつの日か解除されるのかという点で今はまだ様子を見る必要があるように感じる。表現力の要る案件などでは需要はまだまだありそうだが。
スマートフォンのデバイスにおける表示においても、スマートフォンにおけるWeb用へのFlashのコード変換サービスもあるらしい。
しかしJavascriptやCSSの組合せでアニメーションも代替可能になってきているのでそちらに切り替えても良い。
しかしFlashの表現力は豊かなので使う場を考えながら使うのが良いかもしれない。


Javascript を覚えたら、そのライブラリでありそれを扱うjQueryを覚えると
Javascript より簡単に豊かな表現をブラウザの差異を吸収しつつ実現できるので、そちらも余裕があれば覚えると良い。


大規模なサービスの場合はJava servlet を覚えると良い。
Web上で使えるJavaのサーバサイドプログラミングということになるが、CGIと異なり最初の起動以外は同時に多数な各閲覧者への処理ができるのでユーザーを待たせる処理時間がCGIより少なく済むので、利用人数の多い場合には適している。
Java の文法とservlet の仕様を学習すると良い。


Webの場合、C言語でcgi を作成すると非常に高速な処理ができるらしい。自身は行った事がないのでいつかチャレンジしてみたい。が大規模サービスのバックグラウンドに向いてそうだ。そんな機会も無いような気がするが。
とはいえ、機械語などを除く全ての今現在のメジャーの言語の成り立ちを知るにはC言語を学んで損はない。
確かにこの言語から入門する道もあるのにはうなづける。



以上、とりあえず上記のHTMLからデータベースまでの技術をマスター、とまで行かなくともレベル1くらいにして学んで行けば、たいていのWebサイトなりWebアプリなりのサービスは作れるようになっていく。後は独創的な発想が必要になりそうだ。

狭く深くから探求するのも学問の学ぶあり方としては良いが、
広く浅くから始めて見るのも、Webでは良いかと考える。

カテゴリ別記事一覧
・絵画技法
ポワンティエという絵画技法
ポワンティエの仕組みについて
アラプリマ技法のコツ
スカンブル技法
グレーズ(グレージング)技法
スフマート技法
グリザイユ画法
インプリマトゥーラ
ファットオーバーリーン
ウェットインウェット
スパッタリング
絵の耐用年数
絵の耐久力
絵や印刷物の保存方法
絵具のつや消し
つや消しの絵具
つや消しの原理
つや消しの絵が好まれる理由
絵を描く姿勢
絵の描き方とは
黒い物体の描き方
補色対比を利用した描き方
透視図法とは
彩色について
陰影のつき方
・水彩、アクリル絵具、他
アクリル絵具の特徴
アクリル絵具の道具
アクリル絵具を使う時に気をつけたい事
アクリル絵具の弱点
アクリル絵具を落とす方法
アクリル画に必要な道具
アクリルニスの塗り方
水彩画の絵やイラストをうまく描くコツ・方法
アルキド樹脂絵具について
・油彩
油絵を描く道具
乾燥促進剤の種類
樹脂ワニスの種類
乾性油の種類
画用液の調合の方法
揮発性油の種類
油絵を描く時の臭い
シルバーホワイトという絵具
シルバーホワイトとチタニウムホワイトを混ぜる
混色制限の無いウルトラマリンブルー
油絵具で紙に描く方法
油絵用の画用紙
紙に油絵具で描く
油絵専用画用紙アルシュオイルパッドについて
油絵の具でイラストを描く
油絵具を速く乾燥させるには
油絵の臭いを減らして描く
油彩筆の洗い方
グレーズの画用液について
スタンドオイルやベネチアテレピンについて
ブラックオイル(クサカベ)のレビュー
ストロングメディウム
高品位油絵具ヴェルネ 使用感
樹脂油絵具について
・画家
フェルメールブルー
印象派モネの技法
印象派ルノワールの技法
ハマスホイについて
「バルテュス 猫とアトリエ」を読んで
続「バルテュス 猫とアトリエ」を読んで - 技法面で気になった部分について -
・美術
画家は長生きなのか?
絵はお金のかからない趣味なのか?
画家の映画
5分で分かるざっくり西洋美術史
鉛筆の硬度Fとデッサンなどでの用途
下手も絵のうち について
心が哭くという事 芸術創作の動機
絵を描くときの眼の使い方
仕事しながらの創作について
美術館でのマナーについて
よく行く画材屋について
百均の絵具
チタニウムホワイトの特徴
ビスマスイエローの特徴
紙パレットの利点
空はなぜ青い
天然の軟毛筆について
筆の置きどころ
アートは必要ないか
アート(芸術)とは何なのか?を考える
美術の授業は必要なのか
コロナ禍の美術鑑賞
絵の飾り方
絵の行き着く場所
アナログ画材・アナログ絵具の良い点
デジタル画材の良い点
・ウェブ・IT
NTTドコモの新料金プランのahamo(アハモ)にしない理由
スマホアプリのデジタルデトックス
Twitterでサムネイル画像を真ん中に調整する方法
レスポンシブウェブサイトの作り方
スマホはサブブランドに脱出せよ
スマホゲーム(ソシャゲ)は高過ぎる
UQモバイルへの移行費用
simロック解除の方法
mnp(ナンバーポータビリティ)の方法
スマホ・携帯ショップでタブレット契約した時の何か騙され感のある話
スマホの料金が高いのでauからUQモバイルに変えた
買い切りアプリゲームについて
スマホ依存症・中毒にならない為に
photoshop for ipad を試してみた
マイナーなジャンルなブログの描き進め方
自分のサイトの表示速度を測る方法
i pad 電源がつかない時の対処法
パソコン配布27万円について
スマホ用VRゴーグル(簡易版)を買ってみた
ながらスマホについて
iphoneのメモ帳の活用
一般人はプログラミングを学習する必要があるのか?
人はAIに仕事を奪われるのか
Amazon web servide EC2 に FTP で接続できなくなってしまったので
リファラーのアクセスを制限する
Googleへのクローラ巡回のリクエストとその拒否
Google Earth Pro を試す
Google Earth Pro を試す 追補
プログラミングをはじめたきっかけ
プログラミング言語は何から始めるかについて
一般の人が最初に実用として、どのプログラミング言語を学んだほうが良いのか
Webデザインで風流な縦書きを
iPhoneの使いみち 私の場合
Java servlet をAWS Amazon EC2 にアップロードする流れ
スキューアモーフィズムとフラットデザイン
スマートフォン等のサイトデザイン
・生活
フリーランスは国民年金基金に加入した方が良い
クレジットカードで家計簿
温かい飲み物を買わない
しみ込みチョコパフについて
依存症の原因とは
生きる意味とは?について
ペットボトルは買うな
突然の訪問は少し怖い
風邪をひかない方法
サンシェードの日除けの効果
なぜ人は隅に座るか(電車や席など)
一人遊びの才能
あいさつする意味
好きな事を仕事にしたほうがいいと思う理由
クリエイターと消費税
楽に掃除する方法
持たない手ぶら生活
イノベーションはどこにある
伝記を読む意義

Name:ドラ焼き
今は油絵具でイラストを描いてます。webプログラミングもやってます。 このブログでは絵や興味ある事について書いてます。Twitterにて近作のイラストもアップしてます。アカウント:@dorayakiArt
アート作品はこちら ウェブギャラリー:dorayakiArt Gallery
👇このページの記事をシェアする