2017-12-10

MAMPを使わずにlocalhostを作る

environment

macに標準でインストールされているApacheとPHPを使ってlocalhostを作ったのでメモです。
せんぱいに教えてもらったのと、黒い画面に苦手意識があるので少しずつですが克服したいなあ、と思って練習です。

準備

以下の3つのファイルを編集します。

/etc/apache2/httpd.conf
/etc/hosts
/etc/apache2/extra/httpd-vhosts.conf

手順

1. /etc/apache2/httpd.confの編集

viに慣れたいのでviで編集しました。
ターミナルでこのコマンドを叩きます。
sudo vi /etc/apache2/httpd.conf

1-1.まずバーチャルホストが使えるようにコメントアウトを外します。

160行目付近

#LoadModule vhost_alias_module libexec/apache2/mod_vhost_alias.so
↓
LoadModule vhost_alias_module libexec/apache2/mod_vhost_alias.so

499行目付近

#Include /private/etc/apache2/extra/httpd-vhosts.conf
↓
Include /private/etc/apache2/extra/httpd-vhosts.conf

1-2.PHPが使えるようにコメントアウトを外します。

169行目付近

#Include /private/etc/apache2/extra/httpd-vhosts.conf
↓
Include /private/etc/apache2/extra/httpd-vhosts.conf

2. /etc/apache2/extra/httpd-vhosts.confの編集

sudo vi /etc/apache2/extra/httpd-vhosts.confで編集します。

一番下の行に以下を記述します。

<VirtualHost *:80>
    ServerName cidermitaina.localhost

    CustomLog "/private/var/log/apache2/access_log_[projectname]" common
    ErrorLog "/private/var/log/apache2/error_log_[projectname]"

    DocumentRoot "/Users/[name]/[directory]/[projectname].localhost"
    <Directory "/Users/[name]/[directory]/[projectname].localhost/">
        AllowOverride All
        Options FollowSymLinks Indexes
        DirectoryIndex index.php index.html
        Require all granted

        Order Allow,Deny
        Allow from all
    </Directory>
</VirtualHost>

[name],[directory],[projectname]は適宜変更してください。

3./etc/hostsの設定

sudo vi /etc/hosts

以下の記述を追加します。

127.0.0.1 localhost [projectname].localhost

4 Apacheを再起動

httpd.confの文法チェック

sudo apachectl configtest

Apacheを再起動

sudo apachectl restart

5 確認

[projectname].localhostにアクセスしてページが表示されたら成功です。

memo

viに慣れていないのでviで使ったコマンドメモ

i　
→ カーソルの左からインサートモードへ移行

a
→ カーソルの右からインサートモードへ移行

Esc
→ コマンドモードに帰る／インサートモード解除

:q
→ 終了

:wq
→ ファイルに保存して終了

/検索したい文字列 
→ 前方検索

少しずつ黒い画面に慣れよう計画中です。。。
viも少しずつですが、慣れていきたいなあ、と思っています。
（あわあわしながらviでファイルを編集してました。）

2017-11-27

gulp4.0にしました。

gulp

大きい案件が始まるので、開発環境を整理したいと思っていたのですが、いろいろ考えた結果gulpのバージョンを4.0にしてみることにしました。

悩んでたこと

ページ数の多い案件はgulp、ejsを使ってhtmlにコンパイルするっていう開発をしていました。ですが、ページ数が多くなるとリロードが遅くなったり、何度もリロードされたり不安定な挙動でした。

原因はhtmlが変更されたらオートリロードが走るっていう記述のせいで、ejsでhtmlをたくさん吐き出すと毎回オートリロードが走ってしまい不安定な挙動になっていました。

そこで、htmlが変更されたタイミングではなくて、ejsが変更されてタスクが終わった後にオートリロードを走らせる処理に変更したいなあ、と考えていました。

やりたかったこと

gulpのタスクの実行順を指定したかったのですが、いろいろ調べているみると、

