Iosystem dev

Webサービスをつくっていくうえでハマったことなど忘れないために

個人でWebサービスをつくろう 第1回

はじめに

『すぽせん』の開発を通じてハマったことなどを忘れないようにメモ程度に書いていこうと思い、前回の記事を書いたところ、

たくさんのブックマークや、ありがたい言葉、いろいろと応援のコメントをいただきました。

ありがとうございます。

 

 

すぽせん | スポーツポータルサイト

f:id:iosystem:20150523201747p:plain

 

そこでちょっと趣旨を変えて

個人でサービスを作ってみたいけど構築方法が分からないなど、

この記事を読めばノンプログラマーでも簡単なアプリケーションは作ることが出来るよってことをお題に記事を書いていきたいと思います。

これを機会にプログラムに興味を持ってくれれば幸いです。

すぽせん開発でハマった所とうまく絡ませながら記事にしていければと思います。

 

 

それでは早速

まずプログラムを走らせるにはプログラムが動く環境を用意しなければ始まりません。

そのためにはレンタルサーバーを借りたりするんですが、いちいちファイルをアップして確認するのはめんどくさいので、とりあえず自分のPCに仮想的なサーバーをつくるのが一般的です。

 

昔は個別でインストールしてそれぞれ設定をしていましたが、

今は一括でインストールして

はいローカルサーバー出来上がりみたいな便利なものがあるのでそれを使います。 

やってみようと思い立ったとき設定でつまずくと挫折してしまうので、今回は代表的な『xampp』を使います。

 

ApacheやデータベースのMySQLなんかがセットで入っていてとても便利です。

当然PHPも初めから入っています。

 

XAMPP

https://www.apachefriends.org/jp/index.html

f:id:iosystem:20150529163115p:plain

 

僕のPCはwindowsなのでwindows用をダウンロードしてインストールします

次へ、次へと手順に沿って行くとインストールが完了します。

f:id:iosystem:20150529163334p:plain

 

f:id:iosystem:20150529163336p:plain

 

f:id:iosystem:20150529163338p:plain

 

f:id:iosystem:20150529163340p:plain

 

f:id:iosystem:20150529163341p:plain

 

f:id:iosystem:20150529163345p:plain

 

f:id:iosystem:20150529163347p:plain

 

インストールしたアイコンをクリックしてコントロールパネルを立ち上げます。

上の2つのStartをクリックするとポートが立ち上がります。

f:id:iosystem:20150529164250p:plain

 

ブラウザでhttp://localhost/xampp/

と打ってアクセスします

サーバーが立ちあがりXamppのトップ画面が出ました。

f:id:iosystem:20150529164611p:plain

簡単ですね

細かな設定は後にして次に進みます

 

これがどこにインストールされているかというと

マイコンピュータのCドライブかなんかにxamppフォルダができています。

その中のhtdocsフォルダがローカルサーバーのデフォルトルートフォルダになります。

 

では初めてのプログラムを書いてみます。

お決まりの『hello world』を表示してみたいと思います。

 

hello.phpというPHPファイルをhtdocsフォルダの中に作ります。

文字コードUTF-8にします。

拡張子phpです。

 

ファイルと作るときテキストエディタを使いましょう。
テキストエディタならなんでもいいです。
ただメモ帳だと何かと不便なので、無い場合はエディタをインストールしてください。

 

大規模なシステムや複数人のチームで作ったりする場合には統合開発環境とか使いますが、初めは誰でも簡単でシンプルなエディタからだと思うので最初はテキストエディタを使います。

 

初心者にオススメなのはこのへんです。

TeraPad

http://www5f.biglobe.ne.jp/~t-susumu/library/tpad.html

f:id:iosystem:20150529181735p:plain

 とっても軽いです(僕も一番初めはこれを使いました)

 

 

 Notepad++(ノートパッドプラスプラス)

https://notepad-plus-plus.org/

f:id:iosystem:20150529181804p:plain

タブ管理なんかが出来てちょっと高機能です(十分軽いです)

 

 

hello.php

<?php
  echo “hello world”;
?>

保存します。

 

http://localhost/hello.phpにアクセスしてみてください

f:id:iosystem:20150529185044p:plain

表示されました。

立派にプログラムが動きました。

 

 

自分のデスクトップPCの中にローカルサーバーが立ち上がって、プログラムが走ったということです。

 

f:id:iosystem:20150529165754j:plain

あのFacebookマーク・ザッカーバーグとルームメイトで立ち上げメンバー、そして天才プログラマーと言われたダスティン・モスコビッツでさえ初めはこれから始めました。しかも当時プログラムは書けないというから驚きです(言語はperlでしたがやることは一緒です)

みんな初めは『Hello World』を表示するところから始めるんです。

 

 

ではxamppの細かな設定をしていきます。

C:¥xampp¥php 内にある php.ini をエディタで開き、以下の箇所をそれぞれ修正します。

 

1863行目付近
;mbstring.language = Japanese

mbstring.language = Japanese

 

1869行目付近
;mbstring.internal_encoding = EUC-JP

mbstring.internal_encoding = UTF-8

 

1873行目付近
;mbstring.http_input = auto

mbstring.http_input = pass

 

1886行目付近
;mbstring.encoding_translation = Off

mbstring.encoding_translation = Off

 

1891行目付近
;mbstring.detect_order = auto

mbstring.detect_order = UTF-8,SJIS,EUC-JP,JIS,ASCII

 

1897行目付近
;mbstring.substitute_character = none;

mbstring.substitute_character = none;

 

1908行目付近
;mbstring.func_overload = 0

mbstring.func_overload = 0

 

1911行目付近
;mbstring.strict_detection = Off

mbstring.strict_detection = Off

 

 

修正したらApacheを再起動します。

 

http://localhost/xampp/にアクセスして

メニューのphpinfo()をクリック

f:id:iosystem:20150529185345p:plain

 

設定が反映されていたらOKです。

 

これで一応PHPが動く環境ができました。

今回はここまでです。