2018-05-30

が入りVueコンパイルエラーになるぞ

ググってきた人のために最初に言っておく、この問題の解決策は見つからなかったので、ここには解決策は書いてない。

解決策を求めている人は、今すぐ立ち去るが良い。

Laravel mixでbrowserSyncを使ってブラウザの自動リロードをしている場合に、
ドキュメントに

<pre>

preタグがあると、閉じタグの前に謎の

<script>

scriptタグが挿入され
Vue.jsのテンプレートコンパイルエラーが出て怒られる。

Error compiling template

対処法は今のところ見つかっていないが、自動リロードしているタブじゃなければエラーは発生しないので
本番＆ステージング環境などでは特に問題はなさそう。

ちなみにpreタグのある箇所の親divにv-preをつけてもエラーは消えない。

【キーワード】 Vue.js vue コンパイルエラー Error compiling template Laravel mix browserSync BrowserSync browser sync preタグ

2018-04-19

$requestでは$request->get()はダメ、ゼッタイ

Laravel5.5 Laravel

Laravel4に慣れてる諸君は分かると思うが、Laravel4ではInput::get()という書き方をしていたので
Laravel5系でもついつい$request->get()って書いてしまう。

さらに悪い事に$request->get()と書いても入力値が取得できてしまう。
でもこの$request->get()で取ってくる値は、Symfonyのほうのメソッドなので
単に入力値を取ってくるだけのやつなのである。
よって、FormRequestでごちゃごちゃやってるのは何も反映されない。

なので、必ず入力値は$request->input()で取得するように。
お姉さんとの約束だ。

$request->input()

2018-04-17

safariで出力ファイルの拡張子に.htmlを付けられる時の対処法

Laravel csv関連

対処方法1

出力処理の最後にexit;を足す。 ※ ただし、exitで処理をぶった切るので、middlewareでactionのafterにごちゃごちゃやってると、それもぶった切られる。

        // ファイル出力
        $fp = fopen('php://output', 'w+b');
        fwrite($fp, $csv);
        fclose($fp);
        exit;

【参考】 https://stackoverflow.com/questions/19363744/safari-adding-html-to-download

https://qiita.com/mata/items/6a30b65ecc71e02d447a

対処方法2

responseヘルパーを使ってレスポンスを返す

ex) csv

        $csv = FileUtils::createCsv($user_rows);
        
        return response($csv)->
            header('Content-Type', 'text/csv')->
            header(
                'Content-Disposition',
                'attachment; filename="'.$file_name.'.csv'.'"'
            );

ex) zip

        $headers = [
            'Content-Type' => 'application/zip',
            'Content-disposition' => 'attachment; filename*=UTF-8\'\''.rawurlencode($zipName),
            'Content-Length' => filesize($zipPath)
        ];

        return response()->download($zipPath, $zipName, $headers);

【キーワード】 safari Safari 出力 csv zip 出力拡張子

2018-03-19

youtubeのソースに埋め込まれてるogpタグを確認する方法

フロントエンド Chrome youtube

youtubeの仕様が変わって、UserAgentを見てogpタグの出力を制御している模様。

Google dev toolでカスタムUserAgentに以下を指定することで、ogpタグを確認することができる。

