Google Maps Platformで地図を出してみた

技術者ブログと題して社員が日ごろ取り組んでいる学習内容を紹介します。
今回はWEBデザインをテーマにしている第0ユニットです。
本記事ではGoogle Maps Platformを使ってみたので紹介していきます。

Google Maps Platformとは

Google Maps Platformを使用することで、Google Mapの機能をウェブサイトやアプリに埋め込むことができます。
Google Maps Platformの詳細は公式ページで紹介されています。
https://mapsplatform.google.com

事前準備

Google Maps Platformを使うためには事前に、Googleアカウントを作成し支払いの設定をしておく必要があります。
支払いの設定はGoogle Cloudから設定することができます。
https://cloud.google.com/

APIキー取得

Google Maps APIを使用するには、APIキーを取得を取得しておく必要があります。
APIキーの取得は「有効なAPIとサービス」から行います。

「Maps JavaScript API」を選択します。

「鍵と認証情報」APIキーからAPIキーを取得することができます。

MAPの表示

地図の表示

APIは「Dynamic Library Import」、「NPM js-api-loader パッケージ」の方法で利用することができます。
利用方法の詳細は公式のガイド参照してください
Maps JavaScript API を読み込む


下記は地図を出すサンプルソースです。

<!DOCTYPE html>
<!--
 @license
 Copyright 2019 Google LLC. All Rights Reserved.
 SPDX-License-Identifier: Apache-2.0
-->
<html>
  <head>
    <title>Add Map</title>

    <link rel="stylesheet" type="text/css" href="./style.css" />
    http://js/map.js
  </head>
  <body>
    <h3>My Google Maps Demo</h3>
    <!--The div element for the map -->
    <div id="map"></div>

    <!-- prettier-ignore -->
    <script>(g=>{var h,a,k,p="The Google Maps JavaScript API",c="google",l="importLibrary",q="__ib__",m=document,b=window;b=b[c]||(b[c]={});var d=b.maps||(b.maps={}),r=new Set,e=new URLSearchParams,u=()=>h||(h=new Promise(async(f,n)=>{await (a=m.createElement("script"));e.set("libraries",[...r]+"");for(k in g)e.set(k.replace(/[A-Z]/g,t=>"_"+t[0].toLowerCase()),g[k]);e.set("callback",c+".maps."+q);a.src=`https://maps.${c}apis.com/maps/api/js?`+e;d[q]=f;a.onerror=()=>h=n(Error(p+" could not load."));a.nonce=m.querySelector("script[nonce]")?.nonce||"";m.head.append(a)}));d[l]?console.warn(p+" only loads once. Ignoring:",g):d[l]=(f,...n)=>r.add(f)&&u().then(()=>d[l](f,...n))})
        ({key: "{APIキー}", v: "beta"});</script>
        
    <script>
      // Initialize and add the map
      let map;
      
      async function initMap() {
      
          // Request needed libraries.
          //@ts-ignore
          const { Map } = await google.maps.importLibrary("maps");
          const { AdvancedMarkerElement } = await google.maps.importLibrary("marker")
      
      
          // 地図の初期設定
          map = new Map(document.getElementById("map"), {
              zoom: 18,
              center: position1,
              mapId: "DEMO_MAP_ID",
          });
      
          // ピンの地点を設定
          const position1 = { lat: 35.165455654239224, lng: 136.90517107048055 };
          const position2 = { lat: 35.16480168326663, lng: 136.90544465580453 };

          // 地図にピンを設定する
          const marker = new AdvancedMarkerElement({
              map: map,
              position: position1,
              title: "ナディアパーク",
          });
      
          const marker2 = new AdvancedMarkerElement({
              map: map,
              position: position2,
              title: "矢場公園",
          });
      }

      initMap();
    </script>
  </body>
</html>

地図のAPIは下記の部分で読み込んでいます。
サンプルでは「Dynamic Library Import」でAPIを読み込んでいます。

