ふーしゃのWeb制作ブログ

元SEアラサー女がWeb制作についての学習をシェアするブログです。

【Webコーディング】Google Map PlatformでGoogle Mapをカスタムしてみた【HTML/CSS】【JavaScript】

背景

Google Mapが埋め込まれたWebサイトはたくさんありますが、
Google Map Platformでカスタマイズができるということで試してみました。

ググって出てきた記事内容とは画面レイアウトが変わっていたり必要な情報が異なっていたりしたため、備忘録がてら記事にまとめます。
※2021年9月現在の情報となります。

成果物

サイトの雰囲気に合った配色に変更、
オリジナルのアイコンを使用できました!

変更前変更後
Googleマップの表示結果(左: 変更前、右: 変更後)

Google Map Platformとは

Google Map Platformは、モバイルアプリやウェブページにGoogleマップを埋め込んだり、Googleマップからデータを取得したりするために使用するAPISDKのセットです。
Google Cloudのうち、Google Map関連のものを言うようです。
位置情報 API  |  Google Maps Platform  |  Google Cloud

利用料金について、毎月無料枠として$200分の利用枠が与えられます。
無料のマップロード回数は28,000回ということです。

公式より :
料金表  |  Google Maps Platform  |  Google Cloud

手順

今回行ったカスタマイズは、スタイルの変更オリジナルアイコンの使用です。
以下の手順で行いました。

  • 利用開始と支払い情報の登録
  • プロジェクトの作成
  • APIとサービスの有効化
  • APIキーの発行
  • 【認証の制限】重要
  • 上限の設定
  • イコン画像を作成
  • 表示したい地点の緯度・経度を取得
  • カスタムスタイルを作成
  • コードとスクリプトを記述

利用開始と支払い情報の登録

Google Maps Platformの「始める」から利用を開始します。
Googleアカウント所持・ログイン前提

従量課金制となるので、事前に請求先を登録するよう案内されます。

利用規約にチェックして「続行」すると、携帯電話での認証画面に移ります。
電話番号を入力、「コードを送信」して携帯端末のコードで認証します。 請求先情報を入力し、「無料トライアルを開始」で完了です。

会社名・組織名、開発規模等も聞かれますが、今回は個人利用として設定をすすめました。

設定の最後からデモを作成すると各種APIが追加されたプロジェクトが作成され、APIキーも既に発行された状態となります。
その場合は余分なAPIの削除とキー制限を行います。

以下ではデモを作成せず1から自分で作成する場合を記述します。

プロジェクトの作成

ダッシュボード上部のメニューから「新しいプロジェクト」でプロジェクトを作成できます。

新しいプロジェクトの作成

名前を指定して、「作成」をクリック。

プロジェクトを作成

APIとサービスの有効化

プロジェクトが作成できたら、
ダッシュボードから「APIとサービスの有効化」をクリック。
APIとサービスの有効化

APIライブラリが開くので、今回使用するAPI
Maps JavaScript APIを有効にします。

APIライブラリ

APIライブラリの「管理」から有効なAPIを一覧で確認できます。
有効APIの確認

APIキーの発行

APIを有効にできたら、APIキーを発行します。
認証情報」から、「認証情報を作成」で「API キー」を選択すると作成されます。

APIキーの作成

認証の制限

APIキーはGitHub等に入れて公開しないようにします。公式より
ですが、万が一公開されたり外に漏れたとしても、悪用されてもエラーとするバリデーションを設けることができるので、不正利用対策ができます。
Google Map Platformは無償枠を超えると使用分だけ有料となるので、この設定は実質必須です。

APIキー作成画面そのままからは、「キーを制限」。
キーを制限

または、「認証情報」から使用するキーを選択し、編集ボタンをクリックします。
編集ボタンから

任意の名前を設定し、制限を設定していきます。

項目は以下の通りです。

  • アプリケーションの制限
  • ウェブサイトの制限
  • APIの制限

【アプリケーションの制限】
今回はWebページに埋め込むので、「アプリケーションの制限」で「HTTPリファラー(ウェブサイト)」を選択

アプリケーションの制限
アプリケーションの制限

【ウェブサイトの制限】
サイトのURLを指定すると指定したサイト以外からの利用をはじくようになります。
最後にアスタリスクを付けておくとこのサイト上であればすべて許可、と設定できるので便利です。

