Cloud Commander

技術者ブログとして日ごろ取り組んでいる学習内容をご紹介します。
今回は、クラウドをテーマにしている第3ユニットです。
クラウドではないのですが、興味あるソフトを見つけたので紹介させてもらいます。

Cloud Commanderとは

WebDavのように、Webブラウザからファイルを操作できるようにするアプリケーションです。 画像などもブラウザ内でプレビューできます。また、遠隔でコンソール操作も可能です。

Cloud Commanderのインストール

Cloud Commanderはlinux上で動くアプリケーションです。curlコマンドでダウンロードとインストールを一括で行うことができます。Cloud Commanderはnodejsで動いているため、こちらもインストールする必要があります。これは、yumでインストールすることが可能です。

curl -SL https://rpm.nodesource.com/setup_7.x | bash –
yum install -y nodejs gcc-c++ make
npm i cloudcmd -g
npm i gritty -g

インストール完了後、以下のコマンドを実行することでCloud Commanderが起動します。

nohup cloudcmd –terminal –terminal-path “gritty –path here” –save &

ブラウザからアクセスする

この時点でリモートのクライアントからブラウザにアクセスすれば利用できる状態になっています。

あまり手間もかからずインストール可能で、手軽にファイルのアップロード、ダウンロードを行えるため、公開ファイルサーバとしても使えそうです。
色々なlinuxアプリケーションを見てきましたが、その中でも特にお勧め度が高いです。linuxを扱える人は良ければ試してみませんか?

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

技術者ブログ-ローコードツールのトレンドについて

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

今回のテーマ『ローコードツールのトレンドについて』

まず初めに弊社ではOracle Application Express(APEX)を利用して、
社内システムを構築しておりますが、国内でのAPEXがどの程度導入されているのか?
今後も利用していくべきなのか?といった視点でトレンドを紹介し、どのローコードツールに着目していくかも選定していきたいと思います。

【APEXの国内での導入事例について】

APEXの成功導入事例の記事を参考にさせていただくと、24事例紹介されているが日本の1事例しか挙げられておらず、海外での事例が多く挙げられているため、日本でのシェア率はそこまで高くないのでは?という印象を受けます。

また、APEXは部門単位の小規模アプリケーションの作成や、
業務の効率化に使う簡易アプリケーションの作成などで利用されることが多いため、案件というよりは、弊社と同様に社内システム管理として利用されることが多いのかな?と感じます。

【国内でのローコードツールのトレンドについて】

ITreviewにて、ローコードツールのトレンドを調べてみました。
※レビュー数と評価が高い上位3点を選出

Claris FileMaker
固有の課題を解決するカスタムAppを迅速に開発するローコード開発プラットフォーム。
小さなチーム・大きなチーム、デバイスを問わずリアルタイムで安全に情報を共有でき、モバイル、コンピュータ、Web、オンプレミス、クラウドで動作させることができます。
35年以上の歴史があり、世界中で累計で2000万ライセンス以上の実績。

OutSystems
アプリケーション開発を可視化し、既存のシステムと簡単に統合、必要であればカスタマイズされたコードを追加することができるローコード開発プラットフォーム。
様々なOSやデバイスでの利用に対応したアプリケーションの開発が行えるため、OSやデバイスの違いを開発者が意識しない。
開発ライフサイクル全体に対応しており、設計、コーディング、デプロイ、監視・管理の仕組みをトータルに提供。
グローバルで広く利用されており、国内でも110社以上の導入実績。

PowerApps
マイクロソフトが提供するビジネスアプリケーション作成ツール。
PowerPointのような直観的な操作と、Excelのような関数を入力するだけでビジネスアプリケーションを作成可能。
数多くのデータソースに接続できることが特長でSharePoint、SQL Server、Office 365、Salesforceなどと接続してデータを取り込むことが可能。
IT業界を中心に、世界中の企業で導入・活用。

評価が高いツールとしてはやはり実績で選ばれている感じが強いですね。
3点のツールもローコード開発として提供している機能は同じような感じだが、
それぞれの特徴を生かしてどれを利用するかを考える必要があります。