・ run-sequenceを使う方法

・ gulpのバージョンを4.0にあげて'gulp.series'を使う方法が見つかりました。

run-sequence
複数タスクの並列／直列処理が設定できます。

www.npmjs.com

せっかくなのでgulp4.0の勉強も兼ねてバージョンをあげてみることにしました。

gulp v4.0

そもそもgulpのタスクは非同期で実行されるから高速なのかなあ、と勘違いしていたのですが、ドキュメントを読んでみると

If more than one task is listed, Gulp will execute all of them concurrently, that is, as if they had all been listed as dependencies of a single task.

タスクは非同期ではなくて並列で実行されるみたいです。勘違いをしていました。

並列で実行されることを踏まえてgulp4.0の気になった変更点を軽くまとめます。

gulp.series,gulp.parallelで直列/並列の処理
タスクに渡す関数の制約
gulp.taskの引数

その他の変更点は以下で確認してください。。。
https://github.com/gulpjs/gulp/blob/4.0/CHANGELOG.md

1.gulp.series,gulp.parallel

gulp.seriesでタスクの直列処理、gulp.parallelでタスクの並列処理ができるようになりました。

gulp.series

gulp.task('default', gulp.series('build', 'server'));

buildのタスクが終わってからserverのタスクが動きます。

gulp.parallel

gulp.task('build', gulp.parallel('css', 'js', 'html'));

css,js,htmlのタスクは並列に実行されます。

2.タスクに渡す関数の制約

タスクに渡す関数の制約ができたみたいです。

最後にcallbackを実行する
streamを返す
Promiseを返す
child processを返す
observableを返す

をしないとエラーになってしまいます。

例えば、 sassのタスクですが、

gulp.task("sass", () => {
    gulp.src(`${SRC}/scss/**/*.scss`)
        .pipe(plumber({errorHandler: notify.onError("Error: <%= error.message %>")}))
        .pipe(sass())
        .pipe(autoprefixer({browsers: ['last 6 versions']}))
        .pipe(gulp.dest(`${DEST}assets/css/`))
});

この書き方だと

The following tasks did not complete: sass
Did you forget to signal async completion?

こんなエラーが出てしまいます。

そのため非同期タスクにするためにstreamを返すように以下のように変更すると上手くいきました。（returnをつけてあげます）

gulp.task("sass", () => {
    return gulp.src(`${SRC}/scss/**/*.scss`)
        .pipe(plumber({errorHandler: notify.onError("Error: <%= error.message %>")}))
        .pipe(sass())
        .pipe(autoprefixer({browsers: ['last 6 versions']}))
        .pipe(gulp.dest(`${DEST}assets/css/`))
});

3.gulp.taskの引数

gulp.taskの引数が最大2つになりました。

gulp v4.0の使い方

1, gulp4.0のインストール

α版なのでローカルにgulp4.0をインストールします。

npm install gulpjs/gulp#4.0 -D

2, npm scriptにgulpを登録

ローカルにインストールしているのでnpm runコマンドでgulpが実行できるようにpackage.jsonを編集します。

"scripts": {
    "gulp": "gulp"
  },

3, gulpfile.jsの編集

好きなタスクを書いてください。

4, 実行

コマンドで npm run gulp と叩くと実行できるはずです。

最後に作ったgulp4.0の環境です。

GitHub - cidermitaina/starter-kit: html5 starter-kit

不具合があるかもですが、誰かの参考になれば嬉しいです。

2017-11-13

9 - 10月に聴いた音楽

音楽

9月から10月に聴いてた音楽について書いてみようかなあ、と思います。

すきなものを紹介したり話すのが苦手なので上手く書けるか分からないのですが、誰かと音楽を話す機会が減ったので読んでくれている誰かと共有できたら、と思っています。

今年の秋は気になるアーティストの新譜がたくさんリリースされて個人的には充実しました。

#submerese / Are you anywhere

Are You Anywhere [PT012]

