What's New Qiita

20200526のHTMLに関する記事は12件です。

  • 投稿日：2020-05-26T23:03:04+09:00

【簡単にできる】jQueryでのタブ切り替え

今回、jQueryによるタブの切り替えの方法について、備忘録的に記載していきます。

HTML

まずは、表示させるHTML部分のコードです。
タブ部分のul要素と表示するコンテンツ部分のul要素の2つを作成します。

qiita.html
<ul class="tabs">
    <li class="active">タブ１</li>
    <li>タブ２</li>
    <li>タブ３</li>
    <li>タブ４</li>
</ul>
<ul class="contents">
    <li class="active">サッカー</li>
    <li>バスケ</li>
    <li>野球</li>
    <li>バレー</li>
</ul>

CSS

次はCSSの記述です。
タブ部はactiveクラスが付与されているタブのみ色を変化させます。
またコンテンツ部は非表示にし、activeクラスが付与されている要素のみを表示する仕様です。

qiita.css
.tabs{overflow:hidden;}
.tabs li{background:#ccc; padding:5px 25px; float:left; margin-right:1px;}
.tabs li.active{background:#eee;}
.contents li{display:none;}
.contents .active {padding:20px; display:block;}
ul { list-style: none;}

jQuery

最後にjQueryの記述です。
クリックされたタブに対して、タブ部とコンテンツ部の両方にactiveを付与します。

qiita.js
$('.tab li').click(function() {
    var index = $('.tabs li').index(this);
    $('.contents li').removeClass('active');
    $('.contents li').eq(index).addClass('active');
    $('.tabs li').removeClass('active');
    $(this).addClass('active')
});

今回は、index()メソッドを用いて何番目のタブがクリックされたかを判別し、
その番号と同じ順番にあるコンテンツ部の要素にactiveを付与する処理にしました。

  • このエントリーをはてなブックマークに追加
  • Qiitaで続きを読む
  • 投稿日：2020-05-26T17:38:45+09:00

jQueryでHTMLを取得する方法

DOMを取得する様々な方法です。個人的にはJSよりjQueryの方が
簡単に取得できると思います。

IDセレクタ

html要素のID属性を付与しているセレクタを取得できます。
以下、例です。

$("#red")

上記の例ではidがredのものを取り出していることになります。

クラスセレクタ

html要素のクラス属性を付与しているセレクタを取得できます。
以下、例です。

$(".red")

上記の例ではクラスがredのものを取り出していることになります。

要素セレクタ

html要素のセレクタを取得できます。
以下、例です。

$("h1")

上記の例ではh1の要素の中身を取り出していることになります。

色々取り出しかたがあるけど、$マークをつけ忘れるのを気をつけた方がいいかもしれません。

  • このエントリーをはてなブックマークに追加
  • Qiitaで続きを読む
  • 投稿日：2020-05-26T17:33:24+09:00

【備忘録】ブラウザでカメラを使用する

ブラウザからデバイスのカメラを使用する場合。とりあえず記載しているのはカメラ1つの場合で、スマホやタブレットで前面／背面カメラがある場合は未調査。
撮影した画像はAPIに渡す想定で、base64エンコードするまで記載しています。

検証環境

  • Google Chrome バージョン: 81.0.4044.138

ソースコード

html
<video id="video">Video stream not available.</video>
<canvas id="canvas"></canvas>
<input type="button" onclick="onClickCaptureButton()" value="capture"></input>
javascript
const video  = document.getElementById('video');
const canvas = document.getElementById('canvas');

video.addEventListener('canplay', (event) => {
  canvas.setAttribute('width' , video.videoWidth);
  canvas.setAttribute('height', video.videoHeight);
}, false);

navigator.mediaDevices.getUserMedia({video:true, audio:false})
.then((stream) => {
  video.srcObject = stream;
  video.play();
})
.catch((err) => {
  console.log(err);
});

function onClickCaptureButton(event) {
  const ctx = canvas.getContext('2d');
  ctx.drawImage(video, 0, 0, video.videoWidth, video.videoHeight);

  const base64Image = canvas.toDataURL('image/jpeg', 0.95)
  // <!-- ここに画像の処理を書く。APIをコールするなり、imgタグを埋め込むなり。。。 -->
}

チラシの裏（読まなくてもいい余談）

顔認識のAPIを試したくて、過去に作ったカメラを使う処理を引っ張り出してきました。昨今はいろんなAPIが出てきて便利な世の中になりましたね。

  • このエントリーをはてなブックマークに追加
  • Qiitaで続きを読む
  • 投稿日：2020-05-26T12:15:34+09:00

jQueryのchangeイベントがIEでは無効になる

課題

radioボタンを使ったinputの動作制御がIEだけうまく行かないのを修正する

原因

IEはinput[type=radio]のchangeイベントがとれない (っぽい)

ソース

$(function(){
    // $('input[name="' + hoge + '"]') = radioボタン
    $('input[name="' + hoge + '"]').change(function(){
        concole.log('clicked'); // IE11で出力されない
    });
});

解決

IEはinput[type=radio]のchangeイベントがとれないとわかったので、clickで代用してやればよい。
今回はあえて、IEは'click'、そのほかは'change'と三項演算子で分岐させることにした。

var ua = window.navigator.userAgent.toLowerCase();
var isIE = ua.indexOf('msie') >= 0;
$(function(){
    // $('input[name="' + hoge + '"]') = radioボタン
    $('input[name="' + hoge + '"]').change(function(){
        concole.log('clicked'); // 出力されない
    });
});

こう書けばIEだけは'click'になり、他のブラウザは'change'がイベントが指定される。

........でも、分岐させなくてもいいかな～とも少し思ったり^^;

参考

https://stackoverflow.com/questions/208471/getting-jquery-to-recognise-change-in-ie

  • このエントリーをはてなブックマークに追加
  • Qiitaで続きを読む
  • 投稿日：2020-05-26T12:12:02+09:00

テンプレートで用意しておくと便利なhead情報とscriptの設定

Webページを作っていると初期設定として何度も使用するコードがでてきます
毎回つくっているとめんどうなのでテンプレートとして用意してコピペでコーディングを進められるようにすると楽です

コードを追加する場所

Emmetでも基盤はできますが、勉強していくと自分用にカスタマイズしておいたほうがスムーズです

<!DOCTYPE html>
<html lang="ja">
<head>
  <!-- head情報-->
</head>
<body>

  <!-- script -->
</body>
</html>

スマホ対応用のビュー設定

  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">

今や必須のスマホ対応
記述は毎回一緒なのでとくにいじることはないでしょう
Edge用の記述も一緒にいれておきましょう

ページディスクリプション(ページの説明)

  <meta name="description" content"ページの内容を表す文章">

検索エンジンのクロールから除外する

絶対に除いてもらえるものではないので注意です

  <meta name="robots" content="noindex,nofollow">

OGPタグ

ツイッターやファイスブックでリンクされたときの表示の設定

  <meta name="twitter:card" content="summary_large_image" /> 
  <meta name="twitter:site" content="ユーザー名" />
  <meta property="og:title" content="ページタイトル" />
  <meta property="og:type" content="website">
  <meta property="og:url" content="絶対パス" />
  <meta property="og:image" content="画像のURL" />
  <meta property="og:site_name" content="サイト名" />
  <meta property="og:description" content="記事抜粋" />

content内をページに合わせて入力

summaryかsummary_large_imageを選べます

個人的にはlargeが好みです

og:typeはトップページだとwebsiteかblog,下層ページはarticle

htmlにもprefixを追加します

<html lang="ja" prefix="og: http://ogp.me/ns#">

link系も追加

よく使うものを設定しておきましょう

  <link rel="stylesheet" href="">

私は

  • ファビコン
  • Bootstrap
  • fontawesome
  • google font

を初期設定で追加しています

body前に追加するscriptタグ設定

<script src="./js/config/jquery-3.3.1.min.js"></script>
<script src="./js/config/popper.min.js"></script>
<script src="./js/config/popper-utils.min.js"></script>
<script src="./bootstrap-4.1.3-dist/js/bootstrap.min.js"></script>
<script src="./js/index.js"></script>

jquery, Bootstrap, 基本的なJavascriptファイルを読み込んでいます

よく使うライブラリがあれば設定しておきましょう

jqueryやBootstrapはファイルを設定しています
あまりないと思いますがバージョンが変わって不具合でるとめんどくさいのでCDNは使用しません

好みですね

フォルダ構成

パスが変わってしまうのでフォルダ構成もきめておくと良いです

私は

  • bootstrap
  • script
    • config
  • css
  • public
    • ページ1.html
    • ページ2.html
  • index.html

としています
新しいスキルなどで構成は変わると思うので参考程度に

まとめ

記述はほとんどかわらないのに覚えるのはけっこう時間とられるし、めんどう

ぜひ自分のテンプレート作ってみましょう
記述の仕方も忘れがちなので、自分なりのコメントもいれておくと便利かも

  • このエントリーをはてなブックマークに追加
  • Qiitaで続きを読む
  • 投稿日：2020-05-26T09:51:11+09:00

flexboxとjustify-conrent(初心者向け)

flexbox▼

親要素にflexboxを付与することで、子要素を横並びにします。

floatプロパティと機能は同じですが、floatの副作用である親要素の縮小が無いため、
floatプロパティと比較すると非常に使い勝手は良いです。

justify-contentプロパティ▼

justify-content: 〇〇;といった形で、display: flex;に併記します。
すると横並び方向の詳細を決めることができます。

justify-content: center; ▶︎ 要素を中央寄せ
justify-content: start; ▶︎ 要素を左寄せ
justify-content: flex-end; ▶︎ 要素を右寄せ
justify-content: space-between; ▶︎ 要素の両端が左右に寄り、等間隔
justify-content: space-around; ▶︎ 要素が左右に寄り、等間隔。（両端の余白と要素間の余白が１：２）

まとめ▼

flexboxにはまだまだ種類があり、奥が深い為初学者の方は整理しづらいと思いいますが、
積極的に使用することを意識すれば基礎部分には慣れてきますのでどんどん活用しましょう。

次回以降の更新でも紹介していきます！

  • このエントリーをはてなブックマークに追加
  • Qiitaで続きを読む
  • 投稿日：2020-05-26T09:51:11+09:00

flexboxとjustify-content(初学者向け)

flexbox▼

親要素にflexboxを付与することで、子要素を横並びにします。

floatプロパティと機能は同じですが、floatの副作用である親要素の縮小が無いため、
floatプロパティと比較すると非常に使い勝手は良いです。

justify-contentプロパティ▼

justify-content: 〇〇;といった形で、display: flex;に併記します。
すると横並び方向の詳細を決めることができます。

justify-content: center; ▶︎ 要素を中央寄せ
justify-content: start; ▶︎ 要素を左寄せ
justify-content: flex-end; ▶︎ 要素を右寄せ
justify-content: space-between; ▶︎ 要素の両端が左右に寄り、等間隔
justify-content: space-around; ▶︎ 要素が左右に寄り、等間隔。（両端の余白と要素間の余白が１：２）

まとめ▼

flexboxにはまだまだ種類があり、奥が深い為初学者の方は整理しづらいと思いいますが、
積極的に使用することを意識すれば基礎部分には慣れてきますのでどんどん活用しましょう。

次回以降の更新でも紹介していきます！

  • このエントリーをはてなブックマークに追加
  • Qiitaで続きを読む
  • 投稿日：2020-05-26T05:05:18+09:00

初心者によるプログラミング学習ログ 326日目

100日チャレンジの326日目

twitterの100日チャレンジ#タグ、#100DaysOfCode実施中です。
すでに100日超えましたが、継続。
100日チャレンジは、ぱぺまぺの中ではプログラミングに限らず継続学習のために使っています。
326日目は、

  • このエントリーをはてなブックマークに追加
  • Qiitaで続きを読む
  • 投稿日：2020-05-26T05:01:19+09:00

よく見かけるよく使うボタンエフェクト

webサイト上でよく見かけるボタンを３つにまとめてみた。

私的よく見かけるボタンエフェクト3種

・通常のhoverボタン
　一番よく使われているであろうhoverを使ったボタン
・hoverスライドボタン
　hoverすると背景色がスライドしてきて色が変わるボタン
・activeを使った押せるボタン
　ポチッと押せるボタン

Code Pen

See the Pen buttons by taka (@gb-sweep) on CodePen.

まとめ

正直単なるhoverだけのボタンがダントツで一番使われているが、他の２つも見かけるので覚えておいて損は無いし、何よりものすごく簡単に実装できてなんか凝ってる感が出てよい

  • このエントリーをはてなブックマークに追加
  • Qiitaで続きを読む
  • 投稿日：2020-05-26T00:40:18+09:00

【VSCode】EmmetのHTMLテンプレートにいろいろ詰め込んでみた

はじめに

VScodeを使い始めて、[!]+[Tab]でhtmlのお決まりのタグがパっと出ておてがるってのは知ってたけど
初期設定のコードではいろいろ足りていないことが分かってきた。
毎回書くのは面倒だしいろいろあって忘れそう・・・。

[!]+[Tab]でパッと出てくるあれ
　　　（言語はSetting.jsonでenからjaに変更済）
↓

sample.html
<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body>

</body>
</html>

調べているとVScodeの『ユーザースニペット』を編集することでテンプレートを新に設定することが出来るらしく、
やってみたら無事にカスタマイズできたので
下記に設定方法と各々の説明をまとめました。
対象読者はVScodeに慣れてきてそろそろ設定整えたいな～と思っている方だと思います。

ユーザースニペットの編集手順

1.html.jsonを開く

vscodeを英語設定で使っている場合
[file]>[Prefernces]>[User Snippets]>検索タブに[html.json]を入力して[html.json]ファイルを開く
vscodeを日本語設定で使っている場合
ファイル＞基本設定＞ユーザースニペット検索タブに[html.json]を入力して[html.json]ファイルを開く

※Windowsのため、Macの方は別途検索してください。

2.html.jsonを編集する

初めて開いた状態だと、英語ですでにいろいろ書かれていると思います。
一番最初と最後の｛　｝以外消します。

html.json

{
    // Place your snippets for html here. Each snippet is defined under a snippet name and has a prefix, body and 
    // description. The prefix is what is used to trigger the snippet and the body will be expanded and inserted. Possible variables are:
    // $1, $2 for tab stops, $0 for the final cursor position, and ${1:label}, ${2:another} for placeholders. Placeholders with the 
    // same ids are connected.
    // Example:
    // "Print to console": {
    //  "prefix": "log",
    //  "body": [
    //      "console.log('$1');",
    //      "$2"
    //  ],
    //  "description": "Log output to console"
    // }
}

↓消します

html.json
{}

消したうえで必要なものを思い思いに書いていきます。
私は下記のように設定しました。

html.json
{
    "html:!": {
        "prefix": "!",
        "body": [
            "<!DOCTYPE html>\n<html lang=\"ja\">\n<head>\n<meta charset=\"UTF-8\">\n<meta http-equiv=\"X-UA-Compatible\" content=\"IE=edge\">\n<meta name=\"viewport\"content=\"width=device-width, initial-scale=1\">\n<meta name=\"description\" content=\"検索結果でサイト名の下に表示される「サイトの説明文」\">\n<link rel=\"apple-touch-icon\" sizes=\"180x180\" href=\"アップルタッチ用のファビコン(相対パスOK）.png\">\n<link rel=\"icon\" type=\"image/png\" sizes=\"32x32\" href=\"32サイズのファビコン画像(相対パスOK）.png\">\n<link rel=\"icon\" type=\"image/png\" sizes=\"16x16\" href=\"16サイズのファビコン画像(相対パスOK）.png\">\n<link rel=\"manifest\" href=\"PWA化のためのマニフェストファイル.webmanifest\">\n<meta name=\"msapplication-TileColor\" content=\"Windowsピン留めのテーマカラーを設定→#ffffff\">\n<meta name=\"theme-color\" content=\"theme-colorを設定→#ffffff\">\n<meta name=\"msapplication-TileImage\" content=\"Windowsピン留め時の画像(絶対パス）.png\" />\n<meta property=\"og:description\" content=\"SNSでシェアされたときに表示するサイトの説明文\">\n<meta property=\"og:title\" content=\"SNSでシェアされたときに表示するサイトのタイトル\">\n<meta property=\"og:image\" content=\"SNSでシェアされたときに表示する画像※かならず絶対パスを記載（相対パス不可）https://....../img/icons/logo.png\">\n<meta property=\"og:image:width\" content=\"画像の幅px\">\n<meta property=\"og:image:height\" content=\"画像の高さpx\">\n<meta property=\"og:type\" content=\"urlがトップページの場合→website、トップページ以外の場合→article\">\n<meta property=\"og:url\" content=\"https://........\">\n<title>${1:Document}</title>\n<link rel=\"stylesheet\"  href=\"${2:css/style.css}\">\n</head>\n<body>\n    $0\n</body>\n</html>"
        ]
    }
}

改行されてなく見づらいですが、とりあえず[ctrl]+[s]で保存します。
ためしにhtmlファイルで[!]+[tab]と打ちます。
[!]をvscodeで入力したときに候補に[!]が2つ出てきたと思います。
image.png
一つはhtml:!(user Snippet)、もう一つはhtml:!emmet abbreviationと書かれてます。
user Snippetが先ほどカスタマイズしたもので
emmet abbreviationが初期設定のものです。
なのでuser Snippetの方を選びます。

sample.html
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport"content="width=device-width, initial-scale=1">
<meta name="description" content="検索結果でサイト名の下に表示される「サイトの説明文」">
<link rel="apple-touch-icon" sizes="180x180" href="アップルタッチ用のファビコン.png">
<link rel="icon" type="image/png" sizes="32x32" href="32サイズのファビコン画像.png">
<link rel="icon" type="image/png" sizes="16x16" href="16サイズのファビコン画像.png">
<link rel="manifest" href="PWA化のためのマニフェストファイル.webmanifest">
<meta name="msapplication-TileColor" content="Windowsピン留めのテーマカラーを設定→#ffffff">
<meta name="msapplication-TileImage" content="Windowsピン留め時の画像(絶対パス）.png" />
<meta name="theme-color" content="theme-colorを設定→#ffffff">
<meta property="og:description" content="SNSでシェアされたときに表示するサイトの説明文">
<meta property="og:title" content="SNSでシェアされたときに表示するサイトのタイトル">
<meta property="og:image" content="SNSでシェアされたときに表示する画像※かならず絶対パスを記載（相対パス不可）https://....../img/icons/logo.png">
<meta property="og:image:width" content="画像の幅px">
<meta property="og:image:height" content="画像の高さpx">
<meta property="og:type" content="urlがトップページの場合→website、トップページ以外の場合→article">
<meta property="og:url" content="https://........">
<title>Document</title>
<link rel="stylesheet"  href="css/style.css">
</head>
<body>

</body>
</html>

表示されない場合は保存が出来ていないか、html.jsonファイルの2行目prefixが!以外になってるかもしれません。
prefixはテンプレートを呼び出す召喚魔法のようなものなので例えばhtml:5で保存してしまってたら
[html:5]で召喚しないといけません。

各タグの説明

サイトの説明文の設定

sample.html
<meta name="description" content="検索結果でサイト名の下に表示される「サイトの説明文」">

image.png
検索結果でサイト名の下に表示される「サイトの説明文」

　
　
　

ファビコン画像の設定

sample.html
<link rel="apple-touch-icon" sizes="180x180" href="アップルタッチ用のファビコン.png">
<link rel="icon" type="image/png" sizes="32x32" href="32サイズのファビコン画像.png">
<link rel="icon" type="image/png" sizes="16x16" href="16サイズのファビコン画像.png">

image.png
ブラウザタブの画像の設定です。
href属性に画像の相対パスを入れておきます。
pngの拡張子にしていますがfaviconファイルももちろん大丈夫です。
　
　
　

PWA用マニフェストファイルの設定

sample.html
<link rel="manifest" href="PWA化のためのマニフェストファイル.webmanifest">

PWA化するときに必要なmanifestファイルの相対パスを入力

PWAについて

　
　
　

Windowsのピン留めじの画像とテーマカラーの設定（Windowsのみ）

sample.html
<meta name="msapplication-TileColor" content="Windowsピン留めのテーマカラーを設定→#ffffff">
<meta name="msapplication-TileImage" content="Windowsピン留め時の画像(絶対パス）.png" />

Windowsのピン留め機能を使った時のテーマカラー
image.png
Windowsスタート画面でピン留めをする
image.png
テーマカラーを設定しているとアイコン周りに色が付く
Windowsピン留めのテーマカラーについて

　
　
　

ブラウザ上部のテーマカラー（Chromeのみ）

sample.html
<meta name="theme-color" content="theme-colorを設定→#ffffff">

ブラウザ表示したときのテーマカラー
Chromeのみ対応っぽいです。
image.png

テーマカラーについて

SNSでシェアされたときに有効なOGPの設定

sample.html
<meta property="og:description" content="SNSでシェアされたときに表示するサイトの説明文">
<meta property="og:title" content="SNSでシェアされたときに表示するサイトのタイトル">
<meta property="og:image" content="SNSでシェアされたときに表示する画像※かならず絶対パスを記載（相対パス不可）https://....../img/icons/logo.png">
<meta property="og:image:width" content="画像の幅px">
<meta property="og:image:height" content="画像の高さpx">
<meta property="og:type" content="urlがトップページの場合→website、トップページ以外の場合→article">
<meta property="og:url" content="https://........">

image.png
この画像はTwitterであるウェブサイトを共有した時の表示のされ方ですが、
上のタグではこの設定をしています。
画像がog:img（絶対パス指定）
画像下の太文字がog:title
タイトル下の説明がog:description
また、og:image:widthでは画像の幅をpxで設定していて、
og:image:heightでは画像の高さをpxで設定しています。
og:typeはトップページならwebsite、トップページ以外ならarticleを設定して、
og:url→WebサイトのURLを絶対パスで設定します。

　
　
　
　

CSSのリンクタグ毎回絶対あるものなので。

ディレクトリの場所は好き好きあると思うので変えた方がいいと思います。

sample.html
<link rel="stylesheet"  href="css/style.css">

　
　

　

どのようにユーザーを増やしていくかによって、とかPWA化は必要なのか？
これはWindowsユーザーがよく利用するのか？とかで不要必要が違うと思うので
毎回このタグを使うことはないかと思いますが
こういう方法があるんだと自身に思い出させるためにもテンプレートに設定しました。　

注意

  • User Snippetのhtml.jsonファイルは一つしか保存できないので 様々な種類のテンプレートを保存することはできません。

参考

編集方法
https://qiita.com/coro422/items/17cdd1acb9d0c3300e24
タグの種類
https://qiita.com/tsuka-rinorino/items/3b4fb69d980cecddf512

  • このエントリーをはてなブックマークに追加
  • Qiitaで続きを読む
  • 投稿日：2020-05-26T00:03:32+09:00

ホントにあなたにはWordpressが必要ですか？ - GitLab PagesでかんたんWebサイト公開 -

TL;DR

運営しているサービス、fRatのランディングページをGitLab Pagesを使用して公開していますので、その方法のご紹介です。
GitLab Pagesを使えば、自動更新付き無料SSLが使えるし、無料でWebサイトを公開できます。
ポートフォリオとしてのゴリゴリのHTML/JavaScriptを使って、自由度の高いWebページを配置することもできます。

gitlab

はじめに

組織や自己のブランディング、ポートフォリオ公開のために、Webサイトを公開している方は多いのではないでしょうか？
もしくは、この状況下でWebサイトを公開して、オンラインでの活動を開始しようとしている方もいらっしゃると思います。
そんなとき、自分でサーバを用意してWordpressなどを使ってサイト公開をするのも一つの手ですが、無料で、かつ自由度の高いWebサイトを公開する手段もあります。
本ドキュメントでは、無料でWebサイトを公開する方法をお伝えします。

GitLab とGitLab Pages

GitLabは、ファイルをバージョン管理してくれるWebサイトです。（もっといろいろなこともしてくれます。）
GitLabの機能の一つに、アップロードしたファイルをWebサイトとして公開してくれる、というものがあります。
本ドキュメントでは、この機能を使って、Webサイトを構築する方法をご説明します。

ページをアップロード、公開する。

GitLabでアカウントを作成、ログインしてください。
image.png
ヘッダーから「➕」マークを押して、New projectを選択します。
Project nameを入力して、Create Projectボタンを押します。
出来上がったページから、
image.png
「Set up CI/CD」を押します。
表示された入力欄で、
image.png
以下のように入力します。

image: alpine

pages:
  script:
  - ls
  artifacts:
    paths:
    - public

入力したら、「Commit changes」を押します。

続けて、公開ページを作っていきます。
左メニューのRepository→Filesを押して、
image.png
タイトルちょっと下の「+」から「New directory」を選択します。
表示されるダイアログの「Directory name」にpublicと入力して、「Create directory」を押します。
続けて「＋」から New Fileを選択しFile name にindex.htmlと入力します。
あとは入力欄にHTML、JavaScript、CSSで好きなように書いていきます。もちろんJavaScriptは単独でファイルを作成していただいても結構です。
私は、Tree.jsを使用したかんたんなサンプルを作ってみました。

<script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/110/three.min.js"></script>
<canvas></canvas>
<script>
    const width = document.body.offsetWidth;
    const height = document.body.offsetHeight;
    const renderer = new THREE.WebGLRenderer({
        canvas: document.querySelector('canvas')
    });
    renderer.setPixelRatio(window.devicePixelRatio);
    renderer.setSize(width, height);

    const scene = new THREE.Scene();

    const camera = new THREE.PerspectiveCamera(45, width / height);
    camera.position.set(0, 0, 5);

    const geometry = new THREE.BoxGeometry(1, 1, 1);
    const material = new THREE.MeshNormalMaterial();
    const box = new THREE.Mesh(geometry, material);
    scene.add(box);

    function tick() {
        box.rotation.y += 0.01;
        box.rotation.z += 0.013;
        renderer.render(scene, camera);
        requestAnimationFrame(tick);
    }
    tick();
</script>
<style>
    body,
    canvas {
        margin: 0;
        padding: 0;
        width: 100%;
        height: 100%;
    }
</style>

作れたら、「Commit changes」を押します。

続きまして、Webサイトとして作ったindex.htmlを公開します。
image.png
左のメニューの「Settings」→「General」から「Visibility, project features, permissions」→「Pages」で「Everyone」を指定して、「Save changes」ボタンを押してください。
image.png
これでサイトが公開されます。
サイトのURLは左メニュー「Settings」→「Pages」の「Your pages are served under:」から確認できます。
image.png
もし、独自ドメインで運用したい場合は、同じく「Settings」→「Pages」の「New Domain」から設定できます。独自ドメインにした場合でも、Let's EncryptによるSSL証明書の発行および自動更新機能がついているのでとても便利です。

自分でサイト運用するよりも楽で安全ですよ？

自分で用意したサーバでWordPressなどを運用している方は、サーバを正しい状態に設定したり、セキュリティーパッチを当てたりと、安全な状態を保つのは大変です。Webページを公開したいだけであれば、本ページのやり方で十分です。mkdocsやHexoなどを使って、CMSでページを作ることもできます。
また、この状況下で業務をオンライン化したい方。まずはWebページで活動を公開するのに、本ページのやり方でかんたんにトライしてみてはいかがでしょう？

fRatでは、この方法でランディングページを作成するとともに、mkdocsによるHTML生成を使って、マニュアルを公開しています。

GitLab PagesでかんたんWebサイト公開、ぜひ、お試しください。
お困りの点がありましたら、@bottegauniへどうぞ。

  • このエントリーをはてなブックマークに追加
  • Qiitaで続きを読む
  • 投稿日：2020-05-26T00:01:34+09:00

Google Chartで地図を表示してみた！

はじめに

Google Charts を利用すると様々なグラフを簡単に描画することができます。

例えば・・・・・・

  • Histogram(ヒストグラム)
  • Geo Chart(地図グラフ)
  • Line Chart(折れ線グラフ)
  • Candlestick Chart(箱ひげ図)

などがあります。

参照
公式ホームページ

今回はその中でも、GeoChartsと呼ばれる地図の描画方法について紹介します。

記述方法

全コードは以下の通りです。

geoCharts.html
<html>
  <head>
    <script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
    <script type="text/javascript">
      google.charts.load('current', {
        'packages':['geochart'],
        // Note: プロジェクトのmapsApiKeyを取得する必要があります。
        // See: https://developers.google.com/chart/interactive/docs/basic_load_libs#load-settings
        'mapsApiKey': 'AIzaSyD-9tSrke72PouQMnMX-a7eZSW0jkFMBWY'
      });
      google.charts.setOnLoadCallback(drawRegionsMap);

      function drawRegionsMap() {
        var data = google.visualization.arrayToDataTable([
          ['Country', 'Popularity'],
          ['Germany', 200],
          ['United States', 300],
          ['Brazil', 400],
          ['Canada', 500],
          ['France', 600],
          ['RU', 700]
        ]);
        //描画オプション：描画地域などを設定できる。
        var options = {};
        //地図を描画するための要素を指定する。
        var chart = new google.visualization.GeoChart(document.getElementById('regions_div'));
        //地図を描画する
        chart.draw(data, options);
      }
    </script>
  </head>
  <body>
    <div id="regions_div" style="width: 900px; height: 500px;"></div>
  </body>
</html>

描画結果

上記のコードを記述すると、以下のような結果の世界地図が表示されると思います。

See the Pen world map -googleChartsGeochart by higakin (@hgaiji) on CodePen.

解説

上記のソースコードを上から解説していきます。

1. htmlで地図の描画領域を設定する

google chartsで地図を描画するためhtmlの<body>タグ内に領域を設定します。要素を特定するためにidをつけておきます。今回はregions_divと言うid名をつけています。

class名を指定して、getElementByClassNameで要素を特定しようとすると、うまく描画されません。詳しく原因を知りたい場合は以下をチェックしてみてください。
getElementsByClassNameとgetElementByIdの返り値の違い

<html>
 <!-- ..... -->
 <body>
     <div id="regions_div" style="width: 900px; height: 500px;">
     //ここに地図が表示される
     </div>
 </body>
</html>

2.Google chartsの読み込み

google.charts.load関数でバージョンやパッケージを読み込みます。

  • 第一引数にはgoogle Chartsのバージョン
  • 第二引数にはパッケージ(packages)

を読み込みます。
今回は、google Chartsの最新バージョンを使用するので第一引数には'current',グラフはGeo Chartを使いたいので、第二引数にはgeochartを指定します。

  google.charts.load('current', {
    'packages': ['geochart'],
    // Note: プロジェクトのmapsApiKeyを取得する必要があります。
    // See: https://developers.google.com/chart/interactive/docs/basic_load_libs#load-settings
    'mapsApiKey': 'AIzaSyD-9tSrke72PouQMnMX-a7eZSW0jkFMBWY'
  });

3.読み込み後のコールバック関数を指定する

google.charts.setOnLoadCallbackでコールバック関数を指定することで、地図を描画します。
今回はdrawRegionMapと言う関数名を指定しています。

google.charts.setOnLoadCallback(drawRegionsMap);

この関数はsetOnLoadCallback関数が呼ばれる前に定義しておく必要があります。

4.描画関数を作成する

地図を描画するための描画関数を作成します。今回はdrawRegionsMapと言う名前で作成しています。
ここでは、国にマウスがホバーしたときのポップアップの設定や表示する国の設定や色の設定など様々なことを設定します。

function drawRegionsMap() {
   var data = google.visualization.arrayToDataTable([
     ['Country', 'Popularity'],
     ['Germany', 200],
     ['United States', 300],
     ['Brazil', 400],
     ['Canada', 500],
     ['France', 600],
     ['RU', 700]
   ]);

  var options = {};

  var chart = new google.visualization.GeoChart(document.getElementByClassName('regions_div'));

  chart.draw(data, options);
}
  • arrayToDataTable(twoDArray, opt_firstRowIsData)
    • 第一引数：twoDArray
    • 二次元配列で指定する。opt_firstRowIsDataがfalseであれば、最初の行がヘッダーとして表示される。
    • 第二引数：opt_firstRowIsData
    • デフォルトがfalse。trueにすると全ての行をデータをみなします。
  • google.visualization.class_name(dom_element)
    • visualization classを指定してインスタンスを返す必要がある
    • 今回はGeoChart
    • 第一引数：dom_element
      • 描画するためのDOMを指定します。
      • 1.で設定したDOMを指定する
  • draw(data[, options])
    • 第一引数:data
      • 地図を表示するためデータ(DataTable)
      • 今回で言うと、dataをさす
    • 第二引数:options
      • 地域名や表示モードの設定を行うことができます。
      • 例えば、日本だけを描画したいときなどに使います。

さいごに

今回は、Google ChartsのGeo Chartの基本的な描画方法について紹介しました。
次回は、応用的な描画について書いていこうと思います。

何か疑問点などありましたら、どしどしコメントお願いします?‍♂️

参考

  • このエントリーをはてなブックマークに追加
  • Qiitaで続きを読む

日付別

タグ一覧