Awesome Hacks!

プログラミング初心者なので地道に勉強していきます。分からない人の立場から整理していきます。

Windows/Mac_XAMMP/MAMPの設定について

WIndowsのXAMMPを使って複数のサイトをローカルで見れるように設定し、
Macも同様かと思ったがやはり違ったのでここに整理しておきたい。
(備忘録の目的での記載だが、時間が経ってしまったので幾らか漏れなどあるかもしれないので悪しからず)
 

WIndows - XAMMP

①IPの固定化

詳細は略
 

②xamppインストー

インストール先はCドライブの直下(c:\xampp\)
 

③xampp起動確認

コントロールパネルにてApacheをstart
ブラウザ上でhttp://localhostと入力して確認
 

④VirtualHostの設定

「C:\xampp\htdocs」のフォルダの中に、自分の名前(半角英数+連番)のフォルダを10個作成
例)
C:\xampp\htdocs\neko01
C:\xampp\htdocs\neko02
     ・
     ・
     ・
C:\xampp\htdocs\neko09
C:\xampp\htdocs\neko10
 

⑤「C:\xampp\apache\conf\extra\httpd-vhosts.conf」を編集


「##NameVirtualHost *:80」
コメントアウト「##」を外す。
>|sh|
NameVirtualHost *:80
|

 
ファイルの一番下に、

<VirtualHost *:80> 
    DocumentRoot "C:/xampp/htdocs" 
    ServerName localhost 
</VirtualHost> 
 
## 
<VirtualHost *:80> 
    DocumentRoot "C:/xampp/htdocs/neko01" 
    ServerName neko01
</VirtualHost> 
<Directory "c:/xampp/htdocs/neko01"> 
    order deny,allow 
    allow from ALL 
</Directory> 
## 

## neko02 〜 neko09まで同様(略)

## 
<VirtualHost *:80> 
    DocumentRoot "C:/xampp/htdocs/neko10" 
    ServerName neko10
</VirtualHost> 
<Directory "c:/xampp/htdocs/neko10"> 
    order deny,allow 
    allow from ALL 
</Directory> 
## 

⑥host設定

「C:\Windows\System32\drivers\etc\hosts」を編集する

ファイルの一番下に、「自分のIP フォルダ名」を追加してください。
例)192.168.179.5  neko01
  192.168.179.5  neko02

⑦「C:\xampp\xampp-control.exe」を実行しApacheを起動後、

ブラウザのURL欄にフォルダ名を入力
 
「Indexof/」などの白い画面が出れば設定完了
 
 

Mac - MAMP

そもそもMacではWindowsと異なり、MAMPApacheとは別に既存のApacheが存在し、
干渉しないようにポート番号が異なる。
 
MAMPではWIndowsのXAMMPと異なり、使いたいサイトの数分ポートを準備する必要がありそう。

※私の場合は必要無かったが、環境によっては事前にIPの固定化が必要かも
 

mampインストー

インストール先はアプリケーションフォルダの直下(/Applications)
 

mamp起動確認

コントロールパネルにてApacheをstart
ブラウザ上でhttp://localhostと入力して確認
 
このままでは「It works!」と表示されるはず
(うろ覚えで書いたので違ったらすいません)
 

③VirtualHostの設定

「/Applications/MAMP/htdocs」のフォルダの中に、自分の名前(半角英数+連番)のフォルダを10個作成
例)

$ ls -1 /Applications/MAMP/htdocs
neko01
neko02
neko03
neko04
neko05
neko06
neko07
neko08
neko09
neko10
$

  

④「/Applications/MAMP/conf/apache/extra/httpd-vhosts.conf」を編集


「##NameVirtualHost *:80」
コメントアウト「##」を外す。 (最初から外れている場合はそのままにしておく)
 

NameVirtualHost *:80

 
ファイルの一番下に、

<VirtualHost *:80>
    DocumentRoot "/Applications/MAMP/htdocs"
    ServerName localhost:8888
</VirtualHost>
 
## 
<VirtualHost *:8001>
    DocumentRoot "/Applications/MAMP/htdocs/neko01"
    ServerName neko01
</VirtualHost>
<Directory "/Applications/MAMP/htdocs/neko01">
    order deny,allow
    allow from ALL
</Directory>
## 

## neko02 〜 neko09まで同様(略)

## 
<VirtualHost *:8010> 
    DocumentRoot "/Applications/MAMP/htdocs/neko10"
    ServerName neko10
</VirtualHost>
<Directory "/Applications/MAMP/htdocs/neko10">
    order deny,allow
    allow from ALL
