カテゴリー
その他

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

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!と表示されればインストール完了です!

カテゴリー
css javascript

CSSとJavascriptでカードスタイルのリストをつくる

ブログの記事一覧でよくみかけるカードスタイルのリストを作成したく、今更ながらFlexboxでレイアウトを組んだのでメモ。
子要素の高さは揃うんですが、子要素の中にある孫要素?の揃え方が分からなかったので、Javascriptでなんとかしました。

親要素とその中身をこんな風に揃えてカードっぽくしたいのだが、、、。

こんな風に孫要素の縦が揃うようにしたい

要素のテキスト量が異なると、こんな風に高さがまちまちになってしまう。。

要素が可変だと、縦が揃わなくなる

サンプルは以下ページから確認できます。
動作の確認をしてみてください!

サンプルはこちら

HTMLで構造を決める

カードの内容は上から画像⇒タイトル⇒テキスト⇒日付とします。
無難に<li>タグで書いていきます。

<ul>
    <li class="list">
        <div class="img"><img src="./images/img01.jpg"></div>
        <p class="tit">タイトルタイトルタイトルタイトルタイトル</p>
        <div class="content">
            <p class="txt">テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト</p>
            <p class="info">2019年10月1日</p>
        </div>
    </li>
    <li>
        <div class="img"><img src="./images/img02.jpg"></div>
        <p class="tit">タイトルタイトルタイトルタイトル</p>
        <div class="content">
            <p class="txt">テキストテキストテキストテキストテキストテキストテキストテキスト</p>
            <p class="info">2019年3月10日</p>
        </div>
    </li>
    <li>
        <div class="img"><img src="./images/img03.jpg"></div>
        <p class="tit">タイトルタイトルタイトルタイトルタイトルタイトルタイトルタイトル</p>
        <div class="content">
            <p class="txt">テキストテキストテキストテキスト</p>
            <p class="info">2019年3月1日</p>
        </div>
    </li>
    <li>
        <div class="img"><img src="./images/img01.jpg"></div>
        <p class="tit">タイトルタイトルタイトルタイトルタイトル</p>
        <div class="content">
            <p class="txt">テキストテキストテキストテキストテキストテキストテキストテキストテキスト</p>
            <p class="info">2019年10月1日</p>
        </div>
    </li>
    <li>
        <div class="img"><img src="./images/img02.jpg"></div>
        <p class="tit">タイトルタイトルタイトルタイトル</p>
        <div class="content">
            <p class="txt">テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト</p>
            <p class="info">2019年10月1日</p>
        </div>
    </li>
</ul>

CSSで横並びにする

flexboxで<li>要素を横並びにします。
スマホ版では縦に並ぶようにします。

ul.list {
    overflow: hidden;
}
ul.list li {
    padding: 10px;
    background: #ececec;
    list-style-type: none;
    box-sizing: border-box;
    border:3px solid #828282;
}
ul.list li:nth-child(n + 2) {
    margin-top: 10px;
}
ul.list li .img_wrap {
    overflow: hidden;
    position: relative;
}
ul.list li .img_wrap img {
    width:100%;
    vertical-align: bottom;
}
ul.list li .tit {
    font-size: 1.2em;
    color:#5a441a;
    line-height: 1.35;
    font-weight: 700;
    padding-top: 10px;
    padding-left: 1.5em;
    position: relative;
    background: #F9DFD5;
}

ul.list li .tit:before {
    content: '●';
    position: absolute;
    left: 0;
    top: 0.3em;
    font-size: 1.2em;
    color: #EDA184;
}
ul.list li .content {
    background:#F0D0E4;
    width: 100%;
    padding-top: 10px;
    margin-top: auto;
}
ul.list li .content .txt {
    margin-bottom:10px;
}
ul.list li .content .info {
    margin-top: auto;
    margin-bottom: 0;
    background:#d882cd;
    text-align:right;
}
@media screen and (min-width: 768px) {
    ul.list {
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -ms-flex-wrap: wrap;
        flex-wrap: wrap;
        margin-left: -10px;
        margin-right: -10px;
    }
    ul.list li {
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-orient: vertical;
        -webkit-box-direction: normal;
        -ms-flex-direction: column;
        flex-direction: column;
        width: calc(33.33333% - 20px);
        margin-left: 10px;
        margin-right: 10px;
    }
    ul.list li .img_wrap {
        height: 190px;
        width: 100%;
        position: relative;
    }
    ul.list li .img_wrap img {
        width:320px;
        position: absolute;
        top:50%;
        left:50%;
        transform: translate(-50%,-50%);
    }
    ul.list li:nth-child(n + 2) {
        margin-top: 0;
    }
    ul.list li:nth-child(n + 4) {
        margin-top: 20px;
    }
    ul.list li .content {
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-orient: vertical;
        -webkit-box-direction: normal;
        -ms-flex-direction: column;
        flex-direction: column;
    }
}