script>(g=>{var h,a,k,p="The Google Maps JavaScript API",c="google",l="importLibrary",q="__ib__",m=document,b=window;b=b[c]||(b[c]={});var d=b.maps||(b.maps={}),r=new Set,e=new URLSearchParams,u=()=>h||(h=new Promise(async(f,n)=>{await (a=m.createElement("script"));e.set("libraries",[...r]+"");for(k in g)e.set(k.replace(/[A-Z]/g,t=>"_"+t[0].toLowerCase()),g[k]);e.set("callback",c+".maps."+q);a.src=`https://maps.${c}apis.com/maps/api/js?`+e;d[q]=f;a.onerror=()=>h=n(Error(p+" could not load."));a.nonce=m.querySelector("script[nonce]")?.nonce||"";m.head.append(a)}));d[l]?console.warn(p+" only loads once. Ignoring:",g):d[l]=(f,...n)=>r.add(f)&&u().then(()=>d[l](f,...n))}) ({key: "{APIキー}", v: "beta"});</script>

地図の表示は下記の部分で表示を行っています

      // GoogleMapの読み込み
         const { Map } = await google.maps.importLibrary("maps");
          const { AdvancedMarkerElement } = await google.maps.importLibrary("marker")
      
      
          // 地図の初期設定
          map = new Map(document.getElementById("map"), {
              zoom: 18,
              center: position1,
              mapId: "DEMO_MAP_ID",
          });

また、下記のようにピンを複数設定することで、地図に複数のピンを立てることもできます。

// ピンの地点を設定
          const position1 = { lat: 35.165455654239224, lng: 136.90517107048055 };
          const position2 = { lat: 35.16480168326663, lng: 136.90544465580453 };

          // 地図にピンを設定する
          const marker = new AdvancedMarkerElement({
              map: map,
              position: position1,
              title: "ナディアパーク",
          });
      
          const marker2 = new AdvancedMarkerElement({
              map: map,
              position: position2,
              title: "矢場公園",
          });

今回はGoogle Maps Platformを使って地図を表示したり、
地図にピンを立てる方法をまとめました。

次回の第0ユニットの技術者ブログもお楽しみに!

anime.jsを使ってみた

技術者ブログと題して社員が日ごろ取り組んでいる学習内容を紹介します。
今回はWEBデザインをテーマにしている第0ユニットです。
本記事ではanime.jsを使ってアニメーションを作成してみましたのでその方法をご紹介します。

anime.jsとは

anime.jsは、軽量なアニメーションライブラリです。
ちょっとしたアニメーションを簡単に導入することができますし、 工夫すれば凝ったアニメーションも作成できます。
また、公式サイトで公開されているドキュメントやサンプルも充実しています。

導入方法

公式のGitHubからダウンロードしてきた「anime.min.js」を読み込ませれば使用することができます。

公式サイト
https://animejs.com/

anime.min.jsは解凍したZIPファイルのlibフォルダの中に入っています。
入手したjsファイルをHTMLに読み込ませれば使用できます。

<head>
    http://js/anime.min.js
</head>

また、npmを使用していインストールすることもできます。

アニメーションを作ってみる

使用する準備ができたのでアニメーションを作ってみます。
今回は公式のサンプルでも公開されているサンプルを作ってみます。

上記はgif画像なので多少ちらつきがありますが、ちらつきなくアニメーションを作成することができます。
下記のコードで比較的簡単に実装することができます

html

<div class="box" id="elem"></div>

css

.box {
    background-color: blue;
    width: 80px;
    height: 80px;
}

JS

var cssSelector = anime({
    targets: '#elem',
    translateX: 250,
    rotate: '2turn',
    scale: 2,
    easing: 'easeInOutQuart',
    duration: 2000,
    direction: 'normal',
    loop: true
});

アニメーションは読み込まれたタイミングで自動的に実行されますが、
クリック実行時にアニメーションを実行することもできます。

