dockerのmailcatcherでLaravelのメールをテストするenvの設定

dockerのmailcatcherでLaravelのメールをテストするenvの設定

MAIL_DRIVER=smtp
MAIL_HOST=mailcatcher
MAIL_PORT=1025
MAIL_USERNAME=null
MAIL_PASSWORD=null
MAIL_ENCRYPTION=null

docker-composeは以下の感じ

version: '3'
services:
  web:
    build: ./docker/web
    privileged: true
    ports:
      - 80:80
    volumes:
      - ./src:/var/www/html
      - ./docker/web/httpd-laravel.conf:/etc/httpd/conf.d/httpd-laravel.conf
      - ./docker/web/php-laravel.ini:/etc/php.d/php-laravel.ini
    depends_on:
      - mysql
  mysql:
    image: mysql:5.7
    environment:
      MYSQL_ROOT_PASSWORD: root
      MYSQL_DATABASE: laravel
      MYSQL_USER: laravel
      MYSQL_PASSWORD: pass
    ports:
      - 3306:3306
    volumes:
      - ./db/init/:/docker-entrypoint-initdb.d
      - ./db/data/:/var/lib/mysql
  mailcatcher:
    image: schickling/mailcatcher
    ports:
      - 1080:1080
      - 1025:1025

laravel-mixでコンパイルした場合に日本語フォント名がエスケープされて、Webフォントが使えなくなった

laravel-mixでコンパイルした場合に日本語フォント名がエスケープされて、Webフォントが使えなくなることがありましたが、laravel-mixのイベントフック(Event Hooks)を使ってコンパイル後にエスケープ前の変換して解決しました。(もうちょっとスマートにできないかなぁ。。悩み)

