2017-10-24

gitで間違えてpushしてしまったときの対応など

Git

gitを使ったチーム開発で間違えてpushをしてしまい、githubを確認したら案の定「Compare & pull request」が出ている、、そんなときの解決方法を調べたので記載いたします。

まずは「branches」を押します

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

続いて消したいブランチを探してゴミ箱マークを押します

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

以上でgithubからブランチを削除することができます。

あとコマンドで不用意なコミットを打ち消す方法も記載します。

まず消したいコミットのIDを取得します。

$git log

commit abcdeXXXXXXXXXXXXXXXX
Author: name <hoge@huga>
Date:   Tue Mar 15 10:26:14 2017 +0900

revertを使ってコミットを打ち消します

$git revert abcdeXXXXXXXXXXXXXXXX

revertをしたのでリモートへpushします

$git push origin <ブランチ名>

以上になります。gitに関しては引き続き勉強していきますがまずはそもそもミスをしないように注意していきます。

2017-10-19

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」を選択しますとサイドバーにディレクトリが表示されるので完了になります。

2017-10-17

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

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

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

qiita.com

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

# 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が使えるようになっていると思います。

2017-10-12

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

linux

アプリの制作などで仮想環境を使うことがあると思うのですが 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の部分の権限が実行不可能だったのでいつまでたってもブラウザに表示出来ませんでした。

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

2017-10-10

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

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

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

2017-10-05

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