Codebase Blog

Instagramのプロフィールをサイトに埋め込む

Instagramの投稿の埋め込みコードは、投稿の右上の「･･･」をクリックして表示されるメニューから、「埋め込み」を選択すると簡単に取得できます。ただ、アカウントのプロフィールについては、そのような動線が用意されていない（過去にはあった？）ように見え、検索してもサードパーティ製のサービスばかりがヒットします。

色々調べたら、簡単に埋め込むコードを見つけたので共有します。

<blockquote class="instagram-media"
  data-instgrm-permalink="https://www.instagram.com/paw.stitch/"
  style="width: 100%">
</blockquote>
<script async src="https://www.instagram.com/embed.js"></script>

data-instgrm-permalinkの「paw.stitch」の部分を、埋め込みたいアカウントのユーザー名に変更してください。また、styleタグにデザインを指定することで、サイズ等を変更することができます。例えば、横幅を400pxにしたい場合は、「style=”width: 400px”」とします。

gitの使い方まとめ

エディタの変更

コミットメッセージ等の編集に使うテキストエディタを変更するには、次のコマンドを使用します。

vimに変更

git config --global core.editor "vim"

nanoに変更

git config --global core.editor "nano"

Dockerでボリュームをコピー

Dockerの標準コマンドには、ボリュームを直接コピーする機能がありません。簡単な方法として、一時的なコンテナを起動し、コピー元とコピー先のボリュームをマウントした上で、コンテナ内でコピー処理を実行する方法があります。

まず、コピー先のボリュームを作成します。

docker volume create --name new_volume

次に、以下のコマンドを実行して、コピー元のボリュームの内容をコピー先に複製します。

docker container run --rm -it \
-v old_volume:/src \
-v new_volume:/dest \
alpine sh -c "apk add --no-cache rsync && rsync -a /src/ /dest/"

このコマンドでは、old_volume を /src に、new_volume を /dest にマウントした Alpine イメージのコンテナを起動し、/src 内のファイルを /dest にコピーしています。

コピーにはrsyncコマンドを利用しています。alpineには標準でrsyncは含まれていないため、apk addで追加した後に、rsyncを実行しています。rsyncの代わりに-aオプションを付けたcpコマンドを利用しても良いと思います。所有者やパーミッション等の情報が維持された形でコピーされます。

また、dockerコマンドに--rm オプションを指定することで、コンテナの実行が完了するとコンテナは自動的に削除されます。

Ubuntuでユーザーがsudoできるようにする

sudoはUnixやLinux系のOSにおいて、root権限でコマンドを実行するためのコマンドです。Ubuntuにおいて特定のユーザーがsudoコマンドを利用できるようにするには、そのユーザーをsudoグループに追加するのが簡単です。

$ usermod -aG sudo <ユーザー>

NginxでBasic認証を設定

Webシステムに簡易的なユーザー認証を設定する方法として、Basic認証はアプリケーション本体と切り離して簡単に導入できるためとても便利です。特に開発中のシステムをデモ目的等で一時的に公開したい場合や、少人数で利用する小さなシステムに認証を設定したい場合に有効だと思います。

.htpasswdファイルの作成

.htpasswdファイルはユーザー名とパスワードの組み合わせを保存するファイルになります。ファイル名は慣習的に.htpasswdという名前にすることが多いですが、必ずしもそうする必要性はありません。

.htpasswdファイルを作成するには、Linux上ではhtpasswdコマンドを利用するのが便利です。Ubuntuにおいてhtpasswdコマンドが利用できない場合は、apache2-utilsライブラリをインストールするのが良いと思います。

$ sudo apt install apache2-utils

htpasswdコマンドが利用できるようになったら、次のコマンドで.htpasswdファイルを作成します。

$ sudo htpasswd -c /etc/nginx/.htpasswd <username>

cオプションでファイルの出力先を指定します。Nginxの実行ユーザーがアクセスできればどこでも大丈夫ですが、Nginxの設定フォルダかアプリケーションの設置フォルダに配置するのが良いと思います。Webからアクセスできないように注意しましょう。

<username>の部分には、作成したいユーザー名を指定します。

上記のコマンドを入力すると、次のようなプロンプトが表示されますので、設定したいパスワードを入力してエンターを押してください。以上で.htpasswdファイルの完成です。

New password:
Re-type new password:

Nginxの設定

.htpasswdファイルができたら、Nginxの設定ファイルにそのファイルを指定します。Basic認証を指定したいパスのlocationディレクティブに次の設定を追加します。

server {
    ...
    location / {
        auth_basic "Restricted";
        auth_basic_user_file /etc/nginx/.htpasswd;
    }
}