【ローコードツールの選定にむけて】

トレンドや導入実績から見ても、APEXを導入している企業は少ないことがわかりました。
そのため、ローコードツールを生かして案件参画を検討しているのであれば、その他のツールに目を向ける必要がありそうです。

選定に向けて重要となってくる点として、
トヨタ自動車がOutsystemsを採用しており更なる展開を図っているという情報があり、中部地方でのOutsystemsの需要が高まってきている感じがします。
実際に何名か案件に携わったこともあり、中部地方の企業として非常に関係の深い話となりますので、今後はOutsystemsにも着目していこうと思います!

今回はトレンド紹介と今後のツールの選定について説明しましたので、
次回はOutsystemsではどのようなことができるのか等を紹介したいと思います。

Pythonで感染者数をグラフ化


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

記事を書くのは久しぶりになります。最近自宅のキーボードを新調してウキウキしているベーです。

今回はPythonの勉強も兼ねて、日々ニュースで見かけるコロナ感染者数のデータからグラフを作ってみました。

感染者数のデータについて

今回は、NHKの新型コロナウィルス特設サイトからダウンロードしたデータを使用します。

https://www3.nhk.or.jp/news/special/coronavirus/data-widget

グラフの作成方法について

勉強ということで、今回は王道のライブラリ pandas + matplotlib で作成します。

実際にやってみた

サイトからダウンロードしたCSVを読み込んで、matplotlibでグラフとして書き出します。
せっかくなので全国と愛知県それぞれで作りました。

折線グラフ

全国の感染者数の推移
愛知県の感染者数の推移

地図に色付け

ただCSVから折線グラフを書くだけだと味気なかったので、加えて日本地図に色を塗ってみました。
2021/06/20の感染者数が多い県ほど色が濃くなっています。

6/20の県別感染者数

終わりに

今回はpythonでグラフを書いてみました。
自宅のMacでまだ対応していないライブラリがあり、環境構築の面で一番苦戦しました…

地図を簡単に扱えるライブラリがあることなど、新しく覚えられたこともあるので、今後ももっと複雑なデータの処理など挑戦していきたいと思います。

記事内のソースは抜粋して記載してますので、興味がある方は↓JupyterLabのpdfファイルをご覧ください。

技術者ブログ – Monaca

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

今回は第0ユニットが注目しているMonacaについてご紹介をします。

Monacaとはクラウド技術を用いた国産アプリ開発プラットフォームです。

アプリ開発プラットフォームとは、モバイルアプリケーションなどを開発する環境のことです。プラットフォームを利用しない場合、自分で開発環境の構築をする必要があります。

例として、モバイルアプリのAndroidとiOSがあります。Androidでは、Android Studio、iOSではXcodeとそれぞれ開発環境が異なります。特にXcodeではMac環境が必要となるため、Macがない場合はiOSアプリの開発はできません。

また、AndroidとiOSとで使用する言語が異なります。
AndroidはJavaとC++、iOSではobjective-Cの言語を主に使用して開発を行います。

上記の点から、モバイルアプリを作るというだけでも非常に時間とコストがかかるということが分かります。

しかし、Monacaを使用することによって時間とコストを大きく削減できます。Monacaでは環境構築を必要とせず、ブラウザのみでの開発が可能となります。アプリごとに環境を用意する必要はありません。そのためMac環境がなくともWindowsPCだけでiOSアプリの開発ができます。

異なる言語を使用することもなく、Web標準技術(JavaScirptとHTML5)だけでiOS、Android向けのモバイルアプリ、Windows、macOS、Linux向けのデスクトップアプリ、そしてブラウザ向けのPWAアプリを開発することができます。
Monaca特有の知識は不要なので簡単に様々なアプリを作成することが可能です。

Monacaの開発画面

上記画像はMonacaの開発画面です。
右側で作成したアプリの動作確認をすることができます。
また、スマートフォンにアプリを入れて認証すると、スマートフォンでの動作確認も可能です。

