どうのこうの

名古屋/元フリーランス/スタートアップ勤務/ウェブ/マークアップ/プログラマ/エンジニア

Author: tagawa (page 1 of 30)

TransmitMail を WordPress で使う場合の設置方法

TransmitMail を WordPress で使いたい場合、いろいろなやり方があるかと思いますが、私だったらこうする、みたいなことを書いてみたいと思います。

ファイル構成

ファイル構成は下記のようにします。

contact ページを作る

スラッグはなんでもいいですが、ここでは contact というスラッグでページを作ることにします。本文は空にします。(本文を入れても構いません。その場合、本文を出力する記述などが必要になります。)

page-contact.php に TransmitMail を読み込む

上記で作った contact ページのテンプレートファイルが page-contact.php なので、このファイルに TransmitMail の読み込みなどを書いてきます。

HTML の構造にもよりますが、下記のようなコードを書きます。

設定ファイルは PHP ファイルを利用します。

config.php を編集する

config.php を下記の記述します。

注意点としては、 $config['session']false にしておくことでしょうか。(セッションによる多重送信防止機能がうまく動作しないためです。おそらく、 WordPress のセッション周りと競合しているんだと思います。この設定により、セッションによる多重送信防止機能はオフになります。)

TransmitMail のテンプレートファイルを編集する

最後に TransmitMail のテンプレートファイルを編集します。

ヘッダー、フッターなどは WordPress のテーマファイルに書いているので、 form 要素の周辺と TransmitMail に関連する部分だけを記述します。

注意点としては、 form 要素の action 属性の値は ./ にすることです。 TransmitMail の初期のテンプレートファイルは action 属性が index.php になっているので、初期テンプレートから編集する場合は注意してください。

動作確認

http://localhost/contact/ などの URL で TransmitMail が動作することが確認できるかと思います。

以下は Twenty Seventeen に TransmitMail を設置してみた場合のスクリーンショット画像です。

まとめ

以上、 TransmitMail を WordPress で利用する場合の設置方法のご紹介でした。

WordPress にはいくつかのメールフォームプラグインがありますが、レイアウトの自由度が低かったりしますので、 WordPress で制作したサイトにレイアウトの自由度の TransmitMail を設置したい場合に、この記事を参考にしていただければと思います。

それでは、 Let’s enjoy WordPress and TransmitMail!

capistrano の6回目のデプロイで puma が止まる件

表題の通りなんだけど、 capistrano で何回目かのデプロイで puma が止まることがあって、いろいろ調査をしたら、6回目のデプロイで puma が止まることがわかりました。

「6回目」というのは、 capistrano がデプロイ先のサーバーに保存する世代の数が「5」だった場合(初期値が「5」)に、一番古い世代を削除するタイミングが「6回目」で、そのタイミングで puma の設定ファイルが Gemfile を見失うのが原因でした。

下記は unicorn の場合だけど、全く同じ症状でした。

capistrano + unicornではまった。 – blog unlearned

上記ページにもあるけど、

みたいなエラーが発生して、 puma が止まってしまいます。

修正方法としては、 /path/to/app/config/puma/production.rb みたいなファイルがあるとして、

を追加することで直りました。

たくさんググったけど、意外と誰も書いてなさそうだったので、書きました。どなたかのご参考になれば幸いです。

参考

https://github.com/puma/puma/blob/master/examples/config.rb

ミゲル君が消臭力の歌を歌ってくれる Amazon Dash Button 作った

ミゲル君が消臭力の歌を歌ってくれる Amazon Dash Button を作ってみました。

作り方

Amazon Dash Button を購入する

まずは Amazon Dash Button を購入します。もちろん、消臭力がいいと思います。

消臭力 Dash Button
消臭力 Dash Button

Amazon Dash Button をただの IoT ボタンにする

下記ページを参考に Amazon Dash Button をただの IoT ボタンにします。

Amazon Dash ButtonをただのIoTボタンとして使う – Qiita

上記ページに出てくる dasher の使い方については下記のページが詳しいです。

Amazon Dash Button と slackを連携させる – kakts-log

下記コマンドで Amazon Dash Button の MAC アドレスを確認して、

config/config.json を下記のように作って、

下記コマンドで dasher を立ち上げます。

config/config.json は後述する sinatra で http://localhost:4567 を立ち上げるので、そこにアクセスするだけの簡単仕様です。

mp3 を用意する