auth_basicには認証ダイアログに表示させたい文字列を指定します。（ただ、最新のブラウザでは、ここに設定しても表示されないようになってしまったように思われます。）auth_basic_user_fileには先ほど作成した.htpasswdファイルのパスを指定します。

最後にNginxの設定をリロードすれば設定が適用されます。

$ sudo systemctl reload nginx

SSLで利用するよう注意

Basic認証のダイアログで入力されたユーザー名とパスワードは、コロン「:」で連結された後、Base64でエンコードされてサーバーに送られます。デコードすれば簡単にパスワードが見られてしまうため、非SSL（https://ではない）のWebサーバーでは、特別に通信が秘匿される手段が用意されている場合を除いて、利用しないようにしましょう。

WSL1＆Docker Desktop環境でファイルのマウント

Dockerコンテナを起動時にローカルのデータディレクトリや設定ファイルをコンテナ内にマウントしたい場合があると思います。しかし、CドライブをDocker DesktopのVMはを/cにマウントし、WSLは/mnt/cにマウントするため、

$ docker run -v ./conf/nginx.conf:/etc/nginx/nginx.conf

ような形で、ローカル側のファイルを指定すると、次のようなエラーが発生します。

Error response from daemon: failed to create shim task: OCI runtime create failed: runc create failed: unable to start container process: error during container init: error mounting "/mnt/c/workspace/test-app/config/nginx.conf" to rootfs a
t "/etc/nginx/nginx.conf": mount /mnt/c/workspace/test-app/config/nginx.conf:/etc/nginx/nginx.conf (via /proc/self/fd/14), flags: 0x5000: not a directory: unknown: Are you trying to mount a directory onto a file (or vice-versa)? Check if the specified host path exists and is the expected type

これを防ぐにはWSL上でも/cから始まるパスを利用するようにします。

まず/cディレクトリを作成します。

$ sudo mkdir /c

次に/cを/mnt/cにマウントします。

$ sudo mount --bind /mnt/c /c

/c配下のプロジェクトディレクトリに移動してDockerを起動します。

$ cd /c/workspace/test-app
$ docker run -v ./conf/nginx.conf:/etc/nginx/nginx.conf

※/cをマウントしても、/mnt/c配下のプロジェクトディレクトリではエラーのままになりますので、注意してください。

WSL1からDocker Desktop for Windowsを利用

WSL1からDocker Desktopを利用する方法について説明します。WSL2であればUbuntu上にDockerを直接インストールすることが可能ですが、WSL1では難しいため、DockerエンジンとしてDocker Desktopを利用し、WSL1のDockerクライアントから接続するようにします。

Docker Desktop for Windowsのインストール

こちらのページからインストーラーをダウンロードして実行します。

https://docs.docker.com/desktop/install/windows-install/

DockerのデーモンをTCPで公開

Docker Desktopを起動し、画面右上の歯車アイコンをクリックすると設定画面が開きます。Generalの「Expose daemon on tcp://localhost:2375 without TLS」をチェックし、「Apply & restart」ボタンをクリックします。これでWSL1からTCPを利用してDockerに接続することができるようになります。

WSLにDockerクライアントをインストール

こちらに記載の手順に従って、WSLのUbuntu上にDocker CLIをインストールします。ただし、Docker Engine不要なので、apt-get installの箇所はdocker-ce-cliだけを指定します。

$ sudo apt-get install docker-ce-cli

※Docker Composeを利用する場合はプラグインをインストールします。

$ sudo apt-get install docker-compose-plugin

WSLにDOCKER_HOST環境変数を設定

利用ユーザーのホームディレクトリの.bash_profileまたは.bashrcにDOCKER_HOST環境変数を設定します。この設定によりDockerクライアントはDocker Desktopを向くようになります。

$ vi ~/.bash_profile

export DOCKER_HOST=tcp://localhost:2375

ターミナルを再起動するか、sourceコマンドを利用すると、環境変数が反映されます。

$ source ~/.bash_profile

Linuxで所有者と権限を指定してディレクトリを作成

Linuxでディレクトリを作成するにはmkdirコマンドを利用します。

$ mkdir sample_dir

作成したディレクトリの所有者を変更するにはchownコマンドを利用します。

$ chown sample_user:sample_group sample_dir

さらに作成したディレクトリの権限を変更するにはchmodコマンドを利用します。

$ chmod 755 sample_dir

このように通常3回コマンドを実行する必要があるのですが、installコマンドを利用すると、ディレクトリの作成と所有者および権限の指定を同時に行うことができます。

$ install -d -m 0755 -o sample_user -g sample_group sample_dir

地味に便利です。

LaravelでCSRFトークンを入れているのに419 PAGE EXPIRED