公式にも開発に関する情報が画像付きで掲載されていますし、Monacaを使用されている方も多いため困ったときにも調べやすいです。

お手軽にアプリ開発ができるMonacaですがランニングコストがかかります。
我々第0ユニットのようにHTML、CSS、javascriptに慣れているメンバーでアプリを開発するのであればコストを掛けてMonacaを選択しアプリを開発するのも良いと思いました。

今回はMonacaについてご紹介しました。
次回の第0ユニットの技術者ブログもお楽しみに!

技術者ブログ-RPAの紹介3

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

今回のテーマ『RPA(Excel操作)について』

前回のブログ「RPA(基本操作)」にて、基本的な操作を紹介しましたので、今回は基本操作に加えてExcel操作をどのように行うのかを実際の画面と動作を合わせて紹介させていただきます。
業務をRPAで自動化するにあたり、ファイルで資料を作成したり、管理しているファイルを更新したりとExcelを扱うことが多くなるため、ご参考にしていただければと思います。

【Excel操作の紹介】

「RPA Express」で行えるExcel操作は下記になります

RPAExpressでのExcelメニュー

・スプレッドシートを開く:指定したExcelファイルを開く
・スプレッドシートを保存:現在開いているExcelファイルを保存
・シートへの切り替え:Excelファイル内の指定したシートを開く
・アクティブセルを設定:指定したセルにフォーカス
・セル値を設定:指定したセルに値を設定
・セル値を取得:指定したセルの内容を取得
・セル値を削除:指定したセルの内容を削除
・行を取得:指定した行にあるセル値をListで取得
・列を取得:指定した列にあるセル値をListで取得
・範囲を取得:指定した範囲にあるセル値をTableで取得
・範囲を設定:セルの範囲を設定

【実際にやってみた】

Excel操作で行えることを利用して簡単なサンプルを作成します。
今回はExcelで管理している「社員一覧情報」を利用して決まったExcelフォーマットに情報を反映するまでをRPAで自動的に行ってみます。
※社員一覧情報と出力フォーマットを用意しておく

準備したファイルが保存されているフォルダ内容
社員一覧情報
出力フォーマット

手順1:社員一覧情報ファイルを起動し、申請書に必要な情報を取得

社員一覧情報が保存されているフォルダから指定のファイルを開く
・画面左側の「スプレッドシートを開く」をマウスで選択し、画面中央付近にドラッグ
・ドラッグした「スプレッドシートを開く」をクリックする。※右側に入力項目が表示される
・「スプレッドシートを開く」設定から開きたいファイルパスの設定を行う
・範囲を取得で氏名・性別・資格1~3を「Recorder Variables」のテーブル型に格納
※テーブル型で格納しておくことで、取得した範囲を行列でデータが格納される

社員情報ファイルを開く
社員情報から一覧表示範囲を指定して値を格納

手順2:出力フォーマットを開き、取得した情報を申請書に設定

・「スプレッドシートを開く」から開きたいファイルパスの設定を行う
・取得した情報の行に対して、列情報をループしながら各設定を行う
 氏名は1列目、性別は2列目、資格は3列目~最後で設定

出力フォーマットを開く
一覧表示範囲の情報を列単位でループしながら、各項目を設定

手順3:申請書情報の氏名をファイル名にして、ファイルを保存

・取得した情報に行に対してループしながらファイルを保存
・新しいファイルとして保存を選択し、氏名をファイル名として保存
※${}を指定することで変数を使用することが可能

取得した社員名毎にファイル名として別ファイルとして保存

上記のレコーディングが完了したところで、実際に動作を確認します。
動作を確認するためには「レコーディングを再生」をクリック。

準備したファイルが保存されているフォルダに社員名毎のファイルが作成されている
社員Aファイルの内容

【まとめ】

