【初心者】WEB開発するための環境作成手順メモ【Sublime Text/XAMPP】
こんばんわ。albaです。
最近Web開発を行ったので、その際必要な環境作成手順をメモっておきたいと思います。とはいいつつ結構情報自体はありふれているので、検索をかければ済むっていえば済むのですが、何から手を付ければいいのかよくわからない人もいるので、参考になれば。
※初心者やこれから勉強する人向けです。
目次
以下の内容で掲載していきます。
１．開発環境作成
→ツールのインストールとカスタマイズを行います
２. 確認環境作成
→本来ならばサーバをレンタルして公開するのが普通ですが、作成した環境を確認するために自分のPC上に作成しておきます。
３．付録
→製造の注意点やPHPの勉強方法などを記載しておきます
１.開発環境の作成 ～Sublime Text～
いろいろ有名なツールはあったりするのですが、無料で利用できる割に機能が充実している "Sublime Text" と呼ばれるツールを利用したいと思います。
１－１．インストール
以下のページを参考にしてインストールを行うことができます。
■参考ページ
私自身この参考ページを利用したのですが、exeファイルではなく、ZIPでSublime Text のインストールを以下の手順で行いました。
上記の参考ページを利用する場合は 日本語化について まで行ってください。
=====================================
①以下のページの Windows 64 bit の横にある portable version をクリックして ZIPファイルをダウンロードします。
※自分の環境のOSに合わせたものをダウンロードしてください。
②ダウンロードしたZIPファイルを解凍し、自分の使いやすい適宜保存先配置します。
ファイル名：Sublime Text Build 3065 x64.zip
③そのファイルの中にある sublime_text.exe のショートカットをデスクトップに作成しておくとよいでしょう。
④これでインストールは完了なのですが、日本語化等の作業を行った方が良いでしょう。上記に書いた Package Controlのインストール/参考ページ を確認して行ってください。
=====================================
１－２．カスタマイズ
１－１．インストールまでの手順だと、メモ帳のようなテキストエディタでしかありません。なのでカスタマイズを行いましょう！
HTML・CSS やコーディングにあまりなれていないならば、Sourceの作成をしつつ、以下のような参考ページを確認して、必要そうなものを順次入れていきましょう。
■参考ページ
２. 確認環境作成 ～XAMPP～
以下のページを参考して XAMPP とよばれるソフトウェアをインストールします。最低限Apatchさえ起動しておけばいいのですが、データベースを利用した開発やPHPとHTMLの連携の確認できる為今後とも利用しやすいでしょう。
■参考ページ
また、設定等の変更を行う場合は以下を参考にしてください。これの設定を変えることで環境を想定しているモノに合わせたり、Errorが発生した場合の確認が行えます。
■参考ページ
インストールが完了し Apatch を起動したら xampp/htdocs 以下に開発したhtmlファイルを置くことでWeb上の表示が確認できます。
アクセス先：http://localhost/(ファイル名)
３．付録
Web上のSourceを確認できるツール。多少の変更もできる(保存されるわけではない)ので値の確認を行えます。IEも標準でついているのがありますが、利用しづらいので別のモノを利用した方がいいです。
私が使っているのはFireFoxのアドオンツール"FireBug"。GoogleChrome も標準で機能がついているのでそれでも良いです。
３－２．携帯対応
スマートフォンの普及にともないスマートフォンからのアクセスは無視することはできないです。PCの画面サイズで利用する際に表示される内容と、携帯で表示させるデザインは変更させておかないと、とても見づらい画面になってしまいます。
それを解決する手段として レスポンシブCSS(メディアクエリ) を利用すると良いでしょう。
■参考ページ
３－３．確認すべきこと
WEB開発中・開発完了後に確認すべきことの一つとしてWebブラウザチェックは必須です。FireFox を利用していて確認したとしても IE ではうまく動くとは限りません。またIE11 と IE8 ではまたまた動作が違ったりします。
わかりやすいので言えばデザインが結構変わります。のでCSSファイルではブラウザに合わせた内容を記載する必要があります。またJavascriptが動作したりしなかったりします。
"IEを対象外にする！" という判断はできないことはないですが、利用シェアを考えるとその判断はなしですね。
以下のブラウザに対応が確認できれば、問題ないのではないでしょうか(2015/4月時点)
・Internet Explore 8
・Internet Explore 9
・Internet Explore 10
・Internet Explore 11
・FireFox
・Google Chrome
・Opera
・Safari
■参考ページ
IE用CSSハックの簡単な書き方とIE10以上への対応 | web codery
３－４．SEO対策
せっかく作成したページも人に見てもらえなければなんにもなりません。キーワードの設定等を意識的に行って作成するように、以下の参考ページ等SEO対策は確認しておくようにしましょう。
■参考ページ
その他対策としてページ速度も大事な指標です。
これは公開するServerの性能にもよるのですが、以下の参考ページだと表示までに３秒以上かかると40%のユーザは離れてしまうらしいです。
■参考ページ
３－５．WordPressの利用
Web作成を始めるのに、その他言語を経験していたならいざ知らず、言語も知らずいきなりSourceを書くのは辛かったりします。そんな時は文字ではなく画面で製造が行える WordPress を利用する、ということもできます。
※ただしローカルPCで製造したところで、そのままローカルPCで公開するわけにもいかないと思うので、練習用に。
■参考ページ
３－６．PHPの利用
PHPでのプログラムをhtmlと連携させて動かすこともできます。
勉強方法としてはPHPでのメール発信をできるようにすれば、仕組みが分かりやすくていいかも・・・
"PHP メール"で検索をかければSourceを公開しているページも多いので確認してみてください。
