さとうナイトニッポン

やったことのメモとか日々の雑記とか

記事をシェアした時のTwitterカードのサイズ変更をする

twitterにシェアした記事が小さい・・・?

「記事をシェアした際の画像のサイズが小さいんですけど・・・」との問い合わせがきた。
確認してみると、画像というよりも、記事のカードのサイズが小さい

投稿内容や元記事で設定している画像サイズによってカードサイズが変わるのか?パラメータによって変わったりするのだろうか・・・
などと考えて他のメディアの該当箇所を確認するも特に差はなく、とりあえず先生に頼ると以下の記事が。

こちらの記事によると、Twitterカードには合計4つの形式があり、
<meta name="twitter:card" content="形式"> という指定のされ方をしているとのこと
※詳細は元記事にそれはそれは分かりやすくまとめてあるので書きません。

この情報をもとに「サイズが小さい」と言われていた投稿の元記事内を調べてみると、

<meta name="twitter:card" content="summary" />

と記載があった。
これは記事のシェアで使われる2形式のうち画像が小さく表示されるほうで、
画像を大きく表示するには上記のcontent属性を

<meta name="twitter:card" content="summary_large_image" />

に変更する必要があるようだ。

修正したのに反映されない?

思ったより単純な修正でよかった~と修正して再度投稿してみると、 おや?形式が変わってない・・・・?

こういうときは「まずキャッシュを疑え」という心の師の教えの通り、 一度キャッシュを消して、ブラウザの開発ツールから該当タグを確認してみる・・・が
やはり変更は反映されているようだ。

再度先生に訪ねてみると、こちらの記事がヒット

またしてもサルワカさん、お世話になります( ;∀;)

この記事を読む限り、どうやらtwitter側でカードのキャッシュをとっているので、手動で消すかキャッシュが消えるのを待つ必要があるらしい。
(言われてみればそうだし少し考えればわかるだろ私)と少し落ち込みつつCard Validatorで該当記事のキャッシュを消してみる。

再度ツイッターで確認すると・・・・

反映されてた~~~~~( ;∀;)( ;∀;)
ありがとうサルワカさん

キャッシュ期間

これでひとまず要件を果たしたものの、この理論で行くと過去の記時ってどうなるの?
まさか今までの記事のキャッシュ全部手動で消すなんてアホなことできないし・・・
カードのキャッシュってどのくらい残るの?

ということで公式を参照

URL Crawling & Caching という項目に

Content is cached by Twitter for 7 days after a link to a page with card markup has been published in a Tweet.

とある。Google翻訳に突っ込むと

Google翻訳: コンテンツは、カードマーク付きのページへのリンクがツイートに掲載されてから7日間、Twitterによってキャッシュされます。

なるほど、記事がツイートされてから7日間はキャッシュされるってことね。

今回は急ぎではないとのことなので、反映を気長に待つことにした。

でも気になったのは、初めてツイートされてから7日間なのか、最後のツイートから7日間なのか? 要検証。

どうしても!今すぐカードサイズ変えたい時は?

シェアボタンのdata-urlにクエリストリングつけて新しい記事扱いさせるしかない。

まとめ

  • twitterカードには4つのサイズがあって<meta name="twitter:card" content="summary" />で変更できる
  • twitterによって7日間キャッシュされているので、すぐに反映したい記事は手動でキャッシュを消す
  • サルワカ サルでも分かる だけあってゴリラにもわかりやすい

laravel Excelでテンプレートを使用した帳票出力

laravel excelで帳票を出力するサンプルコードはたくさん見つかったものの、テンプレートに出力するコードが中々見つからなかったので書き残しておく。

// テンプレートへのパス 
$template = "/path/to/template" ;
// 出力したいデータ
$data = [
        'name' => 'gorilla',
        'birth' => '1993-01-01',
    ];

Excel::load($template, function($excel) use ($data){
            $excel->sheet('sheet1', function($sheet) use($data) {
                // $sheet->cell('出力したいセル位置', '出力したい値');
                $sheet->cell('C25', $data['name']);
                $sheet->cell('C27', date('Y年n月j日', strtotime($data['birth'])));
            });
        })
        ->setFilename("任意のファイル名")->export('xlsx');

composer install, update 時に artisanコマンドが失敗する

リモートからチェックアウトしてきたプロジェクト内でcomposer installしたら artisanコマンド実行する箇所でエラーが発生したが、 原因がまさかのcomposerのバグでつらかったので書き残す

[hoge@huga proj]$ composer update
> php artisan clear-compiled

Warning: require(/path/to/proj/bootstrap/../vendor/autoload.php): failed to open stream: No such file or directory in /path/to/proj/bootstrap/autoload.php on line 17