アーティスト: Submerse
出版社/メーカー: Perfect Touch
発売日: 2017/10/06
メディア: CD
この商品を含むブログを見る

去年リリースしたawakeが好きすぎて2016年はずっと聴いていました。

新しいアルバムは、じめっとした気だるい感じが最高だなあ、と思いました。

#qrion / Just a Part of Life

Just a Part of Life

アーティスト: Qrion
出版社/メーカー: Moving Castle
発売日: 2017/08/30
メディア: MP3 ダウンロード
この商品を含むブログを見る

8月末にリリースされたEP。9月はこのEPをずっと聴いてました。

qrionは好きなアーティストの1人なのですが、彼女のRemixは最高で、ハズレがないです。

特に下の2曲は最高です。

#for tracy hyde / he(r)art

he(r)art

アーティスト: For Tracy Hyde
出版社/メーカー: P-VINE RECORDS
発売日: 2017/11/02
メディア: MP3 ダウンロード
この商品を含むブログを見る

11月リリースのアルバムだけど、最近ずっと聴いているので書いておきたいです、、、

都会がコンセプトみたいで聞いていてすごく東京を感じるときがあります、

去年、1人で東京に引っ越してきて不安と寂しさで東京の街が眩しくて仕方なかったのですが、このアルバムを聴きながら東京の街歩くときらきらして綺麗に見えます。

#a l e x / Growing Up, Vol. 1

なんとなく漁ってたbandcampで見つけてはまったアルバム。

特に no one would miss meの救いのない感じがたまらなくてずっと聴いてます。

夏の終わりから秋にかけて京都にいる友達が東京に来ることか多くて、懐かしさから感傷的になることが多かったです。

なので、今年の秋はなんだか落ち着いた曲ばかり聴いている気がします。

2017-11-10

gitのリモートリポジトリ作成

git

最近になって担当になった案件のgitのリモートリポジトリを自分で作るようになりました。

手順

git用のサーバーを構築してる場合の手順です。

1.リモートのホストにログイン

ssh [user@]hostname -p ポート番号

sshでサーバーにアクセスします。

-p
でポート番号を指定することができます。

ログインの認証方法はパスワード認証か公開鍵認証です。

2.作りたいディレクトリとそのディレクトリの中にrepos.gitを作成

mkdir -p ディレクトリ名/repos.git

3.repos.gitに移動、リポジトリを作成

cd ディレクトリ名/repos.git

git --bare init --shared

いつもおまじないみたいに使ってたのでちゃんと意味を理解したくて調べてみました。

--bare: ベアリポジトリを作成する。ベアリポジトリは、作業ディレクトリを持たないリポジトリで、外部に公開し、作業を中継するリポジトリとして使用。

--shared: リポジトリを他のユーザと共有する場合に、利用する

ふう、これでgitのリモートリポジトリの完成です。

2017-11-07

チェックされた値を、URLパラメータに入れて送る

このあいだフォーム案件をやっていたのですが、ラジオボタンのチェックされている値を GETして最後に値をPOSTするっていうことをJSで実装しました。

質問？アンケートページ？みたいな感じです。

フォーム案件をする機会が少なかったのでGET？POST?ってなってしまって、悲しかったのでメモです。

GETとPOSTの違い？

そもそもGETとPOSTの違いがいまいち分かりませんでした、、、

GETだとURLに付加してリクエストするので目でパラメータを見ることができて POSTだと見えないっていうことなのかな？

GET

リクエストとして送信されるデータはURLに含まれる
(「URL?パラメータ名=値」という形式) 「?」パラメータのはじまり「&」パラメータの切れ目「=」挟んだ左側がGETの変数名、右側が渡される値
データを取得したい時に使用
データベースの書き換えが必要ない場合。

POST