Javascriptで孫要素の高さを合わせる

これだけだと子要素の高さはそろっても、その中にある孫要素の高さが合わないのでjavascripotで調整します 。

"use strict";

let resizeTime; //タイマーセット用の変数
const breakpoint = 768; //ブレイクポイント

//イベント登録
window.addEventListener('DOMContentLoaded', eventAdd);

window.addEventListener('resize', function() {
    if(resizeTime != null) {
        clearTimeout(resizeTime);
    }
    resizeTime = setTimeout(function() {
        eventAdd();
    },1000);

});

//高さを合わせる要素を指定
function eventAdd() {
    heightElm('.list li .content');
    heightElm('.list li .tit');
}
function heightElm(className) {
    const itemlist = document.querySelectorAll(className);
    console.log(itemlist);
    const items = Array.prototype.slice.call(itemlist,0);//配列に変換
    console.log(items);
    const hary = []; //要素の高さを配列で格納
    let w = 0; //windowの幅を格納

    w = window.innerWidth; //windowの幅を取得

    items.forEach(function(item,i) {
        const elmStyle = window.getComputedStyle(item);
        item.style.height = ''; //高さの初期化
        hary[i] = parseInt(elmStyle.height);
    });
    //一番高い値を取得
    const hMax = Math.max.apply(null, hary);
    //要素の高さを設定
    items.forEach(function(item,i) {
        item.style.height = w > breakpoint ? hMax + 'px': item.style.height = '';
    });
}

スマホ版は孫要素の高さをそろえなくて良いかも知れない。

カテゴリー
Linux

VirtualBoxにApache(アパッチ)をインストールする手順

VirtualBoxにwebサーバーを構築するためにApache(アパッチ)をインストールしました。
手順を忘れないようメモしておきます。

Apacheとは世界で最も使用されているWebサーバーソフトウェアのこと。
Webサーバーソフトウェアはウェブページを表示させるのに必要なHTTP通信が可能。Webサイトを構築するには必須のソフトウェア。

Apache(アパッチ)のインストール

root権限でないと作業できないものが多いので、一般ユーザでログインしている場合、rootアカウントに切り替えます。

一般ユーザーでログインしている場合、一時的にrootアカウントに切り替える

 $ su -

rootのパスワードを入力してrootに切り替える。コマンドの冒頭が「$」⇒「#」になる。
※sudoで作業する場合、これ以降コマンドの先頭にsudoを追加する

yumコマンドでApacheをインストールする

Apacheのインストールは パッケージを管理するコマンド 「yum」を使用します。

 # yum install httpd 

Is this ok [y/d/N]:y ときかれたら、すべて「y」を入力してenter。complete!が表示されたらインストール完了。
※y入力を省略したい場合「-y」オプションを追加する。

httpdを起動する

インストールが完了したらApacheを起動します。
一度起動したら停止することはあまりない、、、と思う。

 # systemctl start httpd.service 

エラーが表示されなければ起動成功。

Apacheの基本設定

httpdの自動起動

サーバーの設定変更などで再起動した際、Apacheも同時起動するように設定しておきます。

 # systemctl enable httpd

赤の点線で囲ったような表示が出れば成功です。

念の為、設定されたか確認するには次のコマンド

# systemctl list-unit-files -t service | grep httpd

httpd.service  enabled

httpd.serviceの隣に「enbabled」と表示されればOK。ちなみにenabledは英語で使用可能の意味。よく出てくるから覚えておくと良いかも。逆にdisabledは無効の意味。

enabled 有効
disabled 無効

ファイヤーウォールの設定

ファイアウォールという通信ポートを制御する仕組みがあるのですが、デフォルトでhttp(ポート番号80)は許可されていないので通過できるように設定します。

 # firewall-cmd --add-service=http --zone=public --permanent

「success」と表示されたら、ファイアーウォールを再起動します。
これでサーバーに設定が反映されます。

ファイアーウォール再起動のコマンド

 # systemctl restart firewalld 