Fatal error: require(): Failed opening required '/path/to/proj/bootstrap/../vendor/autoload.php' (include_path='.:/usr/share/pear:/usr/share/php') in /path/to/proj/bootstrap/autoload.php on line 17
PHP Warning: require(/path/to/proj/bootstrap/../vendor/autoload.php): failed to open stream: No such file or directory in /path/to/proj/bootstrap/autoload.php on line 17
PHP Fatal error: require(): Failed opening required '/path/to/proj/bootstrap/../vendor/autoload.php' (include_path='.:/usr/share/pear:/usr/share/php') in /path/to/proj/bootstrap/autoload.php on line 17
Script php artisan clear-compiled handling the pre-update-cmd event returned with error code 255

composer.jsonの下記箇所を削除

"pre-update-cmd": [
"php artisan clear-compiled"
],

post-update-cmdを下記に書き換える

"post-update-cmd": [
"php artisan clear-compiled",
"php artisan optimize",
],

参考

エディタをsublime textからVScodeに乗り換えた。設定等メモ兼

Sublime text いままでありがとう

社会人一年目、テスターとして参画したはずなのに、
来る日も来る日も顧客向けのマニュアル作成。

このままでは何も身につかない・・・・とにかく何かできるようになろう
とまず使い始めたエディタがsublime textだった。

使いやすいし、比較的軽いし、何よりUIが好み(面食い)
恋に落ちるエディタを謳うだけある。私は彼女sublime textのことが大好きになった。

ただ、拡張機能を入れるのが面倒だったり、無償版を使って出てくる案内が鬱陶しかったり(貧乏性で・・・)、周囲がVSCodeを非常に推してくるので

sublimeともなんだかマンネリだしまぁとりあえず使ってみるか~

程度の軽い気持ちで使いはじめたのだけど、今となってはVSCodeでないと満足できない体になってしまった・・・・ごめんねsublime

VSCodeの魅力

操作がわかりやすい

sublime textでは拡張機能を追加するのに苦労したことが何度もあったが、VSCodectrl+shift+X→検索→インストールボタンクリックで即時反映だもの。

日本語化するときもそうだった。Sublimeの時はパケコンインストールしてjapanizeいれてファイル名直して・・・・と慣れない操作に戸惑ったものだけど、VSCodelocale.jsonいじるだけだもの。

VisualStudioCodeの日本語化

markdownプレビューができる

Atomではおなじみの機能なんだとおもうけど、sublime textではmarkdownプレビュー機能が貧弱で、ブラウザとエディタを並べる必要があったが、 VSCodeは当たり前のようにリアルタイムプレビューができる・・・・!!

勉強会に参加したときに、斜め前の先輩がAtommarkdownしてるのを見てうらやましく思いつつもSublime命だったあの頃の私に教えてあげたい。

一度恋したエディタの面影を残せる

これは乗り換えた理由で一番強い理由だけど、 拡張機能によってキーマップをsublime仕様にしたり、配色テーマを慣れ親しんだmolokaiにしたりしてsublime textに寄せて使うことができた。

見知らぬ土地で見知ったものがあると安心するように、見知らぬエディタで見知った機能が使えるのはかなりデカかった。

Visual Studio CodeをほぼSublime Textのように使う方法 | WEMO

VSCode初期設定メモ

拡張機能

ここの記事読めば事足りるので書かない。

これに追加で入れてるのは glassit
画面透過ができる

ユーザ設定

これも詳しい記事があるので掲載して割愛

これに乗ってる設定しておけば間違いなかった。

ただ、背景色ダークグレーでMolokaiの配色だと、 スペースを選択状態にした際にハイライトとスペースの"・"の色調が似すぎてわかりづらいので
この一文を追加して変更

    "workbench.colorCustomizations": {
        "editorWhitespace.foreground": "#6b6a6a"
    }

リモートのファイルを編集するには

remote vscodeをインストール

基本設定に以下追加

"remote.onstartup": true

F1キーを押して、 Remote: Start server と検索してEnter

ターミナル開いてgitbashにする 以下実行

ssh -R 52698:127.0.0.1:52698 vagrant@192.168.33.10
$ sudo wget -O /usr/local/bin/rmate https://raw.github.com/aurora/rmate/master/rmate
$ sudo chmod a+x /usr/local/bin/rmate
$ rmate -p 52698 ファイル名

エイリアス

alias vvi='rmate -p 52698'

vvi ファイル名

まとめ

乗り換えてからしばらくたつけど、特に困ることもなく、日々VSCodeに魅了されている。
sublimeとの思い出は大事だけど、一日8時間以上向き合うものはできる限り使いやすいほうがよいね。

