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

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

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

グリッドシステムとは

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

コンテナを設置する

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

固定幅コンテナ

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

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

可変幅コンテナ

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

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

カラムを設定する

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

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

カラムの幅を指定する

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

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

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

社員紹介(13)

ご覧いただきありがとうございます。
この度、社員紹介させていただきます豆腐です。

肩書

新入社員として4月に入社いたしました。

経歴

高校・大学共に文系で、英語や心理学を学ぶ一方、数学やデータ分析などの理系分野にも取り組みました。
理系分野を学ぶ中で、興味を持ったのがプログラミングです。
元々趣味でパソコンを扱う機会が多く、そのことがきっかけでIT業界に就職しました。

現在の業務

主に研修を受けております。
楽しかったところはHTML/CSSで、自分でタグを入力することによって実際にページができあがっていく様子が面白いと思いました。
大変なところは覚えることが多い点です。しかし、上司の指導が非常に丁寧で、未経験の私でも理解しやすいです。
また、自分でも予習復習を行うことによってわからない点をそのままにしないように努力しています。

自己PR

趣味は映画鑑賞です。
大学時代は映画館でアルバイトをしていたことから、映画館で鑑賞することが多く休日には一日に最大4本の映画をはしごしました。
家で映画を観るとどうしてもスマホを触ってしまったり気が散ってしまうので、集中出来る映画館という空間は本当に最高です!

他にも、ディズニーランドやUSJなどのテーマパークが大好きです。アトラクションやショーなどを楽しみながらフードをよく食べます。ディズニーシーで食べたガーリックシュリンプ味のポップコーンは美味しすぎて5回も購入しました。
是非1度食べてみてください!

ディズニーシーで食べたガーリックシュリンプ味のポップコーン
USJで食べたチュロス

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

技術者ブログ – Amazon EC2 セキュリティグループ(Amazon Web Services)

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

セキュリティグループとは

AWS標準のファイアウォール機能です。Amazon EC2 インスタンスへの通信可否を制御します。
1つのセキュリティグループを複数のEC2インスタンスに割り当てることもできます。

注意点

セキュリティグループでは、EC2インスタンスへのアクセスを許可するトラフィック規定のルールを設定し、ここで設定・許可しないアクセストラフィックは全て拒否されます。そのため、初期状態ではEC2インスタンスへのアクセスが不可能となっています。

設定方法

AWSの管理画面にログインしてEC2インスタンス一覧の画面を開き、左メニューにある「セキュリティグループ」をクリックします。
一覧から、該当のセキュリティグループを選択し「インバウンド」のタブをクリックします。
「インバウンドのルールの編集」をクリックします。
「ルールを追加する」をクリックして加えます。 HTTPやSSH等、よく使うサービスのポートは最初から選択可能です。ソースはよく分からない場合、自分のグローバルIPアドレスを設定しておきましょう。
最後に「ルールの保存」をクリックして反映させます。

いかがでしょうか?
このように、ブラウザ上でファイアウォールの設定を全て完結させることができます。
また、最初に書いたように、 1つのセキュリティグループを複数のEC2インスタンスに割り当てることもできるため、管理も簡単です。ファイアーウォールは設定が難しそうと思っている方も、これなら抵抗感なく使えるのではないのでしょうか?

今回の技術者ブログはこれで終了になります。
次回以降の記事もお楽しみに。

5月社内コンテスト告知!

弊社で開発中のカードゲーム『Hello World』のテストプレイを兼ねて、5月某日に社内で大会の開催を予定しています。

大会は実力勝負の個人戦です。
参加者特典もあるので、社員は奮って参加してください。

Hello World ※画像は開発中のものです

社外の方には、大会終了後に、このブログにて大会の様子や結果をお届けする予定です。

『Hello World』(ハローワールド) とは…

弊社で現在開発中のカードゲーム、Hello Worldがさらにパワーアップ!
現在Ver.3を開発中です。
プログラム要素をヒントに、プログラミング学習を始める前のお子様から大人まで学んで遊べるゲームとして開発しています。
※具体的なゲーム内容はまだナイショです。製品版をお待ちください!

社員紹介(12)

ご覧いただきありがとうございます。
この度、社員紹介させていただきます「ジョル」です。

肩書

第0ユニットに所属し、総合職として勤務しております。

経歴

大学卒業後広告代理店の営業として勤め、出産を機に退職。
しばらく短時間勤務のパートなどをしておりましたが、
周囲の助けを借りながら育児や家事と仕事をさせていただいています。

現在の業務

海外ECサイトの運営、システムのテストなどのサポート業務の他、来客対応などの一般的な事務業務に携わっております。

自己PR

東京に住んでいた際、ふらりと立ち寄った寄席で出会った落語が趣味のひとつです。
当社の所在地である栄・大須の周辺には「御園座」や「大須演芸場」といった寄席の開かれる施設もあり
仕事帰りや休日などにフラリと立ち寄ることも多々あります。

リニューアルして更に素敵になった御園座は当社から徒歩20分!

落語の魅力は何と言っても「親しみやすさ」。
「落語なんて、シニアの趣味みたい・・」と敬遠される方も多いかと存じますが、短いお話で5分ほどですので一度聞いてみてはいかがでしょう。

故柳家喜多八師匠の独演会の演目。 こちらは当社のある「ナディアパーク」内で催されました。


軽快なリズムで語られる喋りのプロの噺には、きっとついつい聞き入ってしまうはず。
お気に入りの噺家さんを見つけてみるのも一興ですよ。

またね!
次回の社員紹介もお楽しみに!

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

社員紹介(11)

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

肩書

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

経歴

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

現在の業務内容

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

自己PR

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

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

またね!

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

技術者ブログ – 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で仮想サーバデビューしてみるのもいかがでしょうか?


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

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

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

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

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

1位の方は2ゲームのトータルが「308」という素晴らしい安定感でした !
(手前にあるのが卓球台なので卓球で戦ったみたいですね…)
2次会の様子。お魚がとても美味しいお店でした!

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