[環境構築]xamppで使用するディレクトリとPC拡張子表示設定

こんにちは。
ワードプレスのテンプレートを一から自作する事を企てているたきもとです。

サーバを借りてドメインまで取ったから。
やっぱりテンプレも作って、世の中に公開。
そしてフィードバックを貰う。

このくらいはした方が良い気がしてきました。
個人事業主として。


さて、今回はとても基本的なお話。
だけどあまりネット上では見られない
-拡張子の変更
-xamppディレクトリの設定
方法について。

動作環境は次の通り。

Windows 8.1
64bit
xampp
Chrome


あまりにも基本的すぎて説明するのを忘れるくらい大切なことです。
これからプログラミングを始めようとする方を対象にした記事です。

xamppのインストールについてはこちらです。
[環境構築]windows8.1 にxamppをインストールする方法 | たきもとけんご.com

拡張子を表示させる

拡張子とは

ファイルの後ろにくっついている 2文字 – 4文字 程度のアルファベットのことです。
こういうやつ。

160310_アイキャッチ_xampp.png
class_jp.php
160310_ToDo.txt

拡張子は自分で編集可能です。
でもPCの動作自体をコントロールするような拡張子( .bat みたいな)もあるので,PC購入時は編集不可能な状態になっています。

これはPC詳しくない人が変に触っちゃって
ファイルが開けない!壊れた!
と焦るのを防ぐためだと思います。

何のためにやるのか

何故やるか、ですが、
-自分が作るファイルが 何なのか をはっきり宣言するため
です。


たとえばPHPのコードを書こうと思ったら拡張子を
.php
にする必要があります。

HTMLなら
.html

スタイルシートなら
.css

バッチファイルなら
.bat

みたいに。


このように色んな拡張子があるので、
-これから自分はなんのファイルを作るのか
を指定する必要があります。
逆に、指定した拡張子を持つファイルしか開けないソフトもあるので少し注意が必要です。

たとえば、
エクセルで .doc は開けないし、
ワードで .xls は開けないし。

MS Officeの場合は保存/編集時にこの拡張子を自動で判別してくれています。

やり方

Windows8.1 で解説します。


1. なんでもいいからフォルダを開く。
2. ツールバーの 表示 をクリック
3. ファイル名拡張子 にチェック

拡張子


xamppディレクトリの設定

何のためにやるのか

これから色んなプログラムを作っていくとファイルが膨大な数になっていきます。
それらを ディレクトリ という形でまとめるメリットは

-管理がしやすくなる

これに尽きます。

大量の .phpファイルやら.htmlファイルが適当な名前で散らかっているよりは遥かにマシです。
将来の自分を助ける意味を込めて,最初にディレクトリを設定しましょう。

やり方

先日インストールしたxammpの場所は次の通りです。
C:\xampp

自分が作成するコードが格納されるのは、この下のディレクトリ htdocs です。
C:\xampp\htdocs

ここに好きな名前のディレクトリ(ファイル)を作りましょう。
たとえば、今回なら
renshu
というファイルを作ります。

htdocs


htdocs


htdocs

試してみる

ローカル環境で先程作ったディレクトリに辿り着けるか
ファイルを開けるか

この辺りをチェックしてみましょう。


先程作ったrenshuディレクトリで
右クリック
新規作成
テキストドキュメント

名前は
test.php
としましょう。
ここで拡張子も変えるのがポイントです。

ディレクトリ


test.php の中には次のように書き込み、保存します。

<?php

echo '基本的にはこの場所にファイルを作成していきます'."<br>";



次に、ブラウザのurlバーに次のように入力します。

http://localhost/renshu/



そうすると次のような画面になるので、
test.php
をクリックして表示の確認をしましょう。
次のような表示になればokです。

ブラウザ


ブラウザ

まとめ

今回の内容は初心者用テキストには書いてありますが、ネット上ではなかなか見ないので書いてみました。

拡張子はファイル作成時に必要に応じて書き換える必要があります。
この作業をしないとブラウザ上で正しく動作してくれないので。

環境構築はやや手間ですが、一度済ませてしまえばその後滅多に変更しません。
一つ一つ確実にこなしていきましょう。

本日は以上です。

スポンサーリンク
336 x 280 – レクタングル(大)
336 x 280 – レクタングル(大)
  • このエントリーをはてなブックマークに追加

この記事が気に入ったら
いいね!しよう

スポンサーリンク
336 x 280 – レクタングル(大)
トップへ戻る