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

技術者ブログと題して社員が日ごろ取り組んでいる学習内容を紹介します。
第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の誘惑に勝てず、積みゲーが増えていっていることが最近の悩みであり積みゲーを崩すのが楽しみでもあります。
また、昼食に外食をすることも 楽しみの一つです。
最近はラーメンにはまっています。

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

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