「消臭力〜♪」のところだけの音声データが欲しいので、 YouTube から CM 動画をダウンロードしてきて、音声をトリミングします。

youtube-dl を使って CM 動画をダウンロードする

YouTube の動画をダウンロードできる youtube-dl を使って、 CM 動画をダウンロードしてきます。

参考: コマンドラインからyoutubeを再生する – Qiita

youtube-dl のインストール

CM 動画のダウンロード

CM 動画を mp3 に変換する

ffmpeg のインストール

ダウンロードした mp4 を mp3 に変換する

参考: ffmpegを使用した、mp4ファイルからmp3ファイルを作成するコマンド – Daily noise

mp3 から必要な部分だけトリミングする

QuickTime Player でトリミングができるので、がんばって作ります。

消臭力ボタンを押すとミゲル君が歌うようにする

dasher がアクセスするページを作ります。

サクッと作りたかったので、 sinatra を使いました。

sinatra のコードは下記の通りです。

下記コマンドで sinatra を立ち上げて、

http://localhost:4567 にアクセスすると消臭力の歌が流れます。

 

以上です。

本当は YouTube をそのまま再生しようと思ったんだけど、ちょうどいい尺の動画がなかったので、わざわざ音声データを作ったんだけど、途中、「僕は何をやってるんだろう…。」とはちょっと思った。

Web制作小物ツールを S3 + CloudFront + 独自ドメイン SSL (AWS Certificate Manager) に変えた

Web制作小物ツールは自宅サーバーで運用していたんだけど、パスワードジェネレータとかあることを考えると SSL にしたいなぁと思っていて、折角だから一度やって見たかった S3 + CloudFront + 独自ドメイン SSL (AWS Certificate Manager) (+ 一部機能に Amazon API Gateway) にしてみました。

以下、作業のメモです。

S3 + 独自ドメインでホスティングするまで

下記の公式ページが参考になりました。

例: 独自ドメインを使用して静的ウェブサイトをセットアップする – Amazon Simple Storage Service

ドメインはバリュードメインで管理していて、 DNS は Amazon Route 53 を使わずにバリュードメインの DNS を使いたいので、バリュードメイン側で下記のように設定をしました。

ここまでで、 S3 + 独自ドメインでの運用ができるようになりました。

AWS Certificate Manager + Amazon CloudFront

AWS Certificate Manager と Amazon CloudFront の設定は下記サイトが詳しいです。

[ACM] AWS Certificate Manager 無料のサーバ証明書でCloudFrontをHTTPS化してみた | Developers.IO

今回は http へのアクセスは https へリダイレクトさせたいので「Redirect HTTP to HTTPS」を選択しました。

また、「Origin Domain Name」には S3 の Static website hosting のエンドポイント(「{バケット名}.s3-website-ap-northeast-1.amazonaws.com」)を入力し、「Alternate Domain Names
(CNAMEs)」には CNAME を入力し、「Price Class」は「Use All Edge Locations」を選択し、「Default Root Object」は「index.html」を指定しました。それ以外は基本、初期値を利用しました。

注意点としては、 AWS Certificate Manager は「米国東部 (バージニア北部)」で作成しないと Amazon CloudFront では使えないので注意。(私は初め「アジアパシフィック (東京)」で作ってしまって、ちょっとハマった。)

もう一つ注意点としては、「Origin Domain Name」を「{バケット名}.s3.amazonaws.com」ではなく「{バケット名}.s3-website-ap-northeast-1.amazonaws.com」としないと https://webtools.dounokouno.com/dummytext/ のような URL で https://webtools.dounokouno.com/dummytext/index.html を表示してくれないので注意。(私はこれで約1日、 https://webtools.dounokouno.com/dummytext/ でアクセスできなくなりました…。)

参考: CloudFront に S3 bucket のサブディレクトリパスのコンテンツを参照させる – Qiita

再度、バリュードメインの設定

「S3 + 独自ドメイン」でバリュードメインの設定をしちゃったので、ここで再度、 DNS の設定を変更します。設定内容は下記の通り。

(ここで末尾の . を入れてなくて一時的にサイトをダウンさせちゃった…orz)

AWS の利用料金はいくらになるか

現在、無料枠の期間内なので、正確な料金はわからない気がします。

とりあえず、来月の一ヶ月が無料枠で収まるかはここに追記したいと思います。

2017年4月2日 追記

今日確認したら、3月の利用料は無料でした。

それぞれのサービスの利用状況を見ると、すべて無料枠内で収まっているようです。

