Laradock v5で開発環境を構築してみた

お久しぶりです。
1週間ぶりの投稿です。
今回は、Laravel ✗ Dockerを実現したLaradockで開発環境を構築しました。
最新バージョンのLaradock v5(20180809時点)は、v4と若干設定ファイルの中身が違うようなので、紹介したいと思います。

前提条件

1. Gitコマンドがインストールされている。
2. Dockerがインストールされている。
3. composerがインストールされている。
4. 80番ポートが未使用である。

手順

1. 作業ディレクトリを作成する。

$ mkdir [dir_name]
$ cd [dir_name]

2. Laravelのプロジェクトを作成する。

$ composer create-project --prefer-dist laravel/laravel [app_name]

3. Laradockをクローンする。

$ git clone https://github.com/Laradock/laradock.git
$ cd laradock

4. 設定ファイルをコピーする。

$ cp env-example .env

5. 設定ファイルを編集する。

$ vim .env

# 8行目: アプリのパス
変更前: APP_CODE_PATH_HOST=../
変更後: APP_CODE_PATH_HOST=../[app_name]

# 181行目: MySQLのDB名を変更
変更前: MYSQL_DATABASE=defulat
変更後: MYSQL_DATABASE=[app_name]

6. Nginxの設定ファイルを変更する。
この時、Chromeではxxx.devにすると、強制的にリダイレクトするようなので、その他のものにしましょう!

$ vim nginx/sites/default.conf

# 6行目: バーチャルホストを設定
変更前: server_name localhost
変更後: server_name [app_name].io

7. MySQLのファイルを変更する。

$ vim mysql/my.cnf

# [mysqld]の最終行に追加
default_authentication_plugin = mysql_native_password
$ vim mysql/docker-entrypoint-initdb.d/createdb.sql.example

# 以下のように修正
CREATE USER 'root'@'localhost' IDENTIFIED WITH mysql_native_password BY 'root';
CREATE USER 'root'@'%' IDENTIFIED WITH mysql_native_password BY 'root';
GRANT ALL PRIVILEGES ON [app_name].* TO 'root'@'localhost' WITH GRANT OPTION;
GRANT ALL PRIVILEGES ON [app_name].* TO 'root'@'%' WITH GRANT OPTION;
FLUSH PRIVILEGES;

8. ホストの設定ファイルを変更する。

# Macの場合
$ sudo vim /etc/hosts

# 最終行に追加
127.0.0.1         [app_name].io

9. Dockerを起動する。

$ docker-compose up -d nginx mysql phpmyadmin redis workspace

10. http://[app_name].io/にアクセスする。

11. データベースを作成する。

$ docker-compose exec workspace bash
$ php artisan migrate
$ exit

12. phpMyAdmin(http://[app_name].io:8080/)からデータベースにログインできることを確認する。

  • サーバ: mysql
  • ユーザ名: root
  • パスワード: root

まとめ

簡単すぎる!!!!!

スプレッドシートの内容を自動でGitHubにissueとして追加してみた

みなさん、お久しぶりです!
約1年半ぶりの記事投稿になります。
あの頃は学生でしたが、現在は社会人になって東京でエンジニアとして日々努力しています。

GitHubで複数のissueを作成するのは非常に手間なので、自動で作成する仕組みを作りたいと思います。
今回はGoogle App Script(GAS)を利用してスプレッドシートから作成します。

準備

まず、以下のページからトークンの発行をします。
注意としては、自分がオーナーであるリポジトリトークンしか発行できないようです。
github.com

データ

今回は、以下のようなデータをissueとして追加します。
f:id:usmysa:20180803012434p:plain

コーディング

変数「payload」にissueの情報を設定していますが、他にもパラメータを追加したい場合は、こちらのGitHub Developerのドキュメントを参照してください。

// GitHubの情報
var REPO = "レポジトリ名",
  OWNER = "オーナー名",
  ACCESS_TOKEN = "トークン";

function index()
{
  var sheet = SpreadsheetApp.getActiveSheet();
         values = sheet.getDataRange().getValues();
  
  for (var i = 1; i < values.length; i++) { 
    var payload = {
      "title": values[i][1],
      "body": values[i][2],
      "assignees": [
        values[i][3]
      ],
    };

    issueTickets(payload);
  }
}

// GitHubでチケットを発行する関数
function issueTickets(payload) {
  var url = "https://api.github.com/repos/"+ OWNER + "/" + REPO + "/issues";
  
  var header = {
    "Authorization": "Basic " + Utilities.base64Encode(ACCESS_TOKEN),
    "Accept": "application/vnd.github.symmetra-preview+json",
    "Content-Type": "application/json",
  };

  var options = {
    "method" : "post",
    "payload" : JSON.stringify(payload),
    "headers" : header,
  };

  UrlFetchApp.fetch(url, options);
}

GitHub

結果、こんな感じで正常に追加されています。
f:id:usmysa:20180803014136p:plain

まとめ

これで、無駄な作業を減らして快適な開発をできるかと思います!

DjangoでWebアプリを開発(1)

お久しぶりです。
約2ヶ月ぶりの投稿です。
今回は、Pythonで最も使われているフレームワークであるDjangoを使って、Webアプリを開発しようと思います。
今回作ろうと考えているのは、自分が大好きなマインスイーパーを作ろうかなと考えています。
マインスイーパーを作るのに、Djangoは向かないだろっ!っていうツッコミはご遠慮ください笑)

