Group, Frame, Sectionの挙動の違いを学ぼう この項では、紛らわしいGroup, Frame, Sectionの違いについて整理していきましょう。まずはGroupの挙動を確認します。Groupは先に述べたとおり、グルーピングした要素の一括処理を担っています。 Groupの機能と役割 先程、Groupには２つの機能があるとご紹介しました。その１つ目は子要素のプロパティ一括変更です。以下の動画では、Groupレイヤーを選択することで、子要素に対して一括してプロパティ変更を行っています。 Groupで子要素のプロパティを一括で変更している様子 2つ目の機能はGroupレイヤー自身へのプロパティ適用による子要素への間接的なデザイン適用です。GroupレイヤーのLayerプロパティを変更して透明度を変更したり、Effectsプロパティを変更することで子要素のレイヤーに一括でドロップ

Component properties（コンポーネントプロパティ）を学ぼう 近年人気のデザインツールである『Figma』の便利な情報をお伝えする連載の3本目(最終回)です。1本目の記事ではコンポーネントの基礎について、2本目の記事ではVariants（バリアント）についてご紹介しました。今回の記事では、Figmaのコンポーネント機能の中でも、よりパワフルでより複雑なComponent properties（コンポーネントプロパティ）についてご紹介します。 Component propertiesの概要 Component propertiesは簡単に言うと、「コンポーネントで変更可能な部分をより明示的に制御する仕組み」であり、コンポーネントが表現したいデザインの状態を制御するための、コンポーネントがもつプロパティです。 Component propertiesを使えば、コンポーネントのレ

Variants（バリアント）について学ぼう 近年人気のデザインツールである『Figma』の便利な情報をお伝えする連載の2本目です。1本目の記事では、Figmaの重要な機能の一つであるコンポーネントの基礎についてご紹介しました。 それに続く今回の記事では、Figmaのコンポーネントをグループ化して管理する「Variants（バリアント）」という仕組みについて解説します。 Variantsの概要 コンポーネントを作成していると、よく似ているものの、細部が異なるいくつかのデザインバリエーションが必要になることがあります。Figmaのコンポーネントには、このような類似のデザインバリエーションをグループ化して管理する「Variants（バリアント）」という仕組みがあります。 例えば、ボタンUIを表すコンポーネント ❖ button は、表現したいよくあるパターンとして「通常時」「マウスオーバー時」

このシリーズについて みなさんこんにちは。さくらインターネットでフロントエンド領域を担当している山田です。この連載では、フロントエンド開発を行っているメンバーが、開発に役立つ情報を半分趣味で不定期掲載していく予定です。 自分からは、近年人気のデザインツールである『Figma』の便利な情報をお伝えしたいと思います。デザイナーの方はもちろん、エンジニアの方にも興味を持っていただける機能がたくさん詰まったFigmaを紹介していきます。 Figmaのご紹介 チーム開発に適したデザインツール Figmaのメインの機能の一つはもちろんデザイン制作です。Figmaを使うことで、これまでのデザインツールでは難しかったWebアプリケーションやモバイルアプリケーションといった、よりダイナミックに画面が変化していくタイプのデザインを表現しやすくなりました。 中でも、複数人で同じデザインファイルを閲覧・編集可能な

VPSという名前のサーバーがあることをご存知の方は多いと思います。 しかし、 「レンタルサーバーのようだけど何やら難しい知識が必要で難しそうだ」 「エンジニアの人たちが使ってるサーバーでしょ」 と感じて使いこなせる自信がない、手を出していない、という方も多いと思います。 レンタルサーバーを契約してWebサイトを公開したことがある方ならば、サーバーというものがどういう役割を演じるのかをご存知だと思います。 そこから一歩すすんでVPSを操れるようになれば、もっと自由に自分がやりたいことが出来るようになります。例えば、自分が使いたいツールをサーバーにインストールしたり、自分に都合のよいプログラミング言語をインストールできるようになります。 レンタルサーバーでは.htaccessに書ける設定が制限されていたり、作成できるデータベースの数が制限されていたりすることがありますが、VPSではそんな制限は

