コンテンツにスキップ

Tech

  • in Tech
  • このページは約1分で読めます

Firefox終了時にBookmarkをエクスポート

Firefox 終了時に Bookmark を HTML 形式で任意のディレクトリにエクスポートします。

xBrowserSync を使ってたらブックマークがたくさん消えてしまった経験があるため、定期的にバックアップをとりたいって思いました。

about:config の設定をすれば対応できるのがわかったので設定手順を残します。

  1. about:config を開く
  2. 以下設定をする
key value
browser.bookmarks.autoExportHTML true
browser.bookmarks.file 保存先のパス（ファイル名含む）
  1. Firefox を再起動する。

これで、Firefox 終了時に保存先パスにエクスポートされます。

参考

  • in Tech
  • このページは約1分で読めます

AWS SDK for PHP を使ってメール送信

Amazon SES を初めて使ったのでメモ。 regionがAsia Pacific (Tokyo)の場合は制限があるみたいなので注意。

最大送信量 1日あたりの送信割り当て
1秒あたり1通 24時間あたり200通

前提

コード

<?php
require 'vendor/autoload.php';

$client = new \Aws\Ses\SesClient([
    'version' => 'latest',
    'region' => 'ap-northeast-1',
    'credentials' => [
        'key'    => 'hogehoge',
        'secret' => 'fugafuga',
    ],
]);

$from = 'from@example.com'; // Amazon SESでVerifiedしたメールアドレス
$to = 'to@example.com';
$charset = 'UTF-8';
$subject = '件名';
$body = '本文';

$result = $client->sendEmail([
    'Destination' => [
        'ToAddresses' => [$to],
    ],
    'ReplyToAddresses' => [$from],
    'Source' => $from,
    'Message' => [
        'Body' => [
            'Text' => [
                'Charset' => $charset,
                'Data' => $body,
            ],
        ],
        'Subject' => [
            'Charset' => $charset,
            'Data' => $subject,
        ],
    ],
]);

// 送信ID
$messageId = $result['MessageId'];
echo "Email send. Message ID: {$messageId}\n" ;

HTML形式で送信したい場合は、TextをHtmlにすればOK。

参考

  • in Tech
  • このページは約1分で読めます

はてなブログカードを使ってカード型のリンクを貼る

htmlにこれを書くだけでカード型リンクになります。

<iframe
  class="hatenablogcard"
  style="width:100%;height:155px;max-width:500px;"
  src="https://hatenablog-parts.com/embed?url=【ブログURL】"
  frameborder="0"
  scrolling="no"
>
</iframe>

自分のブログでも使いたいけど、いちいち書くのが面倒だったので、<a>にclass="blogcard"を定義したらカード型リンクになるような JavaScript を書いた。

<a class="blogcard" href="xxxx"></a>

// jQueryです
$("a.blogcard").each(function () {
  const url = $(this).attr(`href`);
  const iframe = $(`<iframe>`)
    .addClass(`hatenablogcard`)
    .attr(`src`, `https://hatenablog-parts.com/embed?url=${url}`)
    .attr(`frameborder`, 0)
    .attr(`scrolling`, `no`);
  $(this)[0].outerHTML = iframe[0].outerHTML;
  $(this).remove();
});

iframe.hatenablogcard {
  width: 100%;
  height: 150px;
  max-width: 500px;
}

参考

{{< blogcard "https://dev.classmethod.jp/articles/embed-link/" >}}

  • in Tech
  • このページは約1分で読めます

Amazon Lambda Layer の作成

まず、Amazon Lambda Layer とは下記のものです。

一言で言えば、複数のLambda関数でライブラリを共有できる仕組みです。

Lambda の Python は標準である程度ライブラリが利用できるようになってますが、 pandas や numpy 、 requests など利用できないライブラリもあります。 「ライブラリを追加したい + 複数のLambdaで共有したい」ときに Amazon Lambda Layer を活用すると便利になります。 また、既存のライブラリ以外にも独自で作成したライブラリもLayer化すれば共有できるのでいい感じです。

手順

  1. ライブラリを ZIP にまとめる
  2. AWS Lambda から レイヤーの作成を行う
  3. Lambda関数からレイヤーを選択する

以下、 requests を例に説明します。

1. ライブラリを ZIP にまとめる

ターミナル等から任意のディレクトリで以下を実行する。

mkdir python
pip install -t python requests
zip -r9 layer.zip python
2. AWS Lambda から レイヤーの作成を行う
  1. AWS Lambdaのコンソールから 2. その他リリース > レイヤー を選択する。
  2. 画面右上の レイヤーの作成 ボタンからレイヤーの作成を行う。
  3. 各項目を適当に入力して、さっき作成したZIPファイルをアップロードし、作成ボタンを押す。これでレイヤーの作成は完了です。
3. Lambda関数からレイヤーを選択する
  1. requests を使いたいLambda関数を開き、関数の概要 のところにある Layers を選択する。
  2. レイヤーの追加 ボタンからさっき作成したレイヤーを選択する。
  3. import requests を定義すれば、利用できます。

