情弱エンジニアのなかのblog

一人前のエンジニアになる為のブログです

vagrant内のプロジェクトをatomで開く

vagrantを使ってアプリ開発をしていましてatomでコードを書いているのですが いちいちFTPを開いてファイルを選択するのが面倒なので、 サイドにプロジェクトのツリービューを出す方法を調べました。

まずパッケージのインストールが必要になります。 atomで「remote-ftp」を検索してインストールしてください。

Packages→「Remote-FTP」というのが追加されているので「Create SFTP config file」を選択してください .ftpconfigというファイルが生成されるので設定をしていきます。

設定内容に関しましてはwindows powershellを開いて「vagrant ssh-config」で 下記のように接続に必要な情報が表示されます。

PS C:\Users\user\MyVagrant\MyCentOS> vagrant ssh-config
Host default
  HostName 127.0.0.1
  User vagrant
  Port 2222
  UserKnownHostsFile /dev/null
  StrictHostKeyChecking no
  PasswordAuthentication no
  IdentityFile C:/Users/user/MyVagrant/MyCentOS/.vagrant/machines/default/virtualbox/private_key
  IdentitiesOnly yes
  LogLevel FATAL

.ftpconfigは以下のようになっているのでssh-configの内容を参考にして記載していきます。

{
    "protocol": "sftp",
    "host": "127.0.0.1",
    "port": 2222,
    "user": "vagrant",
    "pass": "パスワード",
    "promptForPass": false,
    "remote": "/home/vagrant",
    "local": "",
    "agent": "",
    "privatekey": "/Users/user/MyVagrant/MyCentOS/.vagrant/machines/default/virtualbox/private_key",
    "passphrase": "",
    "hosthash": "",
    "ignorehost": true,
    "connTimeout": 10000,
    "keepalive": 10000,
    "keyboardInteractive": false,
    "remoteCommand": "",
    "remoteShell": "",
    "watch": [],
    "watchTimeout": 500
}

Packages→「remote-ftp」から「Toggle」を選択するとサイドバーが表示されます。 「Connect」を選択しますとサイドバーにディレクトリが表示されるので完了になります。

phpMyAdminのセットアップの際の注意点

アプリの制作などでvagrantphpMyAdminをインストールすることがあると思うのですが ブラウザで表示しようと思ったら「403 Forbidden~」と出てしまった、、という場合の対処方法を記載いたします。

phpMyAdminのインストールに関しては以下のサイトなどをみて行ってください。

qiita.com

さて「403~」と出てしまうのはアクセス権限がないからだと思われます。 なのでapachephpMyAdminの設定を編集いたします。

# vi /etc/httpd/conf.d/phpMyAdmin.conf

こちらで設定ファイルを編集できるので

<Directory /usr/share/phpMyAdmin/>
 order deny,allow
 deny from all
 allow from 127.0.0.1
 allow from ::1
</Directory>

こちら[allow from 127.0.0.1]と書いてある部分を[allow from all]に編集してください。

<Directory /usr/share/phpMyAdmin/>
 order deny,allow
 deny from all
 allow from all
 allow from ::1
</Directory>

allow from の部分ですがこちらはアクセス制限の設定でして 今回の変更で全てのアクセスを許可するという設定にしています。

こちら編集後にブラウザで確認頂きますとphpMyAdminが使えるようになっていると思います。

シンボリックリンクを使った際の注意点

アプリの制作などで仮想環境を使うことがあると思うのですが linuxシンボリックリンクを使ってアプリをブラウザで確認した際に

403
Forbidden

You don't have permission to access 、、、

と出てしまいました。 こちら調べて解決したので方法を記載いたします。 今回はCakePHPで/var/www/html 直下にシンボリックリンクを制作したと仮定します。

シンボリックリンクについては以下のブログを参考にしてください。

kazmax.zpp.jp

いくつか試したことがあるので順番に記載いたします。

1.apacheの設定変更

まずはapacheの設定を開きます。Apacheで使われている全てのファイルを対象としてアクセスの制限を設定することが出来ます。 ディレクトリ単位やファイル単位で設定することが可能です。

apacheの設定を編集します

vi /etc/httpd/conf/httpd.conf

まず「Order allow,deny」と「Allow from all」という記述があるか確認してください。 こちらは全てのアクセスが許可されるという意味になります。

<Directory "/var/www/html">
    Order allow,deny
    Allow from all
</Directory>

2.リンク先までの権限変更

シンボリックリンクのリンク先までの権限を全て実行可能にする必要があります。 例えばリンク先が「temp」だった場合