ウェブサイトの制限
ウェブサイトの制限

APIの制限】
キーを制限」を選び、プルダウンから有効としたいAPIを選択します。これで指定以外のAPIの利用をはじくようにします。
Maps JavaScript APIを有効にします。

APIの制限
APIの制限

上限の設定

無料枠として28,000回のマップロード回数がありますが、ロード回数の上限を設定しておくとさらに安心です。

割り当て」から「Maps JacaScript API」を選択し、「Map loads」を開きます。
Map loadsの設定

Map Loads /日の上限が無制限となっているので変更します。
無制限のチェックを外すと割り当て上限の入力画面が出るので数字で入力します。

今回は、月30日の無料枠 28,000(回) ÷ 30(日) = 約933(回/日) という単純計算から、切りの良い数字で 900 としました。 Map loadsの数値入力

イコン画像を作成

今回はこちらの画像を使用します。

アイコンに使用した画像
アイコンに使用した画像

表示したい地点の緯度・経度を取得

表示したい地点をGoogle Mapで開き、
アイコンを置きたい地点を右クリックして緯度・経度情報を表示させます。

緯度・経度情報を表示

この数値を後述するスクリプトに記述します。

カスタムスタイルを作成

自作スタイルをJSONで作成します。
Styling Wizardからスタイル調整し、JSONを出力することができます。
※アクセスすると新旧どちらを使用するか聞かれますが、旧型を選ぶことでStyling Wizardに飛びます。

Webサイトの配色に合うように適当に調節したら、「FINISH」をクリック。

編集後のStyle Wizard画面
編集後のStyle Wizard画面

COPY JSON」でスタイルのJSONを取得します。

JSONの取得画面

これを後述するスクリプトで読み込み、スタイルを適用します。

参考 :
Googlemapの外観を簡単にカスタマイズできるツール

コードとスクリプトを記述

マップを表示させたいWebページ上の該当部分のコードを以下のように記述し、スクリプトを追加します。

【HTML】

<!-- Google Map表示部分 -->
<div id="js-map-taeget" class="map"></div>
...中略...
<!-- スクリプト読込 -->
<script src="https://maps.google.com/maps/api/js?key=あなたのAPIキー&language=言語コード">
</script>

JavaScript

function initialize() {

  const google = window.google;

  //緯度経度の変数
  const lat_lng = {
    lat: x, //xに緯度を入れる
    lng: y //yに経度を入れる
  };

  //緯度経度を設定
  let map = new google.maps.Map(document.getElementById('js-map-target'), {
    center: lat_lng,
    zoom: 18 // 推奨: 11から18で調整
  });
  
  //スタイルの設定
  let style = new google.maps.StyledMapType([
    /*
    JSONを入れる
    */
  ],{name: 'Styled Map'});
  
  //マーカー用の画像
  const marker_image = '画像のURL';

  //マーカー
  let marker = new google.maps.Marker({
    position: lat_lng,
    map: map,
    icon: marker_image
  });
  
  //オプションを適用
  map.mapTypes.set('js-map-target', style, marker);
  
  //マップをセット
  map.setMapTypeId('js-map-target');
  
}

initialize(); // マップを初期化して表示

注意点

おわりに

今回はGoogle Map Platformを使用し、色とアイコンをカスタマイズしてみました。 今後のWebサイト制作でも活用したいと思います!

ありがとうございました。

参考

【Web制作】自作Webサイトを多言語対応してみた【Webコーディング】

背景

先日コーディングした水族館の仮想HPで、多言語切替が未実装だったので今回取り組んでみます。

fuchsia-84.hatenablog.com

現状まとめ(言語切替機能実装前)

  • 日本語版のみ作成(スタイル・スクリプト適用済)
  • ヘッダーに言語切替メニュー
  • Github Pagesで公開

ディレクトリ構成

日本語のみ対応時のディレクトリ構成
日本語のみ対応時のディレクトリ構成

  • index.html : Webサイトのトップページ(日本語のみ対応)
  • css : CSSファイル保存先
  • img : 画像ファイル保存先
  • js : スクリプト保存先

多言語サイトの実装法

今回はサブディレクトリで言語を分ける方法を選択。
理由としては、元にあるものをなるべくいじらず使い回したいことと、同一ファイル内に言語を混ぜると見にくいと感じたからです。