ちなみに、 Web制作小物ツールの2017年3月のセッション数は「9,020」、ページビュー数は「10,231」でした。

また来年の今頃に、無料枠がなくなったタイミングで利用料金がいくらになるか確認をしたいと思います。

追記ここまで。

Web制作小物ツールの対応ブラウザの変更

今回のサーバー移転にあわせて、コードもいくつか修正しました。

まず、 jQuery を v3 にアップデートした関係で、 IE 8 以下はサポート対象外になりました。

参考: Browser Support | jQuery

また、一部機能で Ajax の CORS (Cross-Origin Resource Sharing) を利用するようになったので、 IE 10 以下はサポート対象外になりました。

参考: CORS(Cross-Origin Resource Sharing)によるクロスドメイン通信の傾向と対策 | Developers.IO

CORS のほうは、 jQuery プラグインを使えば IE 8 、 IE 9 にも対応できるようですが、Web制作小物ツールの利用者に IE 9 以下のユーザーは少ないので、サポートしなくてもいいかなと判断をしました。

上記はWeb制作小物ツールの直近30日のアクセスの、 Internet Explorer のバージョン毎の内訳。 86% 以上が IE11 。

まとめ

静的サイトなら S3 で十分ですし、 CloudFront を使えば独自ドメイン SSL の認証書が無料なのがうれしいです。

自宅サーバー + 安価な SSL 認証書の場合と、 S3 + CloudFront の構成の場合のどちらが安いかは、 AWS の無料枠が終わった段階で見極めたいと思います。

自宅の仕事中の音楽再生環境、SOUNDSTICKS WIRELESS + Raspberry Pi 2 + AirPlay + HAM-UDAA2 がいい感じ

私は主に自宅で仕事をしていて、仕事中は iTunes + AirPlay で音楽を流しているのですが、最近、スピーカーに SOUNDSTICKS WIRELESS を買って、かっこいいし、音はいいし、いい感じの環境になったのでご紹介します。

スピーカーは「SOUNDSTICKS WIRELESS」

Harman/Kardon SOUNDSTICKS WIRELESS 2.1chワイヤレススピーカーシステム 高音質アンプ内蔵 Bluetooth対応  SOUNDSTICKSBTJP【国内正規品】
Harman/Kardon SOUNDSTICKS WIRELESS 2.1chワイヤレススピーカーシステム 高音質アンプ内蔵 Bluetooth対応 SOUNDSTICKSBTJP【国内正規品】

スピーカーはニューヨーク近代美術館(通称「MoMA」)にも収蔵されている「SOUNDSTICKS」シリーズの Bluetooth 対応の「SOUNDSTICKS WIRELESS」。

見た目が個性的で超かっこいい!

正直、見た目で選びました。

けど、 Amazon のレビューを見ると音も評判がいいです。実際、音はいいと思います。サブウーファーがズンズン鳴っていい感じです。

ちなみに、 Bluetooth は使っていません。後述の「HAM-UDAA2」と 3.5mm ステレオミニ端子でつないでいます。

発売時期が「2012年6月」とちょっと古いのが気になる(そろそろ新製品が出ないか)けど、執筆時点では新製品は出ていない。(サテライトスピーカーの無いモデルは出てる。 AURA STUDIO とか AURA PLUS とか。)

購入時の価格は「22,216円(税込)」。

AirPlay は Raspberry Pi 2

AirPlay は AirMac Express ではなく Raspberry Pi 2 を AirPlay 端末化して使っています。

Raspberry Pi 2 の AirPlay 端末化については、別の記事で詳しく書いてます。

プリアンプは「HAM-UDAA2」

TSdrena ハイレゾ対応 USB-DAC ヘッドフォンアンプ HAM-UDAA2
TSdrena ハイレゾ対応 USB-DAC ヘッドフォンアンプ HAM-UDAA2

以前は Raspberry Pi 2 からの音声出力には安い USB サウンドボードを使っていたけど、折角、いいスピーカーにするから、新調することにしました。

購入したのは TSdrena の「HAM-UDAA2」っていう USB-DAC。購入時の価格は「5,680円(税込)」。安い。

ハイレゾ対応らしいけど、 AirPlay でしか聞かないし、 CD 音源しか持っていないので、今のところは宝の持ち腐れ。

安い USB サウンドボードと比べて音が良くなったか、に関しては、正直良くわかってない。多分、良くなったんだと思う。多分だけど。