GitHubが2019年11月、新機能「GitHub Actions」を正式に公開した。GitHub上のリポジトリやイシューに対するさまざまな操作をトリガーとしてあらかじめ定義しておいた処理を実行できる機能で、今まで外部サービスとの連携が必要だった自動テストや自動ビルドなどがGitHubだけで実現できるようになる。今回はこのGitHub Actionsについて、機能の概要や基本的な使い方などを紹介する。 GitHubだけでCI/CD的な機能を実現できる「GitHub Actions」 昨今では、ソフトウェア開発におけるさまざまな工程を自動化するような技術の開発や普及が進んでいる。その1つに、CI（Continuous Integration、継続的インテグレーション）やCD（Continuous Delivery、継続的デリバリー）と呼ばれるものがある。CIはソフトウェアのビルドやテストを

たとえば、かつてiptablesで設定していたIPv4に関連するパケットフィルタリング設定は、nftablesにおいては「ip」というアドレスファミリに紐付けたテーブルを作成することで設定できる。同様に、ip6tablesやarptables、ebtablesで設定していたものはそれぞれ「ip6」や「arp」、「bridge」というアドレスファミリに紐付けたテーブルで設定する。 「inet」「および「netdev」アドレスファミリはnftablesで新たに導入されたもので、まず「inet」はIPv4およびIPv6の両方を対象にした設定を行えるアドレスファミリだ。従来IPv4とIPv6の両方にまたがったフィルタリングルールを設定したい場合はiptablesとip6tablesの両方で同じようなルールを追加する必要があったが、nftablesではinetアドレスファミリで指定することで単一の設

CentOS7にデフォルトでインストールされているMariaDBを削除します。 # yum remove -y mariadb-libs.x86_64 # rm -rf /var/lib/mysql OSを最新状態にアップデートします。 # yum -y update # shutdown -r now DBサーバー(MySQL8)をインストールします。 # rpm -ivh https://dev.mysql.com/get/mysql80-community-release-el7-1.noarch.rpm # yum -y install mysql-community-server mysql-community-devel Webサーバー・PHP等、Zabbixを動作させるために必要なプログラムをインストールします。 # rpm -Uvh http://rpms.famillec

昨今ではWebサイトやWebアプリケーションに対し「適切にページが表示されるか」だけでなく、ロード時間の早さやアクセシビリティといった使い勝手の良さも求められるようになっている。これらは利用者の満足度向上だけでなくGoogle検索の表示結果にも影響するため、できる限り対応しておきたい。そこで今回は、Googleが提供するWebサイト/Webアプリのパフォーマンスやアクセシビリティ診断ツール「Lighthouse」を紹介する。 さまざまな指標による診断を手軽に実行可能できるツール「Lighthouse」 WebサイトやWebアプリケーションを構築する際には、かつてはどんなWebブラウザでも同じように表示され同じように動作することや、検索エンジンによって高く評価されるようなマークアップを行うことが求められていた。これらは現在でももちろん重要ではあるのだが、昨今ではそれに加えて使い勝手の良さも求

Prometheusでは、Prometheus Serverが監視対象にアクセスしてデータを収集するアーキテクチャを採用している。このデータ収集のためのアクセス先（エンドポイント）は「exporter」と呼ばれており、さまざまなソフトウェアやハードウェア向けのものが提供されている。今回はこのexporterについて、独自のデータ取得方法なども含めて紹介する。 公式exporterとサードパーティによるexporter Prometheusのアーキテクチャは前々回の記事で詳しく紹介しているが、Prometheus Serverが監視対象にアクセスしてデータを収集するような構成（Pull型アーキテクチャ）となっている（図1）。このようなアーキテクチャにおいては、監視対象ごとにPrometheus Serverにデータを渡すためのexporterを用意する必要がある。 図1 Prometheus

Prometheusには簡易的なグラフ作成機能が用意されているが、これには必要最低限の機能しか実装されていない。そこでおすすめしたいのが監視用コンソールを提供するソフトウェア「Grafana」だ。以下ではPrometheusとGrafanaを組み合わせて利用する流れを紹介する。 多機能な監視画面を作成できるGrafanaとの連携 Prometheus Serverには、取得したデータをグラフ化して表示する機能が用意されている。クエリ機能や関数を駆使することでさまざまなデータを表示できるものの、この機能では基本的には折れ線グラフでの表示のみしか行えない。また、複数のグラフを同時に表示することはできるが、異なるデータを1つのグラフにまとめたり、グラフの体裁を調整する機能についてはあまり十分ではなく、一覧性や見やすさにはやや欠ける。そこでPrometheusと併用したいのが、高度なグラフ表示を実