/home/vagrant/develop/temp

「temp」までのディレクトリの権限はどれも実行可能にする必要があります。

権限変更

$ chmod ○○○ vagrant

私はvagrantの部分の権限が実行不可能だったのでいつまでたってもブラウザに表示出来ませんでした。

もし詰まったら参考にしてみてください。

linuxコマンド まとめ

最近linuxのコマンドを使うことが多くなってきたので コマンドやショートカットをいくつか紹介したいと思います。

clear

画面を一度まっさらにして画面を見やすくしたいときは「clear」を使います。

f:id:nonaka-katuma-hal:20171010172324j:plain

画面が文字だらけで見えにくくなったら「clear」を使うと

f:id:nonaka-katuma-hal:20171010172449j:plain

このように見やすくなります。

ll

カレントディレクトリ内のファイルやディレクトリの権限情報を「ll」で確認できます

f:id:nonaka-katuma-hal:20171010173131j:plain

pwd

現在いるディレクトリを「pwd」で表示します

f:id:nonaka-katuma-hal:20171010173411j:plain

tab

長いコマンドやファイル名を全て入力するのが面倒な時に使えるのが「tab」キーです フォルダやファイル名の予測変換をすることができます。

f:id:nonaka-katuma-hal:20171010171910j:plain

ここでtabを押すと

f:id:nonaka-katuma-hal:20171010172001j:plain

予測して表示されます、全て入力しなくて済むので大変助かります。

/

ファイルの編集時にコマンドモードの時にファイル内の文字を検索したいときに使えます 「:/ 文字列」でカーソルより後方の文字列を検索し、移動します。

f:id:nonaka-katuma-hal:20171010174127j:plain

ちなみに 「:? 文字列」でカーソルより前方の文字列を検索し、移動します。

便利なコマンドは他にもあるので色々と使いこなしていきたいと考えています 使いこなすには少しずつでも実際に使っていくことが一番ですね

jQueryでモーダルウィンドウ 画像表示

画像をクリックして背景を暗くしてクリックした画像をモーダルウィンドウで表示するという処理をjQueryで制作したので 手順などを記載いたします。

まずはHTMLで画像の準備をします。

1.HTML

<body>
    <a href="images/temp.jpg" class="modal">
    <img src="images/temp.jpg" alt="画像"></a>
    <div id="glayLayer"></div>
    <div id="overLayer"><img src="images/article.jpg"></div>
</body>

画像が一枚表示されます。

画像を表示した後に[glayLayer]と[overLayer]というものを用意します。

[glayLayer]は半透明レイヤーをブラウザに表示します。

[overLayer]はクリックした画像を表示します

2.CSS

CSSの設定を記載いたします

#glayLayer{
    /*デフォルトだと表示しないようにする*/
    display:none;
    position:fixed;
    top:0;
    left:0;
    /*画面全体に表示する*/
    height:100%;
    width:100%;
    /*色設定 グレーに指定*/
    background:black;
    opacity: 0.60;
}

#overLayer {
    /*デフォルトだと表示しない*/
    display: none;
    position:fixed;
    /*画像の表示位置*/
    top: 30%;
    left: 30%;
}

3.jQuery

画像をクリックしてモーダルウィンドウが表示されるようにいたします。

//glayLayerがクリックされたら
$("#glayLayer").click(function(){
    //glayLayerを消す
    $(this).hide();
    //overLayerを消す
    $("#overLayer").hide();
});

//画像がクリックされたら
$("a.modal").click(function(){
    //glayLayerを表示する
    $("#glayLayer").show();
    //クリックされた画像をoverLayerで表示させる
    $("#overLayer").show();
    //clickイベントを実行した後にリンク先に移動してしまうのを防ぐ
    return false;
});

完成したらこんな風になります。

f:id:nonaka-katuma-hal:20171005180002j:plain

以上になります。

heidiSQLの使い方

最近SQLの制作をしていましてテストデータを制作するのに時間がかかっていたので 簡単にテストデータを作成するためにheidiSQLというツールを使いました。 なかなかに便利だったのでインストールの手順と使い方を記載いたします。

前提としてXAMPPが必要になります。XAMPPのインストールは以下サイト等を参考にしてください。

XAMPPをインストールする方法【超初心者向け】 | TechAcademyマガジン

1.ダウンロード&セットアップ

まずは以下のサイトからダウンロードしてください。

「HeidiSQL」オープンソースのデータベース管理ソフト - 窓の杜ライブラリ

