「vuetify」の記事 - Crieit

【個人開発】踏破した都道府県を日本地図でシェアできるWebサービス「日本踏破図🗾」を作りました

2021-12-27T23:20:34+09:00

はじめに

「日本踏破図🗾」というWebサービスをNuxt × Vuetifyで個人開発しました！

日本踏破図🗾

どんなWebサービスか

踏破した都道府県を日本地図でチェックすることができ、自分が今までに日本をどれだけ踏破したかをみんなにシェアできます👍
以下のように日本地図上で都道府県をチェックできます。これをシェアボタンでシェアすると・・・

以下のようなOGP画像でシェア可能です！地図のカラーも好きな色に変更することができます。

使用したフレームワーク・インフラなど

NuxtJS（Nuxt Bridge）
Vuetify
vuex（vuex-module-decorators）
PWA
Vercel（Serverless Functions）

主なものになります。多機能なWebサービスではないのでそんなに色々使ってはいません。
よく使うNuxtとVuetifyでフロントを構築して、NuxtのNitroエンジンを使ってVercelのServerless Functionsへデプロイしています。

当初はSSRにするつもりはなかったのですが、動的OGPを実装するために色々試行錯誤した結果SSRにしました。ただ、Nuxt3／Nuxt Bridgeから使えるようになったNitroエンジンのおかげで高速&ゼロコンフィグでVercelを利用できます。

苦労したところ

動的OGPをどう実装するか

正確に言うと「いかに簡単かつ無料で実装するか」に苦労しました。
検索するとfirebaseを使ってmetaだけSSRしたものを返してリダイレクトさせる等々、実現方法自体は色々でてきます。

ただ、正直なところこの規模・機能のWebサービスにそこまでしたくなかったんですね（できるだけシンプルな作りにするということも最初に決めていました）

最終的に実装した方法は以下です。

OGP画像を生成して画像を返すServerless Functionsを用意する
Functionsへ画像生成に必要な情報(チェック済みの都道府県、地図カラー)を渡す

必要な情報をURLパラメータに持ち、それを利用してmetaタグのog:imageのエンドポイントを作っています。
そのためサービス自体はSSRする必要がありますがVercelを使えば十分な無料枠でServerless FunctionsでSSRできます。

個人的には下手にhackyな方法をとるよりも、SSRが必要な場面ではおとなしくSSRしておいた方が良い気がします🤔
（結局のところTwitter・Facebookのクローラーのためだけにあれこれやりたくない）

ちなみにNetlifyにPrerenderingという機能があるのですが、これを有効にすることで事前レンダリングされたHTMLを返すことができます。
SPA構成にしてPrerenderingを試してみたのですが、どうもPrerenderingの対象はUserAgentを見ているだけらしくTwitterクローラーであればNetlify Functionsのエンドポイントも問答無用でPrerenderingされるみたいでした。
なのでOGP画像を返すはずのFunctionsがTwitterクローラーの時はPrerenderingされてHTMLを返すようになってしまい、OGP画像が表示されず使えませんでした。。

まぁ、NetlifyのPrerenderingはキャッシュ時間(24〜48時間)もコントロールできないし、なによりBETAなのでまだ実用的ではないですね。。

サイトデザイン

デザインというのはセンスだと思っています。つまるところ、それを磨くためには多大な時間・努力が必要ということです😉
私はデザイナーではないのでそこについて時間をかけて勉強するのは得策ではありません。
悩み・試行した結果、全体的にカードベースのデザインになりました。

また、根本のデザインはいわゆるUIフレームワークに頼るわけですが今回はよく使うVuetifyを利用しました。Vuetifyのコンポーネントを使うことで何も考えずそこそこきれいなサイトができあがります。

https://vuetifyjs.com/ja/

ただ、今回は個人的にやってみたいと思っていたGlassmorphism（グラスモーフィズム）チックなデザインを実装しました。
これが間違いで、Vuetifyはマテリアルデザインを実装するフレームワークなんですね。それに対してマテリアルデザインからかけ離れるようなものを実装すると色々と歪みが生じます🙃

