【WordPress】Elementorの使い方(Gridレイアウトの作成)

WEBデザインをテーマにしている第0ユニットです。

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

今回はWordPressの人気プラグイン「Elementor」の使い方をご紹介します。

Elementorプラグインを利用することで、ドラッグ&ドロップ操作で、直感的にウェブページのレイアウトを作成できます。

プログラミングのスキルは不要です。

今回はElementorの基本的な使い方を説明します。

Elementorのインストール&有効化

Elemenetorは全てのWordPressテーマで使用できるというわけではありません。推奨されるテーマを使いましょう。

今回はElementor公式のHelloElementorのテーマを使用しています。

Elementorの起動

固定ページを新規作成し、Elementorを起動します。

Elementorのウィジェットについて

Elementorが提供する機能は「ウィジェット」と呼ばれています。左側にウィジェットのリストが並んでいることが分かります。

有料版であればより多くのウィジェットを利用可能です。2024年9月時点では有料版には4つのプランがあり、$59~$399/1年でアップグレードが可能です。

レイアウトの作成

先ずは、ウィジェットの「レイアウト」を利用しウェブページの構造を決めます。

ElementorではウェブページのレイアウトのタイプはFlexboxとGridの2種類があります。

少し前のバージョンでは、Elementorのレイアウトは「セクション」というもので構成されていましたが、バージョンアップを経て「コンテナ」という考え方が導入されたことにより「セクション」が廃止されています。

今回はGridでレイアウトを作成します。

デフォルトでは横3列、縦2行のGridレイアウトが作成されます。

詳細な設定は、画面左部の「Gridを編集」にて可能です。

Gridに要素を配置

基本のウィジェットから要素を配置することで、簡単にウェブページが作成できます。

マウス操作だけで、簡単にウェブページで多用するコンテンツが配置できます。

今後は細かい設定方法についても見ていきたいと思います。

前回ご紹介した「LOCAL」の環境で簡単に試作できるので是非試してください。

次回の技術者ブログもお楽しみに。

社員紹介(5-3)

閲覧いただきありがとうございます。
今回の社員紹介記事を担当します「みち」です。3度目の登場です。

前回の投稿(コチラ)が2020年の10月ですので、約3年振りの投稿となります。月日が経つのは早いものです。

現在の業務

2020年6月から現在のお客様の下で業務をしています。

システムの保守を中心として担当していましたが、現在は開発案件に参画しています。

とある一日のスケジュールはこんな感じです。

09:00 業務開始
09:15 所属会社内MT
09:30 客先チーム全体MT
12:00 お昼休み
13:00 業務再開
13:05 開発PJMT(オンサイト)
14:00 開発PJMT(オフショア)
18:00 業務終了

現在は週4在宅、週1出社という感じです。最近は開発も佳境を迎えており、打合せが多いですね。打合せの合間に、オフショアからの成果物を受入してテストをしたり、オンサイト側のバッチ機能の開発を行ったりしています。体を動かしたいときには、お昼休みの間にジムに行きます。

引っ越しをしました

今年の7月に引っ越しをしました。家賃、エリア、建物自体の条件・・・などなど、お部屋選びには様々なポイントがあると思いますが、皆さんは何を優先されますか?

私の決め手は上記のポイント以外ですと、”スーパーが近くにあること”でした。昔の自分だったら、そこまで意識しないポイントだったと思います。きっとコロナの影響で自炊の機会が増えたことが要因ですね。

近隣は閑静な住宅街といった感じですが、近くに学校があります。学生たちが部活や体育の授業に勤しんでいる際の活発な掛け声を聞くと、青春だなぁと暖かい気持ちになります。

バルコニーから見える学校

伊勢に行ってきました

久しぶりに伊勢神宮に参拝をしに行ってきました。

天候にも恵まれ、お参りをすることでとても清々しい気持ちになりました。

手水や参拝の作法はいつも忘れてしまうので、他の参拝者の見様見真似をしました。

内宮の神楽殿で厄除けの御守りを購入しました。来年は前厄です。

その後、おかげ横丁で食べ歩きをし、楽しいひと時を過ごしました。

おかげ横丁の対岸から撮影

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

社内勉強会:要件定義について

前回の勉強会の様子 – フェイク画像の作り方

今回の勉強会記事を担当する第0ユニットの「みち」です。

我々システムエンジニアの仕事の一つである「要件定義」をテーマとして勉強会が開催されました。今回はその模様についてご紹介します。

勉強会の流れは、以下の通りです。

①「要件定義」とはどういうものか、という基礎知識を深めるための講義を行いました。