参考 : 多言語WEBサイト(ホームページ)の海外向けSEOに最適なURLとは?

構成と手順

上記を受けて、以下のように作成。

  • 言語別にサブディレクトリを作成、配下に言語別ファイルを置く → URLはリポジトリ/言語コード名/で対応
  • 切替メニューから選択した言語のページに飛ぶ
  • テキスト内容の翻訳
  • 言語別にフォントを設定

やらないこと

今回多言語化した自作サイトは仮想で作成しているWebサイトであるので、ブラウザに地域・国別にページの設定を行うメタデータの設定を行いません
あくまで、表示されている言語の切替のみを実装します。

実在のサイトとして多言語対応を行う場合は、こちらの対応が必要になります。

参考 : 多言語サイトはrel=”altrenate” hreflang=”x”で管理しよう

ディレクトリ構成

以下のように作成。
画像ファイルとスクリプトは全言語で共通とし、
言語別にサブディレクトを作ります。
その下に、それぞれの言語対応のHTMLとCSSを作成しました。

多言語対応時のディレクトリ構成
多言語対応時のディレクトリ構成

切替メニュー

a要素のリンク先を言語別のサブディレクトに指定。

日本語版ページ、英語に切り替えるリンクの記述 :

<ul class="lang_menu" id="lang_menu">
  <li><a href="en/" rel="alternate" hreflang="en"><p><span>EN</span><span class="lang_jp">(英語)</span></p></a></li>
... 中略 ...                        
</ul>

繁体中国語フォント

Googleの提供するフォントcwTexYenが元サイトの雰囲気と合っていたので使用。
CSSで以下を記述で使用できる。