</Directory>
## 

 
※「ServerName localhost:8888」とする理由について、
MacではWindowsと異なり、MAMPApacheとは別に既存のApacheが存在し、
干渉しないようにポート番号が異なるため。

⑤host設定

「/etc/hosts」をコマンドライン「sudo vi /etc/hosts」にて編集する(viエディタの場合)
  
ファイルの一番下に、「自分のIP フォルダ名」を追加
例)192.168.179.5  neko01
  192.168.179.5  neko02
 

ra$ cat /etc/hosts
127.0.0.1	localhost
255.255.255.255	broadcasthost
::1             localhost
192.168.179.5 neko01
192.168.179.5 neko02 
192.168.179.5 neko03 
192.168.179.5 neko04 
192.168.179.5 neko05 
192.168.179.5 neko06 
192.168.179.5 neko07 
192.168.179.5 neko08 
192.168.179.5 neko09
192.168.179.5 neko10
 
$ 

 
⑥「/Applications/MAMP/conf/apache/httpd.conf」を編集する
ファイルに「Listen 8888」と記載されている箇所が存在するため、
そちらの直後に上記にて割り当てたポートを記載する
 

Listen 8888
Listen 8001
Listen 8002
Listen 8003
Listen 8004
Listen 8005
Listen 8006
Listen 8007
Listen 8008
Listen 8009
Listen 8010

 
 

MAMPApacheを止める

MacではWindowsと異なり、MAMPApacheとは別に既存のApacheが存在するため、止める必要がある。
止めないとブラウザに「It works!」が表示される。
 

$ sudo apachectl stop
$

 

⑧「/Applications/MAMP」配下にインストールしたMAMPアプリを実行しApacheを起動後、

ブラウザのURL欄にhttp://localhost:(任意のポート番号)/」を入力
 
<上記で登録した各フォルダにアクセスする場合の例>
例1)「neko01」にアクセスする場合
http://localhost:8001/
 
例2)「neko10」にアクセスする場合
http://localhost:8010/

 
 

Webデザイン_アプリ_色を調べる

Webデザインでは用意されている色だけではなく、色んな色を自ら積極的調べて使うことは必須だ。
しかし、いいなと思う色があっても、カラーコードが何なのか調べるに一苦労していた。
やり方としてはいいなと思う画像を撮ったりダウンロードした後に、フォトショップなどで調べるためにパソコンに入れたり、クラウド上にあげたりなどする必要があった。
そのためその煩わしさから、日常生活において良いなと思った色についてもわざわざカメラで撮ったりすることもしなかった。

そこで、今回カメラで色を調べたり持っている画像に使われている色について簡単に調べられるアプリを見つけたので紹介したい。

色彩ヘルパー
使われている色の名前が分かるアプリ【色彩ヘルパー】 | アプリそうけん

これはカメラを向けるだけで色を調べられるので、フォトショップでスポイトで調べるよりも簡単だ。(ただし、正確なカラーコードではないが)

また、持っている画像に使われている色も調べられる。

これがあるとなにがよいかと言うと、先ほど述べたように、日常生活における綺麗な色や上手い色の組み合わせなどがあれば、適宜集めたりすることができる点だ。
活用していくことで、もっと外の何気ない広告や看板やロゴ、自然などに目を向ける習慣を身につけていけたらよいなと思う。

正規表現_行末の否定行選択

行末が「"」でない行のみ、行ごと選択する方法。

^(?!.*").*


注:行末が「"」でない行の行末のみ選択する方法については分かりません。

Webサイト_ログイン機能_基本認証_htaccess

分かりやすい

allabout.co.jp

Webアプリ_ゲージ付きタイマー_focus-booster

視覚的に残り時間が分かるゲージ付きのタイマーをパソコンに表示させて作業したいと思ってて、こんなのを見つけた。
 
まだ使ってないので、実際どんなか分からないが、興味ある。
 

Web_オブジェクトワークスとDataStoreについて

あまり資料が見当たらなかったけど、これがわかりやすかった。
 
 
 

GoogleChrome_ネタ_オフライン時

暇つぶし、というかうんちくに近い。

f:id:tamaking01:20160503125803p:plain
 
f:id:tamaking01:20160503130039p:plain
 
f:id:tamaking01:20160503130056p:plain
 
上記のようにインターネットに接続できない時は、
ちょっとしたゲームができる。
いわゆる横スクロールタイプのやつで、
○リオよろしく、自動で画面右に進んでいくので
障害物を越えていくだけというゲーム。
 
やりかたは簡単で最初の画面でスペースキーを押すだけ。