②ユーザ役を据え、ユーザ役から要求を聞き出し「要件定義」を実践しました。

③議事録を作成して内容の振り返りを行いました。

講義の様子

講義のあとはいよいよ実践です!

会社代表髙橋をユーザ役に据え、当社が開発予定のアプリについて要求を聞き出し、その内容を議事録に記載していきます!

ユーザから要求をヒアリング

勉強会に参加したメンバーが若手層とベテラン層にバランスよく分かれていたため、ヤングチーム、アダルトチームで分けて、それぞれで議事録を作成し発表することになりました!アダルトチーム側に属していた私は、恥ずかしいものは出せないなとプレッシャーを感じていました><。

アダルトチーム議事録作成の様子

最後に双方の議事録を発表し、振り返りを行いました!

振り返りの様子

ユーザの要求を正しく把握できているか、必要な機能・性能について認識祖語は無いか、ユーザの合意を得られる内容になっているかを確認しました。

議事録を作成することで文書化するスキルの重要性についても改めて理解でき、とても有意義な勉強会となりました!

それでは、次回の勉強会の記事をお楽しみに!

【WordPress】「Astra」のスターターテンプレート利用によるウェブサイト作成

WEBデザインをテーマにしている第0ユニットです。

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

今回はWordPressの人気テーマ「Astra」のスターターテンプレートをご紹介します。

「Astra」のスターターテンプレートの利用により、手早く綺麗なデザインのウェブサイトを簡単に作成することができます。

Astraのインストール

①Astraのインストールと有効化

②スターターテンプレートのインストール

③ページビルダーの選択

※今回は「Elementor」を選択しています。「Elementor」はWordPressのプラグインの一つで、直感的な操作でウェブページの作成が可能となるエディターです。「Elementor」についても今後ブログの中でご紹介しようと思っています。

以上の①~③で準備は完了です。

ウェブサイトの作成

試しにウェブサイトを一つ作成してみます。

「Business」、「E-Commerce」、「Blog」等、カテゴリごとにテンプレートの一覧が表示されており、その中から選択します。

テンプレート右上に黄色く「PREMIUM」となっているものは有料のテンプレートです。

今回は「E-Commerce」にカテゴリーされているテンプレートを使ってウェブサイトを作成します。

①ロゴの設定

②色、フォントの設定

上記2つの設定後、以下画面が表示されるので、「Submit & Build My Website」で完了です。

作成されたECサイト

テーマのインストールからサイトの作成まで所要時間10分ほどで作成できました。

もちろんここからカスタマイズも可能です。

前回ご紹介した「LOCAL」の環境で簡単に試作できるので是非試してください。

次回の技術者ブログもお楽しみに。

ユニット活動報告会!

今年もユニット活動報告会が開催されました。

昨年と同様に各ユニット毎に発表テーマが設けられています。

発表内容からいくつか抜粋させていただきます。

第0ユニット(テーマ:Webデザイン)

発表内容


・レスポンシブデザインについてのポイントを紹介
・SDGsサイトの製作
・ショッピングサイトの製作
 等々

第1ユニット(テーマ:AI)

発表内容


・HelloWorld(※1)アプリ版のCPU対戦製作の活動成果
・UNITYアプリとWebアプリの比較
・AIのトレンドについて
 等々

※1:当社が製作した「カードゲーム」で、楽しくプログラミングを学ぶことができます。

詳細はこちら

第2ユニット(テーマ:ローコード、ノーコード)

発表内容


・OutSystems(ローコードツール)の説明
・APEXからOutSystemsの移管について
・OutSystemsで製作した勤怠管理システムの紹介
 等々

第3ユニット(テーマ:クラウド・オンプレミス)

発表内容


・ランサムウェアについて
・社内インフラ管理(サーバ、ネットワーク)の実績について
・UTM(FortiGate)によるVPN接続について
 等々

皆さま1年間の活動報告お疲れ様でした!

一息つきたいところですが、次の1年は既に始まっています。

来年も更なる成長を目指して頑張っていきましょう。

それではまた1年後に!

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

毎年11月、当社では各ユニット毎に年間の活動内容の報告を実施します。

各ユニット毎に評価項目を設定し報告を行います。

報告に対して、各ユニットメンバー&代表により採点がされます。

報告会の内容は、後日お届けさせていただきます。

昨年の報告会の様子

【WordPress】ローカル環境構築ツール「LOCAL」 のインストール方法と使い方

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

当社ブログは、WordPressにて構築されていますが、WordPressサイトをローカル環境で構築可能な便利ツール「LOCAL」をご紹介します。