基本操作と同様にExcel操作に関しても、出力したい情報等が決まっていれば非常に単純に自動化することが可能であると理解することができました。
定期的に発生する業務などは、ある程度自動化することで作業負荷を軽減させることができそうなので、RPAで行えることを組み合わせて、作業を効率化を目指したいですね。

次回はRPAで利用できる機能を組み合わせて作成した機能を紹介したいと思います。

技術者ブログ – WordPress

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

今回のテーマは「WordPress」についてです。
ダンデライオンズでもこの技術を使ったWEBサイト構築を予定しているためご紹介をしたいと思います。

WordPressとはオープンソースのブログソフトウェアで、
CMS(コンテンツマネジメントシステム)の1つで、無料で使うことができます。

HTMLなどのプログラミング知識がなくても簡単にサイトやブログを構築することができ、世界中のサイトの39%が WordPress を使って作られていると言われています。今ご覧いただいているこのブログもWordPressを使用しています。

WordPressは無料で使うことができるのが人気な理由の1つです。
無料であるため初めてサイトを作成する人も手が出しやすく、利用者の増加に繋がっています。
ただし、作成したWebサイトを公開するためにはサーバーやドメインを用意する必要があり、これに関しては費用が掛かります。

また、たくさんのテンプレートが用意されていることからシンプルな構成のサイトであれば無料テーマでも十分に作成することができます。

無料のテンプレートの一部


その反面、こだわりを持った見栄えのデザインを求める場合は自力でCSSを設定する等のカスタマイズが必要となり、CSSの技術が必要となります。

今時のデザインのものはテンプレートとして用意されているので短時間でカッコイイサイトを作ることができます。

また、豊富なプラグインが用意されており追加することでセキュリティ対策やSNSとの連携、ネットショップの構築なども行うことができます。これまでプログラムで組み込んでいたものも簡単に組み込むことができます。

短時間で公開できるサイト構築ができることから、HTM/CSSを理解している技術者も実際に利用してサイトを構築することが多くなってきています。

案件内容によって、自分たちでHTML/CSSを使って構築するのか、Wordpressを使って構築するのか検討できるとより良いものを作ることができそうですね。

今回はWordPressについて紹介しました。
次回の第0ユニットの技術者ブログもお楽しみに!

Excelのショートカット使ってますか?

こんにちは、ダンデライオンズ第1ユニット所属のべーです

弊社も月日が立つに連れて新卒のメンバーも含めて、社員が増え、にぎやかになってきたと感じる今日この頃です。

そんな折、Excelに不慣れな知り合いにExcelの使い方をレクチャーする機会がありました。
その際、普段当たり前に使っているショートカットが一つ使うたびに感心されてしまい、これはまるで自分が「超できる人」になったようだ!とちょっと調子にのってしまいました。

そんなExcelのショートカット、特に今年新社会人になってExcelを触るようになった人(弊社メンバー含)に伝えれば、役に立つのではないか!

というわけで、今日は私が社会人になってから知って感動したExcelのショートカットを厳選して3つ紹介したいと思います。

前提として

「Ctrl+C」でコピー、「Ctrl+V」で貼り付けなど、Windowsで共通するショートカットは、当たり前に使っているよ!って人向けです。
(そもそもCtrlキーなんて使ってないよ!って人がもしもいたら、「Excel ショートカット」などで調べてみてください)

あと、PCの設定やOSの違いでショートカットが違う場合があると思いますが、ご自身の環境に合わせて読み替えてください。

1. 「Ctrl + Home」でA1セル(一番左上にあるセル)に移動する

お客様に提出するExcelファイルはA1セルにカーソルをあてて保存しておくのが当たり前!
そんな常識も社会人になるまで知りませんでした。

最初はいちいちA1セルまでスクロール・クリックしていましたが、何十もあるエクセルファイルにいちいちそんなことしていられません。

そんなときに便利なのが、「Ctrl + Home」です!

どこのセルを選択していてもA1セル(一番左上にあるセル)に移動します。