それでは、始めたいと思います。
まず、仮想環境の構築を始めます。

なぜ仮想環境を構築するのか

自分も最初、仮想環境を構築する必要があると言われた時になぜなのか疑問に思いました。
調べてみると以下の理由があるようです。

  1. Pythonのバージョンを固定させる
  2. パッケージのバージョンを固定させる

なるほど。
Pythonを使っていると、上記の理由で悩まされることがあるので
仮想化の必要性を理解できますね!

準備

以下のコマンドを入力して、インストールしていきます。

# pip install virtualenv virtualenvwrapper

virtualenvが仮想環境を構築するパッケージで
virtualenvwrapperは仮想環境の管理を容易にするパッケージです!

次に、環境変数を設定するファイルであるファイルを設定します。

ファイル内に以下を追加します。

export WORKON_HOME=$HOME/.virtualenvs
source /usr/local/bin/virtualenvwrapper.sh

そして、編集したファイルを反映させます。

source ~/.bash_profile

仮想環境の構築

それでは、実際に仮想環境を構築します。

# mkvirtualenv --no-site-package virtualenv
仮想環境の起動
# workon virtualenv

他にも以下のような方法があります。

# cd virtualenv
# source bin/activate

workonコマンドだと、どこのディレクトリにいても起動できるので
こっちの方が便利です。

仮想環境の無効化
# deactivate

Djangoのインストール

仮想環境の構築が済んだので、Djangoをインストールしたいと思います。

# pip install django

本日は、仮想環境の構築とDjangoのインストールを終わらせました。
次回から、実際にDjangoをさわってみたいと思います。

【MySQL】コマンドでDBをインポートする

おひさしぶりです.
だいぶ,久しぶりのブログです.

みなさん,phpMyAdminでDBをインポートしようとするとき,

「インポートするデータを受信できませんでした。ファイル名が送信されていないか、ファイルサイズが PHP の設定で許可された最大値を超えています。FAQ 1.16 をご覧ください。」

って表示されません?
これが,表示されてPHPの設定ファイルを変更するのは面倒ですよねー

なので,今回はphpMyAdminからDBをインポートするのではなく,
コマンドからDBをインポートしたいと思います.

mysql -u root -p < xxxxx.sql 

ハイ,たったこれだけ!


参考:MySQLのバックアップ/復元(ダンプ/インポート/dump/import) 基本コマンド メモ - Qiita

簡単にサーバにファイル転送

こんにちは。
普段よくサーバやRaspberry Piをいじってて、
リモートマシンにファイルを転送したいということが多々あります。
今までは、Filezillaなどのファイル転送ソフトを使わずに
sftpコマンドを使ってリモートマシンにファイルを転送してました。


しかし、いちいち「lcd」や「cd」で移動するの面倒くさいんですよね!
なおかつ、Tabキーで入力補完されないし…

ってことで、簡単にリモートマシンにファイルをコピーすることができる【scp】というコマンドが
あるそうなので、使い方をメモしたいと思います。

ローカルからリモートにファイルをコピー

# scp ローカルのファイルパス ユーザ名@リモートのホスト名:転送先パス

(例)

# scp test.txt root@xxx.xxx.xxx.xxx:/var/www/html

リモートからローカルにファイルをコピー