LaravelでPOSTリクエスト等を送信する場合は、CSRF対策用のトークンをhiddenタグにセットします。通常@csrfディレクティブを<form></form>の中に入れることで、hiddenタグが自動生成されます。

これを入れ忘れて、フォーム送信時に419 PAGE EXPIREDというエラーを発生させるのが、よくやりがちなミスですが、今回@csrfを入れているのにも関わらず、419エラーが発生することがありました。

他で紹介されているキャッシュやセッションファイルの削除等を試しましたが、エラーが解消されず、色々と調べた結果、POSTリクエストに含まれる変数の数（inputタグ等の数）が多すぎたため、PHPの設定により上記トークンを含むリクエストの一部が削除されてしまっていたことが分かりました。

php.iniのmax_input_varsという項目を設定することで解消しました。（初期値は1000）

; How many GET/POST/COOKIE input variables may be accepted
max_input_vars = 100000

リクエストのデータサイズが大きい場合は、次の設定も更新する必要があります。

; Maximum size of POST data that PHP will accept.
; Its value may be 0 to disable the limit. It is ignored if POST data reading
; is disabled through enable_post_data_reading.
; http://php.net/post-max-size
post_max_size = 64M

; Maximum allowed size for uploaded files.
; http://php.net/upload-max-filesize
upload_max_filesize = 64M

CentOSにNoto Sans CJK JPをインストール

Noto Sans CJK JPはGoogleとAdobe（Adobe側の名称は源ノ角ゴシック／Source Han Sans JP）が共同開発したオープンソースのフォントです。視認性が高く、無料で使えるため、多くのWebサイトで利用されています。（当サイトも利用しています。）

https://fonts.google.com/specimen/Noto+Sans+JP

https://www.google.com/get/noto/help/cjk/

Webサイトで利用する場合は、HTMLかCSSにWebフォントとして利用するための設定を行えば表示されますが、サーバー側の処理で作成するPDF等で利用するには、フォントをサーバーにインストールする必要があります。

ここではCentOSにNoto Sans CJK JPをインストールする手順についてご説明します。

フォントのダウンロード

$ wget https://noto-website-2.storage.googleapis.com/pkgs/NotoSansCJKjp-hinted.zip
$ unzip NotoSansCJKjp-hinted.zip -d NotoSansCJKjp

フォントディレクトリに移動

$ sudo mv NotoSansCJKjp /usr/share/fonts/NotoSansCJKjp
$ sudo chmod 644 /usr/share/fonts/NotoSansCJKjp/*

キャッシュを更新

$ sudo fc-cache -fv

※sudo: fc-cache: command not foundと表示が出た場合、フォント管理のためのライブラリFontconfigがインストールされていない可能性があります。その場合は、yumを利用してインストールします。

$ sudo yum install fontconfig -y

インストールの確認

$ fc-list | grep NotoSansCJKjp

/usr/share/fonts/NotoSansCJKjp/NotoSansCJKjp-DemiLight.otf: Noto Sans CJK JP,Noto Sans CJK JP DemiLight:style=DemiLight,Regular
/usr/share/fonts/NotoSansCJKjp/NotoSansMonoCJKjp-Bold.otf: Noto Sans Mono CJK JP,Noto Sans Mono CJK JP Bold:style=Bold,Regular
/usr/share/fonts/NotoSansCJKjp/NotoSansCJKjp-Black.otf: Noto Sans CJK JP,Noto Sans CJK JP Black:style=Black,Regular
/usr/share/fonts/NotoSansCJKjp/NotoSansCJKjp-Light.otf: Noto Sans CJK JP,Noto Sans CJK JP Light:style=Light,Regular
/usr/share/fonts/NotoSansCJKjp/NotoSansCJKjp-Thin.otf: Noto Sans CJK JP,Noto Sans CJK JP Thin:style=Thin,Regular
/usr/share/fonts/NotoSansCJKjp/NotoSansCJKjp-Bold.otf: Noto Sans CJK JP,Noto Sans CJK JP Bold:style=Bold,Regular
/usr/share/fonts/NotoSansCJKjp/NotoSansCJKjp-Medium.otf: Noto Sans CJK JP,Noto Sans CJK JP Medium:style=Medium,Regular
/usr/share/fonts/NotoSansCJKjp/NotoSansCJKjp-Regular.otf: Noto Sans CJK JP,Noto Sans CJK JP Regular:style=Regular
/usr/share/fonts/NotoSansCJKjp/NotoSansMonoCJKjp-Regular.otf: Noto Sans Mono CJK JP,Noto Sans Mono CJK JP Regular:style=Regular

以上でインストールは完了です。