Raspberry Pi には Raspberry Pi 用の DAC ボードがいくつかあるみたいだけど、 USB の方が後々に Raspberry Pi を使わなくなったり、ヘッドホンアンプとして使いたくなった場合とかに汎用性があるかと思って、 USB-DAC にした。

あと、 Raspberry Pi 2 の USB ポートに直接「HAM-UDAA2」を繋げると、電力不足で「HAM-UDAA2」がまともに動かなかったので、セルフパワーの USB ハブ(別途、 AC アダプターで給電するタイプ)を購入した。

Raspberry Pi 2 と USB ハブで 2 つ AC アダプターをつなぐのは嫌だったので、 Raspberry Pi 2 に給電しつつ USB ハブにもなる下記製品を購入した。

エレコム USBハブ 2.0対応 4ポート 2A出力 ACアダプタ付 ブラック U2HS-T201SBK
エレコム USBハブ 2.0対応 4ポート 2A出力 ACアダプタ付 ブラック U2HS-T201SBK

この製品はすごく良くできていて、何がすごいかというと、写真だとわかりにくいかもしれないけど、一番右側の USB ポートは給電専用になっていてハブの機能は無くて、 USB ケーブルをつなぐと、残りの USB ポートがハブになる、っていう Raspberry Pi のために設計された製品のようなところ。文章じゃわかりにくいかもしれないけど、地味だけどすごく便利。

購入時の価格は「2,096円(税込)」。

Raspberry Pi 2 と「HAM-UDAA2」、 USB ハブを繋げるとこんな感じ。

 

以上、我が家の仕事中の音楽鑑賞環境のご紹介でした。

「SOUNDSTICKS WIRELESS」は完全に見た目で選んだけど、音もいいし気に入っています。

スピーカーは別としても、 Raspberry Pi 2 + HAM-UDAA2 の構成は安いし良い構成なのではと思っています。どなたかのご参考になれば幸いです。

iPhone 6 + ソフトバンクを iPhone 7 + 格安 SIM に変えた

もう結構前(2016年10月頃)のことだけど、 iPhone 6 + ソフトバンクを iPhone 7 32GB + 格安 SIM に機種変&回線を乗り換えました。

格安 SIM はどこにした?

格安 SIM は FREETEL にしました。下記のシミュレーターで一番安かったので。

iPhone SE、SIMフリー&格安SIMで料金シミュレーション!|携帯総合研究所

「FREETEL SIM for iPhone/iPad」 nano SIM (データ 月額299円(税抜)より)
「FREETEL SIM for iPhone/iPad」 nano SIM (データ 月額299円(税抜)より)

FREETEL のデータ通信料は多段階制で、より多く使うと料金が上がっていく仕組みなので、月々のデータ通信料には注意が必要。

「節約モード」っていうのがあるので、それを設定した。これで外でいくらデータ通信を使っても一番安いプランになる。通信速度は常時 200kbps になるけど、外でそんなにデータ通信することないから大丈夫でしょう、多分。

実際、 200kbps は遅いけど、外出の頻度がそれほど多く無いので、耐えられるかなぁって感じ。

月額利用料はいくらになった?

ソフトバンクの毎月の利用料が「9,600円」くらいで、FREETEL は「1,100円」くらい。

ざっくり計算すると、約8.5ヶ月で iPhone 7 32GB の機種代金「72,800円(税込)」の元が取れる計算です。

うん、FREETEL の月額料金は安い。いいね。

自宅の映画鑑賞環境、LOGICOOL スピーカーシステム Z623 がいい感じ

自宅の映画鑑賞環境で、「LOGICOOL スピーカーシステム Z623」がいい感じなのでご紹介します。

LOGICOOL スピーカーシステム Z623 とは

LOGICOOL スピーカーシステム Z623
LOGICOOL スピーカーシステム Z623

「LOGICOOL スピーカーシステム Z623」は LOGICOOL の PC 用スピーカーなのですが、PC 用にしてはサブウーハーシステムが大きくて重量もあり、テレビにつないで簡易的なホームシアターとしても評価の高い商品です。

私が購入した時の価格は「8,232円」。

LOGICOOL スピーカーシステム Z623 のおすすめポイント

THX認定マルチメディアスピーカー

THXの認定は、「映画制作者の意図した通りの音が出るか」の認定で、簡単に言うと音が良いってことなんだと認識しています。

他のホームシアターシステムを利用したことがないので比較できませんが、音には満足しているので、音は良いんだと思います。

