中野ピク氏の絵のブログ

絵を描いたり、絵についての文を書いたりします。

アイリスオーヤマのIRR-2219Cのリモコンが故障してしまったので汎用リモコンを買った

はじめに

アイリスオーヤマのエアコン「IRR-2219C」のリモコンの停止ボタンだけ故障してしまったので、リモコンを買おうと思いましたが、純正品は届くまでに1週間ぐらいかかりそうだったので、amazonで汎用リモコンを買うことにしました。

どれにするか

汎用リモコンがアイリスオーヤマの「IRR-2219C」に対応しているかどうかわからないので、口コミを見たりして以下の商品に決めました。

UNIVERSAL A/C REMOTE K-1028E CHUNGHOP®︎

Amazon.co.jp: BornFeel エアコンリモコン 汎用 クーラーリモコン エアコン用 各社共通 1000種対応 ユニバーサルリモコン 大昔の機種も対応 K-1028E 万能 ライト機能付き 自動検索機能搭載: 大型家電

説明書について

私は日本語の説明書が付いていなくて、英語の説明書だけだったのですが、「汎用のエアコンリモコン CHUNGHOP Universal A/C Remote:らっぱ王子」で設定方法が紹介されていました。

設定してみる

この汎用リモコンに設定できるコードというのが、1000種類ぐらいあるようです。

汎用のエアコンリモコン CHUNGHOP Universal A/C Remote:らっぱ王子」の通り自動設定してみると、適合するコードが見つかったときに鳴るという「ピッ」という音が何回も鳴りました。

アイリスオーヤマの「IRR-2219C」には複数のコードが対応している様子です。

とりあえずそのうちのひとつ「055」を設定してみたら、電源のON/OFFと、温度設定はできることが確認できました。

設定方法を改めてまとめておく

設定手順を詳細に書くと

  1. エアコン本体のコンセントが挿さっていることを確認する。(エアコンの電源は稼働中でも停止中でも良い)
  2. Setボタンを6秒間押すとリモコンが自動設定モードになる。
  3. もう一度Setボタンを押すと、液晶に表示されているコード番号が000から自動でカウントアップしていき、適合するコードのときに「ピッ」という音が鳴る。
  4. Okボタンを押すとカウントが止まる。
  5. Okを押す頃にはコード番号が行きすぎているので、TEMPボタンでコードの数字を戻していくと、適合するコードのときに「ピッ」という音が鳴る。
  6. Okボタンを押して設定完了。

シンプルで実用的!BEMとSCSSで作って学ぶ!とても易しいCSS設計チュートリアル

はじめに

第1章 準備をしよう

第2章 とても易しいCSS設計の「特に重要なポイント」を学ぼう

第3章 モジュールの作成を通して「覚えて役立つポイント」を学ぼう

第4章 モジュールを組み合わせてページを作ろう

  • 第4章の概要
  • ブログサービストップページを作ろう(準備中)

Bootstrapのモジュールを列挙してみる | 中野ピク氏流CSS設計の話

はじめに

CSSのクラス命名する参考にBootstrapで定義されているクラス名を列挙していきます。

全て列挙するというよりは自身が気になるものを適当に自分のためにまとめていくだけです。

今後のCSS設計とクラス命名に役立てたいと思います。

主にBootstrap4.5のクラス名などです。

Bootstrapは(こちら)はじめに - Bootstrap 4.5 - 日本語リファレンス

Layout

Breakpoints

// Small devices (landscape phones, 576px and up) @media (min-width: 576px) { ... }

// Medium devices (tablets, 768px and up) @media (min-width: 768px) { ... }

// Large devices (desktops, 992px and up) @media (min-width: 992px) { ... }

// Extra large devices (large desktops, 1200px and up) @media (min-width: 1200px) { ... }

Containers

  • container
  • container-sm
  • container-md
  • container-lg
  • container-xl
  • container-fluid

Grid system

  • row
  • col-12
  • col-sm-12
  • col-md-12
  • col-lg-12
  • col-xl-12
  • justify-content-md-center

Utilities for layout

{対象}-{breakpoint}-{value}みたいにするのよさそう。

  • d-{breakpoint}
  • d-{breakpoint}-{value}
    • none
    • inline
    • inline-block
    • block
    • table
    • table-cell
    • table-row
    • flex
    • inline-flex

Content

Images

  • img-fluid

Tables

  • table

Figures

  • figure
  • figure-img
  • figure-caption

コンポーネント

Glyphicons

アイコンフォントです。fontawesomeみたいなそういうのです。 - glyphicon - glyphicon-asterisk

Alerts

  • alert
  • alert-primary
  • alert-secondary
  • alert-success
  • alert-danger
  • alert-warning
  • alert-info
  • alert-light
  • alert-dark

