カテゴリー
その他

ターミナルでよく使うショートカット

Macのターミナルでよく使うショートカットをメモ。
ctrlとの組み合わせが多いです。

カーソル移動

カーソルを一文字進める

ctrl + f
十字キーの→と同じ動き

カーソルを一文字戻す

ctrl + b
十字キーの←と同じ動き

行頭に移動

ctrl + a
同じディレクトリに対して、同じコマンドを行うとき、行頭に移動してコマンドだけ変更すると楽

行末に移動

ctrl + e

 

削除

カーソル位置から行頭まで削除

ctrl + u

コマンドを一行まるっと削除したいとき、行末まで移動「ctrl + e」と組み合わせると楽

カーソル位置から行末まで削除

ctrl + k
コマンドを一行まるっと削除したいとき、行頭まで移動「ctrl + a」と組み合わせると楽

カーソル位置の1文字を削除

ctrl + d

コマンド履歴

ctrl + n

ctrl + p

画面クリア
ctrl + L

カテゴリー
その他

Homebrewのインストール

Homebrewとは、macOS用のパッケージマネージャーです。
パッケージマネージャーがあると、コマンド1つでツールをインストールできるので便利。

通常インストールだとうまく動かなかったツールもHomebrew経由ならうまく動くことがあります。

インストール自体は公式サイトの案内に沿って、ターミナルからコマンドを実行するだけですが、念のためメモ。

Homebrew公式サイト

https://brew.sh/index_ja

インストールするには次のコマンドをターミナルで実行します。

/usr/bin/ruby -e "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/master/install)"

このコマンドは、curlコマンドで取得したデータをrubyで実行します!というもの。

XcodeというApple公式の開発ツールをインストールしていない場合、途中でインストールされます。
※その際、パスワードを求められるので入力します。

最後にsuccessful!と表示されればインストール完了です!

カテゴリー
その他

ブックマークレットで楽天のPC版とスマホ版を切り替える

楽天RMSで商品を登録して、スマホ版のページをチェックしたい!って時、URLの末尾に「?force-site=ipn」を追加すればスマホ版に切り替わるのでこれで確認してます。

毎回URLを変更するのは面倒なので、ブックマークレットに登録しました。念のためメモしときます。

これで確認するのは画像が表示されているか?などの簡単なチェックだけです。レイアウトの確認は実機やChromeのモバイルエミュレーターを使用します。

var rakutenURL = location.href;
var urlSP='?force-site=ipn';
if(document.location.href.indexOf(urlSP) > 0){
  changeURL = document.location.href.replace(urlSP,'');
} else {
  changeURL = document.location.href + urlSP;
}
window.open(changeURL);

コードに改行が含まれているとうまく動作しません。
手作業ですべての改行を削除するのは大変なので、ブックマークレットのコードに変換できるサイトを利用します。

いつもお世話になっているサイトはこちら。

https://ytyng.github.io/bookmarklet-script-compress/

カテゴリー
その他

ブックマークレットで本番環境とテスト環境のURLを切り替える

今回はWEB制作でよくあるテスト環境と本番環境のURL切り替えを、ブックマークレットで実装したのでメモしときます。
※動作確認はChromeのみです。

ブックマークレットとは

気に入ったウェブサイトをブラウザのお気に入りに登録すると、通常そのサイトのURLが登録されますが、
URLの代わりにプログラムを登録すると、表示しているページに対してちょっとした動作を自動化できたりします。

var area = location.href; //現在のURLを取得
var urlFlag = false; //変換するURLがあるか判定

function changeUrl(testUrl, honbanUrl) {
  //テストURLがあれば本番に置換、またはその逆
  if(document.location.href.indexOf(testUrl)>0){
    area=document.location.href.replace(testUrl,honbanUrl);
    urlFlag = true; //URLを置換したらフラグを更新
    window.open(area);
  } else if(document.location.href.indexOf(honbanUrl)>0){
    area=document.location.href.replace(honbanUrl,testUrl);
    urlFlag = true; //URLを置換したらフラグを更新
    window.open(area);
  } 
}
//関数実行
changeUrl('www-test.example.com','www.example');
changeUrl('XXX.XXX.X.XXX','www.test.jp');
//変換するURLがなければアラートを出す
if(urlFlag === false) {
  alert('このURLには対応していません!')
}

コードに改行が含まれているとうまく動作しません。
手作業ですべての改行を削除するのは大変なので、ブックマークレットのコードに変換できるサイトを利用します。

いつもお世話になっているサイトはこちら。

https://ytyng.github.io/bookmarklet-script-compress/

※コメントが入っているとうまく変換されない可能性があるので、削除して変換します。

カテゴリー
その他

ブックマークレットでテスト環境のタグが入っていないか確認する

がんばって制作したウェブページをついに本番公開!なのにうっかりテスト環境の測定タグを入れちゃってた!!ってことないですか?

私はあります。。

最近ではGoogleタグマネージャーをはじめとするタグ管理サービスがあるので、そういった事故はなくなってきました。

でも!どうしても!ここのリンクはhttpsから始まる絶対パスをかかないとダメなの!ってことも結構あると思います。でも毎回いちいちコードを開いてチェックとかめんどくさい!1ページ位なら許すけど10ページ以上になるとやってられません。

そこで本番公開した時に、本来あってはイケないコードを検索するブックマークレットを作ったのでメモ。

var htmlTxt = document.getElementsByTagName("html")[0].innerHTML;
var keyword = "www-test";

htmlTxt.replace( /<!--[\s\S]*?-->/g , '');
result=htmlTxt.indexOf(keyword);

if(result !== -1){
	var count = (htmlTxt.split(keyword).length - 1);
	alert(keyword + "が" + count + "個あります。確認してください!");
} else {
	alert("OK!");
}

今回もブックマークレット変換サイトを利用します。

https://ytyng.github.io/bookmarklet-script-compress/

ちなみに100ページ以上のチェックが必要だったら、素直にウェブ解析したほうが良いと思います。。

カテゴリー
その他

ウェブ制作で良く使う正規表現

ウェブ制作以外でも重宝する正規表現。覚えておくと何かと便利ですよね。
いざ使うという時に忘れるので、自分用にメモしておきます。

最後の空白以降を選択する

^\n

利用シーン
余計な空白行を削除する時便利。

最後の文字を取得する

([\s]+)[^\s]+$

参考サイト

特定のコメントに囲まれたコードを選択する

<!--\s*コメントここから(\s|\S)*?コメントここまで\s*-->

利用シーン
測定タグなど、決まったコメントで囲まれたタグを一括削除するのに便利

<結果>

URL一部置換

利用シーン
ドメインと、ファイルの拡張子が一部違う。こんなURLを一括変換するときに便利

<変換前>
href=”https://example.com/category/items00.html”

<変換後>
href=”https://test.jp/items00/”

href="(.*[^/]?/)(.*)\.html
href="https://test.jp/$2/
置換するところ
・ドメイン
・最後のファイルの拡張子を削除してディレクトリにする

<変換前>
href=”https://example.com/category/items00.html”

<変換後>
href=”https://test.jp/items00/”