参考

  • in Tech
  • このページは約1分で読めます

Firefoxからタブを非表示にする

Firefox でタブを縦で使うために Tree Style Tab - ツリー型タブ をインストールしています。 ただ、これを使うとタブが2箇所に表示されてて既存のタブが邪魔なので、userChrome.cssを使って非表示にしたので、備忘録として残しておきます。

Firefox before

userChrome.css の作成場所

アドレスバーにabout:supportを入力してトラブルシューティング情報にアクセスする。 アプリケーション基本情報に プロファイルフォルダー とあるので、finder や explorer で開きます。

トラブルシューティング

プロファイルフォルダー を開いたら、 chrome フォルダを作成します。 userChrome.css の作成場所になります。

finder

コード

@charset "UTF-8";
/* chrome://browser/content/browser.xhtml */

/* タブの非表示 */
#titlebar {
  display: none;
}

/* サイドバーの微調整 */
#tabbrowser-tabs {
  visibility: collapse !important;
}

#sidebar {
  min-width: 65px !important;
}

結果

保存したら、Firefox を再起動して確認します。ブラウザ上部のタブが消えてるはずです。

Firefox after

追記 2022-01-19

userChrome.css が効かない場合がある。 about:config を開いて、 toolkit.legacyUserProfileCustomizations.stylesheets を入力。 値を true に変更しておこう。

  • in Tech
  • このページは約1分で読めます

Amazon API Gatewayでバイナリデータを返す

API Gateway を使ってバイナリデータを返却する場合、設定が必要だったのでメモしとく。

困ってること

画像が表示されない。

細かいこと書くのがめんどうなので図にしました。

occurrence.png

やったこと

API Gatewayの設定でバイナリメディアタイプに text/html を設定

Lambdaプロキシ統合を使用して、バイナリデータを処理するAPI Gateway APIを設定するにはどうすればよいですか？ によると、ブラウザから送信してるAcceptヘッダーのデフォルトが text/html らしいので、バイナリメディアタイプとして追加する必要があるらしい。

注: ウェブブラウザは複数の値を含む Accept ヘッダーを自動的に送信します。デフォルトでは、最初の値は常に html/text です。API Gateway は最初の値のみを参照するので、text/html をバイナリメディアタイプとして API に追加する必要があります。そうでないと、次のエラーメッセージが表示されます

  • in Tech
  • このページは約2分で読めます

Linuxでユニットファイルを作って自動起動させる

PHPのビルトインサーバとNode.js Express アプリケーション用のビルトインサーバのユニットファイルを作成して自動起動できるようにしました。 凝ったことをしないのであれば、service ファイルを作成するだけでOKなので簡単です。

実行させるコマンドは以下です。

  • PHP
  • php -S 0.0.0.0:8000 public/index.php -t public
  • Node.js
  • node ./bin/www

service ファイルに書くときは、 php コマンドや node コマンドをフルパスで書くと確実に動くので、パスを確認しておきます。

$ which php
/usr/bin/php
$ which node
~/.nvm/versions/node/v16.11.1/bin/node

確認したら、service ファイルを作ります。ファイル名はなんでもOKです。ここではphp.service、nodejs.serviceとします。

  • /etc/systemd/system/php.service
[Unit]
Description = serve php

[Service]
ExecStart = /usr/bin/php -S 0.0.0.0:8000 public/index.php -t public
Restart = always
Type = simple
WorkingDirectory = /home/ec2-user/php-app
User = ec2-user
Group = ec2-user

[Install]
WantedBy = multi-user.target
  • /etc/systemd/system/nodejs.service
[Unit]
Description = serve nodejs

[Service]
ExecStart = /home/ec2-user/.nvm/versions/node/v16.11.1/bin/node ./bin/www
Restart = always
Type = simple
WorkingDirectory = /home/ec2-user/nodejs-app
User = ec2-user
Group = ec2-user

[Install]
WantedBy = multi-user.target

WorkingDirectory にアプリケーションのルートディレクトリを指定して ExecStart にコマンドを指定します。他の項目については説明できないので各々で調べてください。

それでは、ビルトインサーバを起動しましょう

$ sudo systemctl start php
$ sudo systemctl start nodejs

開始したら状態を確認します。以下のようになっていればOKです。

$ sudo systemctl status php
● php.service - serve php
   Loaded: loaded (/etc/systemd/system/php.service; enabled; vendor preset: disabled)
   Active: active (running) since Thu 2021-10-14 01:30:20 UTC; 1h 8min ago
 Main PID: 10612 (php)
   CGroup: /system.slice/php.service
           └─10612 /usr/bin/php -S 0.0.0.0:8000 public/index.php -t public