laravelのルーティングがうまくいかない(nginx)

5.2の場合はroutesディレクトリがないので、/path/tp/proj/app/Http/routes.php にルーティング追加するも
ルーティングがうまくいかない。/だけ見られる状態。

環境

  • laravel 5.2
  • nginx

解決策

色々やったけど結局confファイルを以下の通りに書き換えたらいけた
(nginxでは.htaccessmod_rewriteも使えないのでpublic以下の.htaccessが効いてなかったぽい?)

server {
    # サーバのデフォルトTCPポート
    listen  80;
    # サーバ名
    server_name     gorilla.jp;
    # ドキュメントルート
    root    /var/www/gorilla.jp/public;
    # index file タイプの優先順
    index   index.php index.html index.htm;
    # ログファイル名
    access_log  /var/log/nginx/gorilla.jp/access.log;
    error_log   /var/log/nginx/gorilla.jp/error.log;

    error_page   500 502 503 504  /50x.html;
    location = /50x.html {
        root   /usr/share/nginx/html;
    }

    location / {
        try_files $uri $uri/ /index.php?$query_string;
    }

    # php fpm との接続を行うため拡張子phpに対して処理
    location ~ \.php$ {
        try_files $uri /index.php =404;
        fastcgi_split_path_info ^(.+\.php)(/.+)$;

        fastcgi_pass   127.0.0.1:9000;
        fastcgi_index   index.php;
        fastcgi_param   SCRIPT_FILENAME $document_root$fastcgi_script_name;
        include         fastcgi_params;
     }
}

参考

nginxで権限を設定した後も403 Forbiddenが出た話 - サナギわさわさ.json

Laravelでroutingは合ってるはずなのに404not foundが出るときにやること|Laravel|私の生き方にタイトルなど要らない

nginxのウェルカムページが全く表示されない( ;∀;)

なんでじゃ ログ出力してみるも特にエラー出力なし。

とりあえずcurl叩いてみる

[vagrant@localhost nginx]$ curl 192.168.33.10
curl: (7) Failed to connect to 192.168.33.10 port 80: ホストへの経路がありません

ポートがあいてないってこと?
????ファイアウォール確認

[vagrant@localhost nginx]$ sudo firewall-cmd --list-services --zone=public --permanent
dhcpv6-client ssh

httpがない!

追加して確認

[vagrant@localhost nginx]$ sudo firewall-cmd --add-service=http --zone=public --permanent
success
[vagrant@localhost nginx]$ sudo firewall-cmd --list-services --zone=public --permanent
dhcpv6-client ssh http

この状態でブラウザアクセスしたら無事表示された

【Laravel】最新バージョンでないバージョンを指定してプロジェクトを作成する際に嵌った

laravelでプロジェクト作成したときに、色々なくてちょっと泣きそうになったので
もう泣かないようにメモ

プロジェクト作成

プロジェクト作成(今回は古いバージョンを指定するのでインストーラは使用しない)

[hoge@huga /]$cd /var/www/
[hoge@huga www]$ composer create-project "laravel/laravel=5.2.*" gorilla.jp
.
.
.
Your requirements could not be resolved to an installable set of packages.

  Problem 1
    - phpunit/phpunit 5.7.9 requires ext-dom * -> the requested PHP extension dom is missing from your system.

エラー発生。
PHP extension domがなくてphpunit入らないとのこと

[hoge@huga www]$ yum list installed | grep 'php'
php.x86_64                           5.6.34-1.el7.remi               @remi-php56
php-cli.x86_64                       5.6.34-1.el7.remi               @remi-php56
php-common.x86_64                    5.6.34-1.el7.remi               @remi-php56
php-fpm.x86_64                       5.6.34-1.el7.remi               @remi-php56
php-gd.x86_64                        5.6.34-1.el7.remi               @remi-php56
php-mbstring.x86_64                  5.6.34-1.el7.remi               @remi-php56
php-mysqlnd.x86_64                   5.6.34-1.el7.remi               @remi-php56
php-pdo.x86_64                       5.6.34-1.el7.remi               @remi-php56
php-pecl-jsonc.x86_64                1.3.10-2.el7.remi.5.6           @remi-php56
php-pecl-zip.x86_64                  1.15.2-1.el7.remi.5.6           @remi-php56

php-xmlをインストール(php-domが内包されているらしい)
PHPUnit のインストールメモ

[hoge@huga www]# yum install php-xml


