カテゴリー別アーカイブ: その他

2015年11月13日開講教室 修了生の皆様へ

修了式お疲れ様でした。

お仕事が決まった方も、これから就職される方も、明日からは開講前とも在学中とも違う日々が始まります。
けれど11月の中頃より丸四カ月間。様々な技術や知識を身に付けられたと思います。

それまで出来なかったことが、一つ一つ出来る様になったこと。
その感覚を忘れずに、自信をもって、どんどん色んなことに挑戦してみてください。

月並みではありますが、修了おめでとうございます。
皆さまより良いお仕事に就けますよう、心より応援しております。

2016年3月11日 鈴木,苅部

2月29日(月) Webサイト制作演習①

PHPステップアップ①~ヒアドキュメント~

PHP Labo ヒアドキュメント
PHPの中で長文のHTMLを出力したい時に使われる。
何度もechoするより効率がいい上、変数も自動で出力してくれるため、使い勝手が良い。

終了時の文字列を「<<<」付きで宣言し、もう一度その文字列が宣言されるまでの間に書かれた文章が全て出力される。指定文字列は、アルファベットで始まっていればなんでも良いが、「EOM(End Of Messageの略)」や「EOD(End Of Document)」、「EOF(END OF File)」等が慣例的に使われることが多い。
間で使われる変数も出力する。また、HTMLタグも出力できる。

$name = "鈴木";
//ここ↓で宣言した文字を
echo <<<EOM 
{$name}様こんにちは。<br>
ようこそいらっしゃいました。<br>
よろしくお願いします。
EOM; //←もう一回使うまでの間を出力

文章がそのまま出力されるので、重宝する。

また、変数に代入する事も出来る。

$name = "鈴木";

$message = <<<EOM
{$name}様こんにちは。<br>
ようこそいらっしゃいました。<br>
よろしくお願いします。
EOM;

echo $message;

メール送信のメッセージなど、関数の括弧内に入れなければいけない時に重宝する。
また、変数を使う時にはそのままでもよいが、ヒアドキュメント内で省略される{飾り括弧}で囲ってあげるとより分かりやすい。

ただし注意点がある。

	$name = "鈴木";

		echo <<<EOM
			{$name}様こんにちは。<br>
			ようこそいらっしゃいました。<br>
			よろしくお願いします。
		EOM;//これだけでエラーになる

上記の様に、EOM;の閉じの前にインデントなどでタブやスペースなどが入っているとエラーが出てしまう。また、文章もtab入りで表示されてしまうので、インデント抜きで使ってあげよう。

サイト制作ステップアップ①~仕様書~

仕事でWebサイトを制作する時には、まず仕様書を作ってあげる必要がある。
仕様とは、「何を作るのか」をまとめたもの。
もちろん作るものはWebサイトなのだが、「どんな」サイトを作るのか、大枠を作っておく必要がある。
基本的にはディレクターが、クライアントとの対話「ヒアリング」を行って、「何を作るのか」を明確にしていき、デザイナー・コーダー・プログラマーの手によってイメージを可視化していく。

  • サイトの目的・コンセプト(最重要)
  • 目的を果たす為に必要なページ・コンテンツ(利用規約・ガイドラインなど)
  • 副次的に必要になるコンテンツ
  • 使用ソフト等の検討(WordPressなどのCMSを使うのかなど)
  • 何ページ必要になるのか(コンテンツをどれくらいのページに分けるのか。どこにリンクを飛ばすのか。サイトマップ)
  • デザインイメージ
  • ターゲット層
  • 必要なプログラム(メールフォームなど)
  • サイトタイトル・キャッチコピー含むテキスト・画像など(だれが・どうやって用意するのか)
  • etc……

考える事はいくらでも出てくるが、基本的には一番目に挙げた「サイトの目的とコンセプト」に沿い、他の項を埋めていく。クライアントだけでなく、専門のチームメンバーに「必要な情報」を聞き、クライアントに対応してもらうことで、後々困る事は少なくなる。
また、「ヒアリング」といっても聞くだけではなく、「サイトの目的やコンセプト」からブレていないか、予算内・納期内に可能かなどを常に意識し、軌道修正を図る。
面倒そうであっても、フィックスするまで何度でもヒアリングを重ね、「作るもの」を明確にした上で作業に入っていく事が、結果的に完成までの一番の近道になる。
仕様書作りはディレクターの仕事ではあるものの、デザイナーを中心に、制作サイドもコンセプトをよく理解したうえで制作していくとより作りやすい。
コンセプトを意識した“伝わる”Webサイトづくり
仕様書作りに直接関係する記事ではありませんが、現職のWebディレクターさんがコンセプトの大切さをタイムリーに説いくれていたので紹介です

