チキンキウイ

2026年1月21日

Windows環境のCursorでVue3開発環境を作ってみる

技術者ブログとして日ごろ取り組んでいる学習内容をご紹介します。
今回はAI機能を搭載したコードエディタCursorでVue3の開発環境を作ってみたので紹介します。

必要なもの

・Node.js
・Cursor
・Vue3
・Vue Router

Node.jsのインストール

公式サイトよりインストーラを取得
記事作成時最新は「24.12.0(LTS)」
Windowsインストーラをダウンロード

インストールウィザードに沿ってインストール、特にこだわりがなければすべてNextでOK

以下も基本的にNextで大丈夫ですが、今後Node.jsのいろいろなモジュールを使用した場合は
チェックを入れておくといいです。
今回の環境では不要です。

以上でNode.jsが準備できました。

Cursorのインストール

公式サイトよりインストーラーを取得します。
記事作成時最新は「2.2.44」
とくにこだわりがなければ、インストーラーデフォルト設定のままインストールでOK
インストール後、ログインが求められるのであらかじめ公式サイトのログインからアカウント登録しておくとスムーズに進みます

Cursorに拡張機能の追加

Cursorに以下の拡張機能を追加します

Japanese Language Pack for VS Code
- 日本語化
npm
- npmのサポート
Npm Intellisense
- importステートメント内のnpmモジュール自動補完
Vue (Official)
- Vueのサポート
Vite
- Vue開発サーバーのサポート

Vue3プロジェクトを作成

ファイル > フォルダーを開くでプロジェクトを作成したい場所を開く

[Ctrl + @]でコンソールを開く

コンソールで以下のコマンドを実行しプロジェクトを作成

npm create vue@latest

1	npm create vue@latest

yを入力

お好きなプロジェクト名、パッケージ名を入力

追加したいパッケージを選択します

実行してみる

TypeScript
- 必ず追加
JSX Support
- JSX/TSX で Vue を書くための機能、React風に書きたい場合は追加
- 今回はOFF
Router
- 画面遷移に必須
- 必ず追加
Pinia
- 状態管理ライブラリ
- ログイン情報・ユーザー情報・共通データなどを扱う場合は追加
Vitest
- 単体テスト自動化するなら追加
End-to-End Testing
- ブラウザ操作を含むテストを自動化するなら追加
ESLint
- コードの書き方チェック
- 必ず追加
Prettier
- コード自動整形
- 必ず追加

実験的機能を使うか聞かれる今回は使用しないため初期のままEnter

サンプルコードを省略して作成するか確認されるので今回は「No」を選択し
サンプルコードを追加

プロジェクトの作成が始まり完了するとプロジェクトフォルダが作成される

作成したプロジェクトフォルダをcursorを開きなおし以下のコマンドを実行

PS C:\vue3\startupVue> npm install

1	PS C:\vue3\startupVue> npm install

依存関係のインストールが完了すればプロジェクトの準備完了

Vueの起動

以下のコマンドを実行すると開発サーバーを実行することができます

npm run dev

1	npm run dev

起動に成功すると以下の画面が表示される

コンソールに[q]を入力することでサーバーを停止できます

以上、CursorでVue3の開発環境を構築してみました。
興味が持てましたら自分のPCにも構築してみてください。

2025年3月26日

社内勉強会「セキュリティの基本」

今回の社内勉強会を行いましたので紹介します。テーマは「セキュリティの基本」となります。担当はチーム0のチキンキウイです。

今回の勉強会では、セキュリティインシデントが発生した場合、どんなリスクがるのかや、
普段勤務する上で、どのような対策ができるのかの基本について学びました。

勉強会は以下の流で行いました
・セキュリティの必要性
・発生し得る問題について
・情報セキュリティ５か条
・ダンデライオンズで行っているセキュリティ対策について
・情報セキュリティクイズ

セキュリティの必要性

ここでは、セキュリティ対策や、インシデントが発生した場合に、会社に発生する
社会的な影響や、法律、道義的な影響について学びセキュリティの必要性について勉強を行いました。

発生し得る問題について

ここのでは起こりうるセキュリティリスクについて、実際の事例から学びました。
会社攻撃により会社が受ける影響だけでなく、セキュリティ対策不備があった場合に会社や、経営者に問われる法的責任、会社間の関係性の変化についても学びました。

情報セキュリティ５か条

IPAが紹介しているセキュリティ5箇条から、個人きを付けるべきセキュリティ対策について学びました。主に以下のことについて事例や、対策について確認しました。

1.OSやソフトウェアは常に最新の状態にしよう
2.ウイルス対策ソフトを導入しよう
3.パスワードを強化しよう
4.共有設定を見直そう
5.脅威や攻撃の手口を知ろう

まとめ

今回はセキュリティの重要性や、基本的な対策方法について勉強しました。
勉強会を行うにあったってIPAで公開されているセキュリティ対策ガイドラインを参考としています。
IPAでは情報セキュリティについて様々な情報を発信していますので興味あがある方はwebページをのぞいてみてください。

IPA 中小企業の情報セキュリティ対策ガイドライン
https://www.ipa.go.jp/security/guide/sme/about.html