html

    <button id="btn-like" class="btn btn-like">
        <svg xmlns="http://www.w3.org/2000/svg" width="30" height="30" fill="currentColor" class="bi bi-heart-fill like-icon pointer"
            viewBox="0 0 16 16">
            <path fill-rule="evenodd" d="M8 1.314C12.438-3.248 23.534 4.735 8 15-7.534 4.736 3.562-3.248 8 1.314" />
        </svg>
    </button>

css

.btn-pink {
    --bs-btn-color: pink;
    --bs-btn-border-color: deeppink;
    --bs-btn-hover-color: pink;
    --bs-btn-hover-bg: pink;
    --bs-btn-hover-border-color: deeppink;
    --bs-btn-focus-shadow-rgb: 108, 117, 125;
    --bs-btn-active-color: #fff;
    --bs-btn-active-bg: pink;
    --bs-btn-active-border-color: pink;
    --bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
    --bs-btn-disabled-color: pink;
    --bs-btn-disabled-bg: transparent;
    --bs-btn-disabled-border-color: pink;
    --bs-gradient: none;
}

.btn-like {
    --bs-btn-hover-color: pink;
    --bs-btn-active-color: #fff;
    color: deeppink;
}

JS

let likeBtnAni = anime({
    // targets: '.btn-like',
    targets: '.btn-like',
    rotate: '2turn',
    easing: 'easeInOutQuart',
    direction: 'normal',
    loop: false
});

//アニメーションの停止
likeBtnAni.pause();

//クリック時にアニメーションを実行
document.querySelector('.btn-like').addEventListener('click', likeBtnAni.play);

今回はanime.jsを使ってアニメーションを実装してみました。
次回の第0ユニットの技術者ブログもお楽しみに!

SpringBoot3 組み込みJettyで動かしてみた

こんにちは第0ユニットのチキンキウイです。
SpringBoot3がリリースされていたので、今回は組み込みサーバーを変更して
動かしてみようと思います。

環境

  • SpringBoot3.0.6
  • Java17
  • Gradle 7.6.1

設定内容

SpringBoot3を組み込みJettyで動作させるには「build.gradle」に以下に設定を追加すことで実現できます。

ext['jakarta-servlet.version'] = '5.0.0'

dependencies {
    implementation 'org.springframework.boot:spring-boot-starter-web'
    modules {
        module("org.springframework.boot:spring-boot-starter-tomcat") {
            replacedBy("org.springframework.boot:spring-boot-starter-jetty", "Use jetty instead of tomcat")
        }
    }
    implementation 'org.springframework.boot:spring-boot-starter-jetty'
    providedRuntime 'org.springframework.boot:spring-boot-starter-jetty'
}

動かしてみた

ここからは実際にプロジェクトを作成し実際に動かしていきます。

SpringBootプロジェクトの作成

[ファイル>新規作成>その他]からウィザードを開き
新規のspringスタータープロジェクトを作成します。

build.gradleの変更

プロジェクトを作成したら「build.gradle」を開きJettyの変更を追加します。

「build.gradle」変更後は「Gradleプロジェクトのリフレッシュ」を実行してください。

動かしてみた

プロジェクトのリフレッシュが完了したらプロジェクトを実行してみます。
実行してログに「Jetty started」が表示されていればJettyで起動しています。

画像に alt 属性が指定されていません。ファイル名: image-3-1024x401.png

まとめ

今回はSprinngBoot3でJettyサーバーを動かしてみました。
SpringBoot3の情報はまだまだ少ないので、参考の一つにでもなれば幸いです。

参考

GitHub Document how to downgrade dependencies to use embedded Jetty 11
https://github.com/spring-projects/spring-boot/issues/33044#issuecomment-1326332014

社員紹介(30)

閲覧いただきありがとうございます。
チキンキウイです

経歴

文系大学の理系学部出身
IT業界に就職し主にJavaでのシステム開発をメインにお仕事をしています。
最近はWEBシステムの開発の業務に携わています。