ここで「ゾーン」はリクエスト中で検査対象となった部分を示しており、「ARGS」ならURLに与えられた引数（GETリクエストの引数）を示している（詳しいドキュメント）。また、この例ではidが1000、cscore0がSQL、score0が8となっていることから、IDが「1000」という検出ルールによって「SQL」というスコアが8に設定され、それによってブロックが行われていることが分かる。 NAXSIに対しWAF Testing Frameworkによるテストを実行する さて、続いてはデフォルト設定のNAXSIに対しWAF Testing Frameworkによるテストを実行してみよう。手順としてはnginx＋ModSecuriy構成の場合とほぼ同様で、nginx.confにリバースプロクシ設定（「proxy_pass http://localhost:8080/;」）を追加してnginx経由

オープンソースのWAF WAFとして利用できるソフトウェアは多数存在しており、その多くはセキュリティ企業などが提供する商用製品/商用サービスとなっている。しかし、数は少ないがオープンソースのWAFも存在する。オープンソースのWAFとしてよく知られているのが次の5つだ。 ModSecurityはApache HTTP ServerやNginx、Microsoft IISのモジュールとして提供されているものだ。このモジュールを組み込むことで、これらWebサーバーをWAFとして利用できるようになる（図1）。 図1 ModSecurityのWebサイト 活発な開発が続けられており、採用実績も多い。DebianやUbuntu、Red Hat Enterprise Linux（RHEL）およびCentOSといったその互換OSなどでは標準でパッケージが提供されており、導入も容易だ。検出用のルールセットは

商品の登録・更新方法 商品を登録・更新する場合は、管理画面メニューの「商品」から「カタログ」を選びます。 既に登録済みの商品が一覧に表示されるので、編集する際は行もしくは右端の「編集」をクリックします。 新規作成する場合は右上にある「新規商品の追加」ボタンをクリックしてください。 商品の登録・編集画面は基本的に同じ画面構成になっています。 赤い※印がついている必須項目を埋めていけば、商品を登録・編集できるようになっています。 Magentoで商品を登録する際のポイント Magento1系では商品を登録する前にどの商品タイプ（種別）を作成するのかを選ぶステップが商品作成時の最初の画面として用意されていました。 このステップはMagento2では廃止され、商品タイプを選択しなくても商品を登録することができるようになりました。 反面、「あれ、このタイプの商品を作るときはどうすればいいんだっけ？」

たとえば次の例は、メッセージが「[UFW」という文字列を含むという意味のセレクタとなる。 :msg,contains,"[UFW" if～then式を使った表記 if～then式を使った表記では、次のような形でフィルタとアクションを記述する。 if ＜式＞ then ＜アクション＞ 式部分には「==」や「!=」、「<=」、「>=」などの比較演算子、「+」や「-」、「*」、「/」、「%」などの四則演算子を行う演算子、文字列の結合を行う「&」演算子、「contains」、「startwith」、複数の式を結合する「and」や「or」、否定演算子の「!」といった演算子を利用して条件式を記述できる。 たとえば、Facilityが「kern」であるという条件は次のように記述できる。 if $syslogfacility-text == 'kern' then ＜アクション＞ ここで、プロパティは「$

多くのLinuxディストリビューションで採用されているsyslogサービス「rsyslog」は現在でも活発に開発が進められており、ネットワーク経由でのログ転送だけでなくログの整形や柔軟な条件分岐、さまざまなデータベースへのログ出力サポートといったさまざまな機能が追加されている。本記事ではまず入門編として、このrsyslogの基本的な機能や設定方法について紹介する。 クラウド環境ではログ収集手法の検討が必須 昨今ではサービスのインフラとしてクラウドサービスやコンテナを利用するケースが増えている。こういったクラウドサービスでは、インスタンスを削除すると、そのインスタンスに割り当てられていたストレージは消滅してしまうことが多い。一部のクラウドサービスではストレージを削除せずに残すことも可能だが、その場合別途コストがかかるのが一般的だ。Dockerなどのコンテナでも同様にコンテナの削除後はそのコン

特定のサーバーに対して多く接続を振り分けたい場合、serverキーワードの「weight」オプションで振り分けを行う際の重み付けを指定できる。次の例では「centos01」の重みを1、「centos02」の重みを2に設定している。 frontend web_proxy default_backend web_servers bind *:80 backend web_servers server web01 centos01:80 weight 1 server web02 centos02:80 weight 2 roundrobinアルゴリズムの場合、指定した重みに比例してそのサーバーに振り分けられる接続数が増加する。この例の場合、centos02というサーバーにはcentos01の2倍の数の接続が割り振られるようになる。 サーバーの監視 HAProxyのデフォルト設定では、バックエン