importantを使ってVuetifyのcssを上書きして実装しましたが、こういうことをする場合はTailwind CSSを利用するべきでした。。

https://tailwindcss.com/

運営コストについて

現状、ドメイン代オンリーです。
上の方でも少し書いていますが個人開発においては無料で運営できることにこだわっています。

まぁ、お金はかからないに越したことはないし、お金がかかってくるとちゃんとメンテしなくちゃとか、マネタイズ考えないと！とか思ってしまうわけですが無料であればひとまず放置で問題ないですからね。

ちなみに、このWebサービスでは最初からマネタイズは一切考えていません。機能的にサービス自体がマネタイズにつながるものでもないですがアドセンス等の広告等も一切はらないと決めて開発をスタートしました。

サイトパフォーマンスについて

使っている技術からもわかるかと思いますが、パフォーマンスは問題なく良いです。
特にSSRするとやっぱり初期描画のパフォーマンスがすごいです（コールドスタート時以外）

いくら無料のインフラにこだわっているかといってパフォーマンスを犠牲にしたらお話にならないですからね😉

機能の説明

日本踏破図🗾でできることを改めて説明させていただきます。

日本地図で踏破した都道府県をチェック

日本地図上の都道府県を選択することができます。選択状況した数によって日本をどれくらい踏破したかがわかります。
また、シェアボタンから踏破した都道府県をシェアすることができます❗

日本地図のメニュー

地図メニューから、それぞれの機能を利用できます。

地図をリセットする（都道府県の選択状態・色をリセットする）
地図の色を変える（日本地図の色を変更できます）
日本を踏破する（すべての都道府県を選択状態にします）
コピー（日本地図をクリップボードへコピーします）
ダウンロード（日本地図をpng画像としてダウンロードします）

チェックボックス

日本地図上から都道府県を選択する以外に、チェックボックスでも選択することができます。チェックボックスで選択すれば連動して日本地図上の都道府県も選択状態になります。

ソースコード

日本踏破図🗾のソースコードはMITライセンスで公開しています👉

https://github.com/k-urtica/traverse-japan

さいごに

登録ログイン不要で使えるのでぜひ使ってみてください。
よろしくおねがいします！

🌐 サイト：https://traverse-japan.dev/
👀 開発：K
🚩 ソース：https://github.com/k-urtica/traverse-japan

おまけ

Web ToolBoxというブラウザで無料で使えるツール集を公開しています。
こちらもよろしくおねがいします。

https://web-toolbox.dev/

【Apache Laravel Vue.js Vuetify】webアプリをスマホに対応させるためにやったこと

2020-11-10T18:19:54+09:00

Apache＋Laravel＋Vue.js＋Vuetify　で作った社内ツールをスマホ対応したときに行った作業内容メモ。
~~ほんとにiosが嫌いになりそうだった~~

対応ブラウザは、

chrome(PC, Android, ios)
safari(ios)

まずはiPhone、Androidのデバッグが出来るように準備する

それぞれの端末を持っていれば、PCに繋いでデバッグができる！なんて素晴らしい。
iosはiPhone以外にもiPad、iPod touch　でも問題なし。
それぞれ以下を参考に。

Android:https://qiita.com/hojishi/items/12b726f8b02ef3d713e4
ios：https://webkatu.com/archives/ios-safari-debug-on-windows/

Polyfillを入れる

Vuetifyの公式ドキュメントに則って入れればOK。

npm install babel-polyfill --save
npm install @babel/preset-env --save

インストール後、
import Vue from 'vue' とか
import vuetify from '@/plugins/vuetify
を書いているファイルに、
import 'babel-polyfill' を追加。
（自分の場合は /resources/assets/js/app.js）

ルートディレクトリの .babelrcに、

 {
  "presets": ["@babel/preset-env"]
}

対応していないjsを地道に直す

特に問題なければ、↑を行えば画面は表示されるはず…と思っていたのだが、画面が真っ白だった。

