CSSで高さが不揃いの要素の高さをJavaScriptですべて合わせる

下記のような高さが不揃いの要素があったとする。

スクリーンショット 2018-06-28 8.58.19.png

<style>
.columns {
margin: auto;
overflow: hidden;
}
.columns .column {
float: left;
padding: 40px;
margin: 10px;
text-align: center;
border: 1px #ddd solid;
}
</style>
<div class="columns">
<div class="column" style="height:50px;">50px</div>
<div class="column" style="height:150px;">150px</div>
<div class="column" style="height:250px;">250px</div>
</div>

ケツに下記のスクリプトを入れると良い。私お手製ですが自由にお使いくだしあ。

<script>
  var columns = Array.prototype.slice.call(document.querySelectorAll('.columns .column') ,0);
  var maxHeight = Math.max.apply(null, columns.map(function(column) { return column.clientHeight; }));
  columns.forEach(function(column) {
    column.style.height = maxHeight + "px";
  });
</script>

スクリーンショット 2018-06-28 8.58.36.png

これは存在する高さから最も高さが最大になる高さを調査し、その高さをすべての要素に再適用することで実現しています。jQueryを入れずともできるのでぜひ活用してください。

あと、こんな感じで分からない事、お仕事で承っております!いつでもご連絡ください!

2018年版 Amazon APIでPHPを使って商品を検索する

いろいろな情報があったが、シンプルな下記のコードでいけた。teratailを使って良い人に尊い教えをもらいながら最終的に自己解決しました。

$accessKey = "access";
$secretKey = "secret";
$associateTag =  "tag";
$endpoint = "webservices.amazon.co.jp";
$uri = "/onca/xml";
foreach ([
"Service" => "AWSECommerceService",
"Operation" => "ItemSearch",
"AWSAccessKeyId" => $accessKey,
"AssociateTag" => $associateTag,
"SearchIndex" => "Apparel",
"ResponseGroup" => "Images,ItemAttributes,Offers",
"Keywords" => "ブラジャー",
"Timestamp" => gmdate('Y-m-d\TH:i:s\Z')
] as $key => $value) {
$params[rawurlencode($key)] = rawurlencode($value);
};
ksort($params);
$queries = [];
foreach ($params as $key => $value) {
$queries[] = "$key=$value";
}
$queryString = join("&", $queries);
$signature = base64_encode(hash_hmac("sha256", join("\n", ["GET", $endpoint, $uri, $queryString]), $secretKey, true));
echo file_get_contents("https://$endpoint$uri?$queryString&Signature=" . rawurlencode($signature));

ちなみに、なんか昔はもうちょっと違うリクエストだったみたいなので、2018年と書いておきました。また仕様が変わるたびに、この記事に追記していきたいと思います。

それと、こういうのは外部ライブラリを使ったほうが良いとteratailで教えてもらいました。それでもいいのかもしれないですね。

Docker Swarmでスタック単位・サービス単位でアプリケーションを管理する

APIバージョンは1.37あたり。スタックとかサービスとか、ちゃんと整理しないと理解がおっつかないのでまとめておきました。

スタック単位での作業

デプロイ

Docker Documentationによるとyamlの内容をcatで渡すことができるようだ。(ということはどこかに上げてあるものをcurlで取ってこさせることもできる。)スタックはデプロイと同時に作成される。--pruneをつけることでreplica数の変更時にゴミコンテナを残さない。

cat docker-compose.yml | docker -H swarm-host stack deploy stack-name --compose-file - --prune

これでイメージが更新されたものはデプロイが走る。スタックの中には様々な依存関係としてのサービスが起動していると思うが、イメージが更新されたものだけがデプロイされるのでRedis等が落ちる事は無い。逆にこれでは特定のサービスを再デプロイ(正しくは再起動)できないと思うかもしれないが、service update--forceをつけることで再起動ができるので、サービスが何かおかしいので再起動したい時はこれを使う。

docker -H swarm-host service update service-name --force

スタックの一覧を見る

スタックが正しく作成されたかどうが、既存のスタックとかぶらないスタック名でアプリケーションをデプロイする時にスタックの一覧を確認するには下記コマンドで良い。

docker -H swarm-host stack ls

メモ

  • たまにstack deployでは正しくサービスがデプロイされないことがあると思うが、そういう場合にもこれを使って強制的に再起動すると良い。)
  • service updateではイメージはpullされないのでデプロイとしては使えない。

コンテナの一覧を見る

docker -H swarm-host stack ps stack-name

サービス単位での作業

コンテナの一覧を見る

docker -H swarm-host service ps stack-name_service-name

ログを見る

docker -H swarm-host service logs stack-name_service-name

開発系のファイルをGoogleドライブに同期する

Googleドライブの同期ディレクトリ外に開発ファイルをおいて、そのディレクトリを定期的に圧縮してGoogleドライブ配下に置くことで解決します。私はこの方法でローカルにあるGitリモートリポジトリのみをバックアップしています。

zip -r "/Users/hoge/Google ドライブ/backup/hoge-app.zip" /Users/hoge/dev/hoge-app

Googleドライブは大量のファイルを入れるとなかなか同期されない。