以下のようなお悩みを持つ方は一度利用してみてはいかがでしょうか?

・WordPressでのサイト構築に興味があるが、レンタルサーバ等の費用が掛かるため、まずは無料で体験してみたい。

・既にWordPressで構築されたサイトを運営中だが、テーマやプラグイン等の変更をローカル環境でテストしてみたい。

今回は、LOCALのインストールからテストサイトの構築までご紹介します。

LOCALのダウンロード

LOCALのダウンロードサイトはこちらから。

DOWNLOADをクリックします。

プラットフォームをWindows、Mac、Linuxから選択します。他の情報はe-mailの部分のみでダウンロード可能です。

ダウンロードされたファイルを実行し、インストールします。

LOCALによるサイト構築手順

試しにサイトを一つ作成してみます。

Create a new site をクリックします。

サイト名称を入力します。

※「ADVANCED OPTION」を選択すると、ドメイン名等の指定が可能となります。

環境設定です。今回はPreferred(オススメ)を選択していますが、Customを選択することで、PHP、Webサーバ(nginx、Apache)、MySQLについて、指定のバージョンを選択することができます。

WordPress管理画面へのログインユーザおよびパスワードを設定します。
※e-mailはデフォルトで問題ありません。

「Add Site」をクリックして、あっという間にサイトの構築完了です。

管理画面へログイン

「WP Admin」をクリックします。

先ほど設定したユーザ/パスワードでログイン可能です。

無事、ダッシュボードが表示されました!

驚くほど簡単にローカル環境にてWordPressの環境を構築することが出来ました。

興味のある方は是非試してみてください。

次回の技術者ブログもお楽しみに。

【名古屋市研修】異文化コミュニケーション

今回、ダンデライオンズは名古屋市の「中小企業外国人材雇用支援事業」運営事務局よりご支援いただき、日本人社員向けの研修「異文化コミュニケーション」を受講させていただきました。

前回の「伝わる日本語」研修の様子はこちらから。

講師は関西大学国際部教授の池田様です。

今回も研修の内容の一部をご紹介させていただきます。

表層文化・深層文化について

文化的距離についてご説明をいただきました。

文化は「見えている」表層文化と「見えていない」深層文化に分類されます。

表層文化例:衣服、食べ物、建築等
深層文化例:価値観、常識、行動規範等

目に見えていない部分(深層部分)こそ重要視するべきとのことです。

個人の深層部分にある様々な思考を理解する上で、ワークショップが実施されました。2つの選択肢から自分が取る行動(思考)を直感的に答えるというものです。

例題)何か問題が生じたとき、どちらが自分の取りやすい行動でしょうか?
A.解決するには私は何にができるだろう
B.これを解決するために手伝ってくれる人は誰だろう

こちらは個人主義・集団主義どちらの思考に寄っているかを判定する質問でした。参加者の回答は割れており、深層の部分での多様性を改めて認識することができました。

その他、「時間に関する価値観」や「権威に関する捉え方・人間関係」等、深層文化の一部についてご紹介いただきました。

外国人社員から見た日本企業文化について

日本企業の文化といえる「上座・下座」(席次の規範)について、外国人の方から質問が来た場合に、どのように説明するかというワークショップがありました。

説明の一例)
「作業を一番しなくて良い場所、目上の方が一番快適に過ごせる場所」を尊重の証(思いやりの心)として提供している。

上記は一例ですが、大切なのは相手が腑に落ちる価値観(モノサシ)を探すことです。

文化を裏付ける深層の「行動」や「慣習」を分解して説明すること、また互いの価値観の異なりに耳を傾けることが重要となります。

異文化感受性発達モデルについて

アメリカのコミュニケーション学者であるミルトン・ベネット氏の「異文化感受性発達モデル」についてご紹介いただきました。

人の異文化に対する感受性の高まりを6段階で示したモデルとなります。

第1段階:違いの「否定」

第2段階:違いからの「防衛」

第3段階:違いの「最小化」

第4段階:違いの「受容」

第5段階:違いへの「適応」

第6段階:違いとの「統合」

最低限目指すレベルは「受容」、異文化間のゴールは「適応」レベルとのことです。

他者も自分も同様に1つのモノサシとし、他者のモノサシも自分のモノサシとして使えることが理想とのことですが、まだまだその段階に達するのは難しそうです。

研修を受講して

当研修は異文化理解を深めるとても良い機会となりました。

研修で学んだことを振り返り、出来るところから少しずつ行動を起こしていきたいと思います。

