YoutubeのURLからmp3を抽出する

環境

Macのみの方法です 前提として、brewコマンドを実行出来るようにしておいてください。

youtube-dlとffmpegのインストール

$ brew install youtube-dl ffmpeg

保存用ディレクトリの作成

// カレントディレクトリ
$ cd

// Youtube ディレクトリの作成
$ mkdir Youtube

aliasの作成

$ vi ~/.bash_profile

vimで編集する

alias mp3="youtube-dl --extract-audio --audio-format mp3 -o '~/Youtube/%(title)s.%(ext)s'"

上記を入力した後、:wqで保存して終了します。

終了後以下を実行

$ source ~/.bash_profile

これで準備完了

Youtubeからダウンロードする

Youtubeで再生画面を表示し、そのページのURLをコピーします。 そしたら、以下を実行することで、mp3をダウンロードできます

$ mp3 "YoutubeのURL"

特定のディレクトリ以下の全ファイル末尾に同じ文字列を追加する

以下のようなディレクトリ構成で、その共通したファイルの末尾に同じ文字列を追加するという処理のメモ 検索をして、sedコマンドが一般的だったけど、いまいち使い方がわからなかったので、echoで適当にやった

// ディレクトリ構成は以下
roo/
- a/
- - hoge.txt
- b/
- - hoge.txt
- c/
- - hoge.txt
- d/
- - hoge.txt
- e/
- - hoge.txt

rootディレクトリがあり、その直下に、a,b,c,d,eという5つのディレクトリが存在している。 その5つのディレクトリ配下にそれぞれhoge.txtというファイルがあり、そのhoge.txtに共通した文字列を追加したいというのがやりたいこと。

いかがその答え

$ echo "追加したい文字列" >> ./*(全てのディレクトリ)/対象となるファイル

// hoge.txtにHelloという文字列を追加したい
$ echo "Hello" >> ./*/.hoge.txt