# scp ユーザ名@リモートのホスト名:リモートのファイルパス ローカルの転送先

(例)

# scp root@xxx.xxx.xxx.xxx:/var/www/html/test.txt .

オプション

管理者必見! ネットワーク・コマンド集 - scpコマンド:ITpro


Tabキーで入力補完をされることはありませんが、
これでsftpコマンドより何倍も簡単にファイルを転送することができます!

エイリアスを使って、面倒なコマンドを短縮化

どうも。
だいたい1週間ぶりのブログです。

みなさん
コマンドラインで作業してると、
Tabキーで入力補完がされるといえでも、
無駄に冗長なコマンドを打つのは面倒くさくないですか?

なので、エイリアスを使って面倒なコマンドを短縮化したいと思います。
今回は、「mecab -d /usr/local/lib/mecab/dic/mecab-ipadic-neologd/」
というコマンドを「mecab-ipadic-neologd」と打つだけでできるようにしたいと思います。

エイリアスに追加

# alias mecab-ipadic-neologd='mecab -d /usr/local/lib/mecab/dic/mecab-ipadic-neologd/'

エイリアスの保存

先ほどエイリアスに追加しましたが、再起動すると消えてしまいます。
なので、bashを起動すると毎回呼び出されるbashrcに追加したいと思います。

# echo "alias mecab-ipadic-neologd='mecab -d /usr/local/lib/mecab/dic/mecab-ipadic-neologd/'" >> ~/.bashrc

これで、再起動したとしても「mecab-ipadic-neologd」と打てば
正常に動作します。

参考:エイリアスでコマンドを短縮する | WEBサービス創造記

【追記】Macエイリアスに追加

まず、以下のファイルを設定します。

# vim ~/.bash_profile

次に、そのファイルに省略したいコマンドを追加します。

alias mecab-ipadic-neologd='mecab -d /usr/local/lib/mecab/dic/mecab-ipadic-neologd/'

Linuxと違って、1つの処理で済みます!
ラクちん!

JavaScriptを使って自動スクロール

どうも。
3週間ぶりぐらいのブログです。

現在、Node.jsを使ってチャットを制作しています!
元々は、講義の課題だったんですが、色々と機能を拡張中です。
見た目は、完全にL○NEです(笑)

f:id:usmysa:20160628214931p:plain

自分は、サーバサイドを担当するのが好きで
フロント側はあまりやったことがないので、L○NEもどきのUIにするのに苦戦しました…

で、現状の仕様だと
メッセージがサーバから送られてくると、下にどんどん追加される形です。
その場合だと入力/受信したら、わざわざ一番下までスクロールする必要があります。
なので、メッセージを追加されたら、自動的に最新のメッセージまでスクロールする仕様に変更したいと思います。

仕様

まず、それぞれのメッセージに対して動的にid(msg_id)を付与させます。
そして、メッセージが追加されたら、一番新しいIDの位置にスクロールしたいと思います。

jQuery

まず、メッセージにidが付与されていることを前提に話を進めたいと思います。
無難にjQueryを使って、付与したメッセージの絶対位置を求めたいと思います。

var positionY = $("#" + msg_id).offset().top;

正しく位置情報が取得できてるっぽいので、この値の位置に移動したいと思います。

$("#___id___").scrollTop(positionY);

おぉー、これで移動ができます。
しかし、なぜか18個目以降のメッセージになるとスクロール位置がおかしくなります…!
よくよく調べてみると、絶対位置の値がおかしくなっています。
ググッてみると、jQueryのoffsetを用いると、値がバグるとか…
なので、jQueryを使わないでいこうと思います。

ネイティブJavaScript

次に、生のJavaScriptで試してみたいと思います。

 var element = document.getElementById("msg_id");
 var rect = element.getBoundingClientRect();
 var positionY = rect.top;
 element.scrollTo(0, positionY);

しかし、同様に18個目以降のメッセージで位置がおかしくなっています…
次に、getBoundingClientRectではなく、offsetTopで位置を求めてみたいと思います。

 var element = document.getElementById("msg_id");
 var positionY = element.offsetTop; // 変更点
 element.scrollTo(0, positionY);

おぉぉぉ、うまく行っています!
これで一件落着です。

最近、JavaScript/Node.jsを勉強していますが、
JavaScriptはデバックしづらいので、好きじゃないですね…