新米IT技術者の徒然なるブログ

しがない新米IT技術者のIT情報や趣味を綴ります

【初心者】WEB開発するための環境作成手順メモ【Sublime Text/XAMPP】

f:id:alba_ahoudori:20150406000523j:plain

こんばんわ。albaです。

最近Web開発を行ったので、その際必要な環境作成手順をメモっておきたいと思います。とはいいつつ結構情報自体はありふれているので、検索をかければ済むっていえば済むのですが、何から手を付ければいいのかよくわからない人もいるので、参考になれば。
※初心者やこれから勉強する人向けです。

 

目次                 
以下の内容で掲載していきます。
1.開発環境作成
 →ツールのインストールとカスタマイズを行います
2. 確認環境作成
 →本来ならばサーバをレンタルして公開するのが普通ですが、作成した環境を確認するために自分のPC上に作成しておきます。
3.付録
 →製造の注意点やPHPの勉強方法などを記載しておきます


 

 

1.開発環境の作成 ~Sublime Text~ 

いろいろ有名なツールはあったりするのですが、無料で利用できる割に機能が充実している "Sublime Text" と呼ばれるツールを利用したいと思います。

1-1.インストール

以下のページを参考にしてインストールを行うことができます。
■参考ページ


私自身この参考ページを利用したのですが、exeファイルではなく、ZIPでSublime Text のインストールを以下の手順で行いました。
上記の参考ページを利用する場合は 日本語化について まで行ってください。
=====================================
①以下のページの Windows 64 bit の横にある portable version をクリックして ZIPファイルをダウンロードします。
 ※自分の環境のOSに合わせたものをダウンロードしてください。

  Sublime Text - Download


②ダウンロードしたZIPファイルを解凍し、自分の使いやすい適宜保存先配置します。
 ファイル名:Sublime Text Build 3065 x64.zip

③そのファイルの中にある sublime_text.exe のショートカットをデスクトップに作成しておくとよいでしょう。

④これでインストールは完了なのですが、日本語化等の作業を行った方が良いでしょう。上記に書いた Package Controlのインストール/参考ページ を確認して行ってください。
=====================================

1-2.カスタマイズ

1-1.インストールまでの手順だと、メモ帳のようなテキストエディタでしかありません。なのでカスタマイズを行いましょう!
HTML・CSS やコーディングにあまりなれていないならば、Sourceの作成をしつつ、以下のような参考ページを確認して、必要そうなものを順次入れていきましょう。
■参考ページ



2. 確認環境作成 ~XAMPP~ 

以下のページを参考して XAMPP とよばれるソフトウェアをインストールします。最低限Apatchさえ起動しておけばいいのですが、データベースを利用した開発やPHPとHTMLの連携の確認できる為今後とも利用しやすいでしょう。
■参考ページ


また、設定等の変更を行う場合は以下を参考にしてください。これの設定を変えることで環境を想定しているモノに合わせたり、Errorが発生した場合の確認が行えます。
■参考ページ


インストールが完了し Apatch を起動したら xampp/htdocs 以下に開発したhtmlファイルを置くことでWeb上の表示が確認できます。
アクセス先:http://localhost/(ファイル名)



3.付録          

3-1.デベロッパツール

Web上のSourceを確認できるツール。多少の変更もできる(保存されるわけではない)ので値の確認を行えます。IEも標準でついているのがありますが、利用しづらいので別のモノを利用した方がいいです。
私が使っているのはFireFoxのアドオンツール"FireBug"。GoogleChrome も標準で機能がついているのでそれでも良いです。

 


3-2.携帯対応

スマートフォンの普及にともないスマートフォンからのアクセスは無視することはできないです。PCの画面サイズで利用する際に表示される内容と、携帯で表示させるデザインは変更させておかないと、とても見づらい画面になってしまいます。
それを解決する手段として レスポンシブCSS(メディアクエリ) を利用すると良いでしょう。
■参考ページ

 


3-3.確認すべきこと

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



3-4.SEO対策

せっかく作成したページも人に見てもらえなければなんにもなりません。キーワードの設定等を意識的に行って作成するように、以下の参考ページ等SEO対策は確認しておくようにしましょう。
■参考ページ


その他対策としてページ速度も大事な指標です。
これは公開するServerの性能にもよるのですが、以下の参考ページだと表示までに3秒以上かかると40%のユーザは離れてしまうらしいです。
■参考ページ



3-5.WordPressの利用

Web作成を始めるのに、その他言語を経験していたならいざ知らず、言語も知らずいきなりSourceを書くのは辛かったりします。そんな時は文字ではなく画面で製造が行える WordPress を利用する、ということもできます。
※ただしローカルPCで製造したところで、そのままローカルPCで公開するわけにもいかないと思うので、練習用に。
■参考ページ

 

3-6.PHPの利用

PHPでのプログラムをhtmlと連携させて動かすこともできます。
勉強方法としてはPHPでのメール発信をできるようにすれば、仕組みが分かりやすくていいかも・・・
"PHP メール"で検索をかければSourceを公開しているページも多いので確認してみてください。