14日目^^
本日の進捗です。
ローカルサーバーにapache、phpを入れてドキュメントルートを設定して" Hello world "と表示させる。
参考サイトです
[Mac] apacheでローカルサーバーを構築する方法 | Memo on the Web
apacheの説明は先日したと思うので省きます。
・apacheを操作しよう
apacheを操作するためには、Terminal上でコマンドを打ちます。
使用するコマンドは ”sudo” です。
と打つと、
と表示されます。
パスは自分のPCにログインする時のパスです。ちなみにパスを打っても表示されないだけで入力はされています。
sudo - システム管理コマンドの説明 - Linux コマンド集 一覧表
"sudo"は、指定されたユーザーでコマンドを実行すると言う意味。
もっともーっと噛み砕いていうと、”一時的に別のユーザーになってコマンドを使用する”
ということなのですが、実際になれるわけではありません。
自分のルートではないファイルやフォルダを編集したり、閲覧したい時にその権利をもらうためのコマンド、あくまで権利ですかね。
では、上記例ではどういう意味になるかというと、" apachectl を他ユーザーの権限で実行する、というようになります。
実際にapachectlを実行できているかを調べるには
" http://localhost "と打ってブラウザを叩きます。
It works! とデカデカと出てきたらOKです。
次はapacheの設定を変更します。
基本的に apacheフォルダの中にある "/private/etc/apache2/httpd.conf " の内容の
一部分を変更すると設定を変えることが出来るようになります。
の前に。やらなくては行けない事があります。
まず、自分がローカルサーバーにupしたいファイルの編集が出来るかどうかをコマンド " ls -l "で確かめましょう。
コマンド" ls -l " でこのファイルの状態を調べてみると...
と表示されます。大事なのは" -rw-r--r-- " の部分です。
一番左のハイフン"-"がそれがフォルダなのかファイルなのかを表しています。
今回はhtmlファイルなので " - " となります。フォルダであれば " d " と出てきます。
このハイフンから右の9個はユーザーがファイルに対して持っている権限を示しています。順の3つが1セットに分けられていて、つまり3セットあるという事です。
それぞれ順に、u(所有者)、g(グループ)、p(その他)が表示されています。
- rw- r-- r--
こんな感じで分けると解りやすいでしょうか?
・ u(所有者) // r w - 、読み込みと書き込みが可能です。
・ g(グループ) // r - - 、のみは読み込みの可能です。
・ o(その他) // 上記に同じ。
つまり、このファイルの所有者は読み込みと書き込みが出来る、ということです。
( a というものもあるが、それは上記3つをまとめたものです。
読み込みと書き込みが出来てもそのファイルを実行出来なければ意味がないですよね。
ここで、" chmod "コマンドが出てきます。
chmodコマンドの使い方 | Memo on the Web
参照サイトです。
めちゃくちゃ説明が解りやすいですね。
つまり " chmod " というのはファイルやフォルダを編集、または読み込み、そしてそれを実行する権利を得る為のコマンドなんですね。
$ chmod "ファイル" ユーザー 演算子 権限 の順番で
"ファイル "に対して、”どのユーザー” に、”権限を付与するか削除するか”、”どのような権限を与えるか”、ということを変更する事が出来ます。
ユーザーには、u, g, o のどれかを。
演算子の部分には + , - . = を。
+ は権限を追加します。
− は権限を削除します。
= はあんまり使われないかもですが、権限を今の状態から変更する、
という意味です。
権限の部分には r , w , x を入れます。
r は読み込み権限
w は書き込み権限
x は実行権限
という意味です。
参考サイト
つまり上記の自分のファイルを見て、編集して、それを反映させたいのであれば
$chmod u+x という記入が正解になります。
こうすることで、 - rwx r-- r-- となります。
意味は、
ファイル(-)は
読み込み、書き込み、実行が可能で(rwx)
グループでは読み込みは出来るが、書き込みと実行は不可
その他ユーザーは読み込みは出来るが、書き込みと実行は不可
になります。
でもいちいち権限を与えるのに自分は書き込み権限で...グループ内は読み込み権限でけにして、他の人は見れないようにしよう、なんて複数回にわたって書くの面倒くさいですよね。
なので、数字にまとめてくれています。
これは8進数を使った表し方になります。
r = 4
w = 2
x = 1
- = 0 とします。
これを上記の rwx に当てはめてると、
r = 4 w = 2 x = 1 なので、
4 + 2 + 1 = "7" =rwx となります。
rwxは "7" という数字で表せる、とういうことです。
もう一つ例を出すと、-wx は
" - " が0、wが2、xが1なので、
-wxは"3"と表せます。
表を見ると全部で8通りの組み合わせがある事がわかります。
そしてその8通りを数字をかぶらせる事無く表しています。
$chmod 640 ファイル
とコマンドを打つと、ファイルは " - rw- r-- --- " となります。
今日のタイピング結果です。
ここら辺をずっとキープしてますね。明日にAをなんとか出したいです。
以上が本日の進捗となります。
(後ほど少し追記します)
13日目^^
すごい暖かい一日でした。花見したいなー。(酒が飲みたい)
今日は色々と行き詰まってしまいました...時間がもったない...
しっかり意味を理解しなくちゃわからないことが増えたのと、
自覚しているけど、調べ方がへたくそなんですね。
何が原因でわからないのかがわからないのでそれを解決する為にはやはり
知識を増やすことが一番の近道なんですかね?
はい、それでは今日の進捗です。
今日は
・CakePHPをCloud9で展開して理解を深める
です。
どちらもなかなか中途半端なところで終業時間を迎えてしまいそうなので
家帰ったらしっかりと調べます!
まずはCakePHPをCloud9で展開して理解を深めるです。
”せっかくcloud9があるんだからCakePHPもcloud9でやったらいいんじゃね?”
って思ったのが事の始まりでした...
先に今自分がわからないところを明記すると、
”Apacheの設定を変更する方法”です。だいぶ初期段階です。
とりあえず出来たのはCakePHPをダウンロードしてCloud9にアップロードしました。
とりあえず言葉の意味を記述します。
CakePHPとは?
“ Ruby on Ruils "の概念を多くを取り入れたフレームワーク。
Rubyとはまつもとひろゆき氏が作成した便利さと容易さを兼ね備えたオブジェクト指向スクリプト言語のこと。
2012年度から日本発のプログラム言語としては初めて国際機構( ISO )に登録された。
“ Ruby on Ruils “はそのRubyを使ったWebアプリケーションフレームワークで、五つのライブラリと一つのユーティリティライブラリから作成されている。
参考サイト
フレームワークとは、直訳すると枠組み、構造という意味だが、ソフトウェア開発では”開発環境の土台”という意味になる。
データベースの持続などの共通の処理を常時行えるようにして、コードを書く時の共通のルールを守りながら作業することで開発速度を早くすることが出来るというもの。
・利点
無駄なコードを書く手間が省ける
規約(ルール)にそってかくので保守性が高まる。
ベタ書きよりも統一感があるので大規模開発がしやすくなる。
・欠点
ルールを覚えるのが大変
フレームワーク自体の更新が止まってしまう可能性がある。
どのサイトでもごり押しされていたこの”Cakephp”の存在意義は
複数人で開発作業をする時に連携をとりながら効率的に開発をする事ができる!
というところでした。
参考サイト
cloud9に導入する。
まずCakeをダウンロードするところから。
http://qiita.com/entaku19890818/items/918bdeeac6a99b03c93b
こちらのサイトからダウンロードしました。
参照サイトとverがちょっと違う…
自分のは ver. cakephp-2.6.7
ですがダウンロードは出来ました。
apacheとは?
世界中で色々なWebサイトが存在しているが、それはWebサーバーソフトウェアによるもの。apache はその一つ。
apacheは”無料”なことと”どのOSでも使うことができる”ということ、という点からコミュニティが充実していて、ユーザ同士で情報が公表されていくのでそれに対して運営側が様々なシステムの追加や問題点の修正をすばやく行われています。
最後の段落の”Apacheの設定を変更”する、ここでただいま詰まっています...
解決法がわかり次第記載します。
awsとは
http://it.impressbm.co.jp/articles/-/12285
"Amazon Web Services”の略称。
クラウドサービスで最もメジャーな存在の一つ。
Webサービスやサイトを作る時に幅広く対応しており、日々サービスや新しい機能がリリースされ続けている。
開発環境を構築する役割を果たしてくれるもの。
これにより人的費用や開発にかかる時間の短縮などにも繋がった。
など、SEにとっては神ツールのようです。
インスタンスとは
コンピュータプログラムやデータ構造などを、メインメモリ上に展開して処理・実行出来るようにした仮想サーバーのことを指す。
プログラムを記述する際には、クラス定義に基づいてメモリ上にあるデータの集合体(オブジェクト)のことをインスタンスと呼ぶこともある。
http://docs.aws.amazon.com/ja_jp/AWSEC2/latest/UserGuide/launching-instance.html
awsにアカウントを作成します。
一年間無料枠というのがあるのでまずはそれに登録しようとしたのですが...
...デビットカードかクレジットカードが必要になってくるんですね。
僕はそんなもの持ってない...キャッシュカードで十分事足りる人生だったので...
と、言うわけで作成してまいります。
どのくらい時間かかるんだろう...
最後はタイピングです。
気付いてしまったんですがこれ-Aの中でもしたの方なんですね。
やばい。非常にまずい...
以上が本日の進捗です。
12日目^^
本日の進捗です。
今日はPHPの基礎をやっていました。
本当はもっと進めるつもりだったのですが...
・繰り返し命令は便利
・送信、受信で動く
・クッキー
・ファイルに保存
・セッション
・変数の型について
です。
このサイトの見出し達です。
ではまず、繰り返し命令は便利からです。
そもそもこの繰り返し文というのは、
”if文”と”while文”のことです。
While文
”~の間ずっと~する”
繰り返し変数に対して何かを指定するわけだが、PCは回数を制限しないとずっと繰り返してしまうので、回数を指定する。
例:$count=2;
while($count < 10 ) {
echo $count ;
$count++ ;
}
この例では、countが条件を満たすまでの過程を表示する文なので結果は ”2 3 4 5 6 7 8 9” となる
まとめ
変数の初期値設定
while (条件) {
条件1に合う時の命令 (trueの時)
変数に1を足す
}
for文
“~の間ずっと~する”
書き方が違うだけでwhile文と意味は変わらない。
例:for($count=3; $count<=8; $count++){
echo $count.”<br>”;
}
この例ではcountが3から8になるまでの結果を示せということなので結果は ”3 4 5 6 7 8” になる
”<br>”はphp文ではなくhtml文のタグなのでダブルクォーテションで囲む。countとの間に . を忘れない
まとめ
for(初期値 範囲 1増加) {
数値が範囲内の時、実行される
}
for文で説明した"<br>”をつけると縦に表示される。
"<br>”に限った話ではなく、htmlタグを中にいれると縦に表示される。タグの役割もそのまま果たす。
送信、受信で動く
methodをPOSTで書く。
送信編
phpの最大の特徴はユーザーの行動(書き込みやクリック)がページに反映すること、クライアント側からの送信とサーバーの受信で動く。
送信はhtmlのメールで使う”form”を使う
htmlとphpの2ファイルを使って送信することも可能だが、1ファイル形式で送信こともできる。
書き方
まず、html形式で<form>タグを使う。
例:<form action=“ファイル名” method=“post”>
<input type=“text” name=“data1” size=“10”>
<input type=“submit”value=“送信">
</form>
これが送信画面になる。
<frorm>タグはphpでも有効なタグなので1ファイルでまとめる時はphpに書く。
“ファイル名”は自分が文字を表示させたいファイル。
”name”はphpでデータを受け取る時のキーワードとなるので受信の時のものと間違えないようにする。
methodは”get”と”post”があるがここでは”post”を使う。
上記例で出来た送信画面の送信ボタンを押すと”action”に書かれたファイルに対してメッセを送ることが出来る。
受信編
書き方
送信編の対応した例を書く。
例:$data1=$_POST[‘data1’] ;
echo $data1 ;
“$_POST[‘data1’] ; “ がformで送られた情報を受け取るための記述、” $_POST ”は大文字で書かれた変数である。
これは予約語といい、phpで予め設定されている変数。スーパーグローバル変数といい、サーバーとクライアント間でデータをやり取りする際に使われる。
送信編で送られた<form>の内容が”$_POST”で受け取られechoによって画面に映し出される、という仕組み。
<form>では複数の情報を一度で送ることが出来る。
methodをGETで書く。
formのようにデータを入力して送るのではなく、すでにその画面上にあるデータなら、formを記入する必要がなく、違う書き方をする。
URLにデータを埋め込んで送信する方法である。
形式は簡単だが、直接送れるのは半角英数字と記号の一部のみ。
URLで送信する。
<a herf=“”>でリンクを付けられるが、この後を”?”で区切り、”名前=内容”をくっつけてデータを送信する。
例:<a href=“filename.php?name=AAA”>AAA</a>
これが送信用リンクである。
受信はGETでする。
上記例に関連させる。
例:name=$_GET[’name’] ;
echo $name ;
英数字以外の文字はエンコードにより、文字コードを対応させなければならない。
クッキー
クッキーとは、表示した、もしくは使ったデータをクライアント側のPCに記憶させておくファイルのこと。
書き方
phpの<html>タグよりも先に書く事。
<php?~?>内に記載する。
例;$word=“お酒飲みたい”
setcookie(“data",$word,time()+60*10);
上記例の ” time()+60*10 “というのは60*10という事で、つまり10分間cookieにデータを記憶させているという事。
次はクッキーファイルからデータを取り出す命令。
上記例と関連させるので結果として ” お酒飲みたい “ と表示される。
例:$word=$_COOKIE[“data”] ;
echo $word;
まとめ
書き込み setcookie(“名前”,内容,記憶する時間)
読み込み 変数=$_COOKIE [ “名前” ] ;
クッキー配列
クッキーは変数のように配列形式を使う事が出来る。
クッキーの名前の部分が配列の仕組みになっているので注意。ループと組み込むことで実力を発揮する。
例:$word_0=“ビール”
$word_1=“日本酒"
$word_2=“ワイン”
setcookie(“data[0]”,$word_0,time()+60*10);
setcookie(“data[1]”,$word_1,time()+60*10);
setcookie(“data[2]”,$word_,2time()+60*10);
読み出しの場合は [キー] を指定して個別に読み出せるが、 ”foreach” を使えば全ての配列の要素を一気に取り出す事が出来る。
実行結果は
0:ビール
1:日本酒
2:ワイン
となる。
ファイルに保存
ファイルに保存する。
クライアント側の記憶装置はクッキーであるが、サーバー側の記憶装置の代表はファイルである。
formで受け取ったデータをphpのスプリクトでファイルを作成しそこに書き込む、という事。
フォルダを作る事も可能で、書き込んだファイルからデータを取り出したり、書き換えたり追加したりなど、様々な事が出来る。
例えば、掲示板などのシステムはこのファイルを開き、新しい書き込みをファイルの中に記述し、上書きし続けている。
書き込み方。
次に出てくるスクリプトは” $word "に文章を代入し、何かしらのサブディレクトリ内のファイルに書き込むという命令である。ファイルのロックとは同時に2つアクセスがあった場合にファイルが壊れるのを防ぐために、一度に1人しか書き込めないようにするためである。
スプリクト記入方法
$word=“お酒飲みたい”;
$pointer=fopen(“記入したいファイルの指定”,”w”);
flock($pointer,$word);
flock($poi$nter,LOCK_UN);
fclose($pointer);
記入場所はどこでも良い。
fopenの説明。
fopenはUnixのコマンドに似ている。(個人的にはですが…)
$pointer=fopen()内の”w”がfopenに対応しているコマンドで、この場合は ” 書き込みのみでオープンする。内容をまず削除、ファイルがなければ作成 “ という意味である。
他にもコマンドがある。(全6種類)
ファイルを読み込む
書き込んだファイルを読み込んで表示する。
記入方法。上記例に関連付けする。
$pointer=fopen(“記入したファイルの指定”,”r”);
$line=fgets($pointer);
echo $line;
fclose($pointer);
fgetsは一行だけを取り出す命令である。モードが読み取りの” r “になっている。
セッション
セッションとは、例えば会員IDとパスワードを使ってログインする仕組み。
一度入力されたデータが保存されているシステムである。
SNSやポータブルサイトではログインが必要なサイトではほとんどがこのセッションを使っている。
クッキー・ファイル・セッションの比較をする。
ページを移動したり、ブラウザが終了してもデータが消えないようにする方法として下記の3つが上げられる。
・クッキー
クライアントのコンピュータにテキストファイルを 作り、そこにデータを書き込むもの。
・ファイル
サーバーにテキストファイルを作り、そこにデータ を書き込む。
・クライアント
IDを残し、サーバーにデータのファイルを作る。
クライアントのIDはクッキーを使うが、クッキーは意識する事無く作成できる。書き方はクッキーに似ている。
書き方
・セッション
$_SESSION[‘word’]=$word;
$word=$_SESSION[‘word’];
・クッキー
setcookie(“word”,$word,time()+60*10);
$word=$_COOKIE[“word”];
これにより、サーバーのどこかにwordのデータが保存される。保存場所は通常であれば ” /temp ”だが、ローカルでPHPを動かす場合はOSに保存先が違う。
同時にクライアント側にはIDがクッキーとして保存される。
このIDをもとにサーバー側のセッションファイルを読み出している。
セッションではクッキーの保存時間をtime()+60*10として設定するのに対して、セッションでは時間の設定がない。通常ではブラウザを終了するとセッションデータは消えてしまう。
”php.ini” での設定を変更することで、ブラウザ終了後もデータを残す事が出来るが、初期設定のデータではなくなってしまう。
php.iniでの設定は秒単位で設定できる。ちなみにこのような文。
“ session.cookie_lifetime=0 "
セッションスタート
セッションを開始する前に、開始を宣言する。
“ session_start “はPHPの一行目に宣言する。
でないとエラーになる。
例:<?php
session_start();
?>
開始があれば終了もある。
例:session_start();
session_unset();
session_destroy();
一行目:セッションデータを初期化、セッションを行う場合は必ず必要。
二行目:全てのセッション変数を解放
三行:セッションに登録されたデータを全て破棄する。
これらunsetやdestroyはログアウトなどの時に使用されている。
変数の型について
変数の「型」とはなにか
”$asd=3”のようにいきなり代入する前にまずは宣言をしなければならない。
その際に、まずこの変数に何を代入するのが決めなければならない。
それが型の宣言と呼ばれるもの。
型の種類は4種類
この変数の型は8種類であるがわかりやすい4種類を説明していく。
1、論理型 boolen trueかfalseにどちらか二種類
2、整数型 integer その名の通り整数
3、浮動型小数点 float 少数の事。
4、文字列型 string文字。
C言語等では変数を使用する前に、この区別を行わなければならないが、phpでは使用しない。
その他には配列型・オブジェクト型・リソース型・ヌルがあって配列もひとつの型である。
型の使いかた
これはほとんど無視してよい(?)が、使用する場面もある。
それは型キャストである。これは数を入れられたことにより自動的に決まる「型」を強制的に他の型に変えるということ。
$asd=(int)$total;
という使い方。intはinteger、整数型に変更される命令。
関数は$asd=count($total);と括弧が逆。
この ” int “を使うことにより小数点が消える、ということ。
最後はタイピングです。
-Aをキープしています。
あと一段階上げたいですね。
以上が本日の進捗となります。
11日目^^
ついに!cloud9を使ってHTMLやらなんやらをWebにup出来ました!
一回upし直したら出来るとかなんだたんだろう...
はい。今日の進捗です。
今日は
12.switch文 13.配列文 14.for文 15.while文 16.外部ファイル
http://www.pori2.net/js/kihon/16.html
phpの基礎を学ぼう
変数ってなに? 配列ってなに? 演算子って? 関数は? 条件分岐「IF」
をやりました。
http://www.flzphp.com/second.php?page_num=4
それぞれ参考サイトを貼りました。
感想としては、今のところjavascriptもphpも基本はほぼ一緒...
なので本日のphp説明に関しては10日目と本日のjavascript説明と
比較しながら見るとわかりやすいと思います。
リンクを貼るのでソースを見てください。
まずはjavascriptについてです。
switch文
switch文は条件分岐で答えが二通り(Yes or No)しかないif文とは違い一回の命令で何通りにも分岐できる。
例:本日の曜日を表示する。
var today = new Date();
var week = today.getDay();
↑曜日取得するための文
switch(week){
case 0: document.write(“Sunday”);break;
case 1: document.write(“Monday”);break;
case 2: document.write(“Tuesday”);break;
case 3: document.write(“Wednesday”);break;
case 4: document.write(“Thursday”);break;
case 5: document.write(“Friday”);break;
default: document.write(“Saturday”);break;
}
↑条件分岐するための文
曜日取得文の説明は後ほど。
変数 today に今日の日付データの一式を格納、
変数weekにtodayの中の「曜日」にあたるデータを代入している。
曜日に該当するデータは数字で表され、(日曜は0~土曜は6)その数字が case~に代入されると対応した文が表示される。
swich文の説明
switch ( 条件式 ) {
case 値1 : 処理1; break;
case 値2 : 処理2; break;
…
default : 処理3; break;
}
switch文の後に括弧があり、そこに条件となる変数等を指定する。switchによる条件分岐群は中括弧で囲む。
次に各条件を”case"の後ろに指定。上記例の場合は6つの条件に分けている。caseの後に空白を挟み、変数weekの値を記入する。
その後に” : "(コロン)で〆て、条件にあった場合の処理を記入する。
case内の条件の最後の”break”の意味はswitch文から”抜け出せ”という命令を送る文。必ず記入する。
最後の行の”default”は”その他条件”という意味。
上記例で言えば”0~5"どれでもなかった場合に実行される。
まとめ。
switch文は条件式により複数の処理に分岐する。
条件式の結果が case: の後に記入された値に合致すれば、それ以降の処理を実行する。
各caseの最後には、break; を入れてswitch分を抜け出す。
default:は、どの case の値にも合致しなかった場合に記入される。
上記例ではcase文、default文を一行で書いているが、複数業で書く事も可能。
例:switch(条件式){
case 分岐1:
式 ;
式 ;
break;
case 分岐2:
式 ;
・
・
・
default:
式 ;
式 ;
break;
}
配列
配列とは順番の付いた変数。
例:var yobi=new Array( ) ;
yobi[0] = “Sunday”;
yobi[1] = “Monday”;
yobi[2] = “Tuesday”;
yobi[3] = “Wednesday”;
yobi[4] = “Thursday”;
yobi[5] = “Friday”;
yobi[6] = “Saturday”
var today = new Date( );
var week = today.getDay( );
document.write(今日は+“”)
配列の書き方
まず配列yobiを、var yobi=new Array( )と書いて宣言する。
これにより、配列yobiは連番の付いた変数を持つ事が可能になる。
↑
var 配列名 = new Array()
配列を宣言する。配列名は任意。
次に配列yobiへ順番に値を代入する。配列の時には変数のあとに大括弧[]を記入し、その中に配列の何番目かを記入する。
それから、switch文と同じ曜日を求めるスクリプトを記入する。
最後に曜日の書き出し、配列yobiの何番目を書き出すかを指定するのに大括弧 [ ] を使用する。
その配列の中には変数weekが入っており、今日が金曜なので”5”が代入され Friday が表示される。
簡単な配列の書き方
var yobi = new Array(“日曜”,”月曜”,”火曜”,…”,土曜”);
new Array( )の括弧内に順番に値を入れる。値と値の間は,( カンマ )で区切る。
括弧内で改行も出来る。
var yobi = new Array(
“日曜”,
“月曜”,
“火曜”,
・
・
“土曜” );
最後にカンマを付けてしまったり、値と値の間以外で改行したりするとエラーになるので注意。
for文
for文とは繰り返し文のこと。
while文というものもある。
for文は繰り返し回数が決まっているものに対して使う。
例:for (var i=1 ; i<=10 ; i++){
document.write(“お酒飲みたい。<br>”);
}
繰り返し文になるのは{ }内の内容。
forの後の()内に繰り返しの方法を指定し、その中には3つの区分がある。
(var i=1 ; i<=10 ; i++)
最初の区分には” i “に1が代入されている。
繰り返しの指定では” i “を用いるのが通常だが、一応任意ではある。そして” ; “で区切る。
次の区分では繰り返しの条件を指定する。
上記の例では、iの値が10以下の場合に繰り返すように指定されている。そして” ; “で区切る。
最後は” i “の値の増減を決めている。
通常は上記のように” i++ “のようにする。
この演算子により、iの値が()内で10になるまで繰り返す、という事を指定している。
まとめ。
for ( var i = 初期値 ; 繰り返し条件 ; i++){ 処理 }
条件を満たしている間は処理を繰り返す。
*配列との組み合わせ*
例:var rank = 1;
var mnt = new Array(
“京都”,
“秋田”,
”広島”,
”高知”,
“福岡"
);
for(var i=0 ; i<=4 ; i++ ){
document.write(‘<tr>')
document.write(‘<td>'+rank+’位</td>’);
document.write(‘<td>’+mnt[ i ]+’</td>’);
document.write(‘</tr>')
rank++;
}
rankという変数を使って順位の部分を書き出しています。 for文の最後にrank++を入れて、一回処理されるごとに1ずつ増やしているわけです。 わざわざ変数rankを指定しなくてもiを使えばいいのですが、 サイトの流れに添ってやっているため…
coutinueとbreak
繰り返し文では、繰り返し処理から抜けるbreakと、繰り返し処理の先頭に戻るcontinueというものがある。
例:for( var i=1 ; i<=10 ; i++){
if(i==3)continue;
if(i==7)break;
document.write(i+”回目の繰り返しである<br>”);
}
この結果を先に言うと、3回目が抜け落ちている。
これは”continue”の命令である。 continue は"指定された処理を無視して次の処理を行いなさい”という意味。
さらにfor文では i が10になるまで、という命令が入っているのにも関わらず、実際は6までしか表示されていない。
これはbreakの命令で、iが7になった時に"for文から抜け出せ”という命令が実行されているからである。
break
繰り返し文から抜け出せという命令をする
continue
指定した処理をスルーして、繰り返し文の先頭に戻れ、という命令をする。
while文
繰り返しを何回することで条件を満たすのかわからない場合に使う。
例:「1+2+3+・・・」でいくつ足すと合計が4桁になるかを調べる。
var num=0;
var goukei=0;
while( goukei < 1000){
num++;
goukei = goukei + num ;
}
document.write(num);
while文の書き方
2つの変数の宣言をする。numには連番を、goukeiにはnumを加えた合計を代入する。
次にwhile文が登場する。whileの後の括弧()内に条件を記入する。
上記例の場合だとgoukeiが1000より少なければ、中括弧内の処理を繰り返すことになる。
まとめ。
while ( 繰り返しの条件 ){ 条件 }
条件を満たしている間、中括弧内の処理を繰り返す。
中括弧内の処理を見てみると、まず最初にnumの値に1つ加える。そしてgoukeiに加える。
そして4桁になった時点でnumの値が表示される。
外部ファイル
ちょっと前にやりましたね。
Javascriptを外部ファイルとして本体HTMLに取り付ける。
外部ファイルにソースを記入することで色々なページから参照することができるので、よく使う関数などは書き込んでおくと後々楽。
さらに<script>~</scuript>を記入する必要もなくなる。
やり方。
JsavaScriptの拡張子を ” . js ”にする。
HTMLの<head> ~</head>内に
<script type=“text/javascript” src=“JSファイルのパス”></script>
を記入するだけ。
以上がjavascriptでの進捗でした。
=======================================
続いてphpです。
本当にjavascriptの内容に近かったので、自分なりに大事だなと思った
ところをまとめています。
過去に少しだけ触った事があるが、おさらいも兼ねて最初から。
Hypertext Preprocessorの略
記入方法
<?php
echo=“お酒飲みたい”;
>
・形式はそのままに””内に文章を書き込むのが基本。
・phpはbody内に限らず様々な所に記入できる。
・head内やhtmlタグ外にも記入可能。
・改行は” ; “で出来る。
・基本的にはだいたいの記述は小文字で行うが、大文字でも出来る。ただし、必ず大文字を使わなくてはならない場面もあるので注意する。
・phpの記述内に全角スペースを入れてはならない。
全角が使えるのは ”” と ‘’ 内のみ。
半角スペースなら入れても良い。
・クォーテーションの違い
「 ”” 」ダブルクォーテーションと「 '' 」シングルクォーテーションは一見同じ使い方ではあるがその役割は微妙に違う。これは後ほど記述する。
・コメントの書き方
一行であれば “// “の後に、
複数文であれば“/*~*/“でくくる。
例1:<?php
echo”お酒飲みたい”; //日本酒がいい
こうすると”//日本酒がいい”はページに表示されない。
例2:<?php
echo”お酒飲みたい” /*日本酒もいいけど
久しぶりにワインも…*/
こうすると”日本酒もいいけど久しぶりにワインも…”
はページに表示されない。
phpにおける変数記入方法
$varが変数、phpでは変数には必ず$をつける。
例:<?php
$var=“お酒飲みたい”;
echo $var;
?>
これで”お酒飲みたい”が表示される。
数字の時は ” ” が必要ない。
配列
変数に [ ] を付けてその中に番号を入れ、
echo $var [ ] ; に表示させる。
echo $var [ ] ; で番号を指定する指定された変数が表示される。
変数のどれにも [ ] 内に番号を指定しなかった場合は
自動的に上から0.1.2と番号が振り分けられる。
*配数は0からカウントされている。これを連想番号という。
数字ではなくとも文字を変数にしてもよい。
演算子とは?
・算術演算子:四則計算
・比較演算子:大きいか小さいかの判断
・論理演算子:二つの内両方か片方か
・代入演算子:変数に代入
・文字列演算子:文字を繋ぐ
・複合演算子:四則計算の複合形
など。
算術演算子
ループ(制御構造)で ”$a++”は大事 。
比較演算子
これはif文でよく使われる。
論理演算子
“=“は代入、”==“は同じという意味
複合演算子
関数とは?
関数には最初からプログラムとして用意されているものと、
自分で作れるものがある。
はじめからある関数
例:<?php
$time = (“Y年n月j日h時i分s秒”)
echo $time;
?>
実行結果はファイルを開いたその年の、その月の、その日の、その時間の、その分の、その秒が表示される。
フォーマットに使う文字はだいたいこのくらいある。
自分で作る関数
functionが関数を定義する言葉。
例:<?php
function tax($nedan) {
$zeikomi = $nedan * 1.08;
return $zeikomi
}
echo tax(500);
?>
これは500円のものを買った時の消費税を表す。
まず、”function tax($nedan)”でtaxという値段を定義する。
”$zeikomi = $nedan * 1.08;”で tax の中の値段に 1.08 かけた数字が $zeikomi であるということの定義。
"return $zeikomi;”で、この関数を使った時に$zeikomiの関数を返す。
“echo tax(500);”で、定義した関数を使い、500の税込を表示する。
まとめ
function 関数の名前(入る文字や数字){
計算内容
return 出てくる言葉や文字
}
条件分岐 if文
if文は指定された条件に対して結果が合っていれば
それが表示され、あっていなかったら次の結果が表示させるスプリクト
例:$word=“ビール”;
if($word==“ビール”) {
$material=“麦芽”;
} else {
$material=“??";
}
echo $koe;
変数wordをビール以外のものにすれば??が表示される。
条件を増やしても出来る。
例:$word=“ワイン”;
if($word==“ビール”){
$material=“麦芽”;
}else if($word==“日本酒”) {
$material=“米”;
}else($word==“ワイン”) {
$material=“ぶどう”;
}
echo $word;
答えはぶどうとなる。
else if は何回でも加えられるのでたくさんの選択肢を用意できる。
まとめ
if(条件1) {
条件1に合う時の命令(trueの時)
} else if (条件2) {
条件2に合う時の命令(trueの時)
} else {
条件1,2共に合わない時に表示される
}
http://www.flzphp.com/second.php?page_num=4
最後はタイピング
ついに!A行きました!!
永かった...
以上が本日の進捗となります。
10日目^^
無料のドメイン借りるのにも色々あるんですね...
ファイルをアップロードしようとした時に対応しているものとしてないものがあるとか、会社によって対応しているものが違うとか知らないよ...って感じでした。
あきらめてcloud9を使います...英語わかんないけど...
はい。本日の進捗です。
今日はJavaScriptを使っていました。
僕はいつもJabaScriptを触る時には
こちらのサイトにいつもお世話になっています。
用語とかであればwikiとかで済ませてしまいますが、流れを掴むのであればこちらのサイトはめちゃくちゃわかりやすいです。
その中でも
・定数
・関数
・グローバル変数とローカル変数
・引数
・if文その1
・if文その2
をやっていました。
これは今日僕がやったjavascriptのファイルです。
これから記載することが出てきます。
まずは定数からです
変数と違い、一度指定すると後の書き換えが出来ない。
*JavaScriptの定数は実験段階でブラウザによって実装に違いがある。(ブラウザによっては結果が変わってしまう場合がある。)
宣言の方法はconstを使う。
定数名は任意のもので良い。
ただし全て大文字で書くというルールがある。
例1:const AAA =1;
document.write(AAA+"<br>”);
この場合結果は1となる
例2:AAA=2;
document.write(AAA);
この場合の結果は例1でAAA=”1”と定数を宣言しているにも関わらず、ブラウザによっては2になることもある。
ちなみに僕のは変わりませんでした。
次は関数です。
function 関数(引数){処理}
functionを使って関数を定義できる。
関数名は任意で付けることが出来るが先頭の文字は小文字にしなくてはならない。
中括弧{}で囲った中に一連の命令を記述する。
*functionと関数の間には半角スペースを入れる
関数の呼び出し
関数を呼び出すには、scriptタグの中か、イベントを使って、関数名(引数)と記述する。
引数に関しては下記します。
これで
のようなボタンが出てきます。
クリックすると
というアラートダイアルが出てきます。
次はグローバル変数とローカル変数についてです。
変数の宣言を関数の外、中でした場合には変数の
スコープ(有効範囲)に違いが出てくる
関数の外で変数を宣言した場合、その変数はプログラム全体で共有できるようになる。
・ローカル変数
関数の中で変数を宣言した場合、その変数は関数内でしか使えない。
関数の外、他の変数で使おうとするとエラーになる。
引数について
引数(ひきすう)は、数学における関数やコンピュータプログラムにおける手続きにおいて、その外部と値をやりとりするための特別な変数、あるいはその変数の値のことである。 *wiki参照
引数を使うと関数に様々な値を渡して柔軟に活用する事が出来る。
例:function sqr(a){
return a+”の二乗は”+a*a+”です。”;
}
document.write(sqr(7)+”<br>”);
returnというのは値(今回はaという数字に代入された7)を呼び出し特定の形式に当てはめてくれる命令分。
これで”7の二乗は49です”という結果が表示される。
document.write(sqr(11))+"<br>”);
としたときには、”11の二乗は121です”という結果になる。
複数の引数を持つ関数
因数は複数指定も出来る。
例:function sample(b,c){
var str =“幅” + b + ”m、高さ” + c + "mの長方 形の面積は”;
return str + b*c+”平方メートルです。”}
document.write(sample(4,5));
とした時に結果が
”幅4m、高さ5mの長方形の面積は20平方メートルです。”となる。
引数を区切る時はカンマ(,)で区切る。
if文その1
if分はこのようにして使う
・if(条件式){処理}
条件に合致していれば、{}内の処理を行う
条件式には比較演算子と呼ばれるものがある。
代表例:
演算子 意味
== 式が正しい
> 左の値が大きい
< 右の値が大きい
!= 式が等しくない
>= 左が同等以上
<= 右が同等以上
等しい場合には==とする。
*一つだけだと代入の意味になるため
等しくないのであれば!を入れる
例:var num1=6;
var num2=5;
var num3=num1*num2;
if(num3<50){document.write(“50より小さい”);}
if(num3==50){document.write(“50である”);}
if(num3>50){document.write(“50より大きい”);}
num3は30なので、あっているのは一番上の条件のみ。
それ以外は{}内の処理が行われない。
if文その2
その1とは違い、条件にあっているかどうかで別々の処理が行われる方法を記載する。
これはHTMLの<body>~</body>内に記述する。
例:var n =100;
if(n<99){
document.write(“99より小さい”);
}else{
document.write(“99より大きい”);
}
これの結果はif文は間違っているものなのでelse文が実行される。
この構文を”if~else文”と呼ぶ
つまり、
if(条件式){処理1}else{処理2}
条件式に合致した場合、処理1を行う
一致しなかった場合は処理2を行う
if分の重ね書き
例:var m=5;
if(m==3){
document.write(“nは3である”);
}else
{
if(m==4){
document.write(“mは4である”);
}else{
document.write(“mは3,4ではない”);
}
}
これは最初のif文が間違っているのでelse文内のif分を読みに行っている。
しかしelse文ないのif文も間違っているためにelse文内のelse文を読みに行っている。
結果、(”mは3,4ではない”)が表示される。
これの正しい書き方は
if(m==3){
document.write(“nは3である”);
}else if(m==4){
document.write(“mは4である”);
}else{
document.write(“mは3,4ではない”);
}
となる。
最後にタイピングの結果です。
最近伸びが悪いような気がしてます...
とりあえず-Aには乗せたいですね。
以上が本日の進捗です。
九日目。
昼間はカツカレーを食べました。
大盛りを食べたのですが、自分が思ってた2倍は量が多くてそれでもなんとか食べきったのに、隣に座って"飯を残すやつは嫌いだ"と豪語して並盛りを頼んだ某k田氏が食べれそうにない自分のカツを3枚も僕の皿に載せた時の顔は一生忘れません。
はい。では今日の進捗です。
今日は
・自分がいまいち理解していないだろうと指摘された単語
1、静的ページ
2、動的ページ
3、HTTP(プロトコル)
4、HTML
のちゃんとした言葉の意味、目的を自分で考えて(一部引用ですが...)まとめる。
・JavaScriptに対しての理解を深める
をやりました。
他少しcloud9を使ったりPHPを編集したのですがまだ形には出来ていないです。
最初はそれぞれの単語の意味の説明からです。
静的ページとは?
更新されない限りは内容が変わらないページの事。
HTMLなどのデータがそのまま応答のデータとして送信せれる方式のWebページのこと。
英語ではStatic Pageと呼ばれる。
内容を変更する為にはHTMLとCSSを編集、さらにそのファイルをサーバーにup以前のファイルを上書きする。
動的ページとは?
その場で作られるページの事。
ユーザーからリクエストがあってから初めてページを作り、それを表示するもの。
英語ではDynamic Pageと呼ばれる。
例をあげると、
2、googleのサーバーが検索結果ページを作成。
3、ページ作りが完成したらブラウザに表示させる。
つまり、何かをgoogleやyahoo!で検索した時に出る検索結果のページはまさしく
動的ページということですね。
クライアントのリクエストに対してWebサーバーがその場でリクエストされた内容のページを作成、レスポンスするという流れになっています。
昔は動的ページを作る為には環境設定および様々な言語に対しての知識が必要でしたが、
最近では個人でもCMSが出回ったために動的ページを簡単に作れるようになりました。
CMS…
コンテンツ・マネージメント・システムの略称。
Webコンテンツを構成するテキストや画像、レイアウト情報などを一元的に保存・管理し、サイトを構築、編集したりするソフトウェア。
デジタルコンテンツの管理を行うシステムの総称という言われ方もする。
具体的には、HTMLやCSSなどでレイアウトや装飾や記述、ページ間のリンクを設定するなどをしなくてはならないが、これらの異なる種類の要素を分離してそれぞれデータベースやファイルに保存、自動的にサイト構築をソフトウェアで行うようにしたもの。
CMSを導入すれば、文章や画像を作成する人はHTMLを習得して記述する必要がなくなりデザイナーやコーダーは文字や画像が変更される、そして新たなページが追加される度にページの更新をする必要がなくなる。
それぞれの違い
静的ページではWebページがhtmlとして存在するので、リクエストされたページ(html)をブラウザにレスポンス(表示)するだけなので実行するまでが早いが、
動的ページはWebサーバ上でプログラムが作動するので、プログラムを実行するためのCPUに負荷がかかり静的ページよりは表示するのが遅い
さらにこの二つのページには決定的な違いがある
静的コンテンツはWebページHTMLとして存在しており、そのホームページからたどることの出来る全てのデータが検索エンジンに蓄積する。
対して、動的ページはWebページ中に表示用として存在する動的コンテンツのURLは蓄積の対象になるがそれ以外に表示パターンは検索エンジンの巡回の対象とならない。
作成したWebページを検索エンジンの検索結果に表示させたい場合は
・ホームページをGoogleに登録する
・メタタグを最適化する
・ソーシャルメディアのプロフィールにホームページをリンクさせる
などの努力を自分でする事によりなるべく自分のWebページが検索結果の先頭にくるように努力する必要がある。
HTTPとは?
”Hyper Text Transfer Protocol”の略称
WWW ”World Wide Web”上でWebサーバーとクライアント間でHTMLで書かれた文章などをやりとりする際に使われるプロトコル(通信手順)を意味する。
手順、手続きなどの意味を持つ英単語で、通信におけるプロトコルとは、複数の主体が滞りなく信号やデータ、情報をやりとりできるように決められた手順の集合体のこと。
PCや通信機器がデータを送受信する際にそれぞれに対応したプロトコルでないと通信する事が出来ない。
簡単なイメージいうとHTMLの文字コードのエンコードが対応したものでないと文字化けしてしまい読めないのということに近いですが、通信が出来ないと言う事は画面にも表示できないですね。
PC通信ではプロトコルの役割を複数の階層(段階)に分けて考えている。
複数の階層にする事により、上位プロトコルは自分のすぐ下の(ディレクトリに属する)下位プロトコルのインターフェイス(使い方)を知っていればそれより更に下のディレクトリに属するプロトコルの事を気にせずに通信を行える。
要約すると、どのような手段、手順を行うかを指定するソフトウェアのこと。
基本的にはテキストデータを使い、ブラウザなどのクライアントがWebサーバに対して特定のコマンドを送るとそれに応じた結果がサーバから送られてくる。
送られてきたHTML、JPEG(静止画像データの一つ.jpg or .jpegで拡張子)といったデータを人間が見やすいようにまとめるのがWebブラウザの仕事。
ブラウザの性能によってはテキストしか表示できないWebブラウザもあるので必ずしも全てのWebブラウザで同じ見た目になるとは限らない。
HTTPの特徴として、ステートレス(1回コマンドを送ると一回結果が送られてくるという意)であるということ。
メリットはプログラムがシンプルであるということ。
デメリットは複数回のコマンドのやりとりを追跡できないということ。
またHTTPファイルはデータが暗号化されないため、通信経路のどこかで内容を知られる危険性がある。
なので第三者に知られたくない情報のやり取りをする場合には別途暗号化を行うか、暗号化されたHTTPSという通信手順を使う必要がある。
HTMLとは?
Hyper Text Markup Languageの略
Webページを作るための最も基本的なマークアップ言語の一つ。
テキストファイルに様々なタグを使うことで文字や画像を表示させることが可能な命令文の集合体文書。
もう何度も使っていますが使えるだけでは本当に意味を理解したことにはなりませんね。
ハイパーテキストリンクとは?
普通のテキストとは違い文書中の指定箇所にリンクを貼ることができ、他のページに移動することが出来る。
マークアップとは?
印を付ける、という意味だが、HTMLにおいてはソースにタグを付けていることからその名前がついた。
というわけで、これらの意味を調べていた訳ですがまとめると、
静的ページ・・内容が固定されたページ
動的ページ・・内容がリクエストによって変化するページ
HTTP・・クライアントとWebサーバーが通信しあう為の手段を指定するソフトウェア
HTML・・作成者の構成により文章、画像、デザインなどを幅広く指定出来るテキストファイル
ということです!
JavaScriptに対して理解を深める。
先日やったところも復習を兼ねてやっていました。
HTML、CSS、PHP、JavaScript と様々な言語を扱うようになってきたのでだんだん
どれがどういう使われ方、書き方なのかを忘れないように定期的にやっていきたいです。
実際に簡単な変数を使ってルールや使い方を確認していました。
僕が作ったHTMLです。Jaba
これのソースがこちらです。
本来なら画像ではなくてページで参照したいのですが...
これも昨日言っていた事なのに、出来なかったというのは時間の使い方を間違えたなぁと思うところです。
前回やっていなかった所の説明です。
まず43行目から51行目ですね。
変数に代入と宣言を同時にする事が出来るというのは前回やりましたが、
文字と数字を複合させて表示するのはやっていなかったと思います。
これは50行目を見れば一発なのですが、
document.write(c+month+w+days)
この式の+というのは変数と変数を繋ぐためのもので
"1+2=3"のような算数的"+"ではありません。
なので変数に指定された内容を代入した時に
"3月22日" という今日の日付が出てきます!
続いては53行目から59行目ですね。
まず55行目からです。
これは変数の中身を変えてしまうソースです。
ここで登場する"A"という変数は25行目で宣言されているものです。
"A=100"となっています。
document.write(A+"<br>");のソースを書いた後、
A=A+50 という数学的にはあり得ない数式を書きます。
ですがもちろんこれはあくまでJavaScript内での話です
A=A+50 は、Aを「A+50」の変数に変更しろ!という命令を出しています。
なのでこのソースは"150"と答えを出します。
続いて57行目のA=A++の意味についてです。
このA=A++はAを「A+1」の変数に変更しろ!という命令を出しています。
つまりA=A+1の式と一緒ですね。ですが注意点が一つ。
55行目でAを150に変えてしまっているのでここで出される答えは
"151"となります。
この変数を元に戻すソースもありますがそれはまた後日記載します。
では最後にタイピング結果です。
ミスがの減りが安定しています。
スピードを早くするためにはタイピングを正しい指で正しく入力するのが
一番早道だそうです。今まで我流だったので...
以上が本日の進捗になります。
参考サイト
http://juen-cs.dl.juen.ac.jp/html/www/005/
http://abhp.net/hp/HP_JS_002000.html
http://www.pori2.net/js/kihon/6.html
http://www.htmq.com/html/script.shtml
http://www.ajaxtower.jp/js/num/index2.html
http://www.ocn.ne.jp/support/words/ghi/HTTP.html
https://www.nic.ad.jp/ja/basics/terms/http.html
http://e-words.jp/w/%E3%83%97%E3%83%AD%E3%83%88%E3%82%B3%E3%83%AB.html
八日目。
花粉症がまじでつらいですね...
最近はましになったと思ったのですが...
はい。では今日の進捗です。
今日は
・cloud9とは
・PHPとは
・cloud9でPHPを使う
です。
まずはcloud9とはです。
cloud9とは、
アプリケーションの開発やデータベースなどをクラウド環境で
利用出来るサービス。IDE(統合開発環境)としての機能が充実している。
様々な開発テンプレートが用意してあるので、cloud9が対応している特定の開発環境に対しては準備が必要ない。
開発環境を準備しなくてもいいというのは仕事をする準備を簡略化出来るということなので、かなりメリットであるようです。
一方デメリットとしては日本語には対応していない。対応していない…
そしてブラウザ上での作業の為、PC環境によっては重くなったりオフライン環境下では使うことが出来ない。
日本語に対応してないというのは僕個人には死ねって言われているのと同義語です...
今でさえわからない時間足りないのに、さらに英語力を求められるということは正直めちゃくちゃ辛いです...覚えますが!
PHPとは?
PHPとはウェブサイトを作る事に特化したプログラム言語の一つ。
HTMLとの違いは、HTML作成者側でしか文字を送信する事が出来ないが、PHPなら閲覧者側も画面に反映する事が出来る。それを動的システムという。
身近なところで言えば掲示板、コメント欄など。
PHPはサーバーサイドプログラムである。
サーバーサイドプログラムとは、Webサーバー上で動くプログラムのこと。
ちなみにJavaScriptはブラウザ上で動くもの。
PHPを使って何が出来るか?
フラッシュを作成したりするわけではなく、何かをクリックしたり、フォームで何かを送信した時に新たに画面を表示させたりできます。上記してありますが掲示板、ネットオークションなどのサイトも作成できます。
続いてcloud9でPHPを使う、です。
正直cloud9がわからずであまり進捗としてあげられませんが
形としてはこのようなものです。
まずHTMLファイルと違うことは
<?php ?>
でタグ付けするという事です。
タグ付けされた内容についてはecho""で「表示する
」という意味になります。
上の画像でいうと<?php echo"お酒飲みたい"; ?>で
「お酒飲みたい」という文章が表示されます。
その下の<?php $time=date(y/m/d); echo $time; ?>
という部分について。
これには関数が使われています。どこにかというと”date”の部分です。
( )内はフォーマットと呼ばれ、関数がかけられる部分になります。
今回の(y/m/d)というのは時刻を表しています。
yというのは二桁の西暦年を表しています。(16年)
mというのは二桁を含む月を表します。(03月)
dというのは二桁を含む日を表しています。(22日)
$time=date(y/m/d)なので、echo $time;によって表示させられるので
"16/03/22"
と表示されます。
もっとたくさんあるので後日追記します。
最後に本日のタイピング結果です。
取れそうでAが取れないです...あと少し...
以上が本日の進捗です。
最後に。
知識が増えたことで昔の知識がまた抜け出してるのが判明したのでさらに復習量を増やさないと進歩がないですね...
それから日本語力のなさも判明しました
日本語力なくて英語力ないってそれはもう人間じゃない気がしてきまs(ry