趣味

趣味はゲーム、steamのセールがあると、ついつい購入してしまい、積みゲーが増えていっていることが最近の悩みであり、積みゲーを崩すのが楽しみでもあります。
また、最近は休日に油そばを食べるのにはまっていいます。
トッピングは温泉卵と揚げ玉ねぎがお気に入りです。
最近トッピング無料券が手に入ったので今まで気になっていた明太子や、魚粉のトッピングも試してみて新しい組み合わせも開拓しようと思っています。

最近は油そばを食べることが多いのでそろそろ新しいラーメン屋の開拓もしたいと思っています。

以上、チキンキウイでした!
次回の社員紹介もお楽しみに!

社員紹介(6-2)

和風ラーメン

閲覧いただきありがとうございます。
再び登場第0ユニットチキンキウイです。
前回の記事はこちら

最近の巣ごもり

このご時世家で過ごすことも増えたので、最近は自炊というものを身に着けました。
11月になり急に寒くなったこともあり、温かい食べ物が恋しくなることもあり、
最近は煮込み料理にはまっています。
温かくて手軽に作れて何より炭になりにくい(重要)ことが気に入っています!

その中でも最近は赤ワインを使った煮込み料理にはまっています。お肉との相性もバッチリでお肉好きの私にとってとても重宝しています。ただし赤ワインを飲むのは苦手だったりします。

お肉のワイン煮
最近作った赤ワイン煮

今年のフェイバリットラーメン

巣ごもりが増えたとはいえ相も変わらずラーメンは食べています!
今年は「玉響」というお店のラーメンが美味しかったので紹介します。
醤油ベースの和風のラーメンであっさりしているのにしっかりと油の美味しさが感じられて、トッピングの焼き豚もとても美味しいおすすめのラーメンです。

和風ラーメン
セットでついてくる丼も美味しい!

以上、食欲の秋を満喫しているチキンキウイでした!
次回の社員紹介もお楽しみに!

技術者ブログ – Bootstrap グリッドシステム使ってみる


Notice: A non well formed numeric value encountered in /export/sd215/www/jp/r/e/gmoserver/2/9/sd0971329/dandelions.co.jp/blog/wordpress-4.9.8-ja-jetpack_webfont-undernavicontrol/wp-content/plugins/crayon-syntax-highlighter/crayon_formatter.class.php on line 118

Notice: A non well formed numeric value encountered in /export/sd215/www/jp/r/e/gmoserver/2/9/sd0971329/dandelions.co.jp/blog/wordpress-4.9.8-ja-jetpack_webfont-undernavicontrol/wp-content/plugins/crayon-syntax-highlighter/crayon_formatter.class.php on line 119

Notice: A non well formed numeric value encountered in /export/sd215/www/jp/r/e/gmoserver/2/9/sd0971329/dandelions.co.jp/blog/wordpress-4.9.8-ja-jetpack_webfont-undernavicontrol/wp-content/plugins/crayon-syntax-highlighter/crayon_formatter.class.php on line 118

Notice: A non well formed numeric value encountered in /export/sd215/www/jp/r/e/gmoserver/2/9/sd0971329/dandelions.co.jp/blog/wordpress-4.9.8-ja-jetpack_webfont-undernavicontrol/wp-content/plugins/crayon-syntax-highlighter/crayon_formatter.class.php on line 119

Notice: A non well formed numeric value encountered in /export/sd215/www/jp/r/e/gmoserver/2/9/sd0971329/dandelions.co.jp/blog/wordpress-4.9.8-ja-jetpack_webfont-undernavicontrol/wp-content/plugins/crayon-syntax-highlighter/crayon_formatter.class.php on line 118

Notice: A non well formed numeric value encountered in /export/sd215/www/jp/r/e/gmoserver/2/9/sd0971329/dandelions.co.jp/blog/wordpress-4.9.8-ja-jetpack_webfont-undernavicontrol/wp-content/plugins/crayon-syntax-highlighter/crayon_formatter.class.php on line 119

