画像にマスク適用後余白が出る、画像が見切れる→SVG内でアートボードサイズが余分または不足していることが原因とわかった。フィットさせる。
最新のブレイクポイント
- max-width: 1024px - タブレット(PC基準)
- max-width: 599px- SP(PC基準)
レスポンシブ対応に向けたfont-sizeの工夫…font-sizeをremで指定しline-height、margin/paddingの比率をemで指定しておけば、レスポンス対応時はルートのfont-size指定のみで完了できる。(後述)

参考

【2021年】レスポンシブデザインのブレイクポイントまとめ！ | PENGIN BLOG

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

【マスク適用後の謎余白に勝利】
余分な余白が出来たり、逆に画像が見切れてしまったりといった現象によく出くわし、CSS側のサイズ指定が悪いのか？？と四苦八苦する場面がよくありました。
前述のようにSVG内でアートボードサイズが余分または不足していることが原因とわかり、アートボードをフィットさせて解決。
最近になってようやくillustlatorを使ってSVGを直接編集するようになり、気付けました。一つ賢くなった！

【最新のブレイクポイント】
768pxの1箇所で制作していましたがデベロッパーツールで見るとやはり不十分だったので改めて調査。
この辺りは定期的に見直しが必要と学びました。

【レスポンシブ対応に向けたfont-size指定の工夫】
今回、rem/emの旨味を上手に活かせない場面が多々ありました。
カンプ制作時にPC版とSP版で文字と余白の比率を一定に揃えなかったため、1.0em=12pxから0.67em=18pxのように切りの悪い数字を何カ所も使うことになってしまいました。
前述したようにこれを揃えておけば、html要素のfont-sizeをレスポンシブ対応するのみで作業が完了するはずです。
デザインとしてはこれを意識して制作できるようにしたいですし、コーディングの観点からは制作者間で共有して適宜調整した方が良いと感じました。

今後・おわりに

Webデザイン制作課題を元に、コーディングまで制作を行ってみました。
全体のコーディング時間が約3人日というのは
自分の中で大きな成長と感じました！

学びの多い課題を提供してくださった
PENGIN BLOG (Twitter: @pengin_company) さまに感謝申し上げます。
今回の制作での経験を元に、今後も進めて参ります。

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

2021-12-03

【Webコーディング】オリジナルWebデザイン : 親しみのわく下町の美容室HP - 1 PC版コーディング内容のまとめ

Webコーディング HTML CSS JavaScript

背景

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

fuchsia-84.hatenablog.com

課題元: 【美容室編】Webデザイン実践課題配布！（ポートフォリオ掲載OK） | PENGIN BLOG

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

成果物

※12/3撮影後、Menu・Reserveセクションの下線スタイルを破線に修正

あまりTwitterくる時間なくて久しぶりのツイート。11月最終週こちらのコーディングを進めていました🌟
引き続き〜！ #クリスタチャレンジ https://t.co/EdI3qnZHDw pic.twitter.com/mzgqV6Vb8v
— ふーしゃ@web (@fuchsia_84) 2021年12月3日

Webページを見る ※Chrome対応、PCのみ対応

GitHub - fuchsia-84/Salon_de_beaute

制作期間と工数

制作期間

2021/11/24 から 2021/11/26
(+ 12/3 軽微修正アリ)

スケジュールと工数

11/24
- ヘッダー、トップ、Conceptセクション
- Staffセクション(SVGマスク適用)
- PC版/SP版の改行切替
- (SVGファイルの再編集 1.0h ※)

5.0h

11/25
- Access・Reserve・Menuセクション、フッター
- Styleセクション(Flickityギャラリーのカスタム)

7.0h

11/26
- Google Map挿入
- スクロール時ヘッダーのスタイル切替
- トグルボタンクリックでグローバルメニュー表示/非表示の切替
- ページ内リンクのスムーズスクロール

3.0h

合計15.0h / 約1.88人日
(※ : 実装工数に含まず)

未実施事項

レスポンシブ
Chrome/Safari以外のブラウザ対応

学習事項