facebookexternalhit/1.1 (+http://www.facebook.com/externalhit_uatext.php)

f:id:arm4:20180319183701p:plain

参考

stackoverflow.com

Google ChromeでカスタムUserAgentを指定する方法はこちら

qiita.com

ogpタグ値をChrome 拡張機能で確認

ogpタグで指定されている値をさくっと確認したい場合は、こちらのChrome拡張入れると便利。

Open Graph Preview

chrome.google.com

こんな感じ。

f:id:arm4:20180319183610p:plain

2018-03-01

LINE APIの権限まわりについて

LINE

どうもベル子です。
社内で知識をチケットにまとめるという
プロジェクトが始まりました。

ただ、やっぱり私は、エンジニアたるもの社内だけで知識を共有するってのは違うよなと思うタイプなんで、そっちでまとめたものも社会貢献＆自分の財産としてブログに転載していくつもりです！
オープンソースマインド★

そもそも知識は人から与えられるものよりも
自分で取りに行ったもののほうが身につくということもあるので
あまり超人的な先輩がたくさんまとめているものを最初からあてにするのはよくないんではないかという気もします。

お手本がなくても、いじくって自分のコードを仕上げるという経験から学ぶことって多いじゃないですか。

だから私自身は、ある程度の基礎以外は聞かれたら教えるというスタイルなんですよね。

まあ、でも先人の知恵をさくっと習得したほうが、合理的で時間の節約もできますよね。

このバランス感がプログラマとして大事なのではないかと思ってます。

合理性や論理性、そして情熱や衝動のバランス。

それがプログラマになるには必要な才能のような気がしているんですよね。センスというか。
そして最後には、情熱や衝動に敵うものはなくて、才能やセンスも情熱を傾けた努力には敵わない。そんな気がします。

久しぶりにエモいｗ

というわけで本題はいります！

LINE APIには大きく分けて2つの権限レイアーがあります。

プロバイダ
チャネル

このプロバイダへ参加するメンバーを登録することができ、
参加メンバーはそのプロバイダに所属しているチャネルの一覧を見ることができます。

ただし、チャネルはチャネルへの参加者権限を付与しなければチャネル詳細を閲覧したり編集したりすることができないようになっています。

プロバイダへ参加していないメンバーでも、
開発者アカウントのメールアドレスを利用しチャネルに個別に追加することができます。この場合、個別に追加されたメンバーはプロバイダに所属している他のチャネル一覧を閲覧することはできません。

クライアントに引き渡す際には、
このようにして個別のチャネルにクライアントの開発者アカウントを追加してください。

プロバイダ

企業や組織名を登録し、プロバイダの配下にLINEログインやMessaging APIのチャネルを登録していきます。
例）株式会社ほげ

チャネル

LINEログイン、またはMessaging APIのことをチャネルと呼びます。
Messaging APIチャネルは、作成すると1つにつき1つのLINE@のアカウントが自動的に作成され
LINEアカウントでログインするLINE@マネジャーに管理中のアカウントとして自動的に追加されます。

LINEログインチャネルは作成しても紐づくLINEアカウントなどは作成されません。

すでに作成済みのLINE@アカウントをMessaging APIに紐付けることもできます。
その場合、「1:1トーク」と「LINE@アプリ」の利用ができなくなるため、すでに利用しているクライアントには確認が必要。
https://at.line.me/jp/plan

Messaging APIチャネルの権限管理とLINE@の権限管理は別ですが、
Messaging APIチャネルで権限を与えるとLINE@にも追加されるという仕組みのようです。

注意事項

プロバイダに所属している チャネルA に管理者が1人しかおらず、
その管理者をプロバイダからbanするとチャネルがゴースト化して削除できずに残ってしまう。
おそらくバグ、もしくは削除方法があるのかもしれないが現状そうなってしまうので
テストでいろいろ作成する際にはテストで作ったチャネルを全て削除してからアカbanするようにしてください。

開発者アカウントについて

開発者アカウントの開発者名、メールアドレスは自由に変更ができます。
開発者アカウントのメールアドレスは個人のLINEアカウントから作成されるため
通常はプライベートなメールアドレスに設定する場合が多いと思われますが
権限一覧では一部が伏せ字になっているので
クライアントに個人のメールアドレスが丸見えになることはありません。
開発者名はクライアントから丸見えなので、それらしいものを付けたほうがよければ編集してください。

検索用キーワード：
LINE API 権限管理 Messaging API LINE@ line Line LINEログインライン

2018-01-22

勉強会のスライド

スライド Vue.js テスト

おはようございます！
勉強会で作ったスライドは全世界に公開することにしている私です。
今までの勉強会のスライドをブログにまとめて載せておきます。

Selenium勉強会

speakerdeck.com

Vuexで覚える状態管理

speakerdeck.com

今月は忙しいので、ブログが単なるまとめになりました。

ちなみに個人的なニュースとしては、ベリーダンスフェスティバルのステージに立つことが決まりました！
その練習も結構入ってくる予定で、さらにダラダラ年末に書いていた小説の連載を始めたので、そちらも完結させようと思ってるんで、しばらく私生活も忙しくなりそうです。

実はちょっと仕事が忙しいうえに、いろいろとあって精神的にやや参っているので、逆に何も考えられなくなるくらい忙しくしてみようと思って、好きなことをして追い込みをかけてみています。
良い子はマネしないようにね★

効果があるのかないのかは分かりませんが、ひとまずまだ雑誌の後ろに載ってる何でも願い事が叶うブレスレットは買わないで済んでいます。

と、ちょっと愚痴っぽくなりましたが、回復力がすごいタイプなので、おそらく来週くらいにはディズニーランドの店員ぐらい元気いっぱいになってると思う。

のうまく　さんまんだ　ばざらだん　せんだ　まかろしゃだ　そわたや　うんたらた　かんまん

とりあえず、毎日マントラ唱えとくわ！

んだば！

2017-12-28

PHPでメール着弾時、メール本文をパースしDBへ格納する(1)〜メールサーバ構築編〜

php インフラサーバ関連

大まかな流れ

特定のメールアドレス宛のメールを受信したらPHPをキックするようにpostfixで設定

大まかなやること

目的のドメインにMXレコードを追加する
本番サーバにpostfixをインストール
postfixの設定をする
/etc/aliasesに着弾用ユーザ名を追加し、phpをキックさせるようにする

本番サーバにpostfixをインストール＆設定手順

postfixがインストールしてあるか確認

yum list installed | grep postfix
cd /etc/postfix
which postfix

インストールしてなかったらyumでインストール

sudo yum -y install postfix

インストールしてある人はmtaの確認

sudo alternatives --config mta

2 プログラムがあり 'mta' を提供します。

  選択       コマンド
-----------------------------------------------
*  1           /usr/sbin/sendmail.sendmail
 + 2           /usr/sbin/sendmail.postfix

Enter を押して現在の選択 [+] を保持するか、選択番号を入力します:

こんなふうにsendmail.postfixが選択されていたらEnterを押して終了する。 sendmail.sendmailだった人は、周りに確認してからsendmail.postfixに変更。

MXレコードの確認

nslookup -type=mx example.com                                                                                                                                                     
Server:     192.168.0.1
Address:    192.168.0.1#53

Non-authoritative answer:
example.com     mail exchanger = 10 mx1.example.com.

こんな感じでNon-authoritative answerのところに追加したMXレコードがでてくればOK。

DNSの更新が遅い場合があるので、そんな時はGoogle Public DNSを指定して問合せてみるとすでに反映されている可能性がある。

nslookup -type=mx example.com 8.8.8.8                                                                                                                                                   12:48:32
Server:     8.8.8.8
Address:    8.8.8.8#53

Non-authoritative answer:
example.com mail exchanger = 10 example.com.

Authoritative answers can be found from:

ひとまずメール送信できるかテスト

sendmail watashi_no_address@example.co.jp
From:test@example.com
To:chakudan@example.com

Subject:テスト送信

テスト送信してみました。てへぺろ
.

この段階では送れはするが送信元アドレスとかいろいろおかしい。

迷惑メールフォルダに入ってる可能性もあるので、そっちもチェックしたほうがいい。

メールログで送信できてるか確認

sudo cat /var/log/maillog

status=sentになってれば送れてる

Postfix設定

main.cfというのがPostfixの設定ファイルなので、それを編集して設定していく。

SMTP認証関係の設定も同時に行う。

今回は受信が必要なので、受信用の設定も同時に行う。

sudo cp main.cf main.cf.org
sudo vi main.cf

▼main.cf

myhostname = mx1.example.com
mydomain = example.com
myorigin = $mydomain
inet_interfaces = all
inet_protocols = ipv4
mynetworks = 192.168.0.0/24, 127.0.0.0/8
mydestination = $myhostname, localhost.$mydomain, localhost, $mydomain

home_mailbox = Maildir/

smtpd_sasl_auth_enable = yes
smtpd_recipient_restrictions =
    permit_mynetworks
    permit_sasl_authenticated
    reject_unauth_destination
smtpd_sasl_security_options = noanonymous

※inet_interfacesとmydestinationは外部からメールを受け付ける受信用の設定

master.cfの設定もしていく

sudo cp master.cf master.cf.org
sudo vi master.cf

master.cfの以下の行をコメントインする

▼master.cf

submission inet n       -       n       -       -       smtpd
  -o smtpd_sasl_auth_enable=yes
   -o smtpd_client_restrictions=$mua_client_restrictions

postfixを再起動する

sudo service postfix restart

Postfixの自動起動設定

sudo systemctl enable postfix
sudo systemctl start postfix

SMTP認証に使われるsaslをインストールする

sudo yum install cyrus-sasl

自動起動設定

sudo systemctl start saslauthd
sudo systemctl enable saslauthd

saslの設定

sudo cp /etc/sasl2/smtpd.conf /etc/sasl2/smtpd.conf.org
sudo vi /etc/sasl2/smtpd.conf

▼smtpd.conf

pwcheck_method: auxprop
mech_list: plain login

ユーザーディレクトリの雛型を設定しメール用のディレクトリをデフォで作る

sudo mkdir -p /etc/skel/Maildir/{new,cur,tmp}
sudo chmod -R 700 /etc/skel/Maildir/

着弾用ユーザを追加

sudo useradd chakudan
sudo passwd chakudan

追加したユーザにSMTP認証用パスワードを設定

sudo saslpasswd2 -u mx1.example.com chakudan

saslのユーザーリストに登録されているか確認

sudo sasldblistusers2

パーミッションの変更

sudo chgrp postfix /etc/sasldb2
sudo chmod 640 /etc/sasldb2

postfixとsaslを再起動

sudo systemctl restart postfix
sudo systemctl restart saslauthd

外部からメールを受信させる設定

25番ポート開いてるか確認(外から)

↓こんな感じで返って来たら開いてる

telnet mx1.example.com 25
Trying xx.xx.xx.xx...
Connected to mx1.example.com.
Escape character is '^]'.
220 mx1.example.com ESMTP Postfix

↓こんな感じで返って来たら開いてない

Trying xx.xx.xx.xx...
telnet: connect to address xx.xx.xx.xx: Connection refused
telnet: Unable to connect to remote host: Connection refused

※ポートの確認をするのはドメインに対してではなく、MXレコードで追加したメールサーバのホストネームのほうで確認しないと意味ない。MXレコードのIPを記述ミスするとハマる。

25番ポートを開ける

まずはクラウド側でポート解放設定があったらそれを先にやる

それだけで解放できない場合はサーバ側からも解放する

まずは開いてるポートの確認

sudo firewall-cmd --list-ports --zone=public
xxx/tcp

25が開いてない人は開ける

sudo firewall-cmd --add-port=25/tcp --zone=public

このままだと再起動するとポートが閉じてしまうので再起動しても開いてくれる設定をする

sudo firewall-cmd --reload
sudo firewall-cmd --add-port=25/tcp --zone=public --permanent
sudo firewall-cmd --reload

25番ポート開いてるか再確認

telnet mx1.example.com 25

サーバローカルで認証のテスト

Base62でユーザ名とパスワードをエンコードしておく

perl -MMIME::Base64 -e 'print encode_base64("chakudan\0chakudan\0password");'

telnetで認証のテストをする

telnet localhost 25
EHLO localhost
AUTH PLAIN Y2hha3VkYW4AY2hha3VkYW4AcGFzc3dvcmQ=

235 2.7.0 Authentication successfulが表示されたら認証OK。

※上記のパスワードは、chakudanユーザのOSログインパスワードではなくSMTP認証用パスワードで設定したパスワード。

転送設定

ひとまず自分のアドレスへ転送設定をしておく

sudo cp /etc/aliases /etc/aliases.org
sudo vi /etc/aliases

▼aliasesの一番下にこれを追加

chakudan: chakudan, watashi_no_address@example.co.jp

chakudanは着弾用ユーザ名
watashi_no_address@example.co.jpは自分が普段使ってるgmailのアドレスなんかにしておけばいいと思う。

aliasの設定を反映

sudo newaliases

テスト送信

普段使ってるgmailなどのメーラーからchakudan@example.comにテストメールを送信してみる。

サーバ側の/home/chakudan/Maildirにメールが届いていて、watashi_no_address@example.co.jpにも同じメールが転送されていれば、サーバ側の設定は完了。

ついでにPOP3サーバの設定もする

dovecotをインストールする

sudo yum install dovecot

dovecotの設定

sudo cp /etc/dovecot/dovecot.conf /etc/dovecot/dovecot.conf.org
sudo vi /etc/dovecot/dovecot.conf

dovecot.confの以下をコメントイン

protocols = imap pop3 lmtp

sudo cp /etc/dovecot/conf.d/10-auth.conf /etc/dovecot/conf.d/10-auth.conf.org
sudo vi /etc/dovecot/conf.d/10-auth.conf

sudo cp /etc/dovecot/conf.d/10-mail.conf /etc/dovecot/conf.d/10-mail.conf.org
sudo vi /etc/dovecot/conf.d/10-mail.conf

sudo cp /etc/dovecot/conf.d/10-ssl.conf /etc/dovecot/conf.d/10-ssl.conf.org
sudo vi /etc/dovecot/conf.d/10-ssl.conf

▼10-auth.conf

disable_plaintext_auth = no

▼10-mail.conf

mail_location = maildir:~/Maildir

▼10-ssl.conf

ssl = no

dovecotの起動設定

sudo systemctl start dovecot
sudo systemctl enable dovecot

pop用ポートを解放

クラウド側で110番ポートを解放

サーバ側ポート解放

sudo firewall-cmd --add-port=110/tcp --zone=public --permanent

ポートが開いてるか確認

sudo firewall-cmd --list-ports --zone=public
telnet example.com 110

メーラーに設定して送受信のテストを行う。

送信も受信もできれば、メールサーバの構築は完了。

めでたし、めでたし。

次回は、PHPをキックしてメールをパースしてDBに格納するよっ♥

お楽しみにね★