Java系エンジニアであれば大量のclassファイルであったり、フロントエンドエンジニアであればnode_modulesの大量のファイルが永遠に同期されないと行ったことがあると思います。PHPだとcomposerの中身とか。本来classファイルであったり、node_modulesは別に同期しなくていいファイルなので、.google_drive_ignore みたいなファイルで無視できたらいいんですが、そんなものは調べたところないみたいです。

蛇足

Dropboxなら同期が早い

そうなんだが、今契約しているのがGoogle Driveなので統合して節約したい。DropboxとGoogle Driveを二重に契約するともったいない。

Gitリモートリポジトリを外部に立てればいいのでは

VPSやGithubを契約するお金を節約したい。GitBucketとか無料だが、なんか使いにくいし、なんか別にローカルにおいておいてもいいかなと。

PC自体のバックアップを取ればいい

MacならTimeMachineとかもあるんですけどね、家にモノ置いておきたくないし、平日は家でPCをじっと開くことがないからバックアップ進まないし、会社にTimeMachineとかバックアップ用のディスクとか置いておきたくないし、物理的にハードウェアをあまり保持したくない。なんかクラウドでやっておきたい。

複雑なシェルスクリプトを作る

私が思考停止してシェルから逃げる傾向があったので深掘り。シェルだけで完結すれば最終的な作業時間が減るから良いしどこでも動く。

&&||で成功と失敗時の処理を記述

&&は成功した時、||は失敗した時に繋がる。

まずはエラーを返す的なシェルを作って保存する。

exit 1

下記のような処理を実行すると13となる

$ echo 1 && sh hoge.sh && echo 2 || echo 3 || echo 4
1
3

ということは、下記の場合は12となりそうだが、124となる。

$ echo 1 && sh hoge.sh || echo 2 || echo 3 && echo 4
1
2
4

ということは135になるのかと思えばそのとおり!

$ echo 1 && sh hoge.sh && echo 2 || echo 3 || echo 4 && echo 5
1
3
5

グルーピングすると思考しやすい。

$ echo 1 && sh hoge.sh && echo 2 || echo 3 || (echo 4 && echo 5)
1
3

SQLの実行結果テーブルをMarkdownのテーブルに変換する

下記のような結果をすぐにMarkdownのテーブルに変換する方法

mysql> SELECT 2018 AS year, 06 AS month, 22 AS day;
+------+-------+-----+
| year | month | day |
+------+-------+-----+
| 2018 |     6 |  22 |
+------+-------+-----+
1 row in set (0.00 sec)

まずドラックしてコピーする

スクリーンショット 2018-06-22 12.23.52.png

+の部分を|に置換する

スクリーンショット 2018-06-22 12.24.31.png

おわり

year month day
2018 6 22

Ubuntuでsquidを使って個人プロキシサーバーを作る

様々なネットワークからリクエストを送る時に、相手先には常に一位のホストからリクエストが来ているように見せたいので個人プロキシを構築する。無料プロキシに比べて高速かつ信頼できカスタマイズ性があります。設定するホストはVPSでも自宅サーバーでもなんでもよいです。

構築方法

インストール

sudo apt install squid

今回設定するバージョン

$ squid -v
Squid Cache: Version 3.5.12
Service Name: squid
Ubuntu linux

squidの設定ファイルを編集する

sudo vi /etc/squid/squid.conf

コメントが膨大なのでコメントを消す

:%s/^#.*$//g
:g/^$/d

結果的に下記のような設定になった。

# SSL接続時に443ポート以外のCONNECTを拒否
acl SSL_ports port 443
acl CONNECT method CONNECT
http_access deny CONNECT !SSL_ports
# 匿名化
forwarded_for off
request_header_access X-Forwarded-For deny all
request_header_access Via deny all
request_header_access Cache-Control deny all
# request_header_access Referer deny all
# 接続先ポートのホワイトリスト (とりあえず最低限)
acl Safe_ports port 80  # http
acl Safe_ports port 443 # https
http_access deny !Safe_ports
# 許可するIP
acl office src 69.69.69.69
acl home src 46.49.46.49
http_access allow localhost
http_access allow office
http_access allow home
# 上記のルールに一致しない場合は拒否
http_access deny all
# squidのポート
http_port 3128
# core出力場所
coredump_dir /var/spool/squid
# キャッシュ設定を無効
no_cache deny all

構文チェック

起動時に中身に問題があっても何も言われないのでわからない。まずは構文チェック。問題があれば丁寧に教えてくれます。

sudo squid -k parse

squidの起動

squidを起動する

sudo systemctl start squid

内部から疎通確認 (正しく起動したか確認するため)

curl -sS localhost:3128

外部から疎通確認 (ufwで遮断されていないか確認するため)

curl -sS proxy-host:3128

PHPでプロキシを経由してコンテンツへアクセスする適当なコードを実行して確認する。この場合はhoge.phpとかいう名前で下記のファイルを保存してphp hoge.phpとかすれば良い。中のproxy-hostは自分のプロキシのIPアドレスとかにすると良い。

<?php
$targetUrl = "http://yahoo.co.jp";
$contents = file_get_contents($targetUrl, false, stream_context_create([
"http" => [
"method" => "GET",
"proxy" => "tcp://proxy-host:3128",
"request_fulluri" => true
]
]));

参考