【余談】
もしファイアーウォールがインストールされていない場合は、次のコマンドでインストール&起動する。
httpdと同じように、自動起動の設定もしておきます。
最後のコマンドはファイアーウォールの起動確認です。「enabled」が表示されるか確認。

# yum -y install firewalld
# systemctl start firewalld
# systemctl enable httpd
# systemctl list-unit-files -t service | grep firewalld

Apacheが動作しているか確認

Apacheの動作確認をします。次のコマンドでVirtualBoxのIPアドレスを調べます。

$ ip addr
※またはip a

確認したアドレスをブラウザに入力します。
例)http://192.168.12.8/

こんな画面が出てくればApacheのインストールは成功しています。
次は自分で作成したファイルを公開ディレクトリに配置して表示を確認してみます。

公開ディレクトリのパーミッション(権限)を設定する

公開ディレクトリにhtmlファイルを配置すればウェブページを表示することができますが、まずは公開ディレクトリのパーミッションを確認します。

サーバーの動作は基本的にApacheが設定しているユーザーが実行するらしいです。その為、外部公開するディレクトリに対してApacheユーザーがr(読み)、w(書き)、x(実行)できるように設定していきます。

まず、Apacheの実行ユーザー、グループを設定ファイル「/etc/httpd/conf/httpd.conf」で確認します。

以下コマンドでファイルの中身を確認

# less /etc/httpd/conf/httpd.conf

httpd.confに記述されているUserとGroupを確認したところ、実行ユーザー&グループ共に「apache」でした。

このユーザーにr(読み)、w(書き)、x(実行)ができるように権限を設定します。
権限を設定するのは外部に公開するディレクトリです。初期設定だと「/var/www/html/」になっています。
htmlディレクトリの権限を調べたところ、実行ユーザーとグループがroot、パーテーションが「drwxr-xr-x」になっていました。

所有者rootにはr(読み)、w(書き)、x(実行)の権限がありますが、rootグループとその他ユーザーにはw(書き)権限がありません。

そこで、所有者とグループをroot ⇒ Apacheに変更します。

# chown apache:apache /var/www/html/

これでapacheに権限が付与されましたが、日頃作業するのはrootでもapacheでもない一般ユーザーがほとんどだと思います。

一般ユーザーがhtmlディレクトリにファイルの追加や削除ができないのは不便なので、一般ユーザーにもw(書き込み)権限を付与します。

今回、apacheグループに一般ユーザーを追加し、グループにw(書き込み)権限を付与することで、一般ユーザーでもhtmlディレクトリに書き込みができるようにします。

一般ユーザーをapacheグループに追加するコマンド

# usermod -g apache 【一般ユーザーアカウント】

apacheグループ権限をr(読み)、w(書き)、x(実行)に変更

# chmod 755 /var/www/html/

これで一般ユーザーでもhtmlディレクトリにファイルを追加できるようになりました。

公開するhtmlファイルを作成する

設定が終わったら、htmlファイルを作成します。
/var/www/html/(公開ディレクトリ)にindex.htmlを作成します。

エディタはvimを使用します。

# vim /var/www/html/index.html

内容はこんな感じにしました。

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>test page</title>
</head>
<body>
<p>Hello World!</p>
</body>
</html>

先ほどApacheの動作確認をしたページにアクセスして、こんな風に表示されれば成功です!

最後に

本番環境では、セキュリティ対策として、SSHのパスワードでのログイン禁止や、ポート番号をデフォルトから変更する等、必要な作業があります。

これらは別記事でまとめたいと思います!

カテゴリー
Linux

vimのカスタマイズとよく使うコマンドについて

まずvimを使いやすいようにカスタマイズします。
今回は必要最低限の設定だけなので、必要になったら順次追加していこうと思います。

vimの設定をカスタマイズする

一般ユーザーで作業していることを前提とします。

ホームディレクトリにある.vimrcファイルを編集します。.vimrcファイルがなければ作成します。

$ vim ~/.vimrc

.vimrcに以下を記述

"行番号を表示
set number
"日本語の文字化け防止
set encoding=utf-8
set fileencodings=iso-2022-jp,euc-jp,sjis,utf-8
set fileformats=unix,dos,mac
" 対応する括弧を表示
set showmatch

今回、.vimrcファイルがなかったので、一般ユーザーのホームディレクトリに作成しました。

このままだとroot環境ではカスタマイズした設定が反映されません。。そこで、/root/以下に.vimrcファイルのシンボリックリンクをはります。

$ sudo ln -s ~/.vimrc /root/.vimrc

※sudoで実行しないとPermissionエラーになります。