ファビコンの設定

グループワークもそろそろ佳境です。
完成が近づいてきて、なんとなく皆気になっていそうなのが「ファビコン」の設定です。
今回は講義で紹介し損ねたファビコンの設定方法を紹介します。

ファビコンって何?

ファビコンはタブの左側(titleの横)に出ている小さいアイコンの事。
デフォルトだと味気ない事もあり、多くのサイトで設定されています。

設定方法は、

  1. 画像を用意
  2. .icoファイルに変換
  3. headタグ内に書き込む

これだけです。

画像を用意!

まず重要なのは画像のサイズ。16px×16px、ないし32px×32pxで制作します。
ショートカットアイコンとして使われる事もあるので、32×32が無難です。
イラレなどを使ってかわいい素材を作ってみましょう。
作った素材は一度png等で保存します。

.icoに変換!

次に、作った素材を.icoファイルに変換します。
といっても、難しいことは特にありません。
ファビコン favicon.icoを作ろう!
上記リンクのようなサービスが幾つかあるので、画像を選択してボタンを押すだけでicoファイルが出来上がります。

headに張り付け!

最後に、headタグの中に張り付けて完成です。

<link rel="shortcut icon" href="[icoファイル]" />

hrefの中身は、作った素材までの相対パスになります。
サーバーにあげる場合はきちんと一緒にアップロードする必要があるので、作業フォルダ内に保存しておきましょう。

参考:無料ですぐできるfaviconの作成と設置のしかた

グループワークに関して。時間がなければ設定する必要はありません。完成最優先で、もし余裕があればやってみてください

11月15日(金) スマートフォンサイト制作基礎④

Webサーバーとの契約とドメインの取得

これまで、自分のパソコンでHTMLやCSSを使って、Webページを制作してきた。
今の段階では自分のページは自分の作ったファイルのある場所でしか確認できない。そう言う閉じた環境をローカル環境という。
Webページの目的は、情報をインターネットを経由して伝える事なので、このままでは役割を果たせない。

そこで、制作したサイトを、ネット接続が可能な環境ならだれでも見られる状態にする為に、Webサーバーにファイルをアップロードする必要がある。
なんだか難しそうだが、共有フォルダを思い浮かべればいい。
自分のPCでしか見られないファイルも、共有フォルダに入れると教室全体でみられるようになる(ローカルネット)。ざっくりいえば、Webサーバー(及びインターネット)は、その全世界版に当たる。

レンタルサーバー

上述の様に、インターネットでWebページを閲覧できる状態にするためにはWebサーバーが必要になる。
しかしWebサーバーは非常に高価だし、設定にも専門知識が必要になるので、個人で所有する事は難しい。
そこでレンタルサーバーというサービスを利用する事が多い。
レンタルサーバーは無料のものや月額制のものなど多様な種類がある。

無料サーバーはお得だが、勝手に広告の出てしまうものや、アクセス過多になると(余程の場合ですが……)停止してしまうものなどがあるので、一長一短。
月学制のサーバーは安定はするものの、やはり金額がネックになる場合は多い。
また、今後扱うが「データベース」の有無も決定要因になる。後日講義するWordPressの利用や、商品を扱うサイトではデータベースが必須になるので、ちゃんとついているサーバーを利用するのが無難。

個人で使う場合は、自分で良い条件の物を選ぼう。
商用の場合は有料のものやクライアント側で用意したサーバーが使われるが、とりあえずは会社やクライアントの方針に合わせて決定する。

無料サーバー

今後の事を考えると、下記サイトで紹介しているものがおススメ。
WordPressが使える無料のサーバをいろいろ試してみた

