投稿一覧

はじめに **BEM（Block-Element-Modifier：ベム）**の理解が曖昧だったので、整理します。 BEMとは HTMLの要素をBlock、Element、Modifierで分けて命名すること。 Blockはパーツ自体を表す Elementはパーツの部品 Modifierはパーツの状態 Block__Element--Modifier の形式で書く 各名前が複数単語の場合は、-(ハイフン)で繋ぐ BEMのメリデメ BEMの特徴は、明確な要素を指定したCSSできようですが、以下のメリデメがあります。 メリット CSSの他のパーツへの影響を考えなくてよい セレクタを入れ子にしない => 優先度問題を解消 広く使われている デメリット class名が長くなる 全ての要素にclass名を付けるので面倒 Bootstrapと相性が悪い（BootstrapはOOCSSを採用している） 例 logo__company-name この例では、Block__Elementの形式で、Modifier指定していません。 .article-list { width: 100%; &__article-title { font-size: 20px; } } SASSだと、Elementを&で追加する。 .article-list { width: 100%; &__article-title { font-size: 20px; &--red { font-size: 20px; color: red; } } } Modifierも&で追加する。 命名規則がわかっていると、CSSから意図が汲み取れるので読みやすくなります。 参考 class名の命名規則BEMのルールとカスタマイズ ...

はじめに HTMLのviewportの理解が曖昧で、コピペでやり過ごしていました。 viewportは例えば以下のようなものです。 <meta name="viewport" content="width=device-width,initial-scale=1"> この記事では、viewportの意味を解き明かして行きたいと思います。 まずは基本 viewportは表示領域のこと <meta name="viewport" content="width=480"> とすると、幅480pxとして仮想的なモニターができるイメージ document.documentElement.clientWidth も480pxになるように計算される mediaクエリも480pxとして判定される ブラウザはこの仮想的なモニターをブラウザサイズに幅が合うように表示する <meta name="viewport" content="width=device-width"> と指定した場合はブラウザの幅が使用される 解像度は考慮されない 設定できる値の説明 width 表示領域の幅を指定できる。 width=device-widthで実際のデバイスの幅と一致させられる。 initial-scale 初期のズーム倍率。 minimum-scale～maximum-scaleを指定することで、ズーム範囲を指定できる。 minimum-scale: 0～10 の範囲、初期値は 0.25 maximum-scale: 0～10 の範囲、初期値は 1.6 user-scalable ズームの操作を許可するか、しないかを指定する。 注意したいところ モバイル端末で有効。ブラウザへのアドバイスとして使用される 指定しないと「ウィンドウ幅によってページコンテンツが隠されない最小の横幅」か「デフォルト値・980px」 ではどうすべきか 全ブラウザで、統一した表示をしたければwidthを指定する。 <meta name="viewport" content="width=360,initial-scale=1"> デバイスの画面サイズに応じてコンテンツの大きさを変えたい場合は、device-widthを指定する。 <meta name="viewport" content="width=device-width,initial-scale=1"> 参考 もう逃げない。HTMLのviewportをちゃんと理解する HTML：viewport の正しい書き方 ...