シートを切り替えるショートカット「Ctrl + PgDn」と組み合わせて「Ctrl + Home」「Ctrl + PgDn」「Ctrl + Home」「Ctrl + PgDn」…と連打すれば一気に全シートをA1に合わせることも。

2. 「Ctrl + d」で上のセルをコピー

今入力した内容を下のセルにもコピーしたい!って思ったことありませんか?

「Ctrl + d」を使えば、「セルをコピー」→「カーソルを下に移動」→「貼り付け」という3つの動作が「カーソルを下に移動」→「貼り付け」で済みます

いちいち元のセルを選択しなくてもいいのは使ってみると思っている以上に便利ですよ!

複数のセルを選択した場合は、選択した一番上の行が、残りのセルにコピーされます

同じようなショートカットで、左のセルを右にコピーする「Ctrl + r」というショートカットもあります。試してみてください。

3. 「Ctrl + Enter」で選択した複数のセルに一気に入力

「Ctrl + Enter」が活躍するのは離れたセルに同じ内容を入力するときです!

空白の欄すべてに自分の名前を入力したい…そんなことも一度にできちゃいます

…ちょっとびっくりしませんでした?
私は初めて見たとき思わず「おぉー」と声を出してしまいました(笑)

使う機会は他の2つと比べると少ないと思うかもしれませんが、工夫次第で案外使えるショートカットです。頭の片隅に入れておいて損はないと思います。

まとめ

いかがでしたか?

もしひとつでも「知らなかった!」というものがあれば幸いです。

Excelに限らず、アプリケーションのショートカットはたくさんあります。
全てを覚えることは難しいですが、自分の作業が少しでも楽になるように、1つずつ覚えていきましょう。

以上、お読みいただきありがとうございましたm(_ _)m

技術者ブログ – オンプレミスとクラウド

技術者ブログとして日ごろ取り組んでいる学習内容をご紹介します。
今回は、クラウドをテーマにしている第3ユニットです。
クラウドの利点は何か、対となるオンプレミスと比較してみました。

オンプレミス(on-premises)とは

premises(複数形)には、建物や構内などといったの意味があります。
それを由来として、「オンプレミス」という造語で、自社内で各種サーバーや通信回線、そして付随するサービスなどを揃えて、運用する内容を示すようになりました 。
2007年くらいまでは、この「自社運用」の形態以外に自社用のサーバーや通信回線を設置する方法がなく、「オンプレミス」が一般的な方法でした。

クラウド (cloud) とは

一方クラウド(cloud)とは、文字通りの意味では「雲」のことですが、IT分野では「インターネットなどのネットワーク経由で接続できるさまざまなサービス」のことを指しています。
オンプレミスとの比較ではAWSのEC2サービスのように、サーバの貸し出しが注目されることが多いですが、Gmailなどのウェブメールや、Googleカレンダーなどのスケジューラーといった、一般的によく使われているサービスもクラウドの例として挙げられます。

オンプレミスとクラウドの比較

それでは、 オンプレミスとクラウドについてどう違いがあるのか比較してみましょう。
以下の表にまとめてみました。


クラウドのメリット

コストの安さ

オンプレミスに比べて初期費用が安く抑えられ、従量課金制を採択すれば利用分のコストのみで済みます。そのため、企業規模によらず導入を検討することができます。

拡張性の高さ

柔軟にサーバのスペックの変更が可能です。オンプレミスの場合、スペック変更はハードウェア自体を変更する必要があります。

災害復旧や冗長化

障害に対しての復旧が短時間で済み、対策事態も容易に用意することが可能です。

クラウドのデメリット

カスタマイズ性

オンプレミスはすべてを自社で構築するが、クラウドサーバは事業者が提供するサービスに依存するため、カスタマイズできる範囲が限定されます。

接続スピードとセキュリティ

オンプレミスはLAN接続のためスピードは速く、アクセス者の特定も容易です。

流行りのクラウドではありますが、このように向き不向きがあり、どんなシステムでもクラウド化すれば良いというものではありません。特徴を理解することで、より効率的にクラウドを活用できるのではないでしょうか。

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

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