特にFreeWebはスペックもかなりの物で広告なし。登録者数が多いので、会員登録していない時期もあるが、評判はとてもいい。
また、Xdomainは小さな広告こそ表示されるものの、大本のXSERVER(こちらは有料。僕の愛用サーバーです)がかなり安定したサーバー提供に定評があるので、個人利用の範囲ならおススメ。

有料サーバー

一番のおすすめは上記したXSERVER。値段対スペックで考えると安く、また安定していてトラブルが少ない。
各社の違いは下記リンクを参照。2016年の最新情報みたいです。
【完全保存版】WordPress向けレンタルサーバー徹底比較2016

サーバー情報

レンタルサーバーを契約すると、「マイページ」などと呼ばれる自分の管理画面にログインできるようになり、そこにサーバーへの接続状況が載っている。基本的に必要なのは、

  • FTP情報
  • ユーザー名
  • パスワード

の三つ。
この三つが正しければ接続できる。
絶対に無くさない事管理を徹底する事を心がけよう。
入れなくなれば更新できなくなるし、他人が入ってしまえば書き換えられてしまう可能性もある。
自分の物ならまだいいが、クライアントの物が漏洩したら大問題になる。
絶対に無くさない事、管理を徹底しよう(念押し)

独自ドメイン

ドメインはサイトの住所、アドレスの名前のこと。
通常はサーバーによって適当な文字列になるが、ドメインを取得するとそのサイト独自の、任意のアドレスを取得できる。
自社の名前などが付けられるので、企業サイトではほぼ確実に取得する。個人用サイトでも、分かりやすいドメインが望ましい。
サーバーと契約後、大抵はマイページから取得でき、1~2日程度で反映される(詳しくは契約したサーバー参照。教室で渡したものでは取得できません)。無料のサーバーだと取れない事もあるので注意。
もちろん、ドメインは星の数ほどあるので、被らない名前でなければ取得できない。
ドメイン末尾については、かなりの種類が存在している。今はそこまで重視されないので、ある程度適切であれば問題ない。
ドメインの種類について

サーバーへのアップロード

ファイルをサーバーにアップロードする為には、専用のソフトが必要である。それらのソフトをFTPソフトと呼ぶ。
DreamWeaverは単独でアップロード機能を完備しているので、その使い方を設定した。
他にフリーでダウンロードできる、FFFTPや、Filezillaと言うソフトも有名なので、もし自宅にDreamWeaberがなければ導入してみよう。(僕はFileZillaを使用しています。使いやすいので)

ドリームウィーバーによるサーバー接続

1.ファイルパネル(なければ上部メニューの「ウィンドウ」からファイルを選択)→サイトの管理から設定する。
server-01

2.「サイトの管理」画面が開いたら、新規作成を押す。
server-02
「サイト設定」画面が開くので、任意のサイト名(分かりやすいもの)と任意のローカルフォルダー(アップロードしたいファイルのあるフォルダ)を設定する。まだ保存は押さないこと

3.「サイト設定」画面左側の「サーバー」をクリック。情報入力画面になるので、各情報を入力する。
server-03

  • 任意のサイト名(分かりやすい名前)
  • FTPアドレス(お渡しした紙ではホストアドレス)
  • ユーザー名
  • パスワード
  • WebURL(閲覧アドレス)

赤字の部分が重要項目。
入力出来たら「テスト」ボタンを押して接続を確認する。情報が間違っているとエラーが出るので、もう一度確認すること。
接続が確認で来たら保存して、初期画面まで戻る。

4.その後ファイルパネルでファイル名を選び、左上の四角いボタンを押すと、二画面表示になる。
server-04
左側がサーバー、右側が自分のPCになる
右の画面でファイルやフォルダを選び、PUTすると内容が反映される。

Filezillaでの接続

フリーのFTPソフト、FileZillaの設定方法も書いておくので、参考までに。
家でDreamWeaber使えない方は入れてみてください。
ダウンロード
インストール方法

1.ダウンロードが終了し、ファイルを開くとこういう画面が表示される。
FileZilla01
まずは左上のファイルメニューから、「サイトマネージャ」をクリックしよう。

2.サイトマネージャーが開く。
FileZilla02

まずは左下にある「新しいサイト」をクリック。名前を付けた後、右側の画面に情報を入力する。入力内容はDreamWeaverで入れた重要項目と同じ。
ただしデフォルトだと「ログオンの種類」が「匿名」になっていて、ユーザー名とパスワードが入力できないので、そこを「通常」に変更する。
他の部分は基本的にいじらず、「接続」する。