はじめに Cookieの設定をする時に、意外と色々パラメータがあります。 何度も調べては忘れるので、ここでわかりやすくまとめて調べるのは最後にしたいと思います。 パラメータの種類 GoogleChromeのDeveloperToolで調べると、以下のパラメータがあります。 Name Value Domain Path Expires/Max-Age Size HttpOnly Secure SameSite Sameparty Priority これらを対象にそれぞれのパラメータの意味と、設定される値について見ていきます。 Name/Value 早速説明を省きます。 Cookie名とCookieの値です。 Expires/Max-Age Cookieの有効期限です。 指定しない場合は、セッション終了までです。 Max-Ageの単位は秒です。 Domain どのホストの場合にCookieを送信するかを指定します。 デフォルトはCookieを保存したページのホストと同じページにアクセスした場合だけCookieを送信します。 例えば、example.com/page.htmlにアクセスした時に保存されたCookieは、同じくexample.com のホストのページにアクセスした場合に送信されます。 この時、サブドメインへアクセスしてもCookieは送信されません。 あえてDomainを指定し場合は、サブドメインを含めてCookieを送信できます。 Domainの設定は以下のように行います。 document.cookie = 'A=B; Domain=example.com'; Path PathはどのパスでCookieを送信するかを許可します。 Secure Httpsの通信でのみ使用できる。 document.cookie = 'A=B; Secure'; HttpOnly JavaScriptで生成されたCookieはこのフラグを含むことができない フラグを含む場合は、JavaScriptで取得もできない document.cookie = 'A=B; HttpOnly'; HttpとかHttpsとかに関連するCookieかと思うような名前ですが、Httpリクエスト経由でしか使用できないという意味のようですね。 SameSite 別サイトに遷移する時に、遷移先サイトのCookieを送信するかどうかを設定できます。 設定可能な値は、以下のStrict、Lax、Noneの3つです。 遷移元をAサイト、遷移先をBサイトとしましょう。 AサイトからBサイトへ遷移する時、BサイトのCookieが送信されるか設定によって以下のようになります。 Strict：BサイトのCookieを送信しない Lax：GETやHEADなど、安全なメソッドの場合だけ送信する None：制限なくBサイトのCookieを送信する Chromeでは、SameSiteが設定されていない場合は、Lax扱いになります。 また、Noneを指定する場合は、同時にSecrue属性が必須です。 つまり、制限なく別サイトにCookieを送信するには、HTTPS通信でないといけないということになります。 参考 Cookieで指定可能な属性の種類と設定方法 ...

はじめに GCPを使うにあたって、gcloudコマンドは必須です。 GCPのリソースを作成・管理するためのコマンドが含まれています。 この記事では、コマンドの使用方法の概要を整理します。 インストール 以下の手順でインストールできます。 インストール手順 インストールしなくてもCloudShellというGCPの画面直接gcloudコマンドが使用できます。 初期設定系のコマンド コマンド 説明 gcloud init gcloud ツールを初期化、承認、構成します。 gcloud version バージョンとインストールされているコンポーネントを表示します。 gcloud components install 特定のコンポーネントをインストールします。 gcloud components update Cloud SDK を最新バージョンに更新します。 gcloud config set project 作業するデフォルトの Google Cloud プロジェクトを設定します。 gcloud info 現在の gcloud ツール環境の詳細を表示します。 認証系 コマンド 説明 gcloud auth login Google ユーザー認証情報を使用して gcloud ツール用の Google Cloud アクセスを承認し、現在のアカウントをアクティブとして設定します。 gcloud auth activate-service-account gcloud auth login と同様ですが、サービス アカウントの認証情報を使用します。 gcloud auth list 認証情報が付与されているすべてのアカウントを一覧表示します。 gcloud auth print-access-token 現在のアカウントのアクセス トークンを表示します。 gcloud auth revoke アカウントのアクセス認証情報を削除します。 コンテナ系 コマンド 説明 gcloud auth configure-docker gcloud ツールを Docker 認証ヘルパーとして登録します。 gcloud container clusters create GKE コンテナを実行するためのクラスタを作成します。 gcloud container clusters list GKE コンテナを実行するためのクラスタを一覧表示します。 gcloud container clusters get-credentials kubeconfig を更新して、kubectl で GKE クラスタを使用するようにします。 gcloud container images list-tags コンテナ イメージのタグとダイジェスト メタデータを一覧表示します。 参照 gcloud コマンドライン ツールのクイック リファレンス 入門ガイド gcloud コマンドライン ツールの概要 ...