サブウーハーが大きくて重い

PC 用にしてはサブウーハーが大きすぎる印象です。テレビにつないで Bass をプラスマイナスゼロで音を出しても、映画によってはちょっと低音がうるさいくらいの時があります。それくらい重低音が響きます。

これだけ重低音が響くと、映画を見ていても楽しいです。

LOGICOOL スピーカーシステム Z623 の残念ポイント

「LOGICOOL スピーカーシステム Z623」で1点だけ残念なところは、光デジタルケーブルに対応していないところです。

私の自宅のテレビは音声出力が光デジタルケーブルしかないので、一時は「Z623」の購入を諦めていたのですが、無いなら変換すればいいじゃんと思って、コンバータも一緒に買いました。

購入したのは下記の商品です。

TSdrena DAC (デジタル → アナログ) オーディオ変換器 HAM-DAAU
TSdrena DAC (デジタル → アナログ) オーディオ変換器 HAM-DAAU

購入時の価格は「3,980円」。

今だともっと安いのもあるっぽい。例えば下記の商品。

DAC デジタル(光&同軸)→アナログ(RCA) オーディオ変換器 端子金メッキ加工(メーカー長期保証付)
DAC デジタル(光&同軸)→アナログ(RCA) オーディオ変換器 端子金メッキ加工(メーカー長期保証付)

調査時の価格は「1,480円」。

あとは光デジタルオーディオケーブルと普通の LR のオーディオケーブルを買って繋ぎ合わせれば完成。

購入した光デジタルオーディオケーブルは下記の商品。
購入時の価格は「480円」。

【スリムタイプ】光デジタルケーブル 1m 光角プラグと光角プラグ オプティカルケーブル
【スリムタイプ】光デジタルケーブル 1m 光角プラグと光角プラグ オプティカルケーブル

購入したオーディオケーブルは下記の商品。
購入時の価格は「1,125円」。

audio-technica GOLD LINK Fine オーディオケーブル ピン×2 1.0m AT564A/1.0

つなぎ合わせるとこんな感じ。

あとはスピーカーとサブウーハーシステムをいい感じに配置したら、簡易ホームシアターシステムの完成です。

 

以上、我が家の映画鑑賞環境、ホームシアターのご紹介でした。

「Z623」は安いし、(ホームシアターシステムとしては)置き場所もそんなに取らないので、オススメです。

自転車の冬用グローブを新調した

自転車(ESCAPE R3)用の冬用のグローブが、もう長いこと使っているせいか手のひらの部分が劣化してベトベトしてきたので、新しいのを購入しました。

今まで使っていたのは 2009年11月に買った とのことなので、6年近く使っていたことになるっぽい。6年も使ってたらボロボロになりますよね。

今回購入したのは下記の商品。購入時の価格は「3,024円(税込)」。

SHIMANO(シマノ) アーリーウインター グローブ ECWGLBWNS62ML4 ブラック L
SHIMANO(シマノ) アーリーウインター グローブ ECWGLBWNS62ML4 ブラック L

「アーリーウィンター」とあるように、生地が薄めで、寒い日だとちょっと心もとない感じなので、寒い日用にもう1個、もう少し生地が厚めのウィンターグローブかインナーグローブを検討したい。

転職しました

2013年11月に Misoca にジョインした 私ですが、この度、 Misoca を退職して、転職というか、別の会社の別のサービスにジョインすることになりました。

引き続き、陰ながら Misoca を応援していますし、 Misoca のサービス自体は使い続けていきたいと思っています。

「別の会社の別のサービス」についてはまた、機会を改めてブログに書けたらと思っています。

そんな、新年最初のブログ記事でした。

本年もどうぞよろしくお願いいたします。

自転車用ヘルメットを新調した

以前使っていたヘルメットを部屋の掃除中に壊してしまったので、この度、新調しました。

ちなみに、自転車はESCAPE R3。

購入したのは下記の商品。購入時の価格は「5,163円(税込)」。

OGK KABUTO(オージーケーカブト) FIGO[フィーゴ] M/L ブラック
OGK KABUTO(オージーケーカブト) FIGO[フィーゴ] M/L ブラック

私は身長177cmの男で、頭部のサイズは多分、大きい方で、上記ヘルメットのサイズ調整を限界まで大きくしたら、ちょうどいいサイズになりました。

Older posts

© 2017 どうのこうの

Theme by Anders NorenUp ↑