Notice: A non well formed numeric value encountered in /export/sd215/www/jp/r/e/gmoserver/2/9/sd0971329/dandelions.co.jp/blog/wordpress-4.9.8-ja-jetpack_webfont-undernavicontrol/wp-content/plugins/crayon-syntax-highlighter/crayon_formatter.class.php on line 118

Notice: A non well formed numeric value encountered in /export/sd215/www/jp/r/e/gmoserver/2/9/sd0971329/dandelions.co.jp/blog/wordpress-4.9.8-ja-jetpack_webfont-undernavicontrol/wp-content/plugins/crayon-syntax-highlighter/crayon_formatter.class.php on line 119

技術者ブログと題して社員が日ごろ取り組んでいる学習内容を紹介します。
第9回はレスポンシブデザインをテーマにしている第0ユニットです。

前回はBootstrapを利用するための準備ができました。
今回はグリッドシステムを使っていきましょう!

グリッドシステムとは

レイアウトを格子状に分解して配置するデザイン手法で、Bootstrapでは12分割しています。 グリッドに表示物を配置しておけば、パソコンやスマホなど画面幅が異なってもレイアウトを崩すことなく表示することができます。
以下の画像のように、画面サイズによってコンテンツを横並びにしたり縦並びにしたりできます。
Bootstrapではこのグリッドシステムによってレスポンシブデザインが実現できます。

コンテナを設置する

グリッドシステムではまず、コンテナを配置する必要があります。コンテナには固定幅コンテナと可変幅コンテナの二種類があります。

固定幅コンテナ

固定幅コンテナは、ウインドウの拡大・縮小を行ってもコンテンツの幅が固定のコンテナです。

画面サイズが大きくても小さくても幅が同じ

可変幅コンテナ

可変幅コンテナは、ウインドウサイズに合わせて全幅になるように幅が可変します。

画面サイズによって幅が変わります

カラムを設定する

カラムは「行」と「列」を設定することで作成できます。
rowが行、colが列です。

カラムは、自動で等幅で並びます。

カラムの幅を指定する

「col-[数値]」と記載することでカラムの幅を指定することができます。

カラムの数値は1~12の値が指定できます。
1行には12列まで指定でき、12列を超えると改行されます。

今回はグリッドシステムの基本についてを紹介しました。
次回の第0ユニットの技術者ブログもお楽しみに!

技術者ブログ – Bootstrapの利用 JS準備編


Notice: A non well formed numeric value encountered in /export/sd215/www/jp/r/e/gmoserver/2/9/sd0971329/dandelions.co.jp/blog/wordpress-4.9.8-ja-jetpack_webfont-undernavicontrol/wp-content/plugins/crayon-syntax-highlighter/crayon_formatter.class.php on line 118

Notice: A non well formed numeric value encountered in /export/sd215/www/jp/r/e/gmoserver/2/9/sd0971329/dandelions.co.jp/blog/wordpress-4.9.8-ja-jetpack_webfont-undernavicontrol/wp-content/plugins/crayon-syntax-highlighter/crayon_formatter.class.php on line 119

Notice: A non well formed numeric value encountered in /export/sd215/www/jp/r/e/gmoserver/2/9/sd0971329/dandelions.co.jp/blog/wordpress-4.9.8-ja-jetpack_webfont-undernavicontrol/wp-content/plugins/crayon-syntax-highlighter/crayon_formatter.class.php on line 118

Notice: A non well formed numeric value encountered in /export/sd215/www/jp/r/e/gmoserver/2/9/sd0971329/dandelions.co.jp/blog/wordpress-4.9.8-ja-jetpack_webfont-undernavicontrol/wp-content/plugins/crayon-syntax-highlighter/crayon_formatter.class.php on line 119

技術者ブログと題して社員が日ごろ取り組んでいる学習内容を紹介します。
第9回はレスポンシブデザインをテーマにしている第0ユニットです。