リクエストとして送信されるデータはメッセージボディ部に含まれる
メッセージボディは、HTTPリクエストのパラメータ内容を渡す場所。
データを変更したい時に使用
データのソート、更新、削除、新規登録などで使用する場合。
パスワードのような秘匿情報をURLに表示したくない場合。
データ量が多い場合。
バイナリデータを送信したい場合。

URLなどを送信したい場合はGET、秘匿性の高いデータやデータベースなど重要度の高いデータ、大量のデータを送るときはPOSTを使うみたいです。

値をGETして最後にPOSTしたい

今回やりたかったことは次へボタンを押したときはラジオボタンにチェックされている値を次のページにGETして最後の送信ボタンでチェックされている値全てをPOSTするということです。

 var param = location.search;

    //次へ進むボタン
  $('.nextButton').on('click',function(){
        var value = $('[name=radio]:checked').val();
        var link = $(this).attr("href");

        if (value == null){
            //undefined(リンク無効)
            alert('選択肢１つ選んでから次設問にお進みください。');
            return false;
        }else{
            if(param){
                $(this).attr("href",link + param + '&' + value);
            }else{
                $(this).attr("href",link + '?' + value);
            }
        }
    });
 　 //回答完了ボタン
    $('.submitButton').on('click',function(){
        var value = $('[name=radio]:checked').val();

        if (value == null){
            //undefined(リンク無効)
            alert('選択肢１つ選んでから次設問にお進みください。');
            return false;
        }else{
            param = param.replace('?','');

            $(this).attr("value",param + '&' + value);
        }
    });

location.searchはクエリ部分を取得、変更するプロパティ

val()は全ての要素のvalue属性を返す。

まずラジオボタンがチェックされているかどうか判別します。
値が入ってないときは進まないように、値が入っているときはURLに値を付与していきます。
値を付与するのはattrでhrefを変更します。
１問目のときは'?' + 変数value(チェックされている値） ２問目以降は1問目以降の値に&で値をつなげていきたいので変数param（クエリ部分）+ '&' + 変数value(チェックされている値） になります。
送信ボタンをクリックしたときはPOSTしたかったので送信ボタンのvalueをattr("value",param + '&' + value)で変更して最後にPOSTします。

組み込みはシステム会社さんがするのでここまでなのですが、きちんと値がPOSTされるかどうか<?php print $_POST['name']; ?>で確認。ばっちりでした！

フォーム案件をする機会が少なかったでのこれを機にPHPでフォームを作って理解を深めたいなあと思ったり。（苦手意識があります。。。）

あ！URLを操作する実装ははじめてだったのできちんと覚えたいです。

2017-11-06

ブログはじめました。

はじめまして。こんにちは。なんとなくですが、ブログを作りました。

主にプログラミングについて書いていこうかなあ、と考えています。

自己紹介

1回目の記事は簡単に自己紹介をしようと思います。
7月生まれの25歳です。
すきなことは音楽と本とゲームと紅茶。きらいなことは早寝早起きです。

新卒（2015年）で入った会社は京都の地方銀行だったのですが、（預金担当でした。）
いろいろと思うことがあって2016年の夏から東京（三鷹）に引っ越して都内某Web制作会社でフロントエンドエンジニアとして働いています。

プログラミングを専門的に勉強していた訳ではないし、文系出身（専攻は会計学）だったのでここ1年間お仕事中はずっとあわあわしてたのですが、やっとプログラミングやwebに慣れてきた感じです。
ただ、とても物覚えが悪くて、人がすぐにできることに倍の時間をかけてしまうタイプなので日々勉強したことを記録していこうと思って始めたブログです。
たぶん間違った知識も書いてしまう気がするのでそのときは優しく教えてくれると嬉しいです。。。
あと、本を読むことが好きなくせに文書を書くことが苦手なので、ブログを通して克服したいななんて思ってもいます。

今後の更新内容ですが、HTML、CSS、JS、PHP、後は読んだ技術書や小説、最近聞いている音楽やはまったゲームなんかを書けたらなあと思っています。

では、よろしくおねがいします。

準備

手順