Macでインストールする場合は、brewでnodebrewというnode.jsのパッケージマネージャーを入れてNode.jsをインストールする方向が良さげ。
$ brew install nodebrew
$ nodebrew ls-remote
$ nodebrew install-binary v{{バージョン番号}}
または安定版を使用する場合は
$ nodebrew install-binary stable
$ nodebrew ls
$ nodebrew use v{{バージョン番号}}
$ echo 'export PATH=$HOME/.nodebrew/current/bin:$PATH' >> ~/.bash_profile
まずはアカウント作成。参考にしたのは以下のサイトさん
注意するのはアカウント作成時、会社名と住所を入力する必要があること。
この会社名と住所はメルマガに強制的に入り、消せないためビジネス用の住所がない方は注意が必要。
また無料プランだと、メルマガやLPのフッターにはMailchimpのロゴが入るのでこれも注意。
迷惑メール判定を回避するために必要。兎にも角にもこの設定がまずは必要。
Website => Domainsから設定する。
詳細は以下を参考。
[参考]
https://takapon.net/mailchimp_spf_dkim/
https://plus-sum.jp/mailchimp-setting/
約2時間ぐらいで認証された。
・CSVで一括連絡先インポートも可能
・顧客セグメンテーション機能
・登録フォーム作成
マージタグ
・【Send a Test Email】でテストメール送信も可能
・時差に合わせた配信設定ができる（有料プラン）
・成約率が高い時間帯に自動的にメールを送信してくれる（有料プラン）
開封率、クリック率、退会率の測定や、メールアドレス毎の開封回数まで簡単に知ることが可能です。
・A/Bテストができる（5000件以上のリストが必要）（有料プラン）
メールアドレスの収集には、WordPressにフォームを設定するパターンが一般的だと思うが
Mailchimpでランディングページを作り、そこにフォームを設定し収集することもできる。
LPに独自ドメインを設定できるので、設定しておくこと。
自分の場合は、サブドメインを設定。
https://mailchimp.com/help/connect-domain/
DNS Providerによるが、自分の場合は大体15分ぐらいで認証完了メールが届いた。
LPと自動メール機能を組み合わせると強力な自動集客機能を作成できる。以下は一例。
(1) LPページにフォームを付ける。またフォーム送信されたときに自動でつけられるタグの設定をする。
(2) 自動メールを(1)で指定したタグが付けされたタイミングで送るように設定する。また
送信後に「送信済み」タグを「Use advanced settings」から設定できるので設定する。
(3) イベント開催日、X日前、Y日前に自動メールを送信する設定をスケジュール設定しておく。
[参考]
https://takapon.net/mailchimp-lp-creation/
(Mailchimpでメルマガ)クリニックや治療院で使える見込み患者を集めるためのランディングページ作成。
MailchimpのLP作成機能の使い方
RSSフィードが存在するブログから自動的に新着情報メールを送ることができる。すごい！
takapon.net
takapon.net
[参考]
https://takapon.net/mailchimp-scenario-branching/
https://plus-sum.jp/mailchimp-step-mail-01/
・スマホアプリで解析
自分用メモ。
インストールはbrewでコマンドでインストール可能。
詳細は以下を参考にした
(公式) https://shopify.github.io/themekit/
https://qiita.com/t-kurasawa/items/21f887fea399c0d07529
https://www.non-standardworld.co.jp/22987/
このツールを使ってよかった思ったことは単純に、Gitによる管理ができること。
liquidファイル群をお気に入りのEditorで編集し、watchコマンドでリアルタイムに編集できるのも良い。
テーマファイルを頻繁に更新する場合は、必須のツールだと思う。
getコマンドもdownloadコマンドもテーマファイルをダウンロードするのに使えるコマンドだが以下の違いがある。
・全てのファイルをダウンロードすることしかできない。個別にファイルをダウンロードすることができない。
・configファイル(config.yml）が上書きされる。
・全てのファイルをダウンロードすることもできるし、個別にファイルをダウンロードすることもできる。
・configファイル(config.yml)は上書きされない
自分の場合、getコマンドを使い続けていたため、使う度にconfig.ymlが上書きされ、かなり煩わしかった。
公式ドキュメントを見ても、getとdownloadの使い分けの詳細は書かれていないが実際に想定されている使い方としては以下だと思う。
(1) listコマンドでテーマファイルのID一覧を調べる。
(2) getコマンドでテーマファイル一式を全てダウンロードする。
(3) config.ymlもダウンロードされるので、以下のページを参考にし設定
shopify.dev
(4) これ以降ファイルをダウンロードしてくる場合は、getコマンドではなく、downloadコマンドを使用する
自分のやらかした経験なのだが、Shopifyのテーマ管理画面から「Customize」を行うと、その設定内容は「config/settings_data.json」に保存される。そしてdeployコマンドに特定ファイルを指定せずにそのままコマンドを打つと、全てのファイルがなんの警告も、何のファイルをアップロードしたかのログも出ずに全てアップロードされる。
ログがでないため、その日は何も気づかずに翌日、テーマのCustomizeで設定したデータが全て消えていて、愕然とした...という経験がある。なのでdeployコマンドを使用する前は、必ず以下のステップを踏むことにしている
(1) downloadコマンドで全てのファイルをダウンロードし、更新されたファイルがないかチェックする。
(2) deployコマンドを使用するときは、できるだけ特定ファイルを指定して、deployコマンドを使用する。
今後は、Shopifyテーマファイルを購入後、このツールを使うときは以下の使い方を行う。
[初期設定]
(1) テーマファイルを購入(テーマファイル名は仮名"Theme")とする
(2) "Theme"を複製し、以下の用途で使用する
① "Theme (production)" (本番環境用)
② "Theme (development)" (開発環境用)
③ "Theme (DON'T TOUCH ME)" (バックアップ用)
(3) listコマンドでテーマファイルのID一覧を調べる。
(4) getコマンドで①のテーマファイル一式を全てダウンロードする。
これ以降ファイルをダウンロードしてくる場合は、getコマンドではなく、downloadコマンドを使用する。
(5) config.ymlを設定(productionとdevelopmentの設定。設定名はそれぞれproductionとdevelopmentにする)
(6) (4)で取得したファイルをGit管理する。(config.ymlはgitignoreに追加)
[開発時]
(1) downloadコマンドで"Theme (production)"から最新のファイルを全取得。
(2) (1)で変更があればGitでコミットまたはプッシュしておく。
(3) (1)のファイルを"Theme (development)"にdeployする
(4) theme open --env="development"で開発用のテーマが画面をブラウザで開く
(5) theme watch --env="development"でリアルタイムで編集したコードが開発環境用テーマにアップロードされるようにする。
(6) 開発が終了し、ブラウザで確認して問題なければ、theme deploy --env="production"コマンドに、デプロイするファイル名を指定して、本番環境にデプロイする。
(7) 本番環境でも問題なければ、Gitコミットまたはプッシュする
自分が管理している一部のWordPressでは、メール送信にWP Mail SMTPというプラグインを使用している。
今回このプラグインにZohoメールのSMTP設定を行い、メールを送信してみた。
SMTPの設定は、Zohoのページを参照し、設定は以下のように行った。
https://www.zoho.com/jp/mail/help/zoho-smtp.html
Mailer) "Other SMTP"を選択
SMTP Host) smtp.zoho.com
Encryption) TLS
SMTP Port) 587
Authentication) ON
SMTP Username) Zohoにログインするときのメールアドレス
SMTP Password) SMTP Usernameのパスワード
⭐ただし二段階認証を使用している場合は、Zohoのアカウントページ => セキュリティ => アプリのパスワードから
アプリ固有のパスワードを作成し、それを使用しないといけない。
SMTP/送信サーバーを設定する際には、認証用のメールアドレスと正しいパスワードを入力する必要があります。2段階認証を有効にしている場合、他のデバイスのアカウントを設定するにはアプリケーション固有のパスワードが必要になることがあります。
自分の場合は、このケースだったの、アプリケーション固有のパスワードを設定した。
これで設定完了
前回の記事からの続き
thoames.hatenadiary.jp
送信元IPアドレスが入ったSPFレコードをDNSに入れることで、受信先のサーバが送信元IPアドレスがSPFレコードに登録されているかを確認し、詐称(なりすまし)メールなのかを確認する仕組み。
インターネット用語1分解説～SPFとは～ - JPNIC
電子署名を使って改竄の有無を確認できる仕組み。
送信者はDNSに公開鍵を登録し、自分のみ知っている秘密鍵でメールに電子署名を付与する。受信側がDNSに公開鍵を問い合わせて電子署名を検証する。
SPF, DKIMの特徴と違い | SendGridブログ
ドメイン所有者(送信側)がメールの認証失敗時の対処方法をDMARCに対応している受信側に指示することができる仕組み。SPFまたはDKIMが設定されている前提で設定可能。
この設定を行うことで、なりすましメールの送信元IPなどが記載されたレポートを受信側から受け取ることができる。
通常、SPFおよびDKIMを用いて送信元ドメインを認証する際には、 認証に失敗したメールをどのように取り扱うかは、受信者の判断に任せられています。 これまでは、送られたメールがなりすましメールだったとしても（SPF・DKIMの認証に失敗した場合でも）、受信側が「受信する」というポリシーだった場合、なりすましメールは受信者の意向に沿って、そのままユーザのメールボックスで受信されていました。
DMARCとは？送信ドメイン認証の仕組みを理解して、なりすまし対策をしよう！ | メルラボ
対象方法は以下の３種類がある
１）何もしない(none)
２）隔離をする(quarantine)
３）受信拒否をする(reject)
DMARC検証に応じた２種類のレポートを受け取る設定もでき、なりすましメールの頻度や送信元IPなどの解析に活かすこともできる。
検証結果の統計情報を示した「ruaレポート」と、「隔離」または「拒否」した場合に送信される「rufレポート」がある。
送信ドメイン認証技術「DMARC」によるなりすましメール対策とDMARCレポートの活用 |
ダッシュボードから全体に対して二段階認証を付与できるし、
「ユーザーの詳細」=> 「２段階認証」からは個別にも設定できるよう。
自分の中で色んなサイトを参考にし以下のルールにした。
1) パスワードの有効期限（日数）：設定無し
パスワードの変更回数を多くしても対策効果は無いとのこと。
参考: 総務省が「パスワードの定期変更は不要」に転換！安全性を高めるパスワードの作り方は？ - U-NOTE[ユーノート] - 仕事を楽しく、毎日をかっこ良く。 -
2) 最小文字数: 12文字
3) パスワード履歴の最小数: 設定無し。1)を設定無しにしているため。
4) 最小文字数(特殊文字): 2文字
5) 最小文字数(数字): 3文字
スパムやウイルスを含んだメールの可能性が高いが、念の為に「永続的な拒否」ではなく
個人設定は「検疫に移動」を設定。Soft failも同じく。
スパムやウイルスを含んだメールの可能性が高いが、念の為に「永続的な拒否」ではなく
個人設定は「検疫に移動」を設定
DMARC導入時は、DMARC検証に失敗（フェール）するケースが、色々とあるため最初のポリシーは「none」で様子を見て、レポートを見て
逐次、隔離または拒否するといったポリシーに段階的に変更していくほうが良さそう。
そのため個人設定は「なし」を設定
スパムの送信元IPやドメインをリスト化して保有しているサービス。複数存在し、有名所は「Spamhaus」というサービス。
「https://www.spamhaus.org/lookup/」← このページで登録されているかを確認できる。
個人設定は「検疫に移動」を設定
https://qiita.com/nakansuke/items/c014678e69fe5d801419
https://sendgrid.kke.co.jp/blog/?p=3946
[その他参考]
ZOHOでセキュアな独自ドメインメールを無料で運営する - BAOOKUN
「Zoho Mail」にGoogle2段階認証を設定する方法 | Mechalog
https://www.skydesk.jp/ja/help/portal/stoz/migration-manual/mail-manual-hosting.pdf
独自ドメインメールをZoho MailでIMAPする（Outlook.comから乗り換え） | 株式会社グランフェアズ
ZOHO Mail が超好印象。すごく親切で高性能、セキュリティが高い。ただ唯一の問題が… - 世界のことを知りたい
パスワードポリシーの正解とは。運用しやすい4つのポイント | 株式会社セシオス
「8文字(8桁)のパスワードは今では危険」～パスワードの新常識とは？
現時点で最新の78では、Enigmailというアドオンがうまく動作しないことが判明したため
動作確認ができていた68に戻す作業を行ったので、作業記録をとる。
超重要。[Thunderbirdを起動]→[メニューバーのヘルプ]→[トラブルシューティング情報]内の[プロファイルフォルダ]からFinderを開けるので
その中のプロファイルをバックアップする。
以下からダウンロードし、上書きインストール。
Directory Listing: /pub/thunderbird/releases/
普通に起動すると「古いバージョンの Thunderbird を起動しました」というエラーが表示され、新しいプロファイルを作らない限りThunderbirdが開けない。
そのため、上書きインストール後の初起動時は、Macでは以下のコマンドを叩いてから、プロファイルマネージャーを起動させ、既存のプロファイルを選択して
Thunderbirdを起動させる必要がある。コマンドは以下。
$ /Applications/Thunderbird.app/Contents/MacOS/thunderbird -profilemanager --allow-downgrade
これでThunderbirdは起動できる。
自分の場合、EnigmailもThunderbird68に対応させたバージョンにダウングレードする必要があったので
68に対応したものを以下のサイトからダウンロードし、インストールした。
Enigmail :: Versions :: Add-ons for Thunderbird
[参考]
Thunderbird ダウングレード -Mac- | Kinchan's Blog
Mozilla、Thunderbird 68.0デスクトップ向け最新版をリリース。 | moshbox
How can I install a usable version of Thunderbird over 68.3.1? | Thunderbird Support Forum | Mozilla Support
h.ogi blog (jp): Thunderbird 78.xの注意点
公式サイトからダウンロードして解凍し起動。
以下が設定した内容
ATOMから使用している設定。この設定に慣れているのでこの設定をそのまま使う。
| 設定名 | 値 | メモ |
|---|---|---|
| Editor: Font Family | Menlo, Monaco, 'Courier New', monospace | |
| Editor: Font Size | 10 | |
| Editor: Insert Spaces | ON | プロジェクト毎に要確認 |
| Editor: Tab Size | 2 | プロジェクト毎に要確認 |
| Files: Eol | auto | Windows: CRLF(\r\n), Mac: LF(\n) プロジェクト毎に要確認 |
こちらの方の設定をベースに作成
Visual Studio Code の初期設定と最低限必要な拡張機能 - フロントエンド向け - - Qiita
{ "diffEditor.renderSideBySide": false, // Git の差分を行内に表示 "editor.fontSize": 10, // フォントサイズ "editor.wordWrapColumn": 120, // WordWrapされる文字数 "editor.colorDecorators": false, // カラーデコレーターを非表示 "editor.formatOnPaste": true, // ペースト時に自動でフォーマット "editor.formatOnSave": true, // ファイル保存時に自動でフォーマット "editor.formatOnType": true, // 入力した行を自動でフォーマット "editor.minimap.renderCharacters": false, // ミニマップの表示文字をブロックに変更 "editor.minimap.showSlider": "always", // 表示領域をミニマップで常にハイライト "editor.multiCursorModifier": "ctrlCmd", // マウスでの複数選択時の修飾キーを変更 "editor.renderControlCharacters": true, // 制御文字を表示 "editor.renderLineHighlight": "all", // 選択行を行番号含めすべてハイライト "editor.renderWhitespace": "all", // 半角スペースを常に表示 "editor.snippetSuggestions": "top", // Emmet などのスニペット候補を優先して表示 "editor.tabSize": 2, // タブのサイズ変更 "editor.wordWrap": "on", // エディターの幅で折り返し "emmet.showSuggestionsAsSnippets": true, // Emmet の候補を表示 "emmet.triggerExpansionOnTab": true, // TAB キーで Emmet を展開できるようにする "emmet.includeLanguages": { "erb": "html", "ruby": "html" }, // "emmet.variables": { // Emmet で展開される HTML の言語を変更 // "lang": "ja" // }, "explorer.confirmDelete": false, // ファイル削除時の確認を表示しない "files.associations": { // ファイルと言語の関連付けを変更 ".*lintrc": "json" }, "files.exclude": { // エクスプローラーから非表示にするファイル "**/*.map": true, "**/node_modules": true }, "files.insertFinalNewline": true, // ファイルの保存時に末尾を改行 "files.trimFinalNewlines": true, // ファイルの保存時に最終行以降をトリミング "files.trimTrailingWhitespace": true, // ファイルの保存時に行末の空白をトリミング "[markdown]": { "files.trimTrailingWhitespace": false // Markdown のファイルは行末の空白をトリミングしない }, "html.format.contentUnformatted": "pre, code, textarea, title, h1, h2, h3, h4, h5, h6, p", // タグ内の記述はフォーマットしない "html.format.extraLiners": "", // head, body, /html タグの前に改行を入れない "html.format.unformatted": null, // フレージング・コンテンツ（旧インライン要素のようなタグ）はフォーマットしない "html.format.wrapLineLength": 0, // 行の文字数制限を無くし自動で改行させない "search.showLineNumbers": true, // 検索結果に行番号を表示 "search.exclude": { // 検索対象外にするファイル設定（ files.exclude のファイルも含む） "**/tmp": true }, "window.openFoldersInNewWindow": "on", // 新規ワークスペースを別ウインドウで開く "window.title": "${activeEditorMedium}${separator}${rootName}", // ウインドウ上部に表示する文字列の設定 "workbench.colorTheme": "One Dark Pro", "workbench.editor.labelFormat": "short", // タブに表示する文字列の設定 "workbench.editor.tabSizing": "shrink", // タブの表示設定 "workbench.startupEditor": "none" // Welcome Page を表示しない }
Emmetはデフォルトで使用できるが、
erb拡張子でEmmetを使用するには以下の設定が必要
１）設定 => 拡張機能 => Emmetを選択
２）Include Languagesより以下を設定
"emmet.includeLanguages": { "erb": "html", "ruby": "html"}
３）Trigger Expansion On Tabを有効化
以上で、キーワードを入力後、Tabを押せばEmmetが動作する。
How to configure Emmet in VS Code for erb files | by Nick Haralampopoulos | Medium
・テーマ
Atomのデフォルト配色である「One Dark」と同じものが使用したかったので
拡張機能から「One Dark Pro」という拡張機能をインストールして設定
・Material Icon Theme: ファイル毎に固有のアイコンを設定してくれる。vscode-iconsもあるが個人的にはこっちのほうが好み
=> デフォルトのアイコンで十分なので、結局消した。
・Visual Studio IntelliCode => JavaScriptやTypeScriptの入力補完
・JavaScript (ES6) code snippets => ３文字のスニペット打つだけ！clgとかめちゃ使う。
・Prettier => フォーマッター
・ESLint => 静的解析
・Ruby => Ruby言語をサポート
・RailsとRuby on Rails => Railsをサポート
・Rails DB Schema => DB Schemaに沿って、モデルのカラム名を補完
・endwise => endを自動挿入
・Path Intellisense => パス補完
・Git Lens => 以前の状況との比較がしやすい。行ごとに「いつ、だれがコミットしたのか」を見ることができる。
・Git History => ログが読みやすい
・TODO Highlight => TODOやFIXMEがハイライト表示される。
・Todo Tree => TODOやFIXMEなどのコメントタグを検索し、エクスプローラーペインのツリービューに表示してくれる拡張機能
・Rainbow CSV => CSVが列ごとに色付けされて、列がみやすくなる。
・zenkaku => 全角の空白文字を可視化
・HTML CSS Support => CSS定義からHTML入力の際にclass名やID名を補完してくれる
・Bracket Pair Colorizer 2 => {}や()のカッコに色をつけてくれる。
・Autoprefixer => ベンダープレフィックスをファイル保存時に自動でつけてくれる。
・CSSTree validator => CSSの構文チェッカー。間違っているところに波線がつく
・SCSS Formatter => Scssのフォーマッター
・Project Manager => 複数プロジェクトを簡単に開ける
・SFTP => FTPソフトを使わずにVScodeからサーバーにアップロードができる。設定によってはファイルを保存した瞬間にサーバー側のデータも書き換えることも可能。
・Code Spell Checker => スペルミスを検出してくれる拡張機能
・Partial Diff => 選択範囲の差分を手軽に確認できる
・gitignore => 言語毎に定番のgitignoreファイルテンプレートをダウンロードできる。
・DotENV => DotENVのファイルに色付けしてくれる
・プロジェクト毎に色を付ける。
Visual Studio Codeエディタの色をプロジェクトごとに違うものにする - Qiita
・日本語化
拡張機能から「Japanese Language Pack for Visual Studio Code」をインストールし設定