vimでよく使うコマンド

vimにはノーマルモード、インサートモード、ビジュアルモードの3つのモードがあります。
良く使うコマンドをまとめました。

ファイルの終了

ファイルの終了に関するコマンド

:wq 保存して終了  ※ショートカットshift +  z z(連続押下)
:w 保存
:q! 保存しないで終了

モード切り替え

インサートとヴィジュアルモードの切り替えは、ノーマルモードから行います。

vimを立ち上げたときはノーマルモードになっていますが、別モードになっている場合、escでノーマルモードに戻ります。

iまたはa インサートモードに切り替え
v ビジュアルモードに切り替え
esc ノーマルモードに切り替え

ノーマルモードのコマンド

カーソル移動

h左に移動
j下に移動
k上に移動
l右に移動

^行頭に移動
$行末に移動
%対応するカッコに移動
gg(連続で押下)先頭行に移動
G最終行に移動

コピー&ペースト

yy(連続で押下) 一行コピー
pp(連続で押下) 一行ペースト

削除

dd  (連続で押下) 1行削除(切り取り)ペーストが可能になる
x 一文字削除
Dカーソル位置から行末まで削除
d$(連続で押下)カーソル位置から行末まで削除(Dと同じ)

d^(連続で押下)カーソル位置から行頭まで削除

[ad]アンドゥ

u取り消し
ctrl+r取り消しの取り消し

検索

/検索

【検索結果の順番】
n 順方向へ検索する
N 逆方向へ検索する

ビジュアルモードのコマンド

ビジュアルモードにすると範囲を選択できるので便利。

使用するときは、まずescでノーマルモードにする。
カーソルを操作したい箇所に移動してv
※ビジュアルモードに切り変わる

コピー&ペースト(範囲選択)

矢印キーで範囲を指定してyヤンク(コピー)

貼り付けたい位置にカーソルを移動する

shift + pヤンク(コピー)した部分をペースト

削除(範囲選択)

カーソルを操作したい箇所に移動してv
※ビジュアルモードに切り変わる

d選択範囲を削除

カテゴリー
Linux

Linuxでよく使うコマンドまとめ-通常作業

Linuxで良く使うコマンドをメモ。都度追加していく予定。

SSH接続

ポート番号をデフォルトの22から変更しており、鍵認証で接続する場合。

$ ssh -p [ポート番号] -i [秘密鍵のディレクトリ/id_rsa] [ホスト側ユーザー名]@[IPアドレス]

ファイル・ディレクトリ操作

カレントディレクトリのフルパスを表示

$ pwd

ディレクトリ移動

$ cd

オプション

.. 1つ上

-1つ前

ディレクトリ作成[mkdir]

# mkdir [ディレクトリ名]

サブディレクトリも作成する場合、[-p]オプションをつける
スペース区切りで複数作成
ディレクトリにスペースを含めたい場合は””で囲む

# mkdir -p [ディレクトリ名/ディレクトリ名]

ファイル作成[touch]

ファイルの最終アクセス時刻を変更。
ファイルがなければ空のファイルを作成

# touch [ファイル名]

同じ拡張子のファイルを複数作成
$ touch {index,sample,comtact}.html

オプション

-c ファイルがない場合、新規ファイルを作成しない

ファイルやディレクトリの情報を表示[ls]

# ls

詳細表示[-l]、隠しファイルなど全て表示[-a]する場合

# ls -la

更新順に並べる

# ls -tl

ファイルの移動・ファイルの名前変更[mv]

# mv [移動元パス][移動するファイル名] [移動先パス][移動先のファイル名]

別名で同一ディレクトリ内を移動すると名前が変更になる
下記はtest1.txtをtest2.txtにリネームしている

# mv ./dir/test1.txt ./dir/test2.txt

-i 上書きするを確認

-n 上書きを確認しない

※backup やtrashなどのディレクトリを作成してゴミ箱がわりにした時によく使う

ファイルのコピー

$ cp -i [コピーするファイル名] [コピー先のファイル名]

オプション -rをつけるとディレクトリコピーになる。ディレクトリの中身も一緒にコピーされる

オプション -i で上書きする前にかくにん

$ cp -r mydir mydir2

※ディレクトリ「mydir」を「mydir2」にリネームしてコピー

$ cp *.html html/

拡張子.htmlを全てhtmlディレクトリにコピー

ローカルからリモートにFTPアップ

ローカル環境からサーバーにディレクトリをアップする。
※秘密鍵が必要でポート番号を指定する場合。

