気合でなんとか

@ningensei848が頑張った記録

チームラボのオンラインスキルアップ課題 をやろう その2

前回までのあらすじ

ningensei848.hatenablog.com

 

 

 

今回からはHTML&CSS, PHPを書いてみようということで、やっていきます。

 

HTML

htmlとはHyperText Markup Languageの略でWebページを記述するためのマークアップ言語です。基本的にはタグを用いて記述し、<タグ名>を開始タグ、</タグ名>を終了タグといい、この間に書いたものがそのタグの内容となります。Ruby等でもファイルの行頭に「#coding: UTF-8」と書いたりしますが、あれのことをHTMLでは<!DOCTYPE THML>と書きます嘘です.コーディングの文字コード指定は<meta charset="UTF-8">とするべきでした。なにとぞ。

htmlについての文法はこれだけです。あとはタグそれぞれに使い方があり、それを参照しつつ書いていくことになると思います。リファレンス辞書を一冊持つのも一つの手ですが、質感がダイレクトにわかるオンラインリファレンスも良いと思います。

テキスト見本(h4)

テキスト見本(h5)
テキスト見本(h6)

 

CSS

CSSとは、Cascading Style Sheetsの略で、HTMLの要素をどのように表示するかを指定するものです。HTMLとは別に、HTMLが存在しているのと同じディレクトリに入れておくことで効果を発揮します(別途指定できるらしいけど)拡張子は.cssです。なんかかわいいと感じるのはぼくだけでしょうか…。<link rel="stylesheet" href="~">をhtml文書内部に書き込むことでcssによる処理をhtml文書に埋め込むことができます。

CSSの構文は、先頭で指定した要素全てに対して{}で囲まれた内容を適用するというものです。まったくもって単純かつ明快!すぐにできそうな気もします。(甘い考え)また、要素の指定にはタグ名、id名(先頭に#を付ける)、class名(先頭に.を付ける)などが使用できます。組み合わせでどんどん複雑怪奇になっていくんでしょうか…気になります。これに関してもまたオンラインリファレンスがあるのでそちらを参考にしましょう。しかし、いろいろなことが出来過ぎて、何をやったらいいのかわからないという典型的な初心者あるあるにハマりそうなところですねこれは……

PHP

PHPとは、再帰的頭字語である "PHP: Hypertext Preprocessor"を意味し、「PHPはHTMLのプリプロセッサである」とPHP自身を再帰的に説明している。 元々は「個人的なホームページ」を意味する英語の "Personal Home Page" に由来し、プログラムが大きく書き直されたバージョン3から現在の意味となった。

tということらしいです。再帰的接頭辞語ってなんじゃいという話ですが、リンク先を見てもらえればなんとなく意味が分かるかと思います。

PHPはサーバ側で動的にHTMLを生成するスクリプト言語です。これによって、送信されたデータによってページの内容を変えることなどができるようになります。
また、サーバで実行できるプログラムには他にもRuby, Perl, Pythonなど様々なものがあります。(!)

PHPはhtmlに組み込んで書き、「<!--?PHP」で開始し、「?-->」で閉じます。関数を使うときは変数名の先頭に$を付けるとか、細かなルールはありますが、例によってオンラインリファレンスを見た方がいいと思います。htmlやcssと異なり、条件分岐やfor文、配列、正規表現が簡単に使えることが強みです。どうやって使うのか、素人目にはわかりませんが……

どう使うの?どういう関係?

codecampさんの「超」初心者のためにPHPとフロントエンド言語の違いをサクッと解説という記事がとても分かりやすかった(というか先頭に出てきた)ので紹介します。まずhtmlでホームページの基本構造を作ってから、CSSで色を付けたりデザインして装飾、からのJavaScriptで動きを制御しする、というここまでが「フロントエンド」としてユーザが見ることになるホームページの表の顔ですね。初心者としてはまずここまで自分で作ってそうにか公開できるようにしたいところです。仕上げの作業として、「バックエンド」であるPHPくんがサーバーを介してさまざまな処理をしてくれると……。ここまで紹介した言語のうち、PHPだけがサーバー間の物理的障壁を飛び越えて内部的な作用をもたらすことができると…。すごいなぁ。PHP。ありがとうPHP

そしてなんとフロントエンドとバックエンドではエンジニアとしての就職が分けられてしまうらしいです。そこまで奥深いものなのか…さすがにちょっと怖くなってきた。ですが、どちらもできるに越したことはないので、できるだけ色々な言語を並行してやっていけるとあとあとつよいようです。頑張ろう。

RubyPythonとの共存?

CGIとして、webアプリなんかを作ったりするときに使われるようです。有名どころでは、ruby on Railsを使ってTwitterが作られたなんて話もあります(現在はJavaVMとのことだが)OPACを仕込んだり、行行列計算するアプリなんてのも作れるのかもしれません。可能性は無限。

まとめ

とりあえず書いてみて作ってみないと始まらない。さっきのサイトを参考にまずはhtmlで骨組みを作って、CSSで装飾して…というのを一度目的をもってやってみる必要があると思った。まずは自分のブログを作ってみる、というのも一つ手だと思う。文化祭を終えて、また暇になったらやってみようと思う。
ここまで読んでくれてありがとうございました。引き続きがんばります。

※ 今回の記事は、HTML編集という機能を使って編集してみました。細部の自由度が高まったけれどなかなか慣れない不思議な感じです。少しずつ慣れて使いこなせるようにしていきたいと思います。よろしく…。

次回

まだ