ダウンロードが完了しましたら、使用許諾やいくつかのダイアログが表示されるので、全てデフォルトで Next をクリックします。 インストールが終了したら起動します。

2.起動と初期設定

起動の前にXAMPPのMySQLを事前にStartさせておいてください。

起動しましたら「設定のインポート」を押してください。 続いては左下の新規作成をおして適当に名前を付けてください。 f:id:nonaka-katuma-hal:20171003170649j:plain

XAMPP構築時に設定してあるパスワードを入力して接続します。 これで準備は完了です。

3.使い方

まずはデータベースを制作します。 左上の方にある先ほど付けた名前の部分で右クリックをすると「新規作成」があるので「データベース」を選択します。

f:id:nonaka-katuma-hal:20171003171246j:plain

データベースを制作したら続いてテーブルを制作します。 制作したデータベース名を右クリックで「新規作成」から「テーブル」を選択します。

f:id:nonaka-katuma-hal:20171003171555j:plain

テーブルが出来ましたら、名前を付けて「追加」でレコードを追加しますカラム名やデータ型を指定します。 テーブルが出来たら「保存」をおしてテーブルの完成です。

f:id:nonaka-katuma-hal:20171003172000j:plain

カラムを右クリックして「新しいインデックスの作成」から「primary key」を選択することでprimary keyの設定が出来ます。

f:id:nonaka-katuma-hal:20171003172315j:plain

データタブに切り替えて「+」ボタンをおしてレコードを作成、編集出来ます。 クエリタブでSQLを書いて実行が出来ます。

f:id:nonaka-katuma-hal:20171003172527j:plain

これだけでSQLの検証がだいぶ楽になります。

MySQLの外部結合の条件について

SQLの制作で結合を使うのですが外部結合を使う際の注意と仕様を今一度まとめたいと思います。

以下のようなテーブルがあると仮定いたします。

customersテーブル
     顧客名  
+---+-------+
|id |name   |
+---+-------+
|1  |yamada |
|2  |tanaka |
|3  |satou  |
+---+-------+


customer_historiesテーブル
      顧客id         媒体id
+---+------------+---------+
|id |customer_id |media_id |
+---+------------+---------+
|1  | 1          |1        |
|2  | 2          |1        |
|3  | 2          |3        |
+---+------------+---------+


mediaテーブル
     媒体名 
+---+-------+
|id |name   |
+---+-------+
|1  |aaa    |
|2  |bbb    |
|3  |ccc    |
+---+-------+

この時customersテーブルとmediaテーブルを結合したいときにJOINを使うのですが 全ての顧客データもしくは全ての媒体データを出力する必要がある場合は LEFT JOIN もしくは RIGHT JOIN を使うことになるのですが その場合customersテーブルかmediaテーブルのどちらかのデータしか全てを取得することが出来ません。

SQL文は以下のようになります。

customersをすべて取得

SELECT
    *
FROM
    customers
LEFT JOIN
    customer_histories
ON
    customer_histories.customer_id = customers.id
LEFT JOIN
    media
ON
    customer_histories.media_id = media.id

検索結果は以下になります。

     顧客名        顧客id         媒体id    媒体名  
+---+-------+---+------------+---------+---+-------+
|id |name   |id |customer_id |media_id |id |name   |
+---+-------+---+------------+---------+---+-------+
|1  |yamada |1  | 1          |1        |1  |aaa    |
|2  |tanaka |2  | 2          |1        |1  |aaa    |
|2  |tanaka |3  | 2          |3        |3  |ccc    |
|3  |satou  |   |            |         |   |       |
+---+-------+---+------------+---------+---+-------+

mediaテーブルをすべて取得

SELECT
    *
FROM
    media
LEFT JOIN
    customer_histories
ON
    customer_histories.media_id = media.id
LEFT JOIN
    customers
ON
    customer_histories.customer_id = customers.id

検索結果は以下になります。

     媒体名        顧客id       媒体id       顧客名  
+---+-------+---+------------+---------+---+-------+
|id |name   |id |customer_id |media_id |id |name   |
+---+-------+---+------------+---------+---+-------+
|1  |aaa    |1  | 1          |1        |1  |yamada |
|1  |aaa    |2  | 2          |1        |2  |tanaka |
|2  |bbb    |   |            |         |   |       |
|3  |ccc    |3  | 3          |3        |3  |satou  |
+---+-------+---+------------+---------+---+-------+

といった形になります。 必要なデータによって結合の順番やFROMに何を指定するかを変更する必要があります。