$ scp -i [秘密鍵のディレクトリ/id_rsa] -P [ポート番号] -r [ローカル:ディレクトリ] [ユーザー]@XXX.XXX.XXX.XX:[リモート:ディレクトリ]

ファイルの中身表示[less][cat]

内容が長いファイル内容を表示するには[less]が便利

# less [ファイル名]

短い内容を表示するのは[cat]で表示 ※読み方はカット

# cat [ファイル名]

ファイル作成 [cat]

ファイル内容を表示するコマンドcatの出力先をファイルにリダイレクトすることで、新規ファイルを作成

# cat > [ファイル名]
-入力したい内容
[終了はctrl+D]

※注意!すでにあるファイルに対してリダイレクトすると上書き

オプション

-n 行番号をつける

空ファイル作成[touch]

# touch [ファイル名]

ファイル検索

ファイルの中身を検索

$ grep [検索文字] -rl [検索するディレクトリ]

削除

ディレクトリの削除[rmdir][rm]

▼ディレクトリの削除(中身が空じゃないと消せない)

# rmdir [削除するディレクトリのパス]

▼ディレクトリの削除(中のファイルも同時に削除)

# rm -r [削除するディレクトリのパス]

▼エラーメッセージを表示しないでディレクトリごと削除(※実行時注意)

# rm -rf

ファイルの削除[rm]

▼確認メッセージを表示してから削除する

# rm -i [削除するファイルのパス]

ユーザー切り替え

ユーザー名を省略するとrootユーザーに切り替わる。
オプション[-] をつけると環境ごと変更&ホームディレクトリに移動

# su [ユーザー名] -

その他

コマンドのショートカット登録(エイリアス)

▼エイリアス登録

$ alias cpi= 'cp -i'

▼エイリアス一覧

$ alias

▼エイリアス削除

$ unalias cp

 

実行中のアプリ一時停止[ctrl+z]

[fg]コマンドで復帰

# ctrl + z

画面クリア[clear]

# clear

※ショートカットctrl + l でも同じ

シェルの再起動

$ exec $SHELL -l
カテゴリー
Linux

グループ管理でよく使うコマンドまとめ

Linuxにはグループという概念があり、グループごとに権限を指定できます。
グループ管理でよく使いそうなコマンドをまとめたのでメモ。

グループ一覧を確認

グループ一覧は「/etc/group」に記載されています。lessコマンドでファイルの中を表示します。

# less /etc/group

例)
wheel:x:10:centuser,testuser
※wheelグループにcentuserとtestuserが所属している

ユーザーがどのグループに所属しているか確認する

# groups [ユーザー名]

例)
centuser : centuser wheel
※centuserのサブグループは「wheel」
※プライマリグループはユーザー名のグループになる

ユーザーのグループを変更

# usermod [オプション] [グループ名] [ユーザー名]

●オプション

サブグループにユーザーを追加する(※aを追加しないと上書きになるので同時に指定) -aG
プライマリグループにユーザーを追加する -g
シェルを変更する -s

-aGオプションのaをつけないとこうなる

(1)kobanユーザーのサブグループはcentuserである
(2)Wheelグループに-Gオプション(-aなし)でkobanを追加⇒centuserグループがWheelグループで上書きされる
(3)Wheelグループに-aGオプションでkobanを追加⇒Wheelグループが追加される

グループからユーザーを外す

# gpasswd -d [ユーザー名] [グループ名]

グループを追加する

# groupadd [グループ名]

グループを削除する

# groupdel [グループ名]
カテゴリー
javascript

レスポンシブデザイン javascriptでウィンドウのリサイズを検知する

レスポンシブページを作成するとき、javascriptで動的に切り替えるときによく使うコードなのでメモ。最近はCSSでもいろいろできるみたいですが。

$(function() {
  let timer = false;
  let initWidth = parseInt($(window).width());
  const BREAK_POINT = 767;

  function deviceCheck() {
    initWidth = parseInt($(window).width());

    if(initWidth <= BREAK_POINT) {
        console.log('device_sp');
    } else {
      console.log('device_pc');
    }
  }

  function changeResize() {
    if(timer !== false) {
      clearTimeout(timer);
    }
    timer = setTimeout(function() {
      if(initWidth !== $(window).width()) {
    deviceCheck();
    }
      }, 200);
  }
  window.addEventListener('resize', changeResize);
  deviceCheck();
});
カテゴリー
その他

ブックマークレットで楽天の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/

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