$ sudo systemctl status nodejs
● nodejs.service - serve nodejs
   Loaded: loaded (/etc/systemd/system/nodejs.service; enabled; vendor preset: disabled)
   Active: active (running) since Thu 2021-10-14 02:16:43 UTC; 23min ago
 Main PID: 8875 (node)
   CGroup: /system.slice/nodejs.service
           └─8875 /home/ec2-user/.nvm/versions/node/v16.11.1/bin/node ./bin/www

自動起動の設定をする場合は、以下コマンドを実行してください。

$ sudo systemctl enable php
$ sudo systemctl enable nodejs
  • in Tech
  • このページは約1分で読めます

CentOSにMeCabをインストールする

白ヤギコーポレーションが公開しているモデルを使用する際に、pipで色々インストールするほかにサーバの方にMeCabをインストールしておく必要があります。インストールしないとエラーになったので多分そうだと思います。

前提

  • CentOS7
  • python 3.6.13
  • pip 21.2.4

MeCab のインストール

sudo yum install -y https://packages.groonga.org/centos/groonga-release-latest.noarch.rpm
sudo yum makecache
sudo yum install -y mecab mecab-ipadic mecab-devel

gensimのインストール

gensimが4.0以降のやつを使うと、よくエラーになるので、3.8.3をインストールにします。 ※エラーになる理由はわかってません。やる気が出たときにデバッグします。

pip install gensim=3.8.3

モデルの取得

wget http://public.shiroyagi.s3.amazonaws.com/latest-ja-word2vec-gensim-model.zip
unzip latest-ja-word2vec-gensim-model.zip

確認

word2vec.gensim.model と同じ階層に以下コードを書いたpythonファイルを置く。

from gensim.models.word2vec import Word2Vec

model_path = '/path/to/word2vec.gensim.model'
model = Word2Vec.load(model_path)

参考

  • in Tech
  • このページは約2分で読めます

Amazon IVS でライブストリーミング配信

Amazon Interactive Video Service (Amazon IVS) を利用するとあっという間にOBSからライブストリーミング配信ができます。

IVS チャネルの作成

  1. https://us-west-2.console.aws.amazon.com/ivs/home に移動してチャネルの作成をします。
  2. チャネル名を入力して、チャネルの作成ボタンを押して作成します。 基本はデフォルトのままで良いと思いますが、配信動画を保存したい場合は、ストリームの記録と保存でS3 への自動記録を選択しましょう。
  3. ストリーム設定と再生設定を確認しておきましょう。

ライブストリーミングの開始

今回はOBSを使ってライブストリーミングをします。

OBSの設定画面から設定します。

  1. 配信設定

  2. サービス: カスタム

  3. サーバ: ストリーム設定の取り込みサーバー

  4. ストリームキー: ストリーム設定のストリームキー

  5. 映像設定

  6. 基本解像度: 1280x720

  7. 出力解像度: 852x480
  8. 縮小フィルタ: バイキュービック (先鋭化スケーリング、16のサンプル)

  9. FPS共通知: 30

  10. 出力設定

  11. エンコーダ: x264

  12. レート制御: CBR
  13. ビットレート: 2000（または、それ以下）
  14. キーフレーム間隔: 2
  15. CPU使用のプリセット: veryfast
  16. チューン: ゼロレイテンシー

設定値は適宜好きなように変更してもOKです。本設定はライブストリーミングの開始の内容をそのまま流用しています。

入力できたら、OKボタン押します。

OBSのメイン・ウィンドウの左下にある「ソース」セクションで配信したいやつを選択しましょう。 配信開始をクリックすると、ライブ配信が開始されます。

配信内容は再生設定の再生URLから視聴できます。 VLCなどを使って見てみましょう。

参考

  • in Tech
  • このページは約1分で読めます

Dark Mode Switch でダークモード対応

Dark Mode Switch というJavaScriptのライブラリを使って本サイトのダークモード対応をしました。 README.md に書いてある通りに実装するだけで簡単にできます。

README.md の内容丸パクリですが、実装の仕方を残しておきます。

必須条件

  • Bootstrap 4.x or 5.x

使い方

  1. ダークモードトグル用のカスタムスイッチを追加し、続いて dark-mode-switch.min.js スクリプトを追加します。 Bootstrap 4.x 
    <div class="custom-control custom-switch">
  <input type="checkbox" class="custom-control-input" id="darkSwitch" />
  <label class="custom-control-label" for="darkSwitch">Dark Mode</label>
</div>
<script src="dark-mode-switch.min.js"></script>
    Bootstrap 5.x 
    <div class="form-check form-switch">
  <input type="checkbox" class="form-check-input" id="darkSwitch" />
  <label class="custom-control-label" for="darkSwitch">Dark Mode</label>
</div>
<script src="dark-mode-switch.min.js"></script>
  2. dark-mode.css をサイトに合わせて編集します。

dark-mode.css の編集

ダークモードをオンにすると、bodyタグに data-theme="dark" が追加されます。CSSを使ってページ内の要素を対象にすると、次のようになります。

[data-theme="dark"] {
  background-color: #111 !important;
  color: #eee;
}