はじめに Dockerを扱う場合、様々なコマンドが登場します。 この投稿は、コマンドについて徒然とまとめる投稿です。 Docker基礎知識 Dockerの特徴と、よくある疑問をまとめます。 Infrastructure as Code Dockerはインフラの状態をコードとして管理できます。 Dockerfileはイメージの構成を定義します。 docker-compose.ymlはコンテナの構成を定義します。 テキストで構成を管理できるので、差分管理や共有が早く簡単になります。 DockerHubとは? Docker Hub はDocker社が管理するDockerイメージのレジストリ（保管場所）。 様々がDockerイメージが保存されており、ダウンロードして自分のコンテナ構成に組み込める。 Dockerのイメージとコンテナの違い DockerコンテナとはDockerイメージのインスタンスのこと。 イメージが設計図で、コンテナが実体。 Dockerのイメージとコンテナの違い VirtualBoxと何が違う？ Dockerは「コンテナ型仮想化」で、VirtualBoxは「ホスト型仮想化」。 ホスト型仮想化が、ゲストOSをシミュレートするため、リソースを多く消費する。 コンテナ型仮想化は、ホストOSから見ると単一プロセスで、ホストOSにカーネルを共有するため、消費リソースが少ない。 「Docker」を全く知らない人のために「Docker」の魅力を伝えるための「Docker」入門 DockerHubの操作 DockerHubにログイン docker login [OPTIONS] [SERVER] [flags] 例: docker login イメージの検索 DockerHubからイメージを検索できる。 docker search [OPTIONS] TERM イメージのダウンロード docker pull [OPTIONS] NAME[:TAG|@DIGEST] イメージのアップロード docker push [OPTIONS] NAME[:TAG] ローカルのDockerイメージの操作 イメージ一覧 ローカルのイメージ一覧を表示 docker images [OPTIONS] [REPOSITORY[:TAG]] 実行中コンテナを一覧。 イメージ詳細情報表示 docker inspect [OPTIONS] NAME|ID [NAME|ID...] 例：docker inspect ruby:2.6.5...

はじめに RubyOnRailsの学習のために、すぐにクリーンな環境を作り直せるDockerで環境構築をしていきます。 DockerDesktopはインストール前提です。 ファイルを作成 新規でディレクトリを作成します。 そのディレクトリに、以下の構成になるようにファイルを作成していきます。 . ├── Dockerfile ├── Gemfile ├── Gemfile.lock ├── docker-compose.yml └── entrypoint.sh Dockerfile作成 Dockerfileという名前でファイルを作成し、以下を記述します。 FROM ruby:2.7.0 # yarnをインストール RUN curl -sS https://dl.yarnpkg.com/debian/pubkey.gpg | apt-key add - && \ echo "deb https://dl.yarnpkg.com/debian/ stable main" | tee /etc/apt/sources.list.d/yarn.list # モジュールインストール RUN apt-get update -qq && apt-get install -y nodejs yarn # rails_appディレクトリを作成し、作業ディレクトリにする RUN mkdir /rails_app WORKDIR /rails_app # GemfileとGemfile.lockをコピーして、bundlerでインストールする COPY Gemfile /rails_app/Gemfile COPY Gemfile.lock /rails_app/Gemfile.lock RUN bundle install COPY ....

はじめに WordPressでオリジナルテーマ作成時に基本となる知識を整理しました。 テーマ階層 WordPressは以下のテンプレート階層に従って各種ページに対して適用されるテンプレートファイルを決定している。 ページにアクセスした場合、この図の左から順番に優先的に最適なテンプレートが選び出される。 index.phpは全てのページに適用される最も優先度が低いテンプレートファイルです。 テンプレート階層 テーマの最小構成 テーマを作成するのに必要な最低限のファイルは以下です。 index.php style.css WordPressで理解必須のループ ループとはWordPressの投稿を表示するために使用される処理です。 テンプレートタグ やプラグインの一部の説明で、このタグ（プラグイン）はループ内で使いますとある場合、そのタグはループの中で使う必要があります。 例として、the_title()（投稿のタイトルを取得する）は、ループ内でしか使用できません。 ループは以下のように書きます。 <?php if ( have_posts() ) { while ( have_posts() ) { the_post(); // // 投稿がここに表示される // } // end while } // end if ?> 参考 ループ ...