Badges

  • badge (カテゴリ分けしたり、Newとかのラベル)
  • badge-primary
  • badge-secondary
  • badge-success
  • badge-danger
  • badge-warning
  • badge-info
  • badge-light
  • badge-dark
  • badge-pill (形状)

Breadcrumbs

  • breadcrumb

Button (Button groups, Button dropdowns)

ボタングループとボタン自体のmodifierみたいなクラス群です。 - btn-group - btn - btn-default - btn-toolbar - btn-group-lg - btn-group-justified - btn-primary - btn-success - btn-info - btn-warning - btn-danger - btn-lg (large) - btn-sm (small) - btn-xs (extra small)

Cards

  • card
  • card-title
  • card-body
  • card-text

Dropdowns

ドロップダウンだけどselectタグで出来ているわけではなく、上に表示されるものもあります。 - dropdown - dropup

Input groups

  • input-group
  • form-control (inputタグに付与するクラス)
  • input-group-lg
  • input-group-sm

Jumbotron

  • jumbotron

List group

  • list-group
  • list-group-item

Modal

  • modal

Navs

  • nav
  • nav-tabs

Navbar

  • navbar
  • navbar-default
  • navbar-brand
  • navbar-left
  • navbar-right
  • navbar-fixed-top
  • navbar-fixed-bottom
  • navbar-static-top
  • navbar-header
  • navbar-inverse

Pagination

  • pagination (1, 2, 3, 4, 5とか数字でページ指定するモジュール)
  • pagination-lg
  • pagination-sm

Popovers

  • popover (弾けて飛び出るの意)

Progress

  • progress
  • progress-bar

Spinners

  • spinner
  • spinner-border
  • spinner-grow

Thumbnails

  • thumbnail

状態を表すもの(modifierとして使われているようなもの)

  • disabled
  • active (タブ、)
  • stacked (縦に並べるとき、積み上げ)
  • justified
  • collapsed
  • inverse
  • rounded
  • horizontal
  • vertical
  • float-left
  • float-right
  • fluid (流体)
  • visible (表示状態)
  • hidden (display: none;の状態)
  • invisible (visibility: hidden;の状態)

サイズを表すもの

  • xl
  • lg
  • md
  • sm
  • xs

その他の単語(単体で使われてるもの)

  • divider (仕切り)
  • separator
  • caret
  • caption

Bootstrapではない参考クラス名

  • reveal (詳細な説明文などの要素が付加されているパターンにつけるmodifier名)
  • collection (リストグループと同じ意味)
  • collection-item (リストアイテムと同じ意味)
  • floating (position: fixed;で付いてくるときのmodifier名)
  • icon (glyphicon)

気づいたこと

  • info => warning => danger ぐらいで重要度を表現するのもよさそうだけど現場によっては3段階では足りなさそう

ドキュメントの背景を透明にする | Affinity Designer その0005

はじめに

ドキュメントの背景を透明にします。

pngなどで書き出すときに便利だと思います。

背景は別途オブジェクトで配置する手もあるかと思います。

公式ページ

公式ページでは以下のページで説明されています。

Affinity Designerヘルプ

引用になりますが、以下のように説明されています。

[透明な背景]—オンにすると、ページの背景が透明になります。

自分も説明

ウィンドウ上部のメニューから以下の画像のように「ファイル」「ドキュメント設定」の順にクリックします。

f:id:nakano_pixy:20190531162541p:plain

以下のようなダイアログボックスが開いたら、「カラー」タブをクリックし「透明な背景」にチェックを入れて「OK」をクリックすると背景が透明になります。

f:id:nakano_pixy:20190531162752p:plain

その他のこと

まだ私自身は機能を未確認ですが、アートボードの不透明度を設定する方法もあるようです。

Affinity Designerヘルプ

オブジェクトの配置座標を数値入力で正確に設定する | Affinity Designer その0004

はじめに

オブジェクトの配置座標を数値入力で正確に設定します。

公式ページ

公式ページでは以下のページで説明されています。

Affinity Designerヘルプ

自分も説明

以下の画像の右下にあるパネルから「変換」タブをクリックします。

左上や中心など基準となる点を選択して、XとYを入力することで正確な配置ができます。

f:id:nakano_pixy:20190531145852p:plain

右下部分だけ拡大すると以下のようになっています。

f:id:nakano_pixy:20190531150215p:plain

オブジェクトを回転したり傾斜させる | Affinity Designer その0003

はじめに

オブジェクトを回転させたり、斜めに歪ませるような変形をします。

公式ページ

公式ページでは以下のページで説明されています。

Affinity Designerヘルプ

自分も説明

以下の画像の右下にあるパネルから「変換」タブをクリックします。

左上や中心など基準となる点を選択して、回転や傾斜ができます。

f:id:nakano_pixy:20190531145852p:plain

右下部分だけ拡大すると以下のようになっています。

f:id:nakano_pixy:20190531150215p:plain