エラーを調べると、どうやら正規表現で後読みを使っているのが原因みたいだったので、該当箇所を修正。
（safariは後読みに対応していない）

※書いている最中に気づいたけど、それってつまりうまくPolyfillが使えていなかったのでは…？？

「Error: Network Error　POST 応答を解析できません」を直す

iosのみ起きる謎現象。これに2日かかった…
自分は、Apacheの設定を変更で直った。


    AllowOverride All
    # Allow open access:
    Header unset Upgrade       ←これを追加

とりあえずここまでで画面が開けるようになりました。
以降は細かい部分です。

スクロールを入れたくないのにスマホだと入ってしまう

webアプリ全体にスクロールを入れたくない場合、bodyにheight:100%とか入れればPCでは大丈夫だったりしたんですが、
スマホだとどうにも謎のスクロールが入ってしまうので、以下のように対応。

…

※jsでhtmlのところにstyleを指定する方法がわからなかったのでid属性を無理やり、、、

const windowHeight = window.innerHeight;   // windowの高さを取得

// の高さを、windowsの高さいっぱいに設定
document.getElementById("content").style.height = windowHeight + "px";
// bodyはheight:100%
document.body.style.height = "100%";

// スクロールバー非表示
// スマホのときはbodyに、PCのときはhtmlにかけないと反映されないっぽいので分ける

const isSP = /iPhone|iPod|iPad|Android/i.test(navigator.userAgent);     
if (isSP) {             
    document.body.style.overflowY = "hidden";
} else {
    document.getElementById("content").style.overflowY = "hidden";
}

…無理矢理感半端ないけど、ひとまずこれでPCでもスマホでも画面いっぱいでコンテンツが収まるようになった。

iosだけ、キーボードのenterでボタンクリック判定されてしまう

PCやAndroidでは大丈夫なのに、iosだけ起きる謎現象。
改行する度にボタンが押されて送信されるという、、、、

※単純にv-formのsubmitイベントが発火してしまっている場合は、こちらを参考に。

根本的な原因はわからなかったため、
入力文字が空欄・改行のみの場合は、ボタンクリックで呼ばれる処理が走らないようにした。


送信


data: () => ({
    inputText: "",      
}),

computed: {
    /**
     * 空文字判定
     */
    isTextEmpty() {
         return !this.inputText || !this.inputText.match(/\S/g);
    },
},

methods: {
    submit() {
        if (this.isTextEmpty) return;

        // 以下送信処理
    }
}

iosだけファイルアップロードができない

ファイル選択のダイアルボックスを開く→ファイルを選択→アップロード
という流れのとき、iosだけダイアルボックスが開かないという謎現象。
エラーも出ない…

調べてみたら、どうやらinput.onchangeが動いていないようだった。

function uplod() {
    return new Promise(resolve => {
        const input = document.createElement('input');
        input.type = "file";
        input.multiple = false;
        input.accept = "image/gif,image/jpeg,image/png";
        input.onchange = event => {
            var file = event.target.files[0];
                resolve(file);                    
            };
            input.click();
        });
}

ios以外は↑でも動いたが、どうやらiosではちゃんと要素をDOMに追加してあげないといけないらしい。
参考：https://stackoverflow.com/questions/47664777/javascript-file-input-onchange-not-working-ios-safari-only

というわけで、以下のように修正

function uplod() {
    return new Promise(resolve => {
        const input = document.createElement('input');
        input.type = 'file';
        input.multiple = false;
        input.accept = "image/gif,image/jpeg,image/png";
        document.body.appendChild(input);     // ←DOMに追加
        input.onchange = event => {
            var file = event.target.files[0];
            document.body.removeChild(input);     // ←DOMから削除
            resolve(file);
        };
        input.click();
    });
}

iosだけ画像が縦に伸びる時

これは別記事にもメモしてあるが、
display:flex;を指定している箇所に、align-items: flex-start;を追記するだけ。
参考：https://nichiyogogo.com/image-looks-stretched/

iosだけ、heightを指定した要素内の「overflow-y: visible scroll;」が効かない

