dandelionS Blog

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

技術者ブログ – 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.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は初心者にもやさしい便利な機能が盛りだくさんでした。
プロトタイプ機能でデザインだけでなく、画面の遷移も簡単に確認できるのも完成をイメージし易くてよかったです。
次回の勉強会もお楽しみに!!

2020年3月11日2020年3月11日

社員紹介(11)

ご覧いただきありがとうございます。
この度、社員紹介させていただきます「じゅんぺー」です。

肩書

「ローコード開発」をテーマにしている第２ユニットに所属しています。

経歴

文系の大学を卒業後、営業の仕事を10年近くやってまいりました。
そこから、何の経験もありませんでしたが以前から興味のあったこの業界に飛び込みました。

現在の業務内容

社内での研修を終え、現在は客先に常駐させていただき開発案件に携わっております。
日々新しい知識や技術が習得でき、大変ではありますが先輩方の優しいサポートもあり充実した日々を送っています。

自己PR

わが家の癒しです。(笑)

小さな頃から家庭に犬がいる環境で育ったので、完全な犬派です。
仕事から帰ったら、しっぽを振って玄関まで迎えに来てくれるので一瞬で疲れが吹っ飛びます。
休みの日には２匹と散歩に出かけるのが楽しみのひとつで、最近では車に乗せて一緒にドライブに出かけたりします。

次回の社員紹介もお楽しみに！

2020年2月19日2020年2月20日

技術者ブログ – EC2インスタンスの作成（Amazon Web Services）

技術者ブログとして日ごろ取り組んでいる学習内容をご紹介します。
今回は、クラウドをテーマにしている第3ユニットです。

EC2とは

EC2とは、Elastic Compute Cloudの略です。
EC2はAWS上に仮想サーバを作るサービスです。誰でも簡単に仮想サーバを作成することが出来ます。
今回の技術者ブログでは、実際にその手順を説明します。

インスタンスの作成

左側のメニューからインスタンスを選択し、インスタンスの作成を押します。

AMIの選択

AMI（Amazon マシンイメージ）の選択を行います。
Windowsマシン、Linuxマシン等色々な選択肢がありますが、最初はAWSに最適化されたLinuxである、Amazon Linux2から試してみると良いでしょう。

インスタンスの詳細の設定

ネットワークやサブネットの設定を行うことができます。
まずはデフォルトで大丈夫です。

ストレージの追加

デフォルトは8GiBに設定されています。
増やす場合は作成後も変更可能ですので、まずは変更しなくてもかまいません。

タグの追加

「別のタグを追加」を押し、キーに「Name」、値に自分が設定したい名前を入力します。
適宜タグ付けすることで、複数のインスタンスを作成した時に見分け易くなります。

セキュリティグループの設定

インターネットとEC2インスタンスを隔てる仮想ファイアーウォールです。よくわからない場合は、自分のグローバルIPを調べておき、まずはそのIPだけSSH接続を許可しておくと良いでしょう。

キーペアの設定

この項目ではキーペアを設定できます。ログイン情報の暗号化と復号を行うのに使われるパブリックキーとプライベートキーをキーペアといいます。
「新しいキーペアの作成」を選択し、設定したいキーペアの名前を入力し、「キーペアのダウンロード」を行います。
ここでダウンロードしたキーペアは再度入手することは出来ません。無くしてしまうと今回作成したインスタンスにログイン出来なくなるため、大切に保管して下さい。

作成実施とSSHログイン

最後に「インスタンスの作成」を押すとインスタンスが作成されます。
インスタンス起動後、先ほど作成したキーペアを使用し、SSHログインすることが可能です。

慣れればインスタンスの作成自体は数分で完了します。
もちろん、本格的に使用するためには、使用目的に沿ったスペックの選択等、覚えるべきことはあります。しかし、とりあえず仮想サーバがどんなものか知るため、触ってみたいという程度であれば、今回の手順に沿うだけで十分です。
低スペックサーバであれば、1年間は無料使用できますし、この機会にAWSで仮想サーバデビューしてみるのもいかがでしょうか？

今回の技術者ブログはこれで終了になります。
ただ、セキュリティグループについてなど、まだまだ掘り下げて説明したいことがあります。
次回以降の記事もお楽しみに。

2020年2月12日2020年2月12日

ボウリングに行ってきました！