前回第0ユニットでは、 Bootstrapを利用するための方法 としてCSSファイルを準備しました。 今回はJSファイルを用意していきます。

用意するファイル

用意するJSファイルは3つです。
bootstrap.js
jquery.js
popper.js

Bootstrap


bootstrap.jsは前回紹介した BootstrapのJSライブラリファイルです。
こちらも公式サイトからDLできまます。

jQuery

jQuery公式ページ

jquery.jsは、JavaScriptライブラリのデファクトスタンダードと呼ばれるくらい、有名なJavaScriptコードをより容易に記述できるようにするために設計されたJavaScriptライブラリです。

Popper

Popper.js公式ページ

マウスを載せた際などに表示されるツールチップのような吹き出しのパーツを
簡単に作れるJavaScriptのライブラリです。

JSファイルを呼び出す

JSファイルが用意できたらHTMLでファイルを読みこんでいきましょう。
JSの読み込みは<body>要素内で行います。

HTML記載例

JSファイルもCDNが利用できます。

今回は必要なJSライブラリの準備方法を紹介しました。
次回の第0ユニットの技術者ブログもお楽しみに!

社内勉強会 – Adobe XDを使ってみよう

前回の勉強会の様子
http://dandelions.co.jp/blog/2019/12/04/artcle-12/

勉強会テーマ 『Adobe XDの基本』

今回はXD勉強会の初回ということで、XDの基本について勉強しました。
勉強会の様子を紹介していきます。

Adobe XDとは

webサイトや、モバイルアプリなどのデザインに適した、オールインワンのUX/UIソリューションです。デザイン、プロトタイプ、共有、すべてをXDでおこなえます。


https://helpx.adobe.com/jp/xd/how-to/what-is-xd.html

XDで和定食店の紹介ページデザイン作ってみた

今回は和定食店の紹介WEBページのデザインを作りながら、基本を学びました。
ワイヤーフレームがサクサク作れる機能が盛りだくさんです。
特にリピートグリッド機能は簡単に類似パーツを作成できて、メニュー表の作成に役立ちました。

リピートグリッド1
リピートグリッド結果

このようにスクロールするだけで簡単に類似パーツを作成できました。
また、作成したパーツにまとめて、別々の画像を挿入することも簡単。

画像挿入
画像挿入完了
マウス操作で簡単挿入

他にもページの動作付けや、画像の切り取り、装飾の作成も簡単に行うことができました。またIllustratorで作成した図形も使えるらしく、WEBデザインが捗りそうです。
最終的にはこんな感じに仕上がりました。

メニュー完成
初心者でも1時間程度で作れる

いかがでしたでしょうか。
今回は触り程度でしたがXDは初心者にもやさしい便利な機能が盛りだくさんでした。
プロトタイプ機能でデザインだけでなく、画面の遷移も簡単に確認できるのも完成をイメージし易くてよかったです。
次回の勉強会もお楽しみに!!

社員紹介(6)

閲覧いただきありがとうございます。
6人目の刺客「チキンキウイ」です。


肩書

第0ユニットに所属しています。

経歴

高校は普通科、文系大学の理系学部出身
IT業界に就職し主にJavaでのシステム開発をメインにお仕事をしています。

現在の業務内容

システム開発をメインで今は設計のお仕事をしています。
最近は設計、製作、テストまでのシステム開発の一通りの流れすべてに携わることが多いです。
新しい経験が多く、なかなか上手くいかないことも多いですが試行錯誤し、
上手くいったときは達成感が味わえます。

自己アピール

趣味はゲーム、steamの誘惑に勝てず、積みゲーが増えていっていることが最近の悩みであり積みゲーを崩すのが楽しみでもあります。
また、昼食に外食をすることも 楽しみの一つです。
最近はラーメンにはまっています。

最近ハマっているまぜそば

以上!!
次回の社員紹介もお楽しみに!!