次回の記事もお楽しみに。

2024年5月22日

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" />
    <a href="http://js/map.js">http://js/map.js</a>
  </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>

<!DOCTYPE html>

<!--

@license

SPDX-License-Identifier: Apache-2.0

-->

<html>

<head>

</head>

<body>

<h3>My Google Maps Demo</h3>

({key: "{APIキー}", v: "beta"});</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",
          });

　　　　// 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: "矢場公園",
          });

// ピンの地点を設定

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ユニットの技術者ブログもお楽しみに！

2024年1月24日

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>
    <a href="http://js/anime.min.js">http://js/anime.min.js</a>
</head>

<head>

<a href="http://js/anime.min.js">http://js/anime.min.js</a>

</head>

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

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

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

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

html

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

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

css

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

.box {

background-color: blue;

width: 80px;

height: 80px;

}

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

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>

viewBox="0 0 16 16">

</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;
}

.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;

}

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);

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ユニットの技術者ブログもお楽しみに！

2023年5月24日

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") {
    </code>replacedBy("org.springframework.boot:spring-boot-starter-jetty", "Use jetty instead of tomcat")
    </code>}
    </code>}
    </code>implementation 'org.springframework.boot:spring-boot-starter-jetty'
    </code>providedRuntime 'org.springframework.boot:spring-boot-starter-jetty'
}

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") {

</code>replacedBy("org.springframework.boot:spring-boot-starter-jetty", "Use jetty instead of tomcat")

</code>}

</code>implementation 'org.springframework.boot:spring-boot-starter-jetty'

</code>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

2022年11月17日

社員紹介(30)

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

経歴

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

趣味

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

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

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

2021年11月10日

社員紹介(6-2)

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

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

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

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

2020年5月22日2020年5月22日

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

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

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

グリッドシステムとは

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

コンテナを設置する

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

固定幅コンテナ

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

<div class="container">
  コンテナ
</div>

コンテナ

</div>

可変幅コンテナ

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

<div class="container-fluid">
  コンテナ
</div>

コンテナ

</div>

カラムを設定する

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

<div class="container-fluid">
    <div class="row">
        <div class="col">
            1列目
        </div>
        <div class="col">
            2列目
        </div>
        <div class="col">
            3列目
        </div>
    </div>
</div>

1列目

</div>

2列目

</div>

3列目

</div>

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

カラムの幅を指定する

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

<div class="row">
    <div class="col-2">
        1列目
    </div>
    <div class="col-7">
        2列目
    </div>
    <div class="col">
        3列目
    </div>
</div>

1列目

</div>

2列目

</div>

3列目

</div>

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

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

2020年3月24日2020年3月25日

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

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

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

用意するファイル

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

Bootstrap

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

jQuery

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

Popper

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

JSファイルを呼び出す

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

HTML記載例

<!DOCTYPE html>
<html lang="ja">
  <head>
      <meta charset="utf-8">
      <!-- ダウンロードしたファイルを以下のように読み込む -->
      <link rel="stylesheet" href="./css/bootstrap.min.css"/>  
   </head>
   <body>
     <script ｓｒｃ="./js/jquery-3.3.1.min.js"></script>
     <script ｓｒｃ="./js/popper.min.js"></script>
     <script ｓｒｃ="./js/bootstrap.min.js"></script>
   </body>
</html>

<!DOCTYPE html>

<head>

</head>

<body>

</body>

</html>

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

<!DOCTYPE html>
<html lang="ja">
  <head>
      <meta charset="utf-8">
      <!-- ダウンロードしたファイルを以下のように読み込む -->
      <link rel="stylesheet" href="./css/bootstrap.min.css"/>  
   </head>
   <body>
     <script ｓｒｃ="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
     <script ｓｒｃ="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
     <script ｓｒｃ="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
   </body>
</html>

<!DOCTYPE html>

<head>

</head>

<body>

</body>

</html>

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

2020年3月19日2020年3月19日

社内勉強会 – 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ページのデザインを作りながら、基本を学びました。
ワイヤーフレームがサクサク作れる機能が盛りだくさんです。
特にリピートグリッド機能は簡単に類似パーツを作成できて、メニュー表の作成に役立ちました。

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

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

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

必要なもの

Node.jsのインストール

Cursorのインストール

Cursorに拡張機能の追加

Vue3プロジェクトを作成

実行してみる

Vueの起動

セキュリティの必要性

発生し得る問題について

情報セキュリティ５か条

まとめ

Google Maps Platformとは

事前準備

APIキー取得

MAPの表示

地図の表示

anime.jsとは

導入方法

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

環境

設定内容

動かしてみた

SpringBootプロジェクトの作成

build.gradleの変更

動かしてみた

まとめ

参考

経歴

趣味

最近の巣ごもり

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

グリッドシステムとは

コンテナを設置する

固定幅コンテナ

可変幅コンテナ

カラムを設定する

カラムの幅を指定する

用意するファイル

Bootstrap

jQuery

Popper

JSファイルを呼び出す

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

Adobe XDとは

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

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