エラー: パッケージ: php-xml-5.4.16-43.el7_4.1.x86_64 (updates)
             要求: php-common(x86-64) = 5.4.16-43.el7_4.1
            インストール: php-common-5.6.34-1.el7.remi.x86_64 (@remi-php56)
                php-common(x86-64) = 5.6.34-1.el7.remi
            利用可能: php-common-5.4.16-42.el7.x86_64 (base)
                php-common(x86-64) = 5.4.16-42.el7
            利用可能: php-common-5.4.16-43.el7_4.x86_64 (updates)
                php-common(x86-64) = 5.4.16-43.el7_4
            利用可能: php-common-5.4.16-43.el7_4.1.x86_64 (updates)
                php-common(x86-64) = 5.4.16-43.el7_4.1
 問題を回避するために --skip-broken を用いることができます。
 これらを試行できます: rpm -Va --nofiles --nodigest

またしてもエラー。 phpがremiで入っているのにbaseのリポジトリで要求したからっぽい

こちらの記事( CentOSでのphp-xmlのインストールにはまる | 日々雑記)を見て再度試すも失敗

じゃあどれなら入るの?可能パッケージ確認

[hoge@huga www]# yum list available | grep php56
php56-php-xml.x86_64                      5.6.34-1.el7.remi            remi-safe

こいつが行けるらしい

[hoge@huga www]# yum install php56-php-xml.x86_65

.
.
.


インストール:
  php56-php-xml.x86_64 0:5.6.34-1.el7.remi

依存性関連をインストールしました:
  audit-libs-python.x86_64 0:2.7.6-3.el7          checkpolicy.x86_64 0:2.5-4.el7                      environment-modules.x86_64 0:3.2.10-10.el7
  libcgroup.x86_64 0:0.41-13.el7                  libsemanage-python.x86_64 0:2.5-8.el7               libxslt.x86_64 0:1.1.28-5.el7
  php56-php-common.x86_64 0:5.6.34-1.el7.remi     php56-php-pecl-jsonc.x86_64 0:1.3.10-1.el7.remi     php56-php-pecl-zip.x86_64 0:1.15.2-1.el7.remi
  php56-runtime.x86_64 0:2.3-1.el7.remi           policycoreutils-python.x86_64 0:2.5-17.1.el7        python-IPy.noarch 0:0.75-6.el7
  scl-utils.x86_64 0:20130529-18.el7_4            setools-libs.x86_64 0:3.3.8-1.1.el7                 tcl.x86_64 1:8.5.13-8.el7

完了しました!

やった~~🤩🤩🤩🤩🤩
もう一回create project

[hoge@huga www]$ composer create-project "laravel/laravel=5.2.*" gorilla.jp

同じエラー
CentOS6.8+PHP5.6にPHPUnitのインストールではまる | remember the milk php-mcryptがいるらしい

[hoge@huga www]# yum --enablerepo=remi-php56 install php-mcrypt

またも同じエラー

php-xml入れてみる

[hoge@huga www]# yum --enablerepo=remi-php56 install php-xml
Running transaction
  インストール中          : php-xml-5.6.34-1.el7.remi.x86_64                                                                                         1/1
  検証中                  : php-xml-5.6.34-1.el7.remi.x86_64                                                                                         1/1

インストール:
  php-xml.x86_64 0:5.6.34-1.el7.remi

完了しました!

気を取り直して再度create project

[hoge@huga www]$ composer create-project "laravel/laravel=5.2.*" gorilla.jp

Installing laravel/laravel (v5.2.31)
  - Installing laravel/laravel (v5.2.31): Loading from cache
Created project in gorilla.jp
> php -r "copy('.env.example', '.env');"
Loading composer repositories with package information
Updating dependencies (including require-dev)
.
.
.
.
.
Generating autoload files
> Illuminate\Foundation\ComposerScripts::postUpdate
> php artisan optimize
Generating optimized class loader
> php artisan key:generate
Application key [base64:XXXXXXXXXX/XXXXXXXXXXXXXXXXXXXXXXXXXX=] set successfully.

いけたっぽい?

storageとbootstrapの権限変更

[hoge@huga gorilla.jp]$ sudo chmod -R 777 bootstrap
[hoge@huga gorilla.jp]$ sudo chmod -R 777 storage

ブラウザからアクセス(ルートディレクトリのserver.phpを参照する)

laravel5

できたーーーーーーー( ;∀;)( ;∀;)( ;∀;)🎉🎉🎉

まとめ

  • PHP Unitインストールするにあたりphp-xmlが無かったからエラーが起きた。
  • php-xmlを入れるためのphp-mcryptがなかったのでphp-xmlがないと言われた。

php-mcryptphp-xml→composerで解決(^▽^)