当研修のご支援をいただきありがとうございました。

名古屋市「中小企業外国人材雇用支援事業」運営事務局

【名古屋市研修】伝わる日本語

今回、ダンデライオンズは名古屋市の「中小企業外国人材雇用支援事業」運営事務局よりご支援いただき、日本人社員向けの研修「伝わる日本語」を受講させていただきました。

講師は内定ブリッジ株式会社の淺海様です。

研修の内容を当社ブログに掲載することについて、事務局のご担当者様並びに淺海様も快く受け入れていただきました。感謝いたします。

当記事では、研修の一部についてご紹介をさせていただきます。

外国人材の受入ニーズについて

全国の「中小企業」を対象とした、外国人材の受入状況と今後のニーズについて、直近数年の推移をご紹介いただきました。

引用:日本・東京商工会議所 「多様な人材の活躍に関する調査」調査結果
https://www.jcci.or.jp/i/20210930_tayou.pdf

外国人材の受入は年々増加傾向にありますが、その一方で今後の受入を検討している企業の割合は減少傾向にあるようです。

これは外国人を上手に活かし切れていない企業が多く存在するということです。

事実、多様な人材を受け入れる一方で、何も取り組みが出来ていない企業は「生産性が下がる」というデータの存在についてもお話がありました。

多様な人材と言えば聞こえは良いですが、ただ採用するだけではいけないということです。

人材を受入れてからの、企業内全員の取り組みが重要ということを改めて理解することができました。

外国人採用後の活躍に向けて

外国人採用後の活躍に向けて、企業が直面するであろう課題への取り組みに際して、特に押さえておくべき12のポイントについて、経済産業省他3省合同のハンドブックをご紹介いただきました。

引用:文部科学省 厚生労働省 経済産業省 外国人留学生の就職や採用後の活躍に向けたプロジェクトチーム 外国人留学生の採用や入社後の活躍に向けたハンドブック~実践企業に学ぶ12の秘訣~ https://www.meti.go.jp/shingikai/economy/ryugakusei_katsuyaku_pt/pdf/20200228_01.pdf

各企業毎に抱える課題は異なるので、全てのポイントをチェックする必要はないとのことです。取り組むべきポイントを定めて実践することが重要となります。

当研修は「7.日本人社員教育」にあたりますが、淺海様のお話では、「2.社内共有」が特に難易度が高いとのことでした。

ハンドブックについては管理者層は是非眺めておいて欲しいとのことです。

オフィスでの日本語コミュニケーションのギャップについて

動画教材を元に、オフィスでの日本人と外国人のミスコミュニケーションの事例をご紹介いただきました。