今回の実装では全くわからず新しく調べた、という項目は特にありませんでした。
主に既知のプロパティやライブラリの仕様や使い方について調べて進めました。

復習メモ

display:block/noneの切替にはtransition効かない→visibility:hidden/visibleを使う
参考
点線/破線を描く : liner-(radial)-gradient
- dottedでもdashedでもない！CSSで好きな間隔の点線（破線）を作る方法 | amelog
トグルボタン開閉のアニメーション
- 3本線が回転して×に | 動くWebデザインアイディア帳

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

知識面について前回すすめた(水族館コーディング)で取り組んだ内容の復習の範囲に収まっていたように思います。

ただ、CSSを記述する時にHTMLから書き直すことになった場面が何度かありました。
(例: セクションタイトル内にあるサブタイトル装飾部分と線分を両方ともspan要素とした→spanにスタイル指定時に重複、線分はdiv要素に変更)

HTML側でいかにタグをうまく振るかがとても重要だと再確認できました。

今後・おわりに

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

2021-09-15

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

Webコーディング HTML CSS JavaScript

背景

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

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

成果物

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

Google Map Platformとは

Google Map Platformは、モバイルアプリやウェブページにGoogleマップを埋め込んだり、Googleマップからデータを取得したりするために使用するAPIとSDKのセットです。
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、
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を有効にします。

上限の設定

無料枠として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｣をクリック。

｢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(); // マップを初期化して表示

注意点

外部スクリプトの読込URLは｢https｣から始まるようにする(Mixed Contentエラーを避ける)
アイコン画像のパス指定に注意
GitHubでパブリックリポジトリにAPIキーを上げない
- 万が一上げてしまった場合、キーの再発行とコミット削除
- 参考: APIのKeyをGithubに上げたくなかったのでしたこと(PHP)
その他のエラー
- GitHubに謎のHTTPレスポンスヘッダが含まれている - Qiita
- Google MAP Javascript API 実装時に発生したエラーの対応方法 | なんとなくWEBで食べていく

おわりに

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

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

参考

2021-09-09

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

Webコーディング HTML CSS GitHub

背景

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

fuchsia-84.hatenablog.com

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

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

ディレクトリ構成

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

多言語サイトの実装法

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

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

構成と手順

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

言語別にサブディレクトリを作成、配下に言語別ファイルを置く → URLはリポジトリ/言語コード名/で対応
切替メニューから選択した言語のページに飛ぶ
テキスト内容の翻訳
- 英語 : 自分で翻訳(英検2級レベル)
- 韓国語 ; Google翻訳+αで調整(大学第二言語なのでハングル読めます)
- 中国語 : Google翻訳そのまま
言語別にフォントを設定

やらないこと

今回多言語化した自作サイトは仮想で作成している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"が付くようになるものをよく見てきていましたが、実装方法によって見た目だけでなくブラウザのクロール方法や管理手法へのアプローチまで変わってくるということを知ることができました。

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

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

2021-09-06

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

Webコーディング HTML CSS Webデザインポートフォリオ

背景

OGPとは

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

以前 #架空サイトPJ で制作した水族館の仮想HPデザインのコーディングです。 PC版を記事にまとめました！
【Webコーディング】オリジナルWebデザイン : 水族館の仮想HP - 1 PC版コーディング内容のまとめ - ふーしゃのWeb制作ブログhttps://t.co/Kkr2rd6rkS
— ふーしゃ@web (@fuchsia_84) 2021年8月26日

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

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

成果物

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

ポートフォリオサイトにOGPを追加しました🌟https://t.co/5GWlfb7PR8
— ふーしゃ@web (@fuchsia_84) 2021年8月31日

手順

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

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

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

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

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

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

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設定を確認できます。

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

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設定を確認できます。

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

全体の確認

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

参考

おわりに

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

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

2021-08-30

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

Webコーディング HTML CSS JavaScript Webデザイン

背景

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

fuchsia-84.hatenablog.com

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

成果物

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

github.com

制作まとめ記事

こちらからどうぞ↓

fuchsia-84.hatenablog.com