テスト投稿

はてぶからのテスト投稿

ブログ移行（中）のお知らせ

長らく記事を書いていませんでしたが、
Word Pressの勉強、フロントエンドの勉強も兼ねて、
個人用サイトに移行することにしました。

そのため、今後は下記サイトに追記していくことにします。
一応今までの記事は移行しました（つもり）。
awesome-hacks.com

こちらのブログも今だに1000pv/月とかありますし、
まだ移行中サイトの方は全然構築真っ最中で、
お恥ずかしながらとても見れたものではないので、
こちらのブログは残しておきます（はてブのサービスが止まらない限り。。）

今後とも宜しくお願いします。

ツール_Googleスライド_サイトに埋め込む

Googleスライドをサイトに埋め込めるらしい。

思ったより簡単。

講義・発表用にスライドでまとめて、そのままウェブ上に公開ということもできそう。

リダイレクトの警告

近いうちに試してみようと思う。

Ajaxの勉強に良さそうなサイト

Ajaxの勉強に良さそうなサイトがあったので備忘録としてメモ。
サンプルもあり、知識も体系化されているので、面白そう。
時間があるときに勉強したい。

Ajaxを勉強しよう

オンラインエディタ_webサイトへのHTML,CSS,javascript埋め込み方法と初心者にもおすすめのエディタ

最近はHTML,CSS,javascriptの解説において、webサイトへのHTML,CSS,javascript埋め込みサービスを利用するのが主流となっている。
そこで、私もそちらを利用しない手はないと思い調べた。
　
主要なサービスについてgoogleにて調べたところ、検索順位は下記となった。
　
＜私が目にした主要な＆気になるオンラインエディタについての検索結果件数ランキング（2017.08.17現在）＞

1. JSFiddle　10,200,000
2. CodePen　2,470,000
3. JS Bin　1,080,000
4. Html5 Snippet　624,000
5. plunker　268,000
6. jsdo.it　108,000
7. CSSDeck　46,900
8. Runstant　3,330

（単位：件）

　
今回、こちらに挙げたツールのうちいくつかを実際に使って試してみる。
　
　

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と異なり、MAMPのApacheとは別に既存の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と異なり、MAMPのApacheとは別に既存の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

⑦MAMPのApacheを止める

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

$ sudo apachectl stop
$

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

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

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

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

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

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

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

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

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