3.すると、自動で最初の画面に戻る。
FileZilla03
接続の成否は画面上部に表示される。
成功すると、右側にサーバー内の情報が現れる。画面構成がDreamWeaverと逆なので注意!

FileZillaのいいところは、ドラックでファイルを移動できる事。更にデスクトップや別ウィンドウから直接ドラックしてファイルをアップする事も可能
より直感的な操作ができるので、個人的にはおススメ。
ただし間違って違うファイルを上げてしまったり、変な場所にファイルを移動してしまったり、事故が起こりやすくもあるので十分に注意して使用してください。

SEO

検索エンジンが検索順位を決定する基準の事。
詳しいところはブラックボックスだが、実際に分かる部分も少なくない。分かりやすく言えば問題のあるページが弾かれるので、嫌われることをしなければいい。また、誠実に更新しているサイトが好まれるので、
ずるいことをせず、面倒くさがらずに更新する事が最大のSEO対策になる。

適切なキーワードが使用されている
キーワードを用意するのはもちろんとして、ページの内容と合っているかどうかが重要視される(トレンドのキーワードだけで検索されるのを防ぐ為)。関係ないワードが入っていると著しく順位が落ちる
例えばこのサイトのキーワードに「SMAP,解散」等のワードが入っているのは確実に適切ではない。
キーワードはmetaタグでの設定の他、titleタグ、h1タグなどが参照されていると思われる。titleタグは最重要項目なので、ちゃんと設定する事。
metaタグのキーワードは多ければ引っかかりやすい訳でもなく、少なければ一つの項目をより重要視するので、サイトの目的が明確な場合程絞った方が有利になる。3~10個程度が無難。
更新がちゃんとされている
更新が頻繁にされているサイトほど、最新の情報を多く提供していることになるので、より優遇される傾向にある。
この点においてブログやニュースサイトは性質上強く、企業ページもブログやトピックスを導入する事が増えている。
コピーサイトを作らない
似たような内容・似たようなマークアップのサイトが複数あると、検索から外される恐れがある。
これは一つのサイトや商品に誘導する為に、数々のマルチサイトが作られた時代があった為。
本当に有用な情報よりも宣伝にお金をかけたサイトの方が目立ってしまったため、検索エンジンでは厳しい扱いを受ける様になった。
広告が本文より目立っていないか
Webサイトの目的は情報を伝える事であり、広告は副産物であるというのが検索エンジンの考え方。
なので、本文にかぶせる様に出てくる広告などは、検索順位を大きく下げる要因になりうる。
上述した「関係ないキーワードをいれない」「コピーサイトを作らない」もそうだが、現在のSEOはアフィリエイト等でより多くの収入を稼ごうとした悪質な業者との戦いの結果でもある。
適切なマークアップがされている
順位を決定する検索エンジンもプログラムなので、正確に読み取らせる為にHTMLできちんとしたマークアップがされている事が重要。
特にコーダーを目指す方は、タグの意味を一つ一つ理解し、適切なマークアップを心がけよう。
被リンクを多く受けている
他サイトからリンクを多く貼られているサイトは信用度が上がる。
もちろん、自分で沢山サイトを作ってリンクを貼るのはまずばれるので、優良なコンテンツを作ってより多くのサイトにリンクを貼ってもらう事が望まれる。
より多くの人に閲覧される
Webページは閲覧されてはじめて有用になる。閲覧数はSEO判断基準の一つ。
順位が上がれば上がるほど、地位は安定していく。

などなど、抑えるべき要素があるが、誠実さと正確さを踏まえておけば最低限の要求は満たせる。
SEOを上昇させる専門の業者もあるので、知識を深めればそれだけで仕事になる。

1月8日(木) (実)Webプログラミング演習⑤講義内容

JavaScriptとPHP

php01
Webページがインターネットで閲覧できるのは、ファイルをWebサーバーにアップロードするから。
ユーザーがブラウザを通して、サーバーにアクセスし、ファイルを閲覧する形になっている。
JavaScriptはクライアントサイドスクリプトと呼ばれ、閲覧者のPC(正確にはIE、ChromeなどのWebブラウザ)で動作する言語。クリックしたら~する、などの、動きを作るのに適している。