これもiosの一部で起きる現象。
safariのバージョンの問題かもしれない。

ますはここを参考に修正。
自分はこのときにも頑なにoverflow-y: visible scrolと書き続けていたら直らず、
素直に overflow-y:auto; にするだけで解決…。

おわり

ほとんどios対応ですね。
Androidはグリッドをちゃんと設定して、表示崩れしないようにだけしてあげれば殆ど動きました。
マジでiosとsafariが嫌いになりそうだった…。

CSSフレームワークのブレイクポイントを比べて(Bluma, Vuetify, Element, Bootstrap, etc..)

2019-08-27T18:28:49+09:00

いま開発している積読用の読書管理アプリでは、CSSフレームワークにBlumaを使ってる。
昔は、VuetifyやBootstrapを使っていたけど、ブレイクポイントが違っているのでまとめてみた(´ω｀)

ブレイクポイントのまとめ

	xs	sm	md	lg	xl
Bluma	< 769	< 1024	< 1216	< 1408	1408
Bootstrap	< 576	< 767	< 992	< 1200	1200
MaterialDesign	< 600	< 1024	< 1440	< 1920	1920
Vuetify	< 600	< 960	< 1264	< 1904	1904
Material-UI	< 600	< 960	< 1280	< 1920	1920
Element	< 768	< 992	< 1200	< 1920	1920
TwilwindCSS	< 640	< 768	< 1024	< 1280	1280

だいたい5段階になってるっぽい。上限や下限がそれぞれ違うのがおもしろい(´ω｀)
ちなみに単位はpx。収まらなかったので省略...

調べたのはこの7つ

Bluma ... Responsiveness | Bulma
Bootstrap ... Overview · Bootstrap
Material Design ... Responsive layout grid - Material Design
Vuetify ... Breakpoints — Vuetify.js
Material-UI ... Breakpoints - Material-UI
Element ... Component | Element
Twilwind CSS ... Breakpoints - Tailwind CSS

Material DesingはCSSフレームワークではないけど参考として。

Bluma

参照元: Responsiveness | Bulma: Free, open source, & modern CSS framework based on Flexbox

まずは使っているBluma。
Bluma独特なのが、コードがxsなどではなく、デバイスの種類になっている点。
classに書くときもわかりやすい。が、全体的に狭い範囲で細かい切り替えになっているよう。

コード	説明	範囲
mobile	Mobile	< 769px
tablet	Tablet	< 1024px
desktop	Desktop	< 1216px
widescreen	Widescreen	< 1408px
fullhd	FullHD	1408px

// Extra Small (phones)

// Small devices (tabletS)
@media (min-width: 770px) { ... }

// Medium devices (desktops)
@media (min-width: 1024px) { ... }

// Large devices (widescreen desktops)
@media (min-width: 1216px) { ... }

// Extra large devices (fullhd desktops)
@media (min-width: 1408px) { ... }

Bootstrap

参照元: Overview · Bootstrap

xsのブレイクポイントが一番小さいのが印象的。

コード	説明	範囲
xs	portrait phones	< 576px
sm	landscape phones	< 767px
md	tablets	< 992px
lg	desktops	< 1200px
xl	large desktops	1200px

// Extra Small (portrait phones)

// Small devices (landscape phones)
@media (min-width: 576px) { ... }

// Medium devices (tablets)
@media (min-width: 768px) { ... }

// Large devices (desktops)
@media (min-width: 992px) { ... }

// Extra large devices (large desktops)
@media (min-width: 1200px) { ... }

Material Design

参照元: Responsive layout grid - Material Design

ホントの分類はこんな感じ。
縦向き・横向きでそれぞれ決められているので、かなり細かい。