Webフォントのサービスは。REALTYPE(https://www.realtype.jp)
以下のように日本語だとOK

.hoge {
    font-family : 'A+mfCv-AXIS Font ベーシック UL ProN';
}

laravel-mixでsassコンパイルすると以下のようにエスケープされてNG

.hoge {
    font-family : 'A+mfCv-AXIS Font \30D9\30FC\30B7\30C3\30AF   UL ProN';
}

次のようにして解決

then()でコンパイル後のイベントをフックして読み込んで置換(split-join)して再度書き込んでます。


//元のフォント名  'A+mfCv-AXIS Font ベーシック UL ProN'
//エスケープされたフォント名  'A+mfCv-AXIS Font \\30D9\\30FC\\30B7\\30C3\\30AF   UL ProN'

mix
    .sass('style.sass', 'dist/css/')
    .then(() => {
        let css = fs.readFileSync('dist/css/style.css', {encoding: "utf-8"});
        css = css.split('\\30D9\\30FC\\30B7\\30C3\\30AF  ').join('ベーシック');
        fs.writeFileSync('dist/css/style.css', css);
    });

参考 : laravel-mix : EventHooiks
https://github.com/JeffreyWay/laravel-mix/blob/master/docs/event-hooks.md

dockerのWordPressのファイルアップロード上限を上げる。

dockerのWordPress使っていて、画像アップロードで上限にひっかかりエラーになる。
dockerのWordPressコンテナのphp.iniで設定してあげればいい。
毎度設定大変なので、docker-compose.ymlにリンクの設定を書く。

(WordPressコンテナのvolumesにphp.iniを追加)

    volumes:
      - ./dist:/var/www/html
      - ./php.ini:/usr/local/etc/php/php.ini

全体はこんな感じ

version: "3.5"
#services:
#  nginx:
#    image: nginx:latest
#    ports:
#      - "80:80"
#    volumes:
#      - ./dist:/usr/share/nginx/html
services:
  wordpress:
    image: wordpress:latest
    ports:
      - 80:80
    links:
      - wordpress-db
    environment:
      WORDPRESS_DB_HOST: wordpress-db:3306
      WORDPRESS_DB_NAME: my_db
      WORDPRESS_DB_USER: my_db_user
      WORDPRESS_DB_PASSWORD: my_db_user_pass
    volumes:
      - ./dist:/var/www/html
      - ./php.ini:/usr/local/etc/php/php.ini
  wordpress-db:
    image: mysql:5.7
    ports:
      - 3306:3306
    environment:
      MYSQL_ROOT_PASSWORD: my_db_user_pass_root
      MYSQL_DATABASE: my_db
      MYSQL_USER: my_db_user
      MYSQL_PASSWORD: my_db_user_pass
    volumes:
      - ./db/mysql_init:/docker-entrypoint-initdb.d
      - ./db/mysql_data:/var/lib/mysql

元々 WordPressコンテナには php.ini は無く、php.ini-development,php.ini-productionのみがあるので、リンクしても大丈夫そう。

$ docker exec xxxx_wordpress_1 ls /usr/local/etc/php
conf.d
php.ini
php.ini-development
php.ini-production

pythonでのスクレイピングメモ

pythonでのスクレイピングメモ

スクレイピングのメモ。

//Toolをpipでインストール
$ pip install reqests
$ pip install lxml
$ pip install cssselect
$ pip install feedparser
#サンプル
import requests
import lxml.html

#html取得
r = requests.get('{URL}')
html = r.text

#オブジェクト化
root = lxml.html.fromstring(html)

#xpath
elements = root.xpath("/html/{XPATH}")

#selecter
elements = root.cssselect("body h1")

#for
for tag in elements:
    print(tag.text) 
import feedparser
rss = feedparser.parse('https://www.shoeisha.co.jp/rss/index.xml')
print(rss)
print(rss.version)
print(rss['feed']['title'])
for content in rss['entries']:
    print(content['title'])
    

MacBookProでiPhoneマイフォトストリームが表示されないときは、MacBook側の設定と、iPhone側の設定も要チェック

写真.appでマイフォトストリームを表示したいときはMac側の
[システム環境設定] > [iCloud] > 写真の[オプション] ボタンからマイフォトストリームにチェックすればOKって記事がよくあってそれをやってもできない。

もう一つ、写真ライブラリがバックアップからのライブラリだったので、写真.appの設定で、[システムフォトライブラリとして仕様] を押して設定してもできない。

しょうがないかとしばらく考えていた(ほっといた)んですが、ふと、iPhoneのiCloudの設定を見ると。[iCloud写真]の[マイフォトストリームにアップロード] にチェックが入っていない。。

これか!

ということでチェックを入れてバッチリ表示された

Mac Magic Trackpad2 が反応しない(クリックしてもカチっという反応がない)とか、ピンチでズームできないなどの対応

最近Magic Trackpad2の調子がおかしいのがきになっていろいろ試して対応しているのでメモ&シェア

クリック時のカチっという反応がない。

クリック時の反応が全くなくなりました。(サイレントモード有無どちらでも).
→Shift + Option を押しながら、メニューバーのBluetoothアイコンをクリックし、[デバッグ] > [すべての接続中のAppleデバイスを出荷状態にリセット]

ピンチアウトでのズームが反応しない

  • トラックパッドの環境設定で、拡大縮小(2本指でピンチ)のチェックを外して再度つける
  • Terminarで、以下のコマンドを実行
$ killall Dock

wgetコマンドメモ。

wgetコマンドメモ。

//基本
$ wget {URL}
//深さ-r 再帰的 , l1は深さ
$ wget -r -l1 {URL}
//標準出力へ
$ wget -O - {URL}
//ダウンロード間隔
$ wget -r -l1 -w3 {URL}
//拡張子指定
$ wget -r -l1 -A jpg,png,gif,svg {URL}
//拡張子除外
$ wget -r -l1 -R jpg,png,gif,svg {URL}
//親ディレクトリを外す(not parent)
$ wget -r -np http://example.com/camera

IE11のSVG背景画像のバグ

IE11のSVG背景画像のバグ

IE11の背景にSVG画像を設定すると位置がおかしかったり、サイズがおかしい場合の対応方法。
(background-size , background-positionが効かない)

以下の属性をsvg画像に追加する。

  • preserveAspectRatio=“xMinYMid”
  • width=“実際の幅”
  • height=“実際の高さ”

指定前

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 504.53 3.78"><defs><style>.cls-1{fill:none;stroke:#eb6400;stroke-linecap:round;stroke-linejoin:round;stroke-width:3.78px;stroke-dasharray:1.26 10.07;}</style></defs><title>product-ttl-boder_1</title><g id="レイヤー_2" data-name="レイヤー 2"><g id="text"><line class="cls-1" x1="1.89" y1="1.89" x2="502.64" y2="1.89"/></g></g></svg>

指定後

<svg preserveAspectRatio="xMinYMid" width="504.53" height="3.78" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 504.53 3.78"><defs><style>.cls-1{fill:none;stroke:#eb6400;stroke-linecap:round;stroke-linejoin:round;stroke-width:3.78px;stroke-dasharray:1.26 10.07;}</style></defs><title>product-ttl-boder_1</title><g id="レイヤー_2" data-name="レイヤー 2"><g id="text"><line class="cls-1" x1="1.89" y1="1.89" x2="502.64" y2="1.89"/></g></g></svg>

HTML/CSSマークアップ(コーディング)ワークフロー最速化の検討

HTML/CSSマークアップ(コーディング)ワークフロー最速化の検討

もっと効率化を測れないかを、いつもクライアント事業フローを見るように自分自身を見たことないなと改めて効率化を考えてみることにしました。

大まかな今のフロー

  1. 入稿(イラレ多し
  2. テキスト抽出(イラレで手作業)
  3. 画像スライス(イラレでアセットの書き出し,svgとpng)
  4. 画像のトリミング(PhotoShop)
  5. 一部画像のJPEG/GIF化(Th-MakerX)
  6. 画像の最適化(ImageOptim)
  7. HTMLマークアップ(PhpStorm/SublimeText)
  8. CSSスタイリング(sass記法+laravel-mix)

できそうな所。

  • 2はスクリプト or ショートカットでできそう。
  • 4〜5は自作アプリで自動化したい。+6へ自動で引き渡したい。