// 以下でも同じことができる。*こちらの方が汎用的
$ echo "Hello" >> ./*/*.txt

最後の部分は、.txtという拡張子がついたファイルをという意味になるので、ファイル名を変更しても.txtという拡張子がついていれば適用される。

ターミナルでお天気チェック

ターミナルでお天気をチェックできる方法を紹介します。

情報ソースがどこか忘れてしまったのですが、以下のコマンドをターミナルに入力するとお天気が表示されます。

// Kanagawaの部分をご自分の出身都道府県に変更してお使いください
curl -4 wttr.in/Kanagawa

f:id:sayamaken0402:20160224103850p:plain

Javascriptのdebuggerがすごく便利

Javascriptデバッグが辛い

Webアプリケーションを作っていると多用するJavascriptjQueryは大好きだったのですが、AngularJSを書き始めてからJavascriptの辛さを身にしみて感じています。

今までなぜ知らなかったのかJavascriptデバッグdebuggerというものが用意されていることに。。。 それまでは必死にlogに出したり、alert出したりしてって状態だったので、ブレークポイントを置けるdebuggerは感動ものでした。

使い方は簡単

使い方は簡単で、処理が通っているかどうか確認したい箇所にdebugger;を置いてあげればいいだけです。 以下は簡単なサンプルなのですが、textareaの中が変更された場合に入力された文字列を取得するという処理を書いています。

f:id:sayamaken0402:20160216171415p:plain

ではブラウザで処理が正しく通っているか確認します。 textareaの中に文字列を打ち、Enterをするとdebuggerを置いてある位置で処理が止まるのが、Developper toolのconsoleから確認できます。

f:id:sayamaken0402:20160216171755p:plain

おまけに変数valの中身も取得してくれていました! debugger便利!

mysqlをコマンドラインで操作する 1

MySQLコマンドラインで操作する基礎

今回はmysqlコマンドラインで操作する方法の触りを書きます。 データベースの作成は次回に更新しますので、ご了承ください。 ※ Macでのやり方になります。

MySQLをインストールする

homebrewが使える前提で話を進めます。 homebrewは下記の記事を参考にインストール出来ます。

ken-sayama.hateblo.jp

ターミナルを開きます。

brew install mysql
//以下のコマンドでバージョンを確認出来ます
mysql --version

MAMPなど他のソフトウェアで動作させているMySQLは停止させておいてください。

コマンドラインから操作する

//mysqlを起動
mysql.server start
//rootユーザーでログインpasswordをきかれるので入力。
mysql -u root -p
//存在するdetabaseを確認
mysql> show databases;
//使うデータベースを選択
use データベース名; //例:use test_detabase;
//テーブルを確認
show tables;
//カラムを確認
desc テーブル名; //例:desc users;
//登録しているデータを確認
select * from テーブル名; //例:select * from users;

続きは次回に更新します。

GitHubにssh接続する手順

GitHubssh接続するための優しい手順

ローカルとWeb上のGIthubは通常sshという、暗号化通信プロトコルを使って通信しています。sshを使うためにはsshの設定をしないといけません。

以下手順です。※ OS Xの手順になります。

1. ssh keyが存在するか確認する

ターミナルを開き、以下のコマンドを入力

ls -al ~/.ssh

上記コマンドを入力後、id_rsa.pubもしくはid_dsa.pubというファイル名が存在した場合、「3」の手順から行ってください。

2. 新しいssh key を作成する

ターミナルに以下のコマンドを入力。

ssh-keygen -t rsa -C "hoge@hoge.com"  //ダブルクオテーションの中は自身のメールアドレスを入れてください。

Enterを押すと、以下のコメントが出て、ファイルを保存する場所の確認をされるので、こちらもEnterを押します。

f:id:sayamaken0402:20160104232443p:plain

次にパスワードの設定をします。 f:id:sayamaken0402:20160104232639p:plain 二回任意のパスワードを入力し、Enterを押します。 僕の場合、4桁の数字を入力したところ、failed: passphrase is too short短すぎるよ!と怒られてしまったので、再度桁数を増やしたところ、成功しました。 念の為、生成されているか手順「1」に戻って確認しておいてください。

3. ssh keyをクリップボードにコピー

以下のように入力して、公開鍵の内容をクリップボードにコピーしておきます。

pbcopy < ~/.ssh/id_rsa.pub

4. GitHubに登録する

ローカルでssh keyを生成したら、GitHubに登録します。 https://github.com/ のマイページにアクセスし、右上の自身のアイコンから、「Settings」をクリック。

f:id:sayamaken0402:20160104234121p:plain

上記メニューの「SSH Keys」をクリック。

f:id:sayamaken0402:20160104234218p:plain

「Add SSH key」をクリックすると以下のフォームが出るので、入力していきます。

f:id:sayamaken0402:20160104234316p:plain

  • 「Title」には適当に自分でわかる端末の名前。僕の場合はMacbookproとしておきました。
  • 「Key」には先ほど、手順3でクリップボードにコピーしたので、「command+v」で貼り付けます。
  • 「Add key」を押します。パスワードの入力を求められるので、入力します。 以上で完成です。

5. 登録できているかの確認

ssh keyをGitHubに登録できているのか、確認してみます。 ターミナルを開いてください。

ssh -T git@github.com

以上を入力後、Enter。

f:id:sayamaken0402:20160104235025p:plain

以上のように聞かれるので、yesと入力。 すると、手順2で設定した、ssh keyのパスワードを聞かれるので回答。 すると、

f:id:sayamaken0402:20160104235209p:plain

このように、成功した旨のメッセージが表示され無事にssh接続が出来ていることが、確認出来ました。

jQuery理解のための手順

自己流jQueryの理解の仕方

自分も大してjQueryを書けるわけではないのですが、今はやりたい機能に関してはなんとなく形に出来るようになったので、その際にこの理解の仕方いいなっと思った方法を書いておくので、参考にしていただければ嬉しいです。

文法をしっかり理解する

1にも2にも最低限の文法を理解しないまま、jQueryやその他JavaScriptライブラリを触っていてもいつまでたっても理解出来ませんでした。jQueryは少し理解出来ればとっても簡単に記述できてサイトの構築なんかにはとても便利です。

jQueryの基礎文法

f:id:sayamaken0402:20151216172431p:plain

例えばこのようなHTMLがあったとして

f:id:sayamaken0402:20151216172701p:plain

<button></button>をクリックしたら<div class="hide"></div>をフェードインさせたいとします。 個人的にjQueryの理解のコツは処理のロジックを口に出して言えるかどうかだと思います。

どこにどんなアクション(わかりやすく言うとホバーやクリックなど)があって何をしたいのか

これがすごく自分にははまって理解しやすかったです。

では続きです。 f:id:sayamaken0402:20151216173205p:plain

以下で、上述の機能「<button></button>をクリックしたら<div class="hide"></div>をフェードイン」は完成です。

f:id:sayamaken0402:20151216173909p:plain

しかし、ただフェードインさせるだけではつまらないといった時に同時に複数メソッドを呼び出すことができます。

f:id:sayamaken0402:20151216174309p:plain このようにメソッドを繋いでいくことをメソッドチェーンと言いメソッドを「.」で繋ぐことで使用できます。

少し、実践的なことをやります。 if を使い判定を行って処理をしたいと思います。 わかりやすくなるかなと思い、elseifを使ってみました。 hasClassでクラスの判定を行って処理をしています。

f:id:sayamaken0402:20151216175448p:plain

もっとスマートな書き方があるのですが、理解のためになるべくわかりやすさを重視して書きました。 自分もまだまだjQueryを使いこなせていないのですが、jQueryの勉強の参考になれば嬉しく思います!