ダンデライオンズでは社員同士の親睦を深めるための「レクリエーション」を定期的に開催しています！今回はボウリングに行ってきました！

運動をする機会が減りがちなメンバーも多かったと思います。今回のレクリエーションは体を動かす良い機会になったのではないでしょうか？

当日は個人戦２ゲームの合計スコアで競いました！
栄えある個人成績上位３名です！

１位の方は２ゲームのトータルが「308」という素晴らしい安定感でした！
(手前にあるのが卓球台なので卓球で戦ったみたいですね…)

皆の新たな一面がみえ、とても楽しいレクリエーションとなりました！
次回のレクリエーションもお楽しみに！

2020年2月5日2020年2月5日

社員紹介(10)

いつも子連れ出勤奮闘記を読んでいただきありがとうございます！今回は大怪獣ぼす・べいびーの母であるラムネの社員紹介を少しさせていただきます。

肩書

総合職として第０ユニットに所属しています。

経歴

保育園で働いていました。

現在の業務

子連れの為社内で総合職として働いています。
ECサイトの運営や、システムのテスト、HTMLやCSSを使いWebページの作成に携わっています。

自己アピール

私の趣味はモノを作る事です。お菓子作りや料理も好きですが、やり始めるとキリがない物を１つ紹介しますね！

壁面と呼ばれるものを皆さんは知っていますか？

この様に折り紙や画用紙を切り抜いてキャラクターや、季節アイテムを作ります。幼稚園や保育園の壁に貼ってあります。

こういうのを作るのが大好きで、我が子の生後記念日にも作ってました（笑）

写真の我が子がとっても幼いですね（笑）以上、私の趣味でした！
次の社員紹介もお楽しみに！

2020年1月29日2020年1月31日

～子連れ出勤奮闘記～Vol.3

こんにちはラムネです。

突然ですがこれ、何だかわかりますか？

そうです、ぼす・べいびーが撮影した写真です。
私が仕事で写真の撮影をしている所をよく見ていている様で、真似っ子をしています。

知恵付きが早くなっていて、日々吸収することが増えてきました。

そして怪獣は更に大怪獣と進化しました。
オフィスにはぼす・べいびー専用のサークルがあるのですが、最近は柵を簡単に乗り越えて脱出してきます・・・

しかも、オフィス内に私だけになった瞬間これです。
恐怖です・・・。(T_T)

散々暴れた後眠りにつきます。

ボールプールはなぎ倒され、ミッキーもクッタクタ・・・
ここだけ竜巻が通過したのかな・・・？

と、こんな活発な毎日を送っています。
いつ落ち着いてくれるのかな～（笑）

最後に・・・

2020年1月23日2020年1月24日

技術者ブログ ORACLE APEXを使ってローコード開発をしよう！

技術者ブログとして日ごろ取り組んでいる学習内容をご紹介します。
今回は、ローコード開発をテーマにしている第2ユニットです。

今回のテーマ『ローコード開発してみよう』

今回は実際にORACLE APEXというローコードの開発環境を使ってシステムを作っていきます。
ローコードって何？ORACLE APEXって？という方は以前の記事を読んで下さい。
→技術者ブログ(2) – ローコード開発のご紹介（Oracle APEX）

あらかじめ作成しておいたユーザー情報のテーブルを元に、登録・更新機能を備えたユーザー管理画面を作成します。

まずはORACLE APEXの管理画面からページ作成をクリックして画面のレイアウトを決めます。
今回はフォーム付きレポートを選択します。

つぎにページの中にどんな情報を入れるのかを設定します。
ユーザー管理画面なので、ユーザー名・ID・パスワードを設定することにします。

たったこれだけです♪
これで作成ボタンを押すと、すでに登録されているユーザー情報が一覧で載っているページが簡単に作成できてしまいます。

この画面では右上の作成ボタンをクリックすれば新たなユーザーを登録することができるようになっていますので、ソースコードを書かなくてもアプリケーション上でユーザー情報を追加することができます。

　↓

また応用編として、ユーザー名をリンクにしてクリックするとその人の勤怠管理画面に遷移するなど、クリックひとつで簡単に設定することができます。

作ってみた感想

とても簡単に短時間で作成することができました。
ORACLE APEX初心者の新入社員でも10分もかからずに作ることが可能でした。
またレイアウトやオプションが充実しているので、幅広いアプリケーションに対応できると思います。
多くの企業で実際の開発に使用されているのも納得できます。
第2ユニットでは様々なローコード開発を行ってますので、今後も紹介していきたいと思います。