対して、PHPはサーバーサイドスクリプトと呼ばれ、Webページをアップロードしたサーバーで動作する言語である。
ユーザーがリクエスト → サーバーで実行 → 実行結果を返す
という流れになり、実行時にユーザーの環境に左右されないというメリットがある。
また、ブラウザでソースコードを確認できないのが特徴。JavaScriptに比べ、秘匿性に優れている。
更にサーバーに沢山のデータを保存するデータベースとの親和性が高い。

Twitter、Facebookなどの有名なSNSや、ショッピングサイト等、大量のデータを扱うページでは、サーバーサイドスクリプトが用いられている。

フォーム

コード

お問い合わせフォームやアンケートフォームなどに使われるタグ。種類が沢山ある。
これらのタグを書いただけでは表示しかされず、実際に内容を送信するにはphpやjavascriptとの連携が必須である。

<form method="post" action="">
    <input type="text" name="name" value="お名前" >
    
    男性<input type="radio" name="gender" value="男性">
    女性<input type="radio" name="gender" value="女性" checked="checked">

    読書<input type="checkbox" name="hobby" value="釣り">
    スポーツ<input type="checkbox" name="hobby" value="スポーツ">
   
    <input type="email" name="mail_address" value="メールアドレス">
    <input type="email" name="mail_address" value="電話番号">
    <input type="date" name="date">
    <input type="url" name="http://">

    <select name="list">
        <option>項目1</option>
        <option>項目2</option>
        <option>項目3</option>
    </select>

    <textaera cols=""100" rows="10"></textarea>

    <input type="submit" value=" 送信 ">
    <input type="reset" value=" リセット ">
</form>

表示


男性 女性

読書 スポーツ




実際はtableタグやdlタグを使ってきちんと整理して書くことが多いです

formタグ
フォーム全体を囲うタグ。これがないとフォームとして機能しない。
また、以下のinput等のタグは、全てこの中に記述する必要がある。
属性値として、「method」と「action」が必須になる。
methodはデータの送信方法を指定し、値は「POST」か「GET」のいずれか。
使い分けもするにはするが、今はとりあえず「method=”POST”」と入力すればOK。

actionは、送信ボタンを押した後の飛び先を設定する(確認画面や送信完了画面)。
どこにも飛ばさない時は、「action=””」と表記する。

inputタグ
様々なデータを取り扱う、フォームの中で使えるタグ。
type属性の値によって様々な振る舞いをする特殊なタグでもある。
必須の属性としてnameがあり、これには任意の名前を付けることが出来る。
基本的には半角英数字で入力する。
また、type値によってvalue属性の内容も変わる。

type 用途 valueの扱い
text 汎用的な、短いテキストを入力できるエリア 初期表示
radio ラジオボタン。いずれか一つを選択する。同じ名前尾付けたものがグループになる。
checked=”checked” を属性として入力すると、その項目に初期状態でチェックが入る。
選択された時に送信されるデータ。同じグループの選択肢にはる。
checkbox 複数の項目尾選択する 選択された時に送信されるデータ。同じグループの選択肢に貼る。
email,tel,date,url,他 HTML5から増えたタイプ。本来プログラムで判定しなければいけなかったエラー文を判定してくれるようになった。
古いブラウザだと対応が微妙な場合があるのと、表示の仕方(特にdate)がブラウザによって異なるので、使用はケースバイケース。
type=”text”と同じ
submit フォームに入力した内容を送信するボタン。formタグにactionが指定されていると、そこに跳ぶ。 ボタンの上に表示される文字。
reset 入力したデータを消す。 subimitと同じ。
button 特に何も起こらないボタンを作るタグ。昨日はJavaScript等と合わせて使われることが多い。 subimitと同じ。
select,option
選択式のボックスを表示するタグ。
selectタグを親として、項目ごとにoptionタグで囲む。
紛らわしいが、inputタグではないので注意。
selectタグにname属性、optionタグに送信したいデータを入力する。
textarea
テキストを入力するボックス。inputのtextと違い、複数行のテキストが入力できる。
こちらもinputタグではないので注意。
属性としてcolsとrowsがあり、colsは一行の文字数、rowsは行数を指定できる。