コード	説明	範囲
xsmall	Portrait: small handset	< 360px
xsmall	Portrait: medium handset	< 400px
xsmall	Portrait: large handset	< 480px
xsmall	Portrait: large handsetLandscape: small handset	< 600px
small	Portrait: small tabletLandscape: medium handset	< 720px
small	Portrait: large tabletLandscape: large handset	< 840px
small	Portrait: large tabletLandscape: large handset	< 960px
small	Landscape: small tablet	< 1024px
medium	Landscape: large tablet	< 1280px
medium	Landscape: large tablet	< 1440px
large		< 1600px
large		< 1920px
xlarge		1920px

// Extra Small (phones)


// Small devices (portrait tablets)
@media (min-width: 600px) { ... }

// Medium devices (landscape tablets)
@media (min-width: 1024px) { ... }

// Large devices (laptops)
@media (min-width: 1440px) { ... }

// Extra large devices (desktops)
@media (min-width: 1920px) { ... }

Vuetify

参照元: Breakpoints — Vuetify.js

Material Designを実現するためのCSSフレームワークなので、
Material Designと区分けが近いが、少し異なるので注意が必要かも?

コード	説明	範囲
xs	small to large handset	< 600px
sm	small to medium tablet	< 960px
md	large tablet to laptop	< 1264px
lg	desktop	< 1904px
xl	4k and ultra-wides	1904px

// Extra Small (small to large handset)


// Small devices (small to medium tablet)
@media (min-width: 600px) { ... }

// Medium devices (large tablet to laptop)
@media (min-width: 960px) { ... }

// Large devices (desktop)
@media (min-width: 1264px) { ... }

// Extra large devices (4k and ultra-wides)
@media (min-width: 1904px) { ... }

Material-UI

参照元: Breakpoints - Material-UI

こちらもMaterial Designを実現するためのCSSフレームワーク。
ドキュメントには詳しい説明がないが、「Material DesignのSpecをsimplifiedしたぜ」とのこと。

コード	説明	範囲
xs	extra-small	< 600px
sm	small	< 960px
md	medium	< 1280px
lg	large	< 1920px
xl	extra-large	1920px

// Extra Small


// Small devices
@media (min-width: 600px) { ... }

// Medium devices
@media (min-width: 960px) { ... }

// Large devices
@media (min-width: 1280px) { ... }

// Extra large devices
@media (min-width: 1920px) { ... }

Element UI

参照元: Component | Element

こちらもMaterial-UIと同様に、あまり説明はない。
smやmdの値が少し独自な感じ。

コード	説明	範囲
xs	extra small viewports	< 768px
sm	small viewports	< 992px
md	medium viewports	< 1200px
lg	large viewports	< 1920px
xl	extra large viewports	1920px

// Extra Small


// Small devices
@media (min-width: 768px) { ... }

// Medium devices
@media (min-width: 992px) { ... }

// Large devices
@media (min-width: 1200px) { ... }

// Extra large devices
@media (min-width: 1920px) { ... }

Tailwind CSS

参照元: Breakpoints - Tailwind CSS

他と比べ、全体的に低めな値が印象的。

コード	説明	範囲
xs	phones	< 640px
sm	tablet	< 768px
md		< 1024px
lg	laptop	< 1280px
xl	desktop	1280px

// Extra Small


// Small devices
@media (min-width: 640px) { ... }

// Medium devices
@media (min-width: 768px) { ... }

// Large devices
@media (min-width: 1024px) { ... }

// Extra large devices
@media (min-width: 1280px) { ... }

おわりに

いろんなフレームワークを横串で見ていくといろいろおもしろい。
個別の対応をどこまで考えないといけないかなども見えてくるかも。
実際にBlumaを使ってるけど、xs以下のサイズは、個別でブレイクポイントを設定したりなども。

新しいものを使うときはいろいろ見ないといけない(´ω｀)

こんなのつくってます。

最近、積読用の読書管理アプリ「積読ハウマッチ」をリリースしました！
積読ハウマッチは、Nuxt.js+Firebaseで開発してます!
CSSフレームワークにBlumaを使ってます(´ω｀)

もしよかったら、遊んでみてくださいヽ(=´▽`=)ﾉ

要望・感想・アドバイスなどあれば、
公式アカウント(@MemoryLoverz)や開発者(@kira_puka)まで。