2020年1月14日2020年1月24日

新年のご挨拶＆代表紹介

新年あけましておめでとうございます。

平素はご愛顧を賜わり、厚く御礼申し上げます。
本年も、更なるサービスの向上に努めて参りますので、
より一層のご支援、お引立てを賜りますようお願い申し上げます。

昨年１２月から第三期目を迎え
ダンデライオンズも少しずつではありますが
一歩ずつコツコツと成長を遂げております。

４月からは新卒社員も加わることになっておりますので
研修プランなどティーチングプランを練りながら
とてもワクワクする楽しみな年になることを期待しております。

自己紹介が遅れましたが

今回の記事を担当させていただきます「代表」です。
ダンデライオンズは他の会社とは少し変わっておりまして
「代表」と「社長」は別々の者が担当しております。

去年の１０月に伊勢神宮にお参りに行かせてもらいまして
令和元年ということもあり御朱印デビューをさせていただきました。

ご存じの方も多いかと思いますが
伊勢神宮は大きく内宮と外宮と別れておりまして
それぞれ御朱印を頂戴しました。

更に同日に猿田彦神社でも御朱印を頂戴し
デビューの日に３つも御朱印を頂戴させていただきました。

少し調べてみると
御朱印は神社や寺院ごとに全く異なる特徴があり
特別な恰好良い印や可愛らしい印を加えていただけたり
縁日などの特別の日には金の御朱印を頂戴できたりします。

本当に様々な御朱印がある事を知り
皆さんが集めたくなる気持ちが分かりました。
ここから御朱印に興味を持ちまして
旅行でも神社巡り寺院巡りを計画に盛り込むまでとなりました。

以前のブログで社員旅行についての記事を
投稿させていただいておりますが
昨年は伊豆に行かせていただきました。

この旅行では修善寺を散策させていただき
一人コッソリと御朱印を頂戴させていただきました。
（雨の修善寺は本当に綺麗でした）

今年は令和初となる正月を迎え
元日に大須観音と熱田神宮にお参りをさせていただきました。

御朱印も確りと頂戴させていただきました。
（お御籤は「吉」で熱田神宮では大吉に続く良いモノでした）

最後になりますが

改めまして本年も精一杯取り組ませていただきますので
ご指導ご鞭撻をいただければ幸甚です。
皆様のご健康とご多幸をお祈りし、
新年のご挨拶とさせていただきます。

2019年12月25日2019年12月25日

技術者ブログ – 「Unity」でゲームを作ろう

技術者ブログと題して社員が日ごろ取り組んでいる学習内容を紹介します。

「AIで最強のカードゲームを開発してる」第一ユニットです。というのは半分冗談として、弊社開発のカードゲーム「HelloWorld」のスマホ版作成で利用した「Unity」の紹介です。2005年にユニティ・テクノロジーズによって開発されたゲームエンジンです。昨今のスマートフォンゲームのほとんどがこの開発環境によって作成されています。開発言語はC#が一般的となっています。

ゲーム開発は敷居が高いと思われがちですが、このツールが支持されるのは下記の理由があります。

個人や年商10万ドル（約11万円）以下は無料
マルチプラットフォームに対応
他のツールとの相性がよい
全世界で利用されているため、情報が沢山ある
アセットストアで素材が入手できる

昔はゲーム開発には高価なライセンス費用がかかりましたが、誰でもゲームが無償で作ることができるようになりました。また、AndroidやiPhoneを意識することなく開発できます。今回は利用していませんが、モデリングツールとの連携が容易となっており、インターネットの記事や関連書籍も豊富です。アセットストアは開発環境内でオブジェクト画像や効果音などさまざまな素材（有償素材あり）を利用できます。

では、実際の開発画面を見てみましょう。ゲーム画面に視覚的にオブジェクト（カードやゲージ等）の配置場所を設定でき、基本的な処理は右の設定値を変更することで動きを表現できます。細かい設定や処理はソースコードを記述し、オブジェクトの紐付けを行うことでゲームを作成します。

ゲームを遊ぶだけでなく、自分で作りたくなってきませんか？実際に作ってみると、あの有名ゲームはこんな感じで作ってるんじゃないかなと思ったりしちゃいます。次回は実際のソースコードの記述を紹介したいと思います。