ABCウェブエンジニアblog

Webデザイナー/エンジニア/講師のホームページ・ウェブサイト制作の備忘録

【Google Map】API無しでサイトへGoogleマップを埋め込む方法

グーグルマップをウェブサイトに埋め込む一番簡単な方法

多くの方がご愛用の「Googleマップ」。

お店のサイトなど、直接足を運んでもらうような集客が必要なサイトでは是非アクセス案内として掲載しておきたいですよね。

このGoogleマップの埋め込みについては非常に簡単な方法と、Googleの提供している「Google Maps API」を使った少し手順のかかる方法の2種類があります。

 

後者のGoogle Maps APIを使用する方法だと、デザインをサイトに合わせて編集出来たり、複数の場所を一度にマーカー表示させたり、様々なカスタマイズが可能ですが、こういったAPIの利用に慣れていない方には少し手もかかり難易度が高くなります。

今回は前者のシンプルなGoogleマップの埋め込み方法について解説したいと思います。

続きを読む

【CSS】2020年版ベンダープレフィックスの必要・不要&自動付与の方法

2020年版CSSベンダープレフィックス対応について。必要・不要&自動付与方法

2020年現在、Web制作においてCSSでベンダープレフィックスを何につければいいのか質問を受けたので、少し調査してみました。

ベンダープレフィックスとはCSSの比較的新しいプロパティに各ブラウザを対応させる記述です。

  • vendor」ベンダー…各ブラウザの提供者のこと。
  • prefixプレフィックス…頭につける定型文のようなもので「接頭辞」などと訳されます。

 

個人的にはほぼBootstrapを利用するのでベンダープレフィックスについてあまり気にせずコーディングして、最終段階でクロスブラウザチェックの際におかしい部分があれば対応するという流れにしていて、特に近年問題はありませんでした。

多くの問題はIE10以前に抱えていたものがほとんどなので、流石にその辺りは切り捨ててよい時代になったということでしょう。

 

色々と調べてみると現在のブラウザのCSS3対応状況で、今後ベンダープレフィックスをどう記述するべきかわかってきたので、今回簡単に述べたいと思います。

続きを読む

【HTML】リンクから件名や定型文を入れてメールソフト起動する方法

HTMLでリンクから定型文入りメーラー起動するには「mailto:」

「Webシステム内からクリック一つで、顧客宛にメールソフトを起動してほしい」という要望がありました。

通常、サイトの表側ではフォームを用意する事が多いかと思いますが、今回はサイトの管理画面側のお話。

最近はメールアプリもクラウドが充実して、Outlookなどのメーラーを使用する方がめっきり減った印象ですよね。

ただ顧客によってはそういった、昔から慣れ親しんだメールソフトで問い合わせ対応などの連絡をしたいというようなご要望も健在です。

 

実装自体はaタグだけで簡単なもので済みます。

ですが今回は少し一捻りとして、定型のテンプレート文が入った状態でのメーラー起動という仕様で実装しましたので、解説していきたいと思います。

続きを読む

Slick.jsやSwiper.js等が全く動かず小一時間無駄にした話

WordpressやLaravelなどでJavaScariptやjQueryが動かない時の対処

Slick.jsや、当ブログでも解説記事を書いたSwiper.jsなどの便利なスライダープラグイン

ウェブのフロントエンド制作においては必須クラスに重宝すると思います。

今日も、とある案件作業でlaravelアプリケーションのフロントエンドでサクッと使用しようと思って導入していたら

「あれ?動かない、、、」

 

コンソールを見てちょいちょい出てるエラーに対処しても動かず。

表題の通り、小一時間必死に調べて無駄に過ごしました。。

解説記事とか書いていた手前でお恥ずかしい。

 

原因はあっけないものでしたが、今後もし誰かが同じように小一時間を無駄に過ごす事の無いよう、備忘録として記しておこうと思います。

続きを読む

【Laravel6】ColorfulBoxサーバーへ自力デプロイ

カラフルボックスレンタルサーバーにLaravel6をFTPソフトとSSH接続でデプロイ

レンタルサーバーは安定した老舗も良いですが、このところはより高速な「LiteSpeed」採用やWordpress特化型など、新鋭のサーバーも人気になってきています。

例えばよく聞くクラウドレンタルサーバーだと

カラフルボックスはサーバー構成や料金プランはmixhostとかなり似ていますが、先のLiteSpeedによって高速なのはもちろん、機能も豊富でコスパも良い快適なレンタルサーバーです。

 

ただ新しいものは先人による知見、情報量が老舗と比べて劣るのも事実で、今回調べていたLaravelのデプロイについて検索しても以下の情報がヒットするくらいでした。 

tofucodes.hatenablog.jp

上記の内容ではDeployerを使用してますが、Deployerは使用せず自力でデプロイしたので、そちらを備忘録的に記録したいと思います。

あくまで備忘録で、内容省略してますので参考にされる方はご容赦ください。

続きを読む

【HTML/CSS】爆速コーディング、簡単なEmmetのススメ

使わないと損なめっちゃ捗るコーディング記法「Emmet」

コーディングに用いられるエディタの定番といえばVScode/Brackets/Dreamweaver/ATOMなどでしょうか。

今回はどのエディタでも使えるコーディングが爆速に捗る省略記法、

Emmet」

を紹介したいと思います。

映画のTENNETに似た感じでエメットと読みます。

 

TENNETより断然わかり易く、時間を逆行は出来ませんが、コーディングにかかる時間を劇的に短縮できる記述法です。

まだ使ってない方は是非ご参考ください。

続きを読む