12月 2019 - inokawablog

【随時更新】vue.jsでよく使うフィルター

vue.jsには便利なフィルターという機能がある。   以下のような形で書かれ、“パイプ(‘|’)” 記号を使用する <!– mustaches –> {{ message | capitalize }} <!– v-bind –> <div v-bind:id=”rawId | formatId”></div>   コン […]

ブログのデザインを変えようかと思う話。

タイトルの通りだが、ブログのデザインを変えようかと思っている。   このinokawablog、やはり少しダサい。 個人的にはシンプルなものが大好きで、シンプルであればあるほど良いと思っている。 noteやmediumなどはとてもシンプルで、読み手がストレスなく読めることを追求している感じがとてもよく伝わる。書いていても無駄な機能を省いており、文字間も適度に空いており、書いていても気持ち […]

【Service Worker】Laravel + vue のSPAサイトをPWA化させてWebPushまで実装

  簡単なサンプルと、NativeとPWAでできることの説明などはこちらが綺麗にまとまっています。 Androidは大抵の機能が使えるのですが、iOS は全然ダメです。肝心のWebPushが使えないです。 アイコンのバッジとWebPushがiOSで対応したら一気に広まるとは思うのですが、今の所は機能面ではNativeに軍配が上がります。   PWA化させるだけなら Localh […]

SPAでのOGP設定と表示方法

facebookやtwitterなどで画像を表示させたいけど、SPAでは表示されないということがあり、ずっと悩んでいました。 ただOGPを設定するだけならVue headなどを使って設定はできるのですが、twitter,facebookではogpが読み込まれませんでした。 SSRなどをして対処している記事もありましたが、複雑になるのであまりやりたくはありませんでした。   そこでふと思い […]

vue.jsで画像をレンガ状に並べる【brick layout】

    このようなgoogle imagesや500pxのように画像をレンガ状に並べるレイアウトをvue.jsで実装していきます。 レンガ状のレイアウトを brick layout というらしいです。これとは別にPinterestのようなレイアウトは water fall と呼ばれています。   こちらのissuesを参考にして作りました。とっても素晴らしい内容でした […]