カテゴリー別アーカイブ: Dreamweaver

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を上昇させる専門の業者もあるので、知識を深めればそれだけで仕事になる。

第一回。知って得するDreamWeaverテクニック~プロパティパネル編~

DreamWeaverにはまだまだいろんな機能があります。
今回はその一部の紹介です。

ulタグやliタグで囲むのは意外と面倒・・・・・・・そんな時、DreamWeaverでリストを作る方法です。

dw01

dw02

dw03

dw04

dw05

ulだけでなく、olもすぐにできます。
リンクと同じようにクラスやIDも簡単につけられます。コーディングに自信がない人ほど、覚えると作業が楽になるかもしれません。
プロパティパネルで色々試してみると面白いかも知れません。

12月15日(火) (実)Webデザイン制作基礎① 講義内容

DreamWeaver

Photoshop、Illustratorと同じく、Adobe社の提供する製作用ツール
特にWebページ作成に特化しており、多機能なプロパティパネルとコードヒント機能が特徴。
他にも様々な機能がある、高機能エディタ。
現場での使用率が高く、求人にDreamWeaber経験が入るものも少なからずある。

DreamWeaberは有料だが、無料で使えるものにも高機能なものが複数ある。
家でも使える! フリーのテキストエディタ
一番下のBracketsは特に高機能なことで有名。Adobe CCの購入まだ迷ってる方は使ってみてもいいかも?

コードヒント
途中までコードを書くと、ヒントが表示される。
一度消えてしまった後は、その場所でctrl + スペースキーを押すと再表示される。
ビュー
Dreamweaberには大きく三種類の表示方法があり、左上のパネルで切り替えが出来る。

コード テキストで書かれたコードだけを表示する。
基本的に編集するのはこちら。
デザイン ページの見た目を表示する。
こちらでも色々と編集は出来るが、コードが汚くなりがちなのと、色々余分なものが入ってしまうのが欠点。
ただ、Webページからこちらにコピーしたりすると、表などがマークアップ済みで貼り付けられるので、便利な時もある。
ライブプレビューで更に実際に近づいた表示が見られるが、意外と当てにならないので参考程度に。ブラウザプレビューが確実です
分割 デザインを見ながらコードが打てる。
便利ではあるものの、ウィンドウが小さいと使いにくい。
プロパティパネル
様々な設定の出来るパネル。
カーソルがどのタグの中にあるかで内容が変わる。
今回はbodyタグ内にカーソル→ページプロパティ、タイトルとエンコードから、HTML5への変更を行った。こちらファイルの新規作成時にも指定できます。
他に文章にリンクを貼ったり、pタグをリストに変換したり、いろんなことが出来る。
ファイルパネル
ファイルパネルを開くと、ローカル(自分のPC)に保存されているファイルの一覧が現れる。
こちらから画像やCSSを貼り付ける事も可能。
今後Webページをサーバーにアップロードする時もこちらのタグを使う。
ブラウザでプレビュー
Dreamweaberからブラウザを開いてプレビューしてくれる。
初期設定ではIEだけがリストにあるが、ブラウザリストの編集→プラスマークから増やすことも可能。
一番よく使うものをプライマリーに指定しておくと良い。
ショートカットはF12。

ロゴやアイコンのルール

facebook、twitterなどのアイコンやロゴは、勝手な変更は原則禁止である。
基本的には各社が自己配信しており、加工していい範囲などが規約として記されている。
色の変更などはイメージカラーなので、基本厳しい。
TwitterとFacebookのアイコンを使いたいときは公式サイトからダウンロードできる


Illustratorのスライス

カンプから素材を切り出し、個別に保存する技術。
通常の範囲とは違うスライス用の範囲があり、それを指定することで選択可能になる。
方法はいくつかある。

ナイフツール
フリーハンドで素材の切抜きが出来る。定規ツール(ctrl+r)やグリッド表示と組み合わせると使いやすい。
オブジェクトごとに保存
オブジェクト単位で選択することも可能。
保存したいオブジェクトを一通り選択した後、上部メニューオブジェクト→スライス→作成で一気にスライスすることも可能。
画像がぴったりのサイズの場合は、こちらのほうが便利。
slice1
スライスの保存
上記の方法でスライスの範囲を設定した後、Web及びデバイス用に保存をすると、スライス単位で選択できる。
slice2

保存時の手順(画像の番号を参照)

①保存したいエリアを選択。Shiftを押しながらだと、複数エリアを選択できる。このとき左上の番号をダブルクリックすると、画像ごとに名前をつけられる。
②保存形式を選択。必ず保存したいエリアを全て選んでから変更する。
③「画像のみ」を選択。ファイル名が適当なものになるが、気にしなくて良い。
④「選択したスライス」を選択。これをしないと、余分な部分も全て書き出されてしまう。

ここまでやって保存すると、指定した場所に「images」フォルダができ、それぞれ別個に保存される。

絶対に覚えて欲しいショートカット集 ~Dreamweaber編~

毎度おなじみショートカット集。今回はDreamWeaber編

基本操作
ctrl + C コピー
ctrl + X 切り取り
ctrl + V ペースト
ctrl + Z 前に戻る
ctrl + Y 次へ進む
ctrl + F 検索・置換
ctrl + スペース コードヒントを再表示
ファイル操作
ctrl + N 新規ファイルの作成
ctrl + O 開く
ctrl + S 上書き保存
ctrl + shift + S 名前を付けて保存
タグの挿入
Ctrl + N brタグの挿入
ctrl + 1~6 h1~h6タグの挿入
Shift + Enter brタグの挿入
ctrl + Shift + P pタグの挿入
ctrl + B strongタグの挿入

例によって他にもたくさんあるので、よく使うものを抜粋しています。
hタグやpタグ、brタグの挿入は慣れると非常にコーディングが楽になります。