動画教材:経済産業省のYouTubeチャンネル(metichannel

ミスコミュニケーションの事例を提示していただき、「何が悪かったのか」「どのように改善するべきなのか」についてグループワークを実施しました。

日本語はハイコンテクスト文化の代表例と言われています。日本語は話されている言葉(書かれている言葉)そのものに情報が少なく、その中で予想して会話を成立させる必要があります。

ミスコミュニケーションを防ぐためには、日本人・外国人の双方の立場で考えた上での歩み寄りが重要です。

日本人側としては日本語を調整して「伝わる日本語」にする必要があります。

「伝わる日本語」に近づくためのポイントをいくつかご教示いただきました。

・「大丈夫です」や「できたら」のような二つの意味を持つダブルワードは使用を控える
・初級日本語で学ぶ活用形(ます形、て形、ない形、じしょ形、た形)を意識して会話に組み入れる 
・主語や主体が無くても日本語は機能するが、あえて省略せずに言葉に組み入れることを意識する

研修を受講して

日本で働く外国人労働者の数は年々増加傾向にあります。

ダンデライオンズでは採用にあたり国籍は問われず、外国人の方も様々な現場で活躍しています。

当研修は、社員一人一人がどういう企業組織を作りたいかを考える良いきっかけになったと思います。

当研修のご支援をいただきありがとうございました。

名古屋市「中小企業外国人材雇用支援事業」運営事務局

内定ブリッジ株式会社

ユニット活動報告会!

今年もユニット活動報告会が開催されました。

昨年は新型コロナウイルス感染拡大の影響で、発表者を含むほとんどのメンバーがリモート形式による報告会でしたが、緊急事態宣言が解除されたことを受けて、今年は一堂に会しての報告会となりました。

昨年と同様に各ユニット毎に発表テーマが設けられています。

発表内容からいくつか抜粋させていただきます。

第0ユニット(テーマ:Webデザイン)

WordPressについて

言わずと知れた世界で最も人気のあるCMSです。

2021年現在では、CMS市場(WordPressに限らず何かしらのCMSを使用しているウェブサイト)のうち約65%がWordPressを使用していると言われています。

WordPressが持つ特徴について説明がありました。

Monacaについて

アシアル株式会社様が提供しているスマートフォンアプリ向けのクラウド型開発プラットフォームです。

開発環境(エディタやビルド等)はすべてクラウド上に用意されており、開発環境の構築が不要です。Webブラウザ上でHTML5+JavaScriptのWeb技術を用いて開発します。

WordPress同様に、Monacaが持つ特徴について触れられていました。

今期の成果について

WordPressを用いて構築した簡易的なECサイトについて紹介がありました。ECサイト内では弊社の『ハローワールド』を販売するページが作成されていました。

またMonacaを用いて『Todo管理アプリ』の開発実績の紹介がありました。

第1ユニット(テーマ:AI)

機械学習で必要なデータについて

「Google Dataset Search」や「AWSパブリックデータセット」等、機械学習に利用可能なデータセットがまとめられているサービスに関する紹介がありました。

AIの高まりによって、上記のようなオープンデータが容易に活用可能となっています。

構築したいAIに合わせて、必要なデータセットを選択することが重要との説明がありました。

Django(ジャンゴ)について

Pythonで実装されたWebアプリケーションフレームワーク「Django」の紹介がありました。

Djangoは、「Instagram」や「Youtube」等、有名なWebアプリケーションの開発に採用されています。

Djangoの強み/弱みや、使用感に関する説明がありました。

今期の成果について

Raspberry Piを利用して構築した「監視システム」の紹介がありました。

監視システムが持つ以下の機能についての説明がありました。

①動体を検知し写真撮影する。
②気温、気圧、湿度、照度をセンサーで感知し定期的に値を取得する。
③①と②で収集した写真画像とデータをWebページに表示する。

第2ユニット(テーマ:コードレス、ローコード)

今後の市場について(ローコード/RPA)

ローコードとRPAの市場規模に関するここ数年の推移について説明がありました。

どちらについても、今後も成長することが予想されており、我々技術を扱う側の立場としてもローコード/RPAをキーワードとしたスキルアップを継続することが必要と思います。

社内システムへの展望について

OutSystemsやRPAを利用した社内向けシステムの構築についての展望について、説明がありました。

社内システムの構築を通じて、ローコード/RPAに関する技術の習熟が期待されます。

今期の成果について

OracleAPEXを利用した社内システムの機能追加に関する説明がありました。社内システムがより便利になるのは嬉しいですね。

また、実業務においてはOutSystemsに関する成果の説明がありました。OutSystemsの開発で培った知見を活かし、今期は開発支援や提案支援、OutSystemsの基盤構築といった案件への参画を経験し、メンバーの更なる成長が感じられる内容となっていました。

第3ユニット(テーマ:クラウド・オンプレミス)

クラウドの市場規模/トレンドについて

クラウドサービスの市場規模の推移について説明がありました。
今後もクラウド市場規模は成長をし続けると予想されています。

また、主要クラウド3社(AWS/Azure/GCP)について、システム分野別の利用状況に関する説明もありました。

クラウド運用課題について

PaaS/IaaS の運用・保守に関しては、約3分の2の企業が各システムの運用・保守業務の全部もしくは一部を外注しているという状況を説明しつつ、2021年9月2日のAWS障害についても触れていました。

一方で、PaaS/IaaS ついて、自社単独で運用する際の課題についても説明がありました。

今期の成果について

社内のサーバ管理業務で使用している、DDNSのサービス「no-ip」やダイナミックドメインサービスにIPアドレスを自動登録するソフト「DICE」に関する説明がありました。社内サーバへの接続については、「ポートフォワーディング」機能を用いてセキュリティ対策を講じていることについても学ぶことができました。

また、AWS(EC2)上に「Samba」を利用してWindowsからアクセスできるストレージを構築した実績についても説明がありました。

さらに、今年実施してきたサーバ管理作業について具体的な作業内容や、作業に対してかかった時間の説明がありました。

作業の内訳を整理することで、定常/非定常作業それぞれが抱える課題が見えてくると思います。来年に向けた対策・改善が講じられるため、このような情報の整理はとても大事だと思いました。

発表を受けて、各ユニット毎で評価(採点)の相談をしている様子です。

来年の発表では各ユニットがどのような成長を遂げているのか、またどのような成果物が発表されるのか、今から楽しみですね。

それではまた1年後に!