/*冒頭で*/
@import url(http://fonts.googleapis.com/earlyaccess/cwtexyen.css);

/*フォント適用部分にfont-familyを追加*/
.cwTeXYen {
    font-family: 'cwTeXYen', sans-serif;
}

参考 :

韓国語フォント

Google Fontsから韓国語指定で検索、雰囲気と合うNanum Gothicを使用。
Google Fontsの使い方に準拠してCSSを記述。

参考 : 【2021年版】 Google Fontsの使い方とおすすめ日本語フォント | webclips

成果物

多言語に対応できました!

f:id:fuchsia-84:20210908173238p:plain
ページ一部(右上: 英語 右下: 繁体中国語 左下: 韓国語 左上: 日本語)

実際のページ

github.com

工夫点

  • 言語別ディレクトリをつくる方法によりGoogleのクロール方法を意識
  • 画像やスクリプトをそのままに、テキストの翻訳とレイアウトの調整のみで低コスト
  • 元のレイアウトにおさまる範囲で適宜意訳 (例: 「モデルコース」は和製英語→”Recommended Route”、 「シルバー」→英語では”Golden-ager”など国々で呼称がある)

開発期間

9月7日(火)

  • 英語版 3.0h
  • 繁体中国語版(残1セクション) 1.0h

合計 4.0h

9月8日(水)

  • 繁体中国語版残 1.0h
  • 韓国語版 1.5h
  • 繁体中国語、韓国語フォント適用 0.5h

合計 3.0h

全体の合計 7.0h / 0.88人日

おわりに

今回は水族館HPを題材として、Webサイトを多言語に対応させてみました。

はじめて実際に実装してみて、ふだんは多言語対応のサイトでは言語によってURLに"#en"が付くようになるものをよく見てきていましたが、実装方法によって見た目だけでなくブラウザのクロール方法や管理手法へのアプローチまで変わってくるということを知ることができました。

環境や、やりたいことにあった選択肢を持てるよう、他の方法もとれるように準備していきたいと思います!

ありがとうございました。

【Web制作】ポートフォリオサイトにOGPつけてみた

背景

OGPとは

SNS等でURL共有した際に出てくるこれ!
画像や説明文などと一緒に表示され、クリックすると該当ページに飛べます。

一般的によく見るものなので、みなさん普通あるものだと思っているのではないでしょうか。
ずっと、自分のポートフォリオサイトにも付けたいと思いつつ手を付けていなかったのですが、今回挑戦してみました。

いざ調べてみるとけっこうやることが多く情報もバラバラとしていたので、備忘録をかねてまとめてみます。

成果物

以下のようにOGPを設定できました!

手順

  • OGPに使用する画像を作成する
  • OGPの基本情報を記述する
  • SNSでのOGP情報を記述し、変更を確認する

それぞれやっていきます。

OGPに使用する画像を作成する

【画像の作成】
SNSで表示されるOGP画像の大きさは違うのですが、幅・高さ630の正方形に切り取られる前提で、幅1200px・高さ630pxの画像を用意するとよいとのこと。

今回はポートフォリオサイトの配色や星モチーフなどと合うような背景とロゴを使用して以下の画像を作ってみました。

作成したOGP用の画像
作成したOGP用の画像

【シミュレーターで確認】
こちらのサイトで作成した画像が意図通り表示されるか事前にチェックできます。

OGP画像シミュレータ | og:image Simulator

シミュレーション結果
シミュレーション結果

OGPの基本情報を記述する

HTMLのheadタグ内にメタ情報として書き込みます。

<meta name="og:url" content="ここにサイトURL">
<meta name="og:title" content="ここにタイトル">
<meta name="og:image" content="ここに使用画像の【絶対パス】">
<meta name="og:description" content="ここにサイト説明">
<meta name="og:type" content="website">

ここでの注意点は、画像指定パスを絶対パスにすること。
相対パスでは指定できません。

また、og:typeとして設定する値によって表示形式が変わります。例えばブログならばblog、記事ページならarticleなど適切な値を指定します。
今回はwebサイトのトップページで設定したいので、websiteとなります。
その他の値についてはこちらで確認できます。

ogp.me

SNSでのOGP情報を記述し、変更を通知する

Twitter

【HTMLの記述】

<meta name="twitter:card" content="カードの種類" />
<meta name="twitter:site" content="@ユーザー名" />

twitter:card
Twitter上での表示タイプを指定します。
カードの種類は4種類です。
今回はsummary_laege_imageを選択しました。

  • summary: タイトル、説明、サムネイル。最も一般的。
  • summary_large_image: 画像の大きさが↑より大きく、Facebookのカードに近い形。
  • app: アプリ配布用。アプリ名、紹介文、アイコン、評価、価格など。
  • player: ビデオやオーディオなどのメディア。

twitter:site
@からはじまるTwitterユーザーIDを入れます。

【変更を確認】
こちらのサイトで確認します。

Card validaror

サイトurlを入れるとOGP設定を確認できます。

Twitterシミュレーション結果
Twitterシミュレーション結果

これで無事設定されました。

Facebook

FacebookでOGPを設定するにはHTMLタグでのメタ情報記述の他、Facebookへの登録・Facebook for Developpersへの登録が前提となります。

また、Webサイトにプライバシーポリシーの記載ページを追加し、そのURLを設定する必要があります。
これらが必須項目となっています。

自分は元々Facebookに登録もしておらず、プライバシーポリシーなども設けていなかったので少し面食らいました。
結構盲点だったと思いますので、準備されてない方はまずはそちらからやっておくと安心です。
以下の雛形を参考に作成させてもらいました。

参考:
プライバシーポリシーの雛形(ひな型) | Webサイトの利用規約(無料テンプレート・商用利用可)

【HTMLの記述】

<meta property="fb:app_id" content="数字15桁のアプリケーションID">

Facebook for Developpers側で発行されるアプリIDを入れます。後述します。

Facebook for Developpersを操作】
Facebook for Developpersにログインしたら、右上の【アプリを作成】をクリック。
アプリを作成
アプリタイプは【なし】を選択して、【次へ】。
[アプリの設定タイプ]
【アプリ表示名】を設定します。サイト名や、GitHubリポジトリ名とリンクさせると管理しやすいそうです。記述したら、【アプリを作成】します。
[アプリの設定
名前]

大きく画面が開いて、左側の項目から【設定】の【ベーシック】を選択します。
アプリ設定画面

前述のアプリID左上の数字15桁になります。(画像赤部分)

【プライバシーポリシーのURL】絶対パスで記述します。指定しないとOGPは設定できません

終わったら【変更を保存】します。

トグルをクリックし、アプリを【開発中】から【ライブ】にします。

切替前 : 開発中切替後 : ライブ

これで完了です。

【変更を確認】
こちらのサイトで確認します。

シェアデバッガー - Facebook for Developers

サイトurlを入れるとOGP設定を確認できます。

Facebookシミュレーション結果
Facebookシミュレーション結果

これで無事設定されました。

全体の確認

こちらで全体の確認ができます。
OGP確認ツール | Analyze OGP and Twitter Cards

参考

おわりに

前から憧れるばかりで手を付けていなかったOGP設定をやってみました。
SNSで共有する際、URL記載のみよりずっと見栄えが整ったように思いました! ポートフォリオ掲載の自主制作等でも設定しておくとよいかもしれません。 今回は調べてみて情報の多かったTwitterFacebookのみ設定しましたが、他SNSのものも適宜追加してみたいと思います。

ありがとうございました。

【Webコーディング】オリジナルWebデザイン : 水族館の仮想HP

背景

2020年夏頃、ワイヤーフレームからオリジナルWebデザインをつくる課題に挑戦しました。

fuchsia-84.hatenablog.com

今回はこちらのコーディング作業のまとめになります。

成果物

実際のwebページへ
ChromeSafari対応、レスポンシブ対応(2021/8/30)
※言語切替機能の追加(2021/9/9)

github.com

制作まとめ記事

こちらからどうぞ↓

fuchsia-84.hatenablog.com

fuchsia-84.hatenablog.com

fuchsia-84.hatenablog.com

【Webコーディング】オリジナルWebデザイン : 水族館の仮想HP - 2 SP版コーディング内容のまとめ

背景

先日PC版コーディングを終えたページのSP版コーディングについてです!

fuchsia-84.hatenablog.com

成果物

実際のWebページをみる(GitHub Pages)

Chrome/Safari対応、レスポンシブ済 2021/8/30現在

github.com

制作期間と工数

制作期間

2021/08/26、2021/08/27

スケジュールと工数

  • 8/26
    • ヘッダー(グローバルメニュー除く) 1.5h
    • トップセクション 1.0h
    • トップ下コンテンツ 2.5h

5.0h

  • 8/27
    • グローバルメニュー 1.5h
    • おすすめ・モデルセクション 2.0h
    • ニュース・アクセス・施設案内 1.0h
    • 料金 1.5h
    • フッター 1.0h
    • ページトップに戻るボタン(PC時も変更) 1.0h
    • 全体の修正 1.0h

9.0h

合計14.0h / 約1.75人日

未実施事項

  • Chrome/Safari以外のブラウザ対応
  • 言語切替機能(メニューのみ設置)
  • バナー制作

レスポンシブ対応を終えて

UI/UXを想定した上でつくる

今回、ページトップに戻るボタンのデザイン・仕様をコーディング中に変更しました。フッター上部に固定されたただの四角ボタンになっており、ユーザーは実際にフッターまでスクロールしないとボタンを押せず、機能の魅力やうま味が半減されてしまっていました。
そこで、トップ以下までスクロールすると出現する上向き矢印のボタンに変更しました。これならば存分に役割を果たせるかと。

before : フッター上部の四角ボタンafter : スクロールで画面下部に出現
ページトップボタンの変更
こういうことがなぜ起きるかですが、実際のページの中でユーザーにどんな操作を求めてどんな振る舞いをするかを想像できていなかったためと思います。コードを書いているうちにようやくおかしいことに気付きました。本来ならワイヤーフレームを見てデザインを作っている時にそこから汲み取るものでしょう...。
勉強になりました。

em/remのうまみを知った

数値設定に慣れていなかったこと、何が嬉しいのかイマイチわかっていなかったことで使えていませんでした。資格試験以降、なんとか数値変換がすんなりできるようになってきたので挑戦です。
そしてはじめてのアハ体験できました...!

今までは、たとえばa要素をボタンとして全体がクリックで反応するようにするには上下左右にpaddingを設定するとき、font-sizeに加えて上下左右のpadding・line-heightに至るまですべてをpxで指定していました。
この書き方でそのままレスポンシブ対応していくとなると、それぞれタブレットの時も〜px、〜px。スマホの時は〜pxなどとすべての数値を個々に変えていました。

ところが、em/remをはじめから使っておくと、文字の大きさに対して余白がこれだけあるボタン、という形を作れてしまうので、レスポンス対応としてはfont-sizeを変えるだけで済むのですね。同じ比率で作られたパーツを拡大縮小して使用していけるわけです。めっちゃくちゃ便利だなぁ!??
もっと慣れていけば大幅に時短できそう。コードの可読性も上がりそうです。
カンプに対してpx単位で合わせるよりも、サイズ感やパーツ配置で合わせることを考えるという点があたらしい気付きでした。
(もちろん実務となるとデザイナー・コーダー間で擦り合わせる部分だと思いますが...!)

今後・おわりに

今回で水族館HPもレスポンシブ対応でき、その制作まとめ記事でした。
今回未実施となっている言語切替機能について、実装してみた!という形で別記事にできたらいいなーとおもってます。

ありがとうございました!

【Webコーディング】オリジナルWebデザイン : 水族館の仮想HP - 1 PC版コーディング内容のまとめ

背景

2020年7月、Webデザインの制作課題に取り組みました。

fuchsia-84.hatenablog.com

今回は、こちらのPC版コーディングを終えたので記事にまとめていきます!

成果物

実際のWebページ(Github Pages) Chrome/Safari対応、PCのみ対応 (2021/8/26現在)

下にGoogle Map埋め込みを足して現在。

github.com

制作期間と工数

制作期間

2021/8/18 〜 8/22 + 8/25

スケジュールと工数

  • 8/18
    • ヘッダー、メニュー等 4.0h
    • Topセクション 2.0h
    • Recommend~Chargeまでタグ追加 0.5h
    • (ロゴsvg修正 2.0h ※)

合計 6.0h

  • 8/19
    • セクションタイトル 0.5h
    • 波形セクション 2.5h
    • Recommend、News、Model、Info 1.0h
    • 言語切替メニューに言語コードを使用する 0.5h

合計 4.5h

  • 8/20
    • News、Access、Charge 2.5h
    • フッター 1.0h
    • グローバルメニュー 1.5h
    • (波形svg修正 2.0h ※)

合計 5.0h

  • 8/21
    • ページトップへ戻るボタン 0.5h
    • スムーススクロール 1.0h
    • 言語切替メニュー部分 0.5h
    • グローバルメニューの表示/非表示 1.0h
    • ヘッダースクロール 0.5h
    • スクロールでふわっと 2.0h

合計 5.5h

  • 8/22
    • リンクhover調整 0.5h
    • スクロールを促す矢印 1.0h

合計 1.5h

合計 0.5h

【全体工数
合計 23.0h / 約2.8人日 (: 実装工数に含まず)

未実施事項

  • レスポンシブ
  • Chrome/Safari以外のブラウザ対応
  • バナー制作
  • 言語を切り替える機能の実装(メニュー設置のみ)

学習事項

【言語切替メニューは言語コードを使用】
デザインカンプでは国旗アイコンを使用していましたが、これはUIとしてよくないとのこと。
例えばカナダは英語に加えてフランス語も公用語であるように、一つの国でいくつかの言語が話されている場合があるため
国と言語とを混同しないことに注意ということでした。
ということで、今回は言語コードを使用する形で対応しました。

before : 国旗を使用after : 言語コードを使用
言語切替メニューの変更

カンプを作ったときには意識できていなかったことなので、今後気をつけます。

参考 : UIデザイナーが多言語対応するときに気を付けること|セブンデックス

SVGの色変更 : ファイル内のpathタグにfill追加】
HTMLに直接SVGを記述してしまい、path部分にfillを書き入れる方法もありました。
今回ロゴは色は固定だったのでこの方法で。

SVGで背景をマスクする】
いつものなら、mask-imageを使えば、fill指定も解決。
でも、今回はSVGを上下反転(180°回転)して使用する前提。
このままCSS側から操作できる方法はないかな?

...と、探しているとこれだ!!という情報が...!!(本当に救われました、感謝です。。。)

参考 : SVGファイルで、背景を波型や斜めにする方法 | Website MW

SVGを疑似要素としてabsoluteで重ねるという手法です。
確かに、色を調整してSVGを上から重ねれば切り抜いたように見えますよね。
目からウロコとはまさにこのこと。

【点線/破線のカスタム】
これまでのborderのdottedでなく、今回は線の調整を取り入れたのでコーディングに挑戦。
liner/radial-gradientをつかってできました。
参考 :
- dottedでもdashedでもない!CSSで好きな間隔の点線(破線)を作る方法 | amelog - 【CSS】radial-gradient を使って、CSS で水玉の背景を描いてみよー | HHH@venture | @venture = Adventure!

【スクロールダウンを促す動く矢印】
トップ画面によく登場するこれ。はじめてCSSアニメーションで作りました。

スクロールを促す矢印
スクロールを促す矢印
ほとんどトグルボタンを×にする時のレイアウトを元にspan要素で描画した線をtransformで傾け、あとはkeyflrameでアニメーションでしょうか。上下にバウンドする動き0%、50%、100%での縦方向の位置を指定。 我流で書くより参考先がさきに見つかったので、こちらから特に似たものを見ながら作りました。

coco-factory.jp

復習メモ

  • Safariで幅指定なし横並びリストは改行される→white-space:nowrapで改行しない(CSS)
  • 親要素がoverflowされると子要素にposition: sticky効かない(CSS)
  • display:block/noneの切替にはtransition効かない→visibility:hidden/visibleを使う(HTML/CSS)
  • CSSからfillで色変更したいときbackground読込・指定だけでは効かない→mask-image背景をSVGでマスクしてfill適用(SVG/CSS)
  • Google Map埋め込み→Google Map"共有"からiflameのHTMLを生成、クラス追加でスタイル適用(HTML/CSS)

参考 : 【解決】svgの色が変わらない!CSSorSCSSで変更したいのに! | 武骨日記

PC版コーディングを終えて

ググる時間が減ってひたすらコードを書いた!】
今回、基本的にググらず数カ所わからない点のみ調べる形で実装できました。
以前は全体的にすべての箇所でググることが必要だったことを思うと大きな変化です。
この変化の大きな要因は、7月に受けたHTML5認定試験でしょう。
疑似要素、疑似クラス、プロパティ、基本的によく使うものがある程度頭に入ってくれたので、調べる時間が減ったのですね。 感動しました。

【要素をうまくとってこれるようになった】
技術面で言うと具体的には、疑似要素や疑似クラスをうまく扱えるようになったところが大きかったです。
特にCSSの記述で要素1つ1つの選択からのつまづきが多かったのですが、今回はafternth-childnth-type-offなどを使用して迷わずスタイル指定していけました。
結果、クラスをまとめて書くこともできるようになってきました。
以前は共通するレイアウトの把握ができてもスタイルの記述まで持って行けなかったのですが、この点については前進できた手応えがありました。
また、スクリプトでも同様に、セレクタ($)で要素をうまく引っ張れるようになった結果、あらゆるアニメーションの適用がスムーズになりました。
jQueryの書籍を参考にした(ポートフォリオ制作: 記事リンク)を経たのも大きかったように思います。

SVGと友だちになりたい】
技術面で未だ不十分だなと痛感したのがSVGの操作に関してです。
たとえばCSSプロパティにてurl読込みfill指定で色変更をしたかったのですが、fillが効かない事態に直面。
調べに調べ、HTMLやCSSに直接SVGを埋め込む形で対応しましたが、そもそもファイル作成段階の問題(ラスター画像が埋め込まれたまま、クリッピングマスクを使用したSVGは不適など)が多くて苦労しました。はじめに手を付けたロゴSVGからかなり手間取ったため、工数が伸び伸びに...。

とはいえ波形SVGで背景を作る頃には疑似要素を使ったSVGでマスクする方法(下記参照)と出力をそのままCSSスタイル指定できるbase64変換ツール(fillを書き入れてから変換!下記参考を参照)と出会い、世界が開けました!
まずはお友達から...!

今後・おわりに

今回はPC版コーディングについてまとめました。
引き続き、レスポンシブ対応言語切替機能を進めます!

オリジナルのギャラリーポートフォリオをつくってみた【Webデザイン】【Webコーディング】【JavaScript/jQury】

記事にするのが遅くなりましたが、今年リニューアルしたポートフォリオの制作についてまとめてみました!

背景

筆者のこれまでのポートフォリオはこんな履歴でした↓

HugoテーマをNetlifyデプロイ(2019/1)

Hugoテーマ使用のポートフォリオ
Hugoテーマ使用のポートフォリオ

できたこと :

  • はじめてHugoをさわった
  • はじめてNetlifyでデプロイした
  • はじめてgitでバージョン管理した

できなかったこと :

  • コーディングは数カ所、代入する値を変える・増やすのみ
  • デザインはほぼデフォルト
  • ギャラリー・作品説明なし

Salon.ioカスタム(2019/7)

Salon.ioを使用したポートフォリオ
Salon.ioを使用したポートフォリオ

fuchsia-84.hatenablog.com

できたこと :

  • ギャラリーと作品説明のセットが作れた
  • カスタム時にコードを少し書いた
  • 作品説明ページに軽いコーディング

できなかったこと :

  • デザインは少しカスタム
  • 本格的にコーディングしていない
  • 掲載情報が十分でない
  • 模写とオリジナル制作をハッキリ区別できない

そこで、JavaScript/jQuery学習のアウトプットも兼ねて、

ギャラリー+作品説明ページのあるポートフォリオ
1からデザインしてコーディング
する!

という目標ができました。

ポートフォリオの機能と構成

トップページ

  • レスポンシブ
  • トップに大きくギャラリーがある
  • 模写・オリジナル・Web課題・ロゴ制作が分別できる
  • プロフィール・連絡先(メール※とSNS等)・ブログにアクセスできる
  • 画像クリックで作品詳細ページのウィンドウを出す

※メール、については安全性を考慮してNetlifyでデプロイしたお問い合わせページをかませる。

作品詳細ページ

  • レスポンシブ
  • モーダルウィンドウで表示
  • デザイン全体を画像表示
  • 更新日時(制作日)
  • 制作テーマ
  • 工夫点
  • その他、掲載したい情報
    • 実際のWebページへのリンク
    • ブログ記事へのリンク
    • XD共有へのリンク など

↑オリジナル制作・模写・ロゴ制作など、制作物の種類に応じて作品詳細ページの掲載内容が変化させる

プロフィールページ

  • レスポンシブ
  • モーダルウィンドウで表示
  • プロフィール情報
    • 顔写真
    • 名前
    • 学歴
    • 資格取得歴
    • 論文(卒論・修論・学会)

成果物

f:id:fuchsia-84:20210817191652p:plain

新ポートフォリオサイト

デザイン

PC版デザインカンプ(XDリンク)
※SP版はコーディング時に調整

工夫点 :

  • ユニバーサル配色で色覚に配慮
  • ギャラリーや説明を邪魔しないシンプルさ
  • フラットデザイン(英数字の軽めフォント+ボタンUIなど)
  • レスポンシブ対応(スマホ時のスタイル。掲載情報の維持)

コーディング

github.com

工夫点 :

  • JSON読込後、カテゴリ判別で作品詳細ページの内容の変更に対応
  • モーダルウィンドウの実装(プラグイン使用せず)
  • ダウンロード時のプログレス表示

参考 :

こちらの書籍の第6章でのギャラリー制作、第7章のプログレス表示を参考に制作を進めました。

制作期間

2020年/6月〜9月 + 2021年/1月〜2月

↑空白期間は、色彩検定1級の勉強・受験期間

開発環境

動作確認

ブラウザ :

実機 :

今後・おわりに

このポートフォリオは以前から「もっとこうだったらいいのにな」「こういう風につくれないかな」とかなりの期間悩みつつ、でもまだ無理〜と離れていたものを、やっと「作れるかも!」と一山越えた手応えがあり、大きな一歩となる制作でした。
デザイン面では配色とフォント、コーディング面では主にJavaScriptとここ最近で学んだあらゆる分野を落とし込んで今の自分につくれる中で満足できるものがつくれたな、とうれしい気持ちです。
シンプルでも、オリジナルのものを形にできてよかった!

そんな中、制作を進めながらいろんなWebサイトを見ていると、シンプルかつ新鮮な動きとレイアウトを取り入れたものをよく見るようになりました。

例えば、さいきんTwitterのTLに流れてきてとても素敵だなと思ったサイトがこちらです...

こんな風に独自の見せ方ができるサイト、いつか作ってみたいな...!
(夢がうまれました)

そしてコーディング面では、動きを加える・データのやりとりを行うという点でJavaScriptをとにかく書きたくて今回のような実装方法となりましたが、自分が憧れ続けているポートフォリオサイトがあります。
制作記まとめられてます。

qiita.com

Vue+Firebase。
Vueに挑戦する度挫折していて、原因はJavaScript読めてないからだ!と思い現在に至るという感じなので、そろそろこの辺を解読したいところです。

一つ制作を終え、また新しくやりたいことも増えてモクモクと妄想